[SSF-226] Pantry Deleting & Editing Food Requests Frontend

apps/backend/src/foodRequests/request.service.ts

@@ -371,9 +371,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',

apps/frontend/src/api/apiClient.ts

@@ -43,6 +43,7 @@ import {
   BulkUpdateTrackingCostDto,
   UpdateDonationItemDetailsDto,
   PendingApplication,
+  UpdateFoodRequestBody,
   DonationReminderDto,
 } from 'types/types';
 
@@ -110,6 +111,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`, {});
   }

apps/frontend/src/components/editDeleteButtons.tsx

@@ -0,0 +1,52 @@
+import { HStack } from '@chakra-ui/react';
+import { Pencil, Trash2 } from 'lucide-react';
+
+interface EditDeleteButtonProps {
+  onClick: () => void;
+}
+
+export const EditButton: React.FC<EditDeleteButtonProps> = ({ onClick }) => {
+  return (
+    <HStack
+      width={6}
+      height={6}
+      minWidth={6}
+      padding={0.5}
+      justify="center"
+      align="center"
+      gap={1}
+      flexShrink={0}
+      borderRadius="sm"
+      color={'gray.800'}
+      background="gray.subtle"
+      cursor="pointer"
+      _hover={{ background: 'neutral.200' }}
+      onClick={onClick}
+    >
+      <Pencil size={14} />
+    </HStack>
+  );
+};
+
+export const DeleteButton: React.FC<EditDeleteButtonProps> = ({ onClick }) => {
+  return (
+    <HStack
+      width={6}
+      height={6}
+      minWidth={6}
+      padding={0.5}
+      justify="center"
+      align="center"
+      gap={1}
+      flexShrink={0}
+      borderRadius="sm"
+      color="red.700"
+      background="red.subtle"
+      cursor="pointer"
+      _hover={{ background: 'red.300' }}
+      onClick={onClick}
+    >
+      <Trash2 size={14} />
+    </HStack>
+  );
+};

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] =
@@ -394,6 +397,24 @@ const RequestManagement: React.FC<RequestManagementProps> = ({
                   navigate(location.pathname, { replace: true });
                 }
               }}
+              onSuccess={loadRequests}
+              onDelete={() => setDeleteRequest(selectedViewDetailsRequest)}
+            />
+          )}
+
+          {deleteRequest && (
+            <PantryDeleteRequestActionModal
+              request={deleteRequest}
+              isOpen={deleteRequest !== null}
+              onClose={() => setDeleteRequest(null)}
+              onSuccess={() => {
+                setAlertMessage(
+                  'Successfully deleted food request.',
+                  AlertStatus.INFO,
+                );
+                loadRequests();
+                setSelectedViewDetailsRequest(null);
+              }}
             />
           )}
 

apps/frontend/src/components/forms/pantryDeleteRequestModal.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import {
+  Box,
+  Button,
+  VStack,
+  CloseButton,
+  Text,
+  Flex,
+  Dialog,
+} from '@chakra-ui/react';
+import { AlertStatus, 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('Food request could not be deleted.', AlertStatus.ERROR);
+    }
+  };
+
+  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={alertState.status}
+          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={'gray.200'}
+                borderRadius={6}
+              >
+                <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}>
+                <Button
+                  textStyle="p2"
+                  fontWeight={600}
+                  color="neutral.800"
+                  variant="outline"
+                  h="36px"
+                  px={3}
+                  flexShrink={0}
+                  textAlign="center"
+                  lineHeight="28px"
+                  onClick={onClose}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  textStyle="p2"
+                  fontWeight={600}
+                  bg={'red.hover'}
+                  color={'white'}
+                  width="92px"
+                  h="36px"
+                  px={5}
+                  flexShrink={0}
+                  textAlign="center"
+                  onClick={onCloseRequest}
+                >
+                  Delete
+                </Button>
+              </Flex>
+            </VStack>
+          </Dialog.Body>
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Dialog.Root>
+  );
+};
+
+export default PantryDeleteRequestActionModal;