From f2cfd059708c2e924e35b4300a4803a0c2816049 Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Sun, 8 Feb 2026 17:47:23 -0500
Subject: [PATCH 1/5] replacing native alerts with chakra ui alerts

---
 .../components/forms/donationDetailsModal.tsx | 27 ++++++++++++++++-
 .../components/forms/orderDetailsModal.tsx    | 25 +++++++++++++++-
 .../src/components/forms/requestFormModal.tsx | 29 +++++++++++++++++--
 apps/frontend/src/containers/FormRequests.tsx | 25 +++++++++++++++-
 .../frontend/src/containers/adminDonation.tsx | 25 +++++++++++++++-
 .../src/containers/adminOrderManagement.tsx   | 26 ++++++++++++++++-
 6 files changed, 149 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/src/components/forms/donationDetailsModal.tsx b/apps/frontend/src/components/forms/donationDetailsModal.tsx
index 80b8d15ce..43ddfed39 100644
--- a/apps/frontend/src/components/forms/donationDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/donationDetailsModal.tsx
@@ -6,6 +6,7 @@ import {
   Dialog,
   Portal,
   CloseButton,
+  Alert,
 } from '@chakra-ui/react';
 import ApiClient from '@api/apiClient';
 import { Donation, DonationItem, FoodType } from 'types/types';
@@ -25,6 +26,8 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
   const [loadedDonation, setLoadedDonation] = useState<Donation>();
   const [items, setItems] = useState<DonationItem[]>([]);
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   const donationId = donation?.donationId; // adjust if your ID field is different
 
   useEffect(() => {
@@ -39,8 +42,9 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
 
         setLoadedDonation(donationData);
         setItems(itemsData);
+        setAlertMessage('Error fetching donation details: ' + err);
       } catch (err) {
-        alert('Error fetching donation details: ' + err);
+        setAlertMessage('Error fetching donation details: ' + err);
       }
     };
 
@@ -63,7 +67,28 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
       closeOnInteractOutside
       scrollBehavior="inside"
     >
+      
       <Portal>
+        {alertMessage && (
+              <Alert.Root
+                color='red'
+                status="info"
+                bg="white"
+                variant="subtle"
+                boxShadow="lg"
+                position="absolute"
+                zIndex="toast"
+                top="12px"
+                right="12px"
+                w="fit-content"
+                maxW="400px"
+              >
+                <Alert.Indicator />
+                <Alert.Title textStyle="p2" fontWeight={500}>
+                  {alertMessage}
+                </Alert.Title>
+              </Alert.Root>
+            )}
         <Dialog.Backdrop bg="blackAlpha.300" />
 
         <Dialog.Positioner>
diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index 672fefe08..8ddc8c571 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -7,6 +7,7 @@ import {
   Textarea,
   Field,
   Tag,
+  Alert,
 } from '@chakra-ui/react';
 import ApiClient from '@api/apiClient';
 import { FoodRequest, OrderSummary } from 'types/types';
@@ -25,6 +26,8 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
 }) => {
   const [foodRequest, setFoodRequest] = useState<FoodRequest | null>(null);
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   useEffect(() => {
     if (isOpen) {
       const fetchData = async () => {
@@ -34,7 +37,7 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
           );
           setFoodRequest(foodRequestData);
         } catch (error) {
-          alert('Error fetching food request details:' + error);
+          setAlertMessage('Error fetching food request details:' + error);
         }
       };
 
@@ -51,6 +54,26 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
       }}
       closeOnInteractOutside
     >
+      {alertMessage && (
+              <Alert.Root
+                color='red'
+                status="info"
+                bg="white"
+                variant="subtle"
+                boxShadow="lg"
+                position="absolute"
+                zIndex="toast"
+                top="12px"
+                right="12px"
+                w="fit-content"
+                maxW="400px"
+              >
+                <Alert.Indicator />
+                <Alert.Title textStyle="p2" fontWeight={500}>
+                  {alertMessage}
+                </Alert.Title>
+              </Alert.Root>
+            )}
       <Dialog.Backdrop />
       <Dialog.Positioner>
         <Dialog.Content maxW={650}>
diff --git a/apps/frontend/src/components/forms/requestFormModal.tsx b/apps/frontend/src/components/forms/requestFormModal.tsx
index f54e625ed..8cf0b538b 100644
--- a/apps/frontend/src/components/forms/requestFormModal.tsx
+++ b/apps/frontend/src/components/forms/requestFormModal.tsx
@@ -10,6 +10,7 @@ import {
   Box,
   Field,
   CloseButton,
+  Alert,
 } from '@chakra-ui/react';
 import { Form, ActionFunction, ActionFunctionArgs } from 'react-router-dom';
 import { FoodRequest, FoodTypes, RequestSize } from '../../types/types';
@@ -32,6 +33,8 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
   const [requestedSize, setRequestedSize] = useState<string>('');
   const [additionalNotes, setAdditionalNotes] = useState<string>('');
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   const isFormValid = requestedSize !== '' && selectedItems.length > 0;
 
   useEffect(() => {
@@ -54,6 +57,26 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
       }}
       closeOnInteractOutside
     >
