Skip to content

Commit be1a839

Browse files
aimedivinCalebgisa72
aimedivin
authored and
Calebgisa72
committed
fix: move client-side attendance logic to server
1 parent 2e47213 commit be1a839

File tree

8 files changed

+357
-131
lines changed

8 files changed

+357
-131
lines changed

‎src/containers/admin-dashBoard/Sessions.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,6 @@ function AdminSission() {
158158
getSessionRefetch();
159159
})
160160
.catch((error) => {});
161-
// console.log("------",id)
162161
}
163162
};
164163

‎src/pages/Organization/Orglogin.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,6 @@ function Orglogin() {
8888
}
8989
};
9090
const names = name.replace(/ /gi, '').toLowerCase();
91-
// console.log(names)
9291
const completeOrgUrl = `${names}`;
9392

9493
return (

‎src/pages/TraineeAttendanceTracker.tsx‎

Lines changed: 92 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,8 @@ function TraineeAttendanceTracker() {
152152
useState<UserInterface[]>();
153153
const [isModalOpen, setIsModalOpen] = useState(false);
154154
const [isUpdatedMode, setIsUpdatedMode] = useState<boolean>(false);
155+
const [pauseResumeAttendance, setPauseResumeAttendance] =
156+
useState<boolean>(false);
155157
const [deleteAttendance, { loading: loadingDeleteAttendance }] =
156158
useMutation(DELETE_ATTENDANCE);
157159
const [updated, setUpdate] = useState<boolean>(false);
@@ -184,6 +186,7 @@ function TraineeAttendanceTracker() {
184186
const [pauseAndResumeTeamAttendance, { loading: loadingPRTeamAttendance }] =
185187
useMutation(PAUSE_AND_RESUME_ATTENDANCE, {
186188
onCompleted: (data) => {
189+
setPauseResumeAttendance(false);
187190
setSelectedWeek(undefined);
188191
setAttendanceData(
189192
data.pauseAndResumeTeamAttendance.sanitizedAttendance,
@@ -204,6 +207,7 @@ function TraineeAttendanceTracker() {
204207
});
205208
},
206209
onError: (error) => {
210+
setPauseResumeAttendance(false);
207211
const errorMessage =
208212
error.graphQLErrors?.[0]?.message || 'An unexpected error occurred';
209213
toast.error(errorMessage);
@@ -297,6 +301,7 @@ function TraineeAttendanceTracker() {
297301
team: selectedTeamId,
298302
},
299303
onCompleted: (data) => {
304+
setSelectedDayDate('');
300305
selectedTeamData?.isJobActive &&
301306
selectedTeamData.active &&
302307
setSelectedPhase({
@@ -362,8 +367,10 @@ function TraineeAttendanceTracker() {
362367
const attendanceWeek = attendanceData.attendanceWeeks.filter(
363368
(attendanceWeek: any) => attendanceWeek.phase.id === selectedPhase?.id,
364369
);
365-
setWeeks(attendanceWeek[0].weeks);
366-
const tempWeeks = [...attendanceWeek[0].weeks];
370+
attendanceWeek.length ? setWeeks(attendanceWeek[0].weeks) : setWeeks([1]);
371+
const tempWeeks = attendanceWeek.length
372+
? [...attendanceWeek[0].weeks]
373+
: [0];
367374
tempWeeks.sort((a, b) => a - b);
368375
setWeeks(tempWeeks);
369376
setSelectedWeek(tempWeeks[tempWeeks.length - 1]);
@@ -504,11 +511,15 @@ function TraineeAttendanceTracker() {
504511
// Check if date for selected day is valid
505512
useEffect(() => {
506513
setIsValidAttendanceDay((prevData) =>
507-
Object.values(validDate).some(
508-
(date) =>
509-
new Date(Number(date)).toISOString().split('T')[0] ===
510-
selectedDayDate,
511-
),
514+
Object.values(validDate).some((date) => {
515+
const newDate = new Date(Number(date));
516+
if (newDate.getUTCHours() >= 22) {
517+
newDate.setUTCDate(newDate.getUTCDate() + 1);
518+
newDate.setUTCHours(0, 0, 0, 0); // Set the time to midnight of the next day
519+
}
520+
521+
return newDate.toISOString().split('T')[0] === selectedDayDate;
522+
}),
512523
);
513524
}, [selectedDayDate]);
514525

@@ -530,6 +541,49 @@ function TraineeAttendanceTracker() {
530541
teamName={selectedTeam}
531542
setAttendanceData={setAttendanceData}
532543
/>
544+
{pauseResumeAttendance && (
545+
<div className="fixed inset-0 bg-gray-900 bg-opacity-75 flex justify-center items-center z-50 p-4">
546+
<div className="flex flex-col justify-between bg-tertiary dark:bg-dark-bg h-[13rem] xmd:h-[15rem] w-[27rem] rounded-md p-4">
547+
<div className="xmd:pt-1 pb-2 xmd:pb-3 pl-2 border-b-2 border-neutral-600 dark:border-white font-bold text-[.92rem] xmd:text-[.98rem]">
548+
<p>
549+
{selectedTeamData?.isJobActive
550+
? 'Pause Attendance'
551+
: 'Resume Attendance'}
552+
</p>
553+
</div>
554+
<p className="text-[.82rem] xmd:text-[.88rem] text-justify mx-2 font-normal">
555+
{selectedTeamData?.isJobActive
556+
? "By confirming, automatic attendance week additions for upcoming weeks will be paused. You can still record attendance for the current week. Don't worry you can reactivate this feature at any time!."
557+
: "By confirming, automatic attendance week additions for upcoming weeks will be activated again. If you ever wish to pause this feature again, it's easy to do!"}
558+
</p>
559+
<div className="flex justify-end gap-x-3 text-[.83rem] xmd:text-[.93rem] font-medium mt-1 text-white">
560+
<button
561+
type="button"
562+
onClick={() => setPauseResumeAttendance(false) }
563+
className="bg-neutral-600/80 dark:bg-neutral-600 hover:bg-neutral-600/75 h-[1.9rem] xmd:h-[2.15rem] px-3 xmd:px-4 rounded-[4px]"
564+
>
565+
Cancel
566+
</button>
567+
<button
568+
type="button"
569+
onClick={() => {
570+
!loadingPRTeamAttendance &&
571+
pauseAndResumeTeamAttendance({
572+
variables: {
573+
team: selectedTeamId,
574+
orgToken: localStorage.getItem('orgToken'),
575+
},
576+
});
577+
}}
578+
disabled={loadingPRTeamAttendance}
579+
className="bg-primary hover:bg-primary/75 h-[1.9rem] xmd:h-[2.15rem] px-3 xmd:px-4 rounded-[4px]"
580+
>
581+
Confirm
582+
</button>
583+
</div>
584+
</div>
585+
</div>
586+
)}
533587
<div className="">
534588
<div className="flex flex-col gap-y-5 xmd:gap-y-9 rounded-md w-full mt-1 xmd:mt-0">
535589
<div className="text-lg xmd:text-xl font-semibold">
@@ -573,7 +627,7 @@ function TraineeAttendanceTracker() {
573627
))}
574628
{!teamLoading && !teamsData?.length && (
575629
<option value="" disabled>
576-
No teams.
630+
No teams
577631
</option>
578632
)}
579633
</select>
@@ -614,7 +668,7 @@ function TraineeAttendanceTracker() {
614668
phase.id === selectedPhase?.id
615669
? 'border-black dark:border-white dark:text-white'
616670
: 'dark:border-neutral-600 dark:text-neutral-500 border-neutral-400 text-neutral-500 '
617-
} h-6 xmd:h-7 px-2 xmd:px-3 border-b-4 capitalize cursor-pointer font-medium whitespace-nowrap text-[.85rem] xmd:text-[.95rem]`}
671+
} h-6 xmd:h-7 px-2 xmd:px-3 border-b-[3px] capitalize cursor-pointer font-medium whitespace-nowrap text-[.85rem] xmd:text-[.95rem]`}
618672
onClick={() => {
619673
if (isUpdatedMode && selectedPhase !== phase && updated) {
620674
toast.warning('First Discard or Update your changes', {
@@ -661,7 +715,7 @@ function TraineeAttendanceTracker() {
661715
</div>
662716
</div>
663717

664-
<div className="flex justify-between items-center border border-neutral-400/60 dark:border-neutral-600 h-[1.85rem] xmd:h-9 text-[.83rem] xmd:text-base">
718+
<div className="flex justify-between items-center border-2 border-neutral-400/60 dark:border-neutral-600 h-[1.85rem] xmd:h-9 text-[.83rem] xmd:text-base">
665719
{['mon', 'tue', 'wed', 'thu', 'fri'].map((day, index) => (
666720
<div
667721
// eslint-disable-next-line react/no-array-index-key
@@ -670,7 +724,7 @@ function TraineeAttendanceTracker() {
670724
selectedDay === day
671725
? 'bg-neutral-400/60 dark:bg-neutral-600'
672726
: 'hover:bg-neutral-400/20 dark:hover:bg-neutral-400/15'
673-
} flex justify-center items-center basis-1/5 capitalize border-l border-neutral-400/60 dark:border-neutral-600 cursor-pointer h-full`}
727+
} flex justify-center items-center basis-1/5 capitalize border-l-2 border-neutral-400/60 dark:border-neutral-600 cursor-pointer h-full`}
674728
onClick={() => {
675729
if (isUpdatedMode && selectedDay !== day && updated) {
676730
toast.warning('First Discard or Update your changes', {
@@ -713,7 +767,7 @@ function TraineeAttendanceTracker() {
713767
}}
714768
data-testid="update-link"
715769
>
716-
<LuClipboardEdit className="text-xl" />
770+
<LuClipboardEdit className="text-lg" />
717771
</div>
718772
<div
719773
onClick={() => {
@@ -728,7 +782,19 @@ function TraineeAttendanceTracker() {
728782
}}
729783
className="flex gap-x-1 items-center cursor-pointer"
730784
>
731-
<RiDeleteBin6Line className="text-xl" />
785+
<RiDeleteBin6Line className="text-lg" />
786+
</div>
787+
<div
788+
onClick={() => {
789+
setPauseResumeAttendance(true);
790+
}}
791+
className="flex gap-x-[5px] items-center cursor-pointer"
792+
>
793+
{selectedTeamData?.isJobActive ? (
794+
<FaRegCirclePause className="text-[1.12rem]" />
795+
) : (
796+
<FaRegCirclePlay className="text-[1.12rem]" />
797+
)}
732798
</div>
733799
</div>
734800
</div>
@@ -739,22 +805,26 @@ function TraineeAttendanceTracker() {
739805
<th
740806
className={`${
741807
isUpdatedMode ? 'w-[35%] ' : 'w-[40%]'
742-
} text-left pl-2 xmd:pl-10`}
808+
} text-left pl-2 xmd:pl-10 font-semibold`}
743809
>
744810
Names
745811
</th>
746812
<th
747813
className={`${
748814
isUpdatedMode ? 'w-[35%] ' : 'w-[40%]'
749-
} text-left pl-2 xmd:pl-10`}
815+
} text-left pl-2 xmd:pl-10 font-semibold`}
750816
>
751817
Email
752818
</th>
753-
<th className={`${isUpdatedMode ? 'w-[15%]' : 'w-[20%]'}`}>
819+
<th
820+
className={`${
821+
isUpdatedMode ? 'w-[15%]' : 'w-[20%]'
822+
} font-semibold`}
823+
>
754824
Score
755825
</th>
756826
{isUpdatedMode && (
757-
<th ref={editColumnRef} className="w-[15%]">
827+
<th ref={editColumnRef} className="w-[15%] font-semibold">
758828
Action
759829
</th>
760830
)}
@@ -774,7 +844,7 @@ function TraineeAttendanceTracker() {
774844
<tr
775845
// eslint-disable-next-line react/no-array-index-key
776846
key={index}
777-
className="even:bg-neutral-400/20 dark:even:bg-black/20 h-10 font-light"
847+
className="even:bg-neutral-400/20 dark:even:bg-black/20 h-10 even:border-y border-neutral-400/30 dark:border-neutral-600/40"
778848
>
779849
<td
780850
className="pl-2 xmd:pl-10 whitespace-nowrap"
@@ -852,7 +922,7 @@ function TraineeAttendanceTracker() {
852922
) {
853923
return (
854924
<tr key={`no-attendance-${selectedDay}`}>
855-
<td colSpan={3} className="text-center h-20">
925+
<td colSpan={3} className="text-center h-28">
856926
There is no attendance for the selected day
857927
</td>
858928
</tr>
@@ -862,7 +932,7 @@ function TraineeAttendanceTracker() {
862932
})}
863933
{(teamsLoading || teamAttendanceLoading) && (
864934
<tr key="no-attendance-abc">
865-
<td colSpan={3} className="text-center h-20">
935+
<td colSpan={3} className="text-center h-28">
866936
Loading Data...
867937
</td>
868938
</tr>
@@ -871,7 +941,7 @@ function TraineeAttendanceTracker() {
871941
!teamAttendanceLoading &&
872942
!traineeAttendanceData.length && (
873943
<tr key="no-attendance-xyz">
874-
<td colSpan={3} className="text-center h-20">
944+
<td colSpan={3} className="text-center h-28">
875945
There is no attendance for the selected day
876946
</td>
877947
</tr>
@@ -962,13 +1032,7 @@ function TraineeAttendanceTracker() {
9621032
</div>
9631033
<div
9641034
onClick={() => {
965-
!loadingPRTeamAttendance &&
966-
pauseAndResumeTeamAttendance({
967-
variables: {
968-
team: selectedTeamId,
969-
orgToken: localStorage.getItem('orgToken'),
970-
},
971-
});
1035+
setPauseResumeAttendance(true);
9721036
}}
9731037
className="flex gap-x-[5px] items-center ml-4 cursor-pointer hover:text-primary font-medium leading-3"
9741038
>

‎tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -463,7 +463,7 @@ Array [
463463
name="date"
464464
readOnly={true}
465465
type="text"
466-
value="2024-10-29"
466+
value="2024-10-24"
467467
/>
468468
</div>
469469
<div

0 commit comments

Comments
 (0)