From 3a0c601151b81887ea265fd2399196138ed5dc61 Mon Sep 17 00:00:00 2001
From: Justin Wang <Juwang110@gmail.com>
Date: Mon, 16 Mar 2026 12:24:34 -0400
Subject: [PATCH] dashboard stats component

---
 .../src/components/dashboardStats.tsx         | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 apps/frontend/src/components/dashboardStats.tsx

diff --git a/apps/frontend/src/components/dashboardStats.tsx b/apps/frontend/src/components/dashboardStats.tsx
new file mode 100644
index 00000000..d8b8167b
--- /dev/null
+++ b/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.hover'];
+
+  return (
+    <SimpleGrid columns={4} gap={10} 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={400}>
+              {value}
+            </Text>
+          </Box>
+        );
+      })}
+    </SimpleGrid>
+  );
+}