From 1a7e2edda65d467100b093b1e373cd5d3e7c0ac9 Mon Sep 17 00:00:00 2001
From: Heidi Jiang <hdyjiang@gmail.com>
Date: Sat, 30 May 2026 23:50:34 -0700
Subject: [PATCH 1/5] added edit/delete buttons + edit view/delete modal +
 connected to backend

---
 apps/frontend/src/api/apiClient.ts            |  12 +
 .../src/components/foodRequestManagement.tsx  |   1 +
 .../forms/pantryDeleteRequestModal.tsx        | 133 ++++
 .../components/forms/requestDetailsModal.tsx  | 730 ++++++++++++------
 apps/frontend/src/containers/formRequests.tsx |   1 +
 apps/frontend/src/types/types.ts              |   6 +
 6 files changed, 665 insertions(+), 218 deletions(-)
 create mode 100644 apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx

diff --git a/apps/frontend/src/api/apiClient.ts b/apps/frontend/src/api/apiClient.ts
index ff731e2e2..042fe3c96 100644
--- a/apps/frontend/src/api/apiClient.ts
+++ b/apps/frontend/src/api/apiClient.ts
@@ -44,6 +44,7 @@ import {
   BulkUpdateTrackingCostDto,
   UpdateDonationItemDetailsDto,
   PendingApplication,
+  UpdateFoodRequestBody,
 } from 'types/types';
 
 const defaultBaseUrl =
@@ -104,6 +105,17 @@ export class ApiClient {
       .then((response) => response.data);
   }
 
+  public async updateFoodRequest(
+    requestId: number,
+    body: UpdateFoodRequestBody,
+  ): Promise<void> {
+    await this.axiosInstance.patch(`/api/requests/${requestId}`, body);
+  }
+
+  public async deleteFoodRequest(requestId: number): Promise<void> {
+    await this.axiosInstance.delete(`/api/requests/${requestId}`);
+  }
+
   public async closeFoodRequest(requestId: number): Promise<void> {
     await this.axiosInstance.patch(`/api/requests/${requestId}/close`, {});
   }
diff --git a/apps/frontend/src/components/foodRequestManagement.tsx b/apps/frontend/src/components/foodRequestManagement.tsx
index 1db69e7df..0b6091f16 100644
--- a/apps/frontend/src/components/foodRequestManagement.tsx
+++ b/apps/frontend/src/components/foodRequestManagement.tsx
@@ -392,6 +392,7 @@ const RequestManagement: React.FC<RequestManagementProps> = ({
                   navigate(location.pathname, { replace: true });
                 }
               }}
+              onSuccess={loadRequests}
             />
           )}
 
