diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 065a9c46..2b2e3a5e 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -94,7 +94,13 @@ "USER_DELETED_PERMANENTLY": "User Successfully Deleted!", "OBSERVATIONS_FORMS": "Observations and Forms", "OTHER_REASON": "Other Reason", - "OTHER_REASON_PLACEHOLDER": "Enter Other Reason" + "OTHER_REASON_PLACEHOLDER": "Enter Other Reason", + "CENTER_SESSIONS": "Center Sessions", + "SCHEDULE_NEW": "Schedule New", + "UPCOMING_EXTRA_SESSION": "Upcoming Extra Sessions", + "NO_SESSIONS_SCHEDULED": "No sessions scheduled", + "TO_BE_TAUGHT": "What is going to be taught:", + "SELECT_TOPIC": "Select Topic, Sub-topic" }, "LOGIN_PAGE": { "USERNAME": "Username", diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json index c8b72ef0..d0d04154 100644 --- a/public/locales/hi/common.json +++ b/public/locales/hi/common.json @@ -86,7 +86,13 @@ "LEARNER_MARKED_DROPOUT": "शिक्षार्थी को ड्रॉप आउट के रूप में चिह्नित किया गया", "LEARNER_UNMARKED_DROPOUT": "शिक्षार्थी को ड्रॉपआउट के रूप में अनचिह्नित किया गया", "LEARNER_REMOVED": "शिक्षार्थी को हटा दिया गया है", - "DELETE_USER": "उपयोगकर्ता को स्थायी रूप से हटाएं" + "DELETE_USER": "उपयोगकर्ता को स्थायी रूप से हटाएं", + "CENTER_SESSIONS": "केंद्र सत्र", + "SCHEDULE_NEW": "शेड्यूल नया", + "UPCOMING_EXTRA_SESSION": "आगामी अतिरिक्त सत्र", + "NO_SESSIONS_SCHEDULED": "कोई सत्र निर्धारित नहीं है", + "TO_BE_TAUGHT": "क्या सिखाया जाएगा:", + "SELECT_TOPIC": "विषय, उप-विषय चुनें" }, "LOGIN_PAGE": { "USERNAME": "उपयोगकर्ता नाम", @@ -256,7 +262,7 @@ "REGULAR": "नियमित", "REMOTE": "दूरस्थ", "NEW_CENTER": "नया केंद्र", -"UNIT_NAME": "इकाई नाम", -"NOTE": "नोट: यह केंद्र का नाम होगा" + "UNIT_NAME": "इकाई नाम", + "NOTE": "नोट: यह केंद्र का नाम होगा" } } diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json index facb5c03..3c845ac2 100644 --- a/public/locales/mr/common.json +++ b/public/locales/mr/common.json @@ -86,7 +86,13 @@ "LEARNER_MARKED_DROPOUT": "शिकणाऱ्याला ड्रॉप आऊट म्हणून चिन्हांकित केले", "LEARNER_UNMARKED_DROPOUT": "शिकणाऱ्याला ड्रॉपआउट म्हणून अनचिन्हांकित केले", "LEARNER_REMOVED": "शिकणाऱ्याचे हटवले गेले आहे", - "DELETE_USER": "वापरकर्त्यास कायमचे हटवा" + "DELETE_USER": "वापरकर्त्यास कायमचे हटवा", + "CENTER_SESSIONS": "केंद्र सत्र", + "SCHEDULE_NEW": "नवीन वेळापत्रक", + "UPCOMING_EXTRA_SESSION": "आगामी अतिरिक्त सत्र", + "NO_SESSIONS_SCHEDULED": "कोणतेही सत्र शेड्यूल केलेले नाही", + "TO_BE_TAUGHT": "काय शिकवले जाईल:", + "SELECT_TOPIC": "विषय, उप-विषय निवडा" }, "LOGIN_PAGE": { "USERNAME": "वापरकर्तानाव", @@ -256,9 +262,8 @@ "CENTER_TYPE": "केंद्र प्रकार", "REGULAR": "नियमित", "REMOTE": "दूरस्थ", - "NEW_CENTER": "नवीन केंद्र", -"UNIT_NAME": "युनिट नाव", -"NOTE": "टीप: हे केंद्राचे नाव असेल" - } - } - \ No newline at end of file + "NEW_CENTER": "नवीन केंद्र", + "UNIT_NAME": "युनिट नाव", + "NOTE": "टीप: हे केंद्राचे नाव असेल" + } +} diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx new file mode 100644 index 00000000..fac18d37 --- /dev/null +++ b/src/components/SessionCard.tsx @@ -0,0 +1,49 @@ +import { Box, Typography } from '@mui/material'; +import { Session, SessionsCardProps } from '@/utils/Interfaces'; + +import EditOutlined from '@mui/icons-material/EditOutlined'; +import React from 'react'; +import { useTheme } from '@mui/material/styles'; + +const SessionsCard: React.FC = ({ data, children }) => { + const theme = useTheme(); + return ( + + + + + {data?.subject} + + + + {data?.time} + + + {data?.teacherName} + + + + + {children} + + ); +}; + +export default SessionsCard; diff --git a/src/components/SessionCardFooter.tsx b/src/components/SessionCardFooter.tsx new file mode 100644 index 00000000..05cf3a54 --- /dev/null +++ b/src/components/SessionCardFooter.tsx @@ -0,0 +1,96 @@ +import Accordion from '@mui/material/Accordion'; +import AccordionDetails from '@mui/material/AccordionDetails'; +import AccordionSummary from '@mui/material/AccordionSummary'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; +import Box from '@mui/material/Box'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import MenuBookIcon from '@mui/icons-material/MenuBook'; +import PriorityHighIcon from '@mui/icons-material/PriorityHigh'; +import React from 'react'; +import { SessionCardFooterProps } from '../utils/Interfaces'; +import SubdirectoryArrowRightIcon from '@mui/icons-material/SubdirectoryArrowRight'; +import Typography from '@mui/material/Typography'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'react-i18next'; + +const SessionCardFooter: React.FC = ({ item }) => { + const theme = useTheme(); + const { t } = useTranslation(); + + return item?.topic ? ( + + + } + aria-controls="panel1-content" + id="panel1-header" + className="accordion-summary" + sx={{ px: 0, m: 0 }} + > + + {t('COMMON.TO_BE_TAUGHT')} + + + + + + + {item?.topic} + + + + + + {item?.subtopic} + + + + + + ) : ( + + + + + {t('COMMON.SELECT_TOPIC')} + + + + + ); +}; + +export default SessionCardFooter; diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx index 86c0c4da..f7b5377f 100644 --- a/src/pages/centers/[cohortId].tsx +++ b/src/pages/centers/[cohortId].tsx @@ -1,33 +1,52 @@ import { Button, Typography } from '@mui/material'; import React, { useEffect } from 'react'; +import { formatSelectedDate, getTodayDate, toPascalCase } from '@/utils/Helper'; +import Accordion from '@mui/material/Accordion'; +import AccordionDetails from '@mui/material/AccordionDetails'; +import AccordionSummary from '@mui/material/AccordionSummary'; import AddIcon from '@mui/icons-material/Add'; import AddLeanerModal from '@/components/AddLeanerModal'; import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import Box from '@mui/material/Box'; import CohortLearnerList from '@/components/CohortLearnerList'; import { CustomField } from '@/utils/Interfaces'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { GetStaticPaths } from 'next'; import Header from '@/components/Header'; import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; +import MenuBookIcon from '@mui/icons-material/MenuBook'; +import PriorityHighIcon from '@mui/icons-material/PriorityHigh'; +import { Session } from '../../utils/Interfaces'; +import SessionCard from '@/components/SessionCard'; +import SessionCardFooter from '@/components/SessionCardFooter'; +import SubdirectoryArrowRightIcon from '@mui/icons-material/SubdirectoryArrowRight'; import Tab from '@mui/material/Tab'; import Tabs from '@mui/material/Tabs'; +import WeekCalender from '@/components/WeekCalender'; import { getCohortDetails } from '@/services/CohortServices'; +import { getSessions } from '@/services/Sessionservice'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { useRouter } from 'next/router'; import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'next-i18next'; -import { toPascalCase } from '@/utils/Helper'; const TeachingCenterDetails = () => { const [value, setValue] = React.useState(1); + const [showDetails, setShowDetails] = React.useState(false); + const [classId, setClassId] = React.useState(''); const router = useRouter(); const { cohortId }: any = router.query; const { t } = useTranslation(); const theme = useTheme(); + const [selectedDate, setSelectedDate] = + React.useState(getTodayDate()); const [cohortDetails, setCohortDetails] = React.useState({}); const [reloadState, setReloadState] = React.useState(false); + const [sessions, setSessions] = React.useState(); + const [percentageAttendanceData, setPercentageAttendanceData] = + React.useState(null); useEffect(() => { const getCohortData = async () => { @@ -41,13 +60,15 @@ const TeachingCenterDetails = () => { if (cohortData?.customField?.length) { const district = cohortData.customField.find( - (item: CustomField) => item.label === "District" + (item: CustomField) => item.label === 'District' ); const state = cohortData.customField.find( (item: CustomField) => item.label === 'State' ); - cohortData.address = `${toPascalCase(district?.value)}, ${toPascalCase(state?.value)}` || ''; + cohortData.address = + `${toPascalCase(district?.value)}, ${toPascalCase(state?.value)}` || + ''; } setCohortDetails(cohortData); } @@ -55,6 +76,15 @@ const TeachingCenterDetails = () => { getCohortData(); }, []); + useEffect(() => { + const getSessionsData = async () => { + const response: Session[] = await getSessions('cohortId'); // Todo add dynamic cohortId + setSessions(response); + }; + + getSessionsData(); + }, []); + const handleChange = (event: React.SyntheticEvent, newValue: number) => { setValue(newValue); }; @@ -63,6 +93,11 @@ const TeachingCenterDetails = () => { window.history.back(); }; + const showDetailsHandle = (dayStr: string) => { + setSelectedDate(formatSelectedDate(dayStr)); + setShowDetails(true); + }; + return ( <>
@@ -91,14 +126,12 @@ const TeachingCenterDetails = () => { (cohortDetails?.centerType) )} - - + {cohortDetails?.address} - - + @@ -131,11 +164,62 @@ const TeachingCenterDetails = () => { }, }} > - + + + + {value === 1 && ( + <> + + + + + + {t('COMMON.UPCOMING_EXTRA_SESSION')} + + + {t('COMMON.NO_SESSIONS_SCHEDULED')} + + + + + + + {sessions && + sessions.map((item: Session, index: number) => ( + + + + ))} + + + )} - {value === 1 && ( + {value === 2 && ( <>