feat: adding the table with products

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>
+    );
+}