diff --git a/apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx b/apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx
new file mode 100644
index 000000000..9c8c431e7
--- /dev/null
+++ b/apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx
@@ -0,0 +1,133 @@
+import React from 'react';
+import {
+  Box,
+  Button,
+  VStack,
+  CloseButton,
+  Text,
+  Flex,
+  Dialog,
+} from '@chakra-ui/react';
+import { FoodRequestSummaryDto } from 'types/types';
+import { formatDate } from '@utils/utils';
+import apiClient from '@api/apiClient';
+import { useAlert } from '../../hooks/alert';
+import { FloatingAlert } from '@components/floatingAlert';
+import { useModalBodyCleanup } from '../../hooks/modalBodyCleanup';
+
+interface DeleteRequestActionModalProps {
+  request: FoodRequestSummaryDto;
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+const PantryDeleteRequestActionModal: React.FC<
+  DeleteRequestActionModalProps
+> = ({ request, isOpen, onClose, onSuccess }) => {
+  useModalBodyCleanup();
+  const [alertState, setAlertMessage] = useAlert();
+
+  const onCloseRequest = async () => {
+    try {
+      await apiClient.deleteFoodRequest(request.requestId);
+      onClose();
+      onSuccess();
+    } catch {
+      setAlertMessage('Error completing action. Please try again.');
+    }
+  };
+
+  const cancelButton = (
+    <Button
+      textStyle="p2"
+      fontWeight={600}
+      color="neutral.800"
+      variant="outline"
+      width={16}
+      flexShrink={0}
+      textAlign="center"
+      lineHeight="28px"
+      onClick={onClose}
+    >
+      Cancel
+    </Button>
+  );
+
+  const deleteButton = (
+    <Button
+      textStyle="p2"
+      fontWeight={600}
+      bg={'red'}
+      color={'white'}
+      width="92px"
+      flexShrink={0}
+      textAlign="center"
+      lineHeight="28px"
+      onClick={onCloseRequest}
+    >
+      Delete
+    </Button>
+  );
+
+  return (
+    <Dialog.Root
+      open={isOpen}
+      size="md"
+      onOpenChange={(e: { open: boolean }) => {
+        if (!e.open) onClose();
+      }}
+      closeOnInteractOutside
+    >
+      {alertState && (
+        <FloatingAlert
+          key={alertState.id}
+          message={alertState.message}
+          status="error"
+          timeout={6000}
+        />
+      )}
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content>
+          <Dialog.CloseTrigger asChild>
+            <CloseButton size="lg" />
+          </Dialog.CloseTrigger>
+
+          <Dialog.Header pb={0}>
+            <Dialog.Title fontSize="18px" fontFamily="inter" fontWeight={600}>
+              Confirm Action
+            </Dialog.Title>
+          </Dialog.Header>
+          <Dialog.Body pb={6}>
+            <VStack align="stretch" gap={4}>
+              <Text textStyle="p2" color="gray.dark">
+                Are you sure you want to delete this food request? This action
+                cannot be undone.
+              </Text>
+              <Box
+                borderWidth={1}
+                p={6}
+                borderColor={'neutral.100'}
+                borderRadius={5}
+              >
+                <Text textStyle="p2" color="gray.dark">
+                  Request #{request.requestId}
+                </Text>
+                <Text color="neutral.600" textStyle="p2" fontSize={'12'}>
+                  Submitted {formatDate(request.requestedAt)}
+                </Text>
+              </Box>
+              <Flex justifyContent="flex-end" gap={2.5}>
+                {cancelButton}
+                {deleteButton}
+              </Flex>
+            </VStack>
+          </Dialog.Body>
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Dialog.Root>
+  );
+};
+
+export default PantryDeleteRequestActionModal;
diff --git a/apps/frontend/src/components/forms/requestDetailsModal.tsx b/apps/frontend/src/components/forms/requestDetailsModal.tsx
index 23c4e9e80..aea9dbae6 100644
--- a/apps/frontend/src/components/forms/requestDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/requestDetailsModal.tsx
@@ -3,8 +3,9 @@ import {
   OrderItemDetailsGroupedByFoodType,
   OrderDetails,
   FoodRequestSummaryDto,
+  UpdateFoodRequestBody,
 } from 'types/types';
-import { OrderStatus } from '../../types/types';
+import { OrderStatus, RequestSize, FoodType } from '../../types/types';
 import { ORDER_STATUS_LABELS } from '@utils/utils';
 import React, { useState, useEffect } from 'react';
 import {
@@ -20,30 +21,48 @@ import {
   Pagination,
   ButtonGroup,
   IconButton,
+  HStack,
+  Button,
+  Textarea,
 } from '@chakra-ui/react';
-import { ChevronRight, ChevronLeft } from 'lucide-react';
+import {
+  ChevronRight,
+  ChevronLeft,
+  Pencil,
+  Trash2,
+  ChevronDownIcon,
+} from 'lucide-react';
 import { TagGroup } from './tagGroup';
 import { useGroupedItemsByFoodType } from '../../hooks/groupedItemsByFoodType';
 import { useModalBodyCleanup } from '../../hooks/modalBodyCleanup';
+import PantryDeleteRequestActionModal from './pantryDeleteRequestModal';
 
 interface RequestDetailsModalProps {
   request: FoodRequestSummaryDto;
   isOpen: boolean;
   onClose: () => void;
+  onSuccess: () => void;
 }
 
 const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
   request,
   isOpen,
   onClose,
+  onSuccess,
 }) => {
   useModalBodyCleanup();
   const [orderDetailsList, setOrderDetailsList] = useState<OrderDetails[]>([]);
   const [currentPage, setCurrentPage] = useState<number>(1);
 
-  const requestedSize = request.requestedSize;
-  const selectedFoodTypes = request.requestedFoodTypes;
-  const additionalNotes = request.additionalInformation;
+  const [requestedSize, setRequestedSize] = useState<RequestSize>(
+    request.requestedSize,
+  );
+  const [selectedFoodTypes, setSelectedFoodTypes] = useState<FoodType[]>(
+    request.requestedFoodTypes,
+  );
+  const [additionalNotes, setAdditionalNotes] = useState<string>(
+    request.additionalInformation ?? '',
+  );
 
   useEffect(() => {
     const fetchRequestOrderDetails = async () => {
@@ -88,240 +107,515 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
     fontWeight: '500',
   };
 
-  return (
-    <Dialog.Root
-      open={isOpen}
-      size="xl"
-      onOpenChange={(e: { open: boolean }) => {
-        if (!e.open) onClose();
-      }}
-      closeOnInteractOutside
+  const [isEditing, setIsEditing] = useState(false);
+  const [selectedDeleteRequestAction, setSelectedDeleteRequestAction] =
+    useState(false);
+
+  const handleCancel = () => {
+    setRequestedSize(request.requestedSize);
+    setSelectedFoodTypes(request.requestedFoodTypes);
+    setAdditionalNotes(request.additionalInformation ?? '');
+    setIsEditing(false);
+  };
+
+  const handleUpdate = async () => {
+    const changed: UpdateFoodRequestBody = {};
+    if (requestedSize !== request.requestedSize)
+      changed.requestedSize = requestedSize;
+    const foodTypesChanged =
+      selectedFoodTypes.length !== request.requestedFoodTypes.length ||
+      !selectedFoodTypes.every((t) => request.requestedFoodTypes.includes(t));
+    if (foodTypesChanged) changed.requestedFoodTypes = selectedFoodTypes;
+    if (additionalNotes !== (request.additionalInformation ?? ''))
+      changed.additionalInformation = additionalNotes;
+
+    await apiClient.updateFoodRequest(request.requestId, changed);
+    onSuccess();
+    setIsEditing(false);
+  };
+
+  const editButton = (
+    <HStack
+      height={6}
+      minWidth={6}
+      padding={0.5}
+      justify="center"
+      align="center"
+      gap={1}
+      borderRadius="sm"
+      background="#F4F4F5"
+      cursor="pointer"
+      _hover={{ background: 'neutral.100' }}
+      onClick={() => setIsEditing(true)}
     >
-      <Dialog.Backdrop />
-      <Dialog.Positioner>
-        <Dialog.Content maxW={650}>
-          <Dialog.Header pb={0} mt={2}>
-            <Dialog.Title fontSize="lg" fontWeight={600} fontFamily="inter">
-              Food Request #{request.requestId}
-            </Dialog.Title>
-          </Dialog.Header>
-          <Dialog.Body>
-            <Text textStyle="p2" color="gray.dark">
-              {pantryName}
-            </Text>
+      <Pencil size={14} color={'#27272A'} />
+    </HStack>
+  );
 
-            <Tabs.Root unstyled mt={5} fitted defaultValue="requestDetails">
-              <Tabs.List maxW="60%">
-                <Tabs.Trigger
-                  textStyle="p2"
-                  px={4}
-                  py={1}
-                  color="neutral.800"
-                  value="requestDetails"
-                  borderBottom="1.5px solid"
-                  borderColor="neutral.100"
-                  _selected={{ borderColor: 'neutral.700' }}
-                >
-                  Request Details
-                </Tabs.Trigger>
-                <Tabs.Trigger
-                  textStyle="p2"
-                  px={4}
-                  py={1}
-                  color="neutral.800"
-                  value="associatedOrders"
-                  borderBottom="1.5px solid"
-                  borderColor="neutral.100"
-                  _selected={{ borderColor: 'neutral.700' }}
-                >
-                  Associated Orders
-                </Tabs.Trigger>
-              </Tabs.List>
-              <Tabs.Content value="requestDetails">
-                <Field.Root mb={4} mt={6}>
-                  <Field.Label>
-                    <Text {...sectionTitleStyles}>Size of Shipment</Text>
-                  </Field.Label>
-                  <Menu.Root>
-                    <Text textStyle="p2" color="neutral.800" mt={3}>
-                      {requestedSize}
-                    </Text>
-                  </Menu.Root>
-                </Field.Root>
+  const deleteButton = (
+    <HStack
+      width={6}
+      height={6}
+      minWidth={6}
+      padding={0.5}
+      justify="center"
+      align="center"
+      gap={1}
+      flexShrink={0}
+      borderRadius="sm"
+      background="#FEE2E2"
+      cursor="pointer"
+      _hover={{ background: '#F7CFCF' }}
+      onClick={() => setSelectedDeleteRequestAction(true)}
+    >
+      <Trash2 size={14} color={'#991919'} />
+    </HStack>
+  );
 
-                <Field.Root mb={4} mt={3}>
-                  <Field.Label>
-                    <Text {...sectionTitleStyles} mt={3}>
-                      Food Type(s)
-                    </Text>
-                  </Field.Label>
+  return (
+    <>
+      <Dialog.Root
+        open={isOpen && !selectedDeleteRequestAction}
+        size="xl"
+        onOpenChange={(e: { open: boolean }) => {
+          if (!e.open) onClose();
+        }}
+        closeOnInteractOutside
+      >
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content maxW={650}>
+            <Dialog.Header pb={0} mt={2}>
+              <Dialog.Title fontSize="lg" fontWeight={600} fontFamily="inter">
+                Food Request #{request.requestId}
+              </Dialog.Title>
+              {!isEditing && (
+                <>
+                  {editButton}
+                  {deleteButton}
+                </>
+              )}
+            </Dialog.Header>
+            <Dialog.Body>
+              <Text textStyle="p2" color="gray.dark">
+                {pantryName}
+              </Text>
+              {isEditing ? (
+                <>
+                  <Field.Root required mt={5} mb={3}>
+                    <Field.Label>
+                      <Text textStyle="p2" fontWeight={600} color="neutral.800">
+                        Size of Shipment
+                      </Text>
+                    </Field.Label>
+                    <Menu.Root>
+                      <Menu.Trigger asChild>
+                        <Button
+                          pl={2.5}
+                          textStyle="p2"
+                          w="full"
+                          bgColor="white"
+                          color={requestedSize ? 'neutral.800' : 'neutral.300'}
+                          borderColor="neutral.100"
+                          borderWidth="1px"
+                          borderRadius="4px"
+                          justifyContent="space-between"
+                        >
+                          {requestedSize || 'Select size'}
+                          <Box color="neutral.300">
+                            <ChevronDownIcon />
+                          </Box>
+                        </Button>
+                      </Menu.Trigger>
+                      <Menu.Positioner w="full">
+                        <Menu.Content>
+                          <Menu.RadioItemGroup
+                            value={requestedSize}
+                            onValueChange={(val: { value: RequestSize }) =>
+                              setRequestedSize(val.value)
+                            }
+                          >
+                            {Object.values(RequestSize).map((option, idx) => (
+                              <Menu.RadioItem
+                                key={option}
+                                value={option}
+                                pl={1}
+                                mt={idx === 0 ? 0 : 2}
+                              >
+                                {option}
+                              </Menu.RadioItem>
+                            ))}
+                          </Menu.RadioItemGroup>
+                        </Menu.Content>
+                      </Menu.Positioner>
+                    </Menu.Root>
+                  </Field.Root>
 
-                  <TagGroup values={selectedFoodTypes} />
-                </Field.Root>
+                  <Field.Root mb={3}>
+                    <Field.Label>
+                      <Text textStyle="p2" fontWeight={600} color="neutral.800">
+                        Food Type(s)
+                      </Text>
+                    </Field.Label>
+                    <Menu.Root closeOnSelect={false}>
+                      <Menu.Trigger asChild>
+                        <Button
+                          pl={2.5}
+                          w="full"
+                          bgColor="white"
+                          color="neutral.300"
+                          borderColor="neutral.100"
+                          borderWidth="1px"
+                          borderRadius="4px"
+                          justifyContent="space-between"
+                          textStyle="p2"
+                        >
+                          Multi-Select
+                          <ChevronDownIcon />
+                        </Button>
+                      </Menu.Trigger>
+                      <Menu.Positioner w="full">
+                        <Menu.Content maxH="200px" overflowY="auto">
+                          {Object.values(FoodType).map((allergen) => {
+                            const isChecked =
+                              selectedFoodTypes.includes(allergen);
+                            return (
+                              <Menu.CheckboxItem
+                                key={allergen}
+                                checked={isChecked}
+                                onCheckedChange={(checked: boolean) =>
+                                  setSelectedFoodTypes((prev) =>
+                                    checked
+                                      ? [...prev, allergen as FoodType]
+                                      : prev.filter((i) => i !== allergen),
+                                  )
+                                }
+                                display="flex"
+                                alignItems="center"
+                              >
+                                <Box
+                                  position="absolute"
+                                  left={1}
+                                  ml={0.5}
+                                  w={5}
+                                  h={5}
+                                  borderWidth="1px"
+                                  borderRadius="4px"
+                                  borderColor="neutral.200"
+                                />
+                                <Menu.ItemIndicator />
+                                <Text
+                                  ml={0.5}
+                                  color="neutral.800"
+                                  fontWeight={500}
+                                  fontFamily="Inter"
+                                >
+                                  {allergen}
+                                </Text>
+                              </Menu.CheckboxItem>
+                            );
+                          })}
+                        </Menu.Content>
+                      </Menu.Positioner>
+                    </Menu.Root>
+                    <TagGroup
+                      values={selectedFoodTypes}
+                      onRemove={(value) =>
+                        setSelectedFoodTypes((prev) =>
+                          prev.filter((i) => i !== value),
+                        )
+                      }
+                    />
+                  </Field.Root>
 
-                <Field.Root mb={4}>
-                  <Field.Label>
-                    <Text {...sectionTitleStyles} mt={3}>
-                      Additional Information
-                    </Text>
-                  </Field.Label>
-                  <Text textStyle="p2" color="neutral.800" mt={3}>
-                    {additionalNotes}
-                  </Text>
-                </Field.Root>
-              </Tabs.Content>
+                  <Field.Root mb={5}>
+                    <Field.Label>
+                      <Text textStyle="p2" fontWeight={600} color="neutral.800">
+                        Additional Information
+                      </Text>
+                    </Field.Label>
+                    <Textarea
+                      pl={2.5}
+                      size="lg"
+                      textStyle="p2"
+                      color={
+                        additionalNotes !== '' ? 'neutral.800' : 'neutral.300'
+                      }
+                      value={additionalNotes}
+                      onChange={(e) => setAdditionalNotes(e.target.value)}
+                    />
+                    <Field.HelperText color="neutral.600">
+                      Max 250 words
+                    </Field.HelperText>
+                  </Field.Root>
 
-              <Tabs.Content value="associatedOrders">
-                {!currentOrder && (
-                  <Text mt={5} textStyle="p2">
-                    {' '}
-                    No associated orders to display{' '}
-                  </Text>
-                )}
-                {currentOrder && (
-                  <Box
-                    borderWidth="1px"
-                    borderColor="neutral.100"
-                    borderRadius="5px"
-                    p={3}
-                    mt={6}
+                  <Flex justifyContent="flex-end" mt={4} gap={2}>
+                    <Button
+                      onClick={handleCancel}
+                      background="bg"
+                      color="neutral.800"
+                      borderColor="neutral.200"
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      onClick={handleUpdate}
+                      bg="blue.hover"
+                      color="white"
+                    >
+                      Update Request
+                    </Button>
+                  </Flex>
+                </>
+              ) : (
+                <>
+                  <Tabs.Root
+                    unstyled
+                    mt={5}
+                    fitted
+                    defaultValue="requestDetails"
                   >
-                    <Flex justify="space-between" align="center" mb={3}>
-                      <Text {...sectionTitleStyles}>
-                        Order {currentOrder.orderId} -
-                        <Text as="span" color="neutral.800" textStyle="p2">
+                    <Tabs.List maxW="60%">
+                      <Tabs.Trigger
+                        textStyle="p2"
+                        px={4}
+                        py={1}
+                        color="neutral.800"
+                        value="requestDetails"
+                        borderBottom="1.5px solid"
+                        borderColor="neutral.100"
+                        _selected={{ borderColor: 'neutral.700' }}
+                      >
+                        Request Details
+                      </Tabs.Trigger>
+                      <Tabs.Trigger
+                        textStyle="p2"
+                        px={4}
+                        py={1}
+                        color="neutral.800"
+                        value="associatedOrders"
+                        borderBottom="1.5px solid"
+                        borderColor="neutral.100"
+                        _selected={{ borderColor: 'neutral.700' }}
+                      >
+                        Associated Orders
+                      </Tabs.Trigger>
+                    </Tabs.List>
+                    <Tabs.Content value="requestDetails">
+                      <Field.Root mb={4} mt={6}>
+                        <Field.Label>
+                          <Text {...sectionTitleStyles}>Size of Shipment</Text>
+                        </Field.Label>
+                        <Menu.Root>
+                          <Text textStyle="p2" color="neutral.800" mt={3}>
+                            {requestedSize}
+                          </Text>
+                        </Menu.Root>
+                      </Field.Root>
+
+                      <Field.Root mb={4} mt={3}>
+                        <Field.Label>
+                          <Text {...sectionTitleStyles} mt={3}>
+                            Food Type(s)
+                          </Text>
+                        </Field.Label>
+
+                        <TagGroup values={selectedFoodTypes} />
+                      </Field.Root>
+
+                      <Field.Root mb={4}>
+                        <Field.Label>
+                          <Text {...sectionTitleStyles} mt={3}>
+                            Additional Information
+                          </Text>
+                        </Field.Label>
+                        <Text textStyle="p2" color="neutral.800" mt={3}>
+                          {additionalNotes}
+                        </Text>
+                      </Field.Root>
+                    </Tabs.Content>
+
+                    <Tabs.Content value="associatedOrders">
+                      {!currentOrder && (
+                        <Text mt={5} textStyle="p2">
                           {' '}
-                          Fulfilled by {currentOrder.foodManufacturerName}
+                          No associated orders to display{' '}
                         </Text>
-                      </Text>
-                      {currentOrder.status === OrderStatus.DELIVERED ? (
-                        <Badge
-                          {...badgeStyles}
-                          bgColor="blue.100"
-                          color="blue.core"
-                        >
-                          {ORDER_STATUS_LABELS[currentOrder.status]}
-                        </Badge>
-                      ) : (
-                        <Badge
-                          {...badgeStyles}
-                          bgColor="yellow.200"
-                          color="yellow.hover"
-                        >
-                          {ORDER_STATUS_LABELS[currentOrder.status]}
-                        </Badge>
                       )}
-                    </Flex>
-                    {Object.entries(groupedOrderItemsByType).map(
-                      ([foodType, items]) => (
-                        <Box key={foodType} mb={4}>
-                          <Text {...sectionTitleStyles}>{foodType}</Text>
-                          {items.map((item) => (
-                            <Flex
-                              border="1px solid"
-                              borderColor="neutral.100"
-                              borderRadius="md"
-                              px={4}
-                              align="center"
-                              mt="2"
-                            >
+                      {currentOrder && (
+                        <Box
+                          borderWidth="1px"
+                          borderColor="neutral.100"
+                          borderRadius="5px"
+                          p={3}
+                          mt={6}
+                        >
+                          <Flex justify="space-between" align="center" mb={3}>
+                            <Text {...sectionTitleStyles}>
+                              Order {currentOrder.orderId} -
                               <Text
-                                py={2}
-                                textStyle="p2"
+                                as="span"
                                 color="neutral.800"
-                                flex={1}
+                                textStyle="p2"
                               >
-                                {item.name}
+                                {' '}
+                                Fulfilled by {currentOrder.foodManufacturerName}
                               </Text>
+                            </Text>
+                            {currentOrder.status === OrderStatus.DELIVERED ? (
+                              <Badge
+                                {...badgeStyles}
+                                bgColor="blue.100"
+                                color="blue.core"
+                              >
+                                {ORDER_STATUS_LABELS[currentOrder.status]}
+                              </Badge>
+                            ) : (
+                              <Badge
+                                {...badgeStyles}
+                                bgColor="yellow.200"
+                                color="yellow.hover"
+                              >
+                                {ORDER_STATUS_LABELS[currentOrder.status]}
+                              </Badge>
+                            )}
+                          </Flex>
+                          {Object.entries(groupedOrderItemsByType).map(
+                            ([foodType, items]) => (
+                              <Box key={foodType} mb={4}>
+                                <Text {...sectionTitleStyles}>{foodType}</Text>
+                                {items.map((item) => (
+                                  <Flex
+                                    border="1px solid"
+                                    borderColor="neutral.100"
+                                    borderRadius="md"
+                                    px={4}
+                                    align="center"
+                                    mt="2"
+                                  >
+                                    <Text
+                                      py={2}
+                                      textStyle="p2"
+                                      color="neutral.800"
+                                      flex={1}
+                                    >
+                                      {item.name}
+                                    </Text>
 
-                              <Box
-                                alignSelf="stretch"
-                                borderLeft="1px solid"
-                                borderColor="neutral.100"
-                                mx={3}
-                              />
+                                    <Box
+                                      alignSelf="stretch"
+                                      borderLeft="1px solid"
+                                      borderColor="neutral.100"
+                                      mx={3}
+                                    />
 
-                              <Text
-                                minW={5}
-                                py={2}
-                                textStyle="p2"
-                                color="neutral.800"
-                              >
-                                {item.quantity}
-                              </Text>
-                            </Flex>
-                          ))}
+                                    <Text
+                                      minW={5}
+                                      py={2}
+                                      textStyle="p2"
+                                      color="neutral.800"
+                                    >
+                                      {item.quantity}
+                                    </Text>
+                                  </Flex>
+                                ))}
+                              </Box>
+                            ),
+                          )}
+                          <Text {...sectionTitleStyles} mt="3">
+                            Tracking
+                          </Text>
+                          <Text
+                            color="neutral.700"
+                            textStyle="p2"
+                            mt="3"
+                            mb="3"
+                          >
+                            No tracking link available at this time
+                          </Text>
                         </Box>
-                      ),
-                    )}
-                    <Text {...sectionTitleStyles} mt="3">
-                      Tracking
-                    </Text>
-                    <Text color="neutral.700" textStyle="p2" mt="3" mb="3">
-                      No tracking link available at this time
-                    </Text>
-                  </Box>
-                )}
+                      )}
 
-                {orderDetailsList.length > 0 && (
-                  <Flex justify="center" mt={7}>
-                    <Pagination.Root
-                      count={orderDetailsList.length}
-                      pageSize={1}
-                      page={currentPage}
-                      onChange={(page: number) => setCurrentPage(page)}
-                    >
-                      <ButtonGroup variant="outline" size="sm" gap={4}>
-                        <Pagination.PrevTrigger asChild>
-                          <IconButton
-                            variant="ghost"
-                            disabled={currentPage === 1}
-                            onClick={() =>
-                              setCurrentPage((prev) => Math.max(prev - 1, 1))
-                            }
+                      {orderDetailsList.length > 0 && (
+                        <Flex justify="center" mt={7}>
+                          <Pagination.Root
+                            count={orderDetailsList.length}
+                            pageSize={1}
+                            page={currentPage}
+                            onChange={(page: number) => setCurrentPage(page)}
                           >
-                            <ChevronLeft />
-                          </IconButton>
-                        </Pagination.PrevTrigger>
+                            <ButtonGroup variant="outline" size="sm" gap={4}>
+                              <Pagination.PrevTrigger asChild>
+                                <IconButton
+                                  variant="ghost"
+                                  disabled={currentPage === 1}
+                                  onClick={() =>
+                                    setCurrentPage((prev) =>
+                                      Math.max(prev - 1, 1),
+                                    )
+                                  }
+                                >
+                                  <ChevronLeft />
+                                </IconButton>
+                              </Pagination.PrevTrigger>
 
-                        <Pagination.Items
-                          render={(page) => (
-                            <IconButton
-                              variant="outline"
-                              _selected={{ borderColor: 'neutral.800' }}
-                              onClick={() => setCurrentPage(page.value)}
-                            >
-                              {page.value}
-                            </IconButton>
-                          )}
-                        />
+                              <Pagination.Items
+                                render={(page) => (
+                                  <IconButton
+                                    variant="outline"
+                                    _selected={{ borderColor: 'neutral.800' }}
+                                    onClick={() => setCurrentPage(page.value)}
+                                  >
+                                    {page.value}
+                                  </IconButton>
+                                )}
+                              />
 
-                        <Pagination.NextTrigger asChild>
-                          <IconButton
-                            variant="ghost"
-                            disabled={currentPage === orderDetailsList.length}
-                            onClick={() =>
-                              setCurrentPage((prev) =>
-                                Math.min(prev + 1, orderDetailsList.length),
-                              )
-                            }
-                          >
-                            <ChevronRight />
-                          </IconButton>
-                        </Pagination.NextTrigger>
-                      </ButtonGroup>
-                    </Pagination.Root>
-                  </Flex>
-                )}
-              </Tabs.Content>
-            </Tabs.Root>
-          </Dialog.Body>
-          <Dialog.CloseTrigger asChild>
-            <CloseButton size="lg" />
-          </Dialog.CloseTrigger>
-        </Dialog.Content>
-      </Dialog.Positioner>
-    </Dialog.Root>
+                              <Pagination.NextTrigger asChild>
+                                <IconButton
+                                  variant="ghost"
+                                  disabled={
+                                    currentPage === orderDetailsList.length
+                                  }
+                                  onClick={() =>
+                                    setCurrentPage((prev) =>
+                                      Math.min(
+                                        prev + 1,
+                                        orderDetailsList.length,
+                                      ),
+                                    )
+                                  }
+                                >
+                                  <ChevronRight />
+                                </IconButton>
+                              </Pagination.NextTrigger>
+                            </ButtonGroup>
+                          </Pagination.Root>
+                        </Flex>
+                      )}
+                    </Tabs.Content>
+                  </Tabs.Root>
+                </>
+              )}
+            </Dialog.Body>
+            <Dialog.CloseTrigger asChild>
+              <CloseButton size="lg" />
+            </Dialog.CloseTrigger>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Dialog.Root>
+      {selectedDeleteRequestAction && (
+        <PantryDeleteRequestActionModal
+          request={request}
+          isOpen={selectedDeleteRequestAction}
+          onClose={() => setSelectedDeleteRequestAction(false)}
+          onSuccess={() => {
+            onSuccess();
+            onClose();
+          }}
+        />
+      )}
+    </>
   );
 };
 
diff --git a/apps/frontend/src/containers/formRequests.tsx b/apps/frontend/src/containers/formRequests.tsx
index 1434751a0..b2ad7706a 100644
--- a/apps/frontend/src/containers/formRequests.tsx
+++ b/apps/frontend/src/containers/formRequests.tsx
@@ -231,6 +231,7 @@ const FormRequests: React.FC = () => {
               navigate(ROUTES.REQUEST_FORM, { replace: true });
             }
           }}
+          onSuccess={fetchRequests}
         />
       )}
       <Flex justify="center" mt={12}>
diff --git a/apps/frontend/src/types/types.ts b/apps/frontend/src/types/types.ts
index 2a1592b91..3c6115932 100644
--- a/apps/frontend/src/types/types.ts
+++ b/apps/frontend/src/types/types.ts
@@ -464,6 +464,12 @@ export interface CreateFoodRequestBody {
   additionalInformation?: string;
 }
 
+export interface UpdateFoodRequestBody {
+  requestedSize?: RequestSize;
+  requestedFoodTypes?: FoodType[];
+  additionalInformation?: string;
+}
+
 export interface CreateDonationDto {
   foodManufacturerId: number;
   recurrenceFreq?: number;

From 45119d982f381e41abdedd097195d62ebc862566 Mon Sep 17 00:00:00 2001
From: Heidi Jiang <hdyjiang@gmail.com>
Date: Sun, 31 May 2026 01:30:40 -0700
Subject: [PATCH 2/5] handle edge cases

---
 .../src/foodRequests/request.service.ts       |  6 +--
 .../components/forms/requestDetailsModal.tsx  | 47 +++++++++++++++----
 apps/frontend/src/types/types.ts              |  2 +-
 3 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/apps/backend/src/foodRequests/request.service.ts b/apps/backend/src/foodRequests/request.service.ts
index 4bf7b8468..3e57b10a1 100644
--- a/apps/backend/src/foodRequests/request.service.ts
+++ b/apps/backend/src/foodRequests/request.service.ts
@@ -317,9 +317,9 @@ export class RequestsService {
     validateId(requestId, 'Request');
 
     if (
-      dto.requestedSize == undefined &&
-      dto.requestedFoodTypes == undefined &&
-      dto.additionalInformation == undefined
+      dto.requestedSize === undefined &&
+      dto.requestedFoodTypes === undefined &&
+      dto.additionalInformation === undefined
     ) {
       throw new BadRequestException(
         'At least one field must be provided to update request',
diff --git a/apps/frontend/src/components/forms/requestDetailsModal.tsx b/apps/frontend/src/components/forms/requestDetailsModal.tsx
index aea9dbae6..bfc4cfe61 100644
--- a/apps/frontend/src/components/forms/requestDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/requestDetailsModal.tsx
@@ -7,7 +7,7 @@ import {
 } from 'types/types';
 import { OrderStatus, RequestSize, FoodType } from '../../types/types';
 import { ORDER_STATUS_LABELS } from '@utils/utils';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   Flex,
   Box,
@@ -118,20 +118,49 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
     setIsEditing(false);
   };
 
+  // if the user makes back-to-back changes without closing the modal, the request values stay static
+  // comparing against dynamic baseline values allows for these edge cases
+  // e.g. user edits A -> B -> A
+  // without baseline, the last change would be considered no update and only B would persist
+  const baseline = useRef({
+    requestedSize: request.requestedSize,
+    requestedFoodTypes: request.requestedFoodTypes,
+    additionalInformation: request.additionalInformation ?? '',
+  });
+
   const handleUpdate = async () => {
     const changed: UpdateFoodRequestBody = {};
-    if (requestedSize !== request.requestedSize)
+    if (requestedSize !== baseline.current.requestedSize)
       changed.requestedSize = requestedSize;
     const foodTypesChanged =
-      selectedFoodTypes.length !== request.requestedFoodTypes.length ||
-      !selectedFoodTypes.every((t) => request.requestedFoodTypes.includes(t));
+      selectedFoodTypes.length !== baseline.current.requestedFoodTypes.length ||
+      !selectedFoodTypes.every((t) =>
+        baseline.current.requestedFoodTypes.includes(t),
+      );
     if (foodTypesChanged) changed.requestedFoodTypes = selectedFoodTypes;
-    if (additionalNotes !== (request.additionalInformation ?? ''))
-      changed.additionalInformation = additionalNotes;
+    if (additionalNotes !== (baseline.current.additionalInformation ?? ''))
+      changed.additionalInformation =
+        additionalNotes === '' ? null : additionalNotes;
 
-    await apiClient.updateFoodRequest(request.requestId, changed);
-    onSuccess();
-    setIsEditing(false);
+    // allow user to exit the edit view even if they make no updates
+    // NOTE: not sure if this is the design choice we want to go with
+    if (Object.keys(changed).length === 0) {
+      setIsEditing(false);
+      return;
+    }
+
+    try {
+      await apiClient.updateFoodRequest(request.requestId, changed);
+      onSuccess();
+      baseline.current = {
+        requestedSize,
+        requestedFoodTypes: selectedFoodTypes,
+        additionalInformation: additionalNotes,
+      };
+      setIsEditing(false);
+    } catch (e) {
+      console.error(e);
+    }
   };
 
   const editButton = (
diff --git a/apps/frontend/src/types/types.ts b/apps/frontend/src/types/types.ts
index 3c6115932..a39c1baaf 100644
--- a/apps/frontend/src/types/types.ts
+++ b/apps/frontend/src/types/types.ts
@@ -467,7 +467,7 @@ export interface CreateFoodRequestBody {
 export interface UpdateFoodRequestBody {
   requestedSize?: RequestSize;
   requestedFoodTypes?: FoodType[];
-  additionalInformation?: string;
+  additionalInformation?: string | null;
 }
 
 export interface CreateDonationDto {

From 16cd7c4a8a7b4947c5168fe662c7e3699d0e138b Mon Sep 17 00:00:00 2001
From: Heidi Jiang <hdyjiang@gmail.com>
Date: Sun, 31 May 2026 02:06:56 -0700
Subject: [PATCH 3/5] added success/error toasts

---
 .../src/components/foodRequestManagement.tsx  |  17 +
 .../forms/pantryDeleteRequestModal.tsx        |   2 +-
 .../components/forms/requestDetailsModal.tsx  | 451 +++++++++---------
 apps/frontend/src/containers/formRequests.tsx |  16 +
 4 files changed, 252 insertions(+), 234 deletions(-)

diff --git a/apps/frontend/src/components/foodRequestManagement.tsx b/apps/frontend/src/components/foodRequestManagement.tsx
index 0b6091f16..95a14bad7 100644
--- a/apps/frontend/src/components/foodRequestManagement.tsx
+++ b/apps/frontend/src/components/foodRequestManagement.tsx
@@ -16,6 +16,7 @@ import { capitalize, formatDate } from '@utils/utils';
 import { FloatingAlert } from '@components/floatingAlert';
 import { FoodRequestStatus, FoodRequestSummaryDto } from '../types/types';
 import RequestDetailsModal from '@components/forms/requestDetailsModal';
+import PantryDeleteRequestActionModal from '@components/forms/pantryDeleteRequestModal';
 import VolunteerCloseRequestActionModal from '@components/forms/volunteerCloseRequestModal';
 import VolunteerRequestActionRequiredModal from '@components/forms/volunteerRequestActionRequiredModal';
 import CreateNewOrderModal from '@components/forms/createNewOrderModal';
@@ -44,6 +45,8 @@ const RequestManagement: React.FC<RequestManagementProps> = ({
   >([]);
   const [selectedViewDetailsRequest, setSelectedViewDetailsRequest] =
     useState<FoodRequestSummaryDto | null>(null);
+  const [deleteRequest, setDeleteRequest] =
+    useState<FoodRequestSummaryDto | null>(null);
   const [selectedActionRequest, setSelectedActionRequest] =
     useState<FoodRequestSummaryDto | null>(null);
   const [selectedCloseRequestAction, setSelectedCloseRequestAction] =
@@ -393,6 +396,20 @@ const RequestManagement: React.FC<RequestManagementProps> = ({
                 }
               }}
               onSuccess={loadRequests}
+              onDelete={() => setDeleteRequest(selectedViewDetailsRequest)}
+            />
+          )}
+
+          {deleteRequest && (
+            <PantryDeleteRequestActionModal
+              request={deleteRequest}
+              isOpen={deleteRequest !== null}
+              onClose={() => setDeleteRequest(null)}
+              onSuccess={() => {
+                setSuccessMessage('Successfully deleted food request.');
+                loadRequests();
+                setSelectedViewDetailsRequest(null);
+              }}
             />
           )}
 
diff --git a/apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx b/apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx
index 9c8c431e7..70035a08e 100644
--- a/apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx
+++ b/apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx
@@ -34,7 +34,7 @@ const PantryDeleteRequestActionModal: React.FC<
       onClose();
       onSuccess();
     } catch {
-      setAlertMessage('Error completing action. Please try again.');
+      setAlertMessage('Food request could not be deleted.');
     }
   };
 
diff --git a/apps/frontend/src/components/forms/requestDetailsModal.tsx b/apps/frontend/src/components/forms/requestDetailsModal.tsx
index bfc4cfe61..82a5b775d 100644
--- a/apps/frontend/src/components/forms/requestDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/requestDetailsModal.tsx
@@ -35,13 +35,15 @@ import {
 import { TagGroup } from './tagGroup';
 import { useGroupedItemsByFoodType } from '../../hooks/groupedItemsByFoodType';
 import { useModalBodyCleanup } from '../../hooks/modalBodyCleanup';
-import PantryDeleteRequestActionModal from './pantryDeleteRequestModal';
+import { useAlert } from '../../hooks/alert';
+import { FloatingAlert } from '../floatingAlert';
 
 interface RequestDetailsModalProps {
   request: FoodRequestSummaryDto;
   isOpen: boolean;
   onClose: () => void;
   onSuccess: () => void;
+  onDelete: () => void;
 }
 
 const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
@@ -49,8 +51,11 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
   isOpen,
   onClose,
   onSuccess,
+  onDelete,
 }) => {
   useModalBodyCleanup();
+  const [alertState, setAlertMessage] = useAlert();
+
   const [orderDetailsList, setOrderDetailsList] = useState<OrderDetails[]>([]);
   const [currentPage, setCurrentPage] = useState<number>(1);
 
@@ -108,8 +113,6 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
   };
 
   const [isEditing, setIsEditing] = useState(false);
-  const [selectedDeleteRequestAction, setSelectedDeleteRequestAction] =
-    useState(false);
 
   const handleCancel = () => {
     setRequestedSize(request.requestedSize);
@@ -157,9 +160,10 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
         requestedFoodTypes: selectedFoodTypes,
         additionalInformation: additionalNotes,
       };
+      setAlertMessage('Successfully updated food request.');
       setIsEditing(false);
     } catch (e) {
-      console.error(e);
+      setAlertMessage('Food request could not be updated.');
     }
   };
 
@@ -195,7 +199,7 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
       background="#FEE2E2"
       cursor="pointer"
       _hover={{ background: '#F7CFCF' }}
-      onClick={() => setSelectedDeleteRequestAction(true)}
+      onClick={onDelete}
     >
       <Trash2 size={14} color={'#991919'} />
     </HStack>
@@ -203,8 +207,19 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
 
   return (
     <>
+      {/*
+       * TODO: hard-coded as 'info' for now because I worked on another ticket that refactored alertState to have a status
+       */}
+      {alertState && (
+        <FloatingAlert
+          key={alertState.id}
+          message={alertState.message}
+          status="info"
+          timeout={6000}
+        />
+      )}
       <Dialog.Root
-        open={isOpen && !selectedDeleteRequestAction}
+        open={isOpen}
         size="xl"
         onOpenChange={(e: { open: boolean }) => {
           if (!e.open) onClose();
@@ -397,234 +412,215 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
                   </Flex>
                 </>
               ) : (
-                <>
-                  <Tabs.Root
-                    unstyled
-                    mt={5}
-                    fitted
-                    defaultValue="requestDetails"
-                  >
-                    <Tabs.List maxW="60%">
-                      <Tabs.Trigger
-                        textStyle="p2"
-                        px={4}
-                        py={1}
-                        color="neutral.800"
-                        value="requestDetails"
-                        borderBottom="1.5px solid"
-                        borderColor="neutral.100"
-                        _selected={{ borderColor: 'neutral.700' }}
-                      >
-                        Request Details
-                      </Tabs.Trigger>
-                      <Tabs.Trigger
-                        textStyle="p2"
-                        px={4}
-                        py={1}
-                        color="neutral.800"
-                        value="associatedOrders"
-                        borderBottom="1.5px solid"
-                        borderColor="neutral.100"
-                        _selected={{ borderColor: 'neutral.700' }}
-                      >
-                        Associated Orders
-                      </Tabs.Trigger>
-                    </Tabs.List>
-                    <Tabs.Content value="requestDetails">
-                      <Field.Root mb={4} mt={6}>
-                        <Field.Label>
-                          <Text {...sectionTitleStyles}>Size of Shipment</Text>
-                        </Field.Label>
-                        <Menu.Root>
-                          <Text textStyle="p2" color="neutral.800" mt={3}>
-                            {requestedSize}
-                          </Text>
-                        </Menu.Root>
-                      </Field.Root>
+                <Tabs.Root unstyled mt={5} fitted defaultValue="requestDetails">
+                  <Tabs.List maxW="60%">
+                    <Tabs.Trigger
+                      textStyle="p2"
+                      px={4}
+                      py={1}
+                      color="neutral.800"
+                      value="requestDetails"
+                      borderBottom="1.5px solid"
+                      borderColor="neutral.100"
+                      _selected={{ borderColor: 'neutral.700' }}
+                    >
+                      Request Details
+                    </Tabs.Trigger>
+                    <Tabs.Trigger
+                      textStyle="p2"
+                      px={4}
+                      py={1}
+                      color="neutral.800"
+                      value="associatedOrders"
+                      borderBottom="1.5px solid"
+                      borderColor="neutral.100"
+                      _selected={{ borderColor: 'neutral.700' }}
+                    >
+                      Associated Orders
+                    </Tabs.Trigger>
+                  </Tabs.List>
+                  <Tabs.Content value="requestDetails">
+                    <Field.Root mb={4} mt={6}>
+                      <Field.Label>
+                        <Text {...sectionTitleStyles}>Size of Shipment</Text>
+                      </Field.Label>
+                      <Menu.Root>
+                        <Text textStyle="p2" color="neutral.800" mt={3}>
+                          {requestedSize}
+                        </Text>
+                      </Menu.Root>
+                    </Field.Root>
 
-                      <Field.Root mb={4} mt={3}>
-                        <Field.Label>
-                          <Text {...sectionTitleStyles} mt={3}>
-                            Food Type(s)
-                          </Text>
-                        </Field.Label>
+                    <Field.Root mb={4} mt={3}>
+                      <Field.Label>
+                        <Text {...sectionTitleStyles} mt={3}>
+                          Food Type(s)
+                        </Text>
+                      </Field.Label>
 
-                        <TagGroup values={selectedFoodTypes} />
-                      </Field.Root>
+                      <TagGroup values={selectedFoodTypes} />
+                    </Field.Root>
 
-                      <Field.Root mb={4}>
-                        <Field.Label>
-                          <Text {...sectionTitleStyles} mt={3}>
-                            Additional Information
-                          </Text>
-                        </Field.Label>
-                        <Text textStyle="p2" color="neutral.800" mt={3}>
-                          {additionalNotes}
+                    <Field.Root mb={4}>
+                      <Field.Label>
+                        <Text {...sectionTitleStyles} mt={3}>
+                          Additional Information
                         </Text>
-                      </Field.Root>
-                    </Tabs.Content>
-
-                    <Tabs.Content value="associatedOrders">
-                      {!currentOrder && (
-                        <Text mt={5} textStyle="p2">
-                          {' '}
-                          No associated orders to display{' '}
-                        </Text>
-                      )}
-                      {currentOrder && (
-                        <Box
-                          borderWidth="1px"
-                          borderColor="neutral.100"
-                          borderRadius="5px"
-                          p={3}
-                          mt={6}
-                        >
-                          <Flex justify="space-between" align="center" mb={3}>
-                            <Text {...sectionTitleStyles}>
-                              Order {currentOrder.orderId} -
-                              <Text
-                                as="span"
-                                color="neutral.800"
-                                textStyle="p2"
-                              >
-                                {' '}
-                                Fulfilled by {currentOrder.foodManufacturerName}
-                              </Text>
+                      </Field.Label>
+                      <Text textStyle="p2" color="neutral.800" mt={3}>
+                        {additionalNotes}
+                      </Text>
+                    </Field.Root>
+                  </Tabs.Content>
+
+                  <Tabs.Content value="associatedOrders">
+                    {!currentOrder && (
+                      <Text mt={5} textStyle="p2">
+                        {' '}
+                        No associated orders to display{' '}
+                      </Text>
+                    )}
+                    {currentOrder && (
+                      <Box
+                        borderWidth="1px"
+                        borderColor="neutral.100"
+                        borderRadius="5px"
+                        p={3}
+                        mt={6}
+                      >
+                        <Flex justify="space-between" align="center" mb={3}>
+                          <Text {...sectionTitleStyles}>
+                            Order {currentOrder.orderId} -
+                            <Text as="span" color="neutral.800" textStyle="p2">
+                              {' '}
+                              Fulfilled by {currentOrder.foodManufacturerName}
                             </Text>
-                            {currentOrder.status === OrderStatus.DELIVERED ? (
-                              <Badge
-                                {...badgeStyles}
-                                bgColor="blue.100"
-                                color="blue.core"
-                              >
-                                {ORDER_STATUS_LABELS[currentOrder.status]}
-                              </Badge>
-                            ) : (
-                              <Badge
-                                {...badgeStyles}
-                                bgColor="yellow.200"
-                                color="yellow.hover"
-                              >
-                                {ORDER_STATUS_LABELS[currentOrder.status]}
-                              </Badge>
-                            )}
-                          </Flex>
-                          {Object.entries(groupedOrderItemsByType).map(
-                            ([foodType, items]) => (
-                              <Box key={foodType} mb={4}>
-                                <Text {...sectionTitleStyles}>{foodType}</Text>
-                                {items.map((item) => (
-                                  <Flex
-                                    border="1px solid"
-                                    borderColor="neutral.100"
-                                    borderRadius="md"
-                                    px={4}
-                                    align="center"
-                                    mt="2"
-                                  >
-                                    <Text
-                                      py={2}
-                                      textStyle="p2"
-                                      color="neutral.800"
-                                      flex={1}
-                                    >
-                                      {item.name}
-                                    </Text>
-
-                                    <Box
-                                      alignSelf="stretch"
-                                      borderLeft="1px solid"
-                                      borderColor="neutral.100"
-                                      mx={3}
-                                    />
-
-                                    <Text
-                                      minW={5}
-                                      py={2}
-                                      textStyle="p2"
-                                      color="neutral.800"
-                                    >
-                                      {item.quantity}
-                                    </Text>
-                                  </Flex>
-                                ))}
-                              </Box>
-                            ),
-                          )}
-                          <Text {...sectionTitleStyles} mt="3">
-                            Tracking
-                          </Text>
-                          <Text
-                            color="neutral.700"
-                            textStyle="p2"
-                            mt="3"
-                            mb="3"
-                          >
-                            No tracking link available at this time
                           </Text>
-                        </Box>
-                      )}
-
-                      {orderDetailsList.length > 0 && (
-                        <Flex justify="center" mt={7}>
-                          <Pagination.Root
-                            count={orderDetailsList.length}
-                            pageSize={1}
-                            page={currentPage}
-                            onChange={(page: number) => setCurrentPage(page)}
-                          >
-                            <ButtonGroup variant="outline" size="sm" gap={4}>
-                              <Pagination.PrevTrigger asChild>
-                                <IconButton
-                                  variant="ghost"
-                                  disabled={currentPage === 1}
-                                  onClick={() =>
-                                    setCurrentPage((prev) =>
-                                      Math.max(prev - 1, 1),
-                                    )
-                                  }
+                          {currentOrder.status === OrderStatus.DELIVERED ? (
+                            <Badge
+                              {...badgeStyles}
+                              bgColor="blue.100"
+                              color="blue.core"
+                            >
+                              {ORDER_STATUS_LABELS[currentOrder.status]}
+                            </Badge>
+                          ) : (
+                            <Badge
+                              {...badgeStyles}
+                              bgColor="yellow.200"
+                              color="yellow.hover"
+                            >
+                              {ORDER_STATUS_LABELS[currentOrder.status]}
+                            </Badge>
+                          )}
+                        </Flex>
+                        {Object.entries(groupedOrderItemsByType).map(
+                          ([foodType, items]) => (
+                            <Box key={foodType} mb={4}>
+                              <Text {...sectionTitleStyles}>{foodType}</Text>
+                              {items.map((item) => (
+                                <Flex
+                                  border="1px solid"
+                                  borderColor="neutral.100"
+                                  borderRadius="md"
+                                  px={4}
+                                  align="center"
+                                  mt="2"
                                 >
-                                  <ChevronLeft />
-                                </IconButton>
-                              </Pagination.PrevTrigger>
-
-                              <Pagination.Items
-                                render={(page) => (
-                                  <IconButton
-                                    variant="outline"
-                                    _selected={{ borderColor: 'neutral.800' }}
-                                    onClick={() => setCurrentPage(page.value)}
+                                  <Text
+                                    py={2}
+                                    textStyle="p2"
+                                    color="neutral.800"
+                                    flex={1}
                                   >
-                                    {page.value}
-                                  </IconButton>
-                                )}
-                              />
+                                    {item.name}
+                                  </Text>
 
-                              <Pagination.NextTrigger asChild>
+                                  <Box
+                                    alignSelf="stretch"
+                                    borderLeft="1px solid"
+                                    borderColor="neutral.100"
+                                    mx={3}
+                                  />
+
+                                  <Text
+                                    minW={5}
+                                    py={2}
+                                    textStyle="p2"
+                                    color="neutral.800"
+                                  >
+                                    {item.quantity}
+                                  </Text>
+                                </Flex>
+                              ))}
+                            </Box>
+                          ),
+                        )}
+                        <Text {...sectionTitleStyles} mt="3">
+                          Tracking
+                        </Text>
+                        <Text color="neutral.700" textStyle="p2" mt="3" mb="3">
+                          No tracking link available at this time
+                        </Text>
+                      </Box>
+                    )}
+
+                    {orderDetailsList.length > 0 && (
+                      <Flex justify="center" mt={7}>
+                        <Pagination.Root
+                          count={orderDetailsList.length}
+                          pageSize={1}
+                          page={currentPage}
+                          onChange={(page: number) => setCurrentPage(page)}
+                        >
+                          <ButtonGroup variant="outline" size="sm" gap={4}>
+                            <Pagination.PrevTrigger asChild>
+                              <IconButton
+                                variant="ghost"
+                                disabled={currentPage === 1}
+                                onClick={() =>
+                                  setCurrentPage((prev) =>
+                                    Math.max(prev - 1, 1),
+                                  )
+                                }
+                              >
+                                <ChevronLeft />
+                              </IconButton>
+                            </Pagination.PrevTrigger>
+
+                            <Pagination.Items
+                              render={(page) => (
                                 <IconButton
-                                  variant="ghost"
-                                  disabled={
-                                    currentPage === orderDetailsList.length
-                                  }
-                                  onClick={() =>
-                                    setCurrentPage((prev) =>
-                                      Math.min(
-                                        prev + 1,
-                                        orderDetailsList.length,
-                                      ),
-                                    )
-                                  }
+                                  variant="outline"
+                                  _selected={{ borderColor: 'neutral.800' }}
+                                  onClick={() => setCurrentPage(page.value)}
                                 >
-                                  <ChevronRight />
+                                  {page.value}
                                 </IconButton>
-                              </Pagination.NextTrigger>
-                            </ButtonGroup>
-                          </Pagination.Root>
-                        </Flex>
-                      )}
-                    </Tabs.Content>
-                  </Tabs.Root>
-                </>
+                              )}
+                            />
+
+                            <Pagination.NextTrigger asChild>
+                              <IconButton
+                                variant="ghost"
+                                disabled={
+                                  currentPage === orderDetailsList.length
+                                }
+                                onClick={() =>
+                                  setCurrentPage((prev) =>
+                                    Math.min(prev + 1, orderDetailsList.length),
+                                  )
+                                }
+                              >
+                                <ChevronRight />
+                              </IconButton>
+                            </Pagination.NextTrigger>
+                          </ButtonGroup>
+                        </Pagination.Root>
+                      </Flex>
+                    )}
+                  </Tabs.Content>
+                </Tabs.Root>
               )}
             </Dialog.Body>
             <Dialog.CloseTrigger asChild>
@@ -633,17 +629,6 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
           </Dialog.Content>
         </Dialog.Positioner>
       </Dialog.Root>
-      {selectedDeleteRequestAction && (
-        <PantryDeleteRequestActionModal
-          request={request}
-          isOpen={selectedDeleteRequestAction}
-          onClose={() => setSelectedDeleteRequestAction(false)}
-          onSuccess={() => {
-            onSuccess();
-            onClose();
-          }}
-        />
-      )}
     </>
   );
 };
