├── src ├── components │ ├── lesson-table │ │ ├── LessonTable.css │ │ └── LessonTable.js │ ├── table │ │ ├── Table.css │ │ └── Table.js │ ├── lessons │ │ ├── Lessons.css │ │ ├── lesson-item │ │ │ ├── LessonItem.css │ │ │ └── LessonItem.js │ │ └── Lessons.js │ ├── settings │ │ └── Settings.js │ ├── attendance │ │ └── Attendance.js │ ├── student │ │ ├── Student.css │ │ ├── Student.jsx │ │ ├── new-student │ │ │ ├── NewStudent.css │ │ │ └── NewStudentd.jsx │ │ └── new-group │ │ │ └── NewGroup.jsx │ ├── loader │ │ ├── Loader.css │ │ └── Loader.js │ ├── dashboard │ │ └── Dashboard.js │ ├── charts │ │ ├── Chart.js │ │ ├── chartdiogram │ │ │ ├── Diogram.jsx │ │ │ ├── diogram.css │ │ │ └── chartdiogra.jsx │ │ └── chartround │ │ │ ├── chart.css │ │ │ ├── ChartPart.jsx │ │ │ └── Charts.jsx │ ├── message │ │ ├── Messages.js │ │ └── Messages.css │ ├── teacher │ │ ├── Teacher.css │ │ ├── Teacher.js │ │ └── new-teacher │ │ │ ├── Newteacher.css │ │ │ └── NewTeacher.js │ ├── footer │ │ ├── Footer.css │ │ └── Footer.jsx │ ├── notifications │ │ ├── Notifications.js │ │ └── Notifications.css │ ├── personal │ │ ├── Personal.css │ │ └── Personal.jsx │ ├── sidebar │ │ ├── Sidebar.js │ │ └── Sidebar.css │ ├── list-teacher │ │ ├── ListTeacher.js │ │ └── ListTeacher.css │ ├── header │ │ ├── Header.css │ │ └── Header.js │ └── payment │ │ ├── Payment.css │ │ └── Payment.js ├── assets │ ├── logo.png │ ├── banner_image.png │ ├── personal-svg │ │ ├── location.svg │ │ ├── dog.svg │ │ ├── call.svg │ │ ├── medal.svg │ │ └── foyiz.svg │ ├── UI-icons │ │ ├── times.svg │ │ ├── succes.svg │ │ ├── exclamation.svg │ │ ├── lesspng.svg │ │ ├── money-bill.svg │ │ ├── search.svg │ │ ├── search2.svg │ │ ├── teacher-tab.svg │ │ ├── dashboard.svg │ │ ├── Mark.svg │ │ ├── info.svg │ │ ├── money-lg.svg │ │ ├── money2.svg │ │ ├── table.svg │ │ ├── student.svg │ │ ├── student-lg.svg │ │ ├── Student2.svg │ │ ├── teacher.svg │ │ ├── money.svg │ │ ├── setting.svg │ │ ├── calendar.svg │ │ ├── groups-lg.svg │ │ └── groups2.svg │ ├── logo_small.svg │ ├── Darkmode.js │ └── Lightmode.js ├── apis │ └── new-teacher.js ├── redux │ ├── reducers │ │ ├── index.js │ │ └── authReducer.js │ ├── store │ │ └── store.js │ └── actions │ │ └── authActions.js ├── routes │ ├── admin │ │ ├── Admin.css │ │ └── Admin.js │ ├── private │ │ └── PrivateRoute.jsx │ ├── home │ │ ├── Home.js │ │ └── Home.css │ └── auth │ │ ├── Login.css │ │ └── Login.js ├── index.js ├── App.js ├── static │ ├── Rooms_Static.js │ ├── Sidebar_Static.js │ └── Table_Static.js └── index.css ├── public ├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── manifest.json └── index.html ├── .gitignore ├── package.json └── README.md /src/components/lesson-table/LessonTable.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/table/Table.css: -------------------------------------------------------------------------------- 1 | .table_tabs{ 2 | margin: 0px; 3 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheBinary-Inc/edify-front/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheBinary-Inc/edify-front/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheBinary-Inc/edify-front/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheBinary-Inc/edify-front/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/banner_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheBinary-Inc/edify-front/HEAD/src/assets/banner_image.png -------------------------------------------------------------------------------- /src/apis/new-teacher.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const instance = axios.create({ 4 | baseURL: "http://localhost:8000/teacher/" 5 | }) 6 | 7 | export default instance; -------------------------------------------------------------------------------- /src/components/lessons/Lessons.css: -------------------------------------------------------------------------------- 1 | .lessons{ 2 | padding: 40px 0px; 3 | display: flex; 4 | flex-wrap: wrap; 5 | } 6 | 7 | .lesson-days{ 8 | width: 100%; 9 | display: flex; 10 | } -------------------------------------------------------------------------------- /src/redux/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from "redux"; 2 | import authReducer from "./authReducer"; 3 | 4 | const rootReducer = combineReducers({ 5 | user: authReducer 6 | }) 7 | 8 | export default rootReducer; -------------------------------------------------------------------------------- /src/components/settings/Settings.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Settings = () => { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default Settings 12 | -------------------------------------------------------------------------------- /src/components/attendance/Attendance.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Attendance = () => { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default Attendance 12 | -------------------------------------------------------------------------------- /src/components/student/Student.css: -------------------------------------------------------------------------------- 1 | #auto{ 2 | width: 100%; 3 | justify-content: space-evenly; 4 | } 5 | 6 | .route__title{ 7 | font-size: 48px; 8 | margin: 20px 0px 10px 0px; 9 | font-family: var(--main-font-poppins); 10 | } -------------------------------------------------------------------------------- /src/components/lesson-table/LessonTable.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const LessonTable = () => { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default LessonTable 12 | -------------------------------------------------------------------------------- /src/components/loader/Loader.css: -------------------------------------------------------------------------------- 1 | .loader{ 2 | animation: 0.5s spin linear infinite; 3 | } 4 | 5 | @keyframes spin { 6 | from{ 7 | transform: rotate(0); 8 | } 9 | to{ 10 | transform: rotate(360deg); 11 | } 12 | } -------------------------------------------------------------------------------- /src/redux/store/store.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux'; 2 | import rootReducer from '../reducers'; 3 | 4 | const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); 5 | 6 | export default store; -------------------------------------------------------------------------------- /src/components/loader/Loader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Loader.css' 3 | import { BiLoaderAlt } from 'react-icons/bi' ; 4 | 5 | const Loader = ({loaderStyle}) => { 6 | return ( 7 | 8 | ) 9 | } 10 | 11 | export default Loader 12 | -------------------------------------------------------------------------------- /src/components/dashboard/Dashboard.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Chart from '../charts/Chart'; 3 | 4 | const Dashboard = () => { 5 | return ( 6 |
7 |

Boshqaruv

8 | 9 |
10 | ) 11 | } 12 | 13 | export default Dashboard 14 | -------------------------------------------------------------------------------- /src/routes/admin/Admin.css: -------------------------------------------------------------------------------- 1 | .admin__container{ 2 | min-width: 1366px; 3 | height: 1120px; 4 | display: flex; 5 | margin: 50px auto; 6 | align-items: center; 7 | max-width: 2500px; 8 | } 9 | 10 | .main__container{ 11 | max-width: 2000px; 12 | margin-top: -55px; 13 | margin-right: 32px; 14 | flex: 1; 15 | height: 1120px; 16 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/components/charts/Chart.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ChartPart from "../charts/chartround/ChartPart" 3 | import Diogramma from '../charts/chartdiogram/Diogram' 4 | 5 | function Chart() { 6 | return ( 7 |
8 | 9 | 10 |
11 | ) 12 | } 13 | 14 | export default Chart -------------------------------------------------------------------------------- /src/redux/actions/authActions.js: -------------------------------------------------------------------------------- 1 | const authUserSuccess = (userdata) => { 2 | return { 3 | type: "AUTH_USER_SUCCESS", 4 | payload: { 5 | user: userdata, 6 | message: userdata.message, 7 | status: 200 8 | } 9 | } 10 | } 11 | 12 | const authUserFail = () => { 13 | return { 14 | type: "AUTH_USER_FAIL", 15 | payload: { 16 | message: "Smth went wrong!", 17 | status: 401 18 | } 19 | } 20 | } 21 | 22 | export { authUserFail, authUserSuccess } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import store from './redux/store/store'; 6 | import { Provider } from 'react-redux'; 7 | import { BrowserRouter } from 'react-router-dom'; 8 | 9 | ReactDOM.render( 10 | 11 | 12 | 13 | 14 | 15 | 16 | , 17 | document.getElementById('root') 18 | ); -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { Switch, Route } from 'react-router-dom'; 2 | import Admin from './routes/admin/Admin'; 3 | import Login from './routes/auth/Login'; 4 | import Home from './routes/home/Home'; 5 | import PrivateRoute from './routes/private/PrivateRoute'; 6 | 7 | function App() { 8 | return ( 9 | <> 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | 19 | export default App; -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/routes/private/PrivateRoute.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useSelector } from "react-redux"; 3 | import { Route, Redirect, useLocation } from "react-router-dom"; 4 | 5 | const PrivateRoute = (props) => { 6 | const user = useSelector(state => state.user); 7 | const location = useLocation(); 8 | return !user?.isAuthenticated ? ( 9 | 10 | ) : ( 11 | 19 | ); 20 | }; 21 | 22 | export default PrivateRoute; 23 | -------------------------------------------------------------------------------- /src/components/message/Messages.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Messages.css'; 3 | 4 | const Messages = () => { 5 | 6 | return ( 7 |
8 |

Xabarlar

9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | ) 19 | } 20 | 21 | export default Messages -------------------------------------------------------------------------------- /src/redux/reducers/authReducer.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | user: null, 3 | error: false, 4 | message: '', 5 | status: null, 6 | isAuthenticated: false 7 | } 8 | 9 | const authReducer = (state = initialState, action) => { 10 | switch(action.type){ 11 | case "AUTH_USER_SUCCESS": 12 | return { 13 | user: action.payload.user, 14 | message: action.payload.message, 15 | status: action.payload.status, 16 | isAuthenticated: true, 17 | error: false 18 | } 19 | case "AUTH_USER_FAIL": 20 | return { 21 | ...state, 22 | message: action.payload.message, 23 | status: action.payload.status, 24 | error: true 25 | } 26 | default: 27 | return state 28 | } 29 | } 30 | 31 | export default authReducer; -------------------------------------------------------------------------------- /src/assets/personal-svg/location.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/teacher/Teacher.css: -------------------------------------------------------------------------------- 1 | .tabs{ 2 | width: 100%; 3 | margin: 0px auto; 4 | height: 100px; 5 | box-shadow: var(--main-buildingblock-shadow); 6 | border-radius: var(--main-headerbox-border-radius); 7 | display: flex; 8 | align-items: center; 9 | justify-content: space-between; 10 | padding: 20px; 11 | } 12 | 13 | .teacher_tab{ 14 | padding: 20px 40px ; 15 | font-size: 30px; 16 | white-space: nowrap; 17 | color: var( --secondary-font-color); 18 | text-decoration: none; 19 | border-radius: var(--main-headerbox-border-radius); 20 | } 21 | 22 | .teacher_activetab{ 23 | border-radius: var(--main-headerbox-border-radius); 24 | background-color: var(--secondary-extractedblock-active-color); 25 | padding: 20px 40px ; 26 | font-size: 30px; 27 | white-space: nowrap; 28 | color: #fff; 29 | text-decoration: none; 30 | } -------------------------------------------------------------------------------- /src/components/lessons/lesson-item/LessonItem.css: -------------------------------------------------------------------------------- 1 | .lesson-item{ 2 | /* width: 350px; */ 3 | height: 220px; 4 | padding: 10px; 5 | margin: 15px 22px; 6 | border-radius: var(--main-buildingblock-border-radius); 7 | box-shadow: var(--main-buildingblock-shadow); 8 | } 9 | 10 | .lesson-room{ 11 | min-width: 70px; 12 | /* min-height: 70px; */ 13 | width: 70px; 14 | height: 70px; 15 | border-radius: 50%; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | color: #fff; 20 | font-size: 25px; 21 | } 22 | 23 | .lesson-room-full{ 24 | width: 100%; 25 | height: 45px; 26 | border-radius: 0px; 27 | display: flex; 28 | align-items: center; 29 | justify-content: center; 30 | color: #fff; 31 | border-radius: 25px 25px 0px 0px; 32 | font-size: 25px; 33 | } 34 | 35 | .lesson-room > h2{ 36 | font-weight: 500; 37 | } -------------------------------------------------------------------------------- /src/components/lessons/lesson-item/LessonItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './LessonItem.css'; 3 | 4 | const LessonItem = ({id, roomNumber, roomInfo, allrooms}) => { 5 | const detectRoomState = ({busy, ordered}) => { 6 | if(busy){ 7 | return { background: "red"} 8 | } 9 | else if(ordered){ 10 | return { background: "gold"} 11 | } 12 | else if(!busy){ 13 | return { background: "green"} 14 | } 15 | } 16 | 17 | return ( 18 |
19 |
20 |

{roomNumber}

21 |
22 |

{roomInfo.roomType}

23 |
24 | ) 25 | } 26 | 27 | export default LessonItem 28 | -------------------------------------------------------------------------------- /src/components/footer/Footer.css: -------------------------------------------------------------------------------- 1 | .footer{ 2 | width: 100%; 3 | height: 447px; 4 | } 5 | .footer_top_part{ 6 | width: 100%; 7 | height: calc(100% - 103px); 8 | background-color: #FAFAFA; 9 | display: flex; 10 | align-items: center; 11 | padding: 0px 15%; 12 | } 13 | .footer_bottom_part{ 14 | width: 100%; 15 | padding: 0px 15%; 16 | height: 103px; 17 | background-color: #F5F5F5; 18 | display: flex; 19 | align-items: center; 20 | justify-content: space-between; 21 | } 22 | .footer_collection{ 23 | list-style-type: none; 24 | } 25 | .footer_collection > li > p{ 26 | color: #24242E; 27 | font-weight: 600; 28 | font-size: 26px; 29 | } 30 | .footer_collection > li{ 31 | margin-top: 24px; 32 | width: 300px; 33 | } 34 | .footer_bottom_part > img{ 35 | height: 50px; 36 | } 37 | .footer_bottom_part > p{ 38 | margin-right: 100px; 39 | 40 | } -------------------------------------------------------------------------------- /src/assets/UI-icons/times.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/routes/admin/Admin.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Admin.css' 3 | import Sidebar from '../../components/sidebar/Sidebar' 4 | import Header from '../../components/header/Header'; 5 | import { Switch, Route, useRouteMatch } from 'react-router-dom'; 6 | import { SIDEBAR_STATIC_DATA } from '../../static/Sidebar_Static'; 7 | 8 | const Admin = () => { 9 | const { path } = useRouteMatch(); 10 | return ( 11 |
12 | 13 |
14 |
15 | 16 | { 17 | SIDEBAR_STATIC_DATA?.map(sidebar__item => 18 | 19 | {sidebar__item.component} 20 | 21 | ) 22 | } 23 | 24 |
25 |
26 | ) 27 | } 28 | 29 | export default Admin 30 | -------------------------------------------------------------------------------- /src/assets/personal-svg/dog.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/message/Messages.css: -------------------------------------------------------------------------------- 1 | .messages{ 2 | width: 431px; 3 | height: 453px; 4 | background-color: #fff; 5 | box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.06); 6 | border-radius: 24px; 7 | } 8 | .messages_text{ 9 | margin-top: 29px; 10 | margin-left: 30px; 11 | color: #313131; 12 | font-size: 24px; 13 | font-family: 'Poppins', sans-serif; 14 | font-weight: 500; 15 | } 16 | .messages_container{ 17 | width: 100%; 18 | height: calc(453px - 125px); 19 | margin-top: 38px; 20 | display: grid; 21 | justify-content: center; 22 | overflow-x: auto; 23 | 24 | } 25 | .messages_container::-webkit-scrollbar{ 26 | display: none; 27 | } 28 | .one{ 29 | background: #FACAC7; 30 | } 31 | .message{ 32 | width: 384px; 33 | height: 75px; 34 | box-shadow: 0px 0px 10px rgba(116, 115, 115, 0.25); 35 | border-radius: 10px; 36 | margin-top: 26px; 37 | display: grid; 38 | align-items: center; 39 | justify-content: center; 40 | } 41 | .three{ 42 | width: 360px; 43 | } 44 | .four{ 45 | width: 331px; 46 | height: 75px; 47 | } -------------------------------------------------------------------------------- /src/components/notifications/Notifications.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Notifications.css' 3 | import { Messages_Static } from "../../static/Rooms_Static"; 4 | 5 | function Notifications() { 6 | return ( 7 |
8 | 9 | 10 |
11 |

Barcha xabarlar

12 |
13 | { 14 | Messages_Static?.map(messages => 15 |
16 | {messages.message}... 17 | batafsil 18 | 19 |
20 | ) 21 | } 22 |
23 |
24 |
25 | ) 26 | } 27 | 28 | export default Notifications 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "edify", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^12.0.0", 8 | "@testing-library/user-event": "^13.2.1", 9 | "axios": "^0.26.1", 10 | "gsap": "^3.9.1", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-icons": "^4.3.1", 14 | "react-modern-calendar-datepicker": "^3.1.6", 15 | "react-redux": "^7.2.8", 16 | "react-router": "^6.2.2", 17 | "react-router-dom": "5.3.0", 18 | "react-scripts": "5.0.0", 19 | "recharts": "^2.1.9", 20 | "redux": "^4.1.2", 21 | "web-vitals": "^2.1.0" 22 | }, 23 | "scripts": { 24 | "start": "react-scripts start", 25 | "build": "react-scripts build", 26 | "test": "react-scripts test", 27 | "eject": "react-scripts eject" 28 | }, 29 | "eslintConfig": { 30 | "extends": [ 31 | "react-app", 32 | "react-app/jest" 33 | ] 34 | }, 35 | "browserslist": { 36 | "production": [ 37 | ">0.2%", 38 | "not dead", 39 | "not op_mini all" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/components/lessons/Lessons.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import LessonItem from "./lesson-item/LessonItem"; 3 | import "./Lessons.css"; 4 | 5 | const Lessons = ({ Room_Static, allrooms }) => { 6 | const dchj = []; 7 | const spsh = []; 8 | 9 | Room_Static.forEach((room) => { 10 | if (room.roomInfo.day === "DCHJ") { 11 | dchj.push(room); 12 | } else { 13 | spsh.push(room); 14 | } 15 | }); 16 | return ( 17 |
18 |

Dushanba-Chorshanba-Juma

19 |
20 | {dchj.map(({ id, roomNumber, roomInfo }) => ( 21 | 28 | ))} 29 |
30 |

Seshanba-Payshanba-Shanba

ce 31 |
32 | {spsh.map(({ id, roomNumber, roomInfo }) => ( 33 | 40 | ))} 41 |
42 |
43 | ); 44 | }; 45 | 46 | export default Lessons; 47 | -------------------------------------------------------------------------------- /src/components/charts/chartdiogram/Diogram.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Diogram from './chartdiogra' 3 | import "./diogram.css" 4 | 5 | 6 | function Diogramma() { 7 | return ( 8 |
9 | <> 10 |
11 |

Oylik maosh va to'lovlar

12 |
13 |
14 |
15 |

To'lov soni

16 |
17 |
18 |
19 |
20 |

Oylik maosh

21 |
22 |
23 |
24 |
25 | 26 |
27 | 28 | 29 | 30 |
31 | 32 |
33 | ) 34 | } 35 | 36 | export default Diogramma -------------------------------------------------------------------------------- /src/components/charts/chartround/chart.css: -------------------------------------------------------------------------------- 1 | .ChartPart__first__chart { 2 | height: 200px; 3 | width: 200px; 4 | } 5 | 6 | .chartpart__main { 7 | width: 304px; 8 | height: 452px; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: space-evenly; 12 | align-items: center; 13 | background: #FFFFFF; 14 | box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.06); 15 | border-radius: 24px; 16 | } 17 | 18 | .chartpart__main h1 { 19 | font-size: 24px; 20 | } 21 | 22 | .chartpart__main__last__parts { 23 | display: flex; 24 | width: 250px; 25 | height: 30px; 26 | justify-content: space-between; 27 | align-items: center; 28 | } 29 | 30 | .chartpart__main__last__parts__first { 31 | height: 40px; 32 | display: flex; 33 | align-items: center; 34 | justify-content: space-between; 35 | 36 | } 37 | 38 | .chartpart__main__last__parts__first h3 { 39 | color: #717579; 40 | font-size: 14px; 41 | padding-left: 7px; 42 | } 43 | 44 | .chartpart__main__last__parts__first button, 45 | .chartpart__main__last__parts__first__btn2 { 46 | width: 11px; 47 | height: 11px; 48 | border-radius: 4px; 49 | border: none; 50 | background: linear-gradient(#EF4136 100%, #B60000 100%); 51 | } 52 | 53 | .chartpart__main__last__parts__first__btn2{ 54 | background: #FACAC7 !important; 55 | } 56 | -------------------------------------------------------------------------------- /src/components/charts/chartdiogram/diogram.css: -------------------------------------------------------------------------------- 1 | .diogram { 2 | width: 718px; 3 | height: 452px !important; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: space-evenly; 7 | background: #FFFFFF; 8 | box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.06); 9 | border-radius: 24px; 10 | margin-left: 30px; 11 | /* padding: 30px; */ 12 | } 13 | 14 | .diogram h1 { 15 | font-size: 24px; 16 | padding: 5px 0 0 30px; 17 | } 18 | 19 | .diogram__color { 20 | width: 350px; 21 | height: 30px; 22 | display: flex; 23 | margin-left: 80px; 24 | /* background-color: green; */ 25 | } 26 | 27 | 28 | .chartpart__main__last__parts__first1 { 29 | height: 40px; 30 | padding-right: 27px; 31 | display: flex; 32 | align-items: center; 33 | justify-content: space-between; 34 | 35 | } 36 | 37 | .chartpart__main__last__parts__first1 h3 { 38 | color: #717579; 39 | font-size: 14px; 40 | padding-left: 7px; 41 | } 42 | 43 | .chartpart__main__last__parts__first1 button, 44 | .chartpart__main__last__parts__first__btn2__1 { 45 | width: 11px; 46 | height: 11px; 47 | border-radius: 4px; 48 | border: none; 49 | background: #0968C0; 50 | } 51 | 52 | .chartpart__main__last__parts__first__btn2__1 { 53 | background: #FF4062 !important; 54 | } 55 | 56 | Area { 57 | background-color: hotpink !important; 58 | } -------------------------------------------------------------------------------- /src/components/charts/chartround/ChartPart.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Example from './Charts' 3 | import "./chart.css" 4 | 5 | function ChartPart() { 6 | return ( 7 |
8 | <> 9 |
10 |

O'quvchilar oqimi

11 |
12 | 13 |
14 |
15 |
16 |
17 |

Kelmaganlar

18 |
19 |

66 ta

20 |
21 |
22 |
23 |

Kelganlar

24 |
25 |

129 ta

26 |
27 |
28 |
29 | 30 |
31 | ) 32 | } 33 | 34 | export default ChartPart -------------------------------------------------------------------------------- /src/components/student/Student.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Student.css'; 3 | import NewStudent from './new-student/NewStudentd'; 4 | import { Switch, NavLink, Route, useRouteMatch } from 'react-router-dom'; 5 | import NewGroup from './new-group/NewGroup'; 6 | 7 | const Student = () => { 8 | const { url, path } = useRouteMatch(); 9 | return ( 10 |
11 |

O'quvchilar

12 |
13 | 14 | 19 | O'quvchi qo'shish 20 | 21 | 26 | Yangi guruh yaratish 27 | 28 | 33 | Shaxsiy ma'lumot 34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
45 | ) 46 | } 47 | 48 | export default Student 49 | -------------------------------------------------------------------------------- /src/routes/home/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './Home.css' 3 | import {Link} from "react-router-dom" 4 | import logoLarge from "../../assets/logo.svg"; 5 | import Footer from '../../components/footer/Footer'; 6 | import banner_image from "../../assets/banner_image.png" 7 | 8 | const Home = () => { 9 | 10 | return ( 11 |
12 | 25 |
26 |
27 |

Start your learning our experts trainers

28 |

Build your skill from world-class universities and companies, you can learn online and earn certifications and degrees.

29 |
30 | 31 |
32 |
33 |
34 | ) 35 | } 36 | 37 | export default Home 38 | -------------------------------------------------------------------------------- /src/components/footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Footer.css'; 3 | import logo from './logo.svg'; 4 | 5 | const Footer = () => { 6 | return ( 7 |
8 |
9 |
    10 |

  • Servicec

    • 11 |
  • Online Instructor
    • 12 |
  • Premium E Course
    • 13 |
  • E Books
    • 14 |
  • Our Blogs
    • 15 |
