From 1697cbe9e5f957e920047c90fc2d096b2c7d4010 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Tue, 7 Oct 2025 22:04:38 -0400
Subject: [PATCH 01/29] Fixed branch issues ignoring lint (Chakra components
 still having weird error)

---
 .../src/allocations/allocations.controller.ts |   7 -
 .../src/allocations/allocations.module.ts     |   1 +
 .../src/allocations/allocations.service.ts    |  11 +-
 apps/backend/src/orders/order.controller.ts   |  37 +-
 apps/backend/src/orders/order.module.ts       |   3 +-
 apps/backend/src/orders/order.service.ts      | 102 ++--
 apps/frontend/src/app.tsx                     |   5 +
 .../forms/deliveryConfirmationModal.tsx       |  16 +-
 .../components/forms/donationDetailsModal.tsx | 171 +++---
 .../components/forms/newDonationFormModal.tsx |  16 +-
 .../components/forms/orderDetailsModal.tsx    | 138 +++++
 .../forms/orderInformationModal.tsx           |  12 +-
 .../forms/pantryApplicationForm.tsx           |   6 +-
 .../forms/pantryApplicationModal.tsx          |   7 +-
 .../src/components/forms/requestFormModal.tsx |  36 +-
 .../src/containers/adminOrderManagement.tsx   | 505 ++++++++++++++++++
 apps/frontend/src/main.tsx                    |   2 +-
 apps/frontend/src/theme.ts                    |   2 +-
 apps/frontend/src/types/types.ts              |  13 +-
 19 files changed, 917 insertions(+), 173 deletions(-)
 create mode 100644 apps/frontend/src/components/forms/orderDetailsModal.tsx
 create mode 100644 apps/frontend/src/containers/adminOrderManagement.tsx

diff --git a/apps/backend/src/allocations/allocations.controller.ts b/apps/backend/src/allocations/allocations.controller.ts
index 44776a3d..d8d2324d 100644
--- a/apps/backend/src/allocations/allocations.controller.ts
+++ b/apps/backend/src/allocations/allocations.controller.ts
@@ -5,11 +5,4 @@ import { Allocation } from './allocations.entity';
 @Controller('allocations')
 export class AllocationsController {
   constructor(private allocationsService: AllocationsService) {}
-
-  @Get(':orderId/get-all-allocations')
-  async getAllAllocationsByOrder(
-    @Param('orderId', ParseIntPipe) orderId: number,
-  ): Promise<Allocation[] | null> {
-    return this.allocationsService.getAllAllocationsByOrder(orderId);
-  }
 }
diff --git a/apps/backend/src/allocations/allocations.module.ts b/apps/backend/src/allocations/allocations.module.ts
index 26e36b74..fed7360b 100644
--- a/apps/backend/src/allocations/allocations.module.ts
+++ b/apps/backend/src/allocations/allocations.module.ts
@@ -10,5 +10,6 @@ import { JwtStrategy } from '../auth/jwt.strategy';
   imports: [TypeOrmModule.forFeature([Allocation])],
   controllers: [AllocationsController],
   providers: [AllocationsService, AuthService, JwtStrategy],
+  exports: [AllocationsService],
 })
 export class AllocationModule {}
diff --git a/apps/backend/src/allocations/allocations.service.ts b/apps/backend/src/allocations/allocations.service.ts
index a2797376..d5bbf460 100644
--- a/apps/backend/src/allocations/allocations.service.ts
+++ b/apps/backend/src/allocations/allocations.service.ts
@@ -11,10 +11,17 @@ export class AllocationsService {
 
   async getAllAllocationsByOrder(
     orderId: number,
-  ): Promise<Allocation[] | null> {
+  ): Promise<Partial<Allocation>[]> {
     return this.repo.find({
-      where: { orderId: orderId },
+      where: { orderId },
       relations: ['item'],
+      select: {
+        allocationId: true,
+        allocatedQuantity: true,
+        reservedAt: true,
+        fulfilledAt: true,
+        status: true,
+      },
     });
   }
 }
diff --git a/apps/backend/src/orders/order.controller.ts b/apps/backend/src/orders/order.controller.ts
index 9b8579d0..596f7fbd 100644
--- a/apps/backend/src/orders/order.controller.ts
+++ b/apps/backend/src/orders/order.controller.ts
@@ -1,10 +1,12 @@
 import {
   Controller,
   Get,
+  Post,
   Patch,
   Param,
   ParseIntPipe,
   Body,
+  Query,
 } from '@nestjs/common';
 import { OrdersService } from './order.service';
 import { Order } from './order.entity';
@@ -12,14 +14,24 @@ import { Pantry } from '../pantries/pantries.entity';
 import { FoodManufacturer } from '../foodManufacturers/manufacturer.entity';
 import { FoodRequest } from '../foodRequests/request.entity';
 import { Donation } from '../donations/donations.entity';