diff --git a/apps/frontend/src/containers/formRequests.tsx b/apps/frontend/src/containers/formRequests.tsx
index b2ad7706a..7384ae8da 100644
--- a/apps/frontend/src/containers/formRequests.tsx
+++ b/apps/frontend/src/containers/formRequests.tsx
@@ -17,6 +17,7 @@ import { ChevronRight, ChevronLeft } from 'lucide-react';
 import FoodRequestFormModal from '@components/forms/requestFormModal';
 import { FoodRequestStatus, FoodRequestSummaryDto } from '../types/types';
 import RequestDetailsModal from '@components/forms/requestDetailsModal';
+import PantryDeleteRequestActionModal from '@components/forms/pantryDeleteRequestModal';
 import { formatDate } from '@utils/utils';
 import ApiClient from '@api/apiClient';
 import { FloatingAlert } from '@components/floatingAlert';
@@ -41,6 +42,8 @@ const FormRequests: React.FC = () => {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const [alertState, setAlertMessage] = useAlert();
+  const [deleteRequest, setDeleteRequest] =
+    useState<FoodRequestSummaryDto | null>(null);
 
   const pageSize = 10;
 
@@ -232,6 +235,19 @@ const FormRequests: React.FC = () => {
             }
           }}
           onSuccess={fetchRequests}
