From 7d07d2494af89b822af151c90a7bf683f32d9b73 Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Fri, 10 May 2024 14:51:25 +0530 Subject: [PATCH] Issue #PS-320 feat: percentage mapping in mark attendance cards --- src/pages/Dashboard.tsx | 100 ++++++++++++++++++++++++++++++++------- src/translations/en.json | 6 +-- src/translations/hi.json | 6 +-- src/translations/mr.json | 4 +- 4 files changed, 92 insertions(+), 24 deletions(-) diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 8161a40e..5b425966 100644 --- 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 = () => { 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 = () => { //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 = () => { 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 = () => { 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 (
@@ -676,24 +723,45 @@ const Dashboard: React.FC = () => { justifyContent={'space-between'} > {userType == 'student' ? ( - + {/* {t('DASHBOARD.NOT_MARKED')} */} {/* {t('DASHBOARD.FUTURE_DATE_CANT_MARK')} */} - - {t('DASHBOARD.PERCENT_ATTENDANCE')} - - - {t('DASHBOARD.PRESENT_STUDENTS')} - + + + + + {currentAttendance?.present_percentage}{' '} + {t('DASHBOARD.PERCENT_ATTENDANCE')} + + + ({percentageAttendance?.[todayDate]?.present_students}/ + {percentageAttendance?.[todayDate]?.total_students}){' '} + {t('DASHBOARD.PRESENT_STUDENTS')} + + ) : ( diff --git a/src/translations/en.json b/src/translations/en.json index 0ebb5e96..33b6ff08 100644 --- 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 index edaabf04..521ca2bf 100644 --- 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 index ec05c804..48cb470c 100644 --- 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": "मेनू",