Skip to content

Commit

Permalink
Merge pull request #107 from suvarnakale/shiksha-2.0
Browse files Browse the repository at this point in the history 
Issue #PS-320 feat: attendace percentage changes according to date
  • Loading branch information
@itsvick
itsvick authored May 13, 2024
2 parents 0709b38 + 9cdd911 commit 0842992
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 70 deletions.
23 changes: 14 additions & 9 deletions src/components/WeekCalender.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const Calendar: React.FC<any> = ({ showDetailsHandle, data }) => {
const [currentMonth, setCurrentMonth] = useState(new Date());
const [currentWeek, setCurrentWeek] = useState(getWeek(currentMonth));
const [selectedDate, setSelectedDate] = useState(new Date());
const [showCircularProgress, setShowCircularProgress] = useState(false);

const changeMonthHandle = (btnType: string) => {
if (btnType === 'prev') {
Expand Down Expand Up @@ -84,27 +85,29 @@ const Calendar: React.FC<any> = ({ showDetailsHandle, data }) => {
for (let i = 0; i < 7; i++) {
formattedDate = format(day, dateFormat);
const cloneDay = day;
console.log('cloneDay', cloneDay);
// console.log('cloneDay', cloneDay);
let percentage = 0;
let pathColor = 'gray';
let textColor = 'black';

if (data !== null) {
const dayData = data[format(cloneDay, 'yyyy-MM-dd')] || {};
console.log('dayData', dayData);
const presentPercentage =
parseFloat(dayData.present_percentage) * 100 || 0;
// console.log('dayData', dayData);
const presentPercentage = parseFloat(dayData.present_percentage) || 0;
percentage = presentPercentage;
if (presentPercentage < 25) {
pathColor = '#BA1A1A';
textColor = '#BA1A1A';
} else if (presentPercentage < 50) {
pathColor = '#987100';
textColor = '#987100';
} else {
pathColor = '#06A816';
textColor = '#06A816';
}
// let dayDataValuesExist = Object.values(dayData).some(
// (value) => value !== null && value !== undefined && value !== ''
// );
// console.log(dayDataValuesExist);
// dayDataValuesExist
// ? setShowCircularProgress(true)
// : setShowCircularProgress(false);
}

days.push(
Expand Down Expand Up @@ -135,6 +138,7 @@ const Calendar: React.FC<any> = ({ showDetailsHandle, data }) => {
alignItems={'center'}
justifyContent={'center'}
>
{/* {showCircularProgress && ( */}
<Box
width={'25px'}
height={'2rem'}
Expand All @@ -144,13 +148,14 @@ const Calendar: React.FC<any> = ({ showDetailsHandle, data }) => {
<CircularProgressbar
value={percentage}
styles={buildStyles({
textColor: textColor,
textColor: pathColor,
pathColor: pathColor,
trailColor: '#E6E6E6',
})}
strokeWidth={15}
/>
</Box>
{/* )} */}
</Box>
</div>
</Box>
Expand Down
114 changes: 64 additions & 50 deletions src/pages/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import {
getMonthName,
getTodayDate,
shortDateFormat,
formatSelectedDate
formatSelectedDate,
} from '../utils/Helper';

import { ATTENDANCE_ENUM } from '../utils/Helper';
Expand Down Expand Up @@ -96,11 +96,12 @@ const Dashboard: React.FC<DashboardProps> = () => {
);
const [showDetails, setShowDetails] = React.useState(false);
const [handleSaveHasRun, setHandleSaveHasRun] = React.useState(false);
const [selectedDate, setSelectedDate] = React.useState("");
const [selectedDate, setSelectedDate] = React.useState('');
const [percentageAttendanceData, setPercentageAttendanceData] =
React.useState(null);
const [numberOfCohortMembers, setNumberOfCohortMembers] = React.useState(0);
const [percentageAttendance, setPercentageAttendance] = React.useState<any>(null);
const [percentageAttendance, setPercentageAttendance] =
React.useState<any>(null);
const [currentDate, setCurrentDate] = React.useState(getTodayDate);
const [bulkAttendanceStatus, setBulkAttendanceStatus] = React.useState('');
const [loading, setLoading] = React.useState(false);
Expand Down Expand Up @@ -420,7 +421,6 @@ const Dashboard: React.FC<DashboardProps> = () => {
}, [classId, handleSaveHasRun]);

const handleUserTypeChange = async (event: SelectChangeEvent) => {

setUserType(event.target.value as string);
setHandleSaveHasRun(!handleSaveHasRun);
};
Expand Down Expand Up @@ -526,7 +526,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
// const resp = response?.data;
// console.log(`data`, data);
setShowUpdateButton(true);
handleModalToggle()
handleModalToggle();
setLoading(false);
setHandleSaveHasRun(true);
} catch (error) {
Expand Down Expand Up @@ -591,20 +591,26 @@ const Dashboard: React.FC<DashboardProps> = () => {
};

const todayDate = new Date().toISOString().split('T')[0];
console.log(percentageAttendance);
const currentAttendance: any = percentageAttendance?.[todayDate];
// let currentPercentAttendance = 'N/A';
let currentAttendance;
currentAttendance = percentageAttendance?.[todayDate];

if (selectedDate) {
if (percentageAttendance?.[selectedDate]) {
currentAttendance = percentageAttendance?.[selectedDate];
} else {
currentAttendance = 'Not Marked';
}
}
const presentPercentage = parseFloat(currentAttendance?.present_percentage);

// Determine the color based on presentPercentage value
let pathColor; // Default color (green)
let pathColor;
if (!isNaN(presentPercentage)) {
if (presentPercentage < 25) {
pathColor = '#BA1A1A'; // Less than 25% - Red color
pathColor = '#BA1A1A';
} else if (presentPercentage < 50) {
pathColor = '#987100'; // Less than 50% - Purple color
pathColor = '#987100';
} else {
pathColor = '#06A816'; // Less than 50% - Purple color
pathColor = '#06A816';
}
}
return (
Expand Down Expand Up @@ -730,44 +736,52 @@ const Dashboard: React.FC<DashboardProps> = () => {
>
{userType == 'student' ? (
<Box display={'flex'}>
{/* <Typography sx = {{color: theme.palette.warning['A400']}}>{t('DASHBOARD.NOT_MARKED')}</Typography> */}
{/* <Typography sx = {{color: theme.palette.warning['A400']}} fontSize={'0.8rem'}>{t('DASHBOARD.FUTURE_DATE_CANT_MARK')}</Typography>
*/}
<Box
width={'25px'}
height={'2rem'}
marginTop={'0.25rem'}
margin={'5px'}
{currentAttendance !== 'Not Marked' && (
<>
<Box
width={'25px'}
height={'2rem'}
marginTop={'0.25rem'}
margin={'5px'}
>
<CircularProgressbar
value={currentAttendance?.present_percentage}
styles={buildStyles({
textColor: pathColor,
pathColor: pathColor,
trailColor: '#E6E6E6',
})}
strokeWidth={15}
/>
</Box>
<Box>
<Typography
sx={{ color: theme.palette.warning['A400'] }}
variant="h6"
className="word-break"
>
{currentAttendance?.present_percentage}{' '}
{t('DASHBOARD.PERCENT_ATTENDANCE')}
</Typography>
<Typography
sx={{ color: theme.palette.warning['A400'] }}
variant="h6"
className="word-break"
>
({percentageAttendance?.[todayDate]?.present_students}
/{percentageAttendance?.[todayDate]?.total_students}){' '}
{t('DASHBOARD.PRESENT_STUDENTS')}
</Typography>
</Box>
</>
)}
<Typography
sx={{ color: theme.palette.warning['A400'] }}
variant="h6"
className="word-break"
>
<CircularProgressbar
value={currentAttendance?.present_percentage}
styles={buildStyles({
textColor: pathColor,
pathColor: pathColor,
trailColor: '#E6E6E6',
})}
strokeWidth={15}
/>
</Box>
<Box>
<Typography
sx={{ color: theme.palette.warning['A400'] }}
variant="h6"
className="word-break"
>
{currentAttendance?.present_percentage}{' '}
{t('DASHBOARD.PERCENT_ATTENDANCE')}
</Typography>
<Typography
sx={{ color: theme.palette.warning['A400'] }}
variant="h6"
className="word-break"
>
({percentageAttendance?.[todayDate]?.present_students}/
{percentageAttendance?.[todayDate]?.total_students}){' '}
{t('DASHBOARD.PRESENT_STUDENTS')}
</Typography>
</Box>
{t('DASHBOARD.NOT_MARKED')}
</Typography>
</Box>
) : (
<Box>
Expand Down
19 changes: 8 additions & 11 deletions src/utils/Helper.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

export const ATTENDANCE_ENUM = {
PRESENT: 'present',
ABSENT: 'absent',
Expand Down Expand Up @@ -35,6 +34,14 @@ export const shortDateFormat = (date: Date) => {
return `${year}-${month}-${day}`;
};

export const formatSelectedDate = (inputDate: string) => {
const date = new Date(inputDate);
const year = date.getFullYear();
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2);
return `${year}-${month}-${day}`;
};

export const getTodayDate = () => {
const currentDate = new Date();
const year = currentDate.getFullYear();
Expand Down Expand Up @@ -74,13 +81,3 @@ export const truncateURL = (
}
return url;
};

export const formatSelectedDate = (inputDate: string) => {
let date = new Date(inputDate);
let year = date.getFullYear();
let month = ('0' + (date.getMonth() + 1)).slice(-2);
let day = ('0' + date.getDate()).slice(-2);
let formattedDate = year + '-' + month + '-' + day;
console.log(formattedDate);
return formattedDate;
};

0 comments on commit 0842992

Please sign in to comment.