From 917cd987943d2a32d1c1e49591306f12d6e4d883 Mon Sep 17 00:00:00 2001
From: Heidi Jiang <hdyjiang@gmail.com>
Date: Sun, 26 Jul 2026 21:45:30 -0400
Subject: [PATCH 1/3] focus trap errors for view order details

---
 .../src/containers/adminOrderManagement.tsx    | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 21ddc3815..25940eaea 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -307,16 +307,14 @@ const AdminOrderManagement: React.FC = () => {
         );
       })}
 
-      {selectedOrderId && (
-        <OrderDetailsModal
-          orderId={selectedOrderId}
-          isOpen={true}
-          onClose={() => {
-            setSelectedOrderId(null);
-            navigate(ROUTES.ADMIN_ORDER_MANAGEMENT, { replace: true });
-          }}
-        />
-      )}
+      <OrderDetailsModal
+        orderId={selectedOrderId}
+        isOpen={selectedOrderId !== null}
+        onClose={() => {
+          setSelectedOrderId(null);
+          navigate(ROUTES.ADMIN_ORDER_MANAGEMENT, { replace: true });
+        }}
+      />
     </Box>
   );
 };

From b23d604c92e1813bd11951117fe0c86d73a31bf6 Mon Sep 17 00:00:00 2001
From: Heidi Jiang <hdyjiang@gmail.com>
Date: Sun, 26 Jul 2026 21:55:01 -0400
Subject: [PATCH 2/3] focus trap errors for view donation details

---
 .../components/forms/donationDetailsModal.tsx | 240 +++++++++---------
 .../frontend/src/containers/adminDonation.tsx |  22 +-
 2 files changed, 133 insertions(+), 129 deletions(-)

