rodolfo_ruiz/fendi-react-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update color schemas

Browse Source
This commit is contained in:
Rodolfo Ruiz
2025-08-21 21:25:59 -06:00
parent 4fbc9e40f8
commit d59632e1f6
3 changed files with 67 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/private/dashboard/Dashboard.jsx
View File

@@ -9,8 +9,18 @@ const paperSx = {
backgroundColor: '#fff',
};
const brand = {
primary: '#40120E', // espresso
primary70: '#6A3A34', // lighter espresso
sand: '#DFCCBC', // light sand
sand70: '#CDB7A4', // mid sand
sand50: '#BCA693', // darker sand
text: '#40120E',
subtle: 'rgba(0,0,0,0.38)',
divider: 'rgba(0,0,0,0.08)',
};
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];
@@ -34,66 +44,83 @@ export default function Dashboard() {
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>
<Typography variant="subtitle2" sx={{ color: brand.subtle }}>Revenue (Last 30d)</Typography>
<Typography variant="h4" sx={{ color: brand.text }}>$ 312k</Typography>
<Typography variant="caption" sx={{ color: '#2e7d32' }}>+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>
<Typography variant="subtitle2" sx={{ color: brand.subtle }}>Orders</Typography>
<Typography variant="h4" sx={{ color: brand.text }}>1,385</Typography>
<Typography variant="caption" sx={{ color: '#2e7d32' }}>+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>
<Typography variant="subtitle2" sx={{ color: brand.subtle }}>Avg. Order Value</Typography>
<Typography variant="h4" sx={{ color: brand.text }}>$ 225</Typography>
<Typography variant="caption" sx={{ color: brand.subtle }}>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>
<Typography variant="subtitle2" sx={{ color: brand.subtle }}>Returning Customers</Typography>
<Typography variant="h4" sx={{ color: brand.text }}>42%</Typography>
<Typography variant="caption" sx={{ color: '#2e7d32' }}>+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 }} />
<Typography variant="h6" sx={{ mb: 1, color: brand.text }}>Revenue & Orders</Typography>
<Divider sx={{ mb: 2, borderColor: brand.divider }} />
<LineChart
xAxis={[{ scaleType: 'point', data: months }]}
series={[
{ data: revenue, label: 'Revenue ($k)', curve: 'catmullRom' },
{ data: orders, label: 'Orders', curve: 'catmullRom', yAxisKey: 'right' },
{ data: revenue, label: 'Revenue ($k)', curve: 'catmullRom', color: brand.primary },
{ data: orders, label: 'Orders', curve: 'catmullRom', yAxisKey: 'right', color: brand.sand50 },
]}
yAxis={[
{ tickLabelStyle: { fill: brand.subtle } },
{ id: 'right', position: 'right', tickLabelStyle: { fill: brand.subtle } },
]}
yAxis={[{}, { id: 'right', position: 'right' }]}
height={300}
// Optional: light grid color
grid={{ horizontal: true, vertical: false }}
sx={{
'& .MuiChartsAxis-line': { stroke: brand.divider },
'& .MuiChartsAxis-tick': { stroke: brand.divider },
}}
/>
</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 }} />
<Typography variant="h6" sx={{ mb: 1, color: brand.text }}>Sales by Category</Typography>
<Divider sx={{ mb: 2, borderColor: brand.divider }} />
<PieChart
series={[
{
data: categories.map((c, i) => ({ id: i, value: c.value, label: c.label })),
data: categories.map((c, i) => ({
id: i,
value: c.value,
label: c.label,
color: [
brand.primary,
brand.primary70,
brand.sand50,
brand.sand70,
'#8E6E5E', // complementary brown
'#A68979', // warm accent
][i],
})),
innerRadius: 30,
paddingAngle: 2,
},
@@ -103,15 +130,26 @@ export default function Dashboard() {
</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 }} />
<Typography variant="h6" sx={{ mb: 1, color: brand.text }}>Top Products</Typography>
<Divider sx={{ mb: 2, borderColor: brand.divider }} />
<BarChart
xAxis={[{ scaleType: 'band', data: topProducts.map(p => p.label) }]}
series={[{ data: topProducts.map(p => p.value), label: 'Units' }]}
series={[
{
data: topProducts.map(p => p.value),
label: 'Units',
color: brand.primary,
},
]}
height={300}
grid={{ horizontal: true, vertical: false }}
sx={{
'& .MuiChartsAxis-line': { stroke: brand.divider },
'& .MuiChartsAxis-tick': { stroke: brand.divider },
'& .MuiChartsLegend-root': { display: 'none' },
}}
/>
</Paper>
</Grid>