chore: fix header and show a mockup dashboard page

2025-08-21 20:53:59 -06:00
parent 4368723f3f
commit 4fbc9e40f8
5 changed files with 465 additions and 24 deletions
--- a/src/private/dashboard/Dashboard.jsx
+++ b/src/private/dashboard/Dashboard.jsx
@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { Box, Grid, Paper, Typography, Divider } from '@mui/material';
+import { BarChart, LineChart, PieChart } from '@mui/x-charts';
+
+const paperSx = {
+  p: 2,
+  borderRadius: 2,
+  boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+  backgroundColor: '#fff',
+};
+
+export default function Dashboard() {
+  // ===== Mock data (Fendi-like categories) =====
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
+  const revenue = [42, 55, 48, 61, 70, 78]; // $k
+  const orders = [180, 210, 195, 240, 260, 300];
+
+  const categories = [
+    { label: 'Furniture', value: 38 },
+    { label: 'Lighting', value: 18 },
+    { label: 'Textiles', value: 14 },
+    { label: 'Decorative', value: 12 },
+    { label: 'Kitchen & Dining', value: 10 },
+    { label: 'Outdoor', value: 8 },
+  ];
+
+  const topProducts = [
+    { label: 'Sofa Roma', value: 24 },
+    { label: 'Lamp Venezia', value: 18 },
+    { label: 'Rug Milano', value: 15 },
+    { label: 'Table Firenze', value: 12 },
+    { label: 'Chair Torino', value: 9 },
+  ];
+
+  return (
+    <Box sx={{ p: 3 }}>
+      {/* KPIs */}
+      <Grid container spacing={2} sx={{ mb: 2 }}>
+        <Grid item xs={12} md={3}>
+          <Paper sx={paperSx}>
+            <Typography variant="subtitle2" color="text.secondary">Revenue (Last 30d)</Typography>
+            <Typography variant="h4" sx={{ color: '#40120EFF' }}>$ 312k</Typography>
+            <Typography variant="caption" color="success.main">+8.4% vs prev.</Typography>
+          </Paper>
+        </Grid>
+        <Grid item xs={12} md={3}>
+          <Paper sx={paperSx}>
+            <Typography variant="subtitle2" color="text.secondary">Orders</Typography>
+            <Typography variant="h4" sx={{ color: '#40120EFF' }}>1,385</Typography>
+            <Typography variant="caption" color="success.main">+6.1% vs prev.</Typography>
+          </Paper>
+        </Grid>
+        <Grid item xs={12} md={3}>
+          <Paper sx={paperSx}>
+            <Typography variant="subtitle2" color="text.secondary">Avg. Order Value</Typography>
+            <Typography variant="h4" sx={{ color: '#40120EFF' }}>$ 225</Typography>
+            <Typography variant="caption" color="text.secondary">stable</Typography>
+          </Paper>
+        </Grid>
+        <Grid item xs={12} md={3}>
+          <Paper sx={paperSx}>
+            <Typography variant="subtitle2" color="text.secondary">Returning Customers</Typography>
+            <Typography variant="h4" sx={{ color: '#40120EFF' }}>42%</Typography>
+            <Typography variant="caption" color="success.main">+2.0 pts</Typography>
+          </Paper>
+        </Grid>
+      </Grid>
+
+      {/* Charts */}
+      <Grid container spacing={2}>
+        {/* Revenue trend */}
+        <Grid item xs={12} md={8}>
+          <Paper sx={paperSx}>
+            <Typography variant="h6" sx={{ mb: 1, color: '#40120EFF' }}>Revenue & Orders</Typography>
+            <Divider sx={{ mb: 2 }} />
+            <LineChart
+              xAxis={[{ scaleType: 'point', data: months }]}
+              series={[
+                { data: revenue, label: 'Revenue ($k)', curve: 'catmullRom' },
+                { data: orders, label: 'Orders', curve: 'catmullRom', yAxisKey: 'right' },
+              ]}
+              yAxis={[{}, { id: 'right', position: 'right' }]}
+              height={300}
+            />
+          </Paper>
+        </Grid>
+
+        {/* Category share */}
+        <Grid item xs={12} md={4}>
+          <Paper sx={paperSx}>
+            <Typography variant="h6" sx={{ mb: 1, color: '#40120EFF' }}>Sales by Category</Typography>
+            <Divider sx={{ mb: 2 }} />
+            <PieChart
+              series={[
+                {
+                  data: categories.map((c, i) => ({ id: i, value: c.value, label: c.label })),
+                  innerRadius: 30,
+                  paddingAngle: 2,
+                },
+              ]}
+              height={300}
+            />
+          </Paper>
+        </Grid>
+
+        {/* Top products */}
+        <Grid item xs={12}>
+          <Paper sx={paperSx}>
+            <Typography variant="h6" sx={{ mb: 1, color: '#40120EFF' }}>Top Products</Typography>
+            <Divider sx={{ mb: 2 }} />
+            <BarChart
+              xAxis={[{ scaleType: 'band', data: topProducts.map(p => p.label) }]}
+              series={[{ data: topProducts.map(p => p.value), label: 'Units' }]}
+              height={300}
+            />
+          </Paper>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}