diff --git a/apps/frontend/src/components/dashboardStats.tsx b/apps/frontend/src/components/dashboardStats.tsx new file mode 100644 index 00000000..ef4b0fe1 --- /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; +}; + +// Called like: +export function DashboardStats({ stats }: DashboardStatsProps) { + const colors = ['blue.core', 'red', 'yellow.hover', 'teal.core']; + + return ( + + {Object.entries(stats).map(([key, value], index) => { + const color = colors[index % colors.length]; + + return ( + + + {key} + + + {value} + + + ); + })} + + ); +} diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx index ebf5a866..74362811 100644 --- a/apps/frontend/src/containers/adminOrderManagement.tsx +++ b/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 diff --git a/apps/frontend/src/theme.ts b/apps/frontend/src/theme.ts index 0b320004..6fa11a40 100644 --- a/apps/frontend/src/theme.ts +++ b/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: {