+          onDelete={() => setDeleteRequest(openReadOnlyRequest)}
+        />
+      )}
+      {deleteRequest && (
+        <PantryDeleteRequestActionModal
+          request={deleteRequest}
+          isOpen={deleteRequest !== null}
+          onClose={() => setDeleteRequest(null)}
+          onSuccess={() => {
+            setAlertMessage('Successfully deleted food request.');
+            fetchRequests();
+            setOpenReadOnlyRequest(null);
+          }}
         />
       )}
       <Flex justify="center" mt={12}>

From a738bf453b193d533df5b7ed0d0b75b3a2142d88 Mon Sep 17 00:00:00 2001
From: Heidi Jiang <hdyjiang@gmail.com>
Date: Sun, 31 May 2026 02:20:11 -0700
Subject: [PATCH 4/5] moved colors into theme config instead of hard coding

---
 .../src/components/forms/requestDetailsModal.tsx     | 12 +++++++-----
 apps/frontend/src/theme.ts                           | 10 +++++++++-
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/components/forms/requestDetailsModal.tsx b/apps/frontend/src/components/forms/requestDetailsModal.tsx
index 82a5b775d..d9ecbfd15 100644
--- a/apps/frontend/src/components/forms/requestDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/requestDetailsModal.tsx
@@ -176,12 +176,13 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
       align="center"
       gap={1}
       borderRadius="sm"
