diff --git a/public/locales/en/common.json b/public/locales/en/common.json index fa46b531..a3f72df6 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -54,7 +54,20 @@ "FROM_TO_DATE": "From - To dates", "REMOVE": "Remove", "MARK_DROP_OUT": "Mark as Drop Out", - "SOMETHING_WENT_WRONG": "Something went wrong" + "SOMETHING_WENT_WRONG": "Something went wrong", + "NO_GO_BACK":"No, go back", + "YES":"Yes", + "REVIEW_ATTENDANCE":"Review Attendance", + "ADD_NEW":"Add New", + "ADD":"ADD", + "ADD_CENTER":"Add Centers to your view", + "REMOVE_FROM_CENTER":"Remove From Center", + "DROP_OUT":"Drop Out", + "REASON_FOR_DROPOUT":"Reason for Dropout", + "SURE_LOGOUT" :"Are you sure you want to Logout?", + "SURE_UPDATE" :"Are you sure you want to update this attendance?", + "SURE_CLOSE":"Are you sure you want to close?", + "LEARNER_LIST":"Learners List" }, "LOGIN_PAGE": { "USERNAME": "Username", diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json index 93d723d1..84637de1 100644 --- a/public/locales/hi/common.json +++ b/public/locales/hi/common.json @@ -54,7 +54,20 @@ "FROM_TO_DATE": "से - दिनांक तक", "REMOVE": "हटाएं", "MARK_DROP_OUT": "ड्रॉप आउट के रूप में चिह्नित करें", - "SOMETHING_WENT_WRONG": "कुछ गलत हो गया" + "SOMETHING_WENT_WRONG": "कुछ गलत हो गया", + "YES": "हाँ", + "NO_GO_BACK": "नहीं, वापस जाएँ", + "REVIEW_ATTENDANCE": "उपस्थिति की समीक्षा करें", + "ADD_NEW": "नया जोड़ें", + "ADD": "जोड़ें", + "ADD_CENTER": "अपने दृश्य में केंद्र जोड़ें", + "REMOVE_FROM_CENTER": "केंद्र से हटाएं", + "DROP_OUT": "छोड़ दें", + "REASON_FOR_DROPOUT": "ड्रॉपआउट का कारण", + "SURE_LOGOUT": "क्या आप वाकई लोगआउट करना चाहते हैं?", + "SURE_UPDATE": "क्या आप इस उपस्थिति को अपडेट करना चाहते हैं?", + "SURE_CLOSE": "क्या आप वाकई बंद करना चाहते हैं?", + "LEARNER_LIST":"शिक्षार्थियों की सूची" }, "LOGIN_PAGE": { "USERNAME": "उपयोगकर्ता नाम", diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json index a1c27336..a31433cb 100644 --- a/public/locales/mr/common.json +++ b/public/locales/mr/common.json @@ -54,7 +54,20 @@ "FROM_TO_DATE": "पासून - पर्यंत तारीख", "REMOVE": "काढून टाका", "MARK_DROP_OUT": "ड्रॉप आउट म्हणून चिन्हांकित करा", - "SOMETHING_WENT_WRONG": "काहीतरी चूक झाली" + "SOMETHING_WENT_WRONG": "काहीतरी चूक झाली", + "NO_GO_BACK": "नाही, परत जा", + "YES": "होय", + "REVIEW_ATTENDANCE": "उपस्थिती पुनरावलोकन", + "ADD_NEW": "नवीन जोडा", + "ADD": "जोडा", + "ADD_CENTER": "तुमच्या दृश्यात केंद्रे जोडा", + "REMOVE_FROM_CENTER": "केंद्रातून काढून टाका", + "DROP_OUT": "गैरहजर", + "REASON_FOR_DROPOUT": "बाहेर पडण्याचे कारण", + "SURE_LOGOUT": "तुम्हाला खाते बंद करायचं आहे का?", + "SURE_UPDATE": "तुम्हाला ही उपस्थिती अपडेट करायची आहे का?", + "SURE_CLOSE": "तुम्हाला हे बंद करायचं आहे का?", + "LEARNER_LIST":"शिकणाऱ्यांची यादी" }, "LOGIN_PAGE": { "USERNAME": "वापरकर्तानाव", diff --git a/src/assets/images/apartment.png b/src/assets/images/apartment.png new file mode 100644 index 00000000..1276677f Binary files /dev/null and b/src/assets/images/apartment.png differ diff --git a/src/components/BottomDrawer.tsx b/src/components/BottomDrawer.tsx new file mode 100644 index 00000000..f711450c --- /dev/null +++ b/src/components/BottomDrawer.tsx @@ -0,0 +1,84 @@ +import * as React from 'react'; + +import Box from '@mui/material/Box'; +import Drawer from '@mui/material/Drawer'; +import DropOutModal from './DropOutModal'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemButton from '@mui/material/ListItemButton'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; + +type Anchor = 'bottom'; + +interface BottomDrawerProps { + toggleDrawer: ( + anchor: Anchor, + open: boolean + ) => (event: React.MouseEvent) => void; + state: { [key in Anchor]?: boolean }; + optionList: { + label: string; + icon: React.ReactNode; + name: string; + }[]; + listItemClick: (event: React.MouseEvent, name: string) => void; +} + +export default function BottomDrawer({ + toggleDrawer, + state, + optionList, + listItemClick, +}: BottomDrawerProps) { + const { t } = useTranslation(); + const theme = useTheme(); + + const list = (anchor: Anchor) => ( + + + + + + {optionList.map(({ label, icon, name }, index) => ( + + listItemClick(e, name)} + > + {icon} + + + + ))} + + + ); + + return ( +
+ + {list('bottom')} + +
+ ); +} diff --git a/src/components/DropOutModal.tsx b/src/components/DropOutModal.tsx new file mode 100644 index 00000000..e4c2bcd6 --- /dev/null +++ b/src/components/DropOutModal.tsx @@ -0,0 +1,132 @@ +import * as React from 'react'; + +import { + Box, + Button, + Divider, + FormControl, + InputLabel, + MenuItem, + Modal, + OutlinedInput, + Select, + SelectChangeEvent, + Typography, +} from '@mui/material'; +import { Theme, useTheme } from '@mui/material/styles'; + +import CloseIcon from '@mui/icons-material/Close'; +import { useTranslation } from 'next-i18next'; + +interface DropOutModalProps { + open: boolean; + onClose: (confirmed: boolean) => void; +} + +function DropOutModal({ open, onClose }: DropOutModalProps) { + const { t } = useTranslation(); + + const style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '85%', + boxShadow: 24, + bgcolor: '#fff', + borderRadius: '24px', + '@media (min-width: 600px)': { + width: '450px', + }, + }; + + const theme = useTheme(); + + return ( + + + + + + + {t('COMMON.DROP_OUT')} + + + onClose(false)} + /> + + + + + + {t('COMMON.REASON_FOR_DROPOUT')} + + + + + + + + + + + + + + ); +} + +export default DropOutModal; diff --git a/src/components/LearnersList.tsx b/src/components/LearnersList.tsx new file mode 100644 index 00000000..638c0fdd --- /dev/null +++ b/src/components/LearnersList.tsx @@ -0,0 +1,193 @@ +import BottomDrawer from './BottomDrawer'; +import { Box } from '@mui/material'; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; +import DropOutModal from './DropOutModal'; +import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; +import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; +import NoAccountsIcon from '@mui/icons-material/NoAccounts'; +import React from 'react'; +import Woman2Icon from '@mui/icons-material/Woman2'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; + +type Anchor = 'bottom'; + +const LearnersList = () => { + const [state, setState] = React.useState({ + bottom: false, + }); + + const toggleDrawer = + (anchor: Anchor, open: boolean) => + (event: React.KeyboardEvent | React.MouseEvent) => { + if ( + event.type === 'keydown' && + ((event as React.KeyboardEvent).key === 'Tab' || + (event as React.KeyboardEvent).key === 'Shift') + ) { + return; + } + + setState({ ...state, bottom: open }); + }; + const theme = useTheme(); + const { t } = useTranslation(); + const [showModal, setShowModal] = React.useState(false); + + const listItemClick = (event: React.MouseEvent, name: string) => { + if (name === 'mark-drop-out') { + setShowModal(true); + } + }; + + return ( + <> + + + + + + + + + Aanya Gupta + + + + 19 y/o + + + + 1102929282 + + + + + + + + + + + + + + + + + Aanya Gupta + + + + 19 y/o + + + + Dropped Out + + + + + + + + + ), + name: 'mark-drop-out', + }, + { + label: t('COMMON.REMOVE_FROM_CENTER'), + icon: ( + + ), + name: 'remove-from-center', + }, + ]} + /> + + setShowModal(false)} /> + + ); +}; + +export default LearnersList; diff --git a/src/components/MenuDrawer.tsx b/src/components/MenuDrawer.tsx index 1696cfcd..fe2a296b 100644 --- a/src/components/MenuDrawer.tsx +++ b/src/components/MenuDrawer.tsx @@ -56,6 +56,7 @@ const MenuDrawer: React.FC = ({ }; const isDashboard = router.pathname === '/dashboard'; + const isTeacherCenter = router.pathname === '/teachingCenters'; return ( = ({ background: isDashboard ? theme.palette.primary.main : 'transparent', - padding: '16px 18px !important', + padding: isDashboard + ? '16px 18px !important' + : '0px 18px !important', marginTop: '15px', color: isDashboard ? '#2E1500' : theme.palette.warning.A200, fontWeight: isDashboard ? '600' : 500, @@ -163,27 +166,36 @@ const MenuDrawer: React.FC = ({ {t('DASHBOARD.DASHBOARD')} - - - - - + diff --git a/src/pages/teachingCenterDetails.tsx b/src/pages/teachingCenterDetails.tsx new file mode 100644 index 00000000..104a9a73 --- /dev/null +++ b/src/pages/teachingCenterDetails.tsx @@ -0,0 +1,145 @@ +import { Button, Typography } from '@mui/material'; + +import AddIcon from '@mui/icons-material/Add'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; +import Box from '@mui/material/Box'; +import Header from '@/components/Header'; +import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; +import LearnersList from '@/components/LearnersList'; +import React from 'react'; +import Tab from '@mui/material/Tab'; +import Tabs from '@mui/material/Tabs'; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; + +const teachingCenterDetails = () => { + const [value, setValue] = React.useState(1); + + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue); + }; + + const handleBackEvent = () => { + window.history.back(); + }; + + const { t } = useTranslation(); + + const theme = useTheme(); + + return ( + <> +
+ + + + + + Khapari Dharmu + + + + Chimur, Chandrapur + + + + + + + + + + + + {value === 1 && ( + <> + + + + + + {t('COMMON.REVIEW_ATTENDANCE')} + + + + + + + + )} + + + ); +}; + +export async function getStaticProps({ locale }: any) { + return { + props: { + ...(await serverSideTranslations(locale, ['common'])), + // Will be passed to the page component as props + }, + }; +} + +export default teachingCenterDetails; diff --git a/src/pages/teachingCenters.tsx b/src/pages/teachingCenters.tsx new file mode 100644 index 00000000..15854b10 --- /dev/null +++ b/src/pages/teachingCenters.tsx @@ -0,0 +1,165 @@ +import { Box, Button } from '@mui/material'; + +import AddIcon from '@mui/icons-material/Add'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; +import Header from '@/components/Header'; +import Image from 'next/image'; +import building from '../assets/images/apartment.png'; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { useRouter } from 'next/router'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; + +const teachingCenters = () => { + const { t } = useTranslation(); + const theme = useTheme(); + const router = useRouter(); + return ( + <> +
+ + + {t('DASHBOARD.MY_TEACHING_CENTERS')} + + + + + + + {t('COMMON.ADD_CENTER')} + + + + { + router.push(`/teachingCenterDetails`); // Check route + }} + sx={{ cursor: 'pointer' }} + > + Khapari Dharmu, Chimur, Chandrapur + {/* will come from API */} + + + apartment + + + + Khapari Dharmu + {/* will come from API */} + + + + + + + + + Bhiwapur, Nagpur (Remote) + + + + apartment + + + + + Bhivapur + + + + + + + + + + ); +}; +export async function getStaticProps({ locale }: any) { + return { + props: { + ...(await serverSideTranslations(locale, ['common'])), + // Will be passed to the page component as props + }, + }; +} + +export default teachingCenters; diff --git a/src/styles/globals.css b/src/styles/globals.css index c92b55ae..8ac24636 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -727,6 +727,40 @@ main { .text4D { color: #4d4639 !important; } + + +.p-10 { + padding: 10px; +} + +.box_shadow_center { + box-shadow: 0px 2px 6px 2px #00000026; + height: 40px; + width: 40px; + box-shadow: 0px 1px 2px 0px #0000004d; + border: 1.5px solid #ffffff; + border-radius: 100px; + background-color: #ede1cf; + display: flex; + justify-content: center; + align-items: center; +} +.modal-bottom div:nth-child(3) { + border-top-left-radius: 28px !important; + border-top-right-radius: 28px !important; +} +.bg-grey { + background: #dadada !important; + width: 32px; + height: 4px; +} + +.modal-bottom div:nth-child(1) { + position: unset !important; +} +.textCD { + color: #cdc5bd !important; + .selected-start-end { background-color: var(--mui-palette-primary-main) !important; }