diff --git a/src/components/HorizontalLinearStepper.tsx b/src/components/HorizontalLinearStepper.tsx index 7fb95b3e..2a2d7ac8 100644 --- a/src/components/HorizontalLinearStepper.tsx +++ b/src/components/HorizontalLinearStepper.tsx @@ -12,11 +12,10 @@ import { useTranslation } from 'react-i18next'; import { useTheme } from '@mui/material/styles'; const steps: string[] = ['Board', 'Subjects', 'Registration']; -export default function HorizontalLinearStepper() { - const [activeStep, setActiveStep] = React.useState(1); - +export default function HorizontalLinearStepper({activeStep}) { const { t } = useTranslation(); const theme = useTheme(); + const CustomStepIcon = (props: any) => { const { icon, active, completed } = props; diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx index f0bdc1c9..e24780ed 100644 --- a/src/components/SessionCard.tsx +++ b/src/components/SessionCard.tsx @@ -10,6 +10,7 @@ import { useTranslation } from 'next-i18next'; import React, { useEffect } from 'react'; import CenterSessionModal from './CenterSessionModal'; import PlannedSession from './PlannedSession'; +import ConfirmationModal from './ConfirmationModal'; const SessionsCard: React.FC = ({ data, diff --git a/src/pages/attendance-overview.tsx b/src/pages/attendance-overview.tsx index f04974ec..925612e5 100644 --- a/src/pages/attendance-overview.tsx +++ b/src/pages/attendance-overview.tsx @@ -514,9 +514,9 @@ const AttendanceOverview: React.FC = () => { padding: '15px 20px 5px', }} width={'100%'} - onClick={handleBackEvent} > diff --git a/src/pages/board-enrollment/index.tsx b/src/pages/board-enrollment/index.tsx index bb3b7aad..165b2e2a 100644 --- a/src/pages/board-enrollment/index.tsx +++ b/src/pages/board-enrollment/index.tsx @@ -1,18 +1,18 @@ import Header from '@/components/Header'; import { useTheme } from '@mui/material/styles'; import { - Box, - Button, - FormControl, - Grid, - IconButton, - InputBase, - MenuItem, - Paper, - Select, - Step, - StepLabel, - Stepper, + Box, + Button, + FormControl, + Grid, + IconButton, + InputBase, + MenuItem, + Paper, + Select, + Step, + StepLabel, + Stepper, } from '@mui/material'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { useTranslation } from 'next-i18next'; @@ -23,185 +23,191 @@ import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from 'recharts'; import EastIcon from '@mui/icons-material/East'; import HorizontalLinearStepper from '@/components/HorizontalLinearStepper'; import PieChartGraph from '@/components/PieChartGraph'; - import { boardEnrollment } from '@/services/BoardEnrollmentServics'; import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; +import { useRouter } from 'next/router'; const BoardEnrollment = () => { - const theme = useTheme(); - const { t } = useTranslation(); - const [boardEnrollmentList, setBoardEnrollmentList] = useState([]); - - useEffect(() => { - const res = boardEnrollment(); - setBoardEnrollmentList(res); - }, []); + const theme = useTheme(); + const { t } = useTranslation(); + const router = useRouter(); + const [boardEnrollmentList, setBoardEnrollmentList] = useState([]); + const [activeStep, setActiveStep] = React.useState(0); + useEffect(() => { + const res = boardEnrollment(); + setBoardEnrollmentList(res); + }, []); - return ( - <> -
+ return ( + <> +
+ + {t('BOARD_ENROOLMENT.BOARD_ENROLLMENT')} + - + + + - {t('BOARD_ENROOLMENT.BOARD_ENROLLMENT')} - + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + - + - - {boardEnrollmentList.map((item: any, index: any) => { - return ( - - - - - {item.studentName} - - - - - {item.center} - - {item.isDropout ? ( - - {t('BOARD_ENROOLMENT.BOARD_ENROLLMENT')}{' '} - - - ) : ( - - - - )} - - - ); - })} + + {boardEnrollmentList.map((item: any, index: any) => { + return ( + + { + router.push(`/board-enrollment/student-detail`); + }} + > + + + {item.studentName} + + + + + {item.center} + + {item.isDropout ? ( + + {t('BOARD_ENROOLMENT.BOARD_ENROLLMENT')}{' '} + + + ) : ( + + + + )} + - - ); + ); + })} + + + ); }; export async function getStaticProps({ locale }: any) { - return { - props: { - ...(await serverSideTranslations(locale, ['common'])), - }, - }; + return { + props: { + ...(await serverSideTranslations(locale, ['common'])), + }, + }; } export default BoardEnrollment; diff --git a/src/pages/board-enrollment/student-detail/index.tsx b/src/pages/board-enrollment/student-detail/index.tsx new file mode 100644 index 00000000..57fb8d50 --- /dev/null +++ b/src/pages/board-enrollment/student-detail/index.tsx @@ -0,0 +1,412 @@ +import Header from '@/components/Header'; +import { + Box, + Button, + Checkbox, + FormControl, + FormControlLabel, + FormLabel, + InputLabel, + MenuItem, + Radio, + RadioGroup, + Select, + Typography, +} from '@mui/material'; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import React from 'react'; +import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; +import { logEvent } from '@/utils/googleAnalytics'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'react-i18next'; +import HorizontalLinearStepper from '@/components/HorizontalLinearStepper'; + +const BoardEnrollmentDetail = () => { + const theme = useTheme(); + const { t } = useTranslation(); + const handleBackEvent = () => { + window.history.back(); + logEvent({ + action: 'back-button-clicked-attendance-overview', + category: 'Attendance Overview Page', + label: 'Back Button Clicked', + }); + }; + const [selectedValue, setSelectedValue] = React.useState('a'); + const [activeStep, setActiveStep] = React.useState(0); + const [checked, setChecked] = React.useState([false, false]); + + const handleChange = (event: React.ChangeEvent) => { + setSelectedValue(event.target.value); + }; + + const handleNext = () => { + setActiveStep((prevActiveStep) => { + if (prevActiveStep < 2) { + return prevActiveStep + 1; + } else { + return prevActiveStep; + } + }); + }; + + const handleBack = () => { + setActiveStep((prevActiveStep) => { + if (prevActiveStep > 0) { + return prevActiveStep - 1; + } else { + return prevActiveStep; + } + }); + }; + + const handleParentChange = (event: React.ChangeEvent) => { + const isChecked = event.target.checked; + setChecked([isChecked, isChecked]); + }; + + const handleChildChange = + (index: number) => (event: React.ChangeEvent) => { + const updatedChecked = [...checked]; + updatedChecked[index] = event.target.checked; + setChecked(updatedChecked); + }; + return ( + <> + +
+ + + + + Student Name {/*will come from Api */} + + + Khapari Dharmu (Chimur, Chandrapur) {/*will come from Api */} + + + + + + + + + + + Choose which Board the Learner is going to be enrolled in + + + {activeStep === 0 && ( + <> + + + + ICSE + + + + + + + + CBSE + + + + + + )} + + {activeStep === 1 && ( + <> + + + } + /> + + + + } + /> + + + + } + /> + + + )} + + + {activeStep === 2 && ( + <> + + + + + Board Enrolment Number + + + + + + + + Exam Fees Paid? (optional) + + + } + label="Yes" + sx={{ color: '#1F1B13' }} + /> + } + label="No" + sx={{ color: '#1F1B13' }} + /> + + + + + + + + )} + + {/* Button starts form here */} + + + + + {/* Button end here */} + + + + “Save & Next” to save your progress. You can come back and change it + anytime. + + + ); +}; + +export async function getStaticProps({ locale }: any) { + return { + props: { + ...(await serverSideTranslations(locale, ['common'])), + }, + }; +} + +export default BoardEnrollmentDetail; diff --git a/src/services/BoardEnrollmentServics.ts b/src/services/BoardEnrollmentServics.ts index 05abd64d..64624ce3 100644 --- a/src/services/BoardEnrollmentServics.ts +++ b/src/services/BoardEnrollmentServics.ts @@ -1,24 +1,24 @@ -import { BoardEnrollment } from "@/utils/Interfaces"; +import { BoardEnrollment } from '@/utils/Interfaces'; export const boardEnrollment = (): BoardEnrollment[] => { - return [ - { - userId: 1, - studentName: 'Aanya Gupta', - center: 'Khapari Dharmu (Chimur, Chandrapur)', - isDropout: false, - }, - { - userId: 2, - studentName: 'Aisha Bhatt', - center: 'Khapari Dharmu (Chimur, Chandrapur)', - isDropout: false, - }, - { - userId: 3, - studentName: 'Ankita Kulkarni', - center: 'Khapari Dharmu (Chimur, Chandrapur)', - isDropout: true, - }, - ]; -}; \ No newline at end of file + return [ + { + userId: 1, + studentName: 'Aanya Gupta', + center: 'Khapari Dharmu (Chimur, Chandrapur)', + isDropout: false, + }, + { + userId: 2, + studentName: 'Aisha Bhatt', + center: 'Khapari Dharmu (Chimur, Chandrapur)', + isDropout: false, + }, + { + userId: 3, + studentName: 'Ankita Kulkarni', + center: 'Khapari Dharmu (Chimur, Chandrapur)', + isDropout: true, + }, + ]; +};