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

Issue #PS-388 feat: Written services and Integrated API for for getting cohort attendance on dashboard and attendance overview page and added translations

public/locales/en/common.json

@@ -42,6 +42,7 @@
     "LAST_SIX_MONTHS": "Last Six Months",
     "CUSTOM_RANGE": "Custom Range",
     "NONE": "None",
+    "LEARNERS":"Learners",
     "LEARNER_NAME": "Learner Name",
     "DATE_RANGE": "Date Range",
     "SELECT_AN_OPTION": "Select an option"
@@ -78,7 +79,7 @@
     "MY_TEACHING_CENTERS": "My Teaching Centers",
     "UPCOMING_EXTRA_SESSION": "Upcoming Extra Sessions",
     "BACK_TO_TOP":"Back to Top",
-    "LEARNER":"Learners"
+    "LAST_SEVEN_DAYS_RANGE": "Last 7 Days {{date_range}})"
 
   },
   "ATTENDANCE": {
@@ -101,7 +102,10 @@
     "DAY_WISE_ATTENDANCE": "Day-Wise Attendance",
     "ATTENDANCE_OVERVIEW": "Attendance Overview",
     "CENTER_ATTENDANCE": "Center Attendance",
-    "LOW_ATTENDANCE_STUDENTS": "Low Attendance Students"
+    "LOW_ATTENDANCE_STUDENTS": "Low Attendance Learners",
+    "N/A": "N/A.",
+    "CENTER_NAME": "Center Name",
+    "ALL_CENTERS": "All Centers"
   },
   "PROFILE": {
     "EDIT_PROFILE": "Edit Profile",

public/locales/hi/common.json

@@ -41,6 +41,7 @@
     "AS_OF_LAST_WEEK": "पिछले सप्ताह तक",
     "AS_OF_LAST_SIX_MONTH": "पिछले छह महीने से",
     "NONE": "कोई नहीं",
+    "LEARNERS":"शिक्षार्थियों",
     "LEARNER_NAME": "शिक्षार्थी का नाम",
     "DATE_RANGE": "तिथि सीमा",
     "SELECT_AN_OPTION": "कोई विकल्प चुनें"
@@ -76,7 +77,7 @@
     "MY_TEACHING_CENTERS": "मेरे शिक्षण केंद्र",
     "UPCOMING_EXTRA_SESSION": "आगामी अतिरिक्त सत्र",
     "BACK_TO_TOP":"वापस शीर्ष पर",
-    "LEARNER":"शिक्षार्थियों"
+    "LAST_SEVEN_DAYS_RANGE": "पिछले 7 दिन {{date_range}}"
   },
   "ATTENDANCE": {
     "TOTAL_STUDENTS": "कुल छात्रों की संख्या: {{count}}",
@@ -99,7 +100,10 @@
     "DAY_WISE_ATTENDANCE": "दिनविशेष उपस्थिति",
     "ATTENDANCE_OVERVIEW": "उपस्थिति अवलोकन",
     "CENTER_ATTENDANCE": "केंद्र उपस्थिति",
-    "LOW_ATTENDANCE_STUDENTS": "कम उपस्थिति वाले छात्र"
+    "LOW_ATTENDANCE_STUDENTS": "कम उपस्थिति वाले छात्र",
+    "N/A": "उपलब्ध नहीं",
+    "CENTER_NAME": "केंद्र का नाम",
+    "ALL_CENTERS": "सभी केंद्र"
   },
   "PROFILE": {
     "EDIT_PROFILE": "प्रोफ़ाइल संपादित करें",

public/locales/mr/common.json

@@ -40,6 +40,7 @@
     "AS_OF_LAST_WEEK": "गेल्या आठवड्याप्रमाणे",
     "AS_OF_LAST_SIX_MONTH": "गेल्या सहा महिन्यांपासून",
     "NONE": "काहीही नाही",
+    "LEARNERS":"शिकणारे",
     "LEARNER_NAME": "शिकणाऱ्याचे नाव",
     "DATE_RANGE": "तारीख श्रेणी",
     "SELECT_AN_OPTION": "एक पर्याय निवडा"
@@ -76,7 +77,7 @@
     "MY_TEACHING_CENTERS": "माझे शिक्षण केंद्र",
     "UPCOMING_EXTRA_SESSION": "आगामी अतिरिक्त सत्रे",
     "BACK_TO_TOP":"परत वर जा",
-    "LEARNER":"शिकणारे"
+    "LAST_SEVEN_DAYS_RANGE": "शेवटचे 7 दिवस {{date_range}}"
   },
   "ATTENDANCE": {
     "TOTAL_STUDENTS": "एकूण विद्यार्थी: {{count}}",
@@ -94,7 +95,10 @@
     "DAY_WISE_ATTENDANCE": "दिवस-विशेष उपस्थिती",
     "ATTENDANCE_OVERVIEW": "उपस्थिती विहंगावलोकन",
     "CENTER_ATTENDANCE": "केंद्र उपस्थिती",
-    "LOW_ATTENDANCE_STUDENTS": "कमी उपस्थिती विद्यार्थी"
+    "LOW_ATTENDANCE_STUDENTS": "कमी उपस्थिती विद्यार्थी",
+    "N/A": "उपलब्ध नाही",
+    "CENTER_NAME": "केंद्राचे नाव",
+    "ALL_CENTERS": "सर्व केंद्रे"
   },
   "PROFILE": {
     "EDIT_PROFILE": "प्रोफाइल संपादित करा",

src/components/DateRangePopup.tsx

@@ -24,7 +24,7 @@ const modalStyle = {
   transform: 'translate(-50%, -50%)',
   width: 400,
   bgcolor: 'background.paper',
-  border: '2px solid #000',
+  // border: '2px solid #000',
   boxShadow: 24,
   p: 4,
 };
@@ -47,7 +47,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
   onDateRangeSelected,
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(1);
 
   const handleModalOpen = () => setIsModalOpen(true);
   const handleModalClose = () => setIsModalOpen(false);

src/components/LearnerListHeader.tsx

@@ -28,6 +28,7 @@ const LearnerListHeader: React.FC<LearListHeaderProps> = ({
             alignItems="center"
             textAlign={'center'}
             justifyContent="space-between"
+              p={'5px'}
           >
             <Grid item xs={6}>
               <Typography
@@ -50,7 +51,35 @@ const LearnerListHeader: React.FC<LearListHeaderProps> = ({
           </Grid>
         </Box>
       ) : (
-        'none'
+        <Box
+        borderBottom={`1px solid ${theme.palette.warning['300']}`}
+        margin="0"
+        alignItems={'center'}
+        bgcolor={'#E6E6E6'}
+        maxHeight={'auto'}
+      >
+        <Grid
+          container
+          alignItems="center"
+          textAlign={'center'}
+          justifyContent="space-between"
+          p={'5px'}
+        >
+          <Grid item xs={9}>
+            <Typography
+              textAlign={'left'}
+              sx={{ fontSize: '11px', fontWeight: '500' }}
+            >
+              {t('ATTENDANCE.CENTER_NAME')}
+            </Typography>
+          </Grid>
+          <Grid item xs={3}>
+            <Typography sx={{ fontSize: '11px', fontWeight: '500' }}>
+              {firstColumnName}
+            </Typography>
+          </Grid>
+        </Grid>
+      </Box>
       )}
     </Stack>
   );

src/components/MarkBulkAttendance.tsx

@@ -111,7 +111,7 @@ const MarkBulkAttendance: React.FC<MarkBulkAttendanceProps> = ({
             page,
             filters,
           });
-          const resp = response?.data?.userDetails;
+          const resp = response?.result?.results?.userDetails;
 
           if (resp) {
             const nameUserIdArray = resp?.map((entry: any) => ({

src/components/OverviewCard.tsx

@@ -7,7 +7,7 @@ import { useTheme } from '@mui/material/styles';
 
 interface OverviewCardProps {
   label: string;
-  value: string;
+  value: string | number;
 }
 
 const OverviewCard: React.FC<OverviewCardProps> = ({ label, value }) => {

src/components/UpDownButton.tsx

@@ -70,7 +70,7 @@ const UpDownButton = () => {
                 sx={{ height: '80px', width: '64px' }}
                 className="flex-column-center"
               >
-                {t('DASHBOARD.LEARNER')}
+                {t('COMMON.LEARNER')}
                 <ArrowDownwardIcon />
               </Box>
             )}

src/pages/attendance-history.tsx

@@ -323,7 +323,7 @@ const UserAttendanceHistory = () => {
                         });
                       }
                     });
-                    if (newArray.length != 0) {
+                    if (newArray.length !== 0) {
                       setCohortMemberList(newArray);
                       setDisplayStudentList(newArray);
                     } else {
@@ -595,6 +595,7 @@ const UserAttendanceHistory = () => {
                 onChange={handleCohortSelection}
                 displayEmpty
                 inputProps={{ 'aria-label': 'Without label' }}
+                disabled={cohortsData?.length === 1 ? true : false}
                 className="SelectLanguages fs-14 fw-500"
                 style={{
                   borderRadius: '0.5rem',

src/pages/attendance-overview.tsx

@@ -28,8 +28,8 @@ import SearchIcon from '@mui/icons-material/Search';
 import SortingModal from '@/components/SortingModal';
 import StudentsStatsList from '@/components/LearnerAttendanceStatsListView';
 import UpDownButton from '@/components/UpDownButton';
-import { classesMissedAttendancePercentList } from '@/services/AttendanceService';
-import { cohort } from '@/utils/Interfaces';
+import { classesMissedAttendancePercentList, getCohortAttendance,} from '@/services/AttendanceService';
+import { cohort, cohortAttendancePercentParam } from '@/utils/Interfaces';
 import { cohortList } from '@/services/CohortServices';
 import { getMyCohortMemberList } from '@/services/MyClassDetailsService';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
@@ -59,6 +59,8 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
   const [selectedValue, setSelectedValue] = React.useState<string>(
     t('COMMON.AS_OF_TODAY')
   );
+  const [presentPercentage, setPresentPercentage] = React.useState<string | number>('');
+  const [lowAttendanceLearnerList,setLowAttendanceLearnerList] = React.useState<any>([]);
 
   const theme = useTheme<any>();
   const pathname = usePathname();
@@ -166,10 +168,53 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
                 );
                 setLearnerData(mergedArray);
                 setDisplayStudentList(mergedArray);
-              }
+                const presentPercentages = mergedArray.map((student) =>
+                  parseFloat(student.present_percent)
+                );
+
+                // Find the minimum present_percent
+                const minPresentPercent = Math.min(...presentPercentages);
+
+                // Filter students with the minimum present_percent
+                const studentsWithLowestAttendance = mergedArray.filter(
+                  (student) =>
+                    parseFloat(student.present_percent) === minPresentPercent
+                );
+
+                // Extract names of these students
+                const namesOfLowestAttendance: any[] =
+                  studentsWithLowestAttendance.map((student) => student.name);
+                  setLowAttendanceLearnerList(namesOfLowestAttendance)
+              } 
             }
           }
         }
+        if (classId) {
+          const cohortAttendancePercent = async () => {
+            const cohortAttendanceData: cohortAttendancePercentParam = {
+              limit: 0,
+              page: 0,
+              filters: {
+                scope: 'student',
+                fromDate: isFromDate,
+                toDate: isToDate,
+                contextId: classId,
+              },
+              facets: ['contextId'],
+            };
+            const res = await getCohortAttendance(cohortAttendanceData);
+            const response = res?.data?.result;
+            const contextData =
+              response.contextId && response.contextId[classId];
+            const presentPercentage = contextData ? (
+              contextData.present_percentage
+            ) : (
+              <Typography> {t('ATTENDANCE.N/A')}</Typography>
+            );
+            setPresentPercentage(presentPercentage);
+          };
+          cohortAttendancePercent();
+        }
       }
     } catch (error) {
       console.error('Error fetching cohort list:', error);
@@ -300,22 +345,25 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
     <Box>
       <UpDownButton />
       <Header />
+      {loading && (
+                <Loader showBackdrop={true} loadingText={t('COMMON.LOADING')} />
+              )}
       <Box sx={{ display: 'flex', justifyContent: 'center' }}>
         <Box width={'100%'}>
           <Typography textAlign={'left'} fontSize={'22px'} m={'1rem'}>
             {t('ATTENDANCE.ATTENDANCE_OVERVIEW')}
           </Typography>
         </Box>
       </Box>
-
+      
       <Box sx={{ mt: 0.6 }}>
         <Box sx={{ minWidth: 120, gap: '15px' }} display={'flex'}>
           <FormControl className="drawer-select" sx={{ m: 1, width: '100%' }}>
             <Select
               value={classId}
               onChange={handleCohortSelection}
               displayEmpty
-              disabled = {cohortsData?.length == 1 ? true : false}
+              disabled={cohortsData?.length == 1 ? true : false}
               inputProps={{ 'aria-label': 'Without label' }}
               className="SelectLanguages fs-14 fw-500"
               style={{
@@ -326,11 +374,16 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
               }}
             >
               {cohortsData?.length !== 0 ? (
-                cohortsData?.map((cohort) => (
+                 <>
+                {cohortsData?.map((cohort) => (
                   <MenuItem key={cohort.cohortId} value={cohort.cohortId}>
                     {cohort.name}
                   </MenuItem>
-                ))
+                ))}
+                <MenuItem key="all-cohorts" value="all">
+               { t('ATTENDANCE.ALL_CENTERS')}
+                </MenuItem>
+                </>
               ) : (
                 <Typography style={{ fontWeight: 'bold' }}>
                   {t('COMMON.NO_DATA_FOUND')}
@@ -349,18 +402,25 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
       />
 
       <Box display={'flex'} className="card_overview">
-        <Grid container spacing={0}>
+        <Grid container spacing={2} >
           <Grid item xs={5}>
             <OverviewCard
               label={t('ATTENDANCE.CENTER_ATTENDANCE')}
-              value="71%"
+              value={learnerData.length? (presentPercentage + " %") : presentPercentage}
             />
           </Grid>
           <Grid item xs={7}>
-            <OverviewCard
+            {/* <OverviewCard
               label={t('ATTENDANCE.LOW_ATTENDANCE_STUDENTS')}
-              value="Bharat Kumar, Ankita Kulkarni, +3 more"
-            />
+              {...loading && (
+                <Loader loadingText={t('COMMON.LOADING')} showBackdrop={false} />
+              )}
+              value= { learnerData.length ? lowAttendanceLearnerList:  {t('ATTENDANCE.N/A')}}
+            /> */}
+            <OverviewCard
+                      label="Low Attendance Learners"
+                      value="Bharat Kumar, Ankita Kulkarni and 3 more"
+                    />
           </Grid>
         </Grid>
       </Box>
@@ -439,11 +499,17 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
           routeName={pathname}
         />
       </Stack>
-      <LearnerListHeader
+      {classId !== "all"?
+        <LearnerListHeader
         numberOfColumns={3}
         firstColumnName={t('COMMON.ATTENDANCE')}
         secondColumnName={t('COMMON.CLASS_MISSED')}
-      />
+      />:  <LearnerListHeader
+      numberOfColumns={2}
+      firstColumnName={t('COMMON.ATTENDANCE')}
+    />
+      }
+
       {loading && (
         <Loader showBackdrop={true} loadingText={t('COMMON.LOADING')} />
       )}