From 6e4562998395ea41edad7f8891f26f905765a35d Mon Sep 17 00:00:00 2001
From: jxuistrying <jxuistrying@gmail.com>
Date: Sun, 24 May 2026 02:02:14 -0400
Subject: [PATCH 1/2] Add empty state components for dashboard

---
 .../src/components/PageEmptyState.tsx         |  67 ++++++
 .../src/components/SectionEmptyState.tsx      |  35 +++
 .../src/containers/adminDashboard.tsx         | 208 +++++++++++-------
 .../src/containers/pantryDashboard.tsx        | 144 ++++++++----
 .../src/containers/volunteerDashboard.tsx     | 131 +++++++----
 5 files changed, 418 insertions(+), 167 deletions(-)
 create mode 100644 apps/frontend/src/components/PageEmptyState.tsx
 create mode 100644 apps/frontend/src/components/SectionEmptyState.tsx

diff --git a/apps/frontend/src/components/PageEmptyState.tsx b/apps/frontend/src/components/PageEmptyState.tsx
new file mode 100644
index 000000000..ade46fca6
--- /dev/null
+++ b/apps/frontend/src/components/PageEmptyState.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Box, Button } from '@chakra-ui/react';
+import { CircleCheck } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+interface PageEmptyStateProps {
+  subtitle: string;
+  primaryButtonText: string;
+  primaryButtonLink: string;
+  secondaryButtonText: string;
+  secondaryButtonLink: string;
+}
+
+const PageEmptyState: React.FC<PageEmptyStateProps> = ({
+  subtitle,
+  primaryButtonText,
+  primaryButtonLink,
+  secondaryButtonText,
+  secondaryButtonLink,
+}) => {
+  const navigate = useNavigate();
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      textAlign="center"
+      fontFamily="'Inter', sans-serif"
+      fontSize="sm"
+      color="neutral.600"
+      py={10}
+      gap={2}
+    >
+      <Box mb={2}>
+        <CircleCheck size={24} color="#262626" />
+      </Box>
+      <Box fontWeight="600" fontSize="lg" color="neutral.800">
+        Nothing to see here.
+      </Box>
+      <Box color="neutral.700" fontWeight="400">
+        {subtitle}
+      </Box>
+      <Box display="flex" gap={3} mt={4}>
+        <Button
+          bg="neutral.700"
+          color="white"
+          _hover={{ bg: 'neutral.800' }}
+          onClick={() => navigate(primaryButtonLink)}
+        >
+          {primaryButtonText}
+        </Button>
+        <Button
+          bg="neutral.300"
+          color="neutral.700"
+          _hover={{ bg: 'neutral.50' }}
+          onClick={() => navigate(secondaryButtonLink)}
+        >
+          {secondaryButtonText}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default PageEmptyState;
diff --git a/apps/frontend/src/components/SectionEmptyState.tsx b/apps/frontend/src/components/SectionEmptyState.tsx
new file mode 100644
index 000000000..0244f4582
--- /dev/null
+++ b/apps/frontend/src/components/SectionEmptyState.tsx
@@ -0,0 +1,35 @@
+import { Box } from '@chakra-ui/react';
+import { CircleCheck } from 'lucide-react';
+
+interface EmptyStateProps {
+  subtitle: string;
+}
+
+const SectionEmptyState: React.FC<EmptyStateProps> = ({ subtitle }) => {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      textAlign="center"
+      fontFamily="'Inter', sans-serif"
+      fontSize="sm"
+      color="neutral.600"
+      py={10}
+      gap={2}
+    >
+      <Box mb={2}>
+        <CircleCheck size={24} color="#262626" />
+      </Box>
+      <Box fontWeight="600" fontSize="lg" color="neutral.800">
+        Nothing to see here.
+      </Box>
+      <Box color="neutral.700" fontWeight="400">
+        {subtitle}
+      </Box>
+    </Box>
+  );
+};
+
+export default SectionEmptyState;
diff --git a/apps/frontend/src/containers/adminDashboard.tsx b/apps/frontend/src/containers/adminDashboard.tsx
index 7ce01914e..5b0e00201 100644
--- a/apps/frontend/src/containers/adminDashboard.tsx
+++ b/apps/frontend/src/containers/adminDashboard.tsx
@@ -16,6 +16,8 @@ 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';
 
 const AdminDashboard: React.FC = () => {
   const navigate = useNavigate();
@@ -84,6 +86,11 @@ const AdminDashboard: React.FC = () => {
     fetchPendingApplications();
   }, [setAlertMessage]);
 
