Merge pull request #100 from suvarnakale/shiksha-2.0

Issue #PS-320 feat: percentage mapping in mark attendance cards
tekdi · May 10, 2024 · e1c7274 · e1c7274
2 parents 923c8bc + 7d07d24
commit e1c7274
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 24 deletions.
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
@@ -56,7 +56,7 @@ import { getTeacherAttendanceByDate } from '../services/AttendanceService';
 import { useRouter } from 'next/navigation';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
-
+import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
 // import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 
 interface State extends SnackbarOrigin {
@@ -98,6 +98,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
   const [percentageAttendanceData, setPercentageAttendanceData] =
     React.useState(null);
   const [numberOfCohortMembers, setNumberOfCohortMembers] = React.useState(0);
+  const [percentageAttendance, setPercentageAttendance] = React.useState(null);
   const [currentDate, setCurrentDate] = React.useState(getTodayDate);
   const [bulkAttendanceStatus, setBulkAttendanceStatus] = React.useState('');
   const [loading, setLoading] = React.useState(false);
@@ -195,7 +196,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
           //userId && parentCohortId
           let limit = 100;
           let page = 0;
-          let filters = { cohortId: classId }; 
+          let filters = { cohortId: classId };
           const response = await getMyCohortMemberList({
             limit,
             page,
@@ -378,6 +379,35 @@ const Dashboard: React.FC<DashboardProps> = () => {
         setTimeout(() => {
           setPercentageAttendanceData(response?.data?.result?.attendanceDate);
         });
+
+        const attendanceDates = response?.data?.result?.attendanceDate;
+
+        const formattedAttendanceData = {};
+
+        // Loop through each attendance date
+        Object.keys(attendanceDates).forEach((date) => {
+          const attendance = attendanceDates[date];
+          const present = attendance.present || 0;
+          const absent = attendance.absent || 0;
+          const totalStudents =
+            attendance.present_percentage === '100.00'
+              ? present
+              : present + absent;
+
+          formattedAttendanceData[date] = {
+            date: date,
+            present_students: present,
+            total_students: totalStudents,
+            present_percentage:
+              parseFloat(attendance.present_percentage) ||
+              100 - parseFloat(attendance.absent_percentage),
+            absent_percentage:
+              parseFloat(attendance.absent_percentage) ||
+              100 - parseFloat(attendance.present_percentage),
+          };
+          console.log('formattedAttendanceData', formattedAttendanceData);
+          setPercentageAttendance(formattedAttendanceData);
+        });
       } catch (error) {
         console.log(error);
       }
@@ -554,6 +584,23 @@ const Dashboard: React.FC<DashboardProps> = () => {
     setState({ ...state, openModal: false });
   };
 
+  const todayDate = new Date().toISOString().split('T')[0];
+  console.log(percentageAttendance);
+  const currentAttendance = percentageAttendance?.[todayDate];
+  // let currentPercentAttendance = 'N/A';
+  const presentPercentage = parseFloat(currentAttendance.present_percentage);
+
+  // Determine the color based on presentPercentage value
+  let pathColor; // Default color (green)
+  if (!isNaN(presentPercentage)) {
+    if (presentPercentage < 25) {
+      pathColor = '#BA1A1A'; // Less than 25% - Red color
+    } else if (presentPercentage < 50) {
+      pathColor = '#987100'; // Less than 50% - Purple color
+    } else {
+      pathColor = '#06A816'; // Less than 50% - Purple color
+    }
+  }
   return (
     <Box minHeight="100vh" className="linerGradient">
       <Header />
@@ -676,24 +723,45 @@ const Dashboard: React.FC<DashboardProps> = () => {
               justifyContent={'space-between'}
             >
               {userType == 'student' ? (
-                <Box>
+                <Box display={'flex'}>
                   {/* <Typography sx = {{color: theme.palette.warning['A400']}}>{t('DASHBOARD.NOT_MARKED')}</Typography> */}
                   {/* <Typography sx = {{color: theme.palette.warning['A400']}} fontSize={'0.8rem'}>{t('DASHBOARD.FUTURE_DATE_CANT_MARK')}</Typography>
                    */}
-                  <Typography
-                    sx={{ color: theme.palette.warning['A400'] }}
-                    variant="h6"
-                    className="word-break"
-                  >
-                    {t('DASHBOARD.PERCENT_ATTENDANCE')}
-                  </Typography>
-                  <Typography
-                    sx={{ color: theme.palette.warning['A400'] }}
-                    variant="h6"
-                    className="word-break"
+                  <Box
+                    width={'25px'}
+                    height={'2rem'}
+                    marginTop={'0.25rem'}
+                    margin={'5px'}
                   >
-                    {t('DASHBOARD.PRESENT_STUDENTS')}
-                  </Typography>
+                    <CircularProgressbar
+                      value={currentAttendance?.present_percentage}
+                      styles={buildStyles({
+                        textColor: pathColor,
+                        pathColor: pathColor,
+                        trailColor: '#E6E6E6',
+                      })}
+                      strokeWidth={15}
+                    />
+                  </Box>
+                  <Box>
+                    <Typography
+                      sx={{ color: theme.palette.warning['A400'] }}
+                      variant="h6"
+                      className="word-break"
+                    >
+                      {currentAttendance?.present_percentage}{' '}
+                      {t('DASHBOARD.PERCENT_ATTENDANCE')}
+                    </Typography>
+                    <Typography
+                      sx={{ color: theme.palette.warning['A400'] }}
+                      variant="h6"
+                      className="word-break"
+                    >
+                      ({percentageAttendance?.[todayDate]?.present_students}/
+                      {percentageAttendance?.[todayDate]?.total_students}){' '}
+                      {t('DASHBOARD.PRESENT_STUDENTS')}
+                    </Typography>
+                  </Box>
                 </Box>
               ) : (
                 <Box>

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -57,15 +57,15 @@
     "CLASS": "Class",
     "NOT_MARKED": "Not Marked",
     "FUTURE_DATE_CANT_MARK": "Future date can't be marked",
-    "PERCENT_ATTENDANCE": "{{percent_students}}% Attendance",
-    "PRESENT_STUDENTS": "({{present_students}/{total_students}} present)",
+    "PERCENT_ATTENDANCE": " % Attendance",
+    "PRESENT_STUDENTS": " present",
     "OVERVIEW": "Overview",
     "MORE_DETAILS": "More Details",
     "MENU": "Menu",
     "EXTRA_CLASS": "Extra class",
     "CENTER_ATTENDANCE": "Center Attendance",
     "MY_TIMETABLE": "My TimeTable",
-    "MY_TEACHING_CENTERS":"My Teaching Centers",
+    "MY_TEACHING_CENTERS": "My Teaching Centers",
     "UPCOMING_EXTRA_SESSION": "Upcoming Extra Sessions"
   },
   "ATTENDANCE": {

diff --git a/src/translations/hi.json b/src/translations/hi.json
@@ -56,14 +56,14 @@
     "CLASS": "कक्षा",
     "NOT_MARKED": "नहीं चिह्नित",
     "FUTURE_DATE_CANT_MARK": "भविष्य की तारीख कोई चिह्नित नहीं की जा सकती",
-    "PERCENT_ATTENDANCE": "{{percent_students}}% उपस्थिति",
-    "PRESENT_STUDENTS": "({{present_students}}/{{total_students}} मौजूद हैं)",
+    "PERCENT_ATTENDANCE": " % उपस्थिति",
+    "PRESENT_STUDENTS": "मौजूद हैं",
     "OVERVIEW": "अवलोकन",
     "MORE_DETAILS": "अधिक विवरण",
     "MENU": "मेनू",
     "EXTRA_CLASS": "अतिरिक्त क्लास",
     "CENTER_ATTENDANCE": "केंद्रीय उपस्थिति",
-    "MY_TEACHING_CENTERS":"मेरे शिक्षण केंद्र",
+    "MY_TEACHING_CENTERS": "मेरे शिक्षण केंद्र",
     "UPCOMING_EXTRA_SESSION": "आगामी अतिरिक्त सत्र"
   },
   "ATTENDANCE": {

diff --git a/src/translations/mr.json b/src/translations/mr.json
@@ -54,8 +54,8 @@
     "CLASS": "वर्ग",
     "NOT_MARKED": "नोंद केलेले नाही",
     "FUTURE_DATE_CANT_MARK": "भविष्यातील तारीख कोणताही नोंद करण्यास योग्य नाही",
-    "PERCENT_ATTENDANCE": "{{percent_students}}% उपस्थिती",
-    "PRESENT_STUDENTS": "({{present_students}}/{{total_students}} उपस्थित)",
+    "PERCENT_ATTENDANCE": " % उपस्थिती",
+    "PRESENT_STUDENTS": " उपस्थित",
     "OVERVIEW": "अवलोकन",
     "MORE_DETAILS": "अधिक माहिती",
     "MENU": "मेनू",