+import { AllocationsService } from '../allocations/allocations.service';
 
 @Controller('orders')
 export class OrdersController {
-  constructor(private ordersService: OrdersService) {}
+  constructor(
+    private readonly ordersService: OrdersService,
+    private readonly allocationsService: AllocationsService,
+  ) {}
 
   @Get('/get-all-orders')
-  async getAllOrders(): Promise<Order[]> {
-    return this.ordersService.getAll();
+  async getAllOrders(
+    @Query('status') status?: string,
+    @Query('pantryName') pantryNames?: string | string[],
+  ): Promise<Order[]> {
+    if (typeof pantryNames === 'string') {
+      pantryNames = [pantryNames];
+    }
+    return this.ordersService.getAll({ status, pantryNames });
   }
 
   @Get('/get-current-orders')
@@ -35,28 +47,28 @@ export class OrdersController {
   @Get(':orderId/pantry')
   async getPantryFromOrder(
     @Param('orderId', ParseIntPipe) orderId: number,
-  ): Promise<Pantry> {
+  ): Promise<Pantry | null> {
     return this.ordersService.findOrderPantry(orderId);
   }
 
   @Get(':orderId/request')
   async getRequestFromOrder(
     @Param('orderId', ParseIntPipe) orderId: number,
-  ): Promise<FoodRequest> {
+  ): Promise<FoodRequest | null> {
     return this.ordersService.findOrderFoodRequest(orderId);
   }
 
   @Get(':orderId/manufacturer')
   async getManufacturerFromOrder(
     @Param('orderId', ParseIntPipe) orderId: number,
-  ): Promise<FoodManufacturer> {
+  ): Promise<FoodManufacturer | null> {
     return this.ordersService.findOrderFoodManufacturer(orderId);
   }
 
   @Get(':orderId/donation')
   async getDonationFromOrder(
     @Param('orderId', ParseIntPipe) orderId: number,
-  ): Promise<Donation> {
+  ): Promise<Donation | null> {
     return this.ordersService.findOrderDonation(orderId);
   }
 
@@ -69,9 +81,16 @@ export class OrdersController {
 
   @Get('/order/:requestId')
   async getOrderByRequestId(
-    @Param('requestId', ParseIntPipe) requestId: number,
+    @Param('orderId', ParseIntPipe) orderId: number,
   ): Promise<Order> {
-    return this.ordersService.findOrderByRequest(requestId);
+    return this.ordersService.findOrderByRequest(orderId);
+  }
+
+  @Get(':orderId/get-all-allocations')
+  async getAllAllocationsByOrder(
+    @Param('orderId', ParseIntPipe) orderId: number,
+  ) {
+    return this.allocationsService.getAllAllocationsByOrder(orderId);
   }
 
   @Patch('/update-status/:orderId')
diff --git a/apps/backend/src/orders/order.module.ts b/apps/backend/src/orders/order.module.ts
index fe2d5584..bf07f1cd 100644
--- a/apps/backend/src/orders/order.module.ts
+++ b/apps/backend/src/orders/order.module.ts
@@ -5,9 +5,10 @@ import { Order } from './order.entity';
 import { OrdersService } from './order.service';
 import { JwtStrategy } from '../auth/jwt.strategy';
 import { AuthService } from '../auth/auth.service';
+import { AllocationModule } from '../allocations/allocations.module';
 
 @Module({
-  imports: [TypeOrmModule.forFeature([Order])],
+  imports: [TypeOrmModule.forFeature([Order]), AllocationModule],
   controllers: [OrdersController],
   providers: [OrdersService, AuthService, JwtStrategy],
 })
diff --git a/apps/backend/src/orders/order.service.ts b/apps/backend/src/orders/order.service.ts
index ad1e280c..17ca3232 100644
--- a/apps/backend/src/orders/order.service.ts
+++ b/apps/backend/src/orders/order.service.ts
@@ -6,14 +6,40 @@ import { Pantry } from '../pantries/pantries.entity';
 import { FoodManufacturer } from '../foodManufacturers/manufacturer.entity';
 import { FoodRequest } from '../foodRequests/request.entity';
 import { Donation } from '../donations/donations.entity';
-import { validateId } from '../utils/validation.utils';
 
 @Injectable()
 export class OrdersService {
   constructor(@InjectRepository(Order) private repo: Repository<Order>) {}
 
-  async getAll() {
-    return this.repo.find();
+  async getAll(filters?: { status?: string; pantryNames?: string[] }) {
+    const qb = this.repo
+      .createQueryBuilder('order')
+      .leftJoinAndSelect('order.pantry', 'pantry')
+      .leftJoinAndSelect('pantry.ssfRepresentative', 'ssfRepresentative')
+      .select([
+        'order.orderId',
+        'order.status',
+        'order.createdAt',
+        'order.shippedAt',
+        'order.deliveredAt',
+        'pantry.pantryName',
+        'pantry.ssfRepresentative.id',
+        'ssfRepresentative.firstName',
+        'ssfRepresentative.lastName',
+        'ssfRepresentative.email',
+      ]);
+
+    if (filters?.status) {
+      qb.andWhere('order.status = :status', { status: filters.status });
+    }
+
+    if (filters?.pantryNames) {
+      qb.andWhere('pantry.pantryName IN (:...pantryNames)', {
+        pantryNames: filters.pantryNames,
+      });
+    }
+
+    return qb.getMany();
   }
 
   async getCurrentOrders() {
@@ -28,88 +54,78 @@ export class OrdersService {
     });
   }
 
-  async findOne(orderId: number): Promise<Order> {
-    validateId(orderId, 'Order');
-
-    const order = await this.repo.findOneBy({ orderId });
-
-    if (!order) {
-      throw new NotFoundException(`Order ${orderId} not found`);
+  async findOne(orderId: number) {
+    if (!orderId || orderId < 1) {
+      throw new NotFoundException('Invalid order ID');
     }
-    return order;
+    return await this.repo.findOne({
+      where: { orderId },
+    });
   }
 
-  async findOrderByRequest(requestId: number): Promise<Order> {
-    validateId(requestId, 'Request');
-
+  async findOrderByRequest(requestId: number): Promise<Order | null> {
     const order = await this.repo.findOne({
       where: { requestId },
       relations: ['request'],
     });
 
     if (!order) {
-      throw new NotFoundException(
-        `Order with request ID ${requestId} not found`,
-      );
+      return null;
+    } else {
+      return order;
     }
-    return order;
   }
 
-  async findOrderPantry(orderId: number): Promise<Pantry> {
-    validateId(orderId, 'Order');
-
+  async findOrderPantry(orderId: number): Promise<Pantry | null> {
     const order = await this.repo.findOne({
       where: { orderId },
       relations: ['pantry'],
     });
 
     if (!order) {
-      throw new NotFoundException(`Order ${orderId} not found`);
+      return null;
+    } else {
+      return order.pantry;
     }
-    return order.pantry;
   }
 
-  async findOrderFoodRequest(orderId: number): Promise<FoodRequest> {
-    validateId(orderId, 'Order');
-
+  async findOrderFoodRequest(orderId: number): Promise<FoodRequest | null> {
     const order = await this.repo.findOne({
       where: { orderId },
       relations: ['request'],
     });
 
     if (!order) {
-      throw new NotFoundException(`Order ${orderId} not found`);
+      return null;
+    } else {
+      return order.request;
     }
-    return order.request;
   }
 
-  async findOrderFoodManufacturer(orderId: number): Promise<FoodManufacturer> {
-    validateId(orderId, 'Order');
-
-    const order = await this.findOne(orderId);
-
-    if (!order) {
-      throw new NotFoundException(`Order ${orderId} not found`);
-    }
-    return order.foodManufacturer;
+  async findOrderFoodManufacturer(
+    orderId: number,
+  ): Promise<FoodManufacturer | null> {
+    const order = this.findOne(orderId);
+    return (await order).foodManufacturer;
   }
 
-  async findOrderDonation(orderId: number): Promise<Donation> {
-    validateId(orderId, 'Order');
-
+  async findOrderDonation(orderId: number): Promise<Donation | null> {
     const order = await this.repo.findOne({
       where: { orderId },
       relations: ['donation'],
     });
 
     if (!order) {
-      throw new NotFoundException(`Order ${orderId} not found`);
+      return null;
+    } else {
+      return order.donation;
     }
-    return order.donation;
   }
 
   async updateStatus(orderId: number, newStatus: string) {
-    validateId(orderId, 'Order');
+    if (!orderId || orderId < 1) {
+      throw new NotFoundException('Invalid order ID');
+    }
 
     // TODO: Once we start navigating to proper food manufacturer page, change the 1 to be the proper food manufacturer id
     await this.repo
diff --git a/apps/frontend/src/app.tsx b/apps/frontend/src/app.tsx
index 6dfdeecb..ac572985 100644
--- a/apps/frontend/src/app.tsx
+++ b/apps/frontend/src/app.tsx
@@ -20,6 +20,7 @@ import VolunteerManagement from '@containers/volunteerManagement';
 import FoodManufacturerOrderDashboard from '@containers/foodManufacturerOrderDashboard';
 import DonationManagement from '@containers/donationManagement';
 import AdminDonation from '@containers/adminDonation';
+import AdminOrderManagement from '@containers/adminOrderManagement';
 
 const router = createBrowserRouter([
   {
@@ -84,6 +85,10 @@ const router = createBrowserRouter([
         path: '/admin-donation',
         element: <AdminDonation />,
       },
+      {
+        path: '/admin-order-management',
+        element: <AdminOrderManagement />,
+      },
       {
         path: '/volunteer-management',
         element: <VolunteerManagement />,
diff --git a/apps/frontend/src/components/forms/deliveryConfirmationModal.tsx b/apps/frontend/src/components/forms/deliveryConfirmationModal.tsx
index 718a540f..b9431fb8 100644
--- a/apps/frontend/src/components/forms/deliveryConfirmationModal.tsx
+++ b/apps/frontend/src/components/forms/deliveryConfirmationModal.tsx
@@ -55,7 +55,11 @@ const DeliveryConfirmationModal: React.FC<DeliveryConfirmationModalProps> = ({
   };
 
   return (
-    <Dialog.Root open={isOpen} onOpenChange={(e) => !e.open && onClose()} size="xl">
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={(e) => !e.open && onClose()}
+      size="xl"
+    >
       <Dialog.Backdrop />
       <Dialog.Positioner>
         <Dialog.Content maxW="49em">
@@ -76,7 +80,11 @@ const DeliveryConfirmationModal: React.FC<DeliveryConfirmationModalProps> = ({
                   <Text fontSize={20} fontWeight={700}>
                     Delivery Date
                   </Text>
-                  <Field.RequiredIndicator color="red" fontSize={20} fontWeight={700}/>
+                  <Field.RequiredIndicator
+                    color="red"
+                    fontSize={20}
+                    fontWeight={700}
+                  />
                 </Field.Label>
                 <Input
                   type="date"
@@ -110,7 +118,9 @@ const DeliveryConfirmationModal: React.FC<DeliveryConfirmationModalProps> = ({
                   accept=".jpg,.jpeg,.png"
                   onChange={handlePhotoChange}
                 />
-                <Field.HelperText>Select up to 3 photos to upload.</Field.HelperText>
+                <Field.HelperText>
+                  Select up to 3 photos to upload.
+                </Field.HelperText>
                 <Box mt={3}>{renderPhotoNames()}</Box>
               </Field.Root>
               <HStack gap="24px" justifyContent="space-between" mt={4}>
diff --git a/apps/frontend/src/components/forms/donationDetailsModal.tsx b/apps/frontend/src/components/forms/donationDetailsModal.tsx
index 41c8f84e..d37e2d8d 100644
--- a/apps/frontend/src/components/forms/donationDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/donationDetailsModal.tsx
@@ -1,5 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { Box, Text, VStack, Dialog, Portal, CloseButton } from '@chakra-ui/react';
+import {
+  Box,
+  Text,
+  VStack,
+  Dialog,
+  Portal,
+  CloseButton,
+} from '@chakra-ui/react';
 import ApiClient from '@api/apiClient';
 import { Donation } from 'types/types';
 import { DonationItem } from 'types/types';
@@ -19,13 +26,15 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
   const [donation, setDonation] = useState<Donation | null>(null);
   const [items, setItems] = useState<DonationItem[]>([]);
 
-  useEffect(() => { 
+  useEffect(() => {
     if (isOpen) {
       const fetchData = async () => {
         try {
           const donationData = await ApiClient.getOrderDonation(donationId);
-          const itemsData = await ApiClient.getDonationItemsByDonationId(donationId);
-          
+          const itemsData = await ApiClient.getDonationItemsByDonationId(
+            donationId,
+          );
+
           setDonation(donationData);
           setItems(itemsData);
         } catch (error) {
@@ -43,83 +52,95 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
     }
     acc[item.foodType].push(item);
     return acc;
-  }, {} as Record<string, DonationItem[]>)
+  }, {} as Record<string, DonationItem[]>);
 
   return (
     <Dialog.Root open={isOpen} onOpenChange={(e) => !e.open && onClose()}>
-        <Portal>
-            <Dialog.Backdrop bg="blackAlpha.200"/>
-            <Dialog.Positioner>
-                <Dialog.Content>
-                    <Dialog.CloseTrigger asChild>
-                      <CloseButton />
-                    </Dialog.CloseTrigger>
+      <Portal>
+        <Dialog.Backdrop bg="blackAlpha.200" />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.CloseTrigger asChild>
+              <CloseButton />
+            </Dialog.CloseTrigger>
 
-                    <Dialog.Header>
-                      <VStack align="stretch" gap={0}>
-                        <Dialog.Title fontSize="lg" mb={2} fontWeight="600" fontFamily="'Inter', sans-serif">
-                          Donation #{donationId} Details
-                        </Dialog.Title>
-                        {donation && (
-                          <>
-                            <Text fontSize="sm" color="neutral.800">
-                              {donation.foodManufacturer?.foodManufacturerName}
-                            </Text>
-                            <Text fontSize="sm" color="neutral.800">
-                              {formatDate(donation.dateDonated)}
-                            </Text>
-                          </>
-                        )}
-                      </VStack>
-                    </Dialog.Header>
-                
-                    <Dialog.Body>
-                      {donation && (
-                        <VStack align="stretch" gap={4} my={2}>
-                          {Object.entries(groupedItems).map(([foodType, typeItems]) => (
-                            <Box key={foodType}>
-                              <Text fontSize="md" fontWeight="600" mb={2} color="neutral.800">
-                                {foodType}
+            <Dialog.Header>
+              <VStack align="stretch" gap={0}>
+                <Dialog.Title
+                  fontSize="lg"
+                  mb={2}
+                  fontWeight="600"
+                  fontFamily="'Inter', sans-serif"
+                >
+                  Donation #{donationId} Details
+                </Dialog.Title>
+                {donation && (
+                  <>
+                    <Text fontSize="sm" color="neutral.800">
+                      {donation.foodManufacturer?.foodManufacturerName}
+                    </Text>
+                    <Text fontSize="sm" color="neutral.800">
+                      {formatDate(donation.dateDonated)}
+                    </Text>
+                  </>
+                )}
+              </VStack>
+            </Dialog.Header>
+
+            <Dialog.Body>
+              {donation && (
+                <VStack align="stretch" gap={4} my={2}>
+                  {Object.entries(groupedItems).map(([foodType, typeItems]) => (
+                    <Box key={foodType}>
+                      <Text
+                        fontSize="md"
+                        fontWeight="600"
+                        mb={2}
+                        color="neutral.800"
+                      >
+                        {foodType}
+                      </Text>
+                      <VStack align="stretch" gap={2}>
+                        {typeItems.map((item, index) => (
+                          <Box
+                            key={index}
+                            display="flex"
+                            p={0}
+                            border="1px solid"
+                            borderColor="neutral.100"
+                            borderRadius="md"
+                            overflow="hidden"
+                          >
+                            <Box flex={1} p={3} bg="white">
+                              <Text color="neutral.800" fontSize="sm">
+                                {item.itemName}
                               </Text>
-                              <VStack align="stretch" gap={2}>
-                                {typeItems.map((item, index) => (
-                                  <Box
-                                    key={index}
-                                    display="flex"
-                                    p={0}
-                                    border="1px solid"
-                                    borderColor="neutral.100"
-                                    borderRadius="md"
-                                    overflow="hidden"
-                                  >
-                                    <Box flex={1} p={3} bg="white">
-                                      <Text color="neutral.800" fontSize="sm">
-                                        {item.itemName}
-                                      </Text>
-                                    </Box>
-                                    <Box 
-                                      borderLeft="1px solid" 
-                                      borderColor="neutral.100" 
-                                      p={3}
-                                      minW="50px"
-                                      display="flex"
-                                      alignItems="center"
-                                      justifyContent="center"
-                                      bg="white"
-                                    >
-                                      <Text color="neutral.800" fontSize="sm">{item.quantity}</Text>
-                                    </Box>
-                                  </Box>
-                                ))}
-                              </VStack>
                             </Box>
-                          ))}
-                        </VStack>
-                      )}
-                    </Dialog.Body>
-                </Dialog.Content>
-            </Dialog.Positioner>
-        </Portal>
+                            <Box
+                              borderLeft="1px solid"
+                              borderColor="neutral.100"
+                              p={3}
+                              minW="50px"
+                              display="flex"
+                              alignItems="center"
+                              justifyContent="center"
+                              bg="white"
+                            >
+                              <Text color="neutral.800" fontSize="sm">
+                                {item.quantity}
+                              </Text>
+                            </Box>
+                          </Box>
+                        ))}
+                      </VStack>
+                    </Box>
+                  ))}
+                </VStack>
+              )}
+            </Dialog.Body>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
     </Dialog.Root>
   );
 };
diff --git a/apps/frontend/src/components/forms/newDonationFormModal.tsx b/apps/frontend/src/components/forms/newDonationFormModal.tsx
index 4d6e805a..100612b6 100644
--- a/apps/frontend/src/components/forms/newDonationFormModal.tsx
+++ b/apps/frontend/src/components/forms/newDonationFormModal.tsx
@@ -171,7 +171,11 @@ const NewDonationFormModal: React.FC<NewDonationFormModalProps> = ({
   };
 
   return (
-    <Dialog.Root open={isOpen} size={'xl'} onClose={(e) => !e.open && onClose()}>
+    <Dialog.Root
+      open={isOpen}
+      size={'xl'}
+      onClose={(e) => !e.open && onClose()}
+    >
       <Dialog.Backdrop />
       <Dialog.Content maxW="49em">
         <Dialog.Header asChild>
@@ -186,7 +190,13 @@ const NewDonationFormModal: React.FC<NewDonationFormModalProps> = ({
             Please make sure to fill out all fields before submitting.
           </Text>
           <Text mb="1.5em">Log a new donation</Text>
-          <Box display="block" maxW="100%" overflowX="auto" overflowY="hidden" whiteSpace="nowrap">
+          <Box
+            display="block"
+            maxW="100%"
+            overflowX="auto"
+            overflowY="hidden"
+            whiteSpace="nowrap"
+          >
             <Table.Root variant="line">
               <TableCaption>
                 <Stack direction="row" align="center" gap={3} mt={3}>
@@ -221,7 +231,7 @@ const NewDonationFormModal: React.FC<NewDonationFormModalProps> = ({
                     </Table.Cell>
                     <Table.Cell>
                       <NativeSelect.Root>
-                        <NativeSelect.Field 
+                        <NativeSelect.Field
                           placeholder="Select a food type"
                           value={row.foodType}
                           onChange={(e) =>
diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
new file mode 100644
index 00000000..bb2f9168
--- /dev/null
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Box,
+  Text,
+  VStack,
+  Dialog,
+  Portal,
+  CloseButton,
+} from '@chakra-ui/react';
+import ApiClient from '@api/apiClient';
+import { Donation, FoodRequest, Order } from 'types/types';
+import { DonationItem } from 'types/types';
+import { formatDate } from '@utils/utils';
+
+interface OrderDetailsModalProps {
+  orderId: number;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
+  orderId,
+  isOpen,
+  onClose,
+}) => {
+  const [foodRequest, setFoodRequest] = useState<FoodRequest | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      const fetchData = async () => {
+        try {
+          const foodRequestData = await ApiClient.getFoodRequestFromOrder(
+            orderId,
+          );
+          setFoodRequest(foodRequestData);
+        } catch (error) {
+          console.error('Error fetching food request details:', error);
+        }
+      };
+
+      fetchData();
+    }
+  }, [isOpen, orderId]);
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={(e) => !e.open && onClose()}>
+      <Portal>
+        <Dialog.Backdrop bg="blackAlpha.200" />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.CloseTrigger asChild>
+              <CloseButton />
+            </Dialog.CloseTrigger>
+
+            <Dialog.Header>
+              <VStack align="stretch" gap={0}>
+                <Dialog.Title
+                  fontSize="lg"
+                  mb={2}
+                  fontWeight="600"
+                  fontFamily="'Inter', sans-serif"
+                >
+                  Order #{orderId} Details
+                </Dialog.Title>
+                {foodRequest && (
+                  <>
+                    <Text fontSize="sm" color="neutral.800">
+                      Request Id #{foodRequest.requestId}
+                    </Text>
+                    <Text fontSize="sm" color="neutral.800">
+                      Requested {formatDate(foodRequest.requestedAt)}
+                    </Text>
+                  </>
+                )}
+              </VStack>
+            </Dialog.Header>
+
+            <Dialog.Body>
+              {foodRequest && (
+                <VStack align="stretch" gap={6} my={2} color="neutral.800">
+                  <Box>
+                    <Text fontSize="md" fontWeight="600" mb={1}>
+                      Size of Shipment
+                    </Text>
+                    <Text fontSize="sm" fontWeight="400" ml={2}>
+                      {foodRequest.requestedSize}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fontSize="md" fontWeight="600" mb={1}>
+                      Food Type(s)
+                    </Text>
+                    <Box>
+                      {foodRequest.requestedItems.map((type, index) => (
+                        <Box
+                          display="inline-flex"
+                          alignItems="center"
+                          justifyContent="space-between"
+                          backgroundColor="neutral.100"
+                          borderRadius="md"
+                          pl={2}
+                          pr={3}
+                          py={2}
+                          mr={2}
+                          mb={2}
+                          key={index}
+                          minW="fit-content"
+                        >
+                          <Text fontSize="sm" fontWeight="400" mr={10}>
+                            {type}
+                          </Text>
+                          <Text cursor="pointer" fontWeight="400">
+                            x
+                          </Text>
+                        </Box>
+                      ))}
+                    </Box>
+                  </Box>
+                  <Box>
+                    <Text fontSize="md" fontWeight="600" mb={1}>
+                      Additional Information
+                    </Text>
+                    <Text fontSize="sm" fontWeight="400" ml={2}>
+                      {foodRequest.additionalInformation ||
+                        'No details provided.'}
+                    </Text>
+                  </Box>
+                </VStack>
+              )}
+            </Dialog.Body>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
+  );
+};
+
+export default OrderDetailsModal;
diff --git a/apps/frontend/src/components/forms/orderInformationModal.tsx b/apps/frontend/src/components/forms/orderInformationModal.tsx
index d737caf0..4d7437f2 100644
--- a/apps/frontend/src/components/forms/orderInformationModal.tsx
+++ b/apps/frontend/src/components/forms/orderInformationModal.tsx
@@ -1,8 +1,4 @@
-import {
-  VStack,
-  Text,
-  Dialog,
-} from '@chakra-ui/react';
+import { VStack, Text, Dialog } from '@chakra-ui/react';
 import { useState, useEffect } from 'react';
 import ApiClient from '@api/apiClient';
 import { Pantry, Allocation } from 'types/types';
@@ -42,7 +38,11 @@ const OrderInformationModal: React.FC<OrderInformationModalProps> = ({
   }, [isOpen, orderId]);
 
   return (
-    <Dialog.Root open={isOpen} size="lg" onOpenChange={(e) => !e.open && onClose()}>
+    <Dialog.Root
+      open={isOpen}
+      size="lg"
+      onOpenChange={(e) => !e.open && onClose()}
+    >
       <Dialog.Backdrop />
       <Dialog.Positioner>
         <Dialog.Content>
diff --git a/apps/frontend/src/components/forms/pantryApplicationForm.tsx b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
index c9c700b1..b0ea64c7 100644
--- a/apps/frontend/src/components/forms/pantryApplicationForm.tsx
+++ b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
@@ -221,7 +221,11 @@ const PantryApplicationForm: React.FC = () => {
                 ...otherDietaryRestrictionsOptions,
                 'Unsure',
               ].map((value) => (
-                <Checkbox.Root key={value} value={value} name="dietaryRestrictions">
+                <Checkbox.Root
+                  key={value}
+                  value={value}
+                  name="dietaryRestrictions"
+                >
                   <Checkbox.HiddenInput />
                   <Checkbox.Control />
                   <Checkbox.Label>{value}</Checkbox.Label>
diff --git a/apps/frontend/src/components/forms/pantryApplicationModal.tsx b/apps/frontend/src/components/forms/pantryApplicationModal.tsx
index 0a0940bc..38c698de 100644
--- a/apps/frontend/src/components/forms/pantryApplicationModal.tsx
+++ b/apps/frontend/src/components/forms/pantryApplicationModal.tsx
@@ -1,10 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import {
-  Button,
-  Dialog,
-  Grid,
-  GridItem,
-} from '@chakra-ui/react';
+import { Button, Dialog, Grid, GridItem } from '@chakra-ui/react';
 import ApiClient from '@api/apiClient';
 import { Pantry, User } from 'types/types';
 
diff --git a/apps/frontend/src/components/forms/requestFormModal.tsx b/apps/frontend/src/components/forms/requestFormModal.tsx
index 94e79499..1ad255ce 100644
--- a/apps/frontend/src/components/forms/requestFormModal.tsx
+++ b/apps/frontend/src/components/forms/requestFormModal.tsx
@@ -71,7 +71,11 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
   ];
 
   return (
-    <Dialog.Root open={isOpen} size="xl" onOpenChange={(e) => !e.open && onClose()}>
+    <Dialog.Root
+      open={isOpen}
+      size="xl"
+      onOpenChange={(e) => !e.open && onClose()}
+    >
       <Dialog.Backdrop />
       <Dialog.Positioner>
         <Dialog.Content maxW="49em">
@@ -87,9 +91,9 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
               needs.
               <br />
               <br />
-              Please keep in mind that we may not be able to accommodate specific
-              food requests at all times, but we will do our best to match your
-              preferences.
+              Please keep in mind that we may not be able to accommodate
+              specific food requests at all times, but we will do our best to
+              match your preferences.
             </Text>
             <Form method="post" action="/food-request">
               <input type="hidden" name="pantryId" value={pantryId} />
@@ -98,7 +102,11 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                   <Text fontSize={20} fontWeight={700}>
                     Requested Size of Shipment
                   </Text>
-                  <Field.RequiredIndicator color="red" fontSize={20} fontWeight={700}/>
+                  <Field.RequiredIndicator
+                    color="red"
+                    fontSize={20}
+                    fontWeight={700}
+                  />
                 </Field.Label>
                 <RadioGroup.Root
                   value={requestedSize}
@@ -111,7 +119,9 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                       <RadioGroup.Item key={option.value} value={option.value}>
                         <RadioGroup.ItemHiddenInput />
                         <RadioGroup.ItemControl />
-                        <RadioGroup.ItemText>{option.label}</RadioGroup.ItemText>
+                        <RadioGroup.ItemText>
+                          {option.label}
+                        </RadioGroup.ItemText>
                       </RadioGroup.Item>
                     ))}
                   </HStack>
@@ -123,7 +133,11 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                   <Text fontSize={20} fontWeight={700}>
                     Requested Shipment
                   </Text>
-                  <Field.RequiredIndicator color="red" fontSize={20} fontWeight={700}/>
+                  <Field.RequiredIndicator
+                    color="red"
+                    fontSize={20}
+                    fontWeight={700}
+                  />
                 </Field.Label>
                 <CheckboxGroup
                   value={selectedItems}
@@ -139,7 +153,7 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                       >
                         <Checkbox.HiddenInput />
                         <Checkbox.Control />
-                        <Checkbox.Label >{allergen}</Checkbox.Label>
+                        <Checkbox.Label>{allergen}</Checkbox.Label>
                       </Checkbox.Root>
                     ))}
                   </SimpleGrid>
@@ -151,7 +165,11 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                   <Text fontSize={20} fontWeight={700}>
                     Additional Comments
                   </Text>
-                  <Field.RequiredIndicator color="red" fontSize={20} fontWeight={700}/>
+                  <Field.RequiredIndicator
+                    color="red"
+                    fontSize={20}
+                    fontWeight={700}
+                  />
                 </Field.Label>
                 <Textarea
                   name="notes"
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
new file mode 100644
index 00000000..a590cecc
--- /dev/null
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -0,0 +1,505 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Box,
+  Button,
+  Table,
+  Heading,
+  Pagination,
+  IconButton,
+  VStack,
+  ButtonGroup,
+  Checkbox,
+} from '@chakra-ui/react';
+import {
+  ArrowDownUp,
+  ChevronRight,
+  ChevronLeft,
+  Funnel,
+  Mail,
+} from 'lucide-react';
+import ApiClient from '@api/apiClient';
+import { Order } from 'types/types';
+import OrderDetailsModal from '@components/forms/orderDetailsModal';
+
+interface OrderTableSectionProps {
+  orders: Order[];
+  status: string;
+  color: string;
+  onOrderSelect: (orderId: number | null) => void;
+  selectedOrderId: number | null;
+}
+
+const OrderTableSection: React.FC<OrderTableSectionProps> = ({
+  orders,
+  status,
+  color,
+  onOrderSelect,
+  selectedOrderId,
+}) => {
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
+  const [isSortOpen, setIsSortOpen] = useState(false);
+  const [selectedPantries, setSelectedPantries] = useState<string[]>([]);
+  const [sortAsc, setSortAsc] = useState(true);
+
+  const assigneeColors = ['#F89E19', '#CC3538', '#2795A5', '#2B4E60'];
+
+  const pantryOptions = [
+    ...new Set(orders.map((o) => o.pantry.pantryName)),
+  ].sort((a, b) => a.localeCompare(b));
+
+  const handleFilterChange = (pantry: string, checked: boolean) => {
+    setSelectedPantries((prev) =>
+      checked ? [...prev, pantry] : prev.filter((m) => m !== pantry),
+    );
+  };
+
+  // Filter and sort the orders based on properties defined above (display this in the UI)
+  const filteredOrders = orders
+    .filter(
+      (o) =>
+        selectedPantries.length === 0 ||
+        selectedPantries.includes(o.pantry.pantryName),
+    )
+    .sort((a, b) =>
+      sortAsc
+        ? a.createdAt.localeCompare(b.createdAt)
+        : b.createdAt.localeCompare(a.createdAt),
+    );
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('en-US', {
+      month: 'numeric',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  const tableHeaderStyles = {
+    borderBottom: '1px solid',
+    borderColor: 'neutral.100',
+    color: 'neutral.800',
+    fontFamily: "'Inter', sans-serif",
+    fontWeight: '600',
+    fontSize: 'sm',
+  };
+
+  const tableCellStyles = {
+    borderBottom: '1px solid',
+    borderColor: 'neutral.100',
+    color: 'black',
+    fontFamily: "'Inter', sans-serif",
+    fontSize: 'sm',
+    py: 0,
+  };
+
+  return (
+    <Box>
+      <Box
+        display="inline-flex"
+        alignItems="center"
+        justifyContent="space-between"
+        backgroundColor={color}
+        p={3}
+        borderRadius="md"
+        minW="fit-content"
+      >
+        <Mail size={18} />
+        <Box ml={3}>{status}</Box>
+      </Box>
+      <Box
+        display="flex"
+        justifyContent="flex-end"
+        alignItems="center"
+        gap={2}
+        mb={6}
+        position="relative"
+        fontFamily="'Inter', sans-serif"
+      >
+        <Box position="relative">
+          <Button
+            onClick={() => setIsFilterOpen(!isFilterOpen)}
+            variant="outline"
+            color="neutral.600"
+            border="1px solid"
+            borderColor="neutral.200"
+            size="sm"
+            p={3}
+          >
+            <Funnel />
+            Filter
+          </Button>
+
+          {isFilterOpen && (
+            <>
+              <Box
+                position="fixed"
+                top={0}
+                left={0}
+                right={0}
+                bottom={0}
+                onClick={() => setIsFilterOpen(false)}
+                zIndex={10}
+              />
+              <Box
+                position="absolute"
+                top="100%"
+                right={0}
+                mt={2}
+                bg="white"
+                border="1px solid"
+                borderColor="gray.200"
+                borderRadius="md"
+                boxShadow="lg"
+                p={4}
+                minW="275px"
+                maxH="150px"
+                overflowY="auto"
+                zIndex={20}
+              >
+                <VStack align="stretch" gap={2}>
+                  {pantryOptions.map((pantry) => (
+                    <Checkbox.Root
+                      key={pantry}
+                      checked={selectedPantries.includes(pantry)}
+                      onCheckedChange={(e) =>
+                        handleFilterChange(pantry, !!e.checked)
+                      }
+                      color="black"
+                      size="sm"
+                    >
+                      <Checkbox.HiddenInput />
+                      <Checkbox.Control borderRadius="sm" />
+                      <Checkbox.Label>{pantry}</Checkbox.Label>
+                    </Checkbox.Root>
+                  ))}
+                </VStack>
+              </Box>
+            </>
+          )}
+        </Box>
+
+        <Box position="relative">
+          <Button
+            onClick={() => setIsSortOpen(!isSortOpen)}
+            variant="outline"
+            color="neutral.600"
+            border="1px solid"
+            borderColor="neutral.200"
+            p={3}
+            size="sm"
+          >
+            <ArrowDownUp />
+            Sort
+          </Button>
+
+          {isSortOpen && (
+            <>
+              <Box
+                position="fixed"
+                top={0}
+                left={0}
+                right={0}
+                bottom={0}
+                onClick={() => setIsSortOpen(false)}
+                zIndex={10}
+              />
+              <Box
+                position="absolute"
+                top="100%"
+                right={0}
+                mt={2}
+                bg="white"
+                border="1px solid"
+                borderColor="gray.200"
+                borderRadius="md"
+                boxShadow="lg"
+                p={2}
+                minW="120px"
+                zIndex={20}
+              >
+                <VStack align="stretch" gap={1}>
+                  <Box
+                    cursor="pointer"
+                    px={2}
+                    py={1}
+                    _hover={{ bg: 'gray.100' }}
+                    onClick={() => {
+                      setSortAsc(false);
+                      setIsSortOpen(false);
+                    }}
+                  >
+                    Newest
+                  </Box>
+                  <Box
+                    cursor="pointer"
+                    px={2}
+                    py={1}
+                    _hover={{ bg: 'gray.100' }}
+                    onClick={() => {
+                      setSortAsc(true);
+                      setIsSortOpen(false);
+                    }}
+                  >
+                    Oldest
+                  </Box>
+                </VStack>
+              </Box>
+            </>
+          )}
+        </Box>
+      </Box>
+      <Table.Root>
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeader
+              {...tableHeaderStyles}
+              borderRight="1px solid"
+              borderRightColor="neutral.100"
+              width="10%"
+            >
+              Order #
+            </Table.ColumnHeader>
+            <Table.ColumnHeader
+              {...tableHeaderStyles}
+              borderRight="1px solid"
+              borderRightColor="neutral.100"
+              width="25%"
+            >
+              Pantry
+            </Table.ColumnHeader>
+            <Table.ColumnHeader
+              {...tableHeaderStyles}
+              borderRight="1px solid"
+              borderRightColor="neutral.100"
+              width="15%"
+            >
+              Assignee
+            </Table.ColumnHeader>
+            <Table.ColumnHeader
+              {...tableHeaderStyles}
+              borderRight="1px solid"
+              borderRightColor="neutral.100"
+              width="15%"
+            >
+              Status
+            </Table.ColumnHeader>
+            <Table.ColumnHeader
+              {...tableHeaderStyles}
+              textAlign="right"
+              width="25%"
+            >
+              Date Started
+            </Table.ColumnHeader>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {filteredOrders.map((order, index) => (
+            <Table.Row
+              key={`${order.orderId}-${index}`}
+              _hover={{ bg: 'gray.50' }}
+            >
+              <Table.Cell
+                {...tableCellStyles}
+                borderRight="1px solid"
+                borderRightColor="neutral.100"
+              >
+                <Button
+                  variant="plain"
+                  textDecoration="underline"
+                  onClick={() => onOrderSelect(order.orderId)}
+                >
+                  {order.orderId}
+                </Button>
+                {selectedOrderId === order.orderId && (
+                  <OrderDetailsModal
+                    orderId={selectedOrderId}
+                    isOpen={true}
+                    onClose={() => onOrderSelect(null)}
+                  />
+                )}
+              </Table.Cell>
+              <Table.Cell
+                {...tableCellStyles}
+                borderRight="1px solid"
+                borderRightColor="neutral.100"
+              >
+                {order.pantry.pantryName}
+              </Table.Cell>
+              <Table.Cell
+                {...tableCellStyles}
+                borderRight="1px solid"
+                borderRightColor="neutral.100"
+              >
+                <Box
+                  borderRadius="full"
+                  bg={
+                    assigneeColors[
+                      Math.floor(Math.random() * assigneeColors.length)
+                    ]
+                  }
+                  width="38px"
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="center"
+                  my={2}
+                  p={2}
+                >
+                  {order.pantry.ssfRepresentative.firstName[0]}
+                  {order.pantry.ssfRepresentative.lastName[0]}
+                </Box>
+              </Table.Cell>
+              <Table.Cell
+                {...tableCellStyles}
+                borderRight="1px solid"
+                borderRightColor="neutral.100"
+              >
+                <Box
+                  borderRadius="md"
+                  bg={color}
+                  display="inline-block"
+                  my={2}
+                  p={1}
+                >
+                  {status}
+                </Box>
+              </Table.Cell>
+              <Table.Cell
+                {...tableCellStyles}
+                textAlign="right"
+                color="neutral.700"
+              >
+                {formatDate(order.createdAt)}
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+    </Box>
+  );
+};
+
+const AdminOrderManagement: React.FC = () => {
+  const [statusOrders, setStatusOrders] = useState<Record<string, Order[]>>({});
+  const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const STATUS_ORDER = ['pending', 'shipped', 'delivered'];
+  const STATUS_COLORS = ['#FEECD1', '#D5DCDF', '#D4EAED'];
+  const MAX_PER_STATUS = 5;
+
+  const totalPages =
+    Math.max(
+      ...Object.values(statusOrders).map((orders) =>
+        Math.ceil(orders.length / MAX_PER_STATUS),
+      ),
+    ) || 1;
+
+  const displayedStatusOrders = Object.fromEntries(
+    Object.entries(statusOrders).map(([status, orders]) => [
+      status,
+      orders.slice(
+        (currentPage - 1) * MAX_PER_STATUS,
+        currentPage * MAX_PER_STATUS,
+      ),
+    ]),
+  );
+
+  useEffect(() => {
+    const fetchOrders = async () => {
+      try {
+        const data = await ApiClient.getAllOrders();
+
+        // Build the grouped object first
+        const grouped: Record<string, Order[]> = {};
+
+        for (const order of data) {
+          const status = order.status;
+          if (!grouped[status]) grouped[status] = [];
+          grouped[status].push(order);
+        }
+
+        // Set state once
+        setStatusOrders(grouped);
+      } catch (error) {
+        alert('Error fetching orders: ' + error);
+      }
+    };
+
+    fetchOrders();
+  }, []);
+
+  return (
+    <Box p={12}>
+      <Heading
+        size="4xl"
+        color="gray.600"
+        fontWeight="normal"
+        mb={6}
+        fontFamily="'Instrument Serif', serif"
+      >
+        Order Management
+      </Heading>
+
+      {STATUS_ORDER.map((status, index) => {
+        const orders = displayedStatusOrders[status] || [];
+        if (orders.length === 0) return null;
+
+        return (
+          <Box key={status} mb={12}>
+            <OrderTableSection
+              key={status}
+              orders={orders}
+              status={status.charAt(0).toUpperCase() + status.slice(1)} // Capitalize first letter
+              color={STATUS_COLORS[index % STATUS_COLORS.length]}
+              selectedOrderId={selectedOrderId}
+              onOrderSelect={setSelectedOrderId}
+            />
+          </Box>
+        );
+      })}
+
+      <Pagination.Root
+        count={totalPages * MAX_PER_STATUS}
+        pageSize={MAX_PER_STATUS}
+        page={currentPage}
+        onPageChange={(e) => setCurrentPage(e.page)}
+      >
+        <ButtonGroup
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          mt={12}
+          variant="outline"
+          size="sm"
+        >
+          <Pagination.PrevTrigger
+            color="neutral.800"
+            _hover={{ color: 'black' }}
+          >
+            <ChevronLeft size={16} />
+          </Pagination.PrevTrigger>
+
+          <Pagination.Items
+            render={(page) => (
+              <IconButton
+                borderColor={{ base: 'neutral.100', _selected: 'neutral.600' }}
+              >
+                {page.value}
+              </IconButton>
+            )}
+          />
+
+          <Pagination.NextTrigger
+            color="neutral.800"
+            _hover={{ color: 'black' }}
+          >
+            <ChevronRight size={16} />
+          </Pagination.NextTrigger>
+        </ButtonGroup>
+      </Pagination.Root>
+    </Box>
+  );
+};
+
+export default AdminOrderManagement;
diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx
index 10110223..7f571895 100644
--- a/apps/frontend/src/main.tsx
+++ b/apps/frontend/src/main.tsx
@@ -14,4 +14,4 @@ root.render(
       <App />
     </ChakraProvider>
   </StrictMode>,
-);
\ No newline at end of file
+);
diff --git a/apps/frontend/src/theme.ts b/apps/frontend/src/theme.ts
index b3e4c58c..3d8042c1 100644
--- a/apps/frontend/src/theme.ts
+++ b/apps/frontend/src/theme.ts
@@ -35,4 +35,4 @@ const customConfig = defineConfig({
   },
 });
 
-export const system = createSystem(defaultConfig, customConfig);
\ No newline at end of file
+export const system = createSystem(defaultConfig, customConfig);
diff --git a/apps/frontend/src/types/types.ts b/apps/frontend/src/types/types.ts
index 4ffc02a3..55a18ff2 100644
--- a/apps/frontend/src/types/types.ts
+++ b/apps/frontend/src/types/types.ts
@@ -60,7 +60,7 @@ export interface Pantry {
   serveAllergicChildren: string;
   newsletterSubscription: boolean;
   restrictions: string[];
-  ssfRepresentativeId: number;
+  ssfRepresentative: User;
   pantryRepresentativeId: number;
   status: string;
   dateApplied: string;
@@ -83,15 +83,16 @@ export interface FoodRequest {
 
 export interface Order {
   orderId: number;
+  pantry: Pantry;
+  request: FoodRequest;
   requestId: number;
-  pantryId: number;
-  foodManufacturer: FoodManufacturer;
+  foodManufacturer: FoodManufacturer | null;
   shippedBy: number | null;
+  donation: Donation;
   status: string;
   createdAt: string;
-  shippedAt: string;
-  deliveredAt: string;
-  donationId: number;
+  shippedAt: string | null;
+  deliveredAt: string | null;
 }
 
 export interface FoodManufacturer {

From 3f6f05c39433a2f6a7a399e6d16f129cd8cccc3f Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Wed, 8 Oct 2025 23:48:43 -0400
Subject: [PATCH 02/29] Fixed issues

---
 .../frontend/src/containers/adminOrderManagement.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index a590cecc..a6250233 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -17,6 +17,7 @@ import {
   Funnel,
   Mail,
 } from 'lucide-react';
+import { formatDate } from '@utils/utils';
 import ApiClient from '@api/apiClient';
 import { Order } from 'types/types';
 import OrderDetailsModal from '@components/forms/orderDetailsModal';
@@ -49,7 +50,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
 
   const handleFilterChange = (pantry: string, checked: boolean) => {
     setSelectedPantries((prev) =>
-      checked ? [...prev, pantry] : prev.filter((m) => m !== pantry),
+      checked ? [...prev, pantry] : prev.filter((p) => p !== pantry),
     );
   };
 
@@ -66,15 +67,6 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
         : b.createdAt.localeCompare(a.createdAt),
     );
 
-  const formatDate = (dateStr: string) => {
-    const date = new Date(dateStr);
-    return date.toLocaleDateString('en-US', {
-      month: 'numeric',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  };
-
   const tableHeaderStyles = {
     borderBottom: '1px solid',
     borderColor: 'neutral.100',

From 7023e8a8b13bf3171f18d9bfcbd0e7b63907f58d Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Tue, 18 Nov 2025 23:08:06 -0500
Subject: [PATCH 03/29] Final commit

---
 apps/backend/src/orders/order.controller.ts |  3 ++-
 apps/frontend/src/theme.ts                  | 13 +++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/backend/src/orders/order.controller.ts b/apps/backend/src/orders/order.controller.ts
index 2e0f6b7c..bf1010bf 100644
--- a/apps/backend/src/orders/order.controller.ts
+++ b/apps/backend/src/orders/order.controller.ts
@@ -23,8 +23,9 @@ export class OrdersController {
     private readonly allocationsService: AllocationsService,
   ) {}
 
-  // Called like: /?status=pending&pantryName=Test%20Pantry&pantryName=Test%20Pantry%2
+  // Called like: /?status=pending&pantryName=Test%20Pantry&pantryName=Test%20Pantry%202
   // %20 is the URL encoded space character
+  // This gets all pantries with the name Test Pantry or Test Pantry 2 that have a pending status
   @Get('/')
   async getAllOrders(
     @Query('status') status?: string,
diff --git a/apps/frontend/src/theme.ts b/apps/frontend/src/theme.ts
index 46e012a6..c504bb84 100644
--- a/apps/frontend/src/theme.ts
+++ b/apps/frontend/src/theme.ts
@@ -1,4 +1,9 @@
-import { createSystem, defaultConfig, defineConfig, defineTextStyles } from '@chakra-ui/react';
+import {
+  createSystem,
+  defaultConfig,
+  defineConfig,
+  defineTextStyles,
+} from '@chakra-ui/react';
 
 const textStyles = defineTextStyles({
   body: {
@@ -10,7 +15,7 @@ const textStyles = defineTextStyles({
     value: {
       fontFamily: 'instrument',
       fontSize: '32px',
-      fontWeight: '400'
+      fontWeight: '400',
     },
   },
   h2: {
@@ -53,7 +58,7 @@ const customConfig = defineConfig({
       colors: {
         white: { value: '#fff' },
         black: { value: '#000' },
-        blue: { 
+        blue: {
           ssf: { value: '#2B5061' },
           100: { value: '#bee3f8' },
         },
@@ -79,4 +84,4 @@ const customConfig = defineConfig({
   },
 });
 
-export const system = createSystem(defaultConfig, customConfig); 
+export const system = createSystem(defaultConfig, customConfig);

From 7fe9ca5fe54677025f0a34303f924190110b38f2 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Wed, 26 Nov 2025 20:34:08 -0500
Subject: [PATCH 04/29] Final commit

---
 apps/backend/src/config/typeorm.ts            |  2 +-
 .../donationItems/donationItems.controller.ts |  9 ++++---
 .../src/donations/donations.controller.ts     |  4 +--
 apps/backend/src/donations/types.ts           |  2 +-
 .../src/foodRequests/request.controller.ts    |  9 ++++---
 ...1763963056712-AllergyFriendlyToBoolType.ts | 20 +++++++-------
 apps/backend/src/orders/order.service.spec.ts |  8 +++++-
 .../src/pantries/pantries.controller.ts       | 20 ++++++++------
 apps/backend/src/pantries/pantries.entity.ts  | 24 ++++++++++-------
 apps/backend/src/pantries/types.ts            |  2 +-
 .../forms/pantryApplicationForm.tsx           | 27 +++++++++++++------
 .../src/components/forms/requestFormModal.tsx |  4 +--
 apps/frontend/src/types/pantryEnums.ts        |  4 +--
 apps/frontend/src/types/types.ts              | 11 ++++----
 14 files changed, 88 insertions(+), 58 deletions(-)

diff --git a/apps/backend/src/config/typeorm.ts b/apps/backend/src/config/typeorm.ts
index 0fae486a..64c3bf7d 100644
--- a/apps/backend/src/config/typeorm.ts
+++ b/apps/backend/src/config/typeorm.ts
@@ -56,7 +56,7 @@ const config = {
     UpdatePantriesTable1742739750279,
     UpdatePantryUserFields1731171000000,
     RemoveOrdersDonationId1761500262238,
-    AllergyFriendlyToBoolType1763963056712
+    AllergyFriendlyToBoolType1763963056712,
   ],
 };
 
diff --git a/apps/backend/src/donationItems/donationItems.controller.ts b/apps/backend/src/donationItems/donationItems.controller.ts
index 96381fc0..96be5673 100644
--- a/apps/backend/src/donationItems/donationItems.controller.ts
+++ b/apps/backend/src/donationItems/donationItems.controller.ts
@@ -38,8 +38,8 @@ export class DonationItemsController {
         status: { type: 'string', example: 'available' },
         ozPerItem: { type: 'integer', example: 5 },
         estimatedValue: { type: 'integer', example: 100 },
-        foodType: { 
-          type: 'string', 
+        foodType: {
+          type: 'string',
           enum: Object.values(FoodType),
           example: FoodType.DAIRY_FREE_ALTERNATIVES,
         },
@@ -59,7 +59,10 @@ export class DonationItemsController {
       foodType: FoodType;
     },
   ): Promise<DonationItem> {
-    if (body.foodType && !Object.values(FoodType).includes(body.foodType as FoodType)) {
+    if (
+      body.foodType &&
+      !Object.values(FoodType).includes(body.foodType as FoodType)
+    ) {
       throw new BadRequestException('Invalid foodtype');
     }
     return this.donationItemsService.create(
diff --git a/apps/backend/src/donations/donations.controller.ts b/apps/backend/src/donations/donations.controller.ts
index d748df66..6bcd2a7e 100644
--- a/apps/backend/src/donations/donations.controller.ts
+++ b/apps/backend/src/donations/donations.controller.ts
@@ -46,8 +46,8 @@ export class DonationsController {
           type: 'string',
           format: 'date-time',
         },
-        status: { 
-          type: 'string', 
+        status: {
+          type: 'string',
           enum: Object.values(DonationStatus),
           example: DonationStatus.AVAILABLE,
         },
diff --git a/apps/backend/src/donations/types.ts b/apps/backend/src/donations/types.ts
index 549ee6c6..16387987 100644
--- a/apps/backend/src/donations/types.ts
+++ b/apps/backend/src/donations/types.ts
@@ -2,4 +2,4 @@ export enum DonationStatus {
   AVAILABLE = 'available',
   FULFILLED = 'fulfilled',
   MATCHING = 'matching',
-}
\ No newline at end of file
+}
diff --git a/apps/backend/src/foodRequests/request.controller.ts b/apps/backend/src/foodRequests/request.controller.ts
index c01eda5b..e3a93727 100644
--- a/apps/backend/src/foodRequests/request.controller.ts
+++ b/apps/backend/src/foodRequests/request.controller.ts
@@ -58,8 +58,8 @@ export class FoodRequestsController {
       type: 'object',
       properties: {
         pantryId: { type: 'integer', example: 1 },
-        requestedSize: { 
-          type: 'string', 
+        requestedSize: {
+          type: 'string',
           enum: Object.values(RequestSize),
           example: RequestSize.LARGE,
         },
@@ -166,7 +166,10 @@ export class FoodRequestsController {
     );
 
     const request = await this.requestsService.findOne(requestId);
-    await this.ordersService.updateStatus(request.order.orderId, OrderStatus.DELIVERED);
+    await this.ordersService.updateStatus(
+      request.order.orderId,
+      OrderStatus.DELIVERED,
+    );
 
     return this.requestsService.updateDeliveryDetails(
       requestId,
diff --git a/apps/backend/src/migrations/1763963056712-AllergyFriendlyToBoolType.ts b/apps/backend/src/migrations/1763963056712-AllergyFriendlyToBoolType.ts
index 079362d6..3a14c4d4 100644
--- a/apps/backend/src/migrations/1763963056712-AllergyFriendlyToBoolType.ts
+++ b/apps/backend/src/migrations/1763963056712-AllergyFriendlyToBoolType.ts
@@ -1,21 +1,21 @@
-import { MigrationInterface, QueryRunner } from "typeorm";
+import { MigrationInterface, QueryRunner } from 'typeorm';
 
-export class AllergyFriendlyToBoolType1763963056712 implements MigrationInterface {
-
-    public async up(queryRunner: QueryRunner): Promise<void> {
-        await queryRunner.query(`
+export class AllergyFriendlyToBoolType1763963056712
+  implements MigrationInterface
+{
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
             ALTER TABLE pantries 
             ALTER COLUMN dedicated_allergy_friendly TYPE BOOLEAN USING (FALSE),
             ALTER COLUMN dedicated_allergy_friendly SET NOT NULL;
         `);
-    }
+  }
 
-    public async down(queryRunner: QueryRunner): Promise<void> {
-        await queryRunner.query(`
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
             ALTER TABLE pantries 
             ALTER COLUMN dedicated_allergy_friendly TYPE VARCHAR(255),
             ALTER COLUMN dedicated_allergy_friendly DROP NOT NULL;
         `);
-    }
-
+  }
 }
diff --git a/apps/backend/src/orders/order.service.spec.ts b/apps/backend/src/orders/order.service.spec.ts
index 4c64ac10..b65e335b 100644
--- a/apps/backend/src/orders/order.service.spec.ts
+++ b/apps/backend/src/orders/order.service.spec.ts
@@ -6,7 +6,13 @@ import { OrdersService } from './order.service';
 import { mock } from 'jest-mock-extended';
 import { Pantry } from '../pantries/pantries.entity';
 import { User } from '../users/user.entity';
-import { AllergensConfidence, ClientVisitFrequency, PantryStatus, RefrigeratedDonation, ServeAllergicChildren } from '../pantries/types';
+import {
+  AllergensConfidence,
+  ClientVisitFrequency,
+  PantryStatus,
+  RefrigeratedDonation,
+  ServeAllergicChildren,
+} from '../pantries/types';
 import { OrderStatus } from './types';
 
 const mockOrdersRepository = mock<Repository<Order>>();
diff --git a/apps/backend/src/pantries/pantries.controller.ts b/apps/backend/src/pantries/pantries.controller.ts
index 6cc5d5da..d4aad408 100644
--- a/apps/backend/src/pantries/pantries.controller.ts
+++ b/apps/backend/src/pantries/pantries.controller.ts
@@ -5,13 +5,20 @@ import {
   Param,
   ParseIntPipe,
   Post,
-  ValidationPipe
+  ValidationPipe,
 } from '@nestjs/common';
 import { Pantry } from './pantries.entity';
 import { PantriesService } from './pantries.service';
 import { PantryApplicationDto } from './dtos/pantry-application.dto';
 import { ApiBody } from '@nestjs/swagger';
-import { Activity, AllergensConfidence, ClientVisitFrequency, RefrigeratedDonation, ReserveFoodForAllergic, ServeAllergicChildren } from './types';
+import {
+  Activity,
+  AllergensConfidence,
+  ClientVisitFrequency,
+  RefrigeratedDonation,
+  ReserveFoodForAllergic,
+  ServeAllergicChildren,
+} from './types';
 
 @Controller('pantries')
 export class PantriesController {
@@ -142,12 +149,9 @@ export class PantriesController {
           type: 'array',
           items: {
             type: 'string',
-            enum: Object.values(Activity)
+            enum: Object.values(Activity),
           },
-          example: [
-            Activity.COLLECT_FEEDBACK,
-            Activity.CREATE_LABELED_SHELF,
-          ],
+          example: [Activity.COLLECT_FEEDBACK, Activity.CREATE_LABELED_SHELF],
         },
         activitiesComments: {
           type: 'string',
@@ -190,7 +194,7 @@ export class PantriesController {
   })
   @Post()
   async submitPantryApplication(
-    @Body(new ValidationPipe()) 
+    @Body(new ValidationPipe())
     pantryData: PantryApplicationDto,
   ): Promise<void> {
     return this.pantriesService.addPantry(pantryData);
diff --git a/apps/backend/src/pantries/pantries.entity.ts b/apps/backend/src/pantries/pantries.entity.ts
index e3426c41..20ddacff 100644
--- a/apps/backend/src/pantries/pantries.entity.ts
+++ b/apps/backend/src/pantries/pantries.entity.ts
@@ -63,10 +63,11 @@ export class Pantry {
   })
   refrigeratedDonation: RefrigeratedDonation;
 
-  @Column({ name: 'reserve_food_for_allergic', 
-    type: 'enum', 
-    enum: ReserveFoodForAllergic, 
-    enumName: 'reserve_food_for_allergic_enum' 
+  @Column({
+    name: 'reserve_food_for_allergic',
+    type: 'enum',
+    enum: ReserveFoodForAllergic,
+    enumName: 'reserve_food_for_allergic_enum',
   })
   reserveFoodForAllergic: string;
 
@@ -114,7 +115,11 @@ export class Pantry {
   // cascade: ['insert'] means that when we create a new
   // pantry, the pantry user will automatically be added
   // to the User table
-  @OneToOne(() => User, { nullable: false, cascade: ['insert'], onDelete: 'CASCADE' })  
+  @OneToOne(() => User, {
+    nullable: false,
+    cascade: ['insert'],
+    onDelete: 'CASCADE',
+  })
   @JoinColumn({
     name: 'pantry_user_id',
     referencedColumnName: 'id',
@@ -136,12 +141,13 @@ export class Pantry {
   })
   dateApplied: Date;
 
-  @Column({ 
-    name: 'activities', 
+  @Column({
+    name: 'activities',
     type: 'enum',
-    enum: Activity, 
+    enum: Activity,
     enumName: 'activity_enum',
-    array: true })
+    array: true,
+  })
   activities: Activity[];
 
   @Column({ name: 'activities_comments', type: 'text', nullable: true })
diff --git a/apps/backend/src/pantries/types.ts b/apps/backend/src/pantries/types.ts
index f776991b..cdf8b671 100644
--- a/apps/backend/src/pantries/types.ts
+++ b/apps/backend/src/pantries/types.ts
@@ -33,7 +33,7 @@ export enum PantryStatus {
 export enum Activity {
   CREATE_LABELED_SHELF = 'Create labeled shelf',
   PROVIDE_EDUCATIONAL_PAMPHLETS = 'Provide educational pamphlets',
-  TRACK_DIETARY_NEEDS ='Spreadsheet to track dietary needs',
+  TRACK_DIETARY_NEEDS = 'Spreadsheet to track dietary needs',
   POST_RESOURCE_FLYERS = 'Post allergen-free resource flyers',
   SURVEY_CLIENTS = 'Survey clients to determine medical dietary needs',
   COLLECT_FEEDBACK = 'Collect feedback from allergen-avoidant clients',
diff --git a/apps/frontend/src/components/forms/pantryApplicationForm.tsx b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
index 4c7325bf..70f49e97 100644
--- a/apps/frontend/src/components/forms/pantryApplicationForm.tsx
+++ b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
@@ -515,12 +515,18 @@ export const submitPantryApplicationForm: ActionFunction = async ({
   const pantryApplicationData = new Map();
 
   const ActivityStorageMap: Record<string, string> = {
-    'Create a labeled, allergy-friendly shelf or shelves': Activity.CREATE_LABELED_SHELF,
-    'Provide clients and staff/volunteers with educational pamphlets': Activity.PROVIDE_EDUCATIONAL_PAMPHLETS,
-    "Use a spreadsheet to track clients' medical dietary needs and distribution of SSF items per month": Activity.TRACK_DIETARY_NEEDS,
-    'Post allergen-free resource flyers throughout pantry': Activity.POST_RESOURCE_FLYERS,
-    'Survey your clients to determine their medical dietary needs': Activity.SURVEY_CLIENTS,
-    'Collect feedback from allergen-avoidant clients on SSF foods': Activity.COLLECT_FEEDBACK,
+    'Create a labeled, allergy-friendly shelf or shelves':
+      Activity.CREATE_LABELED_SHELF,
+    'Provide clients and staff/volunteers with educational pamphlets':
+      Activity.PROVIDE_EDUCATIONAL_PAMPHLETS,
+    "Use a spreadsheet to track clients' medical dietary needs and distribution of SSF items per month":
+      Activity.TRACK_DIETARY_NEEDS,
+    'Post allergen-free resource flyers throughout pantry':
+      Activity.POST_RESOURCE_FLYERS,
+    'Survey your clients to determine their medical dietary needs':
+      Activity.SURVEY_CLIENTS,
+    'Collect feedback from allergen-avoidant clients on SSF foods':
+      Activity.COLLECT_FEEDBACK,
     'Something else': Activity.SOMETHING_ELSE,
   };
 
@@ -538,11 +544,16 @@ export const submitPantryApplicationForm: ActionFunction = async ({
   form.delete('restrictions');
 
   const selectedActivities = form.getAll('activities') as string[];
-  const convertedActivities = selectedActivities.map((activity) => ActivityStorageMap[activity]);
+  const convertedActivities = selectedActivities.map(
+    (activity) => ActivityStorageMap[activity],
+  );
   pantryApplicationData.set('activities', convertedActivities);
   form.delete('activities');
 
-  pantryApplicationData.set('dedicatedAllergyFriendly', form.get('dedicatedAllergyFriendly'));
+  pantryApplicationData.set(
+    'dedicatedAllergyFriendly',
+    form.get('dedicatedAllergyFriendly'),
+  );
   form.delete('dedicatedAllergyFriendly');
 
   // Handle all other questions
diff --git a/apps/frontend/src/components/forms/requestFormModal.tsx b/apps/frontend/src/components/forms/requestFormModal.tsx
index cb12dc51..9861327a 100644
--- a/apps/frontend/src/components/forms/requestFormModal.tsx
+++ b/apps/frontend/src/components/forms/requestFormModal.tsx
@@ -132,9 +132,7 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                       <RadioGroup.Item key={option} value={option}>
                         <RadioGroup.ItemHiddenInput />
                         <RadioGroup.ItemControl />
-                        <RadioGroup.ItemText>
-                          {option}
-                        </RadioGroup.ItemText>
+                        <RadioGroup.ItemText>{option}</RadioGroup.ItemText>
                       </RadioGroup.Item>
                     ))}
                   </HStack>
diff --git a/apps/frontend/src/types/pantryEnums.ts b/apps/frontend/src/types/pantryEnums.ts
index e5f13a6f..cdf8b671 100644
--- a/apps/frontend/src/types/pantryEnums.ts
+++ b/apps/frontend/src/types/pantryEnums.ts
@@ -33,7 +33,7 @@ export enum PantryStatus {
 export enum Activity {
   CREATE_LABELED_SHELF = 'Create labeled shelf',
   PROVIDE_EDUCATIONAL_PAMPHLETS = 'Provide educational pamphlets',
-  TRACK_DIETARY_NEEDS ='Spreadsheet to track dietary needs',
+  TRACK_DIETARY_NEEDS = 'Spreadsheet to track dietary needs',
   POST_RESOURCE_FLYERS = 'Post allergen-free resource flyers',
   SURVEY_CLIENTS = 'Survey clients to determine medical dietary needs',
   COLLECT_FEEDBACK = 'Collect feedback from allergen-avoidant clients',
@@ -44,4 +44,4 @@ export enum ReserveFoodForAllergic {
   YES = 'Yes',
   SOME = 'Some',
   NO = 'No',
-}
\ No newline at end of file
+}
diff --git a/apps/frontend/src/types/types.ts b/apps/frontend/src/types/types.ts
index e44c99f9..e133bc03 100644
--- a/apps/frontend/src/types/types.ts
+++ b/apps/frontend/src/types/types.ts
@@ -1,12 +1,12 @@
-import { 
-  RefrigeratedDonation, 
-  ReserveFoodForAllergic, 
-  ClientVisitFrequency, 
+import {
+  RefrigeratedDonation,
+  ReserveFoodForAllergic,
+  ClientVisitFrequency,
   ServeAllergicChildren,
   AllergensConfidence,
   PantryStatus,
   Activity,
-} from "./pantryEnums";
+} from './pantryEnums';
 
 // Note: The API calls as currently written do not
 // return a pantry's SSF representative or pantry
@@ -224,4 +224,3 @@ export enum DonationStatus {
   FULFILLED = 'fulfilled',
   MATCHING = 'matching',
 }
-

From 121d373cdfdcce146fc4dda7b3315d2328e655e6 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Thu, 27 Nov 2025 20:06:35 -0500
Subject: [PATCH 05/29] Fixed frontend changes

---
 apps/backend/src/orders/order.controller.ts            |  1 +
 apps/backend/src/orders/order.service.ts               |  5 -----
 .../src/components/forms/orderDetailsModal.tsx         | 10 +++++++---
 apps/frontend/src/containers/adminOrderManagement.tsx  |  6 +++---
 apps/frontend/src/types/types.ts                       |  1 +
 5 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/apps/backend/src/orders/order.controller.ts b/apps/backend/src/orders/order.controller.ts
index 4e74704e..e776877d 100644
--- a/apps/backend/src/orders/order.controller.ts
+++ b/apps/backend/src/orders/order.controller.ts
@@ -16,6 +16,7 @@ import { FoodManufacturer } from '../foodManufacturers/manufacturer.entity';
 import { FoodRequest } from '../foodRequests/request.entity';
 import { AllocationsService } from '../allocations/allocations.service';
 import { OrderStatus } from './types';
+import { Donation } from '../donations/donations.entity';
 
 @Controller('orders')
 export class OrdersController {
diff --git a/apps/backend/src/orders/order.service.ts b/apps/backend/src/orders/order.service.ts
index a38fdb42..59b84d69 100644
--- a/apps/backend/src/orders/order.service.ts
+++ b/apps/backend/src/orders/order.service.ts
@@ -21,7 +21,6 @@ export class OrdersService {
     const qb = this.repo
       .createQueryBuilder('order')
       .leftJoinAndSelect('order.pantry', 'pantry')
-      .leftJoinAndSelect('pantry.ssfRepresentative', 'ssfRepresentative')
       .select([
         'order.orderId',
         'order.status',
@@ -29,10 +28,6 @@ export class OrdersService {
         'order.shippedAt',
         'order.deliveredAt',
         'pantry.pantryName',
-        'pantry.ssfRepresentative.id',
-        'ssfRepresentative.firstName',
-        'ssfRepresentative.lastName',
-        'ssfRepresentative.email',
       ]);
 
     if (filters?.status) {
diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index bb2f9168..86de8e57 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -8,8 +8,7 @@ import {
   CloseButton,
 } from '@chakra-ui/react';
 import ApiClient from '@api/apiClient';
-import { Donation, FoodRequest, Order } from 'types/types';
-import { DonationItem } from 'types/types';
+import { FoodRequest } from 'types/types';
 import { formatDate } from '@utils/utils';
 
 interface OrderDetailsModalProps {
@@ -43,7 +42,12 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
   }, [isOpen, orderId]);
 
   return (
-    <Dialog.Root open={isOpen} onOpenChange={(e) => !e.open && onClose()}>
+    <Dialog.Root 
+      open={isOpen}
+      onOpenChange={(e: { open: boolean }) => {
+        if (!e.open) onClose();
+      }}
+    >
       <Portal>
         <Dialog.Backdrop bg="blackAlpha.200" />
         <Dialog.Positioner>
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index a6250233..1661cc93 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -154,7 +154,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                     <Checkbox.Root
                       key={pantry}
                       checked={selectedPantries.includes(pantry)}
-                      onCheckedChange={(e) =>
+                      onCheckedChange={(e: { checked: boolean }) =>
                         handleFilterChange(pantry, !!e.checked)
                       }
                       color="black"
@@ -337,8 +337,8 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                   my={2}
                   p={2}
                 >
-                  {order.pantry.ssfRepresentative.firstName[0]}
-                  {order.pantry.ssfRepresentative.lastName[0]}
+                  {order.pantry.pantryUser.firstName[0]}
+                  {order.pantry.pantryUser.lastName[0]}
                 </Box>
               </Table.Cell>
               <Table.Cell
diff --git a/apps/frontend/src/types/types.ts b/apps/frontend/src/types/types.ts
index e133bc03..00225f00 100644
--- a/apps/frontend/src/types/types.ts
+++ b/apps/frontend/src/types/types.ts
@@ -31,6 +31,7 @@ export interface Pantry {
   serveAllergicChildren?: ServeAllergicChildren;
   newsletterSubscription: boolean;
   restrictions: string[];
+  pantryUser: User;
   status: PantryStatus;
   dateApplied: Date;
   activities: Activity[];

From a89873d473386dc2192503f613b32964da9151ca Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Thu, 27 Nov 2025 20:07:13 -0500
Subject: [PATCH 06/29] Fixed frontend changes

---
 apps/frontend/src/components/forms/orderDetailsModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index 86de8e57..0d33816b 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -42,7 +42,7 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
   }, [isOpen, orderId]);
 
   return (
-    <Dialog.Root 
+    <Dialog.Root
       open={isOpen}
       onOpenChange={(e: { open: boolean }) => {
         if (!e.open) onClose();

From 4a53a237d3e54f1de8d2b3181a9c01a448acc7e7 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Wed, 3 Dec 2025 22:35:31 -0500
Subject: [PATCH 07/29] Fixed backend

---
 apps/backend/src/orders/order.controller.ts   |  12 +-
 apps/backend/src/orders/order.service.ts      |   4 +
 .../src/containers/adminOrderManagement.tsx   | 271 ++++++++++--------
 3 files changed, 156 insertions(+), 131 deletions(-)

diff --git a/apps/backend/src/orders/order.controller.ts b/apps/backend/src/orders/order.controller.ts
index e776877d..4675c12c 100644
--- a/apps/backend/src/orders/order.controller.ts
+++ b/apps/backend/src/orders/order.controller.ts
@@ -70,12 +70,12 @@ export class OrdersController {
     return this.ordersService.findOrderFoodManufacturer(orderId);
   }
 
-  @Get(':orderId/donation')
-  async getDonationFromOrder(
-    @Param('orderId', ParseIntPipe) orderId: number,
-  ): Promise<Donation | null> {
-    return this.ordersService.findOrderDonation(orderId);
-  }
+  // @Get(':orderId/donation')
+  // async getDonationFromOrder(
+  //   @Param('orderId', ParseIntPipe) orderId: number,
+  // ): Promise<Donation | null> {
+  //   return this.ordersService.findOrderDonation(orderId);
+  // }
 
   @Get('/:orderId')
   async getOrder(
diff --git a/apps/backend/src/orders/order.service.ts b/apps/backend/src/orders/order.service.ts
index ba024c97..05e42de5 100644
--- a/apps/backend/src/orders/order.service.ts
+++ b/apps/backend/src/orders/order.service.ts
@@ -16,6 +16,7 @@ export class OrdersService {
     const qb = this.repo
       .createQueryBuilder('order')
       .leftJoinAndSelect('order.pantry', 'pantry')
+      .leftJoinAndSelect('pantry.volunteers', 'volunteers')
       .select([
         'order.orderId',
         'order.status',
@@ -23,6 +24,9 @@ export class OrdersService {
         'order.shippedAt',
         'order.deliveredAt',
         'pantry.pantryName',
+        'volunteers.id',
+        'volunteers.firstName',
+        'volunteers.lastName',
       ]);
 
     if (filters?.status) {
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 1661cc93..ec2cc9af 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -22,6 +22,129 @@ import ApiClient from '@api/apiClient';
 import { Order } from 'types/types';
 import OrderDetailsModal from '@components/forms/orderDetailsModal';
 
+const AdminOrderManagement: React.FC = () => {
+  const [statusOrders, setStatusOrders] = useState<Record<string, Order[]>>({});
+  const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const STATUS_ORDER = ['pending', 'shipped', 'delivered'];
+  const STATUS_COLORS = ['#FEECD1', '#D5DCDF', '#D4EAED'];
+  const MAX_PER_STATUS = 5;
+
+  const totalPages =
+    Math.max(
+      ...Object.values(statusOrders).map((orders) =>
+        Math.ceil(orders.length / MAX_PER_STATUS),
+      ),
+    ) || 1;
+
+  const displayedStatusOrders = Object.fromEntries(
+    Object.entries(statusOrders).map(([status, orders]) => [
+      status,
+      orders.slice(
+        (currentPage - 1) * MAX_PER_STATUS,
+        currentPage * MAX_PER_STATUS,
+      ),
+    ]),
+  );
+
+  useEffect(() => {
+    const fetchOrders = async () => {
+      try {
+        const data = await ApiClient.getAllOrders();
+
+        // Build the grouped object first
+        const grouped: Record<string, Order[]> = {};
+
+        for (const order of data) {
+          const status = order.status;
+          if (!grouped[status]) grouped[status] = [];
+          grouped[status].push(order);
+        }
+
+        // Set state once
+        setStatusOrders(grouped);
+      } catch (error) {
+        alert('Error fetching orders: ' + error);
+      }
+    };
+
+    fetchOrders();
+  }, []);
+
+  return (
+    <Box p={12}>
+      <Heading
+        size="4xl"
+        color="gray.600"
+        fontWeight="normal"
+        mb={6}
+        fontFamily="'Instrument Serif', serif"
+      >
+        Order Management
+      </Heading>
+
+      {STATUS_ORDER.map((status, index) => {
+        const orders = displayedStatusOrders[status] || [];
+        if (orders.length === 0) return null;
+
+        return (
+          <Box key={status} mb={12}>
+            <OrderTableSection
+              key={status}
+              orders={orders}
+              status={status.charAt(0).toUpperCase() + status.slice(1)} // Capitalize first letter
+              color={STATUS_COLORS[index % STATUS_COLORS.length]}
+              selectedOrderId={selectedOrderId}
+              onOrderSelect={setSelectedOrderId}
+            />
+          </Box>
+        );
+      })}
+
+      <Pagination.Root
+        count={totalPages * MAX_PER_STATUS}
+        pageSize={MAX_PER_STATUS}
+        page={currentPage}
+        onPageChange={(e) => setCurrentPage(e.page)}
+      >
+        <ButtonGroup
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          mt={12}
+          variant="outline"
+          size="sm"
+        >
+          <Pagination.PrevTrigger
+            color="neutral.800"
+            _hover={{ color: 'black' }}
+          >
+            <ChevronLeft size={16} />
+          </Pagination.PrevTrigger>
+
+          <Pagination.Items
+            render={(page) => (
+              <IconButton
+                borderColor={{ base: 'neutral.100', _selected: 'neutral.600' }}
+              >
+                {page.value}
+              </IconButton>
+            )}
+          />
+
+          <Pagination.NextTrigger
+            color="neutral.800"
+            _hover={{ color: 'black' }}
+          >
+            <ChevronRight size={16} />
+          </Pagination.NextTrigger>
+        </ButtonGroup>
+      </Pagination.Root>
+    </Box>
+  );
+};
+
 interface OrderTableSectionProps {
   orders: Order[];
   status: string;
@@ -85,6 +208,8 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
     py: 0,
   };
 
+  console.log('Filtered Orders:', filteredOrders);
+
   return (
     <Box>
       <Box
@@ -323,6 +448,25 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                 borderRight="1px solid"
                 borderRightColor="neutral.100"
               >
+                {order.pantry.volunteers && order.pantry.volunteers.length > 0 ? (
+                  <Box
+                    borderRadius="full"
+                    bg={
+                      assigneeColors[
+                        Math.floor(Math.random() * assigneeColors.length)
+                      ]
+                    }
+                    width="38px"
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                    my={2}
+                    p={2}
+                  >
+                    {order.pantry.volunteers[0].firstName.charAt(0).toUpperCase()}
+                    {order.pantry.volunteers[0].lastName.charAt(0).toUpperCase()}
+                  </Box>
+                ) : (
                 <Box
                   borderRadius="full"
                   bg={
@@ -337,9 +481,9 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                   my={2}
                   p={2}
                 >
-                  {order.pantry.pantryUser.firstName[0]}
-                  {order.pantry.pantryUser.lastName[0]}
+                  {'A' /* Placeholder for assignee initials */}
                 </Box>
+                )}
               </Table.Cell>
               <Table.Cell
                 {...tableCellStyles}
@@ -371,127 +515,4 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
   );
 };
 
-const AdminOrderManagement: React.FC = () => {
-  const [statusOrders, setStatusOrders] = useState<Record<string, Order[]>>({});
-  const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const STATUS_ORDER = ['pending', 'shipped', 'delivered'];
-  const STATUS_COLORS = ['#FEECD1', '#D5DCDF', '#D4EAED'];
-  const MAX_PER_STATUS = 5;
-
-  const totalPages =
-    Math.max(
-      ...Object.values(statusOrders).map((orders) =>
-        Math.ceil(orders.length / MAX_PER_STATUS),
-      ),
-    ) || 1;
-
-  const displayedStatusOrders = Object.fromEntries(
-    Object.entries(statusOrders).map(([status, orders]) => [
-      status,
-      orders.slice(
-        (currentPage - 1) * MAX_PER_STATUS,
-        currentPage * MAX_PER_STATUS,
-      ),
-    ]),
-  );
-
-  useEffect(() => {
-    const fetchOrders = async () => {
-      try {
-        const data = await ApiClient.getAllOrders();
-
-        // Build the grouped object first
-        const grouped: Record<string, Order[]> = {};
-
-        for (const order of data) {
-          const status = order.status;
-          if (!grouped[status]) grouped[status] = [];
-          grouped[status].push(order);
-        }
-
-        // Set state once
-        setStatusOrders(grouped);
-      } catch (error) {
-        alert('Error fetching orders: ' + error);
-      }
-    };
-
-    fetchOrders();
-  }, []);
-
-  return (
-    <Box p={12}>
-      <Heading
-        size="4xl"
-        color="gray.600"
-        fontWeight="normal"
-        mb={6}
-        fontFamily="'Instrument Serif', serif"
-      >
-        Order Management
-      </Heading>
-
-      {STATUS_ORDER.map((status, index) => {
-        const orders = displayedStatusOrders[status] || [];
-        if (orders.length === 0) return null;
-
-        return (
-          <Box key={status} mb={12}>
-            <OrderTableSection
-              key={status}
-              orders={orders}
-              status={status.charAt(0).toUpperCase() + status.slice(1)} // Capitalize first letter
-              color={STATUS_COLORS[index % STATUS_COLORS.length]}
-              selectedOrderId={selectedOrderId}
-              onOrderSelect={setSelectedOrderId}
-            />
-          </Box>
-        );
-      })}
-
-      <Pagination.Root
-        count={totalPages * MAX_PER_STATUS}
-        pageSize={MAX_PER_STATUS}
-        page={currentPage}
-        onPageChange={(e) => setCurrentPage(e.page)}
-      >
-        <ButtonGroup
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-          mt={12}
-          variant="outline"
-          size="sm"
-        >
-          <Pagination.PrevTrigger
-            color="neutral.800"
-            _hover={{ color: 'black' }}
-          >
-            <ChevronLeft size={16} />
-          </Pagination.PrevTrigger>
-
-          <Pagination.Items
-            render={(page) => (
-              <IconButton
-                borderColor={{ base: 'neutral.100', _selected: 'neutral.600' }}
-              >
-                {page.value}
-              </IconButton>
-            )}
-          />
-
-          <Pagination.NextTrigger
-            color="neutral.800"
-            _hover={{ color: 'black' }}
-          >
-            <ChevronRight size={16} />
-          </Pagination.NextTrigger>
-        </ButtonGroup>
-      </Pagination.Root>
-    </Box>
-  );
-};
-
 export default AdminOrderManagement;

From 21eb829a25f3885b0447aad06e6cbf0b1c0af46e Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Wed, 3 Dec 2025 22:37:19 -0500
Subject: [PATCH 08/29] Fixed backend

---
 .../src/containers/adminOrderManagement.tsx   | 43 +++++++++++--------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index ec2cc9af..69d6bbf6 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -448,7 +448,8 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                 borderRight="1px solid"
                 borderRightColor="neutral.100"
               >
-                {order.pantry.volunteers && order.pantry.volunteers.length > 0 ? (
+                {order.pantry.volunteers &&
+                order.pantry.volunteers.length > 0 ? (
                   <Box
                     borderRadius="full"
                     bg={
@@ -463,26 +464,30 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                     my={2}
                     p={2}
                   >
-                    {order.pantry.volunteers[0].firstName.charAt(0).toUpperCase()}
-                    {order.pantry.volunteers[0].lastName.charAt(0).toUpperCase()}
+                    {order.pantry.volunteers[0].firstName
+                      .charAt(0)
+                      .toUpperCase()}
+                    {order.pantry.volunteers[0].lastName
+                      .charAt(0)
+                      .toUpperCase()}
                   </Box>
                 ) : (
-                <Box
-                  borderRadius="full"
-                  bg={
-                    assigneeColors[
-                      Math.floor(Math.random() * assigneeColors.length)
-                    ]
-                  }
-                  width="38px"
-                  display="flex"
-                  alignItems="center"
-                  justifyContent="center"
-                  my={2}
-                  p={2}
-                >
-                  {'A' /* Placeholder for assignee initials */}
-                </Box>
+                  <Box
+                    borderRadius="full"
+                    bg={
+                      assigneeColors[
+                        Math.floor(Math.random() * assigneeColors.length)
+                      ]
+                    }
+                    width="38px"
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                    my={2}
+                    p={2}
+                  >
+                    {'A' /* Placeholder for assignee initials */}
+                  </Box>
                 )}
               </Table.Cell>
               <Table.Cell

From 505836dba63858a5fcfce9d4a2f9319c8f2cc442 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Wed, 3 Dec 2025 23:01:20 -0500
Subject: [PATCH 09/29] Final commit

---
 .../src/containers/adminOrderManagement.tsx   | 67 +++++++------------
 1 file changed, 26 insertions(+), 41 deletions(-)

diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 69d6bbf6..867d9c4c 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -448,47 +448,32 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                 borderRight="1px solid"
                 borderRightColor="neutral.100"
               >
-                {order.pantry.volunteers &&
-                order.pantry.volunteers.length > 0 ? (
-                  <Box
-                    borderRadius="full"
-                    bg={
-                      assigneeColors[
-                        Math.floor(Math.random() * assigneeColors.length)
-                      ]
-                    }
-                    width="38px"
-                    display="flex"
-                    alignItems="center"
-                    justifyContent="center"
-                    my={2}
-                    p={2}
-                  >
-                    {order.pantry.volunteers[0].firstName
-                      .charAt(0)
-                      .toUpperCase()}
-                    {order.pantry.volunteers[0].lastName
-                      .charAt(0)
-                      .toUpperCase()}
-                  </Box>
-                ) : (
-                  <Box
-                    borderRadius="full"
-                    bg={
-                      assigneeColors[
-                        Math.floor(Math.random() * assigneeColors.length)
-                      ]
-                    }
-                    width="38px"
-                    display="flex"
-                    alignItems="center"
-                    justifyContent="center"
-                    my={2}
-                    p={2}
-                  >
-                    {'A' /* Placeholder for assignee initials */}
-                  </Box>
-                )}
+                <Box direction="row" gap={2} display="flex" alignItems="center">
+                  {order.pantry.volunteers && order.pantry.volunteers.length > 0 ? (
+                    order.pantry.volunteers.slice(0,5).map((volunteer, index) => (
+                      <Box
+                        key={index}
+                        borderRadius="full"
+                        bg={
+                          assigneeColors[
+                            Math.floor(Math.random() * assigneeColors.length)
+                          ]
+                        }
+                        width="38px"
+                        height="38px"
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="center"
+                        p={2}
+                      >
+                        {volunteer.firstName.charAt(0).toUpperCase()}
+                        {volunteer.lastName.charAt(0).toUpperCase()}
+                      </Box>
+                    ))
+                  ) : (
+                    <Box>No Assignees</Box>
+                  )}
+                </Box>
               </Table.Cell>
               <Table.Cell
                 {...tableCellStyles}

From b462dbaccd6963adf62cb5e34aadd6152f8c2dfd Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Thu, 4 Dec 2025 11:55:47 -0500
Subject: [PATCH 10/29] Fixed volunteer display

---
 .../src/containers/adminOrderManagement.tsx   | 45 ++++++++++---------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 867d9c4c..0a15d662 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -449,27 +449,30 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                 borderRightColor="neutral.100"
               >
                 <Box direction="row" gap={2} display="flex" alignItems="center">
-                  {order.pantry.volunteers && order.pantry.volunteers.length > 0 ? (
-                    order.pantry.volunteers.slice(0,5).map((volunteer, index) => (
-                      <Box
-                        key={index}
-                        borderRadius="full"
-                        bg={
-                          assigneeColors[
-                            Math.floor(Math.random() * assigneeColors.length)
-                          ]
-                        }
-                        width="38px"
-                        height="38px"
-                        display="flex"
-                        alignItems="center"
-                        justifyContent="center"
-                        p={2}
-                      >
-                        {volunteer.firstName.charAt(0).toUpperCase()}
-                        {volunteer.lastName.charAt(0).toUpperCase()}
-                      </Box>
-                    ))
+                  {order.pantry.volunteers &&
+                  order.pantry.volunteers.length > 0 ? (
+                    order.pantry.volunteers
+                      .slice(0, 5)
+                      .map((volunteer, index) => (
+                        <Box
+                          key={index}
+                          borderRadius="full"
+                          bg={
+                            assigneeColors[
+                              Math.floor(Math.random() * assigneeColors.length)
+                            ]
+                          }
+                          width="38px"
+                          height="38px"
+                          display="flex"
+                          alignItems="center"
+                          justifyContent="center"
+                          p={2}
+                        >
+                          {volunteer.firstName.charAt(0).toUpperCase()}
+                          {volunteer.lastName.charAt(0).toUpperCase()}
+                        </Box>
+                      ))
                   ) : (
                     <Box>No Assignees</Box>
                   )}

From 906b21b620910122ac33ac89015868d6127d13fb Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Thu, 4 Dec 2025 19:59:23 -0500
Subject: [PATCH 11/29] Final commit

---
 apps/backend/src/orders/order.controller.ts   | 22 ++----
 apps/backend/src/orders/order.service.ts      | 28 ++++---
 .../components/forms/orderDetailsModal.tsx    | 35 ++++-----
 .../src/containers/adminOrderManagement.tsx   | 77 ++++++++++---------
 apps/frontend/src/types/types.ts              |  2 +-
 5 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/apps/backend/src/orders/order.controller.ts b/apps/backend/src/orders/order.controller.ts
index 4675c12c..a0c1a36a 100644
--- a/apps/backend/src/orders/order.controller.ts
+++ b/apps/backend/src/orders/order.controller.ts
@@ -16,7 +16,6 @@ import { FoodManufacturer } from '../foodManufacturers/manufacturer.entity';
 import { FoodRequest } from '../foodRequests/request.entity';
 import { AllocationsService } from '../allocations/allocations.service';
 import { OrderStatus } from './types';
-import { Donation } from '../donations/donations.entity';
 
 @Controller('orders')
 export class OrdersController {
@@ -49,34 +48,27 @@ export class OrdersController {
     return this.ordersService.getPastOrders();
   }
 
-  @Get(':orderId/pantry')
+  @Get('/:orderId/pantry')
   async getPantryFromOrder(
     @Param('orderId', ParseIntPipe) orderId: number,
-  ): Promise<Pantry | null> {
+  ): Promise<Pantry> {
     return this.ordersService.findOrderPantry(orderId);
   }
 
-  @Get(':orderId/request')
+  @Get('/:orderId/request')
   async getRequestFromOrder(
     @Param('orderId', ParseIntPipe) orderId: number,
-  ): Promise<FoodRequest | null> {
+  ): Promise<FoodRequest> {
     return this.ordersService.findOrderFoodRequest(orderId);
   }
 
-  @Get(':orderId/manufacturer')
+  @Get('/:orderId/manufacturer')
   async getManufacturerFromOrder(
     @Param('orderId', ParseIntPipe) orderId: number,
-  ): Promise<FoodManufacturer | null> {
+  ): Promise<FoodManufacturer> {
     return this.ordersService.findOrderFoodManufacturer(orderId);
   }
 
-  // @Get(':orderId/donation')
-  // async getDonationFromOrder(
-  //   @Param('orderId', ParseIntPipe) orderId: number,
-  // ): Promise<Donation | null> {
-  //   return this.ordersService.findOrderDonation(orderId);
-  // }
-
   @Get('/:orderId')
   async getOrder(
     @Param('orderId', ParseIntPipe) orderId: number,
@@ -91,7 +83,7 @@ export class OrdersController {
     return this.ordersService.findOrderByRequest(requestId);
   }
 
-  @Get(':orderId/allocations')
+  @Get('/:orderId/allocations')
   async getAllAllocationsByOrder(
     @Param('orderId', ParseIntPipe) orderId: number,
   ) {
diff --git a/apps/backend/src/orders/order.service.ts b/apps/backend/src/orders/order.service.ts
index 05e42de5..9f05c0f3 100644
--- a/apps/backend/src/orders/order.service.ts
+++ b/apps/backend/src/orders/order.service.ts
@@ -1,6 +1,6 @@
 import { Injectable, NotFoundException } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
-import { Repository, In } from 'typeorm';
+import { Repository, In, Not } from 'typeorm';
 import { Order } from './order.entity';
 import { Pantry } from '../pantries/pantries.entity';
 import { FoodManufacturer } from '../foodManufacturers/manufacturer.entity';
@@ -55,48 +55,47 @@ export class OrdersService {
   }
 
   async findOne(orderId: number) {
-    if (!orderId || orderId < 1) {
-      throw new NotFoundException('Invalid order ID');
-    }
+    validateId(orderId, 'Order');
+
     return await this.repo.findOne({
       where: { orderId },
     });
   }
 
-  async findOrderByRequest(requestId: number): Promise<Order | null> {
+  async findOrderByRequest(requestId: number): Promise<Order> {
     const order = await this.repo.findOne({
       where: { requestId },
       relations: ['request'],
     });
 
     if (!order) {
-      return null;
+      throw new NotFoundException(`Order with request ID ${requestId} not found`);
     } else {
       return order;
     }
   }
 
-  async findOrderPantry(orderId: number): Promise<Pantry | null> {
+  async findOrderPantry(orderId: number): Promise<Pantry> {
     const order = await this.repo.findOne({
       where: { orderId },
       relations: ['pantry'],
     });
 
     if (!order) {
-      return null;
+      throw new NotFoundException(`Order ID ${orderId} not found`);
     } else {
       return order.pantry;
     }
   }
 
-  async findOrderFoodRequest(orderId: number): Promise<FoodRequest | null> {
+  async findOrderFoodRequest(orderId: number): Promise<FoodRequest> {
     const order = await this.repo.findOne({
       where: { orderId },
       relations: ['request'],
     });
 
     if (!order) {
-      return null;
+      throw new NotFoundException(`Order ID ${orderId} not found`);
     } else {
       return order.request;
     }
@@ -104,9 +103,14 @@ export class OrdersService {
 
   async findOrderFoodManufacturer(
     orderId: number,
-  ): Promise<FoodManufacturer | null> {
+  ): Promise<FoodManufacturer> {
     const order = this.findOne(orderId);
-    return (await order).foodManufacturer;
+
+    if (!order) {
+      throw new NotFoundException(`Order ID ${orderId} not found`);
+    } else {
+      return (await order).foodManufacturer;
+    }
   }
 
   async updateStatus(orderId: number, newStatus: OrderStatus) {
diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index 0d33816b..de2a1d62 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -8,17 +8,17 @@ import {
   CloseButton,
 } from '@chakra-ui/react';
 import ApiClient from '@api/apiClient';
-import { FoodRequest } from 'types/types';
+import { FoodRequest, Order } from 'types/types';
 import { formatDate } from '@utils/utils';
 
 interface OrderDetailsModalProps {
-  orderId: number;
+  order: Order;
   isOpen: boolean;
   onClose: () => void;
 }
 
 const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
-  orderId,
+  order,
   isOpen,
   onClose,
 }) => {
@@ -29,7 +29,7 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
       const fetchData = async () => {
         try {
           const foodRequestData = await ApiClient.getFoodRequestFromOrder(
-            orderId,
+            order.orderId,
           );
           setFoodRequest(foodRequestData);
         } catch (error) {
@@ -39,7 +39,7 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
 
       fetchData();
     }
-  }, [isOpen, orderId]);
+  }, [isOpen, order.orderId]);
 
   return (
     <Dialog.Root
@@ -64,12 +64,12 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
                   fontWeight="600"
                   fontFamily="'Inter', sans-serif"
                 >
-                  Order #{orderId} Details
+                  Order {order.orderId}
                 </Dialog.Title>
                 {foodRequest && (
                   <>
                     <Text fontSize="sm" color="neutral.800">
-                      Request Id #{foodRequest.requestId}
+                      {order.pantry.pantryName}
                     </Text>
                     <Text fontSize="sm" color="neutral.800">
                       Requested {formatDate(foodRequest.requestedAt)}
@@ -86,29 +86,26 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
                     <Text fontSize="md" fontWeight="600" mb={1}>
                       Size of Shipment
                     </Text>
-                    <Text fontSize="sm" fontWeight="400" ml={2}>
+                    <Text fontSize="sm" fontWeight="400">
                       {foodRequest.requestedSize}
                     </Text>
                   </Box>
                   <Box>
-                    <Text fontSize="md" fontWeight="600" mb={1}>
+                    <Text fontSize="md" fontWeight="600" mb={3}>
                       Food Type(s)
                     </Text>
-                    <Box>
+                    <Box display="flex" flexWrap="wrap" gap={2}>
                       {foodRequest.requestedItems.map((type, index) => (
                         <Box
                           display="inline-flex"
                           alignItems="center"
                           justifyContent="space-between"
-                          backgroundColor="neutral.100"
-                          borderRadius="md"
-                          pl={2}
-                          pr={3}
-                          py={2}
-                          mr={2}
-                          mb={2}
+                          bg="neutral.100"
+                          border="1px solid"
+                          borderColor="neutral.300"
+                          borderRadius="4px"
+                          p={2}
                           key={index}
-                          minW="fit-content"
                         >
                           <Text fontSize="sm" fontWeight="400" mr={10}>
                             {type}
@@ -124,7 +121,7 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
                     <Text fontSize="md" fontWeight="600" mb={1}>
                       Additional Information
                     </Text>
-                    <Text fontSize="sm" fontWeight="400" ml={2}>
+                    <Text fontSize="sm" fontWeight="400">
                       {foodRequest.additionalInformation ||
                         'No details provided.'}
                     </Text>
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 0a15d662..e393f737 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -19,7 +19,7 @@ import {
 } from 'lucide-react';
 import { formatDate } from '@utils/utils';
 import ApiClient from '@api/apiClient';
-import { Order } from 'types/types';
+import { Order, OrderStatus } from '../types/types';
 import OrderDetailsModal from '@components/forms/orderDetailsModal';
 
 const AdminOrderManagement: React.FC = () => {
@@ -27,8 +27,14 @@ const AdminOrderManagement: React.FC = () => {
   const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
   const [currentPage, setCurrentPage] = useState(1);
 
-  const STATUS_ORDER = ['pending', 'shipped', 'delivered'];
-  const STATUS_COLORS = ['#FEECD1', '#D5DCDF', '#D4EAED'];
+  const STATUS_ORDER = [OrderStatus.PENDING, OrderStatus.SHIPPED, OrderStatus.DELIVERED];
+  // Map of colors as per status (background color, text color)
+  const STATUS_COLORS = {
+    [OrderStatus.PENDING]: ['#FEECD1', '#9C5D00'],
+    [OrderStatus.SHIPPED]: ['#D5DCDF', '#2B4E60'],
+    [OrderStatus.DELIVERED]: ['#D4EAED', '#19717D']
+  };
+
   const MAX_PER_STATUS = 5;
 
   const totalPages =
@@ -75,11 +81,9 @@ const AdminOrderManagement: React.FC = () => {
   return (
     <Box p={12}>
       <Heading
-        size="4xl"
+        textStyle="h1"
         color="gray.600"
-        fontWeight="normal"
-        mb={6}
-        fontFamily="'Instrument Serif', serif"
+        mb={8}
       >
         Order Management
       </Heading>
@@ -93,8 +97,7 @@ const AdminOrderManagement: React.FC = () => {
             <OrderTableSection
               key={status}
               orders={orders}
-              status={status.charAt(0).toUpperCase() + status.slice(1)} // Capitalize first letter
-              color={STATUS_COLORS[index % STATUS_COLORS.length]}
+              colors={STATUS_COLORS[orders[0].status]}
               selectedOrderId={selectedOrderId}
               onOrderSelect={setSelectedOrderId}
             />
@@ -147,16 +150,14 @@ const AdminOrderManagement: React.FC = () => {
 
 interface OrderTableSectionProps {
   orders: Order[];
-  status: string;
-  color: string;
+  colors: string[];
   onOrderSelect: (orderId: number | null) => void;
   selectedOrderId: number | null;
 }
 
 const OrderTableSection: React.FC<OrderTableSectionProps> = ({
   orders,
-  status,
-  color,
+  colors,
   onOrderSelect,
   selectedOrderId,
 }) => {
@@ -165,7 +166,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
   const [selectedPantries, setSelectedPantries] = useState<string[]>([]);
   const [sortAsc, setSortAsc] = useState(true);
 
-  const assigneeColors = ['#F89E19', '#CC3538', '#2795A5', '#2B4E60'];
+  const ASSIGNEE_COLORS = ['#F89E19', '#CC3538', '#2795A5', '#2B4E60'];
 
   const pantryOptions = [
     ...new Set(orders.map((o) => o.pantry.pantryName)),
@@ -194,7 +195,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
     borderBottom: '1px solid',
     borderColor: 'neutral.100',
     color: 'neutral.800',
-    fontFamily: "'Inter', sans-serif",
+    fontFamily: "ibm",
     fontWeight: '600',
     fontSize: 'sm',
   };
@@ -208,28 +209,28 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
     py: 0,
   };
 
-  console.log('Filtered Orders:', filteredOrders);
-
   return (
     <Box>
       <Box
         display="inline-flex"
         alignItems="center"
         justifyContent="space-between"
-        backgroundColor={color}
+        backgroundColor={colors[0]}
         p={3}
         borderRadius="md"
         minW="fit-content"
       >
         <Mail size={18} />
-        <Box ml={3}>{status}</Box>
+        <Box ml={3} fontFamily="ibm" fontSize="14px" fontWeight="semibold" color="neutral.700">
+          {orders[0].status.charAt(0).toUpperCase() + orders[0].status.slice(1)}
+        </Box>
       </Box>
       <Box
         display="flex"
         justifyContent="flex-end"
         alignItems="center"
         gap={2}
-        mb={6}
+        mb={3}
         position="relative"
         fontFamily="'Inter', sans-serif"
       >
@@ -237,7 +238,8 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
           <Button
             onClick={() => setIsFilterOpen(!isFilterOpen)}
             variant="outline"
-            color="neutral.600"
+            color="neutral.800"
+            fontWeight="semibold"
             border="1px solid"
             borderColor="neutral.200"
             size="sm"
@@ -274,7 +276,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                 overflowY="auto"
                 zIndex={20}
               >
-                <VStack align="stretch" gap={2}>
+                <VStack align="stretch" fontSize="12px" fontFamily="Inter" color="neutral.800" fontWeight="500" gap={2}>
                   {pantryOptions.map((pantry) => (
                     <Checkbox.Root
                       key={pantry}
@@ -282,8 +284,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                       onCheckedChange={(e: { checked: boolean }) =>
                         handleFilterChange(pantry, !!e.checked)
                       }
-                      color="black"
-                      size="sm"
+                      size="md"
                     >
                       <Checkbox.HiddenInput />
                       <Checkbox.Control borderRadius="sm" />
@@ -300,7 +301,8 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
           <Button
             onClick={() => setIsSortOpen(!isSortOpen)}
             variant="outline"
-            color="neutral.600"
+            color="neutral.800"
+            fontWeight="semibold"
             border="1px solid"
             borderColor="neutral.200"
             p={3}
@@ -335,7 +337,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                 minW="120px"
                 zIndex={20}
               >
-                <VStack align="stretch" gap={1}>
+                <VStack align="stretch" color="neutral.800" gap={1}>
                   <Box
                     cursor="pointer"
                     px={2}
@@ -423,6 +425,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
               >
                 <Button
                   variant="plain"
+                  fontWeight="400"
                   textDecoration="underline"
                   onClick={() => onOrderSelect(order.orderId)}
                 >
@@ -430,7 +433,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                 </Button>
                 {selectedOrderId === order.orderId && (
                   <OrderDetailsModal
-                    orderId={selectedOrderId}
+                    order={order}
                     isOpen={true}
                     onClose={() => onOrderSelect(null)}
                   />
@@ -448,7 +451,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                 borderRight="1px solid"
                 borderRightColor="neutral.100"
               >
-                <Box direction="row" gap={2} display="flex" alignItems="center">
+                <Box direction="row" gap={1} display="flex" alignItems="center">
                   {order.pantry.volunteers &&
                   order.pantry.volunteers.length > 0 ? (
                     order.pantry.volunteers
@@ -458,15 +461,16 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                           key={index}
                           borderRadius="full"
                           bg={
-                            assigneeColors[
-                              Math.floor(Math.random() * assigneeColors.length)
+                            ASSIGNEE_COLORS[
+                              Math.floor(Math.random() * ASSIGNEE_COLORS.length)
                             ]
                           }
-                          width="38px"
-                          height="38px"
+                          width="33px"
+                          height="33px"
                           display="flex"
                           alignItems="center"
                           justifyContent="center"
+                          color="white"
                           p={2}
                         >
                           {volunteer.firstName.charAt(0).toUpperCase()}
@@ -485,12 +489,15 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
               >
                 <Box
                   borderRadius="md"
-                  bg={color}
+                  bg={colors[0]}
+                  color={colors[1]}
                   display="inline-block"
+                  fontWeight="500"
                   my={2}
-                  p={1}
+                  py={1}
+                  px={3}
                 >
-                  {status}
+                  {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
                 </Box>
               </Table.Cell>
               <Table.Cell
diff --git a/apps/frontend/src/types/types.ts b/apps/frontend/src/types/types.ts
index fc8c5ff7..fa5b4603 100644
--- a/apps/frontend/src/types/types.ts
+++ b/apps/frontend/src/types/types.ts
@@ -137,7 +137,7 @@ export interface Order {
   foodManufacturer: FoodManufacturer | null;
   shippedBy: number | null;
   donation: Donation;
-  status: string;
+  status: OrderStatus;
   createdAt: string;
   shippedAt: string | null;
   deliveredAt: string | null;

From a2fec8c98b9dcc45df6b58008c0e1de9bb82f974 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Thu, 4 Dec 2025 19:59:41 -0500
Subject: [PATCH 12/29] Final commit

---
 apps/backend/src/orders/order.service.ts      |  8 ++---
 .../src/containers/adminOrderManagement.tsx   | 33 +++++++++++++------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/apps/backend/src/orders/order.service.ts b/apps/backend/src/orders/order.service.ts
index 9f05c0f3..6bd8ffa1 100644
--- a/apps/backend/src/orders/order.service.ts
+++ b/apps/backend/src/orders/order.service.ts
@@ -69,7 +69,9 @@ export class OrdersService {
     });
 
     if (!order) {
-      throw new NotFoundException(`Order with request ID ${requestId} not found`);
+      throw new NotFoundException(
+        `Order with request ID ${requestId} not found`,
+      );
     } else {
       return order;
     }
@@ -101,9 +103,7 @@ export class OrdersService {
     }
   }
 
-  async findOrderFoodManufacturer(
-    orderId: number,
-  ): Promise<FoodManufacturer> {
+  async findOrderFoodManufacturer(orderId: number): Promise<FoodManufacturer> {
     const order = this.findOne(orderId);
 
     if (!order) {
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index e393f737..02d92d9e 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -27,12 +27,16 @@ const AdminOrderManagement: React.FC = () => {
   const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
   const [currentPage, setCurrentPage] = useState(1);
 
-  const STATUS_ORDER = [OrderStatus.PENDING, OrderStatus.SHIPPED, OrderStatus.DELIVERED];
+  const STATUS_ORDER = [
+    OrderStatus.PENDING,
+    OrderStatus.SHIPPED,
+    OrderStatus.DELIVERED,
+  ];
   // Map of colors as per status (background color, text color)
   const STATUS_COLORS = {
     [OrderStatus.PENDING]: ['#FEECD1', '#9C5D00'],
     [OrderStatus.SHIPPED]: ['#D5DCDF', '#2B4E60'],
-    [OrderStatus.DELIVERED]: ['#D4EAED', '#19717D']
+    [OrderStatus.DELIVERED]: ['#D4EAED', '#19717D'],
   };
 
   const MAX_PER_STATUS = 5;
@@ -80,11 +84,7 @@ const AdminOrderManagement: React.FC = () => {
 
   return (
     <Box p={12}>
-      <Heading
-        textStyle="h1"
-        color="gray.600"
-        mb={8}
-      >
+      <Heading textStyle="h1" color="gray.600" mb={8}>
         Order Management
       </Heading>
 
@@ -195,7 +195,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
     borderBottom: '1px solid',
     borderColor: 'neutral.100',
     color: 'neutral.800',
-    fontFamily: "ibm",
+    fontFamily: 'ibm',
     fontWeight: '600',
     fontSize: 'sm',
   };
@@ -221,7 +221,13 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
         minW="fit-content"
       >
         <Mail size={18} />
-        <Box ml={3} fontFamily="ibm" fontSize="14px" fontWeight="semibold" color="neutral.700">
+        <Box
+          ml={3}
+          fontFamily="ibm"
+          fontSize="14px"
+          fontWeight="semibold"
+          color="neutral.700"
+        >
           {orders[0].status.charAt(0).toUpperCase() + orders[0].status.slice(1)}
         </Box>
       </Box>
@@ -276,7 +282,14 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                 overflowY="auto"
                 zIndex={20}
               >
-                <VStack align="stretch" fontSize="12px" fontFamily="Inter" color="neutral.800" fontWeight="500" gap={2}>
+                <VStack
+                  align="stretch"
+                  fontSize="12px"
+                  fontFamily="Inter"
+                  color="neutral.800"
+                  fontWeight="500"
+                  gap={2}
+                >
                   {pantryOptions.map((pantry) => (
                     <Checkbox.Root
                       key={pantry}

From 35951a4f3a456831c829be534a8ae81c7a68e8f9 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Fri, 5 Dec 2025 00:10:35 -0500
Subject: [PATCH 13/29] Resolved comments

---
 apps/backend/src/orders/order.service.ts      |  41 ++--
 .../src/containers/adminOrderManagement.tsx   | 211 ++++++++++--------
 2 files changed, 145 insertions(+), 107 deletions(-)

diff --git a/apps/backend/src/orders/order.service.ts b/apps/backend/src/orders/order.service.ts
index 6bd8ffa1..aea3cec6 100644
--- a/apps/backend/src/orders/order.service.ts
+++ b/apps/backend/src/orders/order.service.ts
@@ -54,15 +54,20 @@ export class OrdersService {
     });
   }
 
-  async findOne(orderId: number) {
+  async findOne(orderId: number): Promise<Order> {
     validateId(orderId, 'Order');
 
-    return await this.repo.findOne({
-      where: { orderId },
-    });
+    const order = await this.repo.findOneBy({ orderId });
+
+    if (!order) {
+      throw new NotFoundException(`Order ${orderId} not found`);
+    }
+    return order;
   }
 
   async findOrderByRequest(requestId: number): Promise<Order> {
+    validateId(requestId, 'Request');
+
     const order = await this.repo.findOne({
       where: { requestId },
       relations: ['request'],
@@ -72,45 +77,47 @@ export class OrdersService {
       throw new NotFoundException(
         `Order with request ID ${requestId} not found`,
       );
-    } else {
-      return order;
     }
+    return order;
   }
 
   async findOrderPantry(orderId: number): Promise<Pantry> {
+    validateId(orderId, 'Order');
+
     const order = await this.repo.findOne({
       where: { orderId },
       relations: ['pantry'],
     });
 
     if (!order) {
-      throw new NotFoundException(`Order ID ${orderId} not found`);
-    } else {
-      return order.pantry;
+      throw new NotFoundException(`Order ${orderId} not found`);
     }
+    return order.pantry;
   }
 
   async findOrderFoodRequest(orderId: number): Promise<FoodRequest> {
+    validateId(orderId, 'Order');
+
     const order = await this.repo.findOne({
       where: { orderId },
       relations: ['request'],
     });
 
     if (!order) {
-      throw new NotFoundException(`Order ID ${orderId} not found`);
-    } else {
-      return order.request;
+      throw new NotFoundException(`Order ${orderId} not found`);
     }
+    return order.request;
   }
 
   async findOrderFoodManufacturer(orderId: number): Promise<FoodManufacturer> {
-    const order = this.findOne(orderId);
+    validateId(orderId, 'Order');
+
+    const order = await this.findOne(orderId);
 
     if (!order) {
-      throw new NotFoundException(`Order ID ${orderId} not found`);
-    } else {
-      return (await order).foodManufacturer;
+      throw new NotFoundException(`Order ${orderId} not found`);
     }
+    return order.foodManufacturer;
   }
 
   async updateStatus(orderId: number, newStatus: OrderStatus) {
@@ -140,4 +147,4 @@ export class OrdersService {
 
     return orders;
   }
-}
+}
\ No newline at end of file
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 02d92d9e..ee4946f6 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -16,6 +16,7 @@ import {
   ChevronLeft,
   Funnel,
   Mail,
+  CircleCheck,
 } from 'lucide-react';
 import { formatDate } from '@utils/utils';
 import ApiClient from '@api/apiClient';
@@ -25,45 +26,27 @@ import OrderDetailsModal from '@components/forms/orderDetailsModal';
 const AdminOrderManagement: React.FC = () => {
   const [statusOrders, setStatusOrders] = useState<Record<string, Order[]>>({});
   const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
-  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPages, setCurrentPages] = useState<Record<string, number>>({});
 
   const STATUS_ORDER = [
     OrderStatus.PENDING,
     OrderStatus.SHIPPED,
     OrderStatus.DELIVERED,
   ];
-  // Map of colors as per status (background color, text color)
-  const STATUS_COLORS = {
-    [OrderStatus.PENDING]: ['#FEECD1', '#9C5D00'],
-    [OrderStatus.SHIPPED]: ['#D5DCDF', '#2B4E60'],
-    [OrderStatus.DELIVERED]: ['#D4EAED', '#19717D'],
-  };
+  
+  const STATUS_COLORS = new Map<OrderStatus, [string, string]>([
+    [OrderStatus.PENDING, ['#FEECD1', '#9C5D00']],
+    [OrderStatus.SHIPPED, ['#D5DCDF', '#2B4E60']],
+    [OrderStatus.DELIVERED, ['#D4EAED', '#19717D']],
+  ]);
 
   const MAX_PER_STATUS = 5;
 
-  const totalPages =
-    Math.max(
-      ...Object.values(statusOrders).map((orders) =>
-        Math.ceil(orders.length / MAX_PER_STATUS),
-      ),
-    ) || 1;
-
-  const displayedStatusOrders = Object.fromEntries(
-    Object.entries(statusOrders).map(([status, orders]) => [
-      status,
-      orders.slice(
-        (currentPage - 1) * MAX_PER_STATUS,
-        currentPage * MAX_PER_STATUS,
-      ),
-    ]),
-  );
-
   useEffect(() => {
     const fetchOrders = async () => {
       try {
         const data = await ApiClient.getAllOrders();
 
-        // Build the grouped object first
         const grouped: Record<string, Order[]> = {};
 
         for (const order of data) {
@@ -72,8 +55,14 @@ const AdminOrderManagement: React.FC = () => {
           grouped[status].push(order);
         }
 
-        // Set state once
         setStatusOrders(grouped);
+        
+        // Initialize current page for each status
+        const initialPages: Record<string, number> = {};
+        STATUS_ORDER.forEach(status => {
+          initialPages[status] = 1;
+        });
+        setCurrentPages(initialPages);
       } catch (error) {
         alert('Error fetching orders: ' + error);
       }
@@ -82,74 +71,90 @@ const AdminOrderManagement: React.FC = () => {
     fetchOrders();
   }, []);
 
+  const handlePageChange = (status: string, page: number) => {
+    setCurrentPages(prev => ({
+      ...prev,
+      [status]: page
+    }));
+  };
+
   return (
     <Box p={12}>
       <Heading textStyle="h1" color="gray.600" mb={8}>
         Order Management
       </Heading>
 
-      {STATUS_ORDER.map((status, index) => {
-        const orders = displayedStatusOrders[status] || [];
-        if (orders.length === 0) return null;
+      {STATUS_ORDER.map((status) => {
+        const allOrders = statusOrders[status] || [];
+        const currentPage = currentPages[status] || 1;
+        const displayedOrders = allOrders.slice(
+          (currentPage - 1) * MAX_PER_STATUS,
+          currentPage * MAX_PER_STATUS
+        );
+        const totalPages = Math.ceil(allOrders.length / MAX_PER_STATUS);
 
         return (
-          <Box key={status} mb={12}>
+          <Box key={status} mb={12} position="relative" minHeight="380px">
             <OrderTableSection
-              key={status}
-              orders={orders}
-              colors={STATUS_COLORS[orders[0].status]}
+              orders={allOrders.length > 0 ? displayedOrders : []}
+              status={status}
+              colors={STATUS_COLORS.get(status)!}
               selectedOrderId={selectedOrderId}
               onOrderSelect={setSelectedOrderId}
             />
-          </Box>
-        );
-      })}
+            
+            {totalPages > 1 && (
+              <Box position="absolute" bottom="-12" left="0" right="0">
+                <Pagination.Root
+                  count={allOrders.length}
+                  pageSize={MAX_PER_STATUS}
+                  page={currentPage}
+                  onPageChange={(e) => handlePageChange(status, e.page)}
+                >
+                  <ButtonGroup
+                    display="flex"
+                    justifyContent="center"
+                    alignItems="center"
+                    variant="outline"
+                    size="sm"
+                  >
+                    <Pagination.PrevTrigger
+                      color="neutral.800"
+                      _hover={{ color: 'black' }}
+                    >
+                      <ChevronLeft size={16} cursor="pointer"/>
+                    </Pagination.PrevTrigger>
 
-      <Pagination.Root
-        count={totalPages * MAX_PER_STATUS}
-        pageSize={MAX_PER_STATUS}
-        page={currentPage}
-        onPageChange={(e) => setCurrentPage(e.page)}
-      >
-        <ButtonGroup
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-          mt={12}
-          variant="outline"
-          size="sm"
-        >
-          <Pagination.PrevTrigger
-            color="neutral.800"
-            _hover={{ color: 'black' }}
-          >
-            <ChevronLeft size={16} />
-          </Pagination.PrevTrigger>
+                    <Pagination.Items
+                      render={(page) => (
+                        <IconButton
+                          borderColor={{ base: 'neutral.100', _selected: 'neutral.600' }}
+                        >
+                          {page.value}
+                        </IconButton>
+                      )}
+                    />
 
-          <Pagination.Items
-            render={(page) => (
-              <IconButton
-                borderColor={{ base: 'neutral.100', _selected: 'neutral.600' }}
-              >
-                {page.value}
-              </IconButton>
+                    <Pagination.NextTrigger
+                      color="neutral.800"
+                      _hover={{ color: 'black' }}
+                    >
+                      <ChevronRight size={16} cursor="pointer" />
+                    </Pagination.NextTrigger>
+                  </ButtonGroup>
+                </Pagination.Root>
+              </Box>
             )}
-          />
-
-          <Pagination.NextTrigger
-            color="neutral.800"
-            _hover={{ color: 'black' }}
-          >
-            <ChevronRight size={16} />
-          </Pagination.NextTrigger>
-        </ButtonGroup>
-      </Pagination.Root>
+          </Box>
+        );
+      })}
     </Box>
   );
 };
 
 interface OrderTableSectionProps {
   orders: Order[];
+  status: string;
   colors: string[];
   onOrderSelect: (orderId: number | null) => void;
   selectedOrderId: number | null;
@@ -157,6 +162,7 @@ interface OrderTableSectionProps {
 
 const OrderTableSection: React.FC<OrderTableSectionProps> = ({
   orders,
+  status,
   colors,
   onOrderSelect,
   selectedOrderId,
@@ -167,6 +173,9 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
   const [sortAsc, setSortAsc] = useState(true);
 
   const ASSIGNEE_COLORS = ['#F89E19', '#CC3538', '#2795A5', '#2B4E60'];
+  const ROW_HEIGHT = 5;
+  const MAX_ROWS = 5;
+  const MIN_SECTION_HEIGHT = MAX_ROWS * ROW_HEIGHT;
 
   const pantryOptions = [
     ...new Set(orders.map((o) => o.pantry.pantryName)),
@@ -178,7 +187,6 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
     );
   };
 
-  // Filter and sort the orders based on properties defined above (display this in the UI)
   const filteredOrders = orders
     .filter(
       (o) =>
@@ -228,18 +236,43 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
           fontWeight="semibold"
           color="neutral.700"
         >
-          {orders[0].status.charAt(0).toUpperCase() + orders[0].status.slice(1)}
+          {status.charAt(0).toUpperCase() + status.slice(1)}
         </Box>
       </Box>
-      <Box
-        display="flex"
-        justifyContent="flex-end"
-        alignItems="center"
-        gap={2}
-        mb={3}
-        position="relative"
-        fontFamily="'Inter', sans-serif"
-      >
+      
+      {orders.length === 0 ? (
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="center"
+          textAlign="center"
+          fontFamily="'Inter', sans-serif"
+          fontSize="sm"
+          color="neutral.600"
+          minHeight="300px"
+          gap={2}
+        >
+          <Box mb={2}>
+            <CircleCheck size={24} color="#262626" />
+          </Box>
+          <Box fontWeight="600" fontSize="lg" color="neutral.800">
+            No Orders
+          </Box>
+          <Box color="neutral.300">
+            You have no {status.toLowerCase()} orders at this time.
+          </Box>
+        </Box>
+      ) : (
+        <>
+          <Box
+            display="flex"
+            justifyContent="flex-end"
+            alignItems="center"
+            mb={3}
+            position="relative"
+            fontFamily="'Inter', sans-serif"
+          >
         <Box position="relative">
           <Button
             onClick={() => setIsFilterOpen(!isFilterOpen)}
@@ -473,11 +506,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                         <Box
                           key={index}
                           borderRadius="full"
-                          bg={
-                            ASSIGNEE_COLORS[
-                              Math.floor(Math.random() * ASSIGNEE_COLORS.length)
-                            ]
-                          }
+                          bg={ASSIGNEE_COLORS[index % ASSIGNEE_COLORS.length]}
                           width="33px"
                           height="33px"
                           display="flex"
@@ -524,8 +553,10 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
           ))}
         </Table.Body>
       </Table.Root>
+        </>
+      )}
     </Box>
   );
 };
 
-export default AdminOrderManagement;
+export default AdminOrderManagement;
\ No newline at end of file

From 585b809ae1dc5593158f28846f5781a1847ce889 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sat, 6 Dec 2025 12:52:00 -0500
Subject: [PATCH 14/29] Styling changes

---
 apps/backend/src/orders/order.controller.ts   |   1 -
 apps/backend/src/orders/order.service.ts      |   4 +-
 .../components/forms/orderDetailsModal.tsx    |  10 +-
 .../src/containers/adminOrderManagement.tsx   | 570 +++++++++---------
 apps/frontend/src/theme.ts                    |   1 +
 5 files changed, 301 insertions(+), 285 deletions(-)

diff --git a/apps/backend/src/orders/order.controller.ts b/apps/backend/src/orders/order.controller.ts
index a0c1a36a..0e985f03 100644
--- a/apps/backend/src/orders/order.controller.ts
+++ b/apps/backend/src/orders/order.controller.ts
@@ -1,7 +1,6 @@
 import {
   Controller,
   Get,
-  Post,
   Patch,
   Param,
   ParseIntPipe,
diff --git a/apps/backend/src/orders/order.service.ts b/apps/backend/src/orders/order.service.ts
index aea3cec6..05f37bca 100644
--- a/apps/backend/src/orders/order.service.ts
+++ b/apps/backend/src/orders/order.service.ts
@@ -1,6 +1,6 @@
 import { Injectable, NotFoundException } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
-import { Repository, In, Not } from 'typeorm';
+import { Repository, In } from 'typeorm';
 import { Order } from './order.entity';
 import { Pantry } from '../pantries/pantries.entity';
 import { FoodManufacturer } from '../foodManufacturers/manufacturer.entity';
@@ -147,4 +147,4 @@ export class OrdersService {
 
     return orders;
   }
-}
\ No newline at end of file
+}
diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index de2a1d62..3ffa1d74 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -6,6 +6,7 @@ import {
   Dialog,
   Portal,
   CloseButton,
+  Spacer,
 } from '@chakra-ui/react';
 import ApiClient from '@api/apiClient';
 import { FoodRequest, Order } from 'types/types';
@@ -99,17 +100,20 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
                         <Box
                           display="inline-flex"
                           alignItems="center"
-                          justifyContent="space-between"
                           bg="neutral.100"
-                          border="1px solid"
+                          border="2px solid"
                           borderColor="neutral.300"
                           borderRadius="4px"
                           p={2}
                           key={index}
+                          gap={4}
                         >
-                          <Text fontSize="sm" fontWeight="400" mr={10}>
+                          <Text fontSize="sm" fontWeight="400">
                             {type}
                           </Text>
+
+                          <Spacer />
+
                           <Text cursor="pointer" fontWeight="400">
                             x
                           </Text>
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index ee4946f6..744507dc 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -33,7 +33,7 @@ const AdminOrderManagement: React.FC = () => {
     OrderStatus.SHIPPED,
     OrderStatus.DELIVERED,
   ];
-  
+
   const STATUS_COLORS = new Map<OrderStatus, [string, string]>([
     [OrderStatus.PENDING, ['#FEECD1', '#9C5D00']],
     [OrderStatus.SHIPPED, ['#D5DCDF', '#2B4E60']],
@@ -56,10 +56,10 @@ const AdminOrderManagement: React.FC = () => {
         }
 
         setStatusOrders(grouped);
-        
+
         // Initialize current page for each status
         const initialPages: Record<string, number> = {};
-        STATUS_ORDER.forEach(status => {
+        STATUS_ORDER.forEach((status) => {
           initialPages[status] = 1;
         });
         setCurrentPages(initialPages);
@@ -72,9 +72,9 @@ const AdminOrderManagement: React.FC = () => {
   }, []);
 
   const handlePageChange = (status: string, page: number) => {
-    setCurrentPages(prev => ({
+    setCurrentPages((prev) => ({
       ...prev,
-      [status]: page
+      [status]: page,
     }));
   };
 
@@ -89,7 +89,7 @@ const AdminOrderManagement: React.FC = () => {
         const currentPage = currentPages[status] || 1;
         const displayedOrders = allOrders.slice(
           (currentPage - 1) * MAX_PER_STATUS,
-          currentPage * MAX_PER_STATUS
+          currentPage * MAX_PER_STATUS,
         );
         const totalPages = Math.ceil(allOrders.length / MAX_PER_STATUS);
 
@@ -102,7 +102,7 @@ const AdminOrderManagement: React.FC = () => {
               selectedOrderId={selectedOrderId}
               onOrderSelect={setSelectedOrderId}
             />
-            
+
             {totalPages > 1 && (
               <Box position="absolute" bottom="-12" left="0" right="0">
                 <Pagination.Root
@@ -122,13 +122,16 @@ const AdminOrderManagement: React.FC = () => {
                       color="neutral.800"
                       _hover={{ color: 'black' }}
                     >
-                      <ChevronLeft size={16} cursor="pointer"/>
+                      <ChevronLeft size={16} cursor="pointer" />
                     </Pagination.PrevTrigger>
 
                     <Pagination.Items
                       render={(page) => (
                         <IconButton
-                          borderColor={{ base: 'neutral.100', _selected: 'neutral.600' }}
+                          borderColor={{
+                            base: 'neutral.100',
+                            _selected: 'neutral.600',
+                          }}
                         >
                           {page.value}
                         </IconButton>
@@ -239,7 +242,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
           {status.charAt(0).toUpperCase() + status.slice(1)}
         </Box>
       </Box>
-      
+
       {orders.length === 0 ? (
         <Box
           display="flex"
@@ -272,291 +275,300 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
             mb={3}
             position="relative"
             fontFamily="'Inter', sans-serif"
+            gap={3}
           >
-        <Box position="relative">
-          <Button
-            onClick={() => setIsFilterOpen(!isFilterOpen)}
-            variant="outline"
-            color="neutral.800"
-            fontWeight="semibold"
-            border="1px solid"
-            borderColor="neutral.200"
-            size="sm"
-            p={3}
-          >
-            <Funnel />
-            Filter
-          </Button>
-
-          {isFilterOpen && (
-            <>
-              <Box
-                position="fixed"
-                top={0}
-                left={0}
-                right={0}
-                bottom={0}
-                onClick={() => setIsFilterOpen(false)}
-                zIndex={10}
-              />
-              <Box
-                position="absolute"
-                top="100%"
-                right={0}
-                mt={2}
-                bg="white"
+            <Box position="relative">
+              <Button
+                onClick={() => setIsFilterOpen(!isFilterOpen)}
+                variant="outline"
+                color="neutral.800"
+                fontWeight="semibold"
                 border="1px solid"
-                borderColor="gray.200"
-                borderRadius="md"
-                boxShadow="lg"
-                p={4}
-                minW="275px"
-                maxH="150px"
-                overflowY="auto"
-                zIndex={20}
+                borderColor="neutral.200"
+                size="sm"
+                p={3}
               >
-                <VStack
-                  align="stretch"
-                  fontSize="12px"
-                  fontFamily="Inter"
-                  color="neutral.800"
-                  fontWeight="500"
-                  gap={2}
-                >
-                  {pantryOptions.map((pantry) => (
-                    <Checkbox.Root
-                      key={pantry}
-                      checked={selectedPantries.includes(pantry)}
-                      onCheckedChange={(e: { checked: boolean }) =>
-                        handleFilterChange(pantry, !!e.checked)
-                      }
-                      size="md"
-                    >
-                      <Checkbox.HiddenInput />
-                      <Checkbox.Control borderRadius="sm" />
-                      <Checkbox.Label>{pantry}</Checkbox.Label>
-                    </Checkbox.Root>
-                  ))}
-                </VStack>
-              </Box>
-            </>
-          )}
-        </Box>
+                <Funnel />
+                Filter
+              </Button>
 
-        <Box position="relative">
-          <Button
-            onClick={() => setIsSortOpen(!isSortOpen)}
-            variant="outline"
-            color="neutral.800"
-            fontWeight="semibold"
-            border="1px solid"
-            borderColor="neutral.200"
-            p={3}
-            size="sm"
-          >
-            <ArrowDownUp />
-            Sort
-          </Button>
+              {isFilterOpen && (
+                <>
+                  <Box
+                    position="fixed"
+                    top={0}
+                    left={0}
+                    right={0}
+                    bottom={0}
+                    onClick={() => setIsFilterOpen(false)}
+                    zIndex={10}
+                  />
+                  <Box
+                    position="absolute"
+                    top="100%"
+                    right={0}
+                    mt={2}
+                    bg="white"
+                    border="1px solid"
+                    borderColor="gray.200"
+                    borderRadius="md"
+                    boxShadow="lg"
+                    p={4}
+                    minW="275px"
+                    maxH="150px"
+                    overflowY="auto"
+                    zIndex={20}
+                  >
+                    <VStack
+                      align="stretch"
+                      fontSize="12px"
+                      fontFamily="Inter"
+                      color="neutral.800"
+                      fontWeight="500"
+                      gap={2}
+                    >
+                      {pantryOptions.map((pantry) => (
+                        <Checkbox.Root
+                          key={pantry}
+                          checked={selectedPantries.includes(pantry)}
+                          onCheckedChange={(e: { checked: boolean }) =>
+                            handleFilterChange(pantry, !!e.checked)
+                          }
+                          size="md"
+                        >
+                          <Checkbox.HiddenInput />
+                          <Checkbox.Control borderRadius="sm" />
+                          <Checkbox.Label>{pantry}</Checkbox.Label>
+                        </Checkbox.Root>
+                      ))}
+                    </VStack>
+                  </Box>
+                </>
+              )}
+            </Box>
 
-          {isSortOpen && (
-            <>
-              <Box
-                position="fixed"
-                top={0}
-                left={0}
-                right={0}
-                bottom={0}
-                onClick={() => setIsSortOpen(false)}
-                zIndex={10}
-              />
-              <Box
-                position="absolute"
-                top="100%"
-                right={0}
-                mt={2}
-                bg="white"
+            <Box position="relative">
+              <Button
+                onClick={() => setIsSortOpen(!isSortOpen)}
+                variant="outline"
+                color="neutral.800"
+                fontWeight="semibold"
                 border="1px solid"
-                borderColor="gray.200"
-                borderRadius="md"
-                boxShadow="lg"
-                p={2}
-                minW="120px"
-                zIndex={20}
+                borderColor="neutral.200"
+                p={3}
+                size="sm"
               >
-                <VStack align="stretch" color="neutral.800" gap={1}>
+                <ArrowDownUp />
+                Sort
+              </Button>
+
+              {isSortOpen && (
+                <>
                   <Box
-                    cursor="pointer"
-                    px={2}
-                    py={1}
-                    _hover={{ bg: 'gray.100' }}
-                    onClick={() => {
-                      setSortAsc(false);
-                      setIsSortOpen(false);
-                    }}
-                  >
-                    Newest
-                  </Box>
+                    position="fixed"
+                    top={0}
+                    left={0}
+                    right={0}
+                    bottom={0}
+                    onClick={() => setIsSortOpen(false)}
+                    zIndex={10}
+                  />
                   <Box
-                    cursor="pointer"
-                    px={2}
-                    py={1}
-                    _hover={{ bg: 'gray.100' }}
-                    onClick={() => {
-                      setSortAsc(true);
-                      setIsSortOpen(false);
-                    }}
+                    position="absolute"
+                    top="100%"
+                    right={0}
+                    mt={2}
+                    bg="white"
+                    border="1px solid"
+                    borderColor="gray.200"
+                    borderRadius="md"
+                    boxShadow="lg"
+                    p={2}
+                    minW="120px"
+                    zIndex={20}
                   >
-                    Oldest
+                    <VStack align="stretch" color="neutral.800" gap={1} fontSize="12px" fontFamily="Inter" fontWeight="500">
+                      <Box
+                        cursor="pointer"
+                        px={2}
+                        py={1}
+                        _hover={{ bg: 'gray.100' }}
+                        onClick={() => {
+                          setSortAsc(false);
+                          setIsSortOpen(false);
+                        }}
+                      >
+                        Newest
+                      </Box>
+                      <Box
+                        cursor="pointer"
+                        px={2}
+                        py={1}
+                        _hover={{ bg: 'gray.100' }}
+                        onClick={() => {
+                          setSortAsc(true);
+                          setIsSortOpen(false);
+                        }}
+                      >
+                        Oldest
+                      </Box>
+                    </VStack>
                   </Box>
-                </VStack>
-              </Box>
-            </>
-          )}
-        </Box>
-      </Box>
-      <Table.Root>
-        <Table.Header>
-          <Table.Row>
-            <Table.ColumnHeader
-              {...tableHeaderStyles}
-              borderRight="1px solid"
-              borderRightColor="neutral.100"
-              width="10%"
-            >
-              Order #
-            </Table.ColumnHeader>
-            <Table.ColumnHeader
-              {...tableHeaderStyles}
-              borderRight="1px solid"
-              borderRightColor="neutral.100"
-              width="25%"
-            >
-              Pantry
-            </Table.ColumnHeader>
-            <Table.ColumnHeader
-              {...tableHeaderStyles}
-              borderRight="1px solid"
-              borderRightColor="neutral.100"
-              width="15%"
-            >
-              Assignee
-            </Table.ColumnHeader>
-            <Table.ColumnHeader
-              {...tableHeaderStyles}
-              borderRight="1px solid"
-              borderRightColor="neutral.100"
-              width="15%"
-            >
-              Status
-            </Table.ColumnHeader>
-            <Table.ColumnHeader
-              {...tableHeaderStyles}
-              textAlign="right"
-              width="25%"
-            >
-              Date Started
-            </Table.ColumnHeader>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          {filteredOrders.map((order, index) => (
-            <Table.Row
-              key={`${order.orderId}-${index}`}
-              _hover={{ bg: 'gray.50' }}
-            >
-              <Table.Cell
-                {...tableCellStyles}
-                borderRight="1px solid"
-                borderRightColor="neutral.100"
-              >
-                <Button
-                  variant="plain"
-                  fontWeight="400"
-                  textDecoration="underline"
-                  onClick={() => onOrderSelect(order.orderId)}
+                </>
+              )}
+            </Box>
+          </Box>
+          <Table.Root>
+            <Table.Header>
+              <Table.Row>
+                <Table.ColumnHeader
+                  {...tableHeaderStyles}
+                  borderRight="1px solid"
+                  borderRightColor="neutral.100"
+                  width="10%"
                 >
-                  {order.orderId}
-                </Button>
-                {selectedOrderId === order.orderId && (
-                  <OrderDetailsModal
-                    order={order}
-                    isOpen={true}
-                    onClose={() => onOrderSelect(null)}
-                  />
-                )}
-              </Table.Cell>
-              <Table.Cell
-                {...tableCellStyles}
-                borderRight="1px solid"
-                borderRightColor="neutral.100"
-              >
-                {order.pantry.pantryName}
-              </Table.Cell>
-              <Table.Cell
-                {...tableCellStyles}
-                borderRight="1px solid"
-                borderRightColor="neutral.100"
-              >
-                <Box direction="row" gap={1} display="flex" alignItems="center">
-                  {order.pantry.volunteers &&
-                  order.pantry.volunteers.length > 0 ? (
-                    order.pantry.volunteers
-                      .slice(0, 5)
-                      .map((volunteer, index) => (
-                        <Box
-                          key={index}
-                          borderRadius="full"
-                          bg={ASSIGNEE_COLORS[index % ASSIGNEE_COLORS.length]}
-                          width="33px"
-                          height="33px"
-                          display="flex"
-                          alignItems="center"
-                          justifyContent="center"
-                          color="white"
-                          p={2}
-                        >
-                          {volunteer.firstName.charAt(0).toUpperCase()}
-                          {volunteer.lastName.charAt(0).toUpperCase()}
-                        </Box>
-                      ))
-                  ) : (
-                    <Box>No Assignees</Box>
-                  )}
-                </Box>
-              </Table.Cell>
-              <Table.Cell
-                {...tableCellStyles}
-                borderRight="1px solid"
-                borderRightColor="neutral.100"
-              >
-                <Box
-                  borderRadius="md"
-                  bg={colors[0]}
-                  color={colors[1]}
-                  display="inline-block"
-                  fontWeight="500"
-                  my={2}
-                  py={1}
-                  px={3}
+                  Order #
+                </Table.ColumnHeader>
+                <Table.ColumnHeader
+                  {...tableHeaderStyles}
+                  borderRight="1px solid"
+                  borderRightColor="neutral.100"
+                  width="25%"
                 >
-                  {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
-                </Box>
-              </Table.Cell>
-              <Table.Cell
-                {...tableCellStyles}
-                textAlign="right"
-                color="neutral.700"
-              >
-                {formatDate(order.createdAt)}
-              </Table.Cell>
-            </Table.Row>
-          ))}
-        </Table.Body>
-      </Table.Root>
+                  Pantry
+                </Table.ColumnHeader>
+                <Table.ColumnHeader
+                  {...tableHeaderStyles}
+                  borderRight="1px solid"
+                  borderRightColor="neutral.100"
+                  width="15%"
+                >
+                  Assignee
+                </Table.ColumnHeader>
+                <Table.ColumnHeader
+                  {...tableHeaderStyles}
+                  borderRight="1px solid"
+                  borderRightColor="neutral.100"
+                  width="15%"
+                >
+                  Status
+                </Table.ColumnHeader>
+                <Table.ColumnHeader
+                  {...tableHeaderStyles}
+                  textAlign="right"
+                  width="25%"
+                >
+                  Date Started
+                </Table.ColumnHeader>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {filteredOrders.map((order, index) => (
+                <Table.Row
+                  key={`${order.orderId}-${index}`}
+                  _hover={{ bg: 'gray.50' }}
+                >
+                  <Table.Cell
+                    {...tableCellStyles}
+                    borderRight="1px solid"
+                    borderRightColor="neutral.100"
+                  >
+                    <Button
+                      variant="plain"
+                      fontWeight="400"
+                      textDecoration="underline"
+                      onClick={() => onOrderSelect(order.orderId)}
+                    >
+                      {order.orderId}
+                    </Button>
+                    {selectedOrderId === order.orderId && (
+                      <OrderDetailsModal
+                        order={order}
+                        isOpen={true}
+                        onClose={() => onOrderSelect(null)}
+                      />
+                    )}
+                  </Table.Cell>
+                  <Table.Cell
+                    {...tableCellStyles}
+                    borderRight="1px solid"
+                    borderRightColor="neutral.100"
+                  >
+                    {order.pantry.pantryName}
+                  </Table.Cell>
+                  <Table.Cell
+                    {...tableCellStyles}
+                    borderRight="1px solid"
+                    borderRightColor="neutral.100"
+                  >
+                    <Box
+                      direction="row"
+                      gap={1}
+                      display="flex"
+                      alignItems="center"
+                    >
+                      {order.pantry.volunteers &&
+                      order.pantry.volunteers.length > 0 ? (
+                        order.pantry.volunteers
+                          .slice(0, 5)
+                          .map((volunteer, index) => (
+                            <Box
+                              key={index}
+                              borderRadius="full"
+                              bg={
+                                ASSIGNEE_COLORS[index % ASSIGNEE_COLORS.length]
+                              }
+                              width="33px"
+                              height="33px"
+                              display="flex"
+                              alignItems="center"
+                              justifyContent="center"
+                              color="white"
+                              p={2}
+                            >
+                              {volunteer.firstName.charAt(0).toUpperCase()}
+                              {volunteer.lastName.charAt(0).toUpperCase()}
+                            </Box>
+                          ))
+                      ) : (
+                        <Box>No Assignees</Box>
+                      )}
+                    </Box>
+                  </Table.Cell>
+                  <Table.Cell
+                    {...tableCellStyles}
+                    borderRight="1px solid"
+                    borderRightColor="neutral.100"
+                  >
+                    <Box
+                      borderRadius="md"
+                      bg={colors[0]}
+                      color={colors[1]}
+                      display="inline-block"
+                      fontWeight="500"
+                      my={2}
+                      py={1}
+                      px={3}
+                    >
+                      {order.status.charAt(0).toUpperCase() +
+                        order.status.slice(1)}
+                    </Box>
+                  </Table.Cell>
+                  <Table.Cell
+                    {...tableCellStyles}
+                    textAlign="right"
+                    color="neutral.700"
+                  >
+                    {formatDate(order.createdAt)}
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table.Root>
         </>
       )}
     </Box>
   );
 };
 
-export default AdminOrderManagement;
\ No newline at end of file
+export default AdminOrderManagement;
diff --git a/apps/frontend/src/theme.ts b/apps/frontend/src/theme.ts
index c504bb84..d0155318 100644
--- a/apps/frontend/src/theme.ts
+++ b/apps/frontend/src/theme.ts
@@ -69,6 +69,7 @@ const customConfig = defineConfig({
           50: { value: '#FAFAFA' },
           100: { value: '#E7E7E7' },
           200: { value: '#CFCFCF' },
+          300: { value: '#B8B8B8' },
           600: { value: '#707070' },
           700: { value: '#585858' },
           800: { value: '#414141' },

From 56a9a82c5b428b3f0561c94a22b1b2261672373d Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sat, 6 Dec 2025 12:52:28 -0500
Subject: [PATCH 15/29] prettier

---
 apps/frontend/src/containers/adminOrderManagement.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 744507dc..e2e4cc17 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -387,7 +387,14 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                     minW="120px"
                     zIndex={20}
                   >
-                    <VStack align="stretch" color="neutral.800" gap={1} fontSize="12px" fontFamily="Inter" fontWeight="500">
+                    <VStack
+                      align="stretch"
+                      color="neutral.800"
+                      gap={1}
+                      fontSize="12px"
+                      fontFamily="Inter"
+                      fontWeight="500"
+                    >
                       <Box
                         cursor="pointer"
                         px={2}

From cb5ce22b7341f6ce6884d21359c4a0a1d452b525 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sat, 6 Dec 2025 13:08:00 -0500
Subject: [PATCH 16/29] Prettier

---
 .../pantries/dtos/pantry-application.dto.ts   |   2 +-
 .../forms/pantryApplicationForm.tsx           | 658 ++++++++++--------
 .../src/components/forms/usPhoneInput.tsx     |   5 +-
 apps/frontend/src/theme.ts                    |   6 +-
 4 files changed, 394 insertions(+), 277 deletions(-)

diff --git a/apps/backend/src/pantries/dtos/pantry-application.dto.ts b/apps/backend/src/pantries/dtos/pantry-application.dto.ts
index 42510915..c7473b0f 100644
--- a/apps/backend/src/pantries/dtos/pantry-application.dto.ts
+++ b/apps/backend/src/pantries/dtos/pantry-application.dto.ts
@@ -52,7 +52,7 @@ export class PantryApplicationDto {
   @IsNotEmpty()
   @MaxLength(255)
   emailContactOther?: string;
-  
+
   @IsOptional()
   @IsString()
   @IsNotEmpty()
diff --git a/apps/frontend/src/components/forms/pantryApplicationForm.tsx b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
index 48b693e0..df185caa 100644
--- a/apps/frontend/src/components/forms/pantryApplicationForm.tsx
+++ b/apps/frontend/src/components/forms/pantryApplicationForm.tsx
@@ -67,18 +67,22 @@ const activityOptions = [
 
 const PantryApplicationForm: React.FC = () => {
   const [contactPhone, setContactPhone] = useState<string>('');
-  const [secondaryContactPhone, setSecondaryContactPhone] = useState<string>('');
+  const [secondaryContactPhone, setSecondaryContactPhone] =
+    useState<string>('');
   const [activities, setActivities] = useState<string[]>([]);
   const allergenClientsExactOption: string = 'I have an exact number';
 
   const [allergenClients, setAllergenClients] = useState<string | undefined>();
   const [restrictions, setRestrictions] = useState<string[]>([]);
-  const [reserveFoodForAllergic, setReserveFoodForAllergic] = useState<string>();
-  const [differentMailingAddress, setDifferentMailingAddress] = useState<boolean | null>();
+  const [reserveFoodForAllergic, setReserveFoodForAllergic] =
+    useState<string>();
+  const [differentMailingAddress, setDifferentMailingAddress] = useState<
+    boolean | null
+  >();
   const [otherEmailContact, setOtherEmailContact] = useState<boolean>(false);
 
   const sectionTitleStyles = {
-    fontFamily: "inter",
+    fontFamily: 'inter',
     fontWeight: '600',
     fontSize: 'md',
     color: 'gray.dark',
@@ -86,16 +90,16 @@ const PantryApplicationForm: React.FC = () => {
   };
 
   const sectionSubtitleStyles = {
-    fontFamily: "inter",
+    fontFamily: 'inter',
     fontWeight: '400',
     color: 'gray.light',
     mb: '2.25em',
     fontSize: 'sm',
-  }
+  };
 
   const fieldHeaderStyles = {
     color: 'neutral.800',
-    fontFamily: "inter",
+    fontFamily: 'inter',
     fontSize: 'sm',
     fontWeight: '600',
   };
@@ -103,96 +107,121 @@ const PantryApplicationForm: React.FC = () => {
   return (
     <Box width="100%" mx="11em" my="4em">
       <Box as="section" mb="2.75em">
-        <Heading textStyle="h1" fontWeight="normal" mb=".5em" >
+        <Heading textStyle="h1" fontWeight="normal" mb=".5em">
           Partner Pantry Application
         </Heading>
         <Text textStyle="p" color="gray.light">
-          Thank you for your interest in partnering with Securing Safe Food (SSF) to help 
-          serve clients with food allergies and other adverse reactions to foods.
+          Thank you for your interest in partnering with Securing Safe Food
+          (SSF) to help serve clients with food allergies and other adverse
+          reactions to foods.
         </Text>
       </Box>
-      <Box 
-        as="section" bg="#FEFEFE" p="2em" 
-        border="1px solid" borderColor="neutral.200" rounded="sm"
+      <Box
+        as="section"
+        bg="#FEFEFE"
+        p="2em"
+        border="1px solid"
+        borderColor="neutral.200"
+        rounded="sm"
       >
         <Form method="post" action="/pantry-application">
-          <Heading textStyle="h3" mb="1em" color="gray.dark" >
+          <Heading textStyle="h3" mb="1em" color="gray.dark">
             Pantry Application Form
           </Heading>
-          <Stack gap="1em" mb="2em" color="gray.light" textStyle="p" fontWeight="400">
+          <Stack
+            gap="1em"
+            mb="2em"
+            color="gray.light"
+            textStyle="p"
+            fontWeight="400"
+          >
             <Text>
-              This application helps us understand your pantry’s capacity and interest in 
-              distributing allergen-friendly food. We’ll ask about your pantry’s current 
-              practices, storage capabilities, and communication preferences.
+              This application helps us understand your pantry’s capacity and
+              interest in distributing allergen-friendly food. We’ll ask about
+              your pantry’s current practices, storage capabilities, and
+              communication preferences.
             </Text>
             <Text mb=".5em">
-              Please answer as accurately as possible. If you have any questions or need help, 
-              don’t hesitate to contact the SSF team.
+              Please answer as accurately as possible. If you have any questions
+              or need help, don’t hesitate to contact the SSF team.
             </Text>
             <Separator size="sm" color="neutral.100" />
           </Stack>
-          
-          <Text {...sectionTitleStyles}>
-            Primary Contact Information
-          </Text>
+
+          <Text {...sectionTitleStyles}>Primary Contact Information</Text>
           <SimpleGrid columns={2} columnGap={9} rowGap={10} mb="2.5em">
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 First Name
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
-              <Input name="contactFirstName" type="text" borderColor="neutral.100" />
+              <Input
+                name="contactFirstName"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 Last Name
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
-              <Input name="contactLastName" type="text" borderColor="neutral.100" />
+              <Input
+                name="contactLastName"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 Phone Number
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
               <USPhoneInput
                 value={contactPhone}
                 onChange={setContactPhone}
-                inputProps={{ name: 'contactPhone', borderColor: 'neutral.100' }}
+                inputProps={{
+                  name: 'contactPhone',
+                  borderColor: 'neutral.100',
+                }}
               />
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 Email Address
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
-              <Input name="contactEmail" type="email" borderColor="neutral.100" />
+              <Input
+                name="contactEmail"
+                type="email"
+                borderColor="neutral.100"
+              />
             </Field.Root>
           </SimpleGrid>
           <Field.Root required mb=".75em">
             <Field.Label {...fieldHeaderStyles} mb=".5em">
-              Is there someone at your pantry who can regularly check and respond to emails from SSF as needed?{' '}
-              <Field.RequiredIndicator color="red"/>
+              Is there someone at your pantry who can regularly check and
+              respond to emails from SSF as needed?{' '}
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <RadioGroup.Root 
+            <RadioGroup.Root
               name="hasEmailContact"
               variant="solid"
-              onValueChange={(e: {value: string}) => setOtherEmailContact(e.value === 'Other')}
+              onValueChange={(e: { value: string }) =>
+                setOtherEmailContact(e.value === 'Other')
+              }
             >
               <Stack>
                 {['Yes', 'No', 'Other'].map((value) => (
                   <RadioGroup.Item key={value} value={value}>
-                    <RadioGroup.ItemHiddenInput required/>
-                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }} >
-                      <RadioGroup.ItemIndicator 
-                        border="1px solid" 
+                    <RadioGroup.ItemHiddenInput required />
+                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }}>
+                      <RadioGroup.ItemIndicator
+                        border="1px solid"
                         borderColor="neutral.100"
                       />
                     </RadioGroup.ItemControl>
-                    <RadioGroup.ItemText 
-                      color="neutral.700"
-                      textStyle="p2"
-                    >
+                    <RadioGroup.ItemText color="neutral.700" textStyle="p2">
                       {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
@@ -201,127 +230,151 @@ const PantryApplicationForm: React.FC = () => {
             </RadioGroup.Root>
           </Field.Root>
           <Field.Root required={otherEmailContact} mb="2.5em">
-            <Input 
-              name="emailContactOther" 
-              type="text" 
-              borderColor="neutral.100" 
+            <Input
+              name="emailContactOther"
+              type="text"
+              borderColor="neutral.100"
               placeholder="If you selected other, please specify."
-              _placeholder={{ color: "neutral.800" }}
+              _placeholder={{ color: 'neutral.800' }}
               maxW="30em"
             />
           </Field.Root>
 
-          <Separator size="sm" color="neutral.100" mb="3em"/>
+          <Separator size="sm" color="neutral.100" mb="3em" />
 
-          <Text {...sectionTitleStyles}>
-            Secondary Contact Information
-          </Text>
+          <Text {...sectionTitleStyles}>Secondary Contact Information</Text>
           <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="4em">
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                First Name
-              </Field.Label>
-              <Input name="secondaryContactFirstName" type="text" borderColor="neutral.100" />
+              <Field.Label {...fieldHeaderStyles}>First Name</Field.Label>
+              <Input
+                name="secondaryContactFirstName"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                Last Name
-              </Field.Label>
-              <Input name="secondaryContactLastName" type="text" borderColor="neutral.100" />
+              <Field.Label {...fieldHeaderStyles}>Last Name</Field.Label>
+              <Input
+                name="secondaryContactLastName"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                Phone Number
-              </Field.Label>
+              <Field.Label {...fieldHeaderStyles}>Phone Number</Field.Label>
               <USPhoneInput
                 value={secondaryContactPhone}
                 onChange={setSecondaryContactPhone}
                 allowEmpty={true}
-                inputProps={{ name: 'secondaryContactPhone', borderColor: 'neutral.100' }}
+                inputProps={{
+                  name: 'secondaryContactPhone',
+                  borderColor: 'neutral.100',
+                }}
               />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                Email Address
-              </Field.Label>
-              <Input name="secondaryContactEmail" type="email" borderColor="neutral.100" />
+              <Field.Label {...fieldHeaderStyles}>Email Address</Field.Label>
+              <Input
+                name="secondaryContactEmail"
+                type="email"
+                borderColor="neutral.100"
+              />
             </Field.Root>
           </SimpleGrid>
 
-          <Separator size="sm" color="neutral.100" mb="3em"/>
-          
+          <Separator size="sm" color="neutral.100" mb="3em" />
+
           <Text {...sectionTitleStyles} mb="0">
             Food Shipment Address
           </Text>
           <Text {...sectionSubtitleStyles}>
             Please list your address for <b>food shipments</b>.
           </Text>
-          <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="2em" >
+          <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="2em">
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 Address Line 1
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
-              <Input name="shipmentAddressLine1" type="text" borderColor="neutral.100" />
+              <Input
+                name="shipmentAddressLine1"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                Address Line 2
-              </Field.Label>
-              <Input name="shipmentAddressLine2" type="text" borderColor="neutral.100" />
+              <Field.Label {...fieldHeaderStyles}>Address Line 2</Field.Label>
+              <Input
+                name="shipmentAddressLine2"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 City/Town
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
-              <Input name="shipmentAddressCity" type="text" borderColor="neutral.100" />
+              <Input
+                name="shipmentAddressCity"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 State/Region/Province
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
-              <Input name="shipmentAddressState" type="text" borderColor="neutral.100" />
+              <Input
+                name="shipmentAddressState"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root required>
               <Field.Label {...fieldHeaderStyles}>
                 Zip/Post Code
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Field.Label>
-              <Input name="shipmentAddressZip" type="text" borderColor="neutral.100" />
+              <Input
+                name="shipmentAddressZip"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
             <Field.Root>
-              <Field.Label {...fieldHeaderStyles}>
-                Country
-              </Field.Label>
-              <Input name="shipmentAddressCountry" type="text" borderColor="neutral.100" />
+              <Field.Label {...fieldHeaderStyles}>Country</Field.Label>
+              <Input
+                name="shipmentAddressCountry"
+                type="text"
+                borderColor="neutral.100"
+              />
             </Field.Root>
           </SimpleGrid>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles} mb=".5em">
-              Does this address differ from your pantry's mailing address for documents?{' '}
-              <Field.RequiredIndicator color="red"/>
+              Does this address differ from your pantry's mailing address for
+              documents? <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <RadioGroup.Root 
+            <RadioGroup.Root
               variant="solid"
-              onValueChange={(e: {value: string}) => setDifferentMailingAddress(e.value === 'Yes')}
+              onValueChange={(e: { value: string }) =>
+                setDifferentMailingAddress(e.value === 'Yes')
+              }
               name="differentMailingAddress"
             >
               <Stack>
                 {['Yes', 'No'].map((value) => (
                   <RadioGroup.Item key={value} value={value}>
-                    <RadioGroup.ItemHiddenInput required/>
-                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }} >
-                      <RadioGroup.ItemIndicator 
-                        border="1px solid" 
+                    <RadioGroup.ItemHiddenInput required />
+                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }}>
+                      <RadioGroup.ItemIndicator
+                        border="1px solid"
                         borderColor="neutral.100"
                       />
                     </RadioGroup.ItemControl>
-                    <RadioGroup.ItemText 
-                      color="neutral.700" 
-                      textStyle="p2"
-                    >
+                    <RadioGroup.ItemText color="neutral.700" textStyle="p2">
                       {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
@@ -331,28 +384,22 @@ const PantryApplicationForm: React.FC = () => {
           </Field.Root>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles} mb=".5em">
-              Would your pantry be able to accept food deliveries 
-              during standard business hours Mon-Fri?{' '}
-              <Field.RequiredIndicator color="red"/>
+              Would your pantry be able to accept food deliveries during
+              standard business hours Mon-Fri?{' '}
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <RadioGroup.Root 
-              name="acceptFoodDeliveries"
-              variant="solid"
-            >
+            <RadioGroup.Root name="acceptFoodDeliveries" variant="solid">
               <Stack>
                 {['Yes', 'No'].map((value) => (
                   <RadioGroup.Item key={value} value={value}>
                     <RadioGroup.ItemHiddenInput required />
-                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }} >
-                      <RadioGroup.ItemIndicator 
-                        border="1px solid" 
+                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }}>
+                      <RadioGroup.ItemIndicator
+                        border="1px solid"
                         borderColor="neutral.100"
                       />
                     </RadioGroup.ItemControl>
-                    <RadioGroup.ItemText
-                      color="neutral.700"
-                      textStyle="p2"
-                    >
+                    <RadioGroup.ItemText color="neutral.700" textStyle="p2">
                       {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
@@ -364,10 +411,13 @@ const PantryApplicationForm: React.FC = () => {
             <Field.Label {...fieldHeaderStyles}>
               Please note any delivery window restrictions.
             </Field.Label>
-            <Textarea name="deliveryWindowInstructions" borderColor="neutral.100" />
+            <Textarea
+              name="deliveryWindowInstructions"
+              borderColor="neutral.100"
+            />
           </Field.Root>
 
-          <Separator size="sm" color="neutral.100" my="3em"/>
+          <Separator size="sm" color="neutral.100" my="3em" />
 
           {differentMailingAddress && (
             <>
@@ -377,61 +427,81 @@ const PantryApplicationForm: React.FC = () => {
               <Text {...sectionSubtitleStyles}>
                 Please list your mailing address for <b>documents</b>.
               </Text>
-              <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="4em" >
+              <SimpleGrid columns={2} columnGap={9} rowGap={9} mb="4em">
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
                     Address Line 1
-                    <Field.RequiredIndicator color="red"/>
+                    <Field.RequiredIndicator color="red" />
                   </Field.Label>
-                  <Input name="mailingAddressLine1" type="text" borderColor="neutral.100" />
+                  <Input
+                    name="mailingAddressLine1"
+                    type="text"
+                    borderColor="neutral.100"
+                  />
                 </Field.Root>
                 <Field.Root>
                   <Field.Label {...fieldHeaderStyles}>
                     Address Line 2
                   </Field.Label>
-                  <Input name="mailingAddressLine2" type="text" borderColor="neutral.100" />
+                  <Input
+                    name="mailingAddressLine2"
+                    type="text"
+                    borderColor="neutral.100"
+                  />
                 </Field.Root>
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
                     City/Town
-                    <Field.RequiredIndicator color="red"/>
+                    <Field.RequiredIndicator color="red" />
                   </Field.Label>
-                  <Input name="mailingAddressCity" type="text" borderColor="neutral.100" />
+                  <Input
+                    name="mailingAddressCity"
+                    type="text"
+                    borderColor="neutral.100"
+                  />
                 </Field.Root>
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
                     State/Region/Province
-                    <Field.RequiredIndicator color="red"/>
+                    <Field.RequiredIndicator color="red" />
                   </Field.Label>
-                  <Input name="mailingAddressState" type="text" borderColor="neutral.100" />
+                  <Input
+                    name="mailingAddressState"
+                    type="text"
+                    borderColor="neutral.100"
+                  />
                 </Field.Root>
                 <Field.Root required={differentMailingAddress}>
                   <Field.Label {...fieldHeaderStyles}>
                     Zip/Post Code
-                    <Field.RequiredIndicator color="red"/>
+                    <Field.RequiredIndicator color="red" />
                   </Field.Label>
-                  <Input name="mailingAddressZip" type="text" borderColor="neutral.100" />
+                  <Input
+                    name="mailingAddressZip"
+                    type="text"
+                    borderColor="neutral.100"
+                  />
                 </Field.Root>
                 <Field.Root>
-                  <Field.Label {...fieldHeaderStyles}>
-                    Country
-                  </Field.Label>
-                  <Input name="mailingAddressCountry" type="text" borderColor="neutral.100" />
+                  <Field.Label {...fieldHeaderStyles}>Country</Field.Label>
+                  <Input
+                    name="mailingAddressCountry"
+                    type="text"
+                    borderColor="neutral.100"
+                  />
                 </Field.Root>
               </SimpleGrid>
 
-              <Separator size="sm" color="neutral.100" my="3em"/>
+              <Separator size="sm" color="neutral.100" my="3em" />
             </>
           )}
-          
-          <Text {...sectionTitleStyles}>
-            Pantry Details
-          </Text>
+
+          <Text {...sectionTitleStyles}>Pantry Details</Text>
           <Field.Root required mb="2em">
             <Field.Label asChild>
               <Text {...fieldHeaderStyles}>
                 Pantry Name
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Text>
             </Field.Label>
             <Input name="pantryName" type="text" borderColor="neutral.100" />
@@ -440,7 +510,7 @@ const PantryApplicationForm: React.FC = () => {
             <Field.Label {...fieldHeaderStyles}>
               Approximately how many allergen-avoidant clients does your pantry
               serve?
-              <Field.RequiredIndicator color="red"/>
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
             <NativeSelect.Root>
               <NativeSelect.Field
@@ -465,7 +535,7 @@ const PantryApplicationForm: React.FC = () => {
                   </option>
                 ))}
               </NativeSelect.Field>
-              <NativeSelectIndicator/>
+              <NativeSelectIndicator />
             </NativeSelect.Root>
           </Field.Root>
           {allergenClients === allergenClientsExactOption && (
@@ -492,7 +562,12 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Label>
 
             {restrictions.map((value) => (
-              <input type="hidden" name="restrictions" key={value} value={value} />
+              <input
+                type="hidden"
+                name="restrictions"
+                key={value}
+                value={value}
+              />
             ))}
 
             <Menu.Root closeOnSelect={false}>
@@ -502,7 +577,7 @@ const PantryApplicationForm: React.FC = () => {
                   pr={2}
                   w="full"
                   bgColor="white"
-                  color='neutral.800'
+                  color="neutral.800"
                   borderColor="neutral.100"
                   justifyContent="space-between"
                   textStyle="p2"
@@ -513,15 +588,15 @@ const PantryApplicationForm: React.FC = () => {
                     : 'Select restrictions'}
                   <ChevronDownIcon />
 
-                  <input 
+                  <input
                     type="text"
                     name="restrictions-required"
                     value={restrictions.length > 0 ? 'selected' : ''}
                     required
-                    style={{ 
+                    style={{
                       position: 'absolute',
                       opacity: 0,
-                      pointerEvents: 'none'
+                      pointerEvents: 'none',
                     }}
                   />
                 </Button>
@@ -574,7 +649,7 @@ const PantryApplicationForm: React.FC = () => {
             {restrictions.length > 0 && (
               <Flex wrap="wrap" mt={1} gap={2}>
                 {restrictions.map((value) => (
-                  <Tag.Root 
+                  <Tag.Root
                     key={value}
                     bg="teal.100"
                     p={2}
@@ -583,10 +658,10 @@ const PantryApplicationForm: React.FC = () => {
                   >
                     <Tag.Label>{value}</Tag.Label>
                     <Tag.EndElement ml={4}>
-                      <Tag.CloseTrigger 
+                      <Tag.CloseTrigger
                         onClick={() =>
                           setRestrictions((prev) =>
-                            prev.filter((item) => item !== value)
+                            prev.filter((item) => item !== value),
                           )
                         }
                         style={{ cursor: 'pointer' }}
@@ -601,8 +676,10 @@ const PantryApplicationForm: React.FC = () => {
           {restrictions.find((option) =>
             otherRestrictionsOptions.includes(option),
           ) && (
-            <Field.Root 
-              required={restrictions.find((option) => otherRestrictionsOptions.includes(option))}
+            <Field.Root
+              required={restrictions.find((option) =>
+                otherRestrictionsOptions.includes(option),
+              )}
               mb="2em"
             >
               <Field.Label {...fieldHeaderStyles}>
@@ -614,27 +691,26 @@ const PantryApplicationForm: React.FC = () => {
           )}
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              Would you be able to accept frozen donations that require refrigeration or freezing?
-              <Field.RequiredIndicator color="red"/>
+              Would you be able to accept frozen donations that require
+              refrigeration or freezing?
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <RadioGroup.Root 
-              name="refrigeratedDonation"
-              variant="solid"
-            >
+            <RadioGroup.Root name="refrigeratedDonation" variant="solid">
               <Stack>
-                {['Yes, always', 'No', 'Sometimes (check in before sending)'].map((value) => (
+                {[
+                  'Yes, always',
+                  'No',
+                  'Sometimes (check in before sending)',
+                ].map((value) => (
                   <RadioGroup.Item key={value} value={value}>
-                    <RadioGroup.ItemHiddenInput required/>
-                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }} >
-                      <RadioGroup.ItemIndicator 
-                        border="1px solid" 
+                    <RadioGroup.ItemHiddenInput required />
+                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }}>
+                      <RadioGroup.ItemIndicator
+                        border="1px solid"
                         borderColor="neutral.100"
                       />
                     </RadioGroup.ItemControl>
-                    <RadioGroup.ItemText 
-                      color="neutral.700"
-                      textStyle="p2"
-                    >
+                    <RadioGroup.ItemText color="neutral.700" textStyle="p2">
                       {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
@@ -647,26 +723,20 @@ const PantryApplicationForm: React.FC = () => {
             <Field.Label {...fieldHeaderStyles}>
               Do you have a dedicated shelf or section of your pantry for
               allergy-friendly items?
-              <Field.RequiredIndicator color="red"/>
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <RadioGroup.Root 
-              name="dedicatedAllergyFriendly"
-              variant="solid"
-            >
+            <RadioGroup.Root name="dedicatedAllergyFriendly" variant="solid">
               <Stack>
                 {['Yes', 'No'].map((value) => (
                   <RadioGroup.Item key={value} value={value}>
-                    <RadioGroup.ItemHiddenInput required/>
-                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }} >
-                      <RadioGroup.ItemIndicator 
-                        border="1px solid" 
+                    <RadioGroup.ItemHiddenInput required />
+                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }}>
+                      <RadioGroup.ItemIndicator
+                        border="1px solid"
                         borderColor="neutral.100"
                       />
                     </RadioGroup.ItemControl>
-                    <RadioGroup.ItemText 
-                      color="neutral.700"
-                      textStyle="p2"
-                    >
+                    <RadioGroup.ItemText color="neutral.700" textStyle="p2">
                       {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
@@ -677,34 +747,33 @@ const PantryApplicationForm: React.FC = () => {
 
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              Are you willing to reserve our food shipments for allergen-avoidant
-              individuals?{' '}
-              <Field.RequiredIndicator color="red"/>
+              Are you willing to reserve our food shipments for
+              allergen-avoidant individuals?{' '}
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
             <Field.HelperText color="neutral.600" mb=".5em">
-              For example, grouping allergen-friendly items on a separate shelf or 
-              in separate bins and encouraging non-allergic clients to save these 
-              items for clients who do not have other safe food options.
+              For example, grouping allergen-friendly items on a separate shelf
+              or in separate bins and encouraging non-allergic clients to save
+              these items for clients who do not have other safe food options.
             </Field.HelperText>
-            <RadioGroup.Root 
+            <RadioGroup.Root
               name="reserveFoodForAllergic"
               variant="solid"
-              onValueChange={(e: {value: string}) => setReserveFoodForAllergic(e.value)}
+              onValueChange={(e: { value: string }) =>
+                setReserveFoodForAllergic(e.value)
+              }
             >
               <Stack>
                 {['Yes', 'Some', 'No'].map((value) => (
                   <RadioGroup.Item key={value} value={value}>
-                    <RadioGroup.ItemHiddenInput required/>
-                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }} >
-                      <RadioGroup.ItemIndicator 
-                        border="1px solid" 
+                    <RadioGroup.ItemHiddenInput required />
+                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }}>
+                      <RadioGroup.ItemIndicator
+                        border="1px solid"
                         borderColor="neutral.100"
                       />
                     </RadioGroup.ItemControl>
-                    <RadioGroup.ItemText 
-                      color="neutral.700"
-                      textStyle="p2"
-                    >
+                    <RadioGroup.ItemText color="neutral.700" textStyle="p2">
                       {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
@@ -716,10 +785,15 @@ const PantryApplicationForm: React.FC = () => {
           {reserveFoodForAllergic === 'Yes' && (
             <Field.Root mb="2em">
               <Field.Label {...fieldHeaderStyles}>
-                How would you work to ensure that allergen-friendly foods are distributed to 
-                clients with food allergies or other adverse reactions to foods?
+                How would you work to ensure that allergen-friendly foods are
+                distributed to clients with food allergies or other adverse
+                reactions to foods?
               </Field.Label>
-              <Textarea name="reservationExplanation" borderColor="neutral.100" autoresize />
+              <Textarea
+                name="reservationExplanation"
+                borderColor="neutral.100"
+                autoresize
+              />
             </Field.Root>
           )}
 
@@ -728,7 +802,11 @@ const PantryApplicationForm: React.FC = () => {
               <Field.Label {...fieldHeaderStyles}>
                 Please explain why you selected "Some."
               </Field.Label>
-              <Textarea name="reservationExplanation" borderColor="neutral.100" autoresize />
+              <Textarea
+                name="reservationExplanation"
+                borderColor="neutral.100"
+                autoresize
+              />
             </Field.Root>
           )}
 
@@ -736,7 +814,7 @@ const PantryApplicationForm: React.FC = () => {
             <Field.Label {...fieldHeaderStyles}>
               How often do allergen-avoidant clients visit your food pantry?
             </Field.Label>
-            <NativeSelect.Root >
+            <NativeSelect.Root>
               <NativeSelect.Field
                 placeholder="Select an option"
                 name="clientVisitFrequency"
@@ -763,7 +841,7 @@ const PantryApplicationForm: React.FC = () => {
               Are you confident in identifying the top 9 allergens in an
               ingredient list?
             </Field.Label>
-            <NativeSelect.Root >
+            <NativeSelect.Root>
               <NativeSelect.Field
                 placeholder="Select an option"
                 name="identifyAllergensConfidence"
@@ -792,18 +870,20 @@ const PantryApplicationForm: React.FC = () => {
               Do you serve allergen-avoidant or food-allergic children at your
               pantry?
             </Field.Label>
-            <NativeSelect.Root >
+            <NativeSelect.Root>
               <NativeSelect.Field
                 placeholder="Select an option"
                 name="serveAllergicChildren"
                 borderColor="neutral.100"
                 color="neutral.800"
               >
-                {['Yes, many (> 10)', 'Yes, a few (< 10)', 'No'].map((value) => (
-                  <option key={value} value={value}>
-                    {value}
-                  </option>
-                ))}
+                {['Yes, many (> 10)', 'Yes, a few (< 10)', 'No'].map(
+                  (value) => (
+                    <option key={value} value={value}>
+                      {value}
+                    </option>
+                  ),
+                )}
               </NativeSelect.Field>
               <NativeSelectIndicator />
             </NativeSelect.Root>
@@ -819,7 +899,12 @@ const PantryApplicationForm: React.FC = () => {
             </Field.Label>
 
             {activities.map((value) => (
-              <input type="hidden" name="activities" key={value} value={value} />
+              <input
+                type="hidden"
+                name="activities"
+                key={value}
+                value={value}
+              />
             ))}
 
             <Menu.Root closeOnSelect={false}>
@@ -829,7 +914,7 @@ const PantryApplicationForm: React.FC = () => {
                   pr={2}
                   w="full"
                   bgColor="white"
-                  color='neutral.800'
+                  color="neutral.800"
                   borderColor="neutral.100"
                   justifyContent="space-between"
                   textStyle="p2"
@@ -840,15 +925,15 @@ const PantryApplicationForm: React.FC = () => {
                     : 'Select activities'}
                   <ChevronDownIcon />
 
-                  <input 
+                  <input
                     type="text"
                     name="activities-required"
                     value={activities.length > 0 ? 'selected' : ''}
                     required
-                    style={{ 
+                    style={{
                       position: 'absolute',
                       opacity: 0,
-                      pointerEvents: 'none'
+                      pointerEvents: 'none',
                     }}
                   />
                 </Button>
@@ -901,7 +986,7 @@ const PantryApplicationForm: React.FC = () => {
             {activities.length > 0 && (
               <Flex wrap="wrap" mt={1} gap={2}>
                 {activities.map((value) => (
-                  <Tag.Root 
+                  <Tag.Root
                     key={value}
                     bg="teal.100"
                     p={2}
@@ -910,10 +995,10 @@ const PantryApplicationForm: React.FC = () => {
                   >
                     <Tag.Label>{value}</Tag.Label>
                     <Tag.EndElement ml={4}>
-                      <Tag.CloseTrigger 
+                      <Tag.CloseTrigger
                         onClick={() =>
                           setActivities((prev) =>
-                            prev.filter((item) => item !== value)
+                            prev.filter((item) => item !== value),
                           )
                         }
                         style={{ cursor: 'pointer' }}
@@ -928,17 +1013,18 @@ const PantryApplicationForm: React.FC = () => {
               following are additional ways to help us better support you!
               Please select all that apply.
             </Field.HelperText>
-          </Field.Root>       
+          </Field.Root>
           <Field.Root required={activities.includes('Something else')} mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              Please list any comments/concerns related to the previous question.
+              Please list any comments/concerns related to the previous
+              question.
               {activities.includes('Something else') && (
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               )}
             </Field.Label>
-            <Textarea 
-              name="activitiesComments" 
-              borderColor="neutral.100" 
+            <Textarea
+              name="activitiesComments"
+              borderColor="neutral.100"
               autoresize
             />
             <Field.HelperText color="neutral.600">
@@ -947,48 +1033,51 @@ const PantryApplicationForm: React.FC = () => {
           </Field.Root>
           <Field.Root required mb="2em">
             <Field.Label {...fieldHeaderStyles}>
-              What types of allergen-free items, if any, do you currently have in
-              stock?
-              <Field.RequiredIndicator color="red"/>
+              What types of allergen-free items, if any, do you currently have
+              in stock?
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <Textarea name="itemsInStock" borderColor="neutral.100" autoresize />
+            <Textarea
+              name="itemsInStock"
+              borderColor="neutral.100"
+              autoresize
+            />
             <Field.HelperText color="neutral.600">
-              For example, gluten-free breads, sunflower seed butters, nondairy beverages, etc.
+              For example, gluten-free breads, sunflower seed butters, nondairy
+              beverages, etc.
             </Field.HelperText>
           </Field.Root>
           <Field.Root required mb="4em">
             <Field.Label {...fieldHeaderStyles}>
               Do allergen-avoidant clients at your pantry ever request a greater
               variety of items or not have enough options? Please explain.
-              <Field.RequiredIndicator color="red"/>
+              <Field.RequiredIndicator color="red" />
             </Field.Label>
-            <Textarea name="needMoreOptions" borderColor="neutral.100" autoresize />
+            <Textarea
+              name="needMoreOptions"
+              borderColor="neutral.100"
+              autoresize
+            />
           </Field.Root>
 
-          <Separator size="sm" color="neutral.100" my="3em"/>
+          <Separator size="sm" color="neutral.100" my="3em" />
 
           <Field.Root mb="2em">
             <Field.Label {...fieldHeaderStyles}>
               Would you like to subscribe to our quarterly newsletter?
             </Field.Label>
-            <RadioGroup.Root 
-              name="newsletterSubscription"
-              variant="solid"
-            >
+            <RadioGroup.Root name="newsletterSubscription" variant="solid">
               <Stack>
                 {['Yes', 'No'].map((value) => (
                   <RadioGroup.Item key={value} value={value}>
                     <RadioGroup.ItemHiddenInput />
-                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }} >
-                      <RadioGroup.ItemIndicator 
-                        border="1px solid" 
+                    <RadioGroup.ItemControl _checked={{ bg: 'neutral.800' }}>
+                      <RadioGroup.ItemIndicator
+                        border="1px solid"
                         borderColor="neutral.100"
                       />
                     </RadioGroup.ItemControl>
-                    <RadioGroup.ItemText
-                      color="neutral.700"
-                      textStyle="p2"
-                    >
+                    <RadioGroup.ItemText color="neutral.700" textStyle="p2">
                       {value}
                     </RadioGroup.ItemText>
                   </RadioGroup.Item>
@@ -998,32 +1087,29 @@ const PantryApplicationForm: React.FC = () => {
           </Field.Root>
           <Field.Root required mb="4em">
             <Checkbox.Root>
-              <Checkbox.HiddenInput/>
-              <Checkbox.Control 
-                border="1px solid" 
-                borderColor="neutral.100" 
+              <Checkbox.HiddenInput />
+              <Checkbox.Control
+                border="1px solid"
+                borderColor="neutral.100"
                 _checked={{ bg: 'neutral.800' }}
               />
               <Checkbox.Label {...fieldHeaderStyles}>
                 By submitting this form, you agree to our Privacy Policy.{' '}
-                <Field.RequiredIndicator color="red"/>
+                <Field.RequiredIndicator color="red" />
               </Checkbox.Label>
             </Checkbox.Root>
           </Field.Root>
           <Box display="flex" gap={2} justifyContent="flex-end" mb={6}>
             <Button
-              border="1px solid" 
-              color="neutral.800" 
+              border="1px solid"
+              color="neutral.800"
               borderColor="neutral.200"
               fontWeight={600}
               bg="white"
             >
               Cancel
             </Button>
-            <Button 
-              type="submit" bg="blue.ssf" 
-              fontWeight={600} px={8}
-            >
+            <Button type="submit" bg="blue.ssf" fontWeight={600} px={8}>
               Submit Application
             </Button>
           </Box>
@@ -1061,7 +1147,7 @@ export const submitPantryApplicationForm: ActionFunction = async ({
     restrictions.push(restrictionsOther as string);
   }
   pantryApplicationData.set('restrictions', restrictions);
-  form.delete('restrictions')
+  form.delete('restrictions');
   form.delete('restrictionsOther');
 
   const selectedActivities = form.getAll('activities') as string[];
@@ -1071,31 +1157,59 @@ export const submitPantryApplicationForm: ActionFunction = async ({
   pantryApplicationData.set('activities', convertedActivities);
   form.delete('activities');
 
-  pantryApplicationData.set('newsletterSubscription', form.get("newsletterSubscription") === "Yes");
-  pantryApplicationData.set('acceptFoodDeliveries', form.get("acceptFoodDeliveries") === "Yes");
-  pantryApplicationData.set('dedicatedAllergyFriendly', form.get("dedicatedAllergyFriendly") === "Yes");
-  pantryApplicationData.set('hasEmailContact', form.get("hasEmailContact") === "Yes");
-  form.delete('newsletterSubscription')
-  form.delete('acceptFoodDeliveries')
-  form.delete('dedicatedAllergyFriendly')
-  form.delete('hasEmailContact')
+  pantryApplicationData.set(
+    'newsletterSubscription',
+    form.get('newsletterSubscription') === 'Yes',
+  );
+  pantryApplicationData.set(
+    'acceptFoodDeliveries',
+    form.get('acceptFoodDeliveries') === 'Yes',
+  );
+  pantryApplicationData.set(
+    'dedicatedAllergyFriendly',
+    form.get('dedicatedAllergyFriendly') === 'Yes',
+  );
+  pantryApplicationData.set(
+    'hasEmailContact',
+    form.get('hasEmailContact') === 'Yes',
+  );
+  form.delete('newsletterSubscription');
+  form.delete('acceptFoodDeliveries');
+  form.delete('dedicatedAllergyFriendly');
+  form.delete('hasEmailContact');
 
   // Handle mailing address
-  if (form.get("differentMailingAddress") === "No") {
-    pantryApplicationData.set('mailingAddressLine1', form.get('shipmentAddressLine1'));
-    pantryApplicationData.set('mailingAddressLine2', form.get('shipmentAddressLine2') || null);
-    pantryApplicationData.set('mailingAddressCity', form.get('shipmentAddressCity'));
-    pantryApplicationData.set('mailingAddressState', form.get('shipmentAddressState'));
-    pantryApplicationData.set('mailingAddressZip', form.get('shipmentAddressZip'));
-    pantryApplicationData.set('mailingAddressCountry', form.get('shipmentAddressCountry') || null);
+  if (form.get('differentMailingAddress') === 'No') {
+    pantryApplicationData.set(
+      'mailingAddressLine1',
+      form.get('shipmentAddressLine1'),
+    );
+    pantryApplicationData.set(
+      'mailingAddressLine2',
+      form.get('shipmentAddressLine2') || null,
+    );
+    pantryApplicationData.set(
+      'mailingAddressCity',
+      form.get('shipmentAddressCity'),
+    );
+    pantryApplicationData.set(
+      'mailingAddressState',
+      form.get('shipmentAddressState'),
+    );
+    pantryApplicationData.set(
+      'mailingAddressZip',
+      form.get('shipmentAddressZip'),
+    );
+    pantryApplicationData.set(
+      'mailingAddressCountry',
+      form.get('shipmentAddressCountry') || null,
+    );
   }
-  form.delete('differentMailingAddress')
+  form.delete('differentMailingAddress');
 
   // Replace the answer for allergenClients with the answer
   // for allergenClientsExact if it is given
-  const allergenClientsExact = form.get(
-    'allergenClientsExact',
-  );
+  const allergenClientsExact = form.get('allergenClientsExact');
   if ((allergenClientsExact ?? '') !== '') {
     pantryApplicationData.set('allergenClients', allergenClientsExact);
   }
@@ -1106,7 +1220,7 @@ export const submitPantryApplicationForm: ActionFunction = async ({
     if (value === '') {
       pantryApplicationData.set(key, null);
     } else {
-      pantryApplicationData.set(key, value)
+      pantryApplicationData.set(key, value);
     }
   });
 
@@ -1128,12 +1242,14 @@ export const submitPantryApplicationForm: ActionFunction = async ({
         );
       } else {
         alert('Form submission failed; please try again');
-        console.log(error)
+        console.log(error);
       }
     },
   );
 
-  return submissionSuccessful ? redirect('/pantry-application/submitted') : null;
+  return submissionSuccessful
+    ? redirect('/pantry-application/submitted')
+    : null;
 };
 
 export default PantryApplicationForm;
diff --git a/apps/frontend/src/components/forms/usPhoneInput.tsx b/apps/frontend/src/components/forms/usPhoneInput.tsx
index 7dd3dc16..dd172c16 100644
--- a/apps/frontend/src/components/forms/usPhoneInput.tsx
+++ b/apps/frontend/src/components/forms/usPhoneInput.tsx
@@ -46,8 +46,9 @@ export const USPhoneInput: React.FC<USPhoneInputProps> = ({
       // +1 country code is automatically added to data.phone, so after removing
       // all non-digits, a length of 0-1 means the field is empty
       // (the input does not allow non-digit characters)
-      const digits = data.phone.replace(/\D/g, '')
-      const isEmpty = !data.phone || data.phone.trim() === '' || digits.length <= 1;
+      const digits = data.phone.replace(/\D/g, '');
+      const isEmpty =
+        !data.phone || data.phone.trim() === '' || digits.length <= 1;
 
       onChange(isEmpty ? '' : data.phone);
 
diff --git a/apps/frontend/src/theme.ts b/apps/frontend/src/theme.ts
index b2df6c8d..874fae37 100644
--- a/apps/frontend/src/theme.ts
+++ b/apps/frontend/src/theme.ts
@@ -82,14 +82,14 @@ const customConfig = defineConfig({
           800: { value: '#414141' },
           900: { value: '#212529' },
         },
-        gray: { 
+        gray: {
           light: { value: '#515151' },
           dark: { value: '#111' },
         },
         teal: {
           400: { value: '#A9D5DB' },
           100: { value: '#E9F4F6' },
-        }
+        },
       },
       fonts: {
         instrument: { value: `'Instrument Serif', serif` },
@@ -105,7 +105,7 @@ const customConfig = defineConfig({
     'h1, h2, h3, h4, h5, h6': {
       fontFamily: 'heading',
     },
-    'body': {
+    body: {
       bg: '#FAFAFA',
     },
   },

From 54d4175fbaaac39e423e4d3df06dc985b9722951 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sat, 6 Dec 2025 13:57:03 -0500
Subject: [PATCH 17/29] Fixed color theme and remove x from the modals

---
 apps/frontend/src/components/forms/orderDetailsModal.tsx | 6 ------
 apps/frontend/src/containers/adminOrderManagement.tsx    | 5 +----
 apps/frontend/src/theme.ts                               | 3 ---
 3 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index 3ffa1d74..a76a85e2 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -111,12 +111,6 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
                           <Text fontSize="sm" fontWeight="400">
                             {type}
                           </Text>
-
-                          <Spacer />
-
-                          <Text cursor="pointer" fontWeight="400">
-                            x
-                          </Text>
                         </Box>
                       ))}
                     </Box>
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index e2e4cc17..9909c544 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -175,10 +175,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
   const [selectedPantries, setSelectedPantries] = useState<string[]>([]);
   const [sortAsc, setSortAsc] = useState(true);
 
-  const ASSIGNEE_COLORS = ['#F89E19', '#CC3538', '#2795A5', '#2B4E60'];
-  const ROW_HEIGHT = 5;
-  const MAX_ROWS = 5;
-  const MIN_SECTION_HEIGHT = MAX_ROWS * ROW_HEIGHT;
+  const ASSIGNEE_COLORS = ['yellow', 'red', 'cyan', 'blue.ssf'];
 
   const pantryOptions = [
     ...new Set(orders.map((o) => o.pantry.pantryName)),
diff --git a/apps/frontend/src/theme.ts b/apps/frontend/src/theme.ts
index 874fae37..56758e7e 100644
--- a/apps/frontend/src/theme.ts
+++ b/apps/frontend/src/theme.ts
@@ -69,9 +69,6 @@ const customConfig = defineConfig({
         red: { value: '#CC3538' },
         yellow: { value: '#F89E19' },
         cyan: { value: '#2795A5' },
-        teal: {
-          400: { value: '#A9D5DB' },
-        },
         neutral: {
           50: { value: '#FAFAFA' },
           100: { value: '#E7E7E7' },

From 4eff2eeb827589e00af54cb7c8bf4050806cca49 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sat, 6 Dec 2025 14:49:39 -0500
Subject: [PATCH 18/29] Final commit

---
 apps/frontend/src/containers/adminOrderManagement.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 9909c544..77a940a6 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -79,7 +79,7 @@ const AdminOrderManagement: React.FC = () => {
   };
 
   return (
-    <Box p={12}>
+    <Box p={12} bg="white">
       <Heading textStyle="h1" color="gray.600" mb={8}>
         Order Management
       </Heading>
@@ -94,7 +94,12 @@ const AdminOrderManagement: React.FC = () => {
         const totalPages = Math.ceil(allOrders.length / MAX_PER_STATUS);
 
         return (
-          <Box key={status} mb={12} position="relative" minHeight="380px">
+          <Box 
+            key={status}
+            mb={12}
+            position="relative"
+            minHeight={totalPages > 1 ? "380px" : "auto"}
+          >
             <OrderTableSection
               orders={allOrders.length > 0 ? displayedOrders : []}
               status={status}
@@ -109,7 +114,7 @@ const AdminOrderManagement: React.FC = () => {
                   count={allOrders.length}
                   pageSize={MAX_PER_STATUS}
                   page={currentPage}
-                  onPageChange={(e) => handlePageChange(status, e.page)}
+                  onPageChange={(e: { page: number }) => handlePageChange(status, e.page)}
                 >
                   <ButtonGroup
                     display="flex"

From b5941588c4b8abf303aa5a232bcb9c17b334e169 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sat, 6 Dec 2025 14:50:07 -0500
Subject: [PATCH 19/29] prettier

---
 apps/frontend/src/containers/adminOrderManagement.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 77a940a6..d379dd2c 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -94,11 +94,11 @@ const AdminOrderManagement: React.FC = () => {
         const totalPages = Math.ceil(allOrders.length / MAX_PER_STATUS);
 
         return (
-          <Box 
+          <Box
             key={status}
             mb={12}
             position="relative"
-            minHeight={totalPages > 1 ? "380px" : "auto"}
+            minHeight={totalPages > 1 ? '380px' : 'auto'}
           >
             <OrderTableSection
               orders={allOrders.length > 0 ? displayedOrders : []}
@@ -114,7 +114,9 @@ const AdminOrderManagement: React.FC = () => {
                   count={allOrders.length}
                   pageSize={MAX_PER_STATUS}
                   page={currentPage}
-                  onPageChange={(e: { page: number }) => handlePageChange(status, e.page)}
+                  onPageChange={(e: { page: number }) =>
+                    handlePageChange(status, e.page)
+                  }
                 >
                   <ButtonGroup
                     display="flex"

From ae13e1f2add881b0c67963940395606f26f7820b Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sat, 6 Dec 2025 16:30:12 -0500
Subject: [PATCH 20/29] Added search feature

---
 .../src/containers/adminOrderManagement.tsx   | 142 ++++++++++--------
 1 file changed, 83 insertions(+), 59 deletions(-)

diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index d379dd2c..ce4168d6 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -9,6 +9,9 @@ import {
   VStack,
   ButtonGroup,
   Checkbox,
+  InputGroup,
+  InputElement,
+  Input,
 } from '@chakra-ui/react';
 import {
   ArrowDownUp,
@@ -17,6 +20,7 @@ import {
   Funnel,
   Mail,
   CircleCheck,
+  Search,
 } from 'lucide-react';
 import { formatDate } from '@utils/utils';
 import ApiClient from '@api/apiClient';
@@ -180,6 +184,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
   const [isFilterOpen, setIsFilterOpen] = useState(false);
   const [isSortOpen, setIsSortOpen] = useState(false);
   const [selectedPantries, setSelectedPantries] = useState<string[]>([]);
+  const [searchPantry, setSearchPantry] = useState('');
   const [sortAsc, setSortAsc] = useState(true);
 
   const ASSIGNEE_COLORS = ['yellow', 'red', 'cyan', 'blue.ssf'];
@@ -297,41 +302,63 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
               </Button>
 
               {isFilterOpen && (
-                <>
-                  <Box
-                    position="fixed"
-                    top={0}
-                    left={0}
-                    right={0}
-                    bottom={0}
-                    onClick={() => setIsFilterOpen(false)}
-                    zIndex={10}
-                  />
-                  <Box
-                    position="absolute"
-                    top="100%"
-                    right={0}
-                    mt={2}
-                    bg="white"
-                    border="1px solid"
-                    borderColor="gray.200"
-                    borderRadius="md"
-                    boxShadow="lg"
-                    p={4}
-                    minW="275px"
-                    maxH="150px"
-                    overflowY="auto"
-                    zIndex={20}
-                  >
-                    <VStack
-                      align="stretch"
+              <>
+                <Box
+                  position="fixed"
+                  top={0}
+                  left={0}
+                  right={0}
+                  bottom={0}
+                  onClick={() => setIsFilterOpen(false)}
+                  zIndex={10}
+                />
+                <Box
+                  position="absolute"
+                  top="100%"
+                  right={0}
+                  mt={2}
+                  bg="white"
+                  border="1px solid"
+                  borderColor="gray.200"
+                  borderRadius="md"
+                  boxShadow="lg"
+                  p={4}
+                  minW="275px"
+                  maxH="200px"
+                  overflowY="auto"
+                  zIndex={20}
+                >
+                  <Box position="relative" mb={1} pl={0} ml={-2} mt={-2}>
+                    <Search
+                      size={16}
+                      color="#A3A3A3"
+                      style={{ position: "absolute", top: "50%", left: 8, transform: "translateY(-50%)" }}
+                    />
+                    <Input
+                      placeholder="Search"
+                      color={searchPantry ? "neutral.800" : "neutral.300"}
+                      value={searchPantry}
+                      onChange={(e) => setSearchPantry(e.target.value)}
                       fontSize="12px"
-                      fontFamily="Inter"
-                      color="neutral.800"
-                      fontWeight="500"
-                      gap={2}
-                    >
-                      {pantryOptions.map((pantry) => (
+                      pl="30px"
+                      border="none"
+                      bg="transparent"
+                      _focus={{ boxShadow: "none", border: "none", outline: "none" }}
+                    />
+                  </Box>
+                  <VStack
+                    align="stretch"
+                    fontSize="12px"
+                    fontFamily="Inter"
+                    color="neutral.800"
+                    fontWeight="500"
+                    gap={2}
+                  >
+                    {pantryOptions
+                      .filter((pantry) =>
+                        pantry.toLowerCase().includes(searchPantry.toLowerCase())
+                      )
+                      .map((pantry) => (
                         <Checkbox.Root
                           key={pantry}
                           checked={selectedPantries.includes(pantry)}
@@ -345,9 +372,9 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                           <Checkbox.Label>{pantry}</Checkbox.Label>
                         </Checkbox.Root>
                       ))}
-                    </VStack>
-                  </Box>
-                </>
+                  </VStack>
+                </Box>
+              </>
               )}
             </Box>
 
@@ -514,33 +541,30 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                   >
                     <Box
                       direction="row"
-                      gap={1}
                       display="flex"
                       alignItems="center"
+                      justifyContent="center"
                     >
                       {order.pantry.volunteers &&
                       order.pantry.volunteers.length > 0 ? (
-                        order.pantry.volunteers
-                          .slice(0, 5)
-                          .map((volunteer, index) => (
-                            <Box
-                              key={index}
-                              borderRadius="full"
-                              bg={
-                                ASSIGNEE_COLORS[index % ASSIGNEE_COLORS.length]
-                              }
-                              width="33px"
-                              height="33px"
-                              display="flex"
-                              alignItems="center"
-                              justifyContent="center"
-                              color="white"
-                              p={2}
-                            >
-                              {volunteer.firstName.charAt(0).toUpperCase()}
-                              {volunteer.lastName.charAt(0).toUpperCase()}
-                            </Box>
-                          ))
+                        <Box
+                          key={index}
+                          borderRadius="full"
+                          bg={
+                            ASSIGNEE_COLORS[index % ASSIGNEE_COLORS.length]
+                          }
+                          width="33px"
+                          height="33px"
+                          display="flex"
+                          alignItems="center"
+                          justifyContent="center"
+                          color="white"
+                          p={2}
+                        >
+                          {/* TODO: Change logic later to only get one volunteer */}
+                          {order.pantry.volunteers[0].firstName.charAt(0).toUpperCase()}
+                          {order.pantry.volunteers[0].lastName.charAt(0).toUpperCase()}
+                        </Box>
                       ) : (
                         <Box>No Assignees</Box>
                       )}

From 8ca82eccc8356242cd738cb75cf5d527f0a33eec Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sat, 6 Dec 2025 16:30:31 -0500
Subject: [PATCH 21/29] prettier

---
 .../src/containers/adminOrderManagement.tsx   | 165 ++++++++++--------
 1 file changed, 89 insertions(+), 76 deletions(-)

diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index ce4168d6..b8765646 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -302,79 +302,90 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
               </Button>
 
               {isFilterOpen && (
-              <>
-                <Box
-                  position="fixed"
-                  top={0}
-                  left={0}
-                  right={0}
-                  bottom={0}
-                  onClick={() => setIsFilterOpen(false)}
-                  zIndex={10}
-                />
-                <Box
-                  position="absolute"
-                  top="100%"
-                  right={0}
-                  mt={2}
-                  bg="white"
-                  border="1px solid"
-                  borderColor="gray.200"
-                  borderRadius="md"
-                  boxShadow="lg"
-                  p={4}
-                  minW="275px"
-                  maxH="200px"
-                  overflowY="auto"
-                  zIndex={20}
-                >
-                  <Box position="relative" mb={1} pl={0} ml={-2} mt={-2}>
-                    <Search
-                      size={16}
-                      color="#A3A3A3"
-                      style={{ position: "absolute", top: "50%", left: 8, transform: "translateY(-50%)" }}
-                    />
-                    <Input
-                      placeholder="Search"
-                      color={searchPantry ? "neutral.800" : "neutral.300"}
-                      value={searchPantry}
-                      onChange={(e) => setSearchPantry(e.target.value)}
+                <>
+                  <Box
+                    position="fixed"
+                    top={0}
+                    left={0}
+                    right={0}
+                    bottom={0}
+                    onClick={() => setIsFilterOpen(false)}
+                    zIndex={10}
+                  />
+                  <Box
+                    position="absolute"
+                    top="100%"
+                    right={0}
+                    mt={2}
+                    bg="white"
+                    border="1px solid"
+                    borderColor="gray.200"
+                    borderRadius="md"
+                    boxShadow="lg"
+                    p={4}
+                    minW="275px"
+                    maxH="200px"
+                    overflowY="auto"
+                    zIndex={20}
+                  >
+                    <Box position="relative" mb={1} pl={0} ml={-2} mt={-2}>
+                      <Search
+                        size={16}
+                        color="#A3A3A3"
+                        style={{
+                          position: 'absolute',
+                          top: '50%',
+                          left: 8,
+                          transform: 'translateY(-50%)',
+                        }}
+                      />
+                      <Input
+                        placeholder="Search"
+                        color={searchPantry ? 'neutral.800' : 'neutral.300'}
+                        value={searchPantry}
+                        onChange={(e) => setSearchPantry(e.target.value)}
+                        fontSize="12px"
+                        pl="30px"
+                        border="none"
+                        bg="transparent"
+                        _focus={{
+                          boxShadow: 'none',
+                          border: 'none',
+                          outline: 'none',
+                        }}
+                      />
+                    </Box>
+                    <VStack
+                      align="stretch"
                       fontSize="12px"
-                      pl="30px"
-                      border="none"
-                      bg="transparent"
-                      _focus={{ boxShadow: "none", border: "none", outline: "none" }}
-                    />
+                      fontFamily="Inter"
+                      color="neutral.800"
+                      fontWeight="500"
+                      gap={2}
+                    >
+                      {pantryOptions
+                        .filter((pantry) =>
+                          pantry
+                            .toLowerCase()
+                            .includes(searchPantry.toLowerCase()),
+                        )
+                        .map((pantry) => (
+                          <Checkbox.Root
+                            key={pantry}
+                            checked={selectedPantries.includes(pantry)}
+                            onCheckedChange={(e: { checked: boolean }) =>
+                              handleFilterChange(pantry, !!e.checked)
+                            }
+                            size="md"
+                          >
+                            <Checkbox.HiddenInput />
+                            <Checkbox.Control borderRadius="sm" />
+                            <Checkbox.Label>{pantry}</Checkbox.Label>
+                          </Checkbox.Root>
+                        ))}
+                    </VStack>
                   </Box>
-                  <VStack
-                    align="stretch"
-                    fontSize="12px"
-                    fontFamily="Inter"
-                    color="neutral.800"
-                    fontWeight="500"
-                    gap={2}
-                  >
-                    {pantryOptions
-                      .filter((pantry) =>
-                        pantry.toLowerCase().includes(searchPantry.toLowerCase())
-                      )
-                      .map((pantry) => (
-                        <Checkbox.Root
-                          key={pantry}
-                          checked={selectedPantries.includes(pantry)}
-                          onCheckedChange={(e: { checked: boolean }) =>
-                            handleFilterChange(pantry, !!e.checked)
-                          }
-                          size="md"
-                        >
-                          <Checkbox.HiddenInput />
-                          <Checkbox.Control borderRadius="sm" />
-                          <Checkbox.Label>{pantry}</Checkbox.Label>
-                        </Checkbox.Root>
-                      ))}
-                  </VStack>
-                </Box>
-              </>
+                </>
               )}
             </Box>
 
@@ -550,9 +561,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                         <Box
                           key={index}
                           borderRadius="full"
-                          bg={
-                            ASSIGNEE_COLORS[index % ASSIGNEE_COLORS.length]
-                          }
+                          bg={ASSIGNEE_COLORS[index % ASSIGNEE_COLORS.length]}
                           width="33px"
                           height="33px"
                           display="flex"
@@ -562,8 +571,12 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                           p={2}
                         >
                           {/* TODO: Change logic later to only get one volunteer */}
-                          {order.pantry.volunteers[0].firstName.charAt(0).toUpperCase()}
-                          {order.pantry.volunteers[0].lastName.charAt(0).toUpperCase()}
+                          {order.pantry.volunteers[0].firstName
+                            .charAt(0)
+                            .toUpperCase()}
+                          {order.pantry.volunteers[0].lastName
+                            .charAt(0)
+                            .toUpperCase()}
                         </Box>
                       ) : (
                         <Box>No Assignees</Box>

From 79917407dcaa9b93579fa654e16d0a6192d255c8 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sat, 6 Dec 2025 17:48:13 -0500
Subject: [PATCH 22/29] Added modal similar to request form modal

---
 .../components/forms/orderDetailsModal.tsx    | 177 ++++++++++--------
 1 file changed, 98 insertions(+), 79 deletions(-)

diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index a76a85e2..2e68a6b5 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import {
-  Box,
   Text,
-  VStack,
   Dialog,
-  Portal,
   CloseButton,
-  Spacer,
+  Flex,
+  Textarea,
+  Field,
+  Tag,
 } from '@chakra-ui/react';
 import ApiClient from '@api/apiClient';
 import { FoodRequest, Order } from 'types/types';
@@ -45,93 +45,112 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
   return (
     <Dialog.Root
       open={isOpen}
+      size="xl"
       onOpenChange={(e: { open: boolean }) => {
         if (!e.open) onClose();
       }}
+      closeOnInteractOutside
     >
-      <Portal>
-        <Dialog.Backdrop bg="blackAlpha.200" />
-        <Dialog.Positioner>
-          <Dialog.Content>
-            <Dialog.CloseTrigger asChild>
-              <CloseButton />
-            </Dialog.CloseTrigger>
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content maxW={650}>
+          <Dialog.Header pb={0} mt={2}>
+            <Dialog.Title fontSize="lg" fontWeight={700} fontFamily="inter">
+              Order {order.orderId}
+            </Dialog.Title>
+          </Dialog.Header>
+          <Dialog.Body>
+            {foodRequest && (
+              <>
+                <Text textStyle="p2" color="#111111">
+                  {order.pantry.pantryName}
+                </Text>
+                <Text mb={8} color="#52525B" textStyle="p2" pt={0} mt={0}>
+                  Requested {formatDate(foodRequest.requestedAt)}
+                </Text>
 
-            <Dialog.Header>
-              <VStack align="stretch" gap={0}>
-                <Dialog.Title
-                  fontSize="lg"
-                  mb={2}
-                  fontWeight="600"
-                  fontFamily="'Inter', sans-serif"
-                >
-                  Order {order.orderId}
-                </Dialog.Title>
-                {foodRequest && (
-                  <>
-                    <Text fontSize="sm" color="neutral.800">
-                      {order.pantry.pantryName}
-                    </Text>
-                    <Text fontSize="sm" color="neutral.800">
-                      Requested {formatDate(foodRequest.requestedAt)}
-                    </Text>
-                  </>
-                )}
-              </VStack>
-            </Dialog.Header>
-
-            <Dialog.Body>
-              {foodRequest && (
-                <VStack align="stretch" gap={6} my={2} color="neutral.800">
-                  <Box>
-                    <Text fontSize="md" fontWeight="600" mb={1}>
+                <Field.Root mb={4}>
+                  <Field.Label>
+                    <Text textStyle="p2" fontWeight={600} color="neutral.800">
                       Size of Shipment
                     </Text>
-                    <Text fontSize="sm" fontWeight="400">
-                      {foodRequest.requestedSize}
-                    </Text>
-                  </Box>
-                  <Box>
-                    <Text fontSize="md" fontWeight="600" mb={3}>
+                  </Field.Label>
+                  <Text 
+                    fontSize="sm"
+                    fontWeight="400"
+                    color="neutral.800" 
+                    border="1px solid" 
+                    borderColor="neutral.200" 
+                    borderRadius="4px"
+                    p={2} 
+                    mt={1}
+                    w="full"
+                  >
+                    {foodRequest.requestedSize}
+                  </Text>
+                </Field.Root>
+
+                <Field.Root mb={4}>
+                  <Field.Label>
+                    <Text textStyle="p2" fontWeight={600} color="neutral.800">
                       Food Type(s)
                     </Text>
-                    <Box display="flex" flexWrap="wrap" gap={2}>
-                      {foodRequest.requestedItems.map((type, index) => (
-                        <Box
-                          display="inline-flex"
-                          alignItems="center"
-                          bg="neutral.100"
-                          border="2px solid"
-                          borderColor="neutral.300"
-                          borderRadius="4px"
-                          p={2}
-                          key={index}
-                          gap={4}
-                        >
-                          <Text fontSize="sm" fontWeight="400">
-                            {type}
-                          </Text>
-                        </Box>
-                      ))}
-                    </Box>
-                  </Box>
-                  <Box>
-                    <Text fontSize="md" fontWeight="600" mb={1}>
+                  </Field.Label>
+                  <Flex wrap="wrap" mt={1} gap={2}>
+                    {foodRequest.requestedItems.map((item, index) => (
+                      <Tag.Root
+                        key={index}
+                        size="xl"
+                        variant="solid"
+                        bg="neutral.100"
+                        color="neutral.800"
+                        borderRadius="4px"
+                        borderColor="neutral.300"
+                        borderWidth="1px"
+                        fontFamily="Inter"
+                        fontWeight={500}
+                      >
+                        <Tag.Label>{item}</Tag.Label>
+                      </Tag.Root>
+                    ))}
+                  </Flex>
+                </Field.Root>
+
+                <Field.Root mb={4}>
+                  <Field.Label>
+                    <Text textStyle="p2" fontWeight={600} color="neutral.800">
                       Additional Information
                     </Text>
-                    <Text fontSize="sm" fontWeight="400">
-                      {foodRequest.additionalInformation ||
-                        'No details provided.'}
-                    </Text>
-                  </Box>
-                </VStack>
-              )}
-            </Dialog.Body>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
+                  </Field.Label>
+                  <Textarea
+                    pl={2.5}
+                    value={
+                      foodRequest.additionalInformation ||
+                      'No additional information supplied.'
+                    }
+                    readOnly
+                    size="lg"
+                    textStyle="p2"
+                    color="neutral.800"
+                    bg="white"
+                    borderColor="neutral.100"
+                    borderWidth="1px"
+                    borderRadius="4px"
+                    resize="none"
+                    disabled
+                  />
+                </Field.Root>
+              </>
+            )}
+          </Dialog.Body>
+
+          <Dialog.CloseTrigger asChild>
+            <CloseButton size="lg" />
+          </Dialog.CloseTrigger>
+        </Dialog.Content>
+      </Dialog.Positioner>
     </Dialog.Root>
   );
 };
 
-export default OrderDetailsModal;
+export default OrderDetailsModal;
\ No newline at end of file

From ecad35e741c4ff957a0171f7cba90bd04c92b92b Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sat, 6 Dec 2025 17:49:18 -0500
Subject: [PATCH 23/29] prettier

---
 .../src/components/forms/orderDetailsModal.tsx       | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index 2e68a6b5..974b11b5 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -75,14 +75,14 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
                       Size of Shipment
                     </Text>
                   </Field.Label>
-                  <Text 
+                  <Text
                     fontSize="sm"
                     fontWeight="400"
-                    color="neutral.800" 
-                    border="1px solid" 
-                    borderColor="neutral.200" 
+                    color="neutral.800"
+                    border="1px solid"
+                    borderColor="neutral.200"
                     borderRadius="4px"
-                    p={2} 
+                    p={2}
                     mt={1}
                     w="full"
                   >
@@ -153,4 +153,4 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
   );
 };
 
-export default OrderDetailsModal;
\ No newline at end of file
+export default OrderDetailsModal;

From 430c2932224065ac418cfd95edcfa51d8b2ff9cf Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sun, 7 Dec 2025 01:16:25 -0500
Subject: [PATCH 24/29] More comments resolved

---
 apps/frontend/src/components/forms/orderDetailsModal.tsx | 1 -
 apps/frontend/src/containers/adminOrderManagement.tsx    | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index 974b11b5..104fcd82 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -82,7 +82,6 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
                     border="1px solid"
                     borderColor="neutral.200"
                     borderRadius="4px"
-                    p={2}
                     mt={1}
                     w="full"
                   >
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index b8765646..4a5b20dc 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -331,7 +331,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                     <Box position="relative" mb={1} pl={0} ml={-2} mt={-2}>
                       <Search
                         size={16}
-                        color="#A3A3A3"
+                        color="#B8B8B8"
                         style={{
                           position: 'absolute',
                           top: '50%',
@@ -344,7 +344,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                         color={searchPantry ? 'neutral.800' : 'neutral.300'}
                         value={searchPantry}
                         onChange={(e) => setSearchPantry(e.target.value)}
-                        fontSize="12px"
+                        fontSize="sm"
                         pl="30px"
                         border="none"
                         bg="transparent"

From a5709518fa2bedfaa8e682ad61d9d4236787cd7c Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sun, 7 Dec 2025 01:16:45 -0500
Subject: [PATCH 25/29] prettier

---
 apps/frontend/src/containers/adminOrderManagement.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 4a5b20dc..1de1aba8 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -9,8 +9,6 @@ import {
   VStack,
   ButtonGroup,
   Checkbox,
-  InputGroup,
-  InputElement,
   Input,
 } from '@chakra-ui/react';
 import {

From 1cc1d48be6880f1d0ddbb97245a84a480ec5164e Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sun, 7 Dec 2025 10:22:29 -0500
Subject: [PATCH 26/29] Fixed modal styligs

---
 apps/frontend/src/components/forms/orderDetailsModal.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index 104fcd82..339be715 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -79,9 +79,6 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
                     fontSize="sm"
                     fontWeight="400"
                     color="neutral.800"
-                    border="1px solid"
-                    borderColor="neutral.200"
-                    borderRadius="4px"
                     mt={1}
                     w="full"
                   >
@@ -122,19 +119,17 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
                     </Text>
                   </Field.Label>
                   <Textarea
-                    pl={2.5}
                     value={
                       foodRequest.additionalInformation ||
                       'No additional information supplied.'
                     }
                     readOnly
+                    pl={-2}
                     size="lg"
                     textStyle="p2"
                     color="neutral.800"
                     bg="white"
-                    borderColor="neutral.100"
-                    borderWidth="1px"
-                    borderRadius="4px"
+                    border="none"
                     resize="none"
                     disabled
                   />

From eb144aeca1dc33b328ba127b36e88f229100887d Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Sun, 7 Dec 2025 17:28:47 -0500
Subject: [PATCH 27/29] Resolved comments

---
 .../src/containers/adminOrderManagement.tsx   | 21 +++++++++++++------
 apps/frontend/src/theme.ts                    |  2 +-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 1de1aba8..55f1465e 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -81,7 +81,7 @@ const AdminOrderManagement: React.FC = () => {
   };
 
   return (
-    <Box p={12} bg="white">
+    <Box p={12}>
       <Heading textStyle="h1" color="gray.600" mb={8}>
         Order Management
       </Heading>
@@ -130,8 +130,13 @@ const AdminOrderManagement: React.FC = () => {
                     <Pagination.PrevTrigger
                       color="neutral.800"
                       _hover={{ color: 'black' }}
+                      disabled={currentPage === 1}
                     >
-                      <ChevronLeft size={16} cursor="pointer" />
+                      <ChevronLeft
+                        size={16}
+                        style={{ cursor: currentPage !== 1 ? "pointer" : "default" }}
+                      />
+
                     </Pagination.PrevTrigger>
 
                     <Pagination.Items
@@ -150,8 +155,12 @@ const AdminOrderManagement: React.FC = () => {
                     <Pagination.NextTrigger
                       color="neutral.800"
                       _hover={{ color: 'black' }}
+                      disabled={currentPage === totalPages}
                     >
-                      <ChevronRight size={16} cursor="pointer" />
+                      <ChevronRight 
+                        size={16}
+                        style={{ cursor: currentPage !== totalPages ? "pointer" : "default" }}
+                       />
                     </Pagination.NextTrigger>
                   </ButtonGroup>
                 </Pagination.Root>
@@ -260,7 +269,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
           fontFamily="'Inter', sans-serif"
           fontSize="sm"
           color="neutral.600"
-          minHeight="300px"
+          py={10}
           gap={2}
         >
           <Box mb={2}>
@@ -269,7 +278,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
           <Box fontWeight="600" fontSize="lg" color="neutral.800">
             No Orders
           </Box>
-          <Box color="neutral.300">
+          <Box color="neutral.700" fontWeight="400">
             You have no {status.toLowerCase()} orders at this time.
           </Box>
         </Box>
@@ -328,7 +337,7 @@ const OrderTableSection: React.FC<OrderTableSectionProps> = ({
                   >
                     <Box position="relative" mb={1} pl={0} ml={-2} mt={-2}>
                       <Search
-                        size={16}
+                        size={18}
                         color="#B8B8B8"
                         style={{
                           position: 'absolute',
diff --git a/apps/frontend/src/theme.ts b/apps/frontend/src/theme.ts
index 56758e7e..56769285 100644
--- a/apps/frontend/src/theme.ts
+++ b/apps/frontend/src/theme.ts
@@ -103,7 +103,7 @@ const customConfig = defineConfig({
       fontFamily: 'heading',
     },
     body: {
-      bg: '#FAFAFA',
+      bg: '#FFF',
     },
   },
 });

From 577b6aaf5ca084c2aa2dd8b856a28bc4a43750e2 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Mon, 8 Dec 2025 18:21:56 -0500
Subject: [PATCH 28/29] prettier

---
 .../src/containers/adminOrderManagement.tsx        | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 55f1465e..60227901 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -134,9 +134,10 @@ const AdminOrderManagement: React.FC = () => {
                     >
                       <ChevronLeft
                         size={16}
-                        style={{ cursor: currentPage !== 1 ? "pointer" : "default" }}
+                        style={{
+                          cursor: currentPage !== 1 ? 'pointer' : 'default',
+                        }}
                       />
-
                     </Pagination.PrevTrigger>
 
                     <Pagination.Items
@@ -157,10 +158,13 @@ const AdminOrderManagement: React.FC = () => {
                       _hover={{ color: 'black' }}
                       disabled={currentPage === totalPages}
                     >
-                      <ChevronRight 
+                      <ChevronRight
                         size={16}
-                        style={{ cursor: currentPage !== totalPages ? "pointer" : "default" }}
-                       />
+                        style={{
+                          cursor:
+                            currentPage !== totalPages ? 'pointer' : 'default',
+                        }}
+                      />
                     </Pagination.NextTrigger>
                   </ButtonGroup>
                 </Pagination.Root>

From 8fc17d54b7a7a437bb0b89876682afb6df167152 Mon Sep 17 00:00:00 2001
From: Dalton Burkhart <daltonburkhart.75@gmail.com>
Date: Tue, 9 Dec 2025 19:31:00 -0500
Subject: [PATCH 29/29] prettier

---
 .../1764816885341-RemoveUnusedStatuses.ts     | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/apps/backend/src/migrations/1764816885341-RemoveUnusedStatuses.ts b/apps/backend/src/migrations/1764816885341-RemoveUnusedStatuses.ts
index 6419e233..4c35fd0f 100644
--- a/apps/backend/src/migrations/1764816885341-RemoveUnusedStatuses.ts
+++ b/apps/backend/src/migrations/1764816885341-RemoveUnusedStatuses.ts
@@ -1,25 +1,24 @@
-import { MigrationInterface, QueryRunner } from "typeorm";
+import { MigrationInterface, QueryRunner } from 'typeorm';
 
 export class RemoveUnusedStatuses1764816885341 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE allocations DROP COLUMN IF EXISTS status;`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE donation_items DROP COLUMN IF EXISTS status;`,
+    );
+  }
 
-    public async up(queryRunner: QueryRunner): Promise<void> {
-        await queryRunner.query(
-            `ALTER TABLE allocations DROP COLUMN IF EXISTS status;`
-        );
-        await queryRunner.query(
-            `ALTER TABLE donation_items DROP COLUMN IF EXISTS status;`
-        );
-    }
-
-    public async down(queryRunner: QueryRunner): Promise<void> {
-        await queryRunner.query(`
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
             ALTER TABLE allocations
             ADD COLUMN status VARCHAR(25) NOT NULL DEFAULT 'pending';
         `);
 
-        await queryRunner.query(`
+    await queryRunner.query(`
             ALTER TABLE donation_items
             ADD COLUMN status VARCHAR(25) NOT NULL DEFAULT 'available';
         `);
-    }
+  }
 }