+  const isPageEmpty =
+    pendingApplications.length === 0 &&
+    recentOrders.length === 0 &&
+    recentDonations.length === 0;
+
   return (
     <Box p={12}>
       {alertState && (
@@ -98,84 +105,133 @@ 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>
+      {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>
   );
 };
diff --git a/apps/frontend/src/containers/pantryDashboard.tsx b/apps/frontend/src/containers/pantryDashboard.tsx
index 182c9a9ef..907403705 100644
--- a/apps/frontend/src/containers/pantryDashboard.tsx
+++ b/apps/frontend/src/containers/pantryDashboard.tsx
@@ -12,6 +12,8 @@ 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';
 
 const PantryDashboard: React.FC = () => {
   const navigate = useNavigate();
@@ -61,7 +63,25 @@ const PantryDashboard: React.FC = () => {
     fetchDashboardData();
   }, [setAlertMessage]);
 
-  if (!pantry) return null;
+  if (!pantry) {
+    return (
+      <Box p={12}>
+        <Heading textStyle="h1" color="gray.600" mb={6}>
+          Pantry Dashboard
+        </Heading>
+        <PageEmptyState
+          subtitle="Unable to load pantry information. Your pantry may not be set up yet."
+          primaryButtonText="Create Food Request"
+          primaryButtonLink={ROUTES.REQUEST_FORM}
+          secondaryButtonText="View Orders"
+          secondaryButtonLink={ROUTES.PANTRY_ORDER_MANAGEMENT}
+        />
+      </Box>
+    );
+  }
+
+  const isPageEmpty =
+    recentFoodRequests.length === 0 && recentOrders.length === 0;
 
   return (
     <Box p={12}>
@@ -77,51 +97,85 @@ const PantryDashboard: React.FC = () => {
         Welcome, {pantry.pantryName}
       </Heading>
 
-      <Text textStyle="p" color="gray.light" fontWeight={600} mb={4}>
-        Recent Food Requests
-      </Text>
-      <Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gap={4} mb={16}>
-        {recentFoodRequests.map((fr) => (
-          <DashboardCard
-            key={fr.requestId}
-            type={DashboardCardType.FOOD_REQUEST}
-            title={`Request #${fr.requestId}`}
-            date={fr.requestedAt}
-            subtitle={pantry.pantryName}
-            linkText="View Request Details"
-            onLinkClick={() =>
-              navigate(`${ROUTES.REQUEST_FORM}?requestId=${fr.requestId}`)
-            }
-          />
-        ))}
-      </Box>
+      {isPageEmpty ? (
+        <PageEmptyState
+          subtitle="You have no food requests or orders at this time."
+          primaryButtonText="Create Food Request"
+          primaryButtonLink={ROUTES.REQUEST_FORM}
+          secondaryButtonText="View Orders"
+          secondaryButtonLink={ROUTES.PANTRY_ORDER_MANAGEMENT}
+        />
+      ) : (
+        <>
+          <Text textStyle="p" color="gray.light" fontWeight={600} mb={4}>
+            Recent Food Requests
+          </Text>
+          {recentFoodRequests.length === 0 ? (
+            <Box mb={16}>
+              <SectionEmptyState subtitle="You have no recent food requests at this time" />
+            </Box>
+          ) : (
+            <Box
+              display="grid"
+              gridTemplateColumns="repeat(2, 1fr)"
+              gap={4}
+              mb={16}
+            >
+              {recentFoodRequests.map((fr) => (
+                <DashboardCard
+                  key={fr.requestId}
+                  type={DashboardCardType.FOOD_REQUEST}
+                  title={`Request #${fr.requestId}`}
+                  date={fr.requestedAt}
+                  subtitle={pantry.pantryName}
+                  linkText="View Request Details"
+                  onLinkClick={() =>
+                    navigate(`${ROUTES.REQUEST_FORM}?requestId=${fr.requestId}`)
+                  }
+                />
+              ))}
+            </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(
-                `${ROUTES.PANTRY_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(
+                      `${ROUTES.PANTRY_ORDER_MANAGEMENT}?orderId=${order.orderId}`,
+                    )
+                  }
+                />
+              ))}
+            </Box>
+          )}
+        </>
+      )}
     </Box>
   );
 };
diff --git a/apps/frontend/src/containers/volunteerDashboard.tsx b/apps/frontend/src/containers/volunteerDashboard.tsx
index c33843670..5637af1a9 100644
--- a/apps/frontend/src/containers/volunteerDashboard.tsx
+++ b/apps/frontend/src/containers/volunteerDashboard.tsx
@@ -8,6 +8,8 @@ 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';
 
 const VolunteerDashboard: React.FC = () => {
   const navigate = useNavigate();
@@ -53,6 +55,9 @@ const VolunteerDashboard: React.FC = () => {
 
   if (!user) return null;
 
+  const isPageEmpty =
+    recentFoodRequests.length === 0 && recentOrders.length === 0;
+
   return (
     <Box p={12}>
       {alertState && (
@@ -67,53 +72,87 @@ const VolunteerDashboard: React.FC = () => {
         Welcome, {user.firstName} {user.lastName}
       </Heading>
 
-      <Text textStyle="p" color="gray.light" fontWeight={600} mb={4}>
-        Recent Food Requests
-      </Text>
-      <Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gap={4} mb={16}>
-        {recentFoodRequests.map((fr) => (
-          <DashboardCard
-            key={fr.requestId}
-            type={DashboardCardType.FOOD_REQUEST}
-            title={`Request #${fr.requestId}`}
-            date={fr.requestedAt}
-            subtitle={fr.pantry.pantryName}
-            linkText="Fulfill Request"
-            onLinkClick={() =>
-              navigate(
-                `${ROUTES.VOLUNTEER_REQUEST_MANAGEMENT}?requestId=${fr.requestId}`,
-              )
-            }
-          />
-        ))}
-      </Box>
+      {isPageEmpty ? (
+        <PageEmptyState
+          subtitle="You have no food requests or orders at this time."
+          primaryButtonText="View Assigned Pantries"
+          primaryButtonLink={ROUTES.VOLUNTEER_ASSIGNED_PANTRIES}
+          secondaryButtonText="View Orders"
+          secondaryButtonLink={ROUTES.VOLUNTEER_ORDER_MANAGEMENT}
+        />
+      ) : (
+        <>
+          <Text textStyle="p" color="gray.light" fontWeight={600} mb={4}>
+            Recent Food Requests
+          </Text>
+          {recentFoodRequests.length === 0 ? (
+            <Box mb={16}>
+              <SectionEmptyState subtitle="You have no recent food requests at this time" />
+            </Box>
+          ) : (
+            <Box
+              display="grid"
+              gridTemplateColumns="repeat(2, 1fr)"
+              gap={4}
+              mb={16}
+            >
+              {recentFoodRequests.map((fr) => (
+                <DashboardCard
+                  key={fr.requestId}
+                  type={DashboardCardType.FOOD_REQUEST}
+                  title={`Request #${fr.requestId}`}
+                  date={fr.requestedAt}
+                  subtitle={fr.pantry.pantryName}
+                  linkText="Fulfill Request"
+                  onLinkClick={() =>
+                    navigate(
+                      `${ROUTES.VOLUNTEER_REQUEST_MANAGEMENT}?requestId=${fr.requestId}`,
+                    )
+                  }
+                />
+              ))}
+            </Box>
+          )}
 
-      <Text textStyle="p" color="gray.light" fontWeight={600} mb={4}>
-        My 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.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(
-                `${ROUTES.VOLUNTEER_ORDER_MANAGEMENT}?orderId=${order.orderId}`,
-              )
-            }
-          />
-        ))}
-      </Box>
+          <Text textStyle="p" color="gray.light" fontWeight={600} mb={4}>
+            My Orders
+          </Text>
+          {recentOrders.length === 0 ? (
+            <Box mb={16}>
+              <SectionEmptyState subtitle="You have no 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.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(
+                      `${ROUTES.VOLUNTEER_ORDER_MANAGEMENT}?orderId=${order.orderId}`,
+                    )
+                  }
+                />
+              ))}
+            </Box>
+          )}
+        </>
+      )}
     </Box>
   );
 };

