Project Init

apps/backoffice/src/app/features/dashboard/pages/DashboardPage.tsx

@@ -0,0 +1,44 @@
+import { Grid, Paper, Text, Title, Stack, Group } from '@mantine/core';
+import { IconBox, IconUsers, IconActivity } from '@tabler/icons-react';
+
+interface StatCardProps {
+  label: string;
+  value: string;
+  icon: React.ElementType;
+  color: string;
+}
+
+function StatCard({ label, value, icon: Icon, color }: StatCardProps) {
+  return (
+    <Paper p="md" shadow="sm" radius="md" withBorder>
+      <Group justify="space-between">
+        <Stack gap={4}>
+          <Text size="sm" c="dimmed">
+            {label}
+          </Text>
+          <Title order={3}>{value}</Title>
+        </Stack>
+        <Icon size={32} color={color} />
+      </Group>
+    </Paper>
+  );
+}
+
+export function DashboardPage() {
+  return (
+    <Stack gap="lg">
+      <Title order={2}>Dashboard</Title>
+      <Grid>
+        <Grid.Col span={{ base: 12, sm: 4 }}>
+          <StatCard label="Total Items" value="—" icon={IconBox} color="#2563eb" />
+        </Grid.Col>
+        <Grid.Col span={{ base: 12, sm: 4 }}>
+          <StatCard label="Total Users" value="—" icon={IconUsers} color="#16a34a" />
+        </Grid.Col>
+        <Grid.Col span={{ base: 12, sm: 4 }}>
+          <StatCard label="Activity" value="—" icon={IconActivity} color="#d97706" />
+        </Grid.Col>
+      </Grid>
+    </Stack>
+  );
+}