feat: adding the table with products

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>
-          <p>This is a sample box.</p>
-
+          {zone === 'private' && <Admin />}
+          {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>
+    );
+}