Ddb/ssf 8 admin order management frontend

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';
         `);
-    }
+  }
 }

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

@@ -24,8 +24,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,
@@ -47,21 +48,21 @@ export class OrdersController {
     return this.ordersService.getPastOrders();
   }
 
-  @Get(':orderId/pantry')
+  @Get('/:orderId/pantry')
   async getPantryFromOrder(
     @Param('orderId', ParseIntPipe) orderId: number,
   ): Promise<Pantry> {
     return this.ordersService.findOrderPantry(orderId);
   }
 
-  @Get(':orderId/request')
+  @Get('/:orderId/request')
   async getRequestFromOrder(
     @Param('orderId', ParseIntPipe) orderId: number,
   ): Promise<FoodRequest> {
     return this.ordersService.findOrderFoodRequest(orderId);
   }
 
-  @Get(':orderId/manufacturer')
+  @Get('/:orderId/manufacturer')
   async getManufacturerFromOrder(
     @Param('orderId', ParseIntPipe) orderId: number,
   ): Promise<FoodManufacturer> {
@@ -82,7 +83,7 @@ export class OrdersController {
     return this.ordersService.findOrderByRequest(requestId);
   }
 
-  @Get(':orderId/allocations')
+  @Get('/:orderId/allocations')
   async getAllAllocationsByOrder(
     @Param('orderId', ParseIntPipe) orderId: number,
   ) {

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

@@ -16,13 +16,17 @@ export class OrdersService {
     const qb = this.repo
       .createQueryBuilder('order')
       .leftJoinAndSelect('order.pantry', 'pantry')
+      .leftJoinAndSelect('pantry.volunteers', 'volunteers')
       .select([
         'order.orderId',
         'order.status',
         'order.createdAt',
         'order.shippedAt',
         'order.deliveredAt',
         'pantry.pantryName',
+        'volunteers.id',
+        'volunteers.firstName',
+        'volunteers.lastName',
       ]);
 
     if (filters?.status) {

apps/backend/src/pantries/dtos/pantry-application.dto.ts

@@ -52,7 +52,7 @@ export class PantryApplicationDto {
   @IsNotEmpty()
   @MaxLength(255)
   emailContactOther?: string;
-  
+
   @IsOptional()
   @IsString()
   @IsNotEmpty()

apps/frontend/src/app.tsx

@@ -23,6 +23,7 @@ import DonationManagement from '@containers/donationManagement';
 import AdminDonation from '@containers/adminDonation';
 import { pantryIdLoader } from '@loaders/pantryIdLoader';
 import Homepage from '@containers/homepage';
+import AdminOrderManagement from '@containers/adminOrderManagement';
 
 const router = createBrowserRouter([
   {
@@ -97,6 +98,10 @@ const router = createBrowserRouter([
         path: '/admin-donation',
         element: <AdminDonation />,
       },
+      {
+        path: '/admin-order-management',
+        element: <AdminOrderManagement />,
+      },
       {
         path: '/volunteer-management',
         element: <VolunteerManagement />,

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

@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Text,
+  Dialog,
+  CloseButton,
+  Flex,
+  Textarea,
+  Field,
+  Tag,
+} from '@chakra-ui/react';
+import ApiClient from '@api/apiClient';
+import { FoodRequest, Order } from 'types/types';
+import { formatDate } from '@utils/utils';
+
+interface OrderDetailsModalProps {
+  order: Order;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
+  order,
+  isOpen,
+  onClose,
+}) => {
+  const [foodRequest, setFoodRequest] = useState<FoodRequest | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      const fetchData = async () => {
+        try {
+          const foodRequestData = await ApiClient.getFoodRequestFromOrder(
+            order.orderId,
+          );
+          setFoodRequest(foodRequestData);
+        } catch (error) {
+          console.error('Error fetching food request details:', error);
+        }
+      };
+
+      fetchData();
+    }
+  }, [isOpen, order.orderId]);
+
+  return (
+    <Dialog.Root
+      open={isOpen}
+      size="xl"
+      onOpenChange={(e: { open: boolean }) => {
+        if (!e.open) onClose();
+      }}
+      closeOnInteractOutside
+    >
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content maxW={650}>
+          <Dialog.Header pb={0} mt={2}>
+            <Dialog.Title fontSize="lg" fontWeight={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>
+
+                <Field.Root mb={4}>
+                  <Field.Label>
+                    <Text textStyle="p2" fontWeight={600} color="neutral.800">
+                      Size of Shipment
+                    </Text>
+                  </Field.Label>
+                  <Text
+                    fontSize="sm"
+                    fontWeight="400"
+                    color="neutral.800"
+                    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>
+                  </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>
+                  </Field.Label>
+                  <Textarea
+                    value={
+                      foodRequest.additionalInformation ||
+                      'No additional information supplied.'
+                    }
+                    readOnly
+                    pl={-2}
+                    size="lg"
+                    textStyle="p2"
+                    color="neutral.800"
+                    bg="white"
+                    border="none"
+                    resize="none"
+                    disabled
+                  />
+                </Field.Root>
+              </>
+            )}
+          </Dialog.Body>
+
+          <Dialog.CloseTrigger asChild>
+            <CloseButton size="lg" />
+          </Dialog.CloseTrigger>
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Dialog.Root>
+  );
+};
+
+export default OrderDetailsModal;