[SSF-202] Dashboard Stats

apps/frontend/src/api/apiClient.ts

@@ -90,6 +90,12 @@ export class ApiClient {
     );
   }
 
+  public async getUserStats(userId: number) {
+    return this.axiosInstance
+      .get(`/api/users/${userId}/stats`)
+      .then((response) => response.data);
+  }
+
   public async postDonation(body: CreateDonationDto): Promise<Donation> {
     return this.axiosInstance
       .post('/api/donations/', body)

apps/frontend/src/components/dashboardStats.tsx

@@ -9,7 +9,7 @@ export function DashboardStats({ stats }: DashboardStatsProps) {
   const colors = ['blue.core', 'red', 'yellow.hover', 'teal.ssf'];
 
   return (
-    <SimpleGrid columns={Object.keys(stats).length} gap={6} mx={8} my={4}>
+    <SimpleGrid columns={Object.keys(stats).length} gap={4} mb={16}>
       {Object.entries(stats).map(([key, value], index) => {
         const color = colors[index % colors.length];
 

apps/frontend/src/components/pageEmptyState.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Box, Button, Text } from '@chakra-ui/react';
+import { CircleCheck } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+interface PageEmptyStateProps {
+  entity?: string;
+  subtitle?: string;
+  primaryButtonText: string;
+  primaryButtonLink: string;
+  secondaryButtonText: string;
+  secondaryButtonLink: string;
+}
+
+const PageEmptyState: React.FC<PageEmptyStateProps> = ({
+  entity,
+  subtitle,
+  primaryButtonText,
+  primaryButtonLink,
+  secondaryButtonText,
+  secondaryButtonLink,
+}) => {
+  const navigate = useNavigate();
+  const message = subtitle ?? `You have no ${entity} at this time`;
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      textAlign="center"
+      py={10}
+      gap={2}
+    >
+      <Box mb={2}>
+        <CircleCheck size={24} color="var(--chakra-colors-neutral-800)" />
+      </Box>
+      <Text fontWeight="600" textStyle="p" color="neutral.800">
+        Nothing to see here!
+      </Text>
+      <Text textStyle="p2" color="neutral.700" fontWeight="400">
+        {message}
+      </Text>
+      <Box display="flex" gap={3} mt={4}>
+        <Button
+          size="sm"
+          bg="neutral.700"
+          color="white"
+          _hover={{ bg: 'neutral.800' }}
+          onClick={() => navigate(primaryButtonLink)}
+        >
+          {primaryButtonText}
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          borderColor="neutral.200"
+          color="neutral.700"
+          _hover={{ bg: 'neutral.50' }}
+          onClick={() => navigate(secondaryButtonLink)}
+        >
+          {secondaryButtonText}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default PageEmptyState;

apps/frontend/src/components/sectionEmptyState.tsx

@@ -0,0 +1,30 @@
+import { Box, Text } from '@chakra-ui/react';
+
+interface EmptyStateProps {
+  entity?: string;
+  subtitle?: string;
+}
+
+const SectionEmptyState: React.FC<EmptyStateProps> = ({ entity, subtitle }) => {
+  const message = subtitle ?? `You have no ${entity} at this time`;
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      textAlign="center"
+      py={10}
+      gap={2}
+    >
+      <Text fontWeight="600" textStyle="p" color="neutral.800">
+        Nothing to see here!
+      </Text>
+      <Text textStyle="p2" color="neutral.700" fontWeight="400">
+        {message}
+      </Text>
+    </Box>
+  );
+};
+
+export default SectionEmptyState;

apps/frontend/src/containers/adminDashboard.tsx

@@ -17,6 +17,9 @@ import { useAlert } from '../hooks/alert';
 import { FloatingAlert } from '@components/floatingAlert';
 import { useNavigate } from 'react-router-dom';
 import { ROUTES } from '../routes';
+import SectionEmptyState from '@components/sectionEmptyState';
+import PageEmptyState from '@components/pageEmptyState';
+import { DashboardStats } from '@components/dashboardStats';
 
 const AdminDashboard: React.FC = () => {
   const navigate = useNavigate();
@@ -28,6 +31,7 @@ const AdminDashboard: React.FC = () => {
   const [recentOrders, setRecentOrders] = useState<OrderSummary[]>([]);
   const [recentDonations, setRecentDonations] = useState<Donation[]>([]);
   const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const [stats, setStats] = useState<Record<string, string> | null>(null);
 
   const fetchPendingApplications = async () => {
     try {
@@ -79,6 +83,13 @@ const AdminDashboard: React.FC = () => {
       );
       return;
     }
+
+    try {
+      const userStats = await ApiClient.getUserStats(user.id);
+      setStats(userStats);
+    } catch {
+      setAlertMessage('Error fetching dashboard statistics', AlertStatus.ERROR);
+    }
   };
 
   useEffect(() => {
@@ -88,6 +99,11 @@ const AdminDashboard: React.FC = () => {
     fetchPendingApplications();
   }, [setAlertMessage]);
 
+  const isPageEmpty =
+    pendingApplications.length === 0 &&
+    recentOrders.length === 0 &&
+    recentDonations.length === 0;
+
   return (
     <Box p={12}>
       {alertState && (
@@ -102,84 +118,135 @@ const AdminDashboard: React.FC = () => {
         Welcome, {currentUser?.firstName} {currentUser?.lastName}
       </Heading>
 
-      <Text textStyle="p" color="gray.light" fontWeight={600} mb={4}>
-        Pending Actions
-      </Text>
-      <Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gap={4} mb={16}>
-        {pendingApplications.map((application) => (
-          <DashboardCard
-            type={DashboardCardType.ACTION}
-            title={application.name}
-            date={application.dateApplied}
-            key={application.id}
-            linkText="View Application Details"
-            badge={{
-              label:
-                application.type === 'pantry' ? 'Pantry' : 'Food Manufacturer',
-              bg: 'neutral.100',
-              color: 'neutral.600',
-            }}
-            onLinkClick={() => {
-              navigate(
-                application.type === 'pantry'
-                  ? ROUTES.PANTRY_MANAGEMENT_DETAILS.replace(
-                      ':pantryId',
-                      application.id.toString(),
-                    )
-                  : ROUTES.FOOD_MANUFACTURER_APPLICATION_DETAILS.replace(
-                      ':applicationId',
-                      application.id.toString(),
-                    ),
-              );
-            }}
-          />
-        ))}
-      </Box>
+      {stats && <DashboardStats stats={stats} />}
+
+      {isPageEmpty ? (
+        <PageEmptyState
+          subtitle="You have no orders or applications to review at this time."
+          primaryButtonText="View Pantries"
+          primaryButtonLink={ROUTES.PANTRY_MANAGEMENT}
+          secondaryButtonText="View Donations"
+          secondaryButtonLink={ROUTES.ADMIN_DONATION}
+        />
+      ) : (
+        <>
+          <Text textStyle="p" color="gray.light" fontWeight={600} mb={4}>
+            Pending Actions
+          </Text>
+          {pendingApplications.length === 0 ? (
+            <Box mb={16}>
+              <SectionEmptyState subtitle="You have no pending applications at this time" />
+            </Box>
+          ) : (
+            <Box
+              display="grid"
+              gridTemplateColumns="repeat(2, 1fr)"
+              gap={4}
+              mb={16}
+            >
+              {pendingApplications.map((application) => (
+                <DashboardCard
+                  type={DashboardCardType.ACTION}
+                  title={application.name}
+                  date={application.dateApplied}
+                  key={application.id}
+                  linkText="View Application Details"
+                  badge={{
+                    label:
+                      application.type === 'pantry'
+                        ? 'Pantry'
+                        : 'Food Manufacturer',
+                    bg: 'neutral.100',
+                    color: 'neutral.600',
+                  }}
+                  onLinkClick={() => {
+                    navigate(
+                      application.type === 'pantry'
+                        ? ROUTES.PANTRY_MANAGEMENT_DETAILS.replace(
+                            ':pantryId',
+                            application.id.toString(),
+                          )
+                        : ROUTES.FOOD_MANUFACTURER_APPLICATION_DETAILS.replace(
+                            ':applicationId',
+                            application.id.toString(),
+                          ),
+                    );
+                  }}
+                />
+              ))}
+            </Box>
+          )}
 
-      <Text textStyle="p" color="gray.light" fontWeight={600} mb={4}>
-        Recent Orders
-      </Text>
-      <Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gap={4} mb={16}>
-        {recentOrders.map((order) => (
-          <DashboardCard
-            key={order.orderId}
-            type={DashboardCardType.ORDER}
-            title={`Order #${order.orderId}`}
-            date={order.createdAt}
-            subtitle={order.request.pantry.pantryName}
-            linkText="View Order Details"
-            badge={ORDER_STATUS_BADGE[order.status]}
-            assignee={{
-              id: order.assignee.id,
-              firstName: order.assignee.firstName,
-              lastName: order.assignee.lastName,
-            }}
-            onLinkClick={() =>
-              navigate(`/admin-order-management?orderId=${order.orderId}`)
-            }
-          />
-        ))}
-      </Box>
+          <Text textStyle="p" color="gray.light" fontWeight={600} mb={4}>
+            Recent Orders
+          </Text>
+          {recentOrders.length === 0 ? (
+            <Box mb={16}>
+              <SectionEmptyState subtitle="You have no recent orders at this time" />
+            </Box>
+          ) : (
+            <Box
+              display="grid"
+              gridTemplateColumns="repeat(2, 1fr)"
+              gap={4}
+              mb={16}
+            >
+              {recentOrders.map((order) => (
+                <DashboardCard
+                  key={order.orderId}
+                  type={DashboardCardType.ORDER}
+                  title={`Order #${order.orderId}`}
+                  date={order.createdAt}
+                  subtitle={order.request.pantry.pantryName}
+                  linkText="View Order Details"
+                  badge={ORDER_STATUS_BADGE[order.status]}
+                  assignee={{
+                    id: order.assignee.id,
+                    firstName: order.assignee.firstName,
+                    lastName: order.assignee.lastName,
+                  }}
+                  onLinkClick={() =>
+                    navigate(`/admin-order-management?orderId=${order.orderId}`)
+                  }
+                />
+              ))}
+            </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"
-            badge={DONATION_STATUS_BADGE[donation.status]}
-            onLinkClick={() =>
-              navigate(`/admin-donation?donationId=${donation.donationId}`)
-            }
-          />
-        ))}
-      </Box>
+          <Text textStyle="p" color="gray.light" fontWeight={600} mb={4}>
+            Recent Donations
+          </Text>
+          {recentDonations.length === 0 ? (
+            <Box mb={16}>
+              <SectionEmptyState subtitle="You have no recent donations at this time" />
+            </Box>
+          ) : (
+            <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"
+                  badge={DONATION_STATUS_BADGE[donation.status]}
+                  onLinkClick={() =>
+                    navigate(
+                      `/admin-donation?donationId=${donation.donationId}`,
+                    )
+                  }
+                />
+              ))}
+            </Box>
+          )}
+        </>
+      )}
     </Box>
   );
 };