chore: delete

src/App.css

@@ -1,5 +1,5 @@
 #root {
-  max-width: 1280px;
+
   margin: 0 auto;
   padding: 2rem;
   text-align: center;

src/App.jsx

@@ -1,65 +1,81 @@
-import { useState } from 'react'
-import './App.css'
+// App.jsx
+import { useState } from 'react';
+import { Box, useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import AppHeader from './components/AppHeader';
+import MenuDrawerPrivate, { OPEN_WIDTH, MINI_WIDTH } from './components/MenuDrawerPrivate';
 import Footer from './components/Footer';
-import Box from '@mui/material/Box';
-
-import Clients from './private/clients/Clients';
 import Dashboard from './private/dashboard/Dashboard';
 import UserManagement from './private/users/UserManagement';
-
+import FurnitureVariantManagement from './private/fornitures/FurnitureVariantManagement';
 import LoginPage from './private/LoginPage';
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
 import { useAuth } from './context/AuthContext';
 
+const DRAWER_EXPANDED = OPEN_WIDTH;
+const DRAWER_COLLAPSED = MINI_WIDTH;
+const APPBAR_HEIGHT = 64;
+
 function PrivateRoute({ children }) {
   const { user } = useAuth();
   return user ? children : <Navigate to="/login" replace />;
 }
 
-function App() {
-  const [zone, setZone] = useState('public'); // public | restricted | private
+export default function App() {
+  const theme = useTheme();
+  const isMobile = useMediaQuery('(max-width:900px)');
+  const [zone] = useState('public');
+  const [drawerExpanded, setDrawerExpanded] = useState(true);
   const [currentView, setCurrentView] = useState('Dashboard');
 
+  const mainLeft = isMobile ? 0 : (drawerExpanded ? DRAWER_EXPANDED : DRAWER_COLLAPSED);
+
   return (
     <>
+      <AppHeader
+        zone="private"
+        currentPage={currentView}              // <-- show this in the header
+        leftOffset={mainLeft}                 // <-- keep title clear of the drawer
+      />
+
+      <MenuDrawerPrivate
+        onSelect={(value) => {
+          // normalize any custom route keys
+          setCurrentView(value);
+        }}
+        onExpandedChange={(expanded) => setDrawerExpanded(expanded)}
+      />
+
       <Box
+        component="main"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          minHeight: '100vh', // full height of the viewport
+          ml: { xs: 0, md: `${mainLeft}px` },
+          mt: `${APPBAR_HEIGHT}px`,
+          p: 2,
+          transition: theme.transitions.create('margin-left', {
+            duration: theme.transitions.duration.standard,
+            easing: theme.transitions.easing.sharp,
+          }),
         }}
       >
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
 
-        <AppHeader zone={zone} onSelectMenuItem={(view) => setCurrentView(view)} />
-        <Box sx={{ height: 64 }} />
-
-        <Box component="main" sx={{ flex: 1, p: 2 }}>
-          <Routes>
-            <Route path="/login" element={<LoginPage />} />
-
-            <Route
-              path="/"
-              element={
-                <PrivateRoute>
-                  {zone === 'private' && <Clients />}
-                  {zone === 'restricted' && <Clients />}
-
-                  {zone === 'public' && currentView === 'Dashboard' && <Dashboard />}
-
-                 {zone === 'public' && currentView === 'UserManagement' && <UserManagement />}
-                </PrivateRoute>
-              }
-            />
-          </Routes>
-        </Box>
-
-        <Box sx={{ height: 64 }} />
-        <Footer zone={zone} />
+          <Route
+            path="/"
+            element={
+              <PrivateRoute>
+                {zone === 'public' && currentView === 'Dashboard' && <Dashboard />}
+                {zone === 'public' && currentView === '/Users/UserManagement' && <UserManagement />}
+                {zone === 'public' && currentView === '/ProductsManagement/CatalogManagement/ProductCollections' && <FurnitureVariantManagement />}
+              </PrivateRoute>
+            }
+          />
+        </Routes>
       </Box>
 
+      <Box sx={{ height: 64 }} />
+      <Footer zone={zone} />
     </>
-  )
-}
-
-export default App
+  );
+}

src/api/furnitureVariantApi.js

@@ -0,0 +1,55 @@
+export default class FurnitureVariantApi {
+  constructor(token) {
+    this.baseUrl = 'https://inventory-bff.dream-views.com/api/v1/FurnitureVariant';
+    this.token = token; 
+  }
+
+  headers(json = true) {
+    return {
+      accept: 'application/json',
+      ...(json ? { 'Content-Type': 'application/json' } : {}),
+      ...(this.token ? { Authorization: `Bearer ${this.token}` } : {}),
+    };
+  }
+
+  async getAllVariants() {
+    const res = await fetch(`${this.baseUrl}/GetAll`, {
+      method: 'GET',
+      headers: this.headers(false),
+    });
+    if (!res.ok) throw new Error(`GetAll error ${res.status}: ${await res.text()}`);
+    return res.json();
+  }
+
+  // Assuming similar endpoints; adjust names if backend differs.
+  async createVariant(payload) {
+    const res = await fetch(`${this.baseUrl}/Create`, {
+      method: 'POST',
+      headers: this.headers(),
+      body: JSON.stringify(payload),
+    });
+    if (!res.ok) throw new Error(`Create error ${res.status}: ${await res.text()}`);
+    return res.json();
+  }
+
+  async updateVariant(payload) {
+    const res = await fetch(`${this.baseUrl}/Update`, {
+      method: 'PUT',
+      headers: this.headers(),
+      body: JSON.stringify(payload),
+    });
+    if (!res.ok) throw new Error(`Update error ${res.status}: ${await res.text()}`);
+    return res.json();
+  }
+
+  async deleteVariant(payload) {
+    // If your API is soft-delete via Update status, reuse updateVariant.
+    const res = await fetch(`${this.baseUrl}/Delete`, {
+      method: 'DELETE',
+      headers: this.headers(),
+      body: JSON.stringify(payload),
+    });
+    if (!res.ok) throw new Error(`Delete error ${res.status}: ${await res.text()}`);
+    return res.json();
+  }
+}

