Issue #PS-657 fix:ALL screen UI matach with figma

public/locales/en/common.json

@@ -109,9 +109,10 @@
     "ATTENDANCE_OVERVIEW": "Attendance Overview",
     "CENTER_ATTENDANCE": "Center Attendance",
     "LOW_ATTENDANCE_STUDENTS": "Low Attendance Learners",
-    "N/A": "N/A.",
+    "N/A": "N/A",
     "CENTER_NAME": "Center Name",
-    "ALL_CENTERS": "All Centers"
+    "ALL_CENTERS": "All Centers",
+    "NO_LEARNER_WITH_LOW_ATTENDANCE": "No Learner with low attendance"
   },
   "PROFILE": {
     "EDIT_PROFILE": "Edit Profile",

public/locales/hi/common.json

@@ -110,7 +110,8 @@
     "LOW_ATTENDANCE_STUDENTS": "कम उपस्थिति वाले छात्र",
     "N/A": "उपलब्ध नहीं",
     "CENTER_NAME": "केंद्र का नाम",
-    "ALL_CENTERS": "सभी केंद्र"
+    "ALL_CENTERS": "सभी केंद्र",
+    "NO_LEARNER_WITH_LOW_ATTENDANCE": "कम उपस्थिति वाले कोई शिक्षार्थी नहीं"
   },
   "PROFILE": {
     "EDIT_PROFILE": "प्रोफ़ाइल संपादित करें",

public/locales/mr/common.json

@@ -105,7 +105,8 @@
     "LOW_ATTENDANCE_STUDENTS": "कमी उपस्थिती विद्यार्थी",
     "N/A": "उपलब्ध नाही",
     "CENTER_NAME": "केंद्राचे नाव",
-    "ALL_CENTERS": "सर्व केंद्रे"
+    "ALL_CENTERS": "सर्व केंद्रे",
+    "NO_LEARNER_WITH_LOW_ATTENDANCE": "कमी उपस्थिती असलेला कोणताही शिकणारा नाही"
   },
   "PROFILE": {
     "EDIT_PROFILE": "प्रोफाइल संपादित करा",

src/components/CohortAttendanceListView.tsx

@@ -0,0 +1,53 @@
+import { Box, Grid, Stack, Typography } from '@mui/material';
+
+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';
+
+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;
+
+  return (
+    <Stack>
+      <Box
+        borderBottom={`1px solid ${theme.palette.warning['A100']}`}
+        margin="0"
+        alignItems={'center'}
+
+        bgcolor={theme.palette.warning['A400']}
+        maxHeight={'auto'}
+      >
+        <Grid
+          container
+          alignItems="center"
+          textAlign={'center'}
+          justifyContent="space-between"
+          p={'5px'}
+        >
+          <Grid item xs={9}>
+            <Typography
+              textAlign={'left'}
+              sx={{ fontSize: '0.875rem', fontWeight: '400', color: theme.palette.warning['300'] }}
+            >
+              {cohortName}
+            </Typography>
+          </Grid>
+          <Grid item xs={3}>
+            <Typography sx={{ fontSize: '1rem', fontWeight: '500', color: textColor }}>
+              {attendancePercent}%
+            </Typography>
+          </Grid>
+        </Grid>
+      </Box>
+    </Stack>
+  );
+};
+
+export default CohortAttendanceListView;

src/components/CustomRangeModal.tsx

@@ -1,8 +1,6 @@
-// components/CustomRangeModal.tsx
 import * as React from 'react';
 
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import CloseIcon from '@mui/icons-material/Close';
 import Modal from '@mui/material/Modal';
 import WestIcon from '@mui/icons-material/West';
