chore: update color schemas

2025-08-21 21:25:59 -06:00
parent 4fbc9e40f8
commit d59632e1f6
3 changed files with 67 additions and 91 deletions
--- a/src/components/MenuDrawer.jsx
+++ b/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}`}
--- a/src/components/VimeoEmbed.jsx
+++ b/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>
-  );
-}
--- a/src/private/dashboard/Dashboard.jsx
+++ b/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="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>