src/api/userApi.js

@@ -0,0 +1,70 @@
+export default class UserApi {
+  constructor(token) {
+    this.baseUrl = 'https://thalos-bff.dream-views.com/api/v1/User';
+    this.token = token;
+  }
+
+  // helper for headers
+  getHeaders() {
+    return {
+      'accept': 'application/json',
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${this.token}`,
+    };
+  }
+
+  // === GET all users ===
+  async getAllUsers() {
+    try {
+      const response = await fetch(`${this.baseUrl}/GetAll`, {
+        method: 'GET',
+        headers: this.getHeaders(),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch users: ${response.status}`);
+      }
+
+      return await response.json();
+    } catch (err) {
+      console.error('Error fetching users:', err);
+      throw err;
+    }
+  }
+
+  // === CREATE a user ===
+  async createUser(userData) {
+    try {
+      const response = await fetch(`${this.baseUrl}/Create`, {
+        method: 'POST',
+        headers: this.getHeaders(),
+        body: JSON.stringify(userData),
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to create user: ${response.status}`);
+      }
+      return await response.json();
+    } catch (err) {
+      console.error('Error creating user:', err);
+      throw err;
+    }
+  }
+
+  // === UPDATE a user ===
+  async updateUser(userData) {
+    try {
+      const response = await fetch(`${this.baseUrl}/Update`, {
+        method: 'PUT',
+        headers: this.getHeaders(),
+        body: JSON.stringify(userData),
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to update user: ${response.status}`);
+      }
+      return await response.json();
+    } catch (err) {
+      console.error('Error updating user:', err);
+      throw err;
+    }
+  }
+}

src/components/AppHeader.jsx

@@ -1,64 +1,45 @@
-import { useState } from 'react';
-import { AppBar, Toolbar, Typography, IconButton, Box, Avatar } from '@mui/material';
-
-import MenuDrawer from './MenuDrawer';
-import MenuDrawerPrivate from './MenuDrawerPrivate';
 import { useAuth } from '../context/AuthContext';
-import { useNavigate } from 'react-router-dom';
+import { AppBar, Toolbar, Typography, IconButton, Box, Avatar, useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { OPEN_WIDTH, MINI_WIDTH } from './MenuDrawerPrivate';
 
-export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
 
-  const bgColor = {
-    public: 'white',
-    restricted: 'white',
-    private: 'white',
-  };
-
-  const [drawerExpanded, setDrawerExpanded] = useState(true);
-  const [currentPage, setCurrentPage] = useState('Dashboard');
+export default function AppHeader({ drawerExpanded = true, currentPage = 'Dashboard' }) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery('(max-width:900px)');
   const { user } = useAuth();
 
-  const isPrivate = zone === 'private';
-  const isRestricted = zone === 'restricted';
-  const isPublic = zone === 'public';
 
-  const navigate = useNavigate();
-
-  const handleMenuSelect = (page) => {
-    setCurrentPage(page);
-    onSelectMenuItem?.(page);
-  };
+  const leftOffset = isMobile ? 0 : (drawerExpanded ? OPEN_WIDTH : MINI_WIDTH);
 
   return (
-    <AppBar position="fixed"
+    <AppBar
+      position="fixed"
       sx={{
-        textAlign: 'center',
-        backgroundColor: bgColor[zone],
-        fontSize: { xs: '0.75rem', md: '1rem' },
+        background: 'white',
+        color: '#40120E',
         boxShadow: '0px 2px 4px rgba(0,0,0,0.1)',
-        border: 'none',
-        width: '100%',
-        left: 0,
-        right: 0,
-      }} >
-      <Toolbar disableGutters sx={{ justifyContent: 'flex-start', alignItems: 'center', flexWrap: 'nowrap', pl: 0, pr: 0, minHeight: 64, width: '100%', '&.MuiToolbar-gutters': { pl: 0, pr: 0 }, position: 'relative', }}>
+      }}
+    >
+      <Toolbar sx={{ minHeight: 64 }}>
         <Box
           sx={{
+            ml: `${leftOffset}px`,
+            transition: theme.transitions.create('margin-left', {
+              duration: theme.transitions.duration.standard,
+              easing: theme.transitions.easing.sharp,
+            }),
             display: 'flex',
             alignItems: 'center',
-            ml: `${drawerExpanded ? '300px' : '72px'}`,
+            flexGrow: 1,
           }}
         >
-          <Typography
-            variant="h6"
-            noWrap
-            sx={{ color: '#40120EFF', fontWeight: 'light', fontSize: '30px' }}
-          >
+          <Typography variant="h6" sx={{ fontWeight: 600 }}>
             {currentPage}
           </Typography>
         </Box>
 
-        <Box
+                <Box
           sx={{
             position: 'absolute',
             right: 20,
@@ -87,12 +68,6 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
           )}
         </Box>
 
-        <MenuDrawerPrivate
-          zone="private"
-          onSelect={handleMenuSelect}
-          onExpandedChange={(expanded) => setDrawerExpanded(expanded)}
-        />
-
       </Toolbar>
     </AppBar>
   );

src/components/MenuDrawerPrivate.jsx

@@ -14,8 +14,8 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 
-const OPEN_WIDTH = 400;
-const MINI_WIDTH = 72;
+export const OPEN_WIDTH = 450;
+export const MINI_WIDTH = 72;
 
 const menuData = [
     {
@@ -37,13 +37,15 @@ const menuData = [
                     {
                         title: 'Category Dictionary',
                         children: [
-                            { title: 'Categories' },
-                            { title: 'Products' },
-                            { title: 'All Assets Library' },
-                            { title: 'Media Management' },
-                            { title: 'Product Collections' },
+                            { title: 'Categories' }
                         ]
-                    }
+                    },
+                    { title: 'Products',
+                    children: [
+                        { title: 'AR  Assets Library Management' },
+                        { title: 'Media Management' },
+                    ] },
+                    { title: 'Product Collections' },
                 ]
             }
         ]