16 |
    17 |

  • Servicec

    • 18 |
  • Online Instructor
    • 19 |
  • Premium E Course
    • 20 |
  • E Books
    • 21 |
  • Our Blogs
    • 22 |
23 |
    24 |

  • Servicec

    • 25 |
  • Online Instructor
    • 26 |
  • Premium E Course
    • 27 |
  • E Books
    • 28 |
  • Our Blogs
    • 29 |
30 |
    31 |

  • Servicec

    • 32 |
  • Follow us on social media and stay updated with the latest information about our services
    • 33 |
34 |
35 |
36 | 37 |

© Skillcare 2021 all rights reserved

38 |
39 |
40 | ) 41 | } 42 | 43 | export default Footer -------------------------------------------------------------------------------- /src/assets/UI-icons/succes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/UI-icons/exclamation.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/logo_small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/UI-icons/lesspng.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/UI-icons/money-bill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/personal-svg/call.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/assets/UI-icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/UI-icons/search2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/personal/Personal.css: -------------------------------------------------------------------------------- 1 | .personal_container{ 2 | width: 100%; 3 | height: 757px; 4 | margin-top: 35px; 5 | box-shadow:var( --main-buildingblock-shadow); 6 | border-radius: var(--main-headerbox-border-radius); 7 | display: flex; 8 | justify-content: space-between; 9 | 10 | } 11 | 12 | .information_wrapper{ 13 | width: 500px; 14 | height: 750px; 15 | display: flex; 16 | align-items: center; 17 | flex-direction: column; 18 | } 19 | 20 | .information_wrapper .profile{ 21 | width: 250px; 22 | height: 250px; 23 | border-radius: 50%; 24 | margin-top: 50px; 25 | background: linear-gradient(180deg, rgba(179, 179, 179, 0.62) 0%, rgba(0, 0, 0, 0.62) 100%); 26 | } 27 | 28 | .information_wrapper h1{ 29 | font-size: 64px; 30 | font-weight: 500; 31 | margin: 30px 0px; 32 | text-align: justify; 33 | 34 | } 35 | 36 | .information_wrapper span{ 37 | font-size: 30px; 38 | margin: 10px 0px; 39 | font-weight: 500; 40 | } 41 | 42 | .contact{ 43 | width: 600px; 44 | height: 750px; 45 | } 46 | 47 | .location{ 48 | display: flex; 49 | align-items: center; 50 | margin-top: 42px; 51 | } 52 | 53 | .location span{ 54 | font-size: 24px; 55 | margin: 0px 15px; 56 | } 57 | 58 | .certificate{ 59 | width: 600px; 60 | height: 750px; 61 | display: flex; 62 | align-items: center; 63 | justify-content: space-evenly; 64 | flex-direction: column; 65 | } 66 | 67 | .certificate .certificate_img{ 68 | width: 80%; 69 | height: 50vh; 70 | background-color: cyan; 71 | } 72 | 73 | .certificate button{ 74 | width: 196px; 75 | height: 50px; 76 | background-color: #EF4136; 77 | border: none; 78 | outline: none; 79 | border-radius: 15px; 80 | color: #fff; 81 | font-size: 20px; 82 | } -------------------------------------------------------------------------------- /src/components/charts/chartround/Charts.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from "react"; 2 | import { PieChart, Pie, Cell } from "recharts"; 3 | const data = [ 4 | { name: "Group A", value: 66 }, 5 | { name: "Group B", value: 129 }, 6 | ]; 7 | const COLORS = ["#EF4136", "#FACAC7"]; 8 | 9 | export default class Example extends PureComponent { 10 | static demoUrl = 11 | "https://codesandbox.io/s/pie-chart-with-padding-angle-7ux0o"; 12 | 13 | render() { 14 | return ( 15 | 21 | 31 | {data.map((entry, index) => ( 32 | 33 | ))} 34 | 35 | 48 | {data.map((entry, index) => ( 49 | 50 | ))} 51 | 52 | 53 | ); 54 | } 55 | } -------------------------------------------------------------------------------- /src/components/table/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Table.css' 3 | import { NavLink, useRouteMatch, Switch, Route } from 'react-router-dom'; 4 | import { Room_Static } from '../../static/Rooms_Static'; 5 | import Lessons from '../lessons/Lessons'; 6 | 7 | const Table = () => { 8 | const { path, url } = useRouteMatch(); 9 | return ( 10 |
11 |

Darslar

12 |
13 | Darslar 14 | Barcha xonalar 15 | Bo'sh xonalar 16 | Band xonalar 17 | Band qilingan xonalar 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | !room.roomInfo.busy && !room.roomInfo.ordered )}/> 28 | 29 | 30 | room.roomInfo.busy)}/> 31 | 32 | 33 | room.roomInfo.ordered)}/> 34 | 35 | 36 | 37 |
38 | ) 39 | } 40 | 41 | export default Table 42 | -------------------------------------------------------------------------------- /src/components/student/new-student/NewStudent.css: -------------------------------------------------------------------------------- 1 | .new_student { 2 | width: 100%; 3 | height: 760px; 4 | display: flex; 5 | margin-top: 30px; 6 | border-radius: 25px; 7 | box-shadow: var(--main-headerbox-shadow); 8 | } 9 | 10 | 11 | 12 | .new_student > form { 13 | width: 90%; 14 | display: flex; 15 | align-items: center; 16 | margin: 0 auto; 17 | } 18 | 19 | .new_student > form > .first_column { 20 | width: 60%; 21 | height: 90%; 22 | display: flex; 23 | flex-direction: column; 24 | align-items: flex-start; 25 | justify-content: space-evenly; 26 | } 27 | 28 | .new_student > form > .second_column { 29 | width: 40%; 30 | height: 90%; 31 | display: flex; 32 | flex-direction: column; 33 | align-items: flex-start; 34 | margin-top: 15px; 35 | } 36 | 37 | .new_student input { 38 | width: 514px; 39 | height: 55px; 40 | margin-top: 5px; 41 | margin-bottom: 25px; 42 | border-radius: 15px; 43 | text-indent: 10px; 44 | font-size: 20px; 45 | outline: none; 46 | border: none; 47 | background-color: #f1f1f1; 48 | font-family: var(--main-font-poppins); 49 | } 50 | 51 | .new_student input:focus { 52 | border: 2px solid var(--secondary-extractedblock-active-color); 53 | } 54 | 55 | .new_student input::-webkit-inner-spin-button { 56 | display: none; 57 | } 58 | 59 | .new_student span { 60 | font-size: 20px; 61 | font-family: var(--main-font-poppins); 62 | margin-top: 20px; 63 | } 64 | 65 | .pasport_info { 66 | width: 530px; 67 | display: flex; 68 | } 69 | 70 | /* .pasport_info input::-webkit-calendar-picker-indicator { 71 | display: none; 72 | } */ 73 | 74 | .new_student > form .pasport_info input:first-child { 75 | width: 264px; 76 | } 77 | 78 | .new_student > form .pasport_info input:last-child { 79 | width: 219px; 80 | } 81 | 82 | .new_student .second_column > button { 83 | height: 50px; 84 | width: 196px; 85 | border-radius: 15px; 86 | background-color: #EF4136; 87 | color: #ffd; 88 | border: none; 89 | font-size: 20px; 90 | margin-top: 30px; 91 | } -------------------------------------------------------------------------------- /src/components/teacher/Teacher.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Switch, Route, NavLink, useRouteMatch } from "react-router-dom"; 3 | import ListTeacher from "../list-teacher/ListTeacher"; 4 | import Personal from '../personal/Personal'; 5 | import NewTeacher from "../teacher/new-teacher/NewTeacher"; 6 | import Notification from '../notifications/Notifications'; 7 | import "./Teacher.css"; 8 | 9 | const Teacher = () => { 10 | const { path, url } = useRouteMatch(); 11 | return ( 12 |
13 |

O'qituvchilar

14 |
15 | 20 | O'qituvchi qo'shish 21 | 22 | 27 | Guruhlar 28 | 29 | 34 | Shaxsiy ma'lumot 35 | 36 | 41 | O'qituvchilar ro'yxati 42 | 43 | 48 | Xabarlar 49 | 50 |
51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |
66 | ); 67 | }; 68 | 69 | export default Teacher; 70 | -------------------------------------------------------------------------------- /src/assets/Darkmode.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useSelector } from 'react-redux'; 3 | 4 | const Darkmode = () => { 5 | const themeState = useSelector(state => state.themeState); 6 | return 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | ; 33 | }; 34 | 35 | export default Darkmode; -------------------------------------------------------------------------------- /src/routes/auth/Login.css: -------------------------------------------------------------------------------- 1 | .login_page{ 2 | width: 100%; 3 | height: 100vh; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | } 8 | 9 | .login_panel{ 10 | display: flex; 11 | align-items: center; 12 | flex-direction: column; 13 | width: 500px; 14 | height: 650px; 15 | box-shadow: var(--main-buildingblock-shadow); 16 | border-radius: 15px; 17 | } 18 | 19 | .login_logo{ 20 | width: 200px; 21 | margin-top: 50px; 22 | } 23 | 24 | .login_title{ 25 | margin: 20px 0; 26 | font-size: 45px; 27 | } 28 | 29 | #login_form{ 30 | width: 100%; 31 | display: flex; 32 | flex-direction: column; 33 | align-items: center; 34 | } 35 | 36 | .login_input{ 37 | width: 80%; 38 | height: 45px; 39 | margin: 10px 10%; 40 | border-radius: 5px; 41 | font-size: 20px; 42 | text-indent: 10px; 43 | outline: none; 44 | border: 1px solid #a4a4a4; 45 | } 46 | 47 | .login_input:focus{ 48 | border: 1px solid #EF4136; 49 | box-shadow: 0px 0px 0px 4px #fea7a1; 50 | } 51 | 52 | .login_persist{ 53 | text-align: center; 54 | font-size: 20px; 55 | margin-top: 10px; 56 | } 57 | 58 | .persist_check{ 59 | margin-right: 10px; 60 | transform: scale(2); 61 | } 62 | 63 | .login_submit{ 64 | font-size: 20px; 65 | width: 300px; 66 | height: 45px; 67 | margin-top: 25px; 68 | background-color: #EF4136; 69 | border: none; 70 | border-radius: 5px; 71 | color: #fff; 72 | display: flex; 73 | align-items: center; 74 | justify-content: center; 75 | } 76 | 77 | .login_copyright{ 78 | font-size: 18px; 79 | color: gray; 80 | margin-top: 70px; 81 | } 82 | 83 | .login_validatealert{ 84 | display: flex; 85 | align-items: center; 86 | width: 90%; 87 | font-size: 18px; 88 | padding: 10px 0px; 89 | padding-left: 30px; 90 | } 91 | 92 | .login_validatealert > svg{ 93 | margin-right: 10px; 94 | } 95 | 96 | .server__message{ 97 | width: 80%; 98 | padding: 7px 0px; 99 | color: #fff; 100 | padding-left: 10px; 101 | border-radius: 4px; 102 | } -------------------------------------------------------------------------------- /src/assets/UI-icons/teacher-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/static/Rooms_Static.js: -------------------------------------------------------------------------------- 1 | export const Room_Static = [ 2 | { 3 | id: 0, 4 | roomNumber: 1, 5 | roomInfo: { 6 | busy: false, 7 | ordered: true, 8 | floor: 1, 9 | student_capacity: 14, 10 | roomType: "Kimyo", 11 | day: "DCHJ" 12 | } 13 | }, 14 | { 15 | id: 1, 16 | roomNumber: 2, 17 | roomInfo: { 18 | busy: true, 19 | ordered: false, 20 | floor: 1, 21 | student_capacity: 12, 22 | roomType: "Matematika", 23 | day: "SPSH" 24 | } 25 | }, 26 | { 27 | id: 2, 28 | roomNumber: 3, 29 | roomInfo: { 30 | busy: false, 31 | ordered: true, 32 | floor: 1, 33 | student_capacity: 16, 34 | roomType: "English", 35 | day: "SPSH" 36 | } 37 | }, 38 | { 39 | id: 3, 40 | roomNumber: 4, 41 | roomInfo: { 42 | busy: true, 43 | ordered: false, 44 | floor: 2, 45 | student_capacity: 20, 46 | roomType: "Axborot Texnologiya", 47 | day: "DCHJ" 48 | } 49 | }, 50 | { 51 | id: 4, 52 | roomNumber: 5, 53 | roomInfo: { 54 | busy: false, 55 | ordered: false, 56 | floor: 2, 57 | student_capacity: 15, 58 | roomType: "Axborot Texnologiya", 59 | day: "DCHJ" 60 | } 61 | } 62 | ] 63 | 64 | 65 | export const Messages_Static = [ 66 | { 67 | id: 0, 68 | message: "lorem ipsum dolor sit amet orem ipsum dolor sit amet orem ipsum dolor sit amet orem ipsum dolor sit amet" 69 | }, 70 | { 71 | id: 1, 72 | message: "lorem ipsum dolor sit amet orem ipsum dolor sit amet orem ipsum dolor sit amet orem ipsum dolor sit amet" 73 | }, 74 | { 75 | id: 2, 76 | message: "lorem ipsum dolor sit amet orem ipsum dolor sit amet orem ipsum dolor sit amet orem ipsum dolor sit amet" 77 | }, 78 | { 79 | id: 3, 80 | message: "lorem ipsum dolor sit amet orem ipsum dolor sit amet orem ipsum dolor sit amet orem ipsum dolor sit amet" 81 | } 82 | ] -------------------------------------------------------------------------------- /src/components/teacher/new-teacher/Newteacher.css: -------------------------------------------------------------------------------- 1 | .newTeacher { 2 | width: 100%; 3 | height: 800px; 4 | max-height: 780px; 5 | background-color: #fff; 6 | margin-top: 30px; 7 | display: flex; 8 | align-items: center; 9 | justify-content: space-around; 10 | /* position: relative; */ 11 | border-radius: var(--main-headerbox-border-radius); 12 | box-shadow: var(--main-buildingblock-shadow); 13 | font-family: var(--main-roboto-font); 14 | } 15 | 16 | .left { 17 | width: 50%; 18 | /* background-color: red; */ 19 | height: 640px; 20 | /* position: absolute; */ 21 | top: 20px; 22 | left: 80px; 23 | } 24 | 25 | .container { 26 | padding-left: 80px; 27 | margin: 0px 0px 31px 0; 28 | display: flex; 29 | flex-direction: column; 30 | } 31 | 32 | .container input { 33 | width: 80%; 34 | height: 55px; 35 | border: none; 36 | background-color: #F1F1F1; 37 | box-shadow: 0px 0px 2px 1px #e2e2e2; 38 | border-radius: 15px; 39 | text-indent: 15px; 40 | font-size: 18px; 41 | } 42 | 43 | .container input:focus { 44 | outline: 1px solid #FF3B30; 45 | } 46 | 47 | 48 | .container p { 49 | width: 277px; 50 | height: 30px; 51 | font-size: 20px; 52 | margin: 11px 3px; 53 | } 54 | 55 | .tags { 56 | width: 514px; 57 | height: 55px; 58 | display: flex; 59 | align-items: center; 60 | /* justify-content: space-between; */ 61 | margin-top: 31px; 62 | } 63 | 64 | .tags li { 65 | min-width: 200px; 66 | /* width: 200px; */ 67 | height: 51px; 68 | font-size: 20px; 69 | display: flex; 70 | align-items: center; 71 | justify-content: space-between; 72 | padding: 0px 16px; 73 | background-color: #F9655B; 74 | border-radius: 15px; 75 | color: #fff; 76 | margin-right: 10px; 77 | } 78 | 79 | .input_tags { 80 | width: 514px; 81 | height: 55px; 82 | font-size: 18px; 83 | text-indent: 15px; 84 | } 85 | 86 | .right { 87 | width: 50%; 88 | position: relative; 89 | right: -80px; 90 | top: -45px; 91 | } 92 | 93 | .add_btn { 94 | width: 196px; 95 | height: 50px; 96 | background-color: #EF4136; 97 | position: absolute; 98 | border-radius: 15px; 99 | bottom: 70px; 100 | font-size: 20px; 101 | color: #fff; 102 | border: none; 103 | display: flex; 104 | align-items: center; 105 | justify-content: center; 106 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); 3 | 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | font-family: var(--main-roboto-font); 9 | } 10 | 11 | :root { 12 | --main-headerbox-shadow: 0px 0px 14px 1px #0000001f; 13 | --main-headerbox-border-radius: 25px; 14 | --main-font-poppins: 'Poppins', sans-serif; 15 | --main-roboto-font: 'Roboto', sans-serif; 16 | --main-poppins-font: 'Poppins', sans-serif;; 17 | --main-buildingblock-shadow: 0px 0px 14px 1px #0000001f; 18 | --main-buildingblock-border-radius: 25px; 19 | --main-buildingblock-backgroundcolor: #fff; 20 | --main-buildingblock-softbackground: #F7F7F7; 21 | --main-extractedblock-circle: 50%; 22 | --main-warning: #f5d20c; 23 | --main-font-color: #000; 24 | --secondary-font-color: #5F5C5C; 25 | --secondary-extractedblock-border-radius: 15px; 26 | --secondary-extractedblock-font-color: #52555A; 27 | --secondary-extractedblock-active-bgcolor: #FACAC7; 28 | --secondary-extractedblock-active-color: #EF4136; 29 | --secondary-extractedblock-copyright-color: #776E6E; 30 | --active-mode: #0CA409; 31 | --darkmode-main-color: #0E1117; 32 | --darkmode-active-link: #202D46; 33 | --darkmode-active-link-color: #3576D9; 34 | } 35 | 36 | body { 37 | margin: 0; 38 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 39 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 40 | sans-serif; 41 | -webkit-font-smoothing: antialiased; 42 | -moz-osx-font-smoothing: grayscale; 43 | } 44 | 45 | code { 46 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 47 | monospace; 48 | } 49 | 50 | .darkmodelarge{ 51 | background-color: var(--darkmode-main-color); 52 | color: #fff; 53 | } 54 | 55 | .lightmodelarge{ 56 | background-color: var(--main-buildingblock-backgroundcolor); 57 | color: #000; 58 | } 59 | 60 | .darkmode--soft-background{ 61 | background-color: #161B22; 62 | fill: #fff; 63 | } 64 | 65 | .lightmode--soft-background{ 66 | background-color: #ffffff; 67 | fill: #313131; 68 | } 69 | 70 | .shadow{ 71 | box-shadow: var(--main-buildingblock-shadow); 72 | } -------------------------------------------------------------------------------- /src/routes/home/Home.css: -------------------------------------------------------------------------------- 1 | .home_container { 2 | min-width: 1366px; 3 | height: auto; 4 | /* background-color: hotpink; */ 5 | } 6 | 7 | .home_container > nav { 8 | width: 70%; 9 | height: 120px; 10 | display: flex; 11 | align-items: center; 12 | justify-content: space-between; 13 | margin: 0 auto; 14 | font-size: 20px; 15 | font-weight: 400; 16 | } 17 | 18 | .home_container > nav > img { 19 | width: 200px; 20 | } 21 | 22 | .home_container > nav > ul { 23 | width: 60%; 24 | height: 60%; 25 | display: flex; 26 | align-items: center; 27 | justify-content: space-between; 28 | list-style-type: none; 29 | color: gray; 30 | cursor: pointer; 31 | } 32 | 33 | .home_container li:hover { 34 | color: #222; 35 | margin-bottom: 5px; 36 | transition: .5s; 37 | } 38 | 39 | 40 | .home_container nav select { 41 | width: 157px; 42 | height: 57px; 43 | font-size: 20px; 44 | outline: none; 45 | text-align: center; 46 | -webkit-appearance: none; 47 | border-radius: 5px; 48 | border: 1px solid gainsboro; 49 | } 50 | 51 | .home_container #btn { 52 | width: 180px; 53 | height: 57px; 54 | display: flex; 55 | align-items: center; 56 | justify-content: center; 57 | border-radius: 15px; 58 | background-color: var(--secondary-extractedblock-active-color); 59 | text-decoration: none; 60 | color: #fff; 61 | } 62 | 63 | 64 | /* Banner */ 65 | 66 | 67 | .home_banner { 68 | width: 70%; 69 | height: 60vh; 70 | display: flex; 71 | align-items: center; 72 | justify-content: space-between; 73 | margin: 0 auto; 74 | font-family: var(main-font-poppins); 75 | } 76 | 77 | .home_banner .text { 78 | width: 50%; 79 | height: 100%; 80 | display: flex; 81 | flex-direction: column; 82 | justify-content: center; 83 | } 84 | 85 | .home_banner .text > h1 { 86 | width: 100%; 87 | height: 120px; 88 | font-size: 65px; 89 | font-weight: 800; 90 | letter-spacing: 2.5px; 91 | text-transform: capitalize; 92 | } 93 | 94 | .home_banner .text > p { 95 | width: 100%; 96 | height: 120px; 97 | font-size: 20px; 98 | color: #4E4D56; 99 | line-height: 1.5; 100 | margin-top: 30px; 101 | } 102 | 103 | .home_banner img { 104 | height: 520px; 105 | } -------------------------------------------------------------------------------- /src/assets/Lightmode.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useSelector } from 'react-redux'; 3 | 4 | function Lightmode() { 5 | const themeState = useSelector(state => state.themeState); 6 | return 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | ; 38 | } 39 | 40 | export default Lightmode; 41 | -------------------------------------------------------------------------------- /src/components/personal/Personal.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import "./Personal.css" 3 | import { useSelector } from 'react-redux'; 4 | import call from "../../assets/personal-svg/call.svg" 5 | import foyiz from "../../assets/personal-svg/foyiz.svg" 6 | import medal from "../../assets/personal-svg/medal.svg" 7 | import dog from "../../assets/personal-svg/dog.svg" 8 | import { useLocation } from 'react-router-dom'; 9 | 10 | const Personal = () => { 11 | const location = useLocation(); 12 | const teacher = useSelector(state => state.user); 13 | console.log(location) 14 | return ( 15 |
16 |
17 |
18 |

