SSF-205 FM Dashboard Frontend

apps/frontend/src/api/apiClient.ts

@@ -40,10 +40,10 @@ import {
   VolunteerAction,
   ApprovedPantryResponse,
   UpdatePantryVolunteersDto,
-  FoodRequestWithoutRelations,
   BulkUpdateTrackingCostDto,
   UpdateDonationItemDetailsDto,
   PendingApplication,
+  DonationReminderDto,
 } from 'types/types';
 
 const defaultBaseUrl =
@@ -434,6 +434,14 @@ export class ApiClient {
       .then((response) => response.data);
   }
 
+  public async getNextTwoDonationReminders(
+    foodManufacturerId: number,
+  ): Promise<DonationReminderDto[]> {
+    return this.axiosInstance
+      .get(`/api/manufacturers/${foodManufacturerId}/next-two-reminders`)
+      .then((response) => response.data);
+  }
+
   public async bulkUpdateTrackingCostInfo(
     data: BulkUpdateTrackingCostDto,
   ): Promise<void> {

apps/frontend/src/app.tsx

@@ -36,6 +36,7 @@ import AdminRequestManagement from '@containers/adminRequestManagement';
 import PantryDashboard from '@containers/pantryDashboard';
 import VolunteerDashboard from '@containers/volunteerDashboard';
 import AdminDashboard from '@containers/adminDashboard';
+import FoodManufacturerDashboard from '@containers/foodManufacturerDashboard';
 
 Amplify.configure(CognitoAuthConfig);
 
@@ -112,6 +113,14 @@ const router = createBrowserRouter([
           </ProtectedRoute>
         ),
       },
+      {
+        path: ROUTES.FM_DASHBOARD,
+        element: (
+          <ProtectedRoute>
+            <FoodManufacturerDashboard />
+          </ProtectedRoute>
+        ),
+      },
       {
         path: ROUTES.APPROVE_PANTRIES,
         element: (

apps/frontend/src/components/Navbar.tsx

@@ -272,9 +272,9 @@ const Navbar: React.FC = () => {
   // Should be changed once other dashboards are implmented
   const ROLE_DASHBOARD_ROUTE: Record<Role, string> = {
     [Role.ADMIN]: ROUTES.ADMIN_DASHBOARD,
+    [Role.FOODMANUFACTURER]: ROUTES.FM_DASHBOARD,
     [Role.VOLUNTEER]: ROUTES.VOLUNTEER_DASHBOARD,
     [Role.PANTRY]: ROUTES.PANTRY_DASHBOARD,
-    [Role.FOODMANUFACTURER]: ROUTES.HOME,
   };
 
   return (

apps/frontend/src/components/foodRequestManagement.tsx

@@ -21,7 +21,6 @@ import VolunteerRequestActionRequiredModal from '@components/forms/volunteerRequ
 import CreateNewOrderModal from '@components/forms/createNewOrderModal';
 import { useAlert } from '../hooks/alert';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { ROUTES } from '../routes';
 
 interface RequestManagementProps {
   fetchRequests: () => Promise<FoodRequestSummaryDto[]>;
@@ -80,10 +79,21 @@ const RequestManagement: React.FC<RequestManagementProps> = ({
 
     if (match) {
       setSelectedViewDetailsRequest(match);
+
+      // Paginate to the page that contains the deeplinked request
+      const sortedAtLoad = [...requests].sort((a, b) =>
+        b.requestedAt.localeCompare(a.requestedAt),
+      );
+      const idx = sortedAtLoad.findIndex(
+        (r) => r.requestId === initialRequestId,
+      );
+      if (idx >= 0) {
+        setCurrentPage(Math.floor(idx / itemsPerPage) + 1);
+      }
     } else {
-      navigate(ROUTES.REQUEST_FORM, { replace: true });
+      navigate(location.pathname, { replace: true });
     }
-  }, [initialRequestId, requests, navigate]);
+  }, [initialRequestId, requests, navigate, location]);
 
   const pantryOptions = [
     ...new Set(

apps/frontend/src/containers/adminDonation.tsx

@@ -60,12 +60,21 @@ const AdminDonation: React.FC = () => {
     if (!donationIdFromUrl) return;
     if (donations.length === 0) return;
 
+    const id = Number(donationIdFromUrl);
     const matchedDonation = donations.find(
-      (donation) => donation.donationId === Number(donationIdFromUrl),
+      (donation) => donation.donationId === id,
     );
 
     if (matchedDonation) {
       setSelectedDonation(matchedDonation);
+      // Paginate to the page that contains the deeplinked donation
+      const sortedAtLoad = [...donations].sort((a, b) =>
+        b.dateDonated.localeCompare(a.dateDonated),
+      );
+      const idx = sortedAtLoad.findIndex((d) => d.donationId === id);
+      if (idx >= 0) {
+        setCurrentPage(Math.floor(idx / itemsPerPage) + 1);
+      }
     } else {
       navigate(ROUTES.ADMIN_DONATION, { replace: true });
     }

apps/frontend/src/containers/adminOrderManagement.tsx

@@ -159,12 +159,25 @@ const AdminOrderManagement: React.FC = () => {
     const allOrders = Object.values(statusOrders).flat();
     if (allOrders.length === 0) return;
 
-    const matchedOrder = allOrders.find(
-      (order) => order.orderId === Number(orderIdFromUrl),
-    );
+    const id = Number(orderIdFromUrl);
+    const matchedOrder = allOrders.find((order) => order.orderId === id);
 
     if (matchedOrder) {
-      setSelectedOrderId(Number(orderIdFromUrl));
+      setSelectedOrderId(id);
+      // Paginate the containing status to the page that holds this order.
+      for (const status of Object.values(OrderStatus)) {
+        const sorted = [...statusOrders[status]].sort((a, b) =>
+          b.createdAt.localeCompare(a.createdAt),
+        );
+        const idx = sorted.findIndex((o) => o.orderId === id);
+        if (idx >= 0) {
+          setCurrentPages((prev) => ({
+            ...prev,
+            [status]: Math.floor(idx / MAX_PER_STATUS) + 1,
+          }));
+          break;
+        }
+      }
     } else {
       navigate(ROUTES.ADMIN_ORDER_MANAGEMENT, { replace: true });
     }

apps/frontend/src/containers/approveFoodManufacturers.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { ROUTES } from '../routes';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import {
   Table,
   Button,
@@ -24,8 +23,10 @@ import {
 } from 'lucide-react';
 import { useAlert } from '../hooks/alert';
 import { FloatingAlert } from '@components/floatingAlert';
+import { ROUTES } from '../routes';
 
 const ApproveFoodManufacturers: React.FC = () => {
+  const navigate = useNavigate();
   const [foodManufacturers, setFoodManufacturers] = useState<
     FoodManufacturer[]
   >([]);
@@ -117,9 +118,9 @@ const ApproveFoodManufacturers: React.FC = () => {
           : `${name} - Application Rejected`;
 
       setSuccessMessage(message);
-      setSearchParams({});
+      navigate(ROUTES.APPROVE_FOOD_MANUFACTURERS, { replace: true });
     }
-  }, [searchParams, setSearchParams, setErrorMessage, setSuccessMessage]);
+  }, [searchParams, setErrorMessage, setSuccessMessage, navigate]);
 
   return (
     <Box p={12}>

apps/frontend/src/containers/approvePantries.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { ROUTES } from '../routes';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import {
   Table,
   Button,
@@ -24,8 +23,10 @@ import {
 } from 'lucide-react';
 import { useAlert } from '../hooks/alert';
 import { FloatingAlert } from '@components/floatingAlert';
+import { ROUTES } from '../routes';
 
 const ApprovePantries: React.FC = () => {
+  const navigate = useNavigate();
   const [pantries, setPantries] = useState<Pantry[]>([]);
   const [sortAsc, setSortAsc] = useState(false);
   const [selectedPantries, setSelectedPantries] = useState<string[]>([]);
@@ -108,9 +109,9 @@ const ApprovePantries: React.FC = () => {
           : `${name} - Application Rejected`;
 
       setSuccessMessage(message);
-      setSearchParams({});
+      navigate(ROUTES.APPROVE_PANTRIES, { replace: true });
     }
-  }, [searchParams, setSearchParams, setErrorMessage, setSuccessMessage]);
+  }, [searchParams, navigate, setErrorMessage, setSuccessMessage]);
 
   return (
     <Box p={12}>

apps/frontend/src/containers/foodManufacturerDashboard.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Heading, Text } from '@chakra-ui/react';
+import DashboardCard, { DashboardCardType } from '@components/dashboardCard';
+import {
+  Donation,
+  DonationDetails,
+  DonationReminderDto,
+  FoodManufacturer,
+} from '../types/types';
+import ApiClient from '@api/apiClient';
+import { useAlert } from '../hooks/alert';
+import { FloatingAlert } from '@components/floatingAlert';
+import { useNavigate } from 'react-router-dom';
+import { ROUTES } from '../routes';
+
+const FoodManufacturerDashboard: React.FC = () => {
+  const navigate = useNavigate();
+
+  const [errorAlertState, setErrorMessage] = useAlert();
+  const [foodManufacturer, setFoodManufacturer] =
+    useState<FoodManufacturer | null>(null);
+  const [upcomingReminders, setUpcomingReminders] = useState<
+    DonationReminderDto[]
+  >([]);
+  const [recentDonations, setRecentDonations] = useState<Donation[]>([]);
+
+  useEffect(() => {
+    const fetchFmData = async () => {
+      let fmId: number;
+      try {
+        fmId = await ApiClient.getCurrentUserFoodManufacturerId();
+        const fm = await ApiClient.getFoodManufacturer(fmId);
+        setFoodManufacturer(fm);
+      } catch {
+        setErrorMessage('Error fetching your manufacturer profile.');
+        return;
+      }
+
+      const [reminders, donations] = await Promise.allSettled([
+        ApiClient.getNextTwoDonationReminders(fmId),
+        ApiClient.getAllDonationsByFoodManufacturer(fmId),
+      ]);
+
+      // If reminders is successfully retrieved from API with the Promise.allSettled
+      if (reminders.status === 'fulfilled') {
+        setUpcomingReminders(reminders.value);
+      } else {
+        setErrorMessage('Error fetching upcoming donations.');
+      }
+
+      // If donations is successfully retrieved from API with the Promise.allSettled
+      if (donations.status === 'fulfilled') {
+        const sorted = donations.value
+          .map((d: DonationDetails) => d.donation)
+          .sort(
+            (a: Donation, b: Donation) =>
+              new Date(b.dateDonated).getTime() -
+              new Date(a.dateDonated).getTime(),
+          )
+          .slice(0, 2);
+        setRecentDonations(sorted);
+      } else {
+        setErrorMessage('Error fetching recent donations.');
+      }
+    };
+    fetchFmData();
+  }, [setErrorMessage]);
+
+  return (
+    <Box p={12}>
+      {errorAlertState && (
+        <FloatingAlert
+          key={errorAlertState.id}
+          message={errorAlertState.message}
+          status="error"
+          timeout={6000}
+        />
+      )}
+      <Heading textStyle="h1" color="gray.600" mb={6}>
+        Welcome, {foodManufacturer?.foodManufacturerName}
+      </Heading>
+
+      <Text textStyle="p" color="gray.light" fontWeight={600} mb={4}>
+        Upcoming Donations
+      </Text>
+      <Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gap={4} mb={16}>
+        {upcomingReminders.map((reminder) => (
+          <DashboardCard
+            key={`${reminder.donation.donationId}-${reminder.reminderDate}`}
+            type={DashboardCardType.UPCOMING_DONATION}
+            title={`Donation #${reminder.donation.donationId}`}
+            date={reminder.reminderDate}
+            subtitle={reminder.donation.foodManufacturer?.foodManufacturerName}
+            linkText="View Donation Requirements"
+            onLinkClick={() =>
+              navigate(
+                `${ROUTES.FM_DONATION_MANAGEMENT}?donationId=${reminder.donation.donationId}`,
+              )
+            }
+          />
+        ))}
+      </Box>
+
+      <Text textStyle="p" color="gray.light" fontWeight={600} mb={4}>
+        Recent Donations
+      </Text>
+      <Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gap={4} mb={16}>
+        {recentDonations.map((donation) => (
+          <DashboardCard
+            key={donation.donationId}
+            type={DashboardCardType.RECENT_DONATION}
+            title={`Donation #${donation.donationId}`}
+            date={donation.dateDonated}
+            subtitle={donation.foodManufacturer?.foodManufacturerName}
+            linkText="View Donation Details"
+            onLinkClick={() =>
+              navigate(
+                `${ROUTES.FM_DONATION_MANAGEMENT}?donationId=${donation.donationId}`,
+              )
+            }
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default FoodManufacturerDashboard;