@@ -52,13 +54,17 @@ const menuData = [
         title: 'Customers',
         icon: <PeopleAltIcon />,
         children: [
-            { title: 'CRM' },
-            { title: 'Customer List' },
-            {
-                title: 'Projects',
+            { title: 'CRM',
                 children: [
+                     { title: 'Customer List' },
+                      { title: 'Projects' },
                     { title: 'Customer Collections' },
-                    { title: 'Sales' },
+                ]
+             },
+           
+            {
+                title: 'Sales',
+                children: [
                     { title: 'Quotes' },
                     { title: 'Orders' },
                 ]
@@ -80,9 +86,12 @@ const menuData = [
         icon: <AdminPanelSettingsIcon />,
         children: [
             { title: 'Users Management' },
-            { title: 'Access Control' },
-            { title: 'Roles' },
-            { title: 'Permissions' },
+            { title: 'Access Control',
+                children: [
+                    { title: 'Roles' },
+                    { title: 'Permissions' },
+                ]
+             },
         ]
     },
     {
@@ -145,7 +154,9 @@ export default function MenuDrawerPrivate({
                                 handleToggleNode(key);
                             } else {
                                 if (node.title === 'Users Management') {
-                                    onSelect?.('UserManagement');
+                                    onSelect?.('/Users/UserManagement');
+                                } else if (node.title === 'Product Collections') {
+                                    onSelect?.('/ProductsManagement/CatalogManagement/ProductCollections');
                                 } else {
                                     onSelect?.(node.title);
                                 }

src/private/LoginPage.jsx

@@ -13,7 +13,7 @@ export default function LoginPage() {
     const navigate = useNavigate();
 
     return (
-        <Box display="flex" justifyContent="center" alignItems="center" Height="100vh">
+        <Box display="flex" justifyContent="center" alignItems="center" height="100vh">
             <Paper sx={{ p: 4, borderRadius: 2, boxShadow: 3, textAlign: 'center' }}>
                 <Typography variant="h5" mb={2}>Login to Dream Views</Typography>
 

src/private/fornitures/AddOrEditFurnitureVariantForm.jsx

@@ -0,0 +1,216 @@
+// src/private/furniture/AddOrEditFurnitureVariantForm.jsx
+import { useEffect, useMemo, useState } from 'react';
+import { Box, Button, TextField, MenuItem, Grid } from '@mui/material';
+import FurnitureVariantApi from '../../api/furnitureVariantApi';
+import { useAuth } from '../../context/AuthContext';
+
+const DEFAULT_MODEL_ID = '8a23117b-acaf-4d87-b64f-a98e9b414796';
+
+export default function AddOrEditFurnitureVariantForm({ initialData, onAdd, onCancel }) {
+  const { user } = useAuth();
+  const token = user?.thalosToken || localStorage.getItem('thalosToken');
+  const api = useMemo(() => (new FurnitureVariantApi(token)), [token]);
+
+  const [form, setForm] = useState({
+    _Id: '',
+    id: '',
+    modelId: '',
+    name: '',
+    color: '',
+    line: '',
+    stock: 0,
+    price: 0,
+    currency: 'USD',
+    categoryId: '',
+    providerId: '',
+    attributes: { material: '', legs: '', origin: '' },
+    status: 'Active',
+  });
+
+  useEffect(() => {
+    if (initialData) {
+      setForm({
+        _Id: initialData._id || initialData._Id || '',
+        id: initialData.id || initialData.Id || initialData._id || initialData._Id || '',
+        modelId: initialData.modelId ?? '',
+        name: initialData.name ?? '',
+        color: initialData.color ?? '',
+        line: initialData.line ?? '',
+        stock: initialData.stock ?? 0,
+        price: initialData.price ?? 0,
+        currency: initialData.currency ?? 'USD',
+        categoryId: initialData.categoryId ?? '',
+        providerId: initialData.providerId ?? '',
+        attributes: {
+          material: initialData?.attributes?.material ?? '',
+          legs: initialData?.attributes?.legs ?? '',
+          origin: initialData?.attributes?.origin ?? '',
+        },
+        status: initialData.status ?? 'Active',
+      });
+    } else {
+      setForm({
+        _Id: '',
+        id: '',
+        modelId: DEFAULT_MODEL_ID,
+        name: '',
+        color: '',
+        line: '',
+        stock: 0,
+        price: 0,
+        currency: 'USD',
+        categoryId: '',
+        providerId: '',
+        attributes: { material: '', legs: '', origin: '' },
+        status: 'Active',
+      });
+    }
+  }, [initialData]);
+
+  const setVal = (name, value) => setForm((p) => ({ ...p, [name]: value }));
+  const setAttr = (name, value) => setForm((p) => ({ ...p, attributes: { ...p.attributes, [name]: value } }));
+
+  const handleSubmit = async () => {
+    try {
+      if (form._Id) {
+        // UPDATE
+        const payload = {
+          Id: form.id || form._Id, // backend requires Id
+          _Id: form._Id,
+          modelId: form.modelId,
+          name: form.name,
+          color: form.color,
+          line: form.line,
+          stock: Number(form.stock) || 0,
+          price: Number(form.price) || 0,
+          currency: form.currency,
+          categoryId: form.categoryId,
+          providerId: form.providerId,
+          attributes: {
+            material: form.attributes.material,
+            legs: form.attributes.legs,
+            origin: form.attributes.origin,
+          },
+          status: form.status,
+        };
+        await api.updateVariant(payload);
+      } else {
+        // CREATE
+        const payload = {
+          modelId: form.modelId,
+          name: form.name,
+          color: form.color,
+          line: form.line,
+          stock: Number(form.stock) || 0,
+          price: Number(form.price) || 0,
+          currency: form.currency,
+          categoryId: form.categoryId,
+          providerId: form.providerId,
+          attributes: {
+            material: form.attributes.material,
+            legs: form.attributes.legs,
+            origin: form.attributes.origin,
+          },
+          status: form.status,
+        };
+        await api.createVariant(payload);
+      }
+      onAdd?.();
+    } catch (err) {
+      console.error('Submit variant failed:', err);
+    }
+  };
+
+  return (
+    <Box sx={{ py: 2 }}>
+      <Grid container spacing={2}>
+        <Grid item xs={12} md={6}>
+          <TextField
+            fullWidth
+            label="Model Id"
+            value={form.modelId}
+            onChange={(e) => setVal('modelId', e.target.value)}
+            disabled={!initialData}
+            helperText={!initialData ? 'Preset for new variant' : ''}
+          />
+        </Grid>
+        {form.id && (
+          <Grid item xs={12} md={6}>
+            <TextField
+              fullWidth
+              label="Id"
+              value={form.id}
+              disabled
+              helperText="Record identifier (read-only)"
+            />
+          </Grid>
+        )}
+        {form._Id && (
+          <Grid item xs={12} md={6}>
+            <TextField
+              fullWidth
+              label="_Id"
+              value={form._Id}
+              disabled
+              helperText="Mongo identifier (read-only)"
+            />
+          </Grid>
+        )}
+        <Grid item xs={12} md={6}>
+          <TextField fullWidth label="Name" value={form.name} onChange={(e) => setVal('name', e.target.value)} />
+        </Grid>
+
+        <Grid item xs={12} md={4}>
+          <TextField fullWidth label="Color" value={form.color} onChange={(e) => setVal('color', e.target.value)} />
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <TextField fullWidth label="Line" value={form.line} onChange={(e) => setVal('line', e.target.value)} />
+        </Grid>
+        <Grid item xs={12} md={2}>
+          <TextField fullWidth type="number" label="Stock" value={form.stock} onChange={(e) => setVal('stock', e.target.value)} />
+        </Grid>
+        <Grid item xs={12} md={2}>
+          <TextField fullWidth type="number" label="Price" value={form.price} onChange={(e) => setVal('price', e.target.value)} />
+        </Grid>
+
+        <Grid item xs={12} md={3}>
+          <TextField fullWidth label="Currency" value={form.currency} onChange={(e) => setVal('currency', e.target.value)} />
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <TextField fullWidth label="Category Id" value={form.categoryId} onChange={(e) => setVal('categoryId', e.target.value)} />
+        </Grid>
+        <Grid item xs={12} md={5}>
+          <TextField fullWidth label="Provider Id" value={form.providerId} onChange={(e) => setVal('providerId', e.target.value)} />
+        </Grid>
+
+        <Grid item xs={12} md={4}>
+          <TextField fullWidth label="Material" value={form.attributes.material} onChange={(e) => setAttr('material', e.target.value)} />
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <TextField fullWidth label="Legs" value={form.attributes.legs} onChange={(e) => setAttr('legs', e.target.value)} />
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <TextField fullWidth label="Origin" value={form.attributes.origin} onChange={(e) => setAttr('origin', e.target.value)} />
+        </Grid>
+
+        <Grid item xs={12} md={4}>
+          <TextField
+            fullWidth
+            select
+            label="Status"
+            value={form.status}
+            onChange={(e) => setVal('status', e.target.value)}
+          >
+            <MenuItem value="Active">Active</MenuItem>
+            <MenuItem value="Inactive">Inactive</MenuItem>
+          </TextField>
+        </Grid>
+      </Grid>
+
+      <Box display="flex" justifyContent="flex-end" mt={3} gap={1}>
+        <Button onClick={onCancel} className="button-transparent">Cancel</Button>
+        <Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
+      </Box>
+    </Box>
+  );
+}

src/private/fornitures/FurnitureVariantManagement.jsx

@@ -0,0 +1,256 @@
+import SectionContainer from '../../components/SectionContainer';
+import { useEffect, useRef, useState } from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import {
+  Typography, Button, Dialog, DialogTitle, DialogContent,
+  IconButton, Box
+} from '@mui/material';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
+import AddOrEditFurnitureVariantForm from './AddOrEditFurnitureVariantForm';
+import FurnitureVariantApi from '../../api/furnitureVariantApi';
+import { useAuth } from '../../context/AuthContext';
+import useApiToast from '../../hooks/useApiToast';
+
+const columnsBase = [
+  { field: 'modelId', headerName: 'Model Id', width: 260 },
+  { field: 'name', headerName: 'Name', width: 220 },
+  { field: 'color', headerName: 'Color', width: 160 },
+  { field: 'line', headerName: 'Line', width: 160 },
+  { field: 'stock', headerName: 'Stock', width: 100, type: 'number' },
+  { field: 'price', headerName: 'Price', width: 120, type: 'number',
+    valueFormatter: (p) => p?.value != null ? Number(p.value).toFixed(2) : '—'
+  },
+  { field: 'currency', headerName: 'Currency', width: 120 },
+  { field: 'categoryId', headerName: 'Category Id', width: 280 },
+  { field: 'providerId', headerName: 'Provider Id', width: 280 },
+  {
+    field: 'attributes.material',
+    headerName: 'Material',
+    width: 160,
+    valueGetter: (p) => p?.row?.attributes?.material ?? '—'
+  },
+  {
+    field: 'attributes.legs',
+    headerName: 'Legs',
+    width: 160,
+    valueGetter: (p) => p?.row?.attributes?.legs ?? '—'
+  },
+  {
+    field: 'attributes.origin',
+    headerName: 'Origin',
+    width: 160,
+    valueGetter: (p) => p?.row?.attributes?.origin ?? '—'
+  },
+  { field: 'status', headerName: 'Status', width: 120 },
+  {
+    field: 'createdAt',
+    headerName: 'Created At',
+    width: 180,
+    valueFormatter: (p) => p?.value ? new Date(p.value).toLocaleString() : '—'
+  },
+  { field: 'createdBy', headerName: 'Created By', width: 160, valueGetter: (p) => p?.row?.createdBy ?? '—' },
+  {
+    field: 'updatedAt',
+    headerName: 'Updated At',
+    width: 180,
+    valueFormatter: (p) => p?.value ? new Date(p.value).toLocaleString() : '—'
+  },
+  { field: 'updatedBy', headerName: 'Updated By', width: 160, valueGetter: (p) => p?.row?.updatedBy ?? '—' },
+];
+
+export default function FurnitureVariantManagement() {
+  const { user } = useAuth();
+  const token = user?.thalosToken || localStorage.getItem('thalosToken');
+  const apiRef = useRef(null);
+
+  const [rows, setRows] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [editingData, setEditingData] = useState(null);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [rowToDelete, setRowToDelete] = useState(null);
+  const { handleError } = useApiToast();
+  const hasLoaded = useRef(false);
+
+  useEffect(() => {
+    apiRef.current = new FurnitureVariantApi(token);
+  }, [token]);
+
+  useEffect(() => {
+    if (!hasLoaded.current) {
+      loadData();
+      hasLoaded.current = true;
+    }
+  }, []);
+
+  const loadData = async () => {
+    try {
+      const data = await apiRef.current.getAllVariants();
+      setRows(Array.isArray(data) ? data : []);
+    } catch (err) {
+      console.error('Error loading variants:', err);
+      handleError(err, 'Failed to load furniture variants');
+      setRows([]);
+    }
+  };
+
+  const handleEditClick = (params) => {
+    if (!params?.row) return;
+    const r = params.row;
+    const normalized = {
+      _id: r._id || r._Id || '',
+      _Id: r._id || r._Id || '',
+      id: r.id || r.Id || '',
+      modelId: r.modelId ?? '',
+      name: r.name ?? '',
+      color: r.color ?? '',
+      line: r.line ?? '',
+      stock: r.stock ?? 0,
+      price: r.price ?? 0,
+      currency: r.currency ?? 'USD',
+      categoryId: r.categoryId ?? '',
+      providerId: r.providerId ?? '',
+      attributes: {
+        material: r?.attributes?.material ?? '',
+        legs: r?.attributes?.legs ?? '',
+        origin: r?.attributes?.origin ?? '',
+      },
+      status: r.status ?? 'Active',
+    };
+    setEditingData(normalized);
+    setOpen(true);
+  };
+
+  const handleDeleteClick = (row) => {
+    setRowToDelete(row);
+    setConfirmOpen(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    try {
+      if (!apiRef.current || !(rowToDelete?._id || rowToDelete?._Id)) throw new Error('Missing API or id');
+      // If your inventory BFF uses soft delete via Update (status=Inactive), do this:
+      const payload = {
+        id: rowToDelete.id || rowToDelete.Id || '',
+        _Id: rowToDelete._id || rowToDelete._Id,
+        modelId: rowToDelete.modelId,
+        name: rowToDelete.name,
+        color: rowToDelete.color,
+        line: rowToDelete.line,
+        stock: rowToDelete.stock,
+        price: rowToDelete.price,
+        currency: rowToDelete.currency,
+        categoryId: rowToDelete.categoryId,
+        providerId: rowToDelete.providerId,
+        attributes: {
+          material: rowToDelete?.attributes?.material ?? '',
+          legs: rowToDelete?.attributes?.legs ?? '',
+          origin: rowToDelete?.attributes?.origin ?? '',
+        },
+        status: 'Inactive',
+      };
+      // Prefer update soft-delete; if you truly have DELETE, switch to apiRef.current.deleteVariant({ _Id: ... })
+      await apiRef.current.updateVariant(payload);
+      await loadData();
+    } catch (e) {
+      console.error('Delete failed:', e);
+    } finally {
+      setConfirmOpen(false);
+      setRowToDelete(null);
+    }
+  };
+
+  const columns = [
+    {
+      field: 'actions',
+      headerName: '',
+      width: 130,
+      renderCell: (params) => (
+        <Box display="flex" alignItems="center" justifyContent="flex-start" height="100%" gap={1}>
+          <IconButton
+            size="small"
+            sx={{
+              backgroundColor: '#DFCCBC',
+              color: '#26201A',
+              '&:hover': { backgroundColor: '#C2B2A4' },
+              borderRadius: 2,
+              p: 1,
+            }}
+            onClick={() => handleEditClick(params)}
+          >
+            <EditRoundedIcon fontSize="small" />
+          </IconButton>
+          <IconButton
+            size="small"
+            sx={{
+              backgroundColor: '#FBE9E7',
+              color: '#C62828',
+              '&:hover': { backgroundColor: '#EF9A9A' },
+              borderRadius: 2,
+              p: 1,
+            }}
+            onClick={() => handleDeleteClick(params?.row)}
+          >
+            <DeleteRoundedIcon fontSize="small" />
+          </IconButton>
+        </Box>
+      )
+    },
+    ...columnsBase,
+  ];
+
+  return (
+    <SectionContainer sx={{ width: '100%' }}>
+      <Dialog open={open} onClose={() => { setOpen(false); setEditingData(null); }} maxWidth="md" fullWidth>
+        <DialogTitle>{editingData ? 'Edit Furniture Variant' : 'Add Furniture Variant'}</DialogTitle>
+        <DialogContent>
+          <AddOrEditFurnitureVariantForm
+            initialData={editingData}
+            onCancel={() => { setOpen(false); setEditingData(null); }}
+            onAdd={async () => {
+              await loadData();
+              setOpen(false);
+              setEditingData(null);
+            }}
+          />
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
+        <DialogTitle>Confirm Delete</DialogTitle>
+        <DialogContent>
+          <Typography>
+            Are you sure you want to delete <strong>{rowToDelete?.name}</strong>?
+          </Typography>
+          <Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
+            <Button onClick={() => setConfirmOpen(false)} className="button-transparent">Cancel</Button>
+            <Button variant="contained" onClick={handleConfirmDelete} className="button-gold">Delete</Button>
+          </Box>
+        </DialogContent>
+      </Dialog>
+
+      <Box mt={2} sx={{ width: '100%', overflowX: 'auto' }}>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          pageSize={5}
+          rowsPerPageOptions={[5]}
+          getRowSpacing={() => ({ top: 4, bottom: 4 })}
+          getRowId={(row) => row._id || row.id || row.modelId}
+          autoHeight
+          disableColumnMenu
+          getRowHeight={() => 'auto'}
+          sx={{
+            '& .MuiDataGrid-cell': { display: 'flex', alignItems: 'center' },
+            '& .MuiDataGrid-columnHeader': { display: 'flex', alignItems: 'center' },
+          }}
+        />
+        <Box display="flex" justifyContent="flex-end" mt={2}>
+          <Button variant="contained" className="button-gold" onClick={() => setOpen(true)}>
+            Add Variant
+          </Button>
+        </Box>
+      </Box>
+    </SectionContainer>
+  );
+}

src/private/users/AddOrEditUserForm.jsx

@@ -1,103 +1,164 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { Box, Button, TextField, MenuItem } from '@mui/material';
-import { createExternalData, updateExternalData } from '../../api/mongo/actions';
+import UserApi from '../../api/userApi';
+import { useAuth } from '../../context/AuthContext';
 
 export default function AddOrEditUserForm({ onAdd, initialData, onCancel }) {
-    const [formData, setFormData] = useState({
-        username: '',
-        fullName: '',
+  const { user } = useAuth();
+  const thalosToken = user?.thalosToken || localStorage.getItem('thalosToken');
+  const api = useMemo(() => (thalosToken ? new UserApi(thalosToken) : null), [thalosToken]);
+
+  const [formData, setFormData] = useState({
+    _Id: '',
+    email: '',
+    name: '',
+    middleName: '',
+    lastName: '',
+    tenantId: '',
+    roleId: '',
+    status: 'Active',
+    sendInvitation: true,
+  });
+
+  useEffect(() => {
+    if (initialData) {
+      setFormData({
+        _Id: initialData._id || initialData._Id || '',
+        email: initialData.email ?? '',
+        name: initialData.name ?? '',
+        middleName: initialData.middleName ?? '',
+        lastName: initialData.lastName ?? '',
+        tenantId: initialData.tenantId ?? '',
+        roleId: initialData.roleId ?? '',
+        status: initialData.status ?? 'Active',
+        sendInvitation: true,
+      });
+    } else {
+      setFormData({
+        _Id: '',
         email: '',
-        role: 'User',
-        status: 'Active'
-    });
+        name: '',
+        middleName: '',
+        lastName: '',
+        tenantId: '6894f9ddfb7072bdfc881613',
+        roleId: '68407642ec46a0e6fe1e8ec9',
+        status: 'Active',
+        sendInvitation: true,
+      });
+    }
+  }, [initialData]);
 
-    useEffect(() => {
-        if (initialData) {
-            setFormData({ ...initialData });
-        } else {
-            setFormData({
-                username: '',
-                fullName: '',
-                email: '',
-                role: 'User',
-                status: 'Active'
-            });
-        }
-    }, [initialData]);
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+      setFormData(prev => ({ ...prev, [name]: value }));
+  };
 
-    const handleChange = (e) => {
-        const { name, value } = e.target;
-        setFormData(prev => ({ ...prev, [name]: value }));
-    };
+  const handleSubmit = async () => {
+    try {
+      if (!api) throw new Error('Missing Thalos token');
 
-    const handleSubmit = async () => {
-        try {
-            if (initialData) {
-                await updateExternalData(formData);
-            } else {
-                await createExternalData(formData);
-            }
-            if (onAdd) onAdd();
-        } catch (error) {
-            console.error('Error submitting form:', error);
-        }
-    };
+      if (initialData) {
+        // UPDATE (PUT /User/Update) — API requires _Id, remove Id, displayName, tenantId
+        const payload = {
+          _Id: formData._Id,
+          email: formData.email,
+          name: formData.name,
+          middleName: formData.middleName,
+          lastName: formData.lastName,
+          tenantId: formData.tenantId,
+          roleId: formData.roleId,
+          status: formData.status || 'Active',
+        };
+        await api.updateUser(payload);
+      } else {
+        // CREATE (POST /User/Create)
+        const payload = {
+          email: formData.email,
+          name: formData.name,
+          middleName: formData.middleName,
+          lastName: formData.lastName,
+          roleId: formData.roleId,
+          tenantId: formData.tenantId,
+          sendInvitation: !!formData.sendInvitation,
+        };
+        await api.createUser(payload);
+      }
 
-    return (
-        <Box sx={{ py: 2 }}>
-            <TextField
-                fullWidth
-                label="Username"
-                name="username"
-                value={formData.username}
-                onChange={handleChange}
-                margin="normal"
-            />
-            <TextField
-                fullWidth
-                label="Full Name"
-                name="fullName"
-                value={formData.fullName}
-                onChange={handleChange}
-                margin="normal"
-            />
-            <TextField
-                fullWidth
-                label="Email"
-                name="email"
-                value={formData.email}
-                onChange={handleChange}
-                margin="normal"
-            />
-            <TextField
-                fullWidth
-                select
-                label="Role"
-                name="role"
-                value={formData.role}
-                onChange={handleChange}
-                margin="normal"
-            >
-                <MenuItem value="Admin">Admin</MenuItem>
-                <MenuItem value="User">User</MenuItem>
-                <MenuItem value="Manager">Manager</MenuItem>
-            </TextField>
-            <TextField
-                fullWidth
-                select
-                label="Status"
-                name="status"
-                value={formData.status}
-                onChange={handleChange}
-                margin="normal"
-            >
-                <MenuItem value="Active">Active</MenuItem>
-                <MenuItem value="Inactive">Inactive</MenuItem>
-            </TextField>
-            <Box display="flex" justifyContent="flex-end" mt={3} gap={1}>
-                <Button onClick={onCancel} className="button-transparent">Cancel</Button>
-                <Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
-            </Box>
-        </Box>
-    );
+      onAdd?.();
+    } catch (error) {
+      console.error('Error submitting form:', error);
+    }
+  };
+
+  return (
+    <Box sx={{ py: 2 }}>
+      <TextField
+        fullWidth
+        label="Email"
+        name="email"
+        value={formData.email}
+        onChange={handleChange}
+        margin="normal"
+      />
+      <TextField
+        fullWidth 
+        label="Name"
+        name="name"
+        value={formData.name}
+        onChange={handleChange}
+        margin="normal"
+      />
+      <TextField
+        fullWidth
+        label="Middle Name"
+        name="middleName"
+        value={formData.middleName}
+        onChange={handleChange}
+        margin="normal"
+      />
+      <TextField
+        fullWidth
+        label="Last Name"
+        name="lastName"
+        value={formData.lastName}
+        onChange={handleChange}
+        margin="normal"
+      />
+      <TextField
+        fullWidth
+        label="Tenant Id"
+        name="tenantId"
+        value={formData.tenantId}
+        onChange={handleChange}
+        margin="normal"
+        disabled={!initialData}
+      />
+      <TextField
+        fullWidth
+        label="Role Id"
+        name="roleId"
+        value={formData.roleId}
+        onChange={handleChange}
+        margin="normal"
+        disabled={!initialData}
+      />
+      <TextField
+        fullWidth
+        select
+        label="Status"
+        name="status"
+        value={formData.status}
+        onChange={handleChange}
+        margin="normal"
+      >
+        <MenuItem value="Active">Active</MenuItem>
+        <MenuItem value="Inactive">Inactive</MenuItem>
+      </TextField>
+
+      <Box display="flex" justifyContent="flex-end" mt={3} gap={1}>
+        <Button onClick={onCancel} className="button-transparent">Cancel</Button>
+        <Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
+      </Box>
+    </Box>
+  );
 }

src/private/users/UserManagement.jsx

@@ -5,38 +5,65 @@ import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
 import AddOrEditUserForm from './AddOrEditUserForm';
-import { getExternalData, deleteExternalData } from '../../api/mongo/actions';
+import UserApi from '../../api/userApi';
+import { useAuth } from '../../context/AuthContext';
 import useApiToast from '../../hooks/useApiToast';
+import '../../App.css';
 
 const columnsBase = [
-    { field: 'username', headerName: 'Username', flex: 1 },
-    { field: 'fullName', headerName: 'Full Name', flex: 2 },
-    { field: 'email', headerName: 'Email', flex: 2 },
-    { field: 'role', headerName: 'Role', flex: 1 },
+    { field: 'email', headerName: 'Email', width: 260 },
+    { field: 'name', headerName: 'Name', width: 140 },
+    { field: 'middleName', headerName: 'Middle Name', width: 140 },
+    { field: 'lastName', headerName: 'Last Name', width: 160 },
+    { field: 'displayName', headerName: 'Display Name', width: 180, valueGetter: (params) => params?.row?.displayName ?? '—' },
+    { field: 'tenantId', headerName: 'Tenant Id', width: 240, valueGetter: (params) => params?.row?.tenantId ?? '—' },
+    { field: 'roleId', headerName: 'Role Id', width: 240, valueGetter: (params) => params?.row?.roleId ?? '—' },
+    {
+        field: 'lastLogIn',
+        headerName: 'Last Login',
+        width: 180,
+        valueFormatter: (params) => {
+            const date = params?.value;
+            return date ? new Date(date).toLocaleString() : '—';
+        }
+    },
+    {
+        field: 'lastLogOut',
+        headerName: 'Last Logout',
+        width: 180,
+        valueFormatter: (params) => {
+            const date = params?.value;
+            return date ? new Date(date).toLocaleString() : '—';
+        }
+    },
     { field: 'status', headerName: 'Status', width: 120 },
     {
         field: 'createdAt',
         headerName: 'Created At',
-        width: 160,
+        width: 180,
         valueFormatter: (params) => {
             const date = params?.value;
             return date ? new Date(date).toLocaleString() : '—';
         }
     },
-    { field: 'createdBy', headerName: 'Created By', flex: 1 },
+    { field: 'createdBy', headerName: 'Created By', width: 160, valueGetter: (p) => p?.row?.createdBy ?? '—' },
     {
         field: 'updatedAt',
         headerName: 'Updated At',
-        width: 160,
+        width: 180,
         valueFormatter: (params) => {
             const date = params?.value;
             return date ? new Date(date).toLocaleString() : '—';
         }
     },
-    { field: 'updatedBy', headerName: 'Updated By', flex: 1 },
+    { field: 'updatedBy', headerName: 'Updated By', width: 160, valueGetter: (p) => p?.row?.updatedBy ?? '—' },
 ];
 
 export default function UserManagement() {
+    const { user } = useAuth();
+    const thalosToken = user?.thalosToken || localStorage.getItem('thalosToken');
+    const apiRef = useRef(null);
+
     const [rows, setRows] = useState([]);
     const [open, setOpen] = useState(false);
     const [editingData, setEditingData] = useState(null);
@@ -46,6 +73,12 @@ export default function UserManagement() {
 
     const hasLoaded = useRef(false);
 
+    useEffect(() => {
+        if (thalosToken) {
+            apiRef.current = new UserApi(thalosToken);
+        }
+    }, [thalosToken]);
+
     useEffect(() => {
         if (!hasLoaded.current) {
             loadData();
@@ -54,18 +87,48 @@ export default function UserManagement() {
     }, []);
 
     const handleEditClick = (params) => {
-        setEditingData(params.row);
+        if (!params || !params.row) return;
+        const r = params.row;
+        const normalized = {
+            _id: r._id || r._Id || '',
+            id: r.id || r.Id || '',
+            email: r.email ?? '',
+            name: r.name ?? '',
+            middleName: r.middleName ?? '',
+            lastName: r.lastName ?? '',
+            displayName: r.displayName ?? '',
+            tenantId: r.tenantId ?? '',
+            roleId: r.roleId ?? '',
+            status: r.status ?? 'Active',
+            companies: Array.isArray(r.companies) ? r.companies : [],
+            projects: Array.isArray(r.projects) ? r.projects : [],
+          };
+        setEditingData(normalized);
         setOpen(true);
     };
 
     const handleDeleteClick = (row) => {
+        if (!row) return;
         setRowToDelete(row);
         setConfirmOpen(true);
     };
 
     const handleConfirmDelete = async () => {
         try {
-            await deleteExternalData(rowToDelete._Id);
+            if (!apiRef.current || !rowToDelete?._id) throw new Error('Missing API or user id');
+
+            const payload = {
+                _Id: rowToDelete._id || rowToDelete._Id,
+                email: rowToDelete.email ?? '',
+                name: rowToDelete.name ?? '',
+                middleName: rowToDelete.middleName ?? '',
+                lastName: rowToDelete.lastName ?? '',
+                roleId: '68407642ec46a0e6fe1e8ec9',
+                tenantId: '6894f9ddfb7072bdfc881613',
+                status: 'Inactive',
+            };
+
+            await apiRef.current.updateUser(payload);
             await loadData();
         } catch (error) {
             console.error('Delete failed:', error);
@@ -77,24 +140,24 @@ export default function UserManagement() {
 
     const loadData = async () => {
         try {
-            const data = await getExternalData();
+            if (!apiRef.current) throw new Error('Missing Thalos token or API not initialized');
+            const data = await apiRef.current.getAllUsers();
             const safeData = Array.isArray(data) ? data : [];
             setRows(safeData);
         } catch (error) {
             console.error('Error loading data:', error);
-            handleError(error, 'Failed to load data');
+            handleError(error, 'Failed to load users');
             setRows([]);
         }
     };
 
     const columns = [
-        ...columnsBase,
         {
             field: 'actions',
             headerName: '',
             width: 130,
             renderCell: (params) => (
-                <Box display="flex" alignItems="center" justifyContent="flex-end" height="100%" gap={2}>
+                <Box display="flex" alignItems="center" justifyContent="flex-start" height="100%" gap={1}>
                     <IconButton
                         size="small"
                         sx={{
@@ -117,23 +180,23 @@ export default function UserManagement() {
                             borderRadius: 2,
                             p: 1,
                         }}
-                        onClick={() => handleDeleteClick(params.row)}
+                        onClick={() => handleDeleteClick(params?.row)}
                     >
                         <DeleteRoundedIcon fontSize="small" />
                     </IconButton>
                 </Box>
             )
-        }
+        },
+        ...columnsBase,
     ];
 
     return (
         <SectionContainer sx={{ width: '100%' }}>
-            <Typography variant="h4" gutterBottom color='#26201AFF'>User Management</Typography>
-
             <Dialog open={open} onClose={() => { setOpen(false); setEditingData(null); }} maxWidth="md" fullWidth>
                 <DialogTitle>{editingData ? 'Edit User' : 'Add User'}</DialogTitle>
                 <DialogContent>
                     <AddOrEditUserForm
+                        key={editingData?._id || editingData?.id || (open ? 'editing' : 'new')}
                         onAdd={async () => {
                             await loadData();
                             setOpen(false);
@@ -152,7 +215,7 @@ export default function UserManagement() {
                 <DialogTitle>Confirm Delete</DialogTitle>
                 <DialogContent>
                     <Typography>
-                        Are you sure you want to delete <strong>{rowToDelete?.username}</strong>?
+                        Are you sure you want to delete <strong>{rowToDelete?.email || rowToDelete?.name}</strong>?
                     </Typography>
                     <Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
                         <Button onClick={() => setConfirmOpen(false)} className='button-transparent'>Cancel</Button>
@@ -161,17 +224,33 @@ export default function UserManagement() {
                 </DialogContent>
             </Dialog>
 
-            <Box mt={2}>
-                <DataGrid
-                    rows={rows}
-                    columns={columns}
-                    pageSize={5}
-                    rowsPerPageOptions={[5]}
-                    getRowSpacing={() => ({ top: 4, bottom: 4 })}
-                />
+            <Box mt={2} sx={{ width: '100%', overflowX: 'auto' }}>
+                <Box sx={{ width: '100%', overflowX: 'auto' }}>
+                    <DataGrid
+                        rows={rows}
+                        columns={columns}
+                        pageSize={5}
+                        rowsPerPageOptions={[5]}
+                        getRowSpacing={() => ({ top: 4, bottom: 4 })}
+                        getRowId={(row) => row._id || row.id || row.email}
+                        autoHeight
+                        disableColumnMenu
+                        getRowHeight={() => 'auto'}
+                        sx={{
+                            '& .MuiDataGrid-cell': {
+                                display: 'flex',
+                                alignItems: 'center',
+                            },
+                            '& .MuiDataGrid-columnHeader': {
+                                display: 'flex',
+                                alignItems: 'center',
+                            }
+                        }}
+                    />
+                </Box>
 
                 <Box display="flex" justifyContent="flex-end" mt={2}>
-                    <Button variant="contained" onClick={() => setOpen(true)} className="button-gold">
+                    <Button variant="contained" className="button-gold" onClick={() => setOpen(true)} >
                         Add User
                     </Button>
                 </Box>

src/theme.jsx

@@ -21,7 +21,7 @@ const theme = createTheme({
             backgroundColor: '#f0eae3',
           },
           '&.Mui-selected': {
-            backgroundColor: '#40120EFF',
+            backgroundColor: '#d0b9a8',
             color: '#26201A',
           },
           '&.Mui-selected:hover': {
@@ -31,7 +31,7 @@ const theme = createTheme({
         },
         cell: {
           '&:focus-within': {
-            outline: '2px solid #40120EFF', // custom Fendi focus
+            outline: '2px solid #d0b9a8', // custom Fendi focus
             outlineOffset: '-2px', // tighten the outline
             backgroundColor: '#f5f0eb', // optional subtle highlight
           },