+      {alertMessage && (
+              <Alert.Root
+                color='red'
+                status="info"
+                bg="white"
+                variant="subtle"
+                boxShadow="lg"
+                position="absolute"
+                zIndex="toast"
+                top="12px"
+                right="12px"
+                w="fit-content"
+                maxW="400px"
+              >
+                <Alert.Indicator />
+                <Alert.Title textStyle="p2" fontWeight={500}>
+                  {alertMessage}
+                </Alert.Title>
+              </Alert.Root>
+            )}
       <Dialog.Backdrop />
       <Dialog.Positioner>
         <Dialog.Content maxW={650}>
@@ -81,11 +104,11 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
               onSubmit={(e) => {
                 if (selectedItems.length === 0) {
                   e.preventDefault();
-                  alert('Please select at least one food type');
+                  setAlertMessage('Please select at least one food type');
                 }
                 if (requestedSize === '') {
                   e.preventDefault();
-                  alert('Please select a requested size.');
+                  setAlertMessage('Please select a requested size.');
                 }
               }}
             >
@@ -279,7 +302,7 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                     if (words.length <= 250) {
                       setAdditionalNotes(e.target.value);
                     } else {
-                      alert('Exceeded word limit');
+                      setAlertMessage('Exceeded word limit');
                     }
                   }}
                 />
diff --git a/apps/frontend/src/containers/FormRequests.tsx b/apps/frontend/src/containers/FormRequests.tsx
index 8d5b2246d..644394dd5 100644
--- a/apps/frontend/src/containers/FormRequests.tsx
+++ b/apps/frontend/src/containers/FormRequests.tsx
@@ -13,6 +13,7 @@ import {
   ButtonGroup,
   IconButton,
   Flex,
+  Alert,
 } from '@chakra-ui/react';
 import { ChevronRight, ChevronLeft } from 'lucide-react';
 import FoodRequestFormModal from '@components/forms/requestFormModal';
@@ -37,6 +38,8 @@ const FormRequests: React.FC = () => {
   const [openReadOnlyRequest, setOpenReadOnlyRequest] =
     useState<FoodRequest | null>(null);
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   const pageSize = 10;
 
   useEffect(() => {
@@ -53,7 +56,7 @@ const FormRequests: React.FC = () => {
             setPreviousRequest(sortedData[0]);
           }
         } catch (error) {
-          alert('Error fetching requests: ' + error);
+          setAlertMessage('Error fetching requests: ' + error);
         }
       }
     };
