SSF-168 Dashboard stats component

apps/frontend/src/components/dashboardStats.tsx

@@ -0,0 +1,37 @@
+import { Box, SimpleGrid, Text } from '@chakra-ui/react';
+
+type DashboardStatsProps = {
+  stats: Record<string, string>;
+};
+
+// Called like: <DashboardStats stats={{ 'Food Requests': '1200', 'Orders': '50', 'Items Received': '1000', 'Value Received': '$40',}}></DashboardStats>
+export function DashboardStats({ stats }: DashboardStatsProps) {
+  const colors = ['blue.core', 'red', 'yellow.hover', 'teal.core'];
+
+  return (
+    <SimpleGrid columns={Object.keys(stats).length} gap={6} mx={8} my={4}>
+      {Object.entries(stats).map(([key, value], index) => {
+        const color = colors[index % colors.length];
+
+        return (
+          <Box
+            key={key}
+            px={4}
+            py={3}
+            textAlign="left"
+            borderWidth={1}
+            borderRadius={4}
+            borderColor="neutral.200"
+          >
+            <Text color={color} textStyle="p2" fontWeight={500}>
+              {key}
+            </Text>
+            <Text color={color} textStyle="h2" fontWeight={600}>
+              {value}
+            </Text>
+          </Box>
+        );
+      })}
+    </SimpleGrid>
+  );
+}

apps/frontend/src/containers/adminOrderManagement.tsx

@@ -95,7 +95,7 @@ const AdminOrderManagement: React.FC = () => {
 
   const MAX_PER_STATUS = 5;
 
-  const ASSIGNEE_COLORS = ['yellow.ssf', 'red', 'cyan', 'blue.ssf'];
+  const ASSIGNEE_COLORS = ['yellow.ssf', 'red', 'teal.core', 'blue.ssf'];
 
   useEffect(() => {
     // Fetch all orders on component mount and sorts them into their appropriate status lists

apps/frontend/src/theme.ts

@@ -82,7 +82,6 @@ const customConfig = defineConfig({
           hover: { value: '#9C5D00' },
           200: { value: '#FEECD1' },
         },
-        cyan: { value: '#2795A5' },
         neutral: {
           50: { value: '#FAFAFA' },
           100: { value: '#E7E7E7' },
@@ -103,6 +102,7 @@ const customConfig = defineConfig({
           200: { value: '#D4EAED' },
           400: { value: '#A9D5DB' },
           hover: { value: '#19717D' },
+          core: { value: '#2795A5' },
         },
       },
       fonts: {