Merge branch 'main' into colin/system-options-nits

Author: ChinemeremChigbo

hooks/useChangeManagement.ts

@@ -1,6 +1,6 @@
 import { Location, SubjectAPI } from '@utils/types';
 import { useCallback, useEffect, useState } from 'react';
-
+import { useCustomToast } from '../src/components/CustomToast';
 /**
  * This hook manages pending changes to system entities using an entity-based tracking approach.
  * Instead of tracking individual atomic changes, it stores the final state of each modified entity.
@@ -18,7 +18,6 @@ interface UseChangeManagementProps {
   locations: Location[];
   absenceCap: number;
   onRefresh?: () => void;
-  toast?: any;
 }
 
 interface UseChangeManagementReturn {
@@ -42,8 +41,9 @@ export const useChangeManagement = ({
   locations: initialLocations,
   absenceCap: initialAbsenceCap,
   onRefresh,
-  toast,
 }: UseChangeManagementProps): UseChangeManagementReturn => {
+  const showToast = useCustomToast();
+
   // Store maps of pending entity changes
   const [pendingSubjects, setPendingSubjects] = useState<
     Map<number, SubjectAPI | null>
@@ -396,12 +396,10 @@ export const useChangeManagement = ({
         }
 
         // Show success toast
-        if (toast) {
-          toast({
-            title: 'Changes saved',
+        if (showToast) {
+          showToast({
+            description: 'Changes saved.',
             status: 'success',
-            duration: 3000,
-            isClosable: true,
           });
         }
 
@@ -416,13 +414,10 @@ export const useChangeManagement = ({
     }
 
     // Show error toast if there was a problem
-    if (!success && toast) {
-      toast({
-        title: 'Error',
+    if (!success && showToast) {
+      showToast({
         description: errorMessage || 'Failed to save changes',
         status: 'error',
-        duration: 5000,
-        isClosable: true,
       });
     }
 

src/components/CustomToast.tsx

@@ -0,0 +1,76 @@
+import { Alert, AlertIcon, Box, Text, useToast } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+
+type ToastStatus = 'success' | 'error';
+
+interface CustomToastProps {
+  description?: string | ReactNode;
+  status?: ToastStatus;
+}
+
+export const CustomToast: React.FC<CustomToastProps> = ({
+  description,
+  status = 'success',
+}) => {
+  return (
+    <Alert
+      status={status}
+      variant="subtle"
+      bg="white"
+      border="1px solid"
+      borderColor={status === 'error' ? '#BF3232' : '#5A8934'}
+      borderRadius="md"
+      px={3}
+      py={3}
+      width="360px"
+      alignItems="center"
+      boxShadow="md"
+      sx={{
+        '& [data-status="success"] svg': {
+          color: '#5A8934',
+        },
+        '& [data-status="error"] svg': {
+          color: '#BF3232',
+        },
+      }}
+    >
+      <AlertIcon boxSize="30px" />
+      <Box pl={2}>
+        {typeof description === 'string' ? (
+          <Text fontSize="14px" color="black">
+            {description}
+          </Text>
+        ) : (
+          <Box fontSize="14px" color="black">
+            {description}
+          </Box>
+        )}
+      </Box>
+    </Alert>
+  );
+};
+
+export const useCustomToast = () => {
+  const toast = useToast();
+
+  return ({
+    description,
+    status = 'success',
+  }: {
+    description?: string | ReactNode;
+    status?: string;
+  }) => {
+    const validStatuses = ['success', 'error'] as const;
+    const safeStatus = validStatuses.includes(status as ToastStatus)
+      ? (status as ToastStatus)
+      : 'success';
+
+    toast({
+      isClosable: true,
+      position: 'bottom-left',
+      render: () => (
+        <CustomToast description={description} status={safeStatus} />
+      ),
+    });
+  };
+};

src/components/absences/FileUpload.tsx

@@ -1,6 +1,7 @@
-import { Box, Image, Input, Text, useToast } from '@chakra-ui/react';
+import { Box, Image, Input, Text } from '@chakra-ui/react';
 import { LessonPlanFile } from '@utils/types';
 import { useRef, useState } from 'react';
+import { useCustomToast } from '../CustomToast';
 
 interface FileUploadProps {
   lessonPlan: File | null;
@@ -17,18 +18,15 @@ export const FileUpload: React.FC<FileUploadProps> = ({
 }) => {
   const [isDragging, setIsDragging] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
-  const toast = useToast();
+  const showToast = useCustomToast();
 
   const validateAndSetFile = (file: File) => {
     if (file.type === 'application/pdf' || file.name.endsWith('.pdf')) {
       setLessonPlan(file);
     } else {
-      toast({
-        title: 'Invalid File Type',
+      showToast({
         description: 'Please upload a valid PDF file.',
         status: 'error',
-        duration: 5000,
-        isClosable: true,
       });
     }
   };