@@ -71,6 +74,26 @@ const FormRequests: React.FC = () => {
       <Text textStyle="h1" color="#515151">
         Food Request Management
       </Text>
+      {alertMessage && (
+                          <Alert.Root
+                            color='red'
+                            status="info"
+                            bg="white"
+                            variant="subtle"
+                            boxShadow="lg"
+                            position="absolute"
+                            zIndex="toast"
+                            top="12px"
+                            right="12px"
+                            w="fit-content"
+                            maxW="400px"
+                          >
+                            <Alert.Indicator />
+                            <Alert.Title textStyle="p2" fontWeight={500}>
+                              {alertMessage}
+                            </Alert.Title>
+                          </Alert.Root>
+                        )}
       <HStack gap={3} my={5}>
         <Button
           fontFamily="ibm"
diff --git a/apps/frontend/src/containers/adminDonation.tsx b/apps/frontend/src/containers/adminDonation.tsx
index c444803bb..9f9b8fc01 100644
--- a/apps/frontend/src/containers/adminDonation.tsx
+++ b/apps/frontend/src/containers/adminDonation.tsx
@@ -10,6 +10,7 @@ import {
   Checkbox,
   VStack,
   ButtonGroup,
+  Alert,
 } from '@chakra-ui/react';
 import { Donation } from 'types/types';
 import DonationDetailsModal from '@components/forms/donationDetailsModal';
@@ -28,13 +29,15 @@ const AdminDonation: React.FC = () => {
     null,
   );
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+  
   useEffect(() => {
     const fetchDonations = async () => {
       try {
         const data = await ApiClient.getAllDonations();
         setDonations(data);
       } catch (error) {
-        alert('Error fetching donations: ' + error);
+        setAlertMessage('Error fetching donations: ' + error);
       }
     };
     fetchDonations();
@@ -99,6 +102,26 @@ const AdminDonation: React.FC = () => {
       <Heading textStyle="h1" color="gray.600" mb={6}>
         Donation Management
       </Heading>
+      {alertMessage && (
+                    <Alert.Root
+                      color='red'
+                      status="info"
+                      bg="white"
+                      variant="subtle"
+                      boxShadow="lg"
+                      position="absolute"
+                      zIndex="toast"
+                      top="12px"
+                      right="12px"
+                      w="fit-content"
+                      maxW="400px"
+                    >
+                      <Alert.Indicator />
+                      <Alert.Title textStyle="p2" fontWeight={500}>
+                        {alertMessage}
+                      </Alert.Title>
+                    </Alert.Root>
+                  )}
       <Box display="flex" gap={2} mb={6} fontFamily="'Inter', sans-serif">
         <Box position="relative">
           <Button
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 60273c428..195d62ccc 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -10,6 +10,7 @@ import {
   ButtonGroup,
   Checkbox,
   Input,
+  Alert,
 } from '@chakra-ui/react';
 import {
   ArrowDownUp,
@@ -50,6 +51,8 @@ const AdminOrderManagement: React.FC = () => {
     },
   );
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   // State to hold filter state per status
   type FilterState = {
     selectedPantries: string[];
@@ -139,7 +142,7 @@ const AdminOrderManagement: React.FC = () => {
         };
         setCurrentPages(initialPages);
       } catch (error) {
-        alert('Error fetching orders: ' + error);
+        setAlertMessage('Error fetching orders: ' + error);
       }
     };
 
@@ -164,6 +167,27 @@ const AdminOrderManagement: React.FC = () => {
         Order Management
       </Heading>
 
+      {alertMessage && (
+                    <Alert.Root
+                      color='red'
+                      status="info"
+                      bg="white"
+                      variant="subtle"
+                      boxShadow="lg"
+                      position="absolute"
+                      zIndex="toast"
+                      top="12px"
+                      right="12px"
+                      w="fit-content"
+                      maxW="400px"
+                    >
+                      <Alert.Indicator />
+                      <Alert.Title textStyle="p2" fontWeight={500}>
+                        {alertMessage}
+                      </Alert.Title>
+                    </Alert.Root>
+                  )}
+
       {STATUS_ORDER.map((status) => {
         const allOrders = statusOrders[status] || [];
         const filterState = filterStates[status];

From 1e22db5802180fdc717566032b09047a7b274a76 Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Sun, 8 Feb 2026 20:49:32 -0500
Subject: [PATCH 2/5] changing positioning to fixed

---
 apps/frontend/src/components/forms/donationDetailsModal.tsx | 3 +--
 apps/frontend/src/components/forms/orderDetailsModal.tsx    | 2 +-
 apps/frontend/src/components/forms/requestFormModal.tsx     | 2 +-
 apps/frontend/src/containers/FormRequests.tsx               | 2 +-
 apps/frontend/src/containers/adminDonation.tsx              | 2 +-
 apps/frontend/src/containers/adminOrderManagement.tsx       | 2 +-
 6 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/apps/frontend/src/components/forms/donationDetailsModal.tsx b/apps/frontend/src/components/forms/donationDetailsModal.tsx
index 43ddfed39..ce1eec7fe 100644
--- a/apps/frontend/src/components/forms/donationDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/donationDetailsModal.tsx
@@ -42,7 +42,6 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
 
         setLoadedDonation(donationData);
         setItems(itemsData);
-        setAlertMessage('Error fetching donation details: ' + err);
       } catch (err) {
         setAlertMessage('Error fetching donation details: ' + err);
       }
@@ -76,7 +75,7 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
                 bg="white"
                 variant="subtle"
                 boxShadow="lg"
-                position="absolute"
+                position="fixed"
                 zIndex="toast"
                 top="12px"
                 right="12px"
diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index 8ddc8c571..e933fe0bd 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -61,7 +61,7 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
                 bg="white"
                 variant="subtle"
                 boxShadow="lg"
-                position="absolute"
+                position="fixed"
                 zIndex="toast"
                 top="12px"
                 right="12px"
diff --git a/apps/frontend/src/components/forms/requestFormModal.tsx b/apps/frontend/src/components/forms/requestFormModal.tsx
index 8cf0b538b..88347ed75 100644
--- a/apps/frontend/src/components/forms/requestFormModal.tsx
+++ b/apps/frontend/src/components/forms/requestFormModal.tsx
@@ -64,7 +64,7 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                 bg="white"
                 variant="subtle"
                 boxShadow="lg"
-                position="absolute"
+                position="fixed"
                 zIndex="toast"
                 top="12px"
                 right="12px"
diff --git a/apps/frontend/src/containers/FormRequests.tsx b/apps/frontend/src/containers/FormRequests.tsx
index 644394dd5..4bdb10955 100644
--- a/apps/frontend/src/containers/FormRequests.tsx
+++ b/apps/frontend/src/containers/FormRequests.tsx
@@ -81,7 +81,7 @@ const FormRequests: React.FC = () => {
                             bg="white"
                             variant="subtle"
                             boxShadow="lg"
-                            position="absolute"
+                            position="fixed"
                             zIndex="toast"
                             top="12px"
                             right="12px"
diff --git a/apps/frontend/src/containers/adminDonation.tsx b/apps/frontend/src/containers/adminDonation.tsx
index 9f9b8fc01..a55aecf21 100644
--- a/apps/frontend/src/containers/adminDonation.tsx
+++ b/apps/frontend/src/containers/adminDonation.tsx
@@ -109,7 +109,7 @@ const AdminDonation: React.FC = () => {
                       bg="white"
                       variant="subtle"
                       boxShadow="lg"
-                      position="absolute"
+                      position="fixed"
                       zIndex="toast"
                       top="12px"
                       right="12px"
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 195d62ccc..02af8410a 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -174,7 +174,7 @@ const AdminOrderManagement: React.FC = () => {
                       bg="white"
                       variant="subtle"
                       boxShadow="lg"
-                      position="absolute"
+                      position="fixed"
                       zIndex="toast"
                       top="12px"
                       right="12px"

From 28299f26c9a5b550d3179a4d2f452eab9483b2cf Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Sun, 8 Feb 2026 20:51:53 -0500
Subject: [PATCH 3/5] prettier

---
 .../components/forms/donationDetailsModal.tsx | 39 +++++++++---------
 .../components/forms/orderDetailsModal.tsx    | 38 +++++++++---------
 .../src/components/forms/requestFormModal.tsx | 38 +++++++++---------
 apps/frontend/src/containers/FormRequests.tsx | 38 +++++++++---------
 .../frontend/src/containers/adminDonation.tsx | 40 +++++++++----------
 .../src/containers/adminOrderManagement.tsx   | 38 +++++++++---------
 6 files changed, 115 insertions(+), 116 deletions(-)

diff --git a/apps/frontend/src/components/forms/donationDetailsModal.tsx b/apps/frontend/src/components/forms/donationDetailsModal.tsx
index ce1eec7fe..82e035110 100644
--- a/apps/frontend/src/components/forms/donationDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/donationDetailsModal.tsx
@@ -66,28 +66,27 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
       closeOnInteractOutside
       scrollBehavior="inside"
     >
-      
       <Portal>
         {alertMessage && (
-              <Alert.Root
-                color='red'
-                status="info"
-                bg="white"
-                variant="subtle"
-                boxShadow="lg"
-                position="fixed"
-                zIndex="toast"
-                top="12px"
-                right="12px"
-                w="fit-content"
-                maxW="400px"
-              >
-                <Alert.Indicator />
-                <Alert.Title textStyle="p2" fontWeight={500}>
-                  {alertMessage}
-                </Alert.Title>
-              </Alert.Root>
-            )}
+          <Alert.Root
+            color="red"
+            status="info"
+            bg="white"
+            variant="subtle"
+            boxShadow="lg"
+            position="fixed"
+            zIndex="toast"
+            top="12px"
+            right="12px"
+            w="fit-content"
+            maxW="400px"
+          >
+            <Alert.Indicator />
+            <Alert.Title textStyle="p2" fontWeight={500}>
+              {alertMessage}
+            </Alert.Title>
+          </Alert.Root>
+        )}
         <Dialog.Backdrop bg="blackAlpha.300" />
 
         <Dialog.Positioner>
diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index e933fe0bd..cadc8af45 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -55,25 +55,25 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
       closeOnInteractOutside
     >
       {alertMessage && (
-              <Alert.Root
-                color='red'
-                status="info"
-                bg="white"
-                variant="subtle"
-                boxShadow="lg"
-                position="fixed"
-                zIndex="toast"
-                top="12px"
-                right="12px"
-                w="fit-content"
-                maxW="400px"
-              >
-                <Alert.Indicator />
-                <Alert.Title textStyle="p2" fontWeight={500}>
-                  {alertMessage}
-                </Alert.Title>
-              </Alert.Root>
-            )}
+        <Alert.Root
+          color="red"
+          status="info"
+          bg="white"
+          variant="subtle"
+          boxShadow="lg"
+          position="fixed"
+          zIndex="toast"
+          top="12px"
+          right="12px"
+          w="fit-content"
+          maxW="400px"
+        >
+          <Alert.Indicator />
+          <Alert.Title textStyle="p2" fontWeight={500}>
+            {alertMessage}
+          </Alert.Title>
+        </Alert.Root>
+      )}
       <Dialog.Backdrop />
       <Dialog.Positioner>
         <Dialog.Content maxW={650}>
diff --git a/apps/frontend/src/components/forms/requestFormModal.tsx b/apps/frontend/src/components/forms/requestFormModal.tsx
index 88347ed75..bc9816ffb 100644
--- a/apps/frontend/src/components/forms/requestFormModal.tsx
+++ b/apps/frontend/src/components/forms/requestFormModal.tsx
@@ -58,25 +58,25 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
       closeOnInteractOutside
     >
       {alertMessage && (
-              <Alert.Root
-                color='red'
-                status="info"
-                bg="white"
-                variant="subtle"
-                boxShadow="lg"
-                position="fixed"
-                zIndex="toast"
-                top="12px"
-                right="12px"
-                w="fit-content"
-                maxW="400px"
-              >
-                <Alert.Indicator />
-                <Alert.Title textStyle="p2" fontWeight={500}>
-                  {alertMessage}
-                </Alert.Title>
-              </Alert.Root>
-            )}
+        <Alert.Root
+          color="red"
+          status="info"
+          bg="white"
+          variant="subtle"
+          boxShadow="lg"
+          position="fixed"
+          zIndex="toast"
+          top="12px"
+          right="12px"
+          w="fit-content"
+          maxW="400px"
+        >
+          <Alert.Indicator />
+          <Alert.Title textStyle="p2" fontWeight={500}>
+            {alertMessage}
+          </Alert.Title>
+        </Alert.Root>
+      )}
       <Dialog.Backdrop />
       <Dialog.Positioner>
         <Dialog.Content maxW={650}>
diff --git a/apps/frontend/src/containers/FormRequests.tsx b/apps/frontend/src/containers/FormRequests.tsx
index 4bdb10955..bb632709c 100644
--- a/apps/frontend/src/containers/FormRequests.tsx
+++ b/apps/frontend/src/containers/FormRequests.tsx
@@ -75,25 +75,25 @@ const FormRequests: React.FC = () => {
         Food Request Management
       </Text>
       {alertMessage && (
-                          <Alert.Root
-                            color='red'
-                            status="info"
-                            bg="white"
-                            variant="subtle"
-                            boxShadow="lg"
-                            position="fixed"
-                            zIndex="toast"
-                            top="12px"
-                            right="12px"
-                            w="fit-content"
-                            maxW="400px"
-                          >
-                            <Alert.Indicator />
-                            <Alert.Title textStyle="p2" fontWeight={500}>
-                              {alertMessage}
-                            </Alert.Title>
-                          </Alert.Root>
-                        )}
+        <Alert.Root
+          color="red"
+          status="info"
+          bg="white"
+          variant="subtle"
+          boxShadow="lg"
+          position="fixed"
+          zIndex="toast"
+          top="12px"
+          right="12px"
+          w="fit-content"
+          maxW="400px"
+        >
+          <Alert.Indicator />
+          <Alert.Title textStyle="p2" fontWeight={500}>
+            {alertMessage}
+          </Alert.Title>
+        </Alert.Root>
+      )}
       <HStack gap={3} my={5}>
         <Button
           fontFamily="ibm"
diff --git a/apps/frontend/src/containers/adminDonation.tsx b/apps/frontend/src/containers/adminDonation.tsx
index a55aecf21..ce0d06693 100644
--- a/apps/frontend/src/containers/adminDonation.tsx
+++ b/apps/frontend/src/containers/adminDonation.tsx
@@ -30,7 +30,7 @@ const AdminDonation: React.FC = () => {
   );
 
   const [alertMessage, setAlertMessage] = useState<string>('');
-  
+
   useEffect(() => {
     const fetchDonations = async () => {
       try {
@@ -103,25 +103,25 @@ const AdminDonation: React.FC = () => {
         Donation Management
       </Heading>
       {alertMessage && (
-                    <Alert.Root
-                      color='red'
-                      status="info"
-                      bg="white"
-                      variant="subtle"
-                      boxShadow="lg"
-                      position="fixed"
-                      zIndex="toast"
-                      top="12px"
-                      right="12px"
-                      w="fit-content"
-                      maxW="400px"
-                    >
-                      <Alert.Indicator />
-                      <Alert.Title textStyle="p2" fontWeight={500}>
-                        {alertMessage}
-                      </Alert.Title>
-                    </Alert.Root>
-                  )}
+        <Alert.Root
+          color="red"
+          status="info"
+          bg="white"
+          variant="subtle"
+          boxShadow="lg"
+          position="fixed"
+          zIndex="toast"
+          top="12px"
+          right="12px"
+          w="fit-content"
+          maxW="400px"
+        >
+          <Alert.Indicator />
+          <Alert.Title textStyle="p2" fontWeight={500}>
+            {alertMessage}
+          </Alert.Title>
+        </Alert.Root>
+      )}
       <Box display="flex" gap={2} mb={6} fontFamily="'Inter', sans-serif">
         <Box position="relative">
           <Button
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 02af8410a..5e19bf681 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -168,25 +168,25 @@ const AdminOrderManagement: React.FC = () => {
       </Heading>
 
       {alertMessage && (
-                    <Alert.Root
-                      color='red'
-                      status="info"
-                      bg="white"
-                      variant="subtle"
-                      boxShadow="lg"
-                      position="fixed"
-                      zIndex="toast"
-                      top="12px"
-                      right="12px"
-                      w="fit-content"
-                      maxW="400px"
-                    >
-                      <Alert.Indicator />
-                      <Alert.Title textStyle="p2" fontWeight={500}>
-                        {alertMessage}
-                      </Alert.Title>
-                    </Alert.Root>
-                  )}
+        <Alert.Root
+          color="red"
+          status="info"
+          bg="white"
+          variant="subtle"
+          boxShadow="lg"
+          position="fixed"
+          zIndex="toast"
+          top="12px"
+          right="12px"
+          w="fit-content"
+          maxW="400px"
+        >
+          <Alert.Indicator />
+          <Alert.Title textStyle="p2" fontWeight={500}>
+            {alertMessage}
+          </Alert.Title>
+        </Alert.Root>
+      )}
 
       {STATUS_ORDER.map((status) => {
         const allOrders = statusOrders[status] || [];

From 8fa41bc7862079439cafffacc704e551d1bdd253 Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Sun, 8 Feb 2026 21:30:41 -0500
Subject: [PATCH 4/5] abstracting floating alert to its own component

---
 .../frontend/src/components/floatingAlert.tsx | 56 +++++++++++++++++++
 .../components/forms/donationDetailsModal.tsx | 27 +++------
 .../components/forms/orderDetailsModal.tsx    | 27 +++------
 .../src/components/forms/requestFormModal.tsx | 25 ++-------
 apps/frontend/src/containers/FormRequests.tsx | 27 +++------
 .../frontend/src/containers/adminDonation.tsx | 27 +++------
 .../src/containers/adminOrderManagement.tsx   | 27 +++------
 7 files changed, 97 insertions(+), 119 deletions(-)
 create mode 100644 apps/frontend/src/components/floatingAlert.tsx

diff --git a/apps/frontend/src/components/floatingAlert.tsx b/apps/frontend/src/components/floatingAlert.tsx
new file mode 100644
index 000000000..d88ccde68
--- /dev/null
+++ b/apps/frontend/src/components/floatingAlert.tsx
@@ -0,0 +1,56 @@
+import { Alert } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+
+type FloatingAlertProps = {
+  message?: string | null;
+  status?: 'info' | 'error';
+  timeout?: number;
+};
+
+export function FloatingAlert({
+  message,
+  status,
+  timeout,
+}: FloatingAlertProps) {
+  const [visible, setVisible] = useState(!!message);
+
+  useEffect(() => {
+    if (!message) {
+      setVisible(false);
+      return;
+    }
+
+    setVisible(true);
+
+    if (!timeout) return;
+
+    const timer = setTimeout(() => {
+      setVisible(false);
+    }, timeout);
+
+    return () => clearTimeout(timer);
+  }, [message, timeout]);
+
+  if (!message || !visible) return null;
+
+  return (
+    <Alert.Root
+      color={status === "info" ? "neutral.800" : "red"}
+      status="info"
+      bg="white"
+      variant="subtle"
+      boxShadow="lg"
+      position="fixed"
+      zIndex="toast"
+      top="12px"
+      right="12px"
+      w="fit-content"
+      maxW="400px"
+    >
+      <Alert.Indicator />
+      <Alert.Title textStyle="p2" fontWeight={500}>
+        {message}
+      </Alert.Title>
+    </Alert.Root>
+  );
+}
\ No newline at end of file
diff --git a/apps/frontend/src/components/forms/donationDetailsModal.tsx b/apps/frontend/src/components/forms/donationDetailsModal.tsx
index 82e035110..2b7e15d09 100644
--- a/apps/frontend/src/components/forms/donationDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/donationDetailsModal.tsx
@@ -6,11 +6,11 @@ import {
   Dialog,
   Portal,
   CloseButton,
-  Alert,
 } from '@chakra-ui/react';
 import ApiClient from '@api/apiClient';
 import { Donation, DonationItem, FoodType } from 'types/types';
 import { formatDate } from '@utils/utils';
+import { FloatingAlert } from '@components/floatingAlert';
 
 interface DonationDetailsModalProps {
   donation?: Donation;
@@ -68,25 +68,12 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
     >
       <Portal>
         {alertMessage && (
-          <Alert.Root
-            color="red"
-            status="info"
-            bg="white"
-            variant="subtle"
-            boxShadow="lg"
-            position="fixed"
-            zIndex="toast"
-            top="12px"
-            right="12px"
-            w="fit-content"
-            maxW="400px"
-          >
-            <Alert.Indicator />
-            <Alert.Title textStyle="p2" fontWeight={500}>
-              {alertMessage}
-            </Alert.Title>
-          </Alert.Root>
-        )}
+                      <FloatingAlert
+                        message={alertMessage}
+                        status="error"
+                        timeout={6000}
+                      />
+                    )}
         <Dialog.Backdrop bg="blackAlpha.300" />
 
         <Dialog.Positioner>
diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index cadc8af45..6cb5f4a0a 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -7,11 +7,11 @@ import {
   Textarea,
   Field,
   Tag,
-  Alert,
 } from '@chakra-ui/react';
 import ApiClient from '@api/apiClient';
 import { FoodRequest, OrderSummary } from 'types/types';
 import { formatDate } from '@utils/utils';
+import { FloatingAlert } from '@components/floatingAlert';
 
 interface OrderDetailsModalProps {
   order: OrderSummary;
@@ -55,25 +55,12 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
       closeOnInteractOutside
     >
       {alertMessage && (
-        <Alert.Root
-          color="red"
-          status="info"
-          bg="white"
-          variant="subtle"
-          boxShadow="lg"
-          position="fixed"
-          zIndex="toast"
-          top="12px"
-          right="12px"
-          w="fit-content"
-          maxW="400px"
-        >
-          <Alert.Indicator />
-          <Alert.Title textStyle="p2" fontWeight={500}>
-            {alertMessage}
-          </Alert.Title>
-        </Alert.Root>
-      )}
+              <FloatingAlert
+                message={alertMessage}
+                status="error"
+                timeout={6000}
+              />
+            )}
       <Dialog.Backdrop />
       <Dialog.Positioner>
         <Dialog.Content maxW={650}>
diff --git a/apps/frontend/src/components/forms/requestFormModal.tsx b/apps/frontend/src/components/forms/requestFormModal.tsx
index bc9816ffb..352223f7b 100644
--- a/apps/frontend/src/components/forms/requestFormModal.tsx
+++ b/apps/frontend/src/components/forms/requestFormModal.tsx
@@ -10,11 +10,11 @@ import {
   Box,
   Field,
   CloseButton,
-  Alert,
 } from '@chakra-ui/react';
 import { Form, ActionFunction, ActionFunctionArgs } from 'react-router-dom';
 import { FoodRequest, FoodTypes, RequestSize } from '../../types/types';
 import { ChevronDownIcon } from 'lucide-react';
+import { FloatingAlert } from '@components/floatingAlert';
 
 interface FoodRequestFormModalProps {
   previousRequest?: FoodRequest;
@@ -58,24 +58,11 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
       closeOnInteractOutside
     >
       {alertMessage && (
-        <Alert.Root
-          color="red"
-          status="info"
-          bg="white"
-          variant="subtle"
-          boxShadow="lg"
-          position="fixed"
-          zIndex="toast"
-          top="12px"
-          right="12px"
-          w="fit-content"
-          maxW="400px"
-        >
-          <Alert.Indicator />
-          <Alert.Title textStyle="p2" fontWeight={500}>
-            {alertMessage}
-          </Alert.Title>
-        </Alert.Root>
+        <FloatingAlert
+          message={alertMessage}
+          status="error"
+          timeout={6000}
+        />
       )}
       <Dialog.Backdrop />
       <Dialog.Positioner>
diff --git a/apps/frontend/src/containers/FormRequests.tsx b/apps/frontend/src/containers/FormRequests.tsx
index bb632709c..d3e63ad8d 100644
--- a/apps/frontend/src/containers/FormRequests.tsx
+++ b/apps/frontend/src/containers/FormRequests.tsx
@@ -13,7 +13,6 @@ import {
   ButtonGroup,
   IconButton,
   Flex,
-  Alert,
 } from '@chakra-ui/react';
 import { ChevronRight, ChevronLeft } from 'lucide-react';
 import FoodRequestFormModal from '@components/forms/requestFormModal';
@@ -21,6 +20,7 @@ import { OrderStatus, FoodRequest } from '../types/types';
 import RequestDetailsModal from '@components/forms/requestDetailsModal';
 import { formatDate } from '@utils/utils';
 import ApiClient from '@api/apiClient';
+import { FloatingAlert } from '@components/floatingAlert';
 
 const FormRequests: React.FC = () => {
   const [currentPage, setCurrentPage] = useState<number>(1);
@@ -75,25 +75,12 @@ const FormRequests: React.FC = () => {
         Food Request Management
       </Text>
       {alertMessage && (
-        <Alert.Root
-          color="red"
-          status="info"
-          bg="white"
-          variant="subtle"
-          boxShadow="lg"
-          position="fixed"
-          zIndex="toast"
-          top="12px"
-          right="12px"
-          w="fit-content"
-          maxW="400px"
-        >
-          <Alert.Indicator />
-          <Alert.Title textStyle="p2" fontWeight={500}>
-            {alertMessage}
-          </Alert.Title>
-        </Alert.Root>
-      )}
+                    <FloatingAlert
+                      message={alertMessage}
+                      status="error"
+                      timeout={6000}
+                    />
+                  )}
       <HStack gap={3} my={5}>
         <Button
           fontFamily="ibm"
diff --git a/apps/frontend/src/containers/adminDonation.tsx b/apps/frontend/src/containers/adminDonation.tsx
index ce0d06693..5b882b815 100644
--- a/apps/frontend/src/containers/adminDonation.tsx
+++ b/apps/frontend/src/containers/adminDonation.tsx
@@ -10,12 +10,12 @@ import {
   Checkbox,
   VStack,
   ButtonGroup,
-  Alert,
 } from '@chakra-ui/react';
 import { Donation } from 'types/types';
 import DonationDetailsModal from '@components/forms/donationDetailsModal';
 import ApiClient from '@api/apiClient';
 import { formatDate } from '@utils/utils';
+import { FloatingAlert } from '@components/floatingAlert';
 
 const AdminDonation: React.FC = () => {
   const [donations, setDonations] = useState<Donation[]>([]);
@@ -103,25 +103,12 @@ const AdminDonation: React.FC = () => {
         Donation Management
       </Heading>
       {alertMessage && (
-        <Alert.Root
-          color="red"
-          status="info"
-          bg="white"
-          variant="subtle"
-          boxShadow="lg"
-          position="fixed"
-          zIndex="toast"
-          top="12px"
-          right="12px"
-          w="fit-content"
-          maxW="400px"
-        >
-          <Alert.Indicator />
-          <Alert.Title textStyle="p2" fontWeight={500}>
-            {alertMessage}
-          </Alert.Title>
-        </Alert.Root>
-      )}
+                    <FloatingAlert
+                      message={alertMessage}
+                      status="error"
+                      timeout={6000}
+                    />
+                  )}
       <Box display="flex" gap={2} mb={6} fontFamily="'Inter', sans-serif">
         <Box position="relative">
           <Button
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 5e19bf681..508f7332f 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -10,7 +10,6 @@ import {
   ButtonGroup,
   Checkbox,
   Input,
-  Alert,
 } from '@chakra-ui/react';
 import {
   ArrowDownUp,
@@ -25,6 +24,7 @@ import { capitalize, formatDate } from '@utils/utils';
 import ApiClient from '@api/apiClient';
 import { OrderStatus, OrderSummary } from '../types/types';
 import OrderDetailsModal from '@components/forms/orderDetailsModal';
+import { FloatingAlert } from '@components/floatingAlert';
 
 // Extending the OrderSummary type to include assignee color for display
 type OrderWithColor = OrderSummary & { assigneeColor?: string };
@@ -168,25 +168,12 @@ const AdminOrderManagement: React.FC = () => {
       </Heading>
 
       {alertMessage && (
-        <Alert.Root
-          color="red"
-          status="info"
-          bg="white"
-          variant="subtle"
-          boxShadow="lg"
-          position="fixed"
-          zIndex="toast"
-          top="12px"
-          right="12px"
-          w="fit-content"
-          maxW="400px"
-        >
-          <Alert.Indicator />
-          <Alert.Title textStyle="p2" fontWeight={500}>
-            {alertMessage}
-          </Alert.Title>
-        </Alert.Root>
-      )}
+                    <FloatingAlert
+                      message={alertMessage}
+                      status="error"
+                      timeout={6000}
+                    />
+                  )}
 
       {STATUS_ORDER.map((status) => {
         const allOrders = statusOrders[status] || [];

From b223b60cd7859ca7d5939ff7504c19cf0faa4079 Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Sun, 8 Feb 2026 21:33:02 -0500
Subject: [PATCH 5/5] prettier

---
 apps/frontend/src/components/floatingAlert.tsx            | 4 ++--
 .../src/components/forms/donationDetailsModal.tsx         | 8 ++------
 apps/frontend/src/components/forms/orderDetailsModal.tsx  | 8 ++------
 apps/frontend/src/components/forms/requestFormModal.tsx   | 6 +-----
 apps/frontend/src/containers/FormRequests.tsx             | 8 ++------
 apps/frontend/src/containers/adminDonation.tsx            | 8 ++------
 apps/frontend/src/containers/adminOrderManagement.tsx     | 8 ++------
 7 files changed, 13 insertions(+), 37 deletions(-)

diff --git a/apps/frontend/src/components/floatingAlert.tsx b/apps/frontend/src/components/floatingAlert.tsx
index d88ccde68..b6f6a7557 100644
--- a/apps/frontend/src/components/floatingAlert.tsx
+++ b/apps/frontend/src/components/floatingAlert.tsx
@@ -35,7 +35,7 @@ export function FloatingAlert({
 
   return (
     <Alert.Root
-      color={status === "info" ? "neutral.800" : "red"}
+      color={status === 'info' ? 'neutral.800' : 'red'}
       status="info"
       bg="white"
       variant="subtle"
@@ -53,4 +53,4 @@ export function FloatingAlert({
       </Alert.Title>
     </Alert.Root>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/frontend/src/components/forms/donationDetailsModal.tsx b/apps/frontend/src/components/forms/donationDetailsModal.tsx
index 2b7e15d09..5689ea605 100644
--- a/apps/frontend/src/components/forms/donationDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/donationDetailsModal.tsx
@@ -68,12 +68,8 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
     >
       <Portal>
         {alertMessage && (
-                      <FloatingAlert
-                        message={alertMessage}
-                        status="error"
-                        timeout={6000}
-                      />
-                    )}
+          <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+        )}
         <Dialog.Backdrop bg="blackAlpha.300" />
 
         <Dialog.Positioner>
diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index 6cb5f4a0a..932196b59 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -55,12 +55,8 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
       closeOnInteractOutside
     >
       {alertMessage && (
-              <FloatingAlert
-                message={alertMessage}
-                status="error"
-                timeout={6000}
-              />
-            )}
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
       <Dialog.Backdrop />
       <Dialog.Positioner>
         <Dialog.Content maxW={650}>
diff --git a/apps/frontend/src/components/forms/requestFormModal.tsx b/apps/frontend/src/components/forms/requestFormModal.tsx
index 352223f7b..21278c3a9 100644
--- a/apps/frontend/src/components/forms/requestFormModal.tsx
+++ b/apps/frontend/src/components/forms/requestFormModal.tsx
@@ -58,11 +58,7 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
       closeOnInteractOutside
     >
       {alertMessage && (
-        <FloatingAlert
-          message={alertMessage}
-          status="error"
-          timeout={6000}
-        />
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
       )}
       <Dialog.Backdrop />
       <Dialog.Positioner>
diff --git a/apps/frontend/src/containers/FormRequests.tsx b/apps/frontend/src/containers/FormRequests.tsx
index d3e63ad8d..79da4dc46 100644
--- a/apps/frontend/src/containers/FormRequests.tsx
+++ b/apps/frontend/src/containers/FormRequests.tsx
@@ -75,12 +75,8 @@ const FormRequests: React.FC = () => {
         Food Request Management
       </Text>
       {alertMessage && (
-                    <FloatingAlert
-                      message={alertMessage}
-                      status="error"
-                      timeout={6000}
-                    />
-                  )}
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
       <HStack gap={3} my={5}>
         <Button
           fontFamily="ibm"
diff --git a/apps/frontend/src/containers/adminDonation.tsx b/apps/frontend/src/containers/adminDonation.tsx
index 5b882b815..9c9a761f3 100644
--- a/apps/frontend/src/containers/adminDonation.tsx
+++ b/apps/frontend/src/containers/adminDonation.tsx
@@ -103,12 +103,8 @@ const AdminDonation: React.FC = () => {
         Donation Management
       </Heading>
       {alertMessage && (
-                    <FloatingAlert
-                      message={alertMessage}
-                      status="error"
-                      timeout={6000}
-                    />
-                  )}
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
       <Box display="flex" gap={2} mb={6} fontFamily="'Inter', sans-serif">
         <Box position="relative">
           <Button
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 508f7332f..645a62a74 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -168,12 +168,8 @@ const AdminOrderManagement: React.FC = () => {
       </Heading>
 
       {alertMessage && (
-                    <FloatingAlert
-                      message={alertMessage}
-                      status="error"
-                      timeout={6000}
-                    />
-                  )}
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
 
       {STATUS_ORDER.map((status) => {
         const allOrders = statusOrders[status] || [];