From 575b115823de6ba7a1c69c6058fda4d50cd358a9 Mon Sep 17 00:00:00 2001
From: jxuistrying <jxuistrying@gmail.com>
Date: Sat, 30 May 2026 20:56:02 -0400
Subject: [PATCH 2/2] refactor subtitle using entity for ui

---
 apps/frontend/src/components/PageEmptyState.tsx     | 7 +++++--
 apps/frontend/src/components/SectionEmptyState.tsx  | 8 +++++---
 apps/frontend/src/containers/adminDashboard.tsx     | 8 ++++----
 apps/frontend/src/containers/pantryDashboard.tsx    | 6 +++---
 apps/frontend/src/containers/volunteerDashboard.tsx | 6 +++---
 5 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/apps/frontend/src/components/PageEmptyState.tsx b/apps/frontend/src/components/PageEmptyState.tsx
index ade46fca6..de166dad3 100644
--- a/apps/frontend/src/components/PageEmptyState.tsx
+++ b/apps/frontend/src/components/PageEmptyState.tsx
@@ -4,7 +4,8 @@ import { CircleCheck } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 
 interface PageEmptyStateProps {
-  subtitle: string;
+  entity?: string;
+  subtitle?: string;
   primaryButtonText: string;
   primaryButtonLink: string;
   secondaryButtonText: string;
@@ -12,6 +13,7 @@ interface PageEmptyStateProps {
 }
 
 const PageEmptyState: React.FC<PageEmptyStateProps> = ({
+  entity,
   subtitle,
   primaryButtonText,
   primaryButtonLink,
@@ -19,6 +21,7 @@ const PageEmptyState: React.FC<PageEmptyStateProps> = ({
   secondaryButtonLink,
 }) => {
   const navigate = useNavigate();
+  const message = subtitle ?? `You have no ${entity} at this time`;
 
   return (
     <Box
@@ -40,7 +43,7 @@ const PageEmptyState: React.FC<PageEmptyStateProps> = ({
         Nothing to see here.
       </Box>
       <Box color="neutral.700" fontWeight="400">
-        {subtitle}
+        {message}
       </Box>
       <Box display="flex" gap={3} mt={4}>
         <Button
diff --git a/apps/frontend/src/components/SectionEmptyState.tsx b/apps/frontend/src/components/SectionEmptyState.tsx
index 0244f4582..d1a717598 100644
--- a/apps/frontend/src/components/SectionEmptyState.tsx
+++ b/apps/frontend/src/components/SectionEmptyState.tsx
@@ -2,10 +2,12 @@ import { Box } from '@chakra-ui/react';
 import { CircleCheck } from 'lucide-react';
 
 interface EmptyStateProps {
-  subtitle: string;
+  entity?: string;
+  subtitle?: string;
 }
 
-const SectionEmptyState: React.FC<EmptyStateProps> = ({ subtitle }) => {
+const SectionEmptyState: React.FC<EmptyStateProps> = ({ entity, subtitle }) => {
+  const message = subtitle ?? `You have no ${entity} at this time.`;
   return (
     <Box
       display="flex"
@@ -26,7 +28,7 @@ const SectionEmptyState: React.FC<EmptyStateProps> = ({ subtitle }) => {
         Nothing to see here.
       </Box>
       <Box color="neutral.700" fontWeight="400">
-        {subtitle}
+        {message}
       </Box>
     </Box>
   );
diff --git a/apps/frontend/src/containers/adminDashboard.tsx b/apps/frontend/src/containers/adminDashboard.tsx
index 5b0e00201..4368d6342 100644
--- a/apps/frontend/src/containers/adminDashboard.tsx
+++ b/apps/frontend/src/containers/adminDashboard.tsx
@@ -107,7 +107,7 @@ const AdminDashboard: React.FC = () => {
 
       {isPageEmpty ? (
         <PageEmptyState
-          subtitle="You have no orders or applications to review at this time."
+          entity="orders or applications to review"
           primaryButtonText="View Pantries"
           primaryButtonLink={ROUTES.PANTRY_MANAGEMENT}
           secondaryButtonText="View Donations"
@@ -120,7 +120,7 @@ const AdminDashboard: React.FC = () => {
           </Text>
           {pendingApplications.length === 0 ? (
             <Box mb={16}>
-              <SectionEmptyState subtitle="You have no pending applications at this time" />
+              <SectionEmptyState entity="pending applications" />
             </Box>
           ) : (
             <Box
@@ -167,7 +167,7 @@ const AdminDashboard: React.FC = () => {
           </Text>
           {recentOrders.length === 0 ? (
             <Box mb={16}>
-              <SectionEmptyState subtitle="You have no recent orders at this time" />
+              <SectionEmptyState entity="recent orders" />
             </Box>
           ) : (
             <Box
@@ -203,7 +203,7 @@ const AdminDashboard: React.FC = () => {
           </Text>
           {recentDonations.length === 0 ? (
             <Box mb={16}>
-              <SectionEmptyState subtitle="You have no recent donations at this time" />
+              <SectionEmptyState entity="recent donations" />
             </Box>
           ) : (
             <Box
diff --git a/apps/frontend/src/containers/pantryDashboard.tsx b/apps/frontend/src/containers/pantryDashboard.tsx
index 907403705..599387a5e 100644
--- a/apps/frontend/src/containers/pantryDashboard.tsx
+++ b/apps/frontend/src/containers/pantryDashboard.tsx
@@ -99,7 +99,7 @@ const PantryDashboard: React.FC = () => {
 
       {isPageEmpty ? (
         <PageEmptyState
-          subtitle="You have no food requests or orders at this time."
+          entity="food requests or orders"
           primaryButtonText="Create Food Request"
           primaryButtonLink={ROUTES.REQUEST_FORM}
           secondaryButtonText="View Orders"
@@ -112,7 +112,7 @@ const PantryDashboard: React.FC = () => {
           </Text>
           {recentFoodRequests.length === 0 ? (
             <Box mb={16}>
-              <SectionEmptyState subtitle="You have no recent food requests at this time" />
+              <SectionEmptyState entity="recent food requests" />
             </Box>
           ) : (
             <Box
@@ -142,7 +142,7 @@ const PantryDashboard: React.FC = () => {
           </Text>
           {recentOrders.length === 0 ? (
             <Box mb={16}>
-              <SectionEmptyState subtitle="You have no recent orders at this time" />
+              <SectionEmptyState entity="recent orders" />
             </Box>
           ) : (
             <Box
diff --git a/apps/frontend/src/containers/volunteerDashboard.tsx b/apps/frontend/src/containers/volunteerDashboard.tsx
index 5637af1a9..04f21d906 100644
--- a/apps/frontend/src/containers/volunteerDashboard.tsx
+++ b/apps/frontend/src/containers/volunteerDashboard.tsx
@@ -74,7 +74,7 @@ const VolunteerDashboard: React.FC = () => {
 
       {isPageEmpty ? (
         <PageEmptyState
-          subtitle="You have no food requests or orders at this time."
+          entity="food requests or orders"
           primaryButtonText="View Assigned Pantries"
           primaryButtonLink={ROUTES.VOLUNTEER_ASSIGNED_PANTRIES}
           secondaryButtonText="View Orders"
@@ -87,7 +87,7 @@ const VolunteerDashboard: React.FC = () => {
           </Text>
           {recentFoodRequests.length === 0 ? (
             <Box mb={16}>
-              <SectionEmptyState subtitle="You have no recent food requests at this time" />
+              <SectionEmptyState entity="recent food requests" />
             </Box>
           ) : (
             <Box
@@ -119,7 +119,7 @@ const VolunteerDashboard: React.FC = () => {
           </Text>
           {recentOrders.length === 0 ? (
             <Box mb={16}>
-              <SectionEmptyState subtitle="You have no orders at this time" />
+              <SectionEmptyState entity="orders" />
             </Box>
           ) : (
             <Box