@@ -27,16 +25,16 @@ const style = {
 };
 
 const CustomRangeModal: React.FC = () => {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
+  const [isCalendarModalOpen, setIsCalenderModalOpen] = React.useState(false);
+  const toggleCalendarModal = () => setIsCalenderModalOpen(!isCalendarModalOpen);
+
   const { t } = useTranslation();
   return (
     <div>
       {/* <Button onClick={handleOpen}>Open modal</Button> */}
       <Modal
-        open={open}
-        onClose={handleClose}
+        open={isCalendarModalOpen}
+        onClose={toggleCalendarModal}
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
@@ -55,12 +53,12 @@ const CustomRangeModal: React.FC = () => {
               }}
             >
               <Box>
-                <WestIcon onClick={handleClose} style={{ cursor: 'pointer' }} />
+                <WestIcon onClick={toggleCalendarModal} style={{ cursor: 'pointer' }} />
               </Box>
               <Box className="text-4D">{t('COMMON.CUSTOM_RANGE')}</Box>
             </Box>
             <Box>
-              <CloseIcon onClick={handleClose} style={{ cursor: 'pointer' }} />
+              <CloseIcon onClick={toggleCalendarModal} style={{ cursor: 'pointer' }} />
             </Box>
           </Box>
           <Box sx={{ paddingTop: '20px' }}>

src/components/DateRangePopup.tsx

@@ -15,20 +15,40 @@ import React, { useState } from 'react';
 import Check from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 import ListItemIcon from '@mui/material/ListItemIcon';
+import MonthCalender from './MonthCalender';
+import WestIcon from '@mui/icons-material/West';
 import { useTranslation } from 'next-i18next';
 
 const modalStyle = {
   position: 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
-  width: 400,
+  width: 300,
   bgcolor: 'background.paper',
   // border: '2px solid #000',
   boxShadow: 24,
   p: 4,
 };
 
+const calenderModalStyle = {
+  width: '300px', // Adjust width as needed
+  maxWidth: 300, // Maximum width for responsiveness
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  backgroundColor: 'white',
+  padding: '12px 15px 12px 15px',
+  borderRadius: '8px',
+  boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.1)',
+
+  // Responsive styles
+  '@media (min-width: 768px)': {
+    width: '70%', // Adjust width for smaller screens
+  },
+};
+
 const dividerStyle = {
   my: 2,
 };
@@ -47,16 +67,21 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
   onDateRangeSelected,
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isCalendarModalOpen, setIsCalenderModalOpen] = useState(false);
+  const [dateRangeArray, setDateRangeArray] = useState<any[]>([]);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(1);
 