John Doe

19 | O'quvchilar soni: 106ta 20 | Guruhlar soni: 7ta 21 | Maoshi: 4.000.000 so'm 22 |
23 |
24 |
25 | 26 | {teacher?.user?.user?.address} 27 |
28 |
29 | 30 | {teacher.user.user.phonenumbers[0] + " , " + teacher.user.user.phonenumbers[1]} 31 |
32 |
33 | 34 | {teacher.user.user.percent}% 35 |
36 |
37 | 38 | {teacher.user.user.profession} 39 |
40 |
41 | 42 | {teacher.user.user.telegram} 43 |
44 |
45 |
46 |
47 | 48 |
49 | 50 |
51 |
52 | ) 53 | } 54 | 55 | export default Personal -------------------------------------------------------------------------------- /src/components/sidebar/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import './Sidebar.css'; 3 | import { NavLink, useRouteMatch } from 'react-router-dom'; 4 | import logoLarge from "../../assets/logo.svg"; 5 | import logoSmall from "../../assets/logo_small.svg"; 6 | // import logoLight from "../../assets/logoLight.svg"; 7 | import { FiLogOut } from 'react-icons/fi'; 8 | 9 | import { SIDEBAR_STATIC_DATA } from '../../static/Sidebar_Static'; 10 | 11 | const Sidebar = () => { 12 | const { url } = useRouteMatch(); 13 | const [sidebar, setSidebar] = useState(true); 14 | 15 | return ( 16 |
17 | setSidebar(!sidebar)} style={{height: "70px"}} src={!sidebar ? logoSmall : logoLarge } className="sidebar__logo" alt="" /> 18 |
19 |
JD
20 |
21 | { 22 | sidebar && 23 | <> 24 |

John Doe

25 |

Software Engineer

26 | 27 | } 28 |
29 |
30 |
    31 | {SIDEBAR_STATIC_DATA?.map((sidebar__tabs) => ( 32 |
  • 33 | 38 | {sidebar__tabs.icon} {sidebar &&

    {sidebar__tabs.sidebarTitle}

    } 39 | {!sidebar &&
    {sidebar__tabs.sidebarTitle}
    } 40 |     41 |
    • 42 | ))} 43 |