diff --git a/apps/frontend/src/components/forms/donationDetailsModal.tsx b/apps/frontend/src/components/forms/donationDetailsModal.tsx
index 2561db55a..531883774 100644
--- a/apps/frontend/src/components/forms/donationDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/donationDetailsModal.tsx
@@ -27,7 +27,7 @@ import EditableDonationItemsTable, {
 } from './editableDonationItemsTable';
 
 interface DonationDetailsModalProps {
-  donation: Donation;
+  donation: Donation | null;
   isOpen: boolean;
   onClose: () => void;
   onSuccess: () => void;
@@ -48,13 +48,14 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
 
   const [isEditing, setIsEditing] = useState(false);
 
-  const donationId = donation.donationId;
+  const donationId = donation?.donationId;
 
   const handleCancel = () => {
     setIsEditing(false);
   };
 
   const loadItems = useCallback(async () => {
+    if (donationId == null) return;
     try {
       const itemsData = await ApiClient.getDonationItemsByDonationId(
         donationId,
@@ -66,6 +67,7 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
   }, [donationId, setAlertMessage]);
 
   const handleUpdate = async (rows: DonationRow[]) => {
+    if (donationId == null) return;
     const existingIds = new Set(items.map((i) => i.itemId));
     const body: ReplaceDonationItemDto[] = rows.map((r) => ({
       ...(existingIds.has(r.id) ? { itemId: r.id } : {}),
@@ -122,128 +124,132 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
       )}
       <Dialog.Backdrop bg="blackAlpha.300" />
 
-      <Dialog.Positioner>
-        <Dialog.Content
-          maxW={isEditing ? '75vw' : 'lg'}
-          maxH={isEditing ? '90vh' : undefined}
-        >
-          <Dialog.CloseTrigger asChild>
-            <CloseButton />
-          </Dialog.CloseTrigger>
-
-          <Dialog.Header>
-            <VStack align="stretch" gap={0}>
-              <HStack mb={2}>
-                <Dialog.Title fontSize="lg" fontWeight="600">
-                  Donation #{donationId} Stock
-                </Dialog.Title>
-                {donation.status === DonationStatus.AVAILABLE && (
-                  <>
-                    <EditButton onClick={() => setIsEditing(true)}></EditButton>
-                    <DeleteButton onClick={onDelete}></DeleteButton>
-                  </>
-                )}
-              </HStack>
-              <Text fontSize="sm">
-                {donation.foodManufacturer?.foodManufacturerName}
-              </Text>
-              <Text fontSize="sm">{formatDate(donation.dateDonated)}</Text>
-            </VStack>
-          </Dialog.Header>
-
-          <Dialog.Body>
-            {isEditing ? (
-              <EditableDonationItemsTable
-                initialRows={items.map((item) => ({
-                  id: item.itemId,
-                  foodItem: item.itemName,
-                  foodType: item.foodType,
-                  numItems: String(item.quantity),
-                  ozPerItem: String(item.ozPerItem),
-                  valuePerItem: String(item.estimatedValue),
-                  foodRescue: item.foodRescue,
-                }))}
-                onCancel={handleCancel}
-                onSubmit={handleUpdate}
-                submitButtonLabel="Update Donation"
-              ></EditableDonationItemsTable>
-            ) : (
-              <VStack align="stretch" gap={4} my={2}>
-                {Object.entries(groupedItems).map(([foodType, typeItems]) => (
-                  <Box key={foodType}>
-                    <Text
-                      fontSize="sm"
-                      fontWeight="600"
-                      color="neutral.800"
-                      mb={2}
-                    >
-                      {foodType}
-                    </Text>
-
-                    <VStack align="stretch" gap={2}>
-                      {typeItems.map((item, _) => (
-                        <Box
-                          key={item.itemId}
-                          display="flex"
-                          p={0}
-                          border="1px solid"
-                          borderColor="neutral.100"
-                          borderRadius="md"
-                          overflow="hidden"
-                          color="neutral.800"
-                          fontSize="sm"
-                        >
-                          <Box flex={1} p={3} bg="white">
-                            <Text>{item.itemName}</Text>
-                          </Box>
+      {donation !== null && (
+        <Dialog.Positioner>
+          <Dialog.Content
+            maxW={isEditing ? '75vw' : 'lg'}
+            maxH={isEditing ? '90vh' : undefined}
+          >
+            <Dialog.CloseTrigger asChild>
+              <CloseButton />
+            </Dialog.CloseTrigger>
+
+            <Dialog.Header>
+              <VStack align="stretch" gap={0}>
+                <HStack mb={2}>
+                  <Dialog.Title fontSize="lg" fontWeight="600">
+                    Donation #{donationId} Stock
+                  </Dialog.Title>
+                  {donation.status === DonationStatus.AVAILABLE && (
+                    <>
+                      <EditButton
+                        onClick={() => setIsEditing(true)}
+                      ></EditButton>
+                      <DeleteButton onClick={onDelete}></DeleteButton>
+                    </>
+                  )}
+                </HStack>
+                <Text fontSize="sm">
+                  {donation.foodManufacturer?.foodManufacturerName}
+                </Text>
+                <Text fontSize="sm">{formatDate(donation.dateDonated)}</Text>
+              </VStack>
+            </Dialog.Header>
 
+            <Dialog.Body>
+              {isEditing ? (
+                <EditableDonationItemsTable
+                  initialRows={items.map((item) => ({
+                    id: item.itemId,
+                    foodItem: item.itemName,
+                    foodType: item.foodType,
+                    numItems: String(item.quantity),
+                    ozPerItem: String(item.ozPerItem),
+                    valuePerItem: String(item.estimatedValue),
+                    foodRescue: item.foodRescue,
+                  }))}
+                  onCancel={handleCancel}
+                  onSubmit={handleUpdate}
+                  submitButtonLabel="Update Donation"
+                ></EditableDonationItemsTable>
+              ) : (
+                <VStack align="stretch" gap={4} my={2}>
+                  {Object.entries(groupedItems).map(([foodType, typeItems]) => (
+                    <Box key={foodType}>
+                      <Text
+                        fontSize="sm"
+                        fontWeight="600"
+                        color="neutral.800"
+                        mb={2}
+                      >
+                        {foodType}
+                      </Text>
+
+                      <VStack align="stretch" gap={2}>
+                        {typeItems.map((item, _) => (
                           <Box
-                            borderLeft="1px solid"
-                            borderColor="neutral.100"
-                            p={3}
-                            width="35%"
+                            key={item.itemId}
                             display="flex"
-                            alignItems="center"
-                            justifyContent="center"
-                            bg="white"
+                            p={0}
+                            border="1px solid"
+                            borderColor="neutral.100"
+                            borderRadius="md"
+                            overflow="hidden"
+                            color="neutral.800"
+                            fontSize="sm"
                           >
-                            <Text>
-                              {item.quantity - item.reservedQuantity} of{' '}
-                              {item.quantity} Remaining
-                            </Text>
+                            <Box flex={1} p={3} bg="white">
+                              <Text>{item.itemName}</Text>
+                            </Box>
+
+                            <Box
+                              borderLeft="1px solid"
+                              borderColor="neutral.100"
+                              p={3}
+                              width="35%"
+                              display="flex"
+                              alignItems="center"
+                              justifyContent="center"
+                              bg="white"
+                            >
+                              <Text>
+                                {item.quantity - item.reservedQuantity} of{' '}
+                                {item.quantity} Remaining
+                              </Text>
+                            </Box>
                           </Box>
-                        </Box>
-                      ))}
-                    </VStack>
-                  </Box>
-                ))}
-              </VStack>
-            )}
+                        ))}
+                      </VStack>
+                    </Box>
+                  ))}
+                </VStack>
+              )}
 
-            {!isEditing && donation.recurrence !== RecurrenceEnum.NONE && (
-              <Box mt={6} color="neutral.800" fontSize="sm">
-                <Text fontWeight={600} mb={3}>
-                  Donation sets up recurring reminders
-                </Text>
+              {!isEditing && donation.recurrence !== RecurrenceEnum.NONE && (
+                <Box mt={6} color="neutral.800" fontSize="sm">
+                  <Text fontWeight={600} mb={3}>
+                    Donation sets up recurring reminders
+                  </Text>
 
-                {donation.nextDonationDates &&
-                  donation.nextDonationDates.length > 0 && (
-                    <Box>
-                      <Text fontWeight={600} color="neutral.700" mb={2}>
-                        Upcoming reminder emails
-                      </Text>
-                      <Text color="neutral.700">
-                        {donation.nextDonationDates
-                          .map((date) => formatDate(date))
-                          .join(', ')}
-                      </Text>
-                    </Box>
-                  )}
-              </Box>
-            )}
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Positioner>
+                  {donation.nextDonationDates &&
+                    donation.nextDonationDates.length > 0 && (
+                      <Box>
+                        <Text fontWeight={600} color="neutral.700" mb={2}>
+                          Upcoming reminder emails
+                        </Text>
+                        <Text color="neutral.700">
+                          {donation.nextDonationDates
+                            .map((date) => formatDate(date))
+                            .join(', ')}
+                        </Text>
+                      </Box>
+                    )}
+                </Box>
+              )}
+            </Dialog.Body>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      )}
     </Dialog.Root>
   );
 };
diff --git a/apps/frontend/src/containers/adminDonation.tsx b/apps/frontend/src/containers/adminDonation.tsx
index f1f488676..f1469c10e 100644
--- a/apps/frontend/src/containers/adminDonation.tsx
+++ b/apps/frontend/src/containers/adminDonation.tsx
@@ -341,18 +341,16 @@ const AdminDonation: React.FC = () => {
         }}
       />
 
-      {selectedDonation && (
-        <DonationDetailsModal
-          donation={selectedDonation}
-          isOpen={selectedDonation !== null}
-          onClose={() => {
-            setSelectedDonation(null);
-            navigate(ROUTES.ADMIN_DONATION, { replace: true });
-          }}
-          onSuccess={() => fetchDonations()}
-          onDelete={() => setDeleteDonation(selectedDonation)}
-        />
-      )}
+      <DonationDetailsModal
+        donation={selectedDonation}
+        isOpen={selectedDonation !== null}
+        onClose={() => {
+          setSelectedDonation(null);
+          navigate(ROUTES.ADMIN_DONATION, { replace: true });
+        }}
+        onSuccess={() => fetchDonations()}
+        onDelete={() => setDeleteDonation(selectedDonation)}
+      />
 
       {totalPages > 1 && (
         <Pagination.Root

From 88727b5c1361f63035434a6710d243cdfb4fb3a0 Mon Sep 17 00:00:00 2001
From: Heidi Jiang <hdyjiang@gmail.com>
Date: Sun, 26 Jul 2026 21:59:55 -0400
Subject: [PATCH 3/3] re-fetch users after adding a new user

---
 apps/frontend/src/containers/userManagement.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/frontend/src/containers/userManagement.tsx b/apps/frontend/src/containers/userManagement.tsx
index 183ced43a..104df7eac 100644
--- a/apps/frontend/src/containers/userManagement.tsx
+++ b/apps/frontend/src/containers/userManagement.tsx
@@ -172,6 +172,7 @@ const VolunteerManagement: React.FC = () => {
             <NewVolunteerModal
               onSubmitSuccess={() => {
                 setAlertMessage('User added.', AlertStatus.INFO);
+                fetchVolunteers();
               }}
               onSubmitFail={() => {
                 setAlertMessage('User could not be added.', AlertStatus.ERROR);