-  const handleModalOpen = () => setIsModalOpen(true);
-  const handleModalClose = () => setIsModalOpen(false);
+  const toggleModal = () => setIsModalOpen(!isModalOpen);
+  const toggleCalendarModal = () =>
+    setIsCalenderModalOpen(!isCalendarModalOpen);
   const { t } = useTranslation();
 
   const handleMenuItemClick = (index: number, item: string) => {
     setSelectedIndex(index);
     setSelectedValue(item);
-    // handleModalClose();
+    if (index === 4) {
+      toggleCalendarModal();
+    }
   };
 
   const onApply = () => {
@@ -65,13 +90,25 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
     const { toDate, fromDate } = values;
     console.log(toDate, fromDate);
     onDateRangeSelected({ fromDate, toDate });
-    handleModalClose();
+    toggleModal();
   };
 
   const getDateRange = (index: number | null) => {
     const today = new Date();
-    const formatDate = (date: Date) => date.toISOString().split('T')[0];
-    let fromDate;
+    const formatDate = (date: Date) => {
+      console.log('date', date);
+      if (typeof date === 'object') {
+        // return date?.toISOString()?.split('T')[0];}
+        const localDate = new Date(
+          date.getTime() - date.getTimezoneOffset() * 60000
+        );
+        const year = localDate.getUTCFullYear();
+        const month = String(localDate.getUTCMonth() + 1).padStart(2, '0'); // Months are 0-indexed, so add 1
+        const day = String(localDate.getUTCDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+      }
+    };
+    let fromDate: any;
     let toDate = formatDate(today);
 
     switch (index) {
@@ -83,40 +120,46 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
         fromDate = new Date(today);
         break;
       case 2:
-        {
-          const dayOfWeek = today.getDay();
-          const lastSaturday = new Date(today);
-          lastSaturday.setDate(today.getDate() - dayOfWeek - 1);
-          const lastSunday = new Date(lastSaturday);
-          lastSunday.setDate(lastSaturday.getDate() - 6);
-          fromDate = lastSunday;
-          toDate = formatDate(lastSaturday);
-        }
-        break;
-      case 3:
         fromDate = new Date(today);
         fromDate.setMonth(today.getMonth() - 1);
         fromDate.setDate(1); // Start of last month
         toDate = formatDate(new Date(today.getFullYear(), today.getMonth(), 0)); // End of last month
         break;
-      case 4:
+      case 3:
         fromDate = new Date(today);
         fromDate.setMonth(today.getMonth() - 6);
         fromDate.setDate(1); // Start of the period
         toDate = formatDate(new Date(today.getFullYear(), today.getMonth(), 0)); // End of last month
         break;
+      case 4:
+        //write here logic to open modal and return fromDate and toDate
+        if (dateRangeArray) {
+          fromDate = dateRangeArray[0];
+          toDate = formatDate(new Date(dateRangeArray[1]));
+        }
+        break;
       default:
         fromDate = new Date(today);
     }
 
     return {
-      fromDate: formatDate(fromDate),
+      fromDate: formatDate(new Date(fromDate)),
       toDate,
     };
   };
+  const handleCalendarDateChange = (date: Date | [Date, Date] | null) => {
+    if (Array.isArray(date)) {
+      setDateRangeArray(date);
+      // toggleCalendarModal();
+    }
+  };
+
+  const handleActiveStartDateChange = (date: Date) => {
+    // setActiveStartDate(date);
+  };
 
   return (
-    <Box sx={{ mt: 1, padding: '0 20px' }}>
+    <Box sx={{ mt: 1.5, px: '2px' }}>
       <FormControl sx={{ width: '100%' }}>
         <Select
           sx={{
@@ -127,7 +170,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
           }}
           value={selectedValue}
           displayEmpty
-          onClick={handleModalOpen}
+          onClick={toggleModal}
           inputProps={{ readOnly: true }}
         >
           <MenuItem value="" disabled>
@@ -141,7 +184,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
 
       <Modal
         open={isModalOpen}
-        onClose={handleModalClose}
+        onClose={toggleModal}
         aria-labelledby="edit-profile-modal"
         aria-describedby="edit-profile-description"
       >
@@ -160,7 +203,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
                 </Typography>
               </Grid>
               <Grid item xs={6} textAlign={'right'}>
-                <CloseIcon onClick={handleModalClose} />
+                <CloseIcon onClick={toggleModal} />
               </Grid>
             </Grid>
           </Box>
@@ -198,6 +241,74 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
           </Button>
         </Box>
       </Modal>
+
+      {/* CustomeCalendarModal */}
+      <Modal
+        open={isCalendarModalOpen}
+        onClose={toggleCalendarModal}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={calenderModalStyle}>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              paddingTop: '20px',
+            }}
+          >
+            <Box
+              sx={{
+                display: 'flex',
+                gap: '20px',
+              }}
+            >
+              <Box>
+                <WestIcon
+                  onClick={toggleCalendarModal}
+                  style={{ cursor: 'pointer' }}
+                />
+              </Box>
+              <Box className="text-4D">{t('COMMON.CUSTOM_RANGE')}</Box>
+            </Box>
+            <Box>
+              <CloseIcon
+                onClick={toggleCalendarModal}
+                style={{ cursor: 'pointer' }}
+              />
+            </Box>
+          </Box>
+          <Box sx={{ paddingTop: '20px' }}>
+            <Box className="fs-14 fw-500 text-4D">
+              {t('COMMON.FROM_TO_DATE')}
+            </Box>
+            <Box className="fs-22 fw-500 pt-10 text-1F">17 May – 23 May</Box>
+          </Box>
+
+          <Box>
+            <MonthCalender
+              onChange={handleActiveStartDateChange}
+              onDateChange={handleCalendarDateChange}
+              selectionType="range"
+            />
+          </Box>
+          <Box
+            sx={{
+              paddingTop: '20px',
+              display: 'flex',
+              gap: '10px',
+              justifyContent: 'end',
+            }}
+          >
+            <Box className="text-0D fs-14 fw-500" onClick={toggleCalendarModal}>
+              {t('COMMON.CANCEL')}
+            </Box>
+            <Box className="text-0D fs-14 fw-500" onClick={toggleCalendarModal}>
+              {t('COMMON.OK')}
+            </Box>
+          </Box>
+        </Box>
+      </Modal>
     </Box>
   );
 };