44 | 45 |

46 | © {new Date().getUTCFullYear()} All rights reserved! 47 |

48 |

Made by Edify Team

49 |
50 | ) 51 | } 52 | 53 | export default Sidebar 54 | -------------------------------------------------------------------------------- /src/components/notifications/Notifications.css: -------------------------------------------------------------------------------- 1 | .notification { 2 | width: 100%; 3 | height: 760px; 4 | max-height: 780px; 5 | background-color: #fff; 6 | margin-top: 30px; 7 | position: relative; 8 | border-radius: var(--main-headerbox-border-radius); 9 | box-shadow: var(--main-buildingblock-shadow); 10 | font-family: var(--main-roboto-font); 11 | } 12 | .sendmessage{ 13 | width: 535px; 14 | height: 217px; 15 | background-color: #F7F7F7; 16 | border-radius: 15px; 17 | border: none; 18 | outline: none; 19 | margin-top: 41px; 20 | margin-left: 39px; 21 | font-size: 24px; 22 | padding-top: 15px; 23 | padding-left: 22px; 24 | } 25 | .sendmessage_btn{ 26 | height: 50px; 27 | width: 229px; 28 | background-color: #EF4136; 29 | border-radius: 15px; 30 | line-height: 30px; 31 | color: #FFFFFF; 32 | font-size: 20px; 33 | border: none; 34 | cursor: pointer; 35 | position: absolute; 36 | top: 295px; 37 | left: 39px; 38 | } 39 | .notifications_bar{ 40 | position: absolute; 41 | width: 780px; 42 | height: 589px; 43 | left: 698px; 44 | top: 41px; 45 | background: #F7F7F7; 46 | border-radius: 15px; 47 | } 48 | .notifications_bar > p{ 49 | font-family: 'Poppins'; 50 | font-style: normal; 51 | font-weight: 400; 52 | font-size: 32px; 53 | line-height: 48px; 54 | padding-left: 34px; 55 | padding-top: 14px; 56 | } 57 | .notbar_container{ 58 | height: 87%; 59 | width: 100%; 60 | display: grid; 61 | justify-content: center; 62 | overflow: scroll; 63 | } 64 | .messages{ 65 | width: 712px; 66 | height: 131px; 67 | background: #FFFFFF; 68 | box-shadow: 0px 0px 14px 1px rgba(0, 0, 0, 0.12); 69 | border-radius: 15px; 70 | margin-top: 30px; 71 | padding-top: 14px; 72 | padding-left: 21px; 73 | position: relative; 74 | } 75 | .message_text{ 76 | font-family: 'Poppins'; 77 | font-style: normal; 78 | font-weight: 400; 79 | font-size: 20px; 80 | line-height: 30px; 81 | color: #000000; 82 | 83 | } 84 | .message_more{ 85 | font-family: 'Poppins'; 86 | font-style: normal; 87 | font-weight: 400; 88 | font-size: 20px; 89 | line-height: 30px; 90 | color: #27AAE1; 91 | margin-left: 10px; 92 | } 93 | .delete_message{ 94 | position: absolute; 95 | border: none; 96 | width: 140px; 97 | height: 44px; 98 | right: 44px; 99 | bottom: 15px; 100 | background: #EF4136; 101 | border-radius: 10px; 102 | line-height: 30px; 103 | color: #FFFFFF; 104 | font-size: 20px; 105 | } -------------------------------------------------------------------------------- /src/assets/personal-svg/medal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/UI-icons/dashboard.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/UI-icons/Mark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/UI-icons/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/UI-icons/money-lg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/UI-icons/money2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/student/new-group/NewGroup.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import axios from "../../../apis/new-teacher"; 3 | 4 | 5 | const NewGroup = () => { 6 | const [allTeachers, setAllTeachers] = useState([]); 7 | const [selectedTeacher, setSelectedTeacher] = useState(''); 8 | const [profession, setProfession] = useState(''); 9 | const [groupStart, setgGroupStart] = useState(''); 10 | const [groupEnd, setGroupEnd] = useState(''); 11 | const [room, setRoom] = useState(''); 12 | useEffect(() => { 13 | async function getAllTeachers() { 14 | try { 15 | let allTeachers = await axios.get("all"); 16 | setAllTeachers(allTeachers?.data.allTeachers); 17 | } catch (err) { 18 | console.log(err); 19 | } 20 | } 21 | 22 | getAllTeachers(); 23 | }, []); 24 | 25 | console.log(selectedTeacher) 26 | 27 | const createNewGroup = (e) => { 28 | e.preventDefault(); 29 | axios.patch(`/update-group/${selectedTeacher}`, { 30 | profession, 31 | groupStart, 32 | groupEnd, 33 | room, 34 | busy: true 35 | }) 36 | .then(res => console.log(res)) 37 | .catch(err => console.log(err)) 38 | } 39 | return ( 40 |
41 |
42 |
43 | Guruh mutaxasisligi 44 | setProfession(e.target.value)}/> 45 |
46 |
47 | Guruh boshlanish vaqti 48 | setgGroupStart(e.target.value)}/> 49 |
50 |
51 | Guruh tugash vaqti 52 | setGroupEnd(e.target.value)}/> 53 |
54 |
55 | Xona raqami 56 | setRoom(e.target.value)}/> 57 | 65 | 66 | 67 |
68 |
69 |
70 | ) 71 | } 72 | 73 | export default NewGroup 74 | -------------------------------------------------------------------------------- /src/assets/UI-icons/table.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/list-teacher/ListTeacher.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import "./ListTeacher.css"; 3 | import { FaUserTie } from "react-icons/fa"; 4 | import { Link } from "react-router-dom"; 5 | import salary from "../../assets/UI-icons/money-bill.svg"; 6 | import axios from "../../apis/new-teacher"; 7 | import Loader from "../loader/Loader"; 8 | 9 | const ListTeacher = () => { 10 | const [teachers, setTeachers] = useState([]); 11 | const [loading, setLoading] = useState(false); 12 | const abbrivateName = (fullname) => { 13 | if (fullname) { 14 | return ( 15 | fullname.split(" ").slice(0, 2)[0].charAt(0) + 16 | fullname.split(" ").slice(0, 2)[1].charAt(0) 17 | ); 18 | } else { 19 | return ; 20 | } 21 | }; 22 | 23 | useEffect(() => { 24 | async function getAllTeachers() { 25 | setLoading(true); 26 | try { 27 | let allTeachers = await axios.get("all"); 28 | setTeachers(allTeachers?.data.allTeachers); 29 | setLoading(false); 30 | } catch (err) { 31 | console.log(err); 32 | setLoading(false); 33 | } 34 | } 35 | 36 | getAllTeachers(); 37 | }, []); 38 | 39 | const loaderStyle = { 40 | position: "absolute", 41 | left: "45%", 42 | top: "40%", 43 | fontSize: "50px", 44 | }; 45 | 46 | return ( 47 |
48 |
49 | {!loading ? ( 50 | teachers?.map((teacher) => ( 51 |
52 |

{abbrivateName(teacher.fullname)}

53 |

{teacher.profession}

54 |
    55 |
  • {teacher.fullname}
    • 56 |
  • 57 | {teacher.percent}{" "} 58 |
    • 59 |
  • 60 | {" "} 61 |

    O'quvchilari

    {" "} 62 | {teacher?.groups?.length 63 | ? teacher?.groups?.map((st) => st.students.length)?.reduce((a, b) => a + b, 0) 64 | : 0}{" "} 65 | ta

    Guruhlari

    66 | {teacher?.groups.length} ta{" "} 67 |
    • 68 |
69 | 77 | Batafsil 78 | 79 |
80 | )) 81 | ) : ( 82 | 83 | )} 84 |
85 |
86 | ); 87 | }; 88 | 89 | export default ListTeacher; 90 | -------------------------------------------------------------------------------- /src/assets/personal-svg/foyiz.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/charts/chartdiogram/chartdiogra.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from "react"; 2 | import { 3 | AreaChart, 4 | Area, 5 | XAxis, 6 | YAxis, 7 | CartesianGrid, 8 | Tooltip, 9 | ResponsiveContainer, 10 | } from "recharts"; 11 | 12 | const data = [ 13 | { 14 | name: "Dushanba", 15 | uv: 4000, 16 | pv: 2400, 17 | amt: 2400, 18 | }, 19 | { 20 | name: "Seshanba", 21 | uv: 3000, 22 | pv: 1398, 23 | amt: 2210, 24 | }, 25 | { 26 | name: "Chorshanba", 27 | uv: 2000, 28 | pv: 9800, 29 | amt: 2290, 30 | }, 31 | { 32 | name: "Payshanba", 33 | uv: 2780, 34 | pv: 3908, 35 | amt: 2000, 36 | }, 37 | { 38 | name: "Juma", 39 | uv: 1890, 40 | pv: 4800, 41 | amt: 2181, 42 | }, 43 | { 44 | name: "Shanba", 45 | uv: 2390, 46 | pv: 3800, 47 | amt: 2500, 48 | }, 49 | { 50 | name: "Yakshanba", 51 | uv: 3490, 52 | pv: 4300, 53 | amt: 2100, 54 | }, 55 | ]; 56 | 57 | const SecondChart = { 58 | editorWrapper: { 59 | width: "650px", 60 | height: "248px", 61 | paddingLeft: "30px" 62 | // margin: "85px 10px 120px", 63 | }, 64 | }; 65 | 66 | export default class Diogram extends PureComponent { 67 | static demoUrl = "https://codesandbox.io/s/stacked-area-chart-ix341"; 68 | 69 | render() { 70 | return ( 71 |
72 | 73 | 84 | 85 | 86 | 87 | 88 | 89 | 96 | 103 | 104 | 105 |
106 | ); 107 | } 108 | } -------------------------------------------------------------------------------- /src/assets/UI-icons/student.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/UI-icons/student-lg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/UI-icons/Student2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/UI-icons/teacher.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/list-teacher/ListTeacher.css: -------------------------------------------------------------------------------- 1 | .list__teacher { 2 | flex: 1; 3 | height: 800px; 4 | margin: 15px 0; 5 | margin-left: -15px; 6 | display: flex; 7 | align-items: center; 8 | flex-wrap: wrap; 9 | justify-content: space-between; 10 | position: relative; 11 | } 12 | 13 | .teachers_container { 14 | width: 100%; 15 | height: 800px; 16 | display: flex; 17 | flex-wrap: wrap; 18 | overflow-y: scroll; 19 | } 20 | .teachers_container::-webkit-scrollbar { 21 | width: 10px; 22 | background-color: transparent; 23 | } 24 | .teachers_container::-webkit-scrollbar-thumb { 25 | background-color: #a7a7a7; 26 | border-radius: 10px; 27 | width: 100px; 28 | } 29 | 30 | .teacher_box { 31 | width: 400px; 32 | height: 450px; 33 | margin: 15px; 34 | display: grid; 35 | place-items: center; 36 | transition: 250ms; 37 | position: relative; 38 | border-radius: var(--main-buildingblock-border-radius); 39 | box-shadow: var(--main-buildingblock-shadow); 40 | } 41 | 42 | .teacher_box:hover { 43 | /* border: 1px solid transparent; */ 44 | transition: 250ms; 45 | transform: scale(1.02); 46 | box-shadow: rgba(0, 0, 0, 0.236) 0px 5px 15px; 47 | } 48 | 49 | .avatar { 50 | position: absolute; 51 | top: 25px; 52 | width: 153px; 53 | height: 153px; 54 | border-radius: 50%; 55 | background: linear-gradient(180deg, #c4c4c4 0%, #4a4949 100%); 56 | font-size: 80px; 57 | color: #fff; 58 | font-weight: 500; 59 | font-family: sans-serif; 60 | display: flex; 61 | align-items: center; 62 | justify-content: center; 63 | } 64 | 65 | .teacher_box h3 { 66 | position: absolute; 67 | top: 186px; 68 | font-size: 20px; 69 | } 70 | 71 | .teacher_info { 72 | width: 100%; 73 | height: 93px; 74 | padding: 0px 20px; 75 | margin-top: 224px; 76 | list-style: none; 77 | display: flex; 78 | flex-direction: column; 79 | align-items: center; 80 | } 81 | 82 | .teacher_info li { 83 | display: flex; 84 | /* color: #313131; */ 85 | padding: 5px 0; 86 | font-weight: 500; 87 | align-items: center; 88 | } 89 | 90 | .teacher_info li:first-child { 91 | font-size: 30px; 92 | font-weight: 500; 93 | } 94 | 95 | .teacher_info li p { 96 | padding: 0px 10px; 97 | font-size: 20px; 98 | color: var(--secondary-extractedblock-active-color); 99 | } 100 | 101 | .teacher_info li img { 102 | width: 29px; 103 | height: 18px; 104 | padding: 0px 5px; 105 | } 106 | 107 | .teacher_box button { 108 | width: 197px; 109 | height: 43px; 110 | margin: 19px 0; 111 | border: none; 112 | color: #313131; 113 | border-radius: 10px; 114 | transition: 250ms; 115 | font-size: 18px; 116 | font-weight: 500; 117 | outline: none; 118 | cursor: pointer; 119 | color: var(--main-buildingblock-backgroundcolor); 120 | background-color: var(--secondary-extractedblock-active-color); 121 | } 122 | 123 | .teacher_box button:hover { 124 | transition: 250ms; 125 | transform: scale(1.03); 126 | } 127 | 128 | .ong { 129 | width: 323px; 130 | height: 790px; 131 | border-radius: var(--main-buildingblock-border-radius); 132 | background-color: #ff401e; 133 | position: fixed; 134 | right: 32px; 135 | } -------------------------------------------------------------------------------- /src/assets/UI-icons/money.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `yarn build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /src/components/header/Header.css: -------------------------------------------------------------------------------- 1 | .header_container { 2 | min-width: 1366px; 3 | height: 120px; 4 | box-shadow: var(--main-headerbox-shadow); 5 | border-radius: var(--main-headerbox-border-radius); 6 | margin: 30px auto; 7 | margin-bottom: 0px; 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | justify-content: space-evenly; 12 | white-space: nowrap; 13 | position: relative; 14 | } 15 | 16 | .header_wrapper { 17 | width: 90%; 18 | display: flex; 19 | align-items: center; 20 | justify-content: space-evenly; 21 | white-space: nowrap; 22 | } 23 | 24 | .header__categories { 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | font-size: 18px; 29 | padding: 0 10px; 30 | } 31 | 32 | .header__categories:first-child { 33 | margin-left: -40px; 34 | } 35 | 36 | .category__details { 37 | margin-left: 12px; 38 | } 39 | 40 | .category__title { 41 | font-style: normal; 42 | font-size: 22px; 43 | font-weight: 500; 44 | font-family: var(--main-font-poppins); 45 | } 46 | 47 | .category__quantity { 48 | font-size: 30px; 49 | font-family: var(--main-font-poppins); 50 | font-weight: 500; 51 | line-height: 45px; 52 | letter-spacing: 5px; 53 | color: #EF4136; 54 | } 55 | 56 | .line { 57 | width: 1px; 58 | height: 60px; 59 | background-color: #d0c4c4; 60 | } 61 | 62 | .header_calendar { 63 | width: 251px; 64 | height: 61px; 65 | background: #FACAC7; 66 | cursor: pointer; 67 | border-radius: 15px; 68 | display: flex; 69 | align-items: center; 70 | justify-content: space-between; 71 | } 72 | 73 | .header_calendar > svg { 74 | fill: #FF3B30; 75 | width: 34px; 76 | height: 28px; 77 | margin-left: 20px; 78 | } 79 | 80 | .my-custom-input-class{ 81 | text-align: start; 82 | width: 170px; 83 | height: 61px; 84 | font-size: 22px; 85 | letter-spacing: 4px; 86 | font-weight: 500; 87 | font-family: sans-serif; 88 | border: none; 89 | border-radius: 15px; 90 | color: #FF3B30; 91 | outline: none; 92 | cursor: pointer; 93 | position: relative; 94 | background-color: #FACAC7; 95 | margin-right: 5px; 96 | } 97 | 98 | .my-custom-input-class::placeholder{ 99 | color: #FF3B30; 100 | } 101 | 102 | .custom_calendar{ 103 | left: -40px; 104 | font-family: var(--main-font-poppins); 105 | } 106 | 107 | .header_search { 108 | width: 70px; 109 | height: 61px; 110 | display: flex; 111 | align-items: center; 112 | justify-content: center; 113 | background: #F7F7F7; 114 | border-radius: 15px; 115 | cursor: pointer; 116 | } 117 | 118 | .search_ul { 119 | flex: 1; 120 | margin: 0 auto; 121 | display: flex; 122 | flex-direction: column; 123 | align-items: center; 124 | box-shadow: var(--main-headerbox-shadow); 125 | border-radius: var(--main-headerbox-border-radius); 126 | padding: 20px 0; 127 | list-style: none; 128 | margin-top: -40px; 129 | } 130 | 131 | .search_li { 132 | display: flex; 133 | width: 95%; 134 | height: 61px; 135 | align-items: center; 136 | font-size: 20px; 137 | font-family: var(--main-font-poppins); 138 | font-weight: 500; 139 | background-color: #F7F7F7; 140 | border-radius: 15px; 141 | margin-bottom: 20px; 142 | } 143 | 144 | .search_li > p { 145 | margin-left: 40px; 146 | margin-right: 30px; 147 | } 148 | 149 | /* .search_li > span { 150 | margin-left: 20px; 151 | } */ -------------------------------------------------------------------------------- /src/components/student/new-student/NewStudentd.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import './NewStudent.css' 3 | import axios from "../../../apis/new-teacher"; 4 | 5 | 6 | const NewStudentd = () => { 7 | const [allTeachers, setAllTeachers] = useState([]); 8 | const [teacherGroups, setTeacherWithGroups] = useState({}); 9 | const [selectedTeacher, setSelectedTeacher] = useState(''); 10 | const [name, setName] = useState(''); 11 | const [phonenumber, setPhonenumber] = useState(''); 12 | const [birthDate, setBirthDate] = useState(''); 13 | const [shtxr, setShtxr] = useState(''); 14 | useEffect(() => { 15 | async function getAllTeachers() { 16 | try { 17 | let allTeachers = await axios.get("all"); 18 | setAllTeachers(allTeachers?.data.allTeachers); 19 | } catch (err) { 20 | console.log(err); 21 | } 22 | } 23 | 24 | getAllTeachers(); 25 | }, []); 26 | 27 | 28 | useEffect(() => { 29 | let teacherWithId = allTeachers?.filter(t => t?._id === selectedTeacher)[0] 30 | setTeacherWithGroups(teacherWithId) 31 | }, [selectedTeacher, allTeachers]) 32 | 33 | console.log(selectedTeacher) 34 | 35 | return ( 36 |
37 |
38 |
39 | O’quvchi ism va familiyasi 40 | 41 | O’quvchi telefon raqami 42 | 43 | O’quvchi ota-onasi telefon raqami 44 | 45 |
46 |
47 | O’quvchi tug’ilgan sanasi 48 | 49 |
50 |
51 | O’quvchi SHTXR 52 | 53 |
54 |
55 | O’quvchi manzili 56 | 57 |
58 |
59 | O’quvchi guruhi 60 | 61 | O’quvchi to’lov summasi 62 | 63 | 71 | 79 | 80 |
81 |
82 | 83 |
84 | ) 85 | } 86 | 87 | export default NewStudentd 88 | -------------------------------------------------------------------------------- /src/components/payment/Payment.css: -------------------------------------------------------------------------------- 1 | 2 | .payment__balans { 3 | flex: 1; 4 | height: 199px; 5 | display: flex; 6 | align-items: center; 7 | justify-content: space-between; 8 | } 9 | 10 | .payment__students { 11 | width: 568px; 12 | height: 199px; 13 | flex-grow: 1; 14 | display: flex; 15 | align-items: center; 16 | justify-content: space-around; 17 | border-radius: var(--main-buildingblock-border-radius); 18 | box-shadow: var(--main-buildingblock-shadow); 19 | } 20 | 21 | .paid { 22 | width: 216px; 23 | height: 161px; 24 | display: flex; 25 | flex-direction: column; 26 | } 27 | 28 | .paid > span { 29 | font-size: 24px; 30 | font-weight: 500; 31 | line-height: 36px; 32 | } 33 | 34 | .indicator_pay { 35 | width: 100%; 36 | display: flex; 37 | align-items: center; 38 | justify-content: space-between; 39 | } 40 | 41 | .indicator_pay > span { 42 | font-size: 80px; 43 | font-weight: 500; 44 | color: #0CA409; 45 | margin-right: 16px; 46 | } 47 | 48 | .vertical__line { 49 | height: 72px; 50 | width: 1.5px; 51 | background-color: #C4C4C4; 52 | } 53 | 54 | #dont__pay{ 55 | color:#FF3B30; 56 | } 57 | 58 | 59 | .balance { 60 | width: 903px; 61 | flex-grow: 2; 62 | height: 199px; 63 | margin-left: 52px; 64 | display: flex; 65 | align-items: center; 66 | justify-content: space-around; 67 | border-radius: 25px; 68 | box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.06); 69 | } 70 | 71 | .general__balance { 72 | width: 369px; 73 | height: 165px; 74 | display: flex; 75 | flex-direction: column; 76 | margin-top: 9px; 77 | } 78 | 79 | .general__balance > span, 80 | .general__fines > span { 81 | font-size: 24px; 82 | font-weight: 500; 83 | } 84 | 85 | .general__balance > p, 86 | .general__fines > p { 87 | font-size: 18px; 88 | font-weight: 500; 89 | margin: 11px 0 4px 0; 90 | color:#00000085; 91 | } 92 | 93 | .general__balance > h1, 94 | .general__fines > h1 { 95 | font-size: 48px; 96 | font-weight: 500; 97 | color: #0CA409; 98 | margin-bottom: 5px; 99 | } 100 | 101 | .general__fines > h1 { 102 | color: #FBC60A; 103 | } 104 | 105 | #percent { 106 | font-size: 18px; 107 | font-weight: 500; 108 | } 109 | 110 | .general__fines { 111 | width: 369px; 112 | height: 165px; 113 | display: flex; 114 | flex-direction: column; 115 | margin-left: 39px; 116 | margin-top: 9px; 117 | } 118 | 119 | /* Table start here */ 120 | .table__content{ 121 | width: 100%; 122 | height: 660px; 123 | overflow-y: auto; 124 | margin-top: 30px; 125 | padding: 50px 0px; 126 | } 127 | 128 | 129 | table{ 130 | width: 98%; 131 | margin: 0px auto; 132 | border-collapse: collapse; 133 | } 134 | 135 | .payment__tr-thead{ 136 | position: sticky; 137 | top: -50px; 138 | z-index: 2; 139 | background-color: #fff; 140 | } 141 | 142 | .payment__tr-thead > th{ 143 | font-weight: 500; 144 | font-size: 20px; 145 | line-height: 26px; 146 | color: #6C6C6C; 147 | padding: 20px 0px; 148 | border-bottom: 1px solid #ccc; 149 | } 150 | 151 | .payment__tr-tbody{ 152 | border-radius: 15px; 153 | overflow: hidden; 154 | box-shadow: var(--main-buildingblock-shadow); 155 | } 156 | 157 | .payment__tr-tbody td{ 158 | padding: 30px 0px; 159 | text-align: center; 160 | font-size: 22px; 161 | } 162 | 163 | .space{ 164 | height: 20px; 165 | } 166 | 167 | 168 | 169 | .tb{ 170 | transition: all 0.5s; 171 | } -------------------------------------------------------------------------------- /src/components/teacher/new-teacher/NewTeacher.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from "react"; 2 | import "./Newteacher.css"; 3 | import teacher_instance from '../../../apis/new-teacher'; 4 | import { AiOutlineClose } from "react-icons/ai"; 5 | import Loader from "../../loader/Loader"; 6 | 7 | const NewTeacher = () => { 8 | const [fullname, setFullname] = useState(''); 9 | const [loading, setLoading] = useState(false); 10 | const [phonenumbers, setPhonenumbers] = useState([]); 11 | const [profession, setProfession] = useState(''); 12 | const [address, setAddress] = useState(''); 13 | const [username, setUsername] = useState('') 14 | const [telegram, setTelegram] = useState('') 15 | const [password, setPassword] = useState('') 16 | const [percent, setPercent] = useState(0); 17 | const [tags, setTags] = useState([]); 18 | 19 | const removeTags = (indexToRemove) => { 20 | setTags([...tags.filter((_, index) => index !== indexToRemove)]); 21 | }; 22 | 23 | const addTags = (e) => { 24 | if (e.target.value !== "") { 25 | setTags([...tags, e.target.value]); 26 | e.target.value = ""; 27 | } 28 | }; 29 | const handleCreateTeacher = () => { 30 | setLoading(true); 31 | teacher_instance.post("newteacher", { 32 | fullname: fullname, 33 | phonenumbers: phonenumbers, 34 | profession: profession, 35 | address: address, 36 | telegram: telegram, 37 | username: username, 38 | password: password, 39 | percent: percent 40 | }) 41 | .then(newteacher =>{ 42 | console.log(newteacher.data) 43 | setLoading(false) 44 | }) 45 | .catch(err => { 46 | console.log(err) 47 | setLoading(false) 48 | }) 49 | } 50 | 51 | const loaderStyle = { 52 | fontSize: "25px", 53 | marginRight: "10px" 54 | } 55 | 56 | return ( 57 |
58 |
59 |
60 |

O'qituvchi ismi va familiyasi

61 | setFullname(e.target.value)} /> 62 |
63 |
64 |

