Merge pull request #113 from uwblueprint/colin/absence-conflict

(Merge #105 first) Show warning on Absence Conflict

Author: ChinemeremChigbo

src/components/AbsenceDetails.tsx

@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   Flex,
+  Icon,
   IconButton,
   Modal,
   ModalBody,
@@ -10,6 +11,11 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
   Text,
   VStack,
   useTheme,
@@ -19,12 +25,13 @@ import { useUserData } from '@hooks/useUserData';
 import { EventDetails, Role } from '@utils/types';
 import { Buildings, Calendar } from 'iconsax-react';
 import { useState } from 'react';
+import { BiSolidErrorCircle } from 'react-icons/bi';
 import { FiEdit2, FiMapPin, FiTrash2, FiUser } from 'react-icons/fi';
 import { IoEyeOutline } from 'react-icons/io5';
+import AbsenceClaimThanks from './AbsenceClaimThanks';
 import AbsenceStatusTag from './AbsenceStatusTag';
 import EditAbsenceForm from './EditAbsenceForm';
 import LessonPlanView from './LessonPlanView';
-import AbsenceClaimThanks from './AbsenceClaimThanks';
 
 interface AbsenceDetailsProps {
   isOpen: boolean;
@@ -33,6 +40,7 @@ interface AbsenceDetailsProps {
   onDelete?: (absenceId: number) => void;
   isAdminMode: boolean;
   fetchAbsences: () => Promise<void>;
+  hasConflictingEvent: boolean;
 }
 
 const AbsenceDetails: React.FC<AbsenceDetailsProps> = ({
@@ -42,6 +50,7 @@ const AbsenceDetails: React.FC<AbsenceDetailsProps> = ({
   onDelete,
   isAdminMode,
   fetchAbsences,
+  hasConflictingEvent,
 }) => {
   const theme = useTheme();
   const userData = useUserData();
@@ -217,16 +226,34 @@ const AbsenceDetails: React.FC<AbsenceDetailsProps> = ({
         >
           <ModalHeader p="0">
             <Flex justify="space-between" align="center" position="relative">
-              <AbsenceStatusTag
-                isUserAbsentTeacher={isUserAbsentTeacher}
-                isUserSubstituteTeacher={isUserSubstituteTeacher}
-                isAdminMode={isAdminMode}
-                substituteTeacherFullName={
-                  event.substituteTeacherFullName
-                    ? event.substituteTeacherFullName
-                    : undefined
-                }
-              />
+              <Flex gap="8px" align="center">
+                <AbsenceStatusTag
+                  isUserAbsentTeacher={isUserAbsentTeacher}
+                  isUserSubstituteTeacher={isUserSubstituteTeacher}
+                  isAdminMode={isAdminMode}
+                />
+                {hasConflictingEvent &&
+                  !event.substituteTeacherFullName &&
+                  !isUserAbsentTeacher && (
+                    <Popover placement="top" trigger="hover">
+                      <PopoverTrigger>
+                        <Box display="flex" alignItems="center" height="100%">
+                          <Icon
+                            as={BiSolidErrorCircle}
+                            color={theme.colors.errorRed['200']}
+                            boxSize={6}
+                          />
+                        </Box>
+                      </PopoverTrigger>
+                      <PopoverContent bg="white" width="fit-content">
+                        <PopoverArrow />
+                        <PopoverBody textStyle="caption" maxW="190px">
+                          You have already filled an absence on this date.
+                        </PopoverBody>
+                      </PopoverContent>
+                    </Popover>
+                  )}
+              </Flex>
               <Flex position="absolute" right="0">
                 {isAdminMode && (
                   <IconButton
@@ -422,6 +449,7 @@ const AbsenceDetails: React.FC<AbsenceDetailsProps> = ({
                     fontSize="16px"
                     fontWeight="500"
                     onClick={handleClaimAbsenceClick}
+                    disabled={hasConflictingEvent}
                   >
                     Fill this Absence
                   </Button>

src/pages/calendar.tsx

@@ -225,6 +225,19 @@ const Calendar: React.FC = () => {
     updateMonthYearTitle();
   }, [updateMonthYearTitle]);
 
+  const formatDateForClaimedDays = (date: Date) => {
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
+  const hasConflictingEvent = (event: EventDetails | null) => {
+    if (!event?.start) return false;
+    const dateString = formatDateForClaimedDays(new Date(event.start));
+    return claimedDays.has(dateString);
+  };
+
   const handleAbsenceClick = (clickInfo: EventClickArg) => {
     setSelectedEvent({
       title: clickInfo.event.title,
@@ -316,7 +329,7 @@ const Calendar: React.FC = () => {
   }
 
   const dayCellContent = (args) => {
-    const eventDateString = `${args.date.getFullYear()}-${(args.date.getMonth() + 1).toString().padStart(2, '0')}-${args.date.getDate().toString().padStart(2, '0')}`;
+    const eventDateString = formatDateForClaimedDays(args.date);
 
     const isToday = (() => {
       const today = new Date();
@@ -461,6 +474,7 @@ const Calendar: React.FC = () => {
         fetchAbsences={fetchAbsences}
         onDelete={handleDeleteAbsence}
         isAdminMode={isAdminMode}
+        hasConflictingEvent={hasConflictingEvent(selectedEvent)}
       />
 
       <Modal isOpen={isInputFormOpen} onClose={onInputFormClose} isCentered>