feat: adding the table with products

package-lock.json

@@ -13,6 +13,7 @@
         "@fontsource/roboto": "^5.2.5",
         "@mui/icons-material": "^7.1.0",
         "@mui/material": "^7.1.0",
+        "@mui/x-data-grid": "^8.5.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0"
       },
@@ -1429,6 +1430,65 @@
         }
       }
     },
+    "node_modules/@mui/x-data-grid": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-8.5.0.tgz",
+      "integrity": "sha512-5rrMm9anFaLk9O5XRIw3J9tAAnaiE1GxFeocyqhDj23RUReMg0YSp3FYnCaFLAehRQVgT9pC4675XO571paxKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.1",
+        "@mui/utils": "^7.0.2",
+        "@mui/x-internals": "8.5.0",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "reselect": "^5.1.1",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-internals": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.5.0.tgz",
+      "integrity": "sha512-Ef4KJij1pBGk6/xILyVZHf76tcuRpJIX30k4Ghklsd5QJujZ9ENCGAjvd7aWRAFAs5p3ffn0H8UDESoIcroj1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.1",
+        "@mui/utils": "^7.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -3785,6 +3845,12 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -4239,6 +4305,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "@fontsource/roboto": "^5.2.5",
     "@mui/icons-material": "^7.1.0",
     "@mui/material": "^7.1.0",
+    "@mui/x-data-grid": "^8.5.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },

src/App.jsx

@@ -1,9 +1,12 @@
 import { useState } from 'react'
 import Background from "./components/Background";
+import VideoBackground from "./components/VimeoEmbed";
 import AppHeader from './components/AppHeader';
 import Footer from './components/Footer';
 import Box from '@mui/material/Box';
 
+import Admin from './private/Admin';
+
 import './App.css'
 
 function App() {
@@ -12,7 +15,8 @@ function App() {
   return (
     <>
 
-      <Background imageName='background.jpg' opacity={0.65} />
+      {/* <Background imageName='background.jpg' opacity={0.65} /> */}
+      <VideoBackground videoId="1066622045" />
 
       <Box
         sx={{
@@ -26,9 +30,9 @@ function App() {
 
         {/* Main content area */}
         <Box component="main" sx={{ flex: 1, p: 2 }}>
-          <h1>Welcome to the Fendi Casa Experience</h1>
+          {zone === 'private' && <Admin />}
-          <p>This is a sample box.</p>
+          {zone === 'restricted' && <Admin />}
-
+          {zone === 'public' && <Admin />}
         </Box>
         <Footer zone={zone} />
       </Box>

src/components/AppHeader.jsx

@@ -67,7 +67,7 @@ export default function AppHeader({ zone = 'public' }) {
         )}
 
         {/* Rendering the Drawer */}
-       <MenuDrawer zone={zone} open={menuOpen} onClose={() => setMenuOpen(false)} />
+       <MenuDrawer zone='private' open={menuOpen} onClose={() => setMenuOpen(false)} />
 
       </Toolbar>
     </AppBar>

src/components/MenuDrawer.jsx

@@ -14,7 +14,7 @@ export default function MenuDrawer({ zone = 'public', open, onClose }) {
     <Drawer anchor="left" open={open} onClose={onClose} slotProps={{
         paper: {
           sx: {
-            backgroundColor: '#000000a0', // negro semitransparente
+            backgroundColor: '#000000a0',
             width: isMobile ? '100vw' : 250,
           },
         },

src/components/SectionContainer.jsx

@@ -0,0 +1,18 @@
+import { Box } from '@mui/material';
+
+export default function SectionContainer({ children, maxWidth = 'lg', sx = {} }) {
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        maxWidth,
+        mx: 'auto',
+        px: { xs: 2, md: 4 },
+        py: { xs: 3, md: 5 },
+        ...sx,
+      }}
+    >
+      {children}
+    </Box>
+  );
+}

src/private/Admin.jsx

@@ -0,0 +1,40 @@
+
+import SectionContainer from '../components/SectionContainer';
+import React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { Typography, InputBase, IconButton, Box } from '@mui/material';
+
+const columns = [
+    { field: 'id', headerName: 'ID', width: 70 },
+    { field: 'company', headerName: 'Company', flex: 1 },
+    { field: 'name', headerName: 'Name', flex: 1 },
+    { field: 'price', headerName: '$', width: 100, type: 'number' },
+    { field: 'provider', headerName: 'Provider', flex: 1 },
+    { field: 'stock', headerName: 'Stock', width: 100, type: 'number' },
+    { field: 'category', headerName: 'Category', flex: 1 }
+];
+
+const rows = [
+    { id: 1, company:'Fendi casa', name: 'Product 1', price: 10.99, provider: 'Provider A', stock: 100, category: 'Home' },
+    { id: 2, company:'Fendi casa', name: 'Product 2', price: 20.00, provider: 'Provider B', stock: 50, category: 'Home' },
+    { id: 3, company:'Fendi casa', name: 'Product 3', price: 5.50, provider: 'Provider C', stock: 200, category: 'Home' },
+    { id: 4, company:'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home' },
+    { id: 5, company:'Fendi casa', name: 'Product 5', price: 8.20, provider: 'Provider E', stock: 75, category: 'Home' }
+];
+
+export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
+    return (
+
+        <SectionContainer sx={{width: '100%' }}>
+            <Typography variant="h6" gutterBottom>
+                Product Catalog
+            </Typography>
+            <DataGrid
+                rows={rows}
+                columns={columns}
+                pageSize={5}
+                rowsPerPageOptions={[5]}
+            />
+        </SectionContainer>
+    );
+}