O'qituvchi telefon raqami

65 | 72 | event.key === "Enter" ? addTags(event) : null } 73 | defaultValue={"+998"} /> 74 |
    75 | {Array.isArray(tags) && tags?.map((tag, index) => { 76 | return index <= 1 && tag.length === 13 ?
  • 77 | {tag} 78 | removeTags(index)} /> 79 |
    • : <> 80 | })} 81 |
82 |
83 |
84 |

O'qituvchi mutaxasisligi

85 | setProfession(e.target.value)}/> 86 |
87 |
88 |

O'qituvchi manzili

89 | setAddress(e.target.value)}/> 90 |
91 |
92 |
93 |
94 |

O'qituvchi foydalanuchi nomi

95 | setUsername(e.target.value)}/> 96 |
97 |
98 |

O'qituvchi foydalanuchi nomi

99 | setTelegram(e.target.value)}/> 100 |
101 |
102 |

O'qituvchi paroli

103 | setPassword(e.target.value)}/> 104 |
105 |
106 |

O'qituvchi foydalanuchi nomi

107 | setPercent(e.target.value)}/> 108 |
109 | 110 |
111 | 112 |
113 | ); 114 | }; 115 | 116 | export default NewTeacher; -------------------------------------------------------------------------------- /src/static/Sidebar_Static.js: -------------------------------------------------------------------------------- 1 | // Static Data goes here 2 | import Dashboard from '../components/dashboard/Dashboard'; 3 | import Teacher from '../components/teacher/Teacher'; 4 | import Attendance from '../components/attendance/Attendance'; 5 | import Payment from '../components/payment/Payment'; 6 | import Table from '../components/table/Table'; 7 | import Settings from '../components/settings/Settings' 8 | import { ReactComponent as CalendarIcon } from '../assets/UI-icons/calendar.svg'; 9 | import { ReactComponent as DashboardIcon } from '../assets/UI-icons/dashboard.svg'; 10 | import { ReactComponent as MoneyIcon } from '../assets/UI-icons/money.svg'; 11 | import { ReactComponent as TableIcon } from '../assets/UI-icons/table.svg'; 12 | import { ReactComponent as TeacherIcon } from '../assets/UI-icons/teacher-tab.svg'; 13 | import { ReactComponent as SettingIcon} from '../assets/UI-icons/setting.svg' 14 | import { ReactComponent as StudentIcon} from '../assets/UI-icons/student.svg' 15 | import Student from '../components/student/Student'; 16 | 17 | export const SIDEBAR_STATIC_DATA = [ 18 | { 19 | id: 0, 20 | sidebarTitle: "Boshqaruv", 21 | icon: , 22 | route: "dashboard", 23 | component: , 24 | }, 25 | { 26 | id: 1, 27 | sidebarTitle: "To'lov", 28 | icon: , 29 | route: "payment", 30 | component: , 31 | }, 32 | { 33 | id: 2, 34 | sidebarTitle: "O'qituvchilar", 35 | icon: , 36 | route: "teachers", 37 | component: 38 | }, 39 | { 40 | id: 3, 41 | sidebarTitle: "O'quvchilar", 42 | icon: , 43 | route: "students", 44 | component: 45 | }, 46 | { 47 | id: 4, 48 | sidebarTitle: "Dars jadvali", 49 | icon: , 50 | route: "table", 51 | component: , 52 | }, 53 | { 54 | id: 5, 55 | sidebarTitle: "Davomat", 56 | icon: , 57 | route: "attendance", 58 | component: , 59 | }, 60 | { 61 | id: 6, 62 | sidebarTitle: "Sozlamalar", 63 | icon: , 64 | route: "settings", 65 | component: , 66 | } 67 | ] 68 | 69 | export const Teachers_Data = [ 70 | { 71 | id: 0, 72 | occupation: "Software Engineer", 73 | collectionUL: [ 74 | { 75 | fullName: "John Doe Lemoni", 76 | salary: "4.000.000 so'm", 77 | pupilsNumber: 116, 78 | groups: 10 79 | } 80 | ] 81 | }, 82 | { 83 | id: 1, 84 | occupation: "Software Engineer", 85 | collectionUL: [ 86 | { 87 | fullName: "John Doe Lemoni", 88 | salary: "4.000.000 so'm", 89 | pupilsNumber: 116, 90 | groups: 10 91 | } 92 | ] 93 | }, 94 | { 95 | id: 2, 96 | occupation: "Software Engineer", 97 | collectionUL: [ 98 | { 99 | fullName: "John Doe Lemoni", 100 | salary: "4.000.000 so'm", 101 | pupilsNumber: 116, 102 | groups: 10 103 | } 104 | ] 105 | }, 106 | { 107 | id: 3, 108 | occupation: "Software Engineer", 109 | collectionUL: [ 110 | { 111 | fullName: "John Doe Lemoni", 112 | salary: "4.000.000 so'm", 113 | pupilsNumber: 116, 114 | groups: 10 115 | } 116 | ] 117 | }, 118 | { 119 | id: 4, 120 | occupation: "Software Engineer", 121 | collectionUL: [ 122 | { 123 | fullName: "John Doe Lemoni", 124 | salary: "4.000.000 so'm", 125 | pupilsNumber: 116, 126 | groups: 10 127 | } 128 | ] 129 | }, 130 | { 131 | id: 5, 132 | occupation: "Software Engineer", 133 | collectionUL: [ 134 | { 135 | fullName: "John Doe Lemoni", 136 | salary: "4.000.000 so'm", 137 | pupilsNumber: 116, 138 | groups: 10 139 | } 140 | ] 141 | }, 142 | { 143 | id: 6, 144 | occupation: "Software Engineer", 145 | collectionUL: [ 146 | { 147 | fullName: "", 148 | salary: "4.000.000 so'm", 149 | pupilsNumber: 116, 150 | groups: 10 151 | } 152 | ] 153 | } 154 | 155 | ] -------------------------------------------------------------------------------- /src/assets/UI-icons/setting.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/routes/auth/Login.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import './Login.css'; 3 | import { useDispatch, useSelector } from 'react-redux'; 4 | import logo from '../../assets/logo.svg'; 5 | import { FiAlertCircle, FiCheckCircle} from 'react-icons/fi'; 6 | import login_instance from '../../apis/new-teacher'; 7 | import { Redirect, useLocation } from 'react-router-dom'; 8 | import Loader from "../../components/loader/Loader"; 9 | import { authUserSuccess, authUserFail } from '../../redux/actions/authActions'; 10 | 11 | const Login = () => { 12 | const location = useLocation(); 13 | const dispatch = useDispatch(); 14 | const user = useSelector(state => state.user); 15 | const [username, setUsername] = useState('') 16 | const [password, setPassword] = useState('') 17 | const [loading, setLoading] = useState(false); 18 | const [messageServer, setMessageServer] = useState(''); 19 | const [success, setSuccess] = useState(false); 20 | 21 | const [loginData, setLoginData] = useState({username: "", password: ""}); 22 | const [message, setMessage] = useState(""); 23 | useEffect(() => { 24 | function validate(){ 25 | if(!loginData.username && !loginData.password){ 26 | setMessage("Iltimos, barcha ma'lumotni to'ldiring!"); 27 | } 28 | else if(loginData.username.trim().length < 5){ 29 | setMessage("Foydalanuvchi nomi yaroqli emas!"); 30 | } 31 | else if(loginData.password.trim().length === 0){ 32 | setMessage("Foydalanuvchi parolini kiriting!"); 33 | } 34 | else if(loginData.password.trim().length < 8){ 35 | setMessage("Foydalanuvchi paroli yaroqli emas!"); 36 | } 37 | else{ 38 | setMessage("Barcha malumotlar yaroqli!") 39 | } 40 | } 41 | return () => validate() 42 | }, [loginData]) 43 | 44 | 45 | 46 | const handleLogin = (e) => { 47 | e.preventDefault() 48 | setLoading(true); 49 | login_instance.post("login", { 50 | username: username, 51 | password: password, 52 | }, {timeout: 10000}) 53 | .then(newUser =>{ 54 | dispatch(authUserSuccess(newUser.data)) 55 | setLoading(false) 56 | setSuccess(true) 57 | setMessageServer(newUser.data.message); 58 | }) 59 | .catch(err => { 60 | dispatch(authUserFail()) 61 | setLoading(false) 62 | setSuccess(false) 63 | if(err.code){ 64 | setMessageServer("Internet bilan ulanishni tekshiring!") 65 | console.log(err.message) 66 | } 67 | else{ 68 | setMessageServer(err?.response?.data.message); 69 | 70 | } 71 | }) 72 | } 73 | 74 | const loaderStyle = { 75 | fontSize: "25px", 76 | marginRight: "10px" 77 | } 78 | 79 | return user.isAuthenticated ? : ( 87 |
88 |
89 | 90 |

