Pantry Order Management Page and Confirm Delivery Modal

apps/backend/src/orders/order.controller.ts

@@ -10,6 +10,7 @@ import {
   ValidationPipe,
   UploadedFiles,
   UseInterceptors,
+  PayloadTooLargeException,
 } from '@nestjs/common';
 import { ApiBody } from '@nestjs/swagger';
 import { OrdersService } from './order.service';
@@ -164,16 +165,35 @@ export class OrdersController {
     },
   })
   @UseInterceptors(
-    FilesInterceptor('photos', 10, { storage: multer.memoryStorage() }),
+    FilesInterceptor('photos', 10, {
+      storage: multer.memoryStorage(),
+      limits: {
+        fileSize: 5 * 1024 * 1024, // 5 MB in bytes
+      },
+    }),
   )
   async confirmDelivery(
     @Param('orderId', ParseIntPipe) orderId: number,
     @Body() body: ConfirmDeliveryDto,
     @UploadedFiles() photos?: Express.Multer.File[],
   ): Promise<Order> {
-    const uploadedPhotoUrls =
-      photos && photos.length > 0 ? await this.awsS3Service.upload(photos) : [];
-
-    return this.ordersService.confirmDelivery(orderId, body, uploadedPhotoUrls);
+    try {
+      const uploadedPhotoUrls =
+        photos && photos.length > 0
+          ? await this.awsS3Service.upload(photos)
+          : [];
+      return this.ordersService.confirmDelivery(
+        orderId,
+        body,
+        uploadedPhotoUrls,
+      );
+    } catch (err: any) {
+      if (err.code === 'LIMIT_FILE_SIZE') {
+        throw new PayloadTooLargeException(
+          'Each photo must be 5 MB or smaller',
+        );
+      }
+      throw err;
+    }
   }
 }

apps/frontend/src/api/apiClient.ts

@@ -22,8 +22,11 @@ import {
   OrderSummary,
   UserDto,
   OrderDetails,
+  ConfirmDeliveryDto,
+  OrderWithoutRelations,
   Assignments,
   FoodRequestSummaryDto,
+  OrderWithoutFoodManufacturer,
 } from 'types/types';
 
 const defaultBaseUrl =
@@ -168,6 +171,14 @@ export class ApiClient {
       .then((response) => response.data);
   }
 
+  public async getPantryOrders(
+    pantryId: number,
+  ): Promise<OrderWithoutFoodManufacturer[]> {
+    return this.axiosInstance
+      .get(`/api/pantries/${pantryId}/orders`)
+      .then((response) => response.data);
+  }
+
   public async getPantry(pantryId: number): Promise<Pantry> {
     return this.get(`/api/pantries/${pantryId}`) as Promise<Pantry>;
   }
@@ -225,6 +236,32 @@ export class ApiClient {
       .then((response) => response.data);
   }
 
+  public async confirmOrderDelivery(
+    orderId: number,
+    dto: ConfirmDeliveryDto,
+    photos: File[],
+  ): Promise<OrderWithoutRelations> {
+    const formData = new FormData();
+
+    // DTO fields
+    formData.append('dateReceived', dto.dateReceived);
+    if (dto.feedback) {
+      formData.append('feedback', dto.feedback);
+    }
+
+    // files (must be key = "photos")
+    for (const file of photos) {
+      formData.append('photos', file);
+    }
+
+    const { data } = await this.axiosInstance.patch(
+      `/api/orders/${orderId}/confirm-delivery`,
+      formData,
+    );
+
+    return data;
+  }
+
   public async postManufacturer(
     data: ManufacturerApplicationDto,
   ): Promise<AxiosResponse<void>> {
@@ -293,31 +330,6 @@ export class ApiClient {
     return data as FoodRequest[];
   }
 
-  public async confirmDelivery(
-    requestId: number,
-    data: FormData,
-  ): Promise<void> {
-    try {
-      const response = await this.axiosInstance.post(
-        `/api/requests/${requestId}/confirm-delivery`,
-        data,
-      );
-
-      if (response.status === 200) {
-        alert('Delivery confirmation submitted successfully');
-        if (this.navigate) {
-          this.navigate('/request-form');
-        } else {
-          window.location.href = '/request-form';
-        }
-      } else {
-        alert(`Failed to submit: ${response.statusText}`);
-      }
-    } catch (error) {
-      alert(`Error submitting delivery confirmation: ${error}`);
-    }
-  }
-
   public async getCurrentUserPantryId(): Promise<number> {
     const data = await this.get('/api/pantries/my-id');
     return data as number;

apps/frontend/src/app.tsx

@@ -5,7 +5,6 @@ import PantryPastOrders from '@containers/pantryPastOrders';
 import Pantries from '@containers/pantries';
 import Orders from '@containers/orders';
 import PantryDashboard from '@containers/pantryDashboard';
-import { submitDeliveryConfirmationFormModal } from '@components/forms/deliveryConfirmationModal';
 import FormRequests from '@containers/formRequests';
 import PantryApplication from '@containers/pantryApplication';
 import ApplicationSubmitted from '@containers/applicationSubmitted';
@@ -25,6 +24,7 @@ import ForgotPasswordPage from '@containers/forgotPasswordPage';
 import ProtectedRoute from '@components/protectedRoute';
 import Unauthorized from '@containers/unauthorized';
 import { Authenticator } from '@aws-amplify/ui-react';
+import PantryOrderManagement from '@containers/pantryOrderManagement';
 import FoodManufacturerApplication from '@containers/foodManufacturerApplication';
 import { submitManufacturerApplicationForm } from '@components/forms/manufacturerApplicationForm';
 import AssignedPantries from '@containers/volunteerAssignedPantries';
@@ -162,8 +162,12 @@ const router = createBrowserRouter([
         ),
       },
       {
-        path: '/confirm-delivery',
-        action: submitDeliveryConfirmationFormModal,
+        path: '/pantry-order-management',
+        element: (
+          <ProtectedRoute>
+            <PantryOrderManagement />
+          </ProtectedRoute>
+        ),
       },
       {
         path: '/approve-pantries',

apps/frontend/src/chakra-ui.d.ts

@@ -33,6 +33,10 @@ declare module '@chakra-ui/react' {
     extends ComponentPropsStrictChildren {}
   export interface MenuRadioItemProps extends ComponentPropsLenientChildren {}
 
+  // FileUpload components
+  export interface FileUploadDropzoneProps
+    extends ComponentPropsLenientChildren {}
+
   // Dialog components
   export interface DialogCloseTriggerProps
     extends ComponentPropsStrictChildren {}