chore: update color schemas

src/components/MenuDrawer.jsx

@@ -21,7 +21,6 @@ import ExitToAppIcon from '@mui/icons-material/ExitToApp';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 
-// ---- Menu options (unchanged) ----
 const menuOptions = {
   public: [
     { text: 'Dashboard', icon: <img src="/Dashboard.png" alt="Dashboard" width={24} height={24} /> },
@@ -42,7 +41,6 @@ const menuOptions = {
   ],
 };
 
-// Mini‑variant sizes
 const OPEN_WIDTH = 300;
 const MINI_WIDTH = 72;
 
@@ -52,7 +50,6 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect, o
   const items = useMemo(() => menuOptions[zone] ?? [], [zone]);
   const { logout } = useAuth();
 
-  // Collapsed state is only meaningful on desktop (permanent drawer)
   const [collapsed, setCollapsed] = useState(false);
   const catalogChildren = [
     'Furniture',
@@ -64,12 +61,7 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect, o
   ];
   const [openCatalog, setOpenCatalog] = useState(false);
 
-  // Interpret parent "open" prop:
-  // - Mobile (temporary): open controls visibility
-  // - Desktop (permanent): open=true => expanded, open=false => collapsed
-  // Inform parent (AppHeader) about expanded/collapsed state
   useEffect(() => {
-    // On mobile the drawer is temporary; treat as expanded for header layout
     const expanded = isMobile ? true : !collapsed;
     onExpandedChange?.(expanded);
   }, [collapsed, isMobile, onExpandedChange]);
@@ -99,7 +91,6 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect, o
         },
       }}
     >
-      {/* Header */}
       <Box
         sx={{
           display: 'flex',
@@ -110,7 +101,6 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect, o
           justifyContent: collapsed ? 'center' : 'space-between',
         }}
       >
-        {/* Expanded - default */}
         {!collapsed && (
           <Box textAlign="center" p={3} alignItems="center" minHeight={72}>
             <img
@@ -134,7 +124,6 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect, o
         )}
       </Box>
 
-      {/* Collapsed */}
       {collapsed && (
         <Box textAlign="center" p={3} minHeight={112} justifyContent="center" display="flex"
           alignItems="start">
@@ -146,7 +135,6 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect, o
         </Box>
       )}
 
-      {/* Items */}
       <List sx={{
         width: '100%',
         py: 0,
@@ -157,7 +145,6 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect, o
         {items.map(({ text, icon }, index) => {
           const isCatalog = text === 'Catalog';
 
-          // Special case: Catalog with submenu
           if (isCatalog) {
             return (
               <Box key={`catalog-${index}`}>
@@ -169,7 +156,6 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect, o
                   <ListItem
                     onClick={() => {
                       if (collapsed) {
-                        // Expand drawer first so submenu is visible
                         setCollapsed(false);
                         setOpenCatalog(true);
                       } else {
@@ -214,7 +200,6 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect, o
                   </ListItem>
                 </Tooltip>
 
-                {/* Submenu list */}
                 {!collapsed && (
                   <Collapse in={openCatalog} timeout="auto" unmountOnExit>
                     <List component="div" disablePadding sx={{ pl: 7 }}>
@@ -244,7 +229,6 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect, o
             );
           }
 
-          // Default items
           return (
             <Tooltip
               key={`${text}-${index}`}

src/components/VimeoEmbed.jsx

@@ -1,46 +0,0 @@
-export default function VimeoBackground({ videoId = "1066622045", opacity = 0.5 }) {
-  const params = new URLSearchParams({
-    background: "1",
-    muted: "1",
-    autoplay: "1",
-    autopause: "0",
-    controls: "0",
-    loop: "1",
-    dnt: "1",
-    playsinline: "1",
-    app_id: "122963",
-  }).toString();
-
-  return (
-    <div
-      style={{
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: "100vw",
-        height: "100vh",
-        zIndex: -1,
-        overflow: "hidden",
-        pointerEvents: "none",
-      }}
-    >
-      <iframe
-        src={`https://player.vimeo.com/video/${videoId}?${params}`}
-        style={{
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          width: "177.78vh", // 100vh * 16 / 9
-          height: "100vh",
-          transform: "translate(-50%, -50%)",
-          opacity,
-          border: "none",
-        }}
-        allow="autoplay; fullscreen; picture-in-picture"
-        frameBorder="0"
-        allowFullScreen
-        title="Vimeo Background Video"
-      />
-    </div>
-  );
-}

src/private/dashboard/Dashboard.jsx

@@ -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="subtitle2" sx={{ color: brand.subtle }}>Revenue (Last 30d)</Typography>
-            <Typography variant="h4" sx={{ color: '#40120EFF' }}>$ 312k</Typography>
+            <Typography variant="h4" sx={{ color: brand.text }}>$ 312k</Typography>
-            <Typography variant="caption" color="success.main">+8.4% vs prev.</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="subtitle2" sx={{ color: brand.subtle }}>Orders</Typography>
-            <Typography variant="h4" sx={{ color: '#40120EFF' }}>1,385</Typography>
+            <Typography variant="h4" sx={{ color: brand.text }}>1,385</Typography>
-            <Typography variant="caption" color="success.main">+6.1% vs prev.</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="subtitle2" sx={{ color: brand.subtle }}>Avg. Order Value</Typography>
-            <Typography variant="h4" sx={{ color: '#40120EFF' }}>$ 225</Typography>
+            <Typography variant="h4" sx={{ color: brand.text }}>$ 225</Typography>
-            <Typography variant="caption" color="text.secondary">stable</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="subtitle2" sx={{ color: brand.subtle }}>Returning Customers</Typography>
-            <Typography variant="h4" sx={{ color: '#40120EFF' }}>42%</Typography>
+            <Typography variant="h4" sx={{ color: brand.text }}>42%</Typography>
-            <Typography variant="caption" color="success.main">+2.0 pts</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>
+            <Typography variant="h6" sx={{ mb: 1, color: brand.text }}>Revenue & Orders</Typography>
-            <Divider sx={{ mb: 2 }} />
+            <Divider sx={{ mb: 2, borderColor: brand.divider }} />
             <LineChart
               xAxis={[{ scaleType: 'point', data: months }]}
               series={[
-                { data: revenue, label: 'Revenue ($k)', curve: 'catmullRom' },
+                { data: revenue, label: 'Revenue ($k)', curve: 'catmullRom', color: brand.primary },
-                { data: orders, label: 'Orders', curve: 'catmullRom', yAxisKey: 'right' },
+                { 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>
+            <Typography variant="h6" sx={{ mb: 1, color: brand.text }}>Sales by Category</Typography>
-            <Divider sx={{ mb: 2 }} />
+            <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>
+            <Typography variant="h6" sx={{ mb: 1, color: brand.text }}>Top Products</Typography>
-            <Divider sx={{ mb: 2 }} />
+            <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>