[SSF-206] Add empty state components for dashboard

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

@@ -17,6 +17,7 @@ import { ManufacturerModule } from '../foodManufacturers/manufacturers.module';
 import { DonationItemsModule } from '../donationItems/donationItems.module';
 import { Allocation } from '../allocations/allocations.entity';
 import { Donation } from '../donations/donations.entity';
+import { PantriesModule } from '../pantries/pantries.module';
 import { EmailsModule } from '../emails/email.module';
 
 @Module({
@@ -38,6 +39,7 @@ import { EmailsModule } from '../emails/email.module';
     ManufacturerModule,
     DonationItemsModule,
     DonationModule,
+    forwardRef(() => PantriesModule),
     EmailsModule,
   ],
   controllers: [OrdersController],

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;