first commit

src/pages/Dashboard.jsx

@@ -0,0 +1,124 @@
+import { Grid, Card, CardContent, Stack, Typography, Box, Button, Divider, Table, TableBody, TableCell, TableHead, TableRow, Avatar, MenuItem, TextField } from '@mui/material';
+import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
+import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
+import TwoWheelerOutlinedIcon from '@mui/icons-material/TwoWheelerOutlined';
+import CurrencyRupeeIcon from '@mui/icons-material/CurrencyRupee';
+import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+
+import PageHeader from '@/components/PageHeader';
+import StatCard from '@/components/StatCard';
+import MainCard from '@/components/MainCard';
+import StatusChip from '@/components/StatusChip';
+import AreaChart from '@/components/charts/AreaChart';
+import DonutChart from '@/components/charts/DonutChart';
+import UserAvatar from '@/components/UserAvatar';
+import { ordersTrend, statusBreakdown, orders, riders } from '@/data/mock';
+import { inr } from '@/utils/format';
+
+export default function Dashboard() {
+  return (
+    <>
+      <PageHeader
+        title="Dashboard"
+        breadcrumbs={[{ label: 'Dashboard' }]}
+        action={
+          <Stack direction="row" spacing={1.5}>
+            <TextField select size="small" defaultValue="all" sx={{ minWidth: 150 }}>
+              <MenuItem value="all">All Locations</MenuItem>
+              <MenuItem value="blr">Bengaluru</MenuItem>
+              <MenuItem value="mum">Mumbai</MenuItem>
+            </TextField>
+            <Button variant="outlined" startIcon={<FileDownloadOutlinedIcon />}>Export</Button>
+          </Stack>
+        }
+      />
+
+      <Grid container spacing={2.5}>
+        <Grid item xs={12} sm={6} lg={3}><StatCard title="Total Orders" value="1,402" icon={Inventory2OutlinedIcon} trend={8.4} caption="vs last month" /></Grid>
+        <Grid item xs={12} sm={6} lg={3}><StatCard title="Delivered" value="1,330" icon={LocalShippingOutlinedIcon} color="success" trend={6.1} caption="vs last month" /></Grid>
+        <Grid item xs={12} sm={6} lg={3}><StatCard title="Active Riders" value="48" icon={TwoWheelerOutlinedIcon} color="info" trend={-2.3} caption="vs last month" /></Grid>
+        <Grid item xs={12} sm={6} lg={3}><StatCard title="Revenue" value={inr(384200)} icon={CurrencyRupeeIcon} color="warning" trend={11.7} caption="vs last month" /></Grid>
+
+        <Grid item xs={12} lg={8}>
+          <MainCard
+            title="Orders Overview"
+            action={<Stack direction="row" spacing={2}><Legend color="#C01227" label="Orders" /><Legend color="#00A854" label="Delivered" /></Stack>}
+          >
+            <AreaChart
+              labels={ordersTrend.map((d) => d.m)}
+              series={[
+                { name: 'Orders', color: '#C01227', data: ordersTrend.map((d) => d.orders) },
+                { name: 'Delivered', color: '#00A854', data: ordersTrend.map((d) => d.delivered) }
+              ]}
+            />
+          </MainCard>
+        </Grid>
+        <Grid item xs={12} lg={4}>
+          <MainCard title="Order Status">
+            <Box sx={{ py: 2 }}>
+              <DonutChart data={statusBreakdown} centerValue="1,402" centerLabel="Orders" />
+            </Box>
+          </MainCard>
+        </Grid>
+
+        <Grid item xs={12} lg={7}>
+          <MainCard title="Recent Orders" noPadding>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell>Order ID</TableCell>
+                  <TableCell>Customer</TableCell>
+                  <TableCell>Route</TableCell>
+                  <TableCell>Status</TableCell>
+                  <TableCell align="right">Amount</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {orders.slice(0, 6).map((o) => (
+                  <TableRow key={o.id} hover>
+                    <TableCell sx={{ fontWeight: 600, color: 'primary.main' }}>{o.id}</TableCell>
+                    <TableCell>{o.customer}</TableCell>
+                    <TableCell>
+                      <Typography variant="caption" color="text.secondary">{o.pickup} → {o.drop}</Typography>
+                    </TableCell>
+                    <TableCell><StatusChip status={o.status} /></TableCell>
+                    <TableCell align="right" sx={{ fontWeight: 600 }}>{inr(o.charges)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </MainCard>
+        </Grid>
+        <Grid item xs={12} lg={5}>
+          <MainCard title="Top Riders Today">
+            <Stack divider={<Divider />} spacing={0}>
+              {riders.slice(0, 5).map((r, i) => (
+                <Stack key={r.id} direction="row" spacing={2} alignItems="center" sx={{ py: 1.25 }}>
+                  <Typography variant="subtitle2" color="text.secondary" sx={{ width: 18 }}>{i + 1}</Typography>
+                  <UserAvatar name={r.name} size={36} />
+                  <Box sx={{ flexGrow: 1 }}>
+                    <Typography variant="subtitle2">{r.name}</Typography>
+                    <Typography variant="caption" color="text.secondary">{r.vehicle} · ⭐ {r.rating}</Typography>
+                  </Box>
+                  <Box sx={{ textAlign: 'right' }}>
+                    <Typography variant="subtitle2">{r.deliveries}</Typography>
+                    <Typography variant="caption" color="text.secondary">deliveries</Typography>
+                  </Box>
+                </Stack>
+              ))}
+            </Stack>
+          </MainCard>
+        </Grid>
+      </Grid>
+    </>
+  );
+}
+
+function Legend({ color, label }) {
+  return (
+    <Stack direction="row" spacing={0.75} alignItems="center">
+      <Box sx={{ width: 10, height: 10, borderRadius: '3px', bgcolor: color }} />
+      <Typography variant="caption" color="text.secondary">{label}</Typography>
+    </Stack>
+  );
+}