Tizimga kirish

91 | { 92 | messageServer &&

{messageServer}

93 | } 94 |
95 | {setUsername(e.target.value) 97 | setLoginData({...loginData, username: e.target.value})} 98 | } 99 | type="text" placeholder="Foydalanuvchi nomingiz"/> 100 | {setPassword(e.target.value) 102 | setLoginData({...loginData, password: e.target.value})} 103 | } 104 | type="password" placeholder="Foydalanuvchi parolingiz"/> 105 | { 106 | message &&

{message.includes("emas") || message.includes("Iltimos") ? : } {message}

107 | } 108 |

Meni tizimga kirgan xolda saqlang

109 | 110 | 111 |

© Copyright 2022. All rights reserved!

112 |
113 |
114 | ) 115 | } 116 | 117 | export default Login; -------------------------------------------------------------------------------- /src/assets/UI-icons/calendar.svg: -------------------------------------------------------------------------------- 1 | 6 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/header/Header.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import './Header.css' 3 | import "react-modern-calendar-datepicker/lib/DatePicker.css"; 4 | import DatePicker from "react-modern-calendar-datepicker"; 5 | 6 | import { ReactComponent as StudentIcon } from "../../assets/UI-icons/student-lg.svg"; 7 | import { ReactComponent as MoneyIcon } from "../../assets/UI-icons/money-lg.svg"; 8 | import { ReactComponent as GroupsIcon }from "../../assets/UI-icons/groups-lg.svg"; 9 | import { ReactComponent as CalendarIcon } from "../../assets/UI-icons/calendar.svg"; 10 | import { ReactComponent as SearchIcon } from "../../assets/UI-icons/search.svg"; 11 | import { ReactComponent as TimesIcon } from "../../assets/UI-icons/times.svg"; 12 | 13 | const Header = () => { 14 | const [search, setSearch] = useState(false) 15 | const [searchValue, setSearchValue] = useState("") 16 | const [selectedDay, setSelectedDay] = useState(null); 17 | const date = new Date() 18 | let day = date.getDate(); 19 | let month = date.getMonth(); 20 | let year = date.getFullYear(); 21 | const renderCustomInput = ({ ref }) => ( 22 | 29 | ) 30 | 31 | 32 | 33 | return ( 34 | <> 35 |
36 |
37 |
40 |
41 | 42 |
43 |
44 |

O'quvchilar soni

45 |

116ta

46 |
47 |
48 |
49 |
52 |
53 | 54 |
55 |
56 |

Guruhlar soni

57 |

10ta

58 |
59 |
60 |
61 |
64 |
65 | 66 |
67 |
68 |

To'lov qilmaganlar soni

69 |

16ta

70 |
71 |
72 |
75 | 76 | 84 |
85 |
90 |
{setSearch(true)}} style={search ? {position: "absolute", left: "1.5%"} : {position: "static", width: "60px", display: "flex", alignItems: "center", justifyContent: "center"}}>
91 | setSearch(false)} style={search ? {position: "absolute", right: "1.5%"} : {display: "none"}}/> 92 | setSearchValue(e.target.value)} type="text" placeholder="O'qituvchilarni qidirish..." style={ search ? {width: "93%", height: "61px", outline: "none", border: "none", background: "#F7F7F7", fontSize: "20px", textIndent: "30px", fontFamily: "Poppins", transition: "1s"} : {width: "0", height: "0px", outline: "none", border: "none", background: "#F7F7F7", fontSize: "20px", textIndent: "10px", position: "absolute", fontFamily: "Poppins", transition: ".1s"}}/> 93 | 94 |
95 |
96 | 97 |
98 | 99 | ) 100 | } 101 | 102 | export default Header 103 | -------------------------------------------------------------------------------- /src/static/Table_Static.js: -------------------------------------------------------------------------------- 1 | export const Payment_Static = [ 2 | { 3 | id: 1, 4 | name: "John Doe Lemoni", 5 | summa: "100.000 so'm", 6 | date: "18 / 01 / 22", 7 | oy: "Dekabr", 8 | contract: "Shartnoma", 9 | linkContract: "/wwehbfhwb", 10 | telephone: "+998999787525" 11 | }, 12 | { 13 | id: 2, 14 | name: "John Doe Lemoni", 15 | summa: "100.000 so'm", 16 | date: "18 / 01 / 22", 17 | oy: "Dekabr", 18 | contract: "Shartnoma", 19 | linkContract: "/wwehbfhwb", 20 | telephone: "+998999787525" 21 | }, 22 | { 23 | id: 3, 24 | name: "John Doe Lemoni", 25 | summa: "100.000 so'm", 26 | date: "18 / 01 / 22", 27 | oy: "Dekabr", 28 | contract: "Shartnoma", 29 | linkContract: "/wwehbfhwb", 30 | telephone: "+998999787525" 31 | }, 32 | { 33 | id: 4, 34 | name: "John Doe Lemoni", 35 | summa: "100.000 so'm", 36 | date: "18 / 01 / 22", 37 | oy: "Dekabr", 38 | contract: "Shartnoma", 39 | linkContract: "/wwehbfhwb", 40 | telephone: "+998999787525" 41 | }, 42 | { 43 | id: 5, 44 | name: "John Doe Lemoni", 45 | summa: "100.000 so'm", 46 | date: "18 / 01 / 22", 47 | oy: "Dekabr", 48 | contract: "Shartnoma", 49 | linkContract: "/wwehbfhwb", 50 | telephone: "+998999787525" 51 | }, 52 | { 53 | id: 6, 54 | name: "John Doe Lemoni", 55 | summa: "100.000 so'm", 56 | date: "18 / 01 / 22", 57 | oy: "Dekabr", 58 | contract: "Shartnoma", 59 | linkContract: "/wwehbfhwb", 60 | telephone: "+998999787525" 61 | }, 62 | { 63 | id: 7, 64 | name: "John Doe Lemoni", 65 | summa: "100.000 so'm", 66 | date: "18 / 01 / 22", 67 | oy: "Dekabr", 68 | contract: "Shartnoma", 69 | linkContract: "/wwehbfhwb", 70 | telephone: "+998999787525" 71 | }, 72 | { 73 | id: 8, 74 | name: "John Doe Lemoni", 75 | summa: "100.000 so'm", 76 | date: "18 / 01 / 22", 77 | oy: "Dekabr", 78 | contract: "Shartnoma", 79 | linkContract: "/wwehbfhwb", 80 | telephone: "+998999787525" 81 | }, 82 | { 83 | id: 9, 84 | name: "John Doe Lemoni", 85 | summa: "100.000 so'm", 86 | date: "18 / 01 / 22", 87 | oy: "Dekabr", 88 | contract: "Shartnoma", 89 | linkContract: "/wwehbfhwb", 90 | telephone: "+998999787525" 91 | }, 92 | { 93 | id: 10, 94 | name: "John Doe Lemoni", 95 | summa: "100.000 so'm", 96 | date: "18 / 01 / 22", 97 | oy: "Dekabr", 98 | contract: "Shartnoma", 99 | linkContract: "/wwehbfhwb", 100 | telephone: "+998999787525" 101 | }, 102 | { 103 | id: 11, 104 | name: "John Doe Lemoni", 105 | summa: "100.000 so'm", 106 | date: "18 / 01 / 22", 107 | oy: "Dekabr", 108 | contract: "Shartnoma", 109 | linkContract: "/wwehbfhwb", 110 | telephone: "+998999787525" 111 | }, 112 | { 113 | id: 12, 114 | name: "John Doe Lemoni", 115 | summa: "100.000 so'm", 116 | date: "18 / 01 / 22", 117 | oy: "Dekabr", 118 | contract: "Shartnoma", 119 | linkContract: "/wwehbfhwb", 120 | telephone: "+998999787525" 121 | }, 122 | { 123 | id: 13, 124 | name: "John Doe Lemoni", 125 | summa: "100.000 so'm", 126 | date: "18 / 01 / 22", 127 | oy: "Dekabr", 128 | contract: "Shartnoma", 129 | linkContract: "/wwehbfhwb", 130 | telephone: "+998999787525" 131 | }, 132 | { 133 | id: 14, 134 | name: "John Doe Lemoni", 135 | summa: "100.000 so'm", 136 | date: "18 / 01 / 22", 137 | oy: "Dekabr", 138 | contract: "Shartnoma", 139 | linkContract: "/wwehbfhwb", 140 | telephone: "+998999787525" 141 | }, 142 | { 143 | id: 15, 144 | name: "John Doe Lemoni", 145 | summa: "100.000 so'm", 146 | date: "18 / 01 / 22", 147 | oy: "Dekabr", 148 | contract: "Shartnoma", 149 | linkContract: "/wwehbfhwb", 150 | telephone: "+998999787525" 151 | }, 152 | { 153 | id: 16, 154 | name: "John Doe Lemoni", 155 | summa: "100.000 so'm", 156 | date: "18 / 01 / 22", 157 | oy: "Dekabr", 158 | contract: "Shartnoma", 159 | linkContract: "/wwehbfhwb", 160 | telephone: "+998999787525" 161 | }, 162 | { 163 | id: 17, 164 | name: "John Doe Lemoni", 165 | summa: "100.000 so'm", 166 | date: "18 / 01 / 22", 167 | oy: "Dekabr", 168 | contract: "Shartnoma", 169 | linkContract: "/wwehbfhwb", 170 | telephone: "+998999787525" 171 | }, 172 | { 173 | id: 18, 174 | name: "John Doe Lemoni", 175 | summa: "100.000 so'm", 176 | date: "18 / 01 / 22", 177 | oy: "Dekabr", 178 | contract: "Shartnoma", 179 | linkContract: "/wwehbfhwb", 180 | telephone: "+998999787525" 181 | }, 182 | { 183 | id: 19, 184 | name: "John Doe Lemoni", 185 | summa: "100.000 so'm", 186 | date: "18 / 01 / 22", 187 | oy: "Dekabr", 188 | contract: "Shartnoma", 189 | linkContract: "/wwehbfhwb", 190 | telephone: "+998999787525" 191 | }, 192 | { 193 | id: 20, 194 | name: "John Doe Lemoni", 195 | summa: "100.000 so'm", 196 | date: "18 / 01 / 22", 197 | oy: "Dekabr", 198 | contract: "Shartnoma", 199 | linkContract: "/wwehbfhwb", 200 | telephone: "+998999787525" 201 | }, 202 | ] -------------------------------------------------------------------------------- /src/assets/UI-icons/groups-lg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/UI-icons/groups2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/payment/Payment.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | /**@style => Payment.css */ 4 | import "./Payment.css"; 5 | import { Payment_Static } from "../../static/Table_Static"; 6 | import { ReactComponent as InfoIcon } from "../../assets/UI-icons/info.svg"; 7 | import { gsap } from "gsap"; 8 | import { ScrollTrigger } from "gsap/ScrollTrigger"; 9 | 10 | gsap.registerPlugin(ScrollTrigger); 11 | 12 | const Payment = () => { 13 | const scaleOut = (e) => { 14 | const allTb = document.querySelectorAll(".tb"); 15 | allTb.forEach((tb) => { 16 | if (tb.getBoundingClientRect().top < 1030) { 17 | tb.style.transform = "scale(1.01)"; 18 | } else if (tb.getBoundingClientRect().top > 200) { 19 | tb.style.transform = "scale(0.9)"; 20 | } 21 | }); 22 | }; 23 | return ( 24 |
25 |

To’lov

26 |
27 |
28 |
29 | To’lov qilganlar 30 |
31 | 100 32 | 39 | 43 | 47 | 48 |
49 |
50 | 51 |
52 |
53 | To’lov qilmaganlar 54 |
55 | 16 56 | 63 | 67 | 71 | 72 |
73 |
74 |
75 |
76 |
77 |
78 | Umumiy balans 79 |

Dekabr - Yanvar

80 |

4.000.000 so’m

81 | Kelishilgan foiz: 60% 82 |
83 |
84 | Umumiy jarimalari 85 |

Dekabr - Yanvar

86 |

100.000 so’m

87 | Jarimalari soni: 2ta 88 |
89 |
90 |
91 |
scaleOut(e)}> 92 |
93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | {Payment_Static.map((student) => ( 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 119 | 120 | 121 | ))} 122 |
O’quvchi ismiTo'lov summasiTo'lov sanasiTo'lov oyiTelefon raqamiShartnomaBatafsil
{student.name}{student.summa}{student.date}{student.oy}{student.contract}{student.telephone} 116 | {" "} 117 | {" "} 118 |
123 | 124 | 125 | ); 126 | }; 127 | 128 | export default Payment; 129 | -------------------------------------------------------------------------------- /src/components/sidebar/Sidebar.css: -------------------------------------------------------------------------------- 1 | .admin__sidebar { 2 | width: 306px; 3 | height: 950px; 4 | min-height: 1120px; 5 | max-height: 1120px; 6 | box-shadow: var(--main-buildingblock-shadow); 7 | border-radius: var(--main-buildingblock-border-radius); 8 | display: flex; 9 | align-items: center; 10 | flex-direction: column; 11 | transition: all .2s; 12 | margin: 0px 32px; 13 | 14 | } 15 | 16 | .sidebar__logo { 17 | width: 205px; 18 | margin-top: 80px; 19 | } 20 | 21 | .sidebar__profile { 22 | width: 100%; 23 | padding: 44px 46px; 24 | display: flex; 25 | align-items: center; 26 | } 27 | 28 | .profile__avatar { 29 | width: 58px; 30 | height: 58px; 31 | min-height: 58px; 32 | min-width: 58px; 33 | background: linear-gradient(180deg, #C4C4C4 0%, #4A4949 100%); 34 | border-radius: var(--main-extractedblock-circle); 35 | display: grid; 36 | place-items: center; 37 | letter-spacing: -4px; 38 | color: #fff; 39 | font-size: 36px; 40 | } 41 | 42 | .profile__details { 43 | flex: 1; 44 | margin-left: 10px; 45 | } 46 | 47 | .details__username { 48 | width: 100%; 49 | font-style: normal; 50 | font-weight: 500; 51 | font-size: 16px; 52 | line-height: 27px; 53 | font-family: var(--main-poppins-font); 54 | white-space: nowrap; 55 | } 56 | 57 | .details__occupation { 58 | font-style: normal; 59 | font-weight: 500; 60 | font-size: 14px; 61 | white-space: nowrap; 62 | line-height: 21px; 63 | font-family: var(--main-poppins-font); 64 | } 65 | 66 | .sidebar__collection { 67 | width: 100%; 68 | } 69 | 70 | .sidebar__collection-item { 71 | width: 100%; 72 | padding: 0px 25px; 73 | list-style-type: none; 74 | } 75 | 76 | .sidebar__links { 77 | display: flex; 78 | align-items: center; 79 | width: 100%; 80 | height: 73px; 81 | border-radius: var(--secondary-extractedblock-border-radius); 82 | /* background-color: var(--main-buildingblock-softbackground); */ 83 | margin: 8px 0px; 84 | color: var(--secondary-extractedblock-font-color); 85 | text-decoration: none; 86 | padding-left: 35px; 87 | /* overflow: hidden; */ 88 | } 89 | 90 | 91 | .sidebar__links > p { 92 | /* overflow: hidden; */ 93 | transition: all 0.3s; 94 | margin-left: 23px; 95 | font-style: normal; 96 | font-weight: 500; 97 | font-size: 18px; 98 | white-space: nowrap; 99 | overflow: hidden; 100 | line-height: 27px; 101 | font-family: var(--main-poppins-font); 102 | } 103 | 104 | .sidebar__links > svg { 105 | fill: #C7C8CA; 106 | } 107 | .sidebar__links2 svg{ 108 | fill:#313131; 109 | } 110 | 111 | .lightmode__simple-link{ 112 | background: #f7f7f7; 113 | position: relative; 114 | } 115 | 116 | .lightmode__simple-link > svg{ 117 | fill: #313131; 118 | height: 40px; 119 | } 120 | 121 | .darkmode__simple-link{ 122 | background: #2E343E; 123 | color: #C7C8CA; 124 | } 125 | 126 | .lightmode-link{ 127 | background-color: var(--secondary-extractedblock-active-bgcolor); 128 | color: var(--secondary-extractedblock-active-color); 129 | position: relative; 130 | } 131 | 132 | .darkmode-link{ 133 | background-color: var(--darkmode-active-link); 134 | color: var(--darkmode-active-link-color); 135 | } 136 | 137 | .lightmode-link > svg{ 138 | fill: var(--secondary-extractedblock-active-color); 139 | } 140 | 141 | .darkmode-link > svg{ 142 | fill: var(--darkmode-active-link-color); 143 | } 144 | 145 | .sidebar__copyright { 146 | text-align: center; 147 | font-style: normal; 148 | font-weight: 500; 149 | font-size: 15px; 150 | line-height: 22px; 151 | font-family: var(--main-poppins-font); 152 | color: var(--secondary-extractedblock-copyright-color); 153 | margin-top: 46px; 154 | } 155 | 156 | .sidebar__madeby{ 157 | text-align: center; 158 | font-style: normal; 159 | font-weight: 500; 160 | font-size: 15px; 161 | line-height: 22px; 162 | font-family: var(--main-poppins-font); 163 | color: var(--secondary-extractedblock-copyright-color); 164 | } 165 | 166 | .small-logo{ 167 | width: 60px; 168 | } 169 | 170 | .sidebar__logout{ 171 | width: 85%; 172 | height: 60px; 173 | margin: 10px 20px; 174 | border: none; 175 | font-size: 18px; 176 | background-color: var(--secondary-extractedblock-active-color); 177 | color: #fff; 178 | border-radius: var(--secondary-extractedblock-border-radius); 179 | display: flex; 180 | align-items: center; 181 | justify-content: center; 182 | cursor: pointer; 183 | white-space: nowrap; 184 | } 185 | 186 | .sidebar__logout > svg{ 187 | font-size: 23px; 188 | margin-right: 10px; 189 | } 190 | 191 | .sidebar__signoutmodal{ 192 | width: 40%; 193 | height: 300px; 194 | position: absolute; 195 | top: 50%; 196 | left: 50%; 197 | transform: translate(-50%, -50%); 198 | display: flex; 199 | align-items: center; 200 | flex-direction: column; 201 | border-radius: var( --main-buildingblock-border-radius); 202 | z-index: 10; 203 | } 204 | 205 | .modal__icon{ 206 | font-size: 100px; 207 | color: var(--main-warning); 208 | margin: 30px 0px; 209 | } 210 | 211 | .modal__cancel{ 212 | position: absolute; 213 | right: 0; 214 | width: 40px; 215 | height: 40px; 216 | border-radius: 50%; 217 | background-color: #dfdfdf; 218 | border: none; 219 | font-size: 25px; 220 | display: grid; 221 | place-items: center; 222 | margin: 15px; 223 | cursor: pointer; 224 | } 225 | 226 | .sidebar__signoutmodal{ 227 | font-size: 26px; 228 | color: var(--secondary-extractedblock-font-color); 229 | } 230 | 231 | .modal__wrapper{ 232 | margin-top: 30px; 233 | } 234 | 235 | .modal__wrapper > button:first-child{ 236 | padding: 10px 25px; 237 | font-size: 18px; 238 | border-radius: 10px; 239 | border: none; 240 | background-color: var(--active-mode); 241 | color: var( --main-buildingblock-backgroundcolor); 242 | margin-right: 30px; 243 | cursor: pointer; 244 | } 245 | 246 | .modal__wrapper > button:nth-child(2){ 247 | padding: 10px 25px; 248 | font-size: 18px; 249 | border-radius: 10px; 250 | border: none; 251 | color: var( --main-buildingblock-backgroundcolor); 252 | background-color: var(--secondary-extractedblock-active-color); 253 | margin-left: 30px; 254 | cursor: pointer; 255 | } 256 | 257 | .overlay{ 258 | content: ''; 259 | position: fixed; 260 | width: 100vw; 261 | height: 100vh; 262 | background-color: rgba(0, 0, 0, 0.548); 263 | top: 0; 264 | left: 0; 265 | z-index: 2; 266 | } 267 | 268 | .tooltip{ 269 | display: none; 270 | } 271 | 272 | .lightmode-link:hover .tooltip{ 273 | position: absolute; 274 | background-color: #fff; 275 | left: 100px; 276 | z-index: 10; 277 | display: block; 278 | } 279 | 280 | .lightmode__simple-link:hover .tooltip{ 281 | position: absolute; 282 | background-color: #fff; 283 | box-shadow: -2px 0px 20px #c4c4c4; 284 | left: 120px; 285 | padding: 20px; 286 | font-size: 20px; 287 | border-radius: 10px; 288 | white-space: nowrap; 289 | z-index: 10; 290 | display: block; 291 | } 292 | 293 | .tooltip::after{ 294 | content: ''; 295 | position: absolute; 296 | left: -20px; 297 | width: 0; 298 | height: 0; 299 | border-left: 13px solid transparent; 300 | border-right: 13px solid transparent; 301 | border-bottom: 20px solid #fff; 302 | transform: rotate(-90deg); 303 | } --------------------------------------------------------------------------------