Merge pull request #403 from Rushikesh-Sonawane99/release-1.0.0

Issue #PS-1232 feat: Developed Board Enrollment Feature
tekdi · Nov 21, 2024 · a9c94bd · a9c94bd
2 parents 6af1920 + c21759d
commit a9c94bd
Show file tree

Hide file tree

Showing 16 changed files with 1,735 additions and 797 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -139,7 +139,8 @@
     "NO_CENTER_FOUND": "No Center found",
     "FILTER_BY": "Filter By",
     "ALL": "All",
-    "NOW": "Now"
+    "ACTIVE": "Active",
+    "NA": "N.A."
   },
   "LOGIN_PAGE": {
     "USERNAME": "Username",
@@ -579,16 +580,24 @@
     "BOARD_ENROLLMENT": "Board Enrollment",
     "BOARD_SELECTION": "Board Selection",
     "SUBJECTS_SELECTION": "Subjects Selection",
-    "REGISTRATION_COMPLETED": "Registration Completed",
     "DROPPED_OUT": " Dropped Out",
     "FEE_PAYMENT": "Fee Payment",
-    "BOARD_ENROLLMENT_NUMBER": "Board Enrolment Number",
-    "EXAM_FEES_PAID": "  Exam Fees Paid? (optional)",
+    "BOARD_ENROLLMENT_NUMBER": "Board Enrollment Number",
+    "EXAM_FEES_PAID": "Exam Fees Paid?",
     "SAVE_AND_NEXT": "Save and Next",
     "TO_SAVE_YOUR_PROGRESS": "“Save & Next” to save your progress. You can come back and change it anytime.",
     "MANDATORY": "Mandatory for {{FeesStepBoards}} only. For other Boards, this step is automatically marked completed. Please click on Save to submit the data.",
     "COMPLETED": "Completed",
-    "MARK_AS_COMPLETE": "Mark as Complete"
+    "MARK_AS_COMPLETE": "Mark as Complete",
+    "BY_CURRENT_STAGES": "By Current Stages",
+    "REGISTRATION_NUMBER": "Registration Number",
+    "TOTAL_LEARNERS": "Total Learners",
+    "BOARD": "Board",
+    "CHOOSE_BOARD": "Choose which Board the Learner is going to be enrolled in",
+    "CHOOSE_SUBJECT": "Choose which subjects the learner is enrolling for",
+    "SUBJECTS_ENROLLED":"Subjects Enrolled",
+    "EXAM_REGISTRATION_FEES_PAID":"Exam Registration Fees Paid?",
+    "EDIT": "Edit"
   },
   "OBSERVATION": {
     "OBSERVATION_START": "Start Observation",

diff --git a/...student-detail/profile-overview/index.tsx → src/components/BoardEnrollmentProfile.tsx b/...student-detail/profile-overview/index.tsx → src/components/BoardEnrollmentProfile.tsx
@@ -1,14 +1,23 @@
 import Header from '@/components/Header';
 import { Box, Button, Divider, Typography } from '@mui/material';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+// import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import React from 'react';
 import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
-import { useDirection } from '../../../../hooks/useDirection';
+import { useDirection } from '../hooks/useDirection';
 import { logEvent } from '@/utils/googleAnalytics';
+import { BoardEnrollmentProfileProps } from '@/utils/Interfaces';
 
-const ProfileEnrolment = () => {
+const BoardEnrollmentProfile: React.FC<BoardEnrollmentProfileProps> = ({
+  learnerName,
+  centerName,
+  board,
+  subjects,
+  registrationNum,
+  feesPaidStatus,
+  setActiveStep = () => {},
+}) => {
   const theme = useTheme<any>();
   const { t } = useTranslation();
   const { dir, isRTL } = useDirection();
@@ -21,6 +30,10 @@ const ProfileEnrolment = () => {
       label: 'Back Button Clicked',
     });
   };
+
+    const handleEditClick = () => {
+    setActiveStep(0);
+  };
   return (
     <>
       <Header />
@@ -49,15 +62,15 @@ const ProfileEnrolment = () => {
             fontSize={'22px'}
             fontWeight={400}
           >
-            Student Name {/*will come from Api */}
+            {learnerName}
           </Typography>
           <Typography
             color={theme.palette.warning['A200']}
             textAlign={'left'}
             fontSize={'11px'}
             fontWeight={500}
           >
-            Khapari Dharmu (Chimur, Chandrapur) {/*will come from Api */}
+            {centerName}
           </Typography>
         </Box>
       </Box>
@@ -69,74 +82,44 @@ const ProfileEnrolment = () => {
           p: '16px',
           borderRadius: '16px',
           maxWidth: '60%',
+          '@media (max-width: 900px)': {
+            maxWidth: '100%',
+          },
         }}
       >
-        <Box sx={{ color: '#969088', fontSize: '16px', fontWeight: '600' }}>
-          Board
+        <Box sx={{ color: '#969088', fontSize: '12px', fontWeight: '600' }}>
+          {t('BOARD_ENROLMENT.BOARD')}
         </Box>
         <Box
           sx={{ color: '#4D4639', fontWeight: '400', fontSize: '16px', mt: 1 }}
         >
-          ICSE
+          {board}
         </Box>
         <Box mt={2}>
           <Box sx={{ color: '#969088', fontSize: '12px', fontWeight: '600' }}>
-            Subjects Enrolled
+            {t('BOARD_ENROLMENT.SUBJECTS_ENROLLED')}
           </Box>
           <Box sx={{ display: 'flex', gap: '12px', flexWrap: 'wrap', mt: 1 }}>
-            <Box
-              sx={{
-                padding: '6px 12px',
-                borderRadius: '8px',
-                border: '1px solid #DADADA',
-                color: '#4D4639',
-                fontSize: '14px',
-                fontWeight: '500',
-              }}
-            >
-              Hindi
-            </Box>
-            <Box
-              sx={{
-                padding: '6px 12px',
-                borderRadius: '8px',
-                border: '1px solid #DADADA',
-                color: '#4D4639',
-                fontSize: '14px',
-                fontWeight: '500',
-              }}
-            >
-              Science
-            </Box>
-            <Box
-              sx={{
-                padding: '6px 12px',
-                borderRadius: '8px',
-                border: '1px solid #DADADA',
-                color: '#4D4639',
-                fontSize: '14px',
-                fontWeight: '500',
-              }}
-            >
-              Social Science
-            </Box>
-            <Box
-              sx={{
-                padding: '6px 12px',
-                borderRadius: '8px',
-                border: '1px solid #DADADA',
-                color: '#4D4639',
-                fontSize: '14px',
-                fontWeight: '500',
-              }}
-            >
-              Life Skills
-            </Box>
+            {subjects.map((subject) => (
+              <Box
+                key={subject?.identifier}
+                sx={{
+                  padding: '6px 12px',
+                  borderRadius: '8px',
+                  border: '1px solid #DADADA',
+                  color: '#4D4639',
+                  fontSize: '14px',
+                  fontWeight: '500',
+                }}
+              >
+                {subject.name}
+              </Box>
+            ))}
           </Box>
         </Box>
         <Box mt={2}>
-          <Box sx={{ color: '#969088', fontSize: '16px', fontWeight: '600' }}>
-            Board Enrolment Number
+          <Box sx={{ color: '#969088', fontSize: '12px', fontWeight: '600' }}>
+            {t('BOARD_ENROLMENT.BOARD_ENROLLMENT_NUMBER')}
           </Box>
           <Box
             sx={{
@@ -146,12 +129,12 @@ const ProfileEnrolment = () => {
               mt: 1,
             }}
           >
-            100245673
+            {registrationNum}
           </Box>
         </Box>
         <Box mt={2}>
-          <Box sx={{ color: '#969088', fontSize: '16px', fontWeight: '600' }}>
-            Date of Registration
+          <Box sx={{ color: '#969088', fontSize: '12px', fontWeight: '600' }}>
+            {t('BOARD_ENROLMENT.EXAM_REGISTRATION_FEES_PAID')}
           </Box>
           <Box
             sx={{
@@ -161,7 +144,7 @@ const ProfileEnrolment = () => {
               mt: 1,
             }}
           >
-            24 Aug, 2024
+            {feesPaidStatus.toLocaleUpperCase()}
           </Box>
         </Box>
         <Box mt={2}>
@@ -179,20 +162,21 @@ const ProfileEnrolment = () => {
             }}
             variant="contained"
             color="primary"
+            onClick={handleEditClick}
           >
-            Edit
+            {t('BOARD_ENROLMENT.EDIT')}
           </Button>
         </Box>
       </Box>
     </>
   );
 };
-export async function getStaticProps({ locale }: any) {
-  return {
-    props: {
-      ...(await serverSideTranslations(locale, ['common'])),
-    },
-  };
-}
+// export async function getStaticProps({ locale }: any) {
+//   return {
+//     props: {
+//       ...(await serverSideTranslations(locale, ['common'])),
+//     },
+//   };
+// }
 
-export default ProfileEnrolment;
+export default BoardEnrollmentProfile;
diff --git a/src/components/MenuDrawer.tsx b/src/components/MenuDrawer.tsx
@@ -81,8 +81,8 @@ const MenuDrawer: React.FC<DrawerProps> = ({
                 session: (
                   <>
                     {item.session} &nbsp;
-                    <span style={{ color: 'green', fontWeight: '500' }}>
-                      ({t('COMMON.NOW')})
+                    <span style={{ color: 'green', fontWeight: '500', fontSize:'12px' }}>
+                      ({t('COMMON.ACTIVE')})
                     </span>
                   </>
                 ),
@@ -452,7 +452,7 @@ const MenuDrawer: React.FC<DrawerProps> = ({
           </Box>
         )}
 
-        {/* <Box sx={{ marginTop: '18px' }}>
+        <Box sx={{ marginTop: '18px' }}>
           <Button
             className="fs-14 joyride-step-8"
             sx={{
@@ -480,7 +480,7 @@ const MenuDrawer: React.FC<DrawerProps> = ({
           >
             {t('BOARD_ENROLMENT.BOARD_ENROLLMENT')}
           </Button>
-        </Box> */}
+        </Box>
         {isActiveYear && (
           <Box sx={{ marginTop: '18px' }}>
             <Button

diff --git a/src/components/PieChartGraph.tsx b/src/components/PieChartGraph.tsx
@@ -9,15 +9,26 @@ interface DataItem {
   value: number;
 }
 
-const PieChartGraph = () => {
+interface PieChartGraphProps {
+  stagesCount: {
+    board: number;
+    subjects: number;
+    registration: number;
+    fees: number;
+    completed: number; //completedCount = TotalCount - (board+subject+registration+fees) count
+  };
+}
+
+const PieChartGraph: React.FC<PieChartGraphProps> = ({ stagesCount }) => {
   const { t } = useTranslation();
   const theme = useTheme<any>();
+
   const data: DataItem[] = [
-    { name: t('BOARD_ENROLMENT.BOARD_SELECTION'), value: 5 },
-    { name: t('BOARD_ENROLMENT.SUBJECTS_SELECTION'), value: 10 },
-    { name: t('BOARD_ENROLMENT.REGISTRATION_COMPLETED'), value: 5 },
-    { name: t('BOARD_ENROLMENT.FEE_PAYMENT'), value: 2 },
-    { name: t('BOARD_ENROLMENT.COMPLETED'), value: 2 },
+    { name: t('BOARD_ENROLMENT.BOARD_SELECTION'), value: stagesCount.board },
+    { name: t('BOARD_ENROLMENT.SUBJECTS_SELECTION'), value: stagesCount.subjects },
+    { name: t('BOARD_ENROLMENT.REGISTRATION_NUMBER'), value: stagesCount.registration },
+    { name: t('BOARD_ENROLMENT.FEE_PAYMENT'), value: stagesCount.fees },
+    { name: t('BOARD_ENROLMENT.COMPLETED'), value: stagesCount.completed },
   ];
 
   const COLORS = ['#8000FE', '#FF8042', '#FFBB28', '#78590C', '#30CA2D']; //colors not in custom theme
@@ -49,8 +60,8 @@ const PieChartGraph = () => {
       </span>
     );
   };
+
   return (
-    <>
       <Box
         sx={{
           background: '#FFF8F2',
@@ -126,7 +137,6 @@ const PieChartGraph = () => {
           </ResponsiveContainer>
         </Box>
       </Box>
-    </>
   );
 };