diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 4d5cae62..33fd7958 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -89,6 +89,7 @@ "UPCOMING_EXTRA_SESSION": "Upcoming Extra Sessions", "BACK_TO_TOP": "Back to Top", "LAST_SEVEN_DAYS_RANGE": "Last 7 Days {{date_range}}", + "AS_OF_TODAY_DATE": "As of Today {{day_date}}", "LEARNER": "Learners" }, "ATTENDANCE": { @@ -116,7 +117,8 @@ "N/A": "N/A", "CENTER_NAME": "Center Name", "ALL_CENTERS": "All Centers", - "NO_LEARNER_WITH_LOW_ATTENDANCE": "No Learner with low attendance" + "NO_LEARNER_WITH_LOW_ATTENDANCE": "No Learner with low attendance", + "ATTENDANCE_MARKED_OUT_OF_DAYS": "Attendance marked: {{count}} out of last 7 days" }, "PROFILE": { "EDIT_PROFILE": "Edit Profile", diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json index b5a3f927..811b0a72 100644 --- a/public/locales/hi/common.json +++ b/public/locales/hi/common.json @@ -87,6 +87,7 @@ "UPCOMING_EXTRA_SESSION": "आगामी अतिरिक्त सत्र", "BACK_TO_TOP": "वापस शीर्ष पर", "LAST_SEVEN_DAYS_RANGE": "पिछले 7 दिन {{date_range}}", + "AS_OF_TODAY_DATE": "As of Today {{dayDate}}", "LEARNER": "शिक्षार्थियों" }, "ATTENDANCE": { @@ -115,7 +116,8 @@ "N/A": "उपलब्ध नहीं", "CENTER_NAME": "केंद्र का नाम", "ALL_CENTERS": "सभी केंद्र", - "NO_LEARNER_WITH_LOW_ATTENDANCE": "कम उपस्थिति वाले कोई शिक्षार्थी नहीं" + "NO_LEARNER_WITH_LOW_ATTENDANCE": "कम उपस्थिति वाले कोई शिक्षार्थी नहीं", + "ATTENDANCE_MARKED_OUT_OF_DAYS": "उपस्थिति चिह्नित: पिछले 7 दिनों में से {{count}} दिन" }, "PROFILE": { "EDIT_PROFILE": "प्रोफ़ाइल संपादित करें", diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json index 92fdfe95..c888fca3 100644 --- a/public/locales/mr/common.json +++ b/public/locales/mr/common.json @@ -87,6 +87,7 @@ "UPCOMING_EXTRA_SESSION": "आगामी अतिरिक्त सत्रे", "BACK_TO_TOP": "परत वर जा", "LAST_SEVEN_DAYS_RANGE": "शेवटचे 7 दिवस {{date_range}}", + "AS_OF_TODAY_DATE": "As of Today {{day_date}}", "LEARNER": "शिकणारे" }, "ATTENDANCE": { @@ -110,7 +111,8 @@ "N/A": "उपलब्ध नाही", "CENTER_NAME": "केंद्राचे नाव", "ALL_CENTERS": "सर्व केंद्रे", - "NO_LEARNER_WITH_LOW_ATTENDANCE": "कमी उपस्थिती असलेला कोणताही शिकणारा नाही" + "NO_LEARNER_WITH_LOW_ATTENDANCE": "कमी उपस्थिती असलेला कोणताही शिकणारा नाही", + "ATTENDANCE_MARKED_OUT_OF_DAYS": "उपस्थिती नोंदवली: मागील 7 दिवसांपैकी {{count}} दिवस" }, "PROFILE": { "EDIT_PROFILE": "प्रोफाइल संपादित करा", diff --git a/src/components/DateRangePopup.tsx b/src/components/DateRangePopup.tsx index 89b8b6ef..5ce7a9ce 100644 --- a/src/components/DateRangePopup.tsx +++ b/src/components/DateRangePopup.tsx @@ -59,6 +59,7 @@ interface CustomSelectModalProps { selectedValue: string; setSelectedValue: (value: string) => void; onDateRangeSelected: any; + currentDayMonth:string; } const DateRangePopup: React.FC = ({ @@ -66,6 +67,7 @@ const DateRangePopup: React.FC = ({ selectedValue, setSelectedValue, onDateRangeSelected, + currentDayMonth }) => { const [isModalOpen, setIsModalOpen] = useState(false); const [isCalendarModalOpen, setIsCalenderModalOpen] = useState(false); @@ -187,10 +189,10 @@ const DateRangePopup: React.FC = ({ inputProps={{ readOnly: true }} > - {t('COMMON.SELECT_AN_OPTION')} + { t('DASHBOARD.AS_OF_TODAY_DATE', {day_date: currentDayMonth})} - {selectedValue ? selectedValue : t('COMMON.SELECT_AN_OPTION')} + {selectedValue ? selectedValue : t('DASHBOARD.AS_OF_TODAY_DATE', {day_date: currentDayMonth})} diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 0236207e..802a215b 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -111,7 +111,7 @@ ModalComponent.propTypes = { open: PropTypes.bool.isRequired, onClose: PropTypes.func.isRequired, heading: PropTypes.string.isRequired, - SubHeading: PropTypes.string.isRequired, + SubHeading: PropTypes.string, btnText: PropTypes.string.isRequired, children: PropTypes.node, }; diff --git a/src/pages/attendance-overview.tsx b/src/pages/attendance-overview.tsx index 2d2e35c8..7d410dbf 100644 --- a/src/pages/attendance-overview.tsx +++ b/src/pages/attendance-overview.tsx @@ -21,7 +21,12 @@ import { getCohortAttendance, } from '@/services/AttendanceService'; import { cohort, cohortAttendancePercentParam } from '@/utils/Interfaces'; -import { debounce, getTodayDate, toPascalCase } from '@/utils/Helper'; +import { + debounce, + formatSelectedDate, + getTodayDate, + toPascalCase, +} from '@/utils/Helper'; import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp'; import ClearIcon from '@mui/icons-material/Clear'; @@ -68,27 +73,83 @@ const AttendanceOverview: React.FC = () => { const [displayStudentList, setDisplayStudentList] = React.useState< Array >([]); + const [currentDayMonth, setCurrentDayMonth] = React.useState('') const [userId, setUserId] = React.useState(''); - const [selectedValue, setSelectedValue] = React.useState( - t('COMMON.AS_OF_TODAY') + const [selectedValue, setSelectedValue] = React.useState( + +'' ); const [presentPercentage, setPresentPercentage] = React.useState< string | number >(''); const [lowAttendanceLearnerList, setLowAttendanceLearnerList] = React.useState([]); + const [numberOfDaysAttendanceMarked, setNumberOfDaysAttendanceMarked] = + useState(0); + const [dateRange, setDateRange] = React.useState(''); const theme = useTheme(); const pathname = usePathname(); const menuItems = [ - t('COMMON.LAST_SEVEN_DAYS'), - t('COMMON.AS_OF_TODAY'), + t('DASHBOARD.LAST_SEVEN_DAYS_RANGE', { + date_range: dateRange + }), + t('DASHBOARD.AS_OF_TODAY_DATE', { + day_date: currentDayMonth + }), t('COMMON.LAST_MONTH'), t('COMMON.LAST_SIX_MONTHS'), - t('COMMON.CUSTOM_RANGE'), + t('COMMON.CUSTOM_RANGE' ), ]; + useEffect(()=>{ + setSelectedValue(currentDayMonth) + },[]); + + useEffect(() => { + const getAttendanceMarkedDays = async () => { + const today = new Date(); + const todayFormattedDate = formatSelectedDate(new Date()); + const lastSeventhDayDate = new Date( + today.getTime() - 6 * 24 * 60 * 60 * 1000 + ); + const lastSeventhDayFormattedDate = formatSelectedDate( + new Date(today.getTime() - 6 * 24 * 60 * 60 * 1000) + ); + + const endDay = today.getDate(); + const endDayMonth = today.toLocaleString('default', { month: 'long' }); + setCurrentDayMonth(`(${endDay} ${endDayMonth})`) + const startDay = lastSeventhDayDate.getDate(); + const startDayMonth = lastSeventhDayDate.toLocaleString('default', { + month: 'long', + }); + if (startDayMonth === endDayMonth) { + setDateRange(`(${startDay}-${endDay} ${endDayMonth})`); + } else { + setDateRange(`(${startDay} ${startDayMonth}-${endDay} ${endDayMonth})`); + } + const cohortAttendanceData: cohortAttendancePercentParam = { + limit: 0, + page: 0, + filters: { + scope: 'student', + fromDate: lastSeventhDayFormattedDate, + toDate: todayFormattedDate, + contextId: classId, + }, + facets: ['attendanceDate'], + }; + const res = await getCohortAttendance(cohortAttendanceData); + const response = res?.data?.result?.attendanceDate; + setNumberOfDaysAttendanceMarked(Object.keys(response).length); + }; + if (classId) { + getAttendanceMarkedDays(); + } + }, [classId, selectedValue === t('COMMON.LAST_SEVEN_DAYS')]); + // API call to get center list useEffect(() => { const fetchCohortList = async () => { @@ -413,6 +474,7 @@ const AttendanceOverview: React.FC = () => { sortedData.sort((a, b) => { const aPercent = parseFloat(a.present_percent); const bPercent = parseFloat(b.present_percent); + if (isNaN(aPercent) && isNaN(bPercent)) return 0; if (isNaN(aPercent)) return 1; if (isNaN(bPercent)) return -1; return bPercent - aPercent; @@ -422,6 +484,7 @@ const AttendanceOverview: React.FC = () => { sortedData.sort((a, b) => { const aPercent = parseFloat(a.present_percent); const bPercent = parseFloat(b.present_percent); + if (isNaN(aPercent) && isNaN(bPercent)) return 0; if (isNaN(aPercent)) return 1; if (isNaN(bPercent)) return -1; return aPercent - bPercent; @@ -435,6 +498,7 @@ const AttendanceOverview: React.FC = () => { sortedData.sort((a, b) => { const aClassMissed = parseFloat(a.absent); const bClassMissed = parseFloat(b.absent); + if (isNaN(aClassMissed) && isNaN(bClassMissed)) return 0; if (isNaN(aClassMissed)) return 1; if (isNaN(bClassMissed)) return -1; return bClassMissed - aClassMissed; @@ -444,6 +508,7 @@ const AttendanceOverview: React.FC = () => { sortedData.sort((a, b) => { const aClassMissed = parseFloat(a.absent); const bClassMissed = parseFloat(b.absent); + if (isNaN(aClassMissed) && isNaN(bClassMissed)) return 0; if (isNaN(aClassMissed)) return 1; if (isNaN(bClassMissed)) return -1; return aClassMissed - bClassMissed; @@ -529,8 +594,23 @@ const AttendanceOverview: React.FC = () => { selectedValue={selectedValue} setSelectedValue={setSelectedValue} onDateRangeSelected={handleDateRangeSelected} + currentDayMonth={currentDayMonth} /> - + {selectedValue == + t('DASHBOARD.LAST_SEVEN_DAYS_RANGE', { + date_range: dateRange, + }) ? ( + + {t('ATTENDANCE.ATTENDANCE_MARKED_OUT_OF_DAYS', { + count: numberOfDaysAttendanceMarked, + })} + + ) : null} {classId !== 'all' ? ( @@ -575,82 +655,87 @@ const AttendanceOverview: React.FC = () => { {learnerData?.length > 0 ? ( - {classId !== 'all' ? - - - - - - - + + + + - - - - {searchWord?.length > 0 && ( + - + - )} - - - - + + - - - - - : null} + + + + ) : null} {loading && ( )}