-      background="#F4F4F5"
+      color={'gray.800'}
+      background="gray.subtle"
       cursor="pointer"
       _hover={{ background: 'neutral.100' }}
       onClick={() => setIsEditing(true)}
     >
-      <Pencil size={14} color={'#27272A'} />
+      <Pencil size={14} />
     </HStack>
   );
 
@@ -196,12 +197,13 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
       gap={1}
       flexShrink={0}
       borderRadius="sm"
-      background="#FEE2E2"
+      color="red.700"
+      background="red.subtle"
       cursor="pointer"
-      _hover={{ background: '#F7CFCF' }}
+      _hover={{ background: 'red.200' }}
       onClick={onDelete}
     >
-      <Trash2 size={14} color={'#991919'} />
+      <Trash2 size={14} />
     </HStack>
   );
 
diff --git a/apps/frontend/src/theme.ts b/apps/frontend/src/theme.ts
index 9b1a402c1..29c5f55a6 100644
--- a/apps/frontend/src/theme.ts
+++ b/apps/frontend/src/theme.ts
@@ -80,7 +80,13 @@ const customConfig = defineConfig({
           200: { value: '#D5DCDF' },
           400: { value: '#AAB8BF' },
         },
-        red: { value: '#CC3538' },
+        red: {
+          core: { value: '#CC3538' },
+          subtle: { value: '#FEE2E2' },
+          // NOTE: not sure if this is the right color or what color we want hover to be for delete buttons
+          200: { value: '#FEC9C9' },
+          700: { value: '#991919' },
+        },
         yellow: {
           core: { value: '#F89E19' },
           hover: { value: '#9C5D00' },
@@ -101,6 +107,8 @@ const customConfig = defineConfig({
         gray: {
           light: { value: '#515151' },
           dark: { value: '#111' },
+          subtle: { value: '#F4F4F5' },
+          800: { value: '#27272A' },
         },
         teal: {
           ssf: { value: '#2795A5' },

From b96d71b296d01bfb5f991e42cc291628b243af19 Mon Sep 17 00:00:00 2001
From: Heidi Jiang <hdyjiang@gmail.com>
Date: Sun, 31 May 2026 09:25:23 -0700
Subject: [PATCH 5/5] fixed delete button color + unclickable ui bug

---
 apps/frontend/src/components/foodRequestManagement.tsx          | 2 +-
 apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx | 2 +-
 apps/frontend/src/containers/formRequests.tsx                   | 2 +-
 apps/frontend/src/theme.ts                                      | 1 +
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/components/foodRequestManagement.tsx b/apps/frontend/src/components/foodRequestManagement.tsx
index 95a14bad7..4f67eafe1 100644
--- a/apps/frontend/src/components/foodRequestManagement.tsx
+++ b/apps/frontend/src/components/foodRequestManagement.tsx
@@ -385,7 +385,7 @@ const RequestManagement: React.FC<RequestManagementProps> = ({
             </Table.Row>
           ))}
 
-          {selectedViewDetailsRequest && (
+          {selectedViewDetailsRequest && !deleteRequest && (
             <RequestDetailsModal
               request={selectedViewDetailsRequest}
               isOpen={selectedViewDetailsRequest !== null}
diff --git a/apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx b/apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx
index 70035a08e..be993a659 100644
--- a/apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx
+++ b/apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx
@@ -58,7 +58,7 @@ const PantryDeleteRequestActionModal: React.FC<
     <Button
       textStyle="p2"
       fontWeight={600}
-      bg={'red'}
+      bg={'red.hover'}
       color={'white'}
       width="92px"
       flexShrink={0}
diff --git a/apps/frontend/src/containers/formRequests.tsx b/apps/frontend/src/containers/formRequests.tsx
index 7384ae8da..81347fbf0 100644
--- a/apps/frontend/src/containers/formRequests.tsx
+++ b/apps/frontend/src/containers/formRequests.tsx
@@ -224,7 +224,7 @@ const FormRequests: React.FC = () => {
           ))}
         </Table.Body>
       </Table.Root>
-      {openReadOnlyRequest && (
+      {openReadOnlyRequest && !deleteRequest && (
         <RequestDetailsModal
           request={openReadOnlyRequest}
           isOpen={openReadOnlyRequest !== null}
diff --git a/apps/frontend/src/theme.ts b/apps/frontend/src/theme.ts
index 29c5f55a6..19b92bbcc 100644
--- a/apps/frontend/src/theme.ts
+++ b/apps/frontend/src/theme.ts
@@ -83,6 +83,7 @@ const customConfig = defineConfig({
         red: {
           core: { value: '#CC3538' },
           subtle: { value: '#FEE2E2' },
+          hover: { value: '#972729' },
           // NOTE: not sure if this is the right color or what color we want hover to be for delete buttons
           200: { value: '#FEC9C9' },
           700: { value: '#991919' },