From d9e953a83e20ac7a7aa01313ae4875039c6e25c6 Mon Sep 17 00:00:00 2001
From: Rushikesh-Sonawane99 <rushikesh.sonawane@tekditechnologies.com>
Date: Mon, 27 May 2024 21:34:28 +0530
Subject: [PATCH] Issue #PS-289 chore: Added Present and Absent count in modal
 and respective translations

---
 public/locales/en/common.json         |  2 ++
 public/locales/hi/common.json         |  2 ++
 public/locales/mr/common.json         |  2 ++
 src/components/MarkBulkAttendance.tsx | 30 +++++++++++++++++++++++++++
 src/pages/dashboard.tsx               | 28 +++++++++++++++++++++++++
 5 files changed, 64 insertions(+)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 6fd3529f..cf0025c5 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -80,6 +80,8 @@
   },
   "ATTENDANCE": {
     "TOTAL_STUDENTS": "Total Number of Learners: {{count}}",
+    "PRESENT_STUDENTS": "Present Learners: {{count}}",
+    "ABSENT_STUDENTS": "Absent Learners: {{count}}",
     "PRESENT": "Present",
     "ABSENT": "Absent",
     "HALF_DAY": "Half Day",
diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json
index 38bf7eaf..362eb83d 100644
--- a/public/locales/hi/common.json
+++ b/public/locales/hi/common.json
@@ -78,6 +78,8 @@
   },
   "ATTENDANCE": {
     "TOTAL_STUDENTS": "कुल छात्रों की संख्या: {{count}}",
+    "PRESENT_STUDENTS": "उपस्थित छात्र: {{count}}",
+    "ABSENT_STUDENTS": "अनुपस्थित छात्र: {{count}}",
     "PRESENT": "उपस्थित",
     "ABSENT": "अनुपस्थित",
     "HALF_DAY": "आधा दिन",
diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json
index 88ce44b1..3cd42756 100644
--- a/public/locales/mr/common.json
+++ b/public/locales/mr/common.json
@@ -78,6 +78,8 @@
   },
   "ATTENDANCE": {
     "TOTAL_STUDENTS": "एकूण विद्यार्थी: {{count}}",
+    "PRESENT_STUDENTS": "उपस्थित विद्यार्थी: {{count}}",
+    "ABSENT_STUDENTS": "अनुपस्थित विद्यार्थी: {{count}}",
     "MARK_ALL": "सर्व चिन्हित करा",
     "CLEAR": "स्पष्ट",
     "ATTENDANCE_MARKED_SUCCESSFULLY": "उपस्थिती यशस्वीरित्या चिन्हांकित केली गेली आहे",
diff --git a/src/components/MarkBulkAttendance.tsx b/src/components/MarkBulkAttendance.tsx
index 6ba263e7..b94f8519 100644
--- a/src/components/MarkBulkAttendance.tsx
+++ b/src/components/MarkBulkAttendance.tsx
@@ -40,6 +40,8 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
   //   const [open, setOpen] = React.useState(false);
   const [showUpdateButton, setShowUpdateButton] = React.useState(false);
   const [cohortMemberList, setCohortMemberList] = React.useState<Array<{}>>([]);
+  const [presentCount, setPresentCount] = React.useState(0);
+  const [absentCount, setAbsentCount] = React.useState(0);
   const [bulkAttendanceStatus, setBulkAttendanceStatus] = React.useState('');
   const [isAllAttendanceMarked, setIsAllAttendanceMarked] =
     React.useState(false);
@@ -191,6 +193,8 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
                       });
                       if (newArray.length != 0) {
                         setCohortMemberList(newArray);
+                        setPresentCount(newArray.filter(user => user.attendance === "present").length);
+                        setAbsentCount(newArray.filter(user => user.attendance === "absent").length);
                         setNumberOfCohortMembers(newArray?.length);
                       } else {
                         setCohortMemberList(nameUserIdArray);
@@ -345,6 +349,32 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
                   count: numberOfCohortMembers,
                 })}
               </Typography>
+              <Box display={'flex'} justifyContent={'space-between'}>
+                        <Typography
+                          sx={{
+                            marginTop: '0px',
+                            marginLeft: '0.5rem',
+                            fontSize: '12px',
+                            color: theme.palette.warning['A200'],
+                          }}
+                        >
+                          {t('ATTENDANCE.PRESENT_STUDENTS', {
+                            count: presentCount,
+                          })}
+                        </Typography>
+                        <Typography
+                          sx={{
+                            marginTop: '0px',
+                            marginLeft: '0.5rem',
+                            fontSize: '12px',
+                            color: theme.palette.warning['A200'],
+                          }}
+                        >
+                          {t('ATTENDANCE.ABSENT_STUDENTS', {
+                            count: absentCount,
+                          })}
+                        </Typography>
+                        </Box>
               {cohortMemberList && cohortMemberList?.length != 0 ? (
                 <Box
                   height={'56vh'}
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index ff0f55ad..f22a6548 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -70,6 +70,8 @@ const Dashboard: React.FC<DashboardProps> = () => {
   const [cohortsData, setCohortsData] = React.useState<Array<cohort>>([]);
   const [classId, setClassId] = React.useState('');
   const [cohortMemberList, setCohortMemberList] = React.useState<Array<{}>>([]);
+  const [presentCount, setPresentCount] = React.useState(0);
+  const [absentCount, setAbsentCount] = React.useState(0);
   const [showDetails, setShowDetails] = React.useState(false);
   const [handleSaveHasRun, setHandleSaveHasRun] = React.useState(false);
   const [selectedDate, setSelectedDate] = React.useState('');
@@ -258,6 +260,8 @@ const Dashboard: React.FC<DashboardProps> = () => {
                       if (newArray.length != 0) {
                         // newArray = newArray.filter(item => item.name);
                         setCohortMemberList(newArray);
+                        setPresentCount(newArray.filter(user => user.attendance === "present").length);
+                        setAbsentCount(newArray.filter(user => user.attendance === "absent").length);
                         setNumberOfCohortMembers(newArray?.length);
                       } else {
                         setCohortMemberList(nameUserIdArray);
@@ -739,6 +743,30 @@ const Dashboard: React.FC<DashboardProps> = () => {
                             count: numberOfCohortMembers,
                           })}
                         </Typography>
+                        <Box display={'flex'} justifyContent={'space-between'}>
+                        <Typography
+                          sx={{
+                            marginTop: '0px',
+                            fontSize: '12px',
+                            color: theme.palette.warning['A200'],
+                          }}
+                        >
+                          {t('ATTENDANCE.PRESENT_STUDENTS', {
+                            count: presentCount,
+                          })}
+                        </Typography>
+                        <Typography
+                          sx={{
+                            marginTop: '0px',
+                            fontSize: '12px',
+                            color: theme.palette.warning['A200'],
+                          }}
+                        >
+                          {t('ATTENDANCE.ABSENT_STUDENTS', {
+                            count: absentCount,
+                          })}
+                        </Typography>
+                        </Box>
                         {cohortMemberList && cohortMemberList?.length != 0 ? (
                           <Box
                             height={'56vh'}