Merge pull request #255 from Rushikesh-Sonawane99/shiksha-2.0

Issue #PS-384 chore: Modified colors to display attendance percentage on attendance overview page and progressbar
tekdi · Jun 6, 2024 · 33048e4 · 33048e4
2 parents 59a628c + 6f252b9
commit 33048e4
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/src/components/CohortAttendanceListView.tsx b/src/components/CohortAttendanceListView.tsx
@@ -4,15 +4,16 @@ import { CohortAttendanceListViewProps } from '@/utils/Interfaces';
 import React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
-import { lowLearnerAttendanceLimit } from '../../app.config';
+import useDeterminePathColor from '@/hooks/useDeterminePathColor';
 
 const CohortAttendanceListView: React.FC<CohortAttendanceListViewProps> = ({
   cohortName,
   attendancePercent,
 }) => {
   const { t } = useTranslation();
   const theme = useTheme<any>();
-  const textColor = attendancePercent > lowLearnerAttendanceLimit ? theme.palette.success.main : theme.palette.error.main;
+  const determinePathColor = useDeterminePathColor();
+  const textColor = determinePathColor(attendancePercent);
 
   return (
     <Stack>

diff --git a/src/components/LearnerAttendanceStatsListView.tsx b/src/components/LearnerAttendanceStatsListView.tsx
@@ -6,9 +6,9 @@ import LearnerModal from './LearnerModal';
 import Link from 'next/link';
 import Loader from './Loader';
 import { getUserDetails } from '@/services/ProfileService';
-import { lowLearnerAttendanceLimit } from '../../app.config';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
+import useDeterminePathColor from '@/hooks/useDeterminePathColor';
 
 interface StudentsStatsListProps {
   name: string;
@@ -27,10 +27,8 @@ const StudentsStatsList: React.FC<StudentsStatsListProps> = ({
 }) => {
   const theme = useTheme<any>();
   const { t } = useTranslation();
-  const textColor =
-    presentPercent > lowLearnerAttendanceLimit
-      ? theme.palette.success.main
-      : theme.palette.error.main;
+  const determinePathColor = useDeterminePathColor();
+  const textColor = determinePathColor(presentPercent);
 
   //   const handleStudentDetails = () => {
   //     router.push(`/student-details/${cohortId}/${userId}`);

diff --git a/src/hooks/useDeterminePathColor.js b/src/hooks/useDeterminePathColor.js
@@ -1,12 +1,13 @@
 import { useTheme } from '@mui/material/styles';
+import { avgLearnerAttendanceLimit, lowLearnerAttendanceLimit } from '../../app.config';
 
 const useDeterminePathColor = () => {
   const theme = useTheme();
 
   const determinePathColor = (presentPercentage) => {
     if (presentPercentage == 0) return theme.palette.warning['400'];
-    if (presentPercentage < 25) return theme.palette.error.main;
-    if (presentPercentage < 50) return theme.palette.action.activeChannel;
+    if (presentPercentage < lowLearnerAttendanceLimit) return theme.palette.error.main;
+    if (presentPercentage <= avgLearnerAttendanceLimit) return theme.palette.action.activeChannel;
     return theme.palette.success.main;
   };
 

diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
@@ -390,7 +390,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
     if (classId?.length) {
       getCohortMemberList();
     }
-  }, [classId, selectedDate]);
+  }, [classId, selectedDate, handleSaveHasRun]);
 
   const showDetailsHandle = (dayStr: string) => {
     setSelectedDate(formatSelectedDate(dayStr));