feat: improve the gridview presentation

src/components/AppHeader.jsx

@@ -7,9 +7,9 @@ import MenuDrawer from './MenuDrawer';
 export default function AppHeader({ zone = 'public' }) {
 
   const bgColor = {
-      public: '#40120EFF',
+    public: '#40120EFF',
-      restricted: '#e0e0ff',
+    restricted: '#e0e0ff',
-      private: '#d0f0e0',
+    private: '#d0f0e0',
   };
 
   const [menuOpen, setMenuOpen] = useState(false);
@@ -20,12 +20,12 @@ export default function AppHeader({ zone = 'public' }) {
 
   return (
     <AppBar position="static"
-       sx={{
+      sx={{
-          textAlign: 'center',
+        textAlign: 'center',
-          bgcolor: bgColor[zone],
+        bgcolor: bgColor[zone],
-          mt: 'auto',
+        mt: 'auto',
-          fontSize: { xs: '0.75rem', md: '1rem' },
+        fontSize: { xs: '0.75rem', md: '1rem' },
-        }} >
+      }} >
       <Toolbar sx={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
         <Box display="flex" alignItems="center">
           <IconButton edge="start" color="inherit" onClick={() => setMenuOpen(true)}>
@@ -64,7 +64,7 @@ export default function AppHeader({ zone = 'public' }) {
         )}
 
         {/* Rendering the Drawer */}
-       <MenuDrawer zone='private' open={menuOpen} onClose={() => setMenuOpen(false)} />
+        <MenuDrawer zone='private' open={menuOpen} onClose={() => setMenuOpen(false)} />
 
       </Toolbar>
     </AppBar>

src/components/Footer.jsx

@@ -22,7 +22,7 @@ export default function Footer({ zone = 'public' }) {
             }}
         >
             <Typography variant="body2">
-                 <img src={fendiLogo} alt="Fendi logo" style={{ height: 10, marginRight:10 }} />
+                <img src={fendiLogo} alt="Fendi logo" style={{ height: 10, marginRight: 10 }} />
                 {zone === 'private'
                     ? `Admin Panel - Fendi ${year}`
                     : `© ${year} Fendi. All rights reserved.`}

src/components/MenuDrawer.jsx

@@ -12,17 +12,17 @@ export default function MenuDrawer({ zone = 'public', open, onClose }) {
 
   return (
     <Drawer anchor="left" open={open} onClose={onClose} slotProps={{
-        paper: {
+      paper: {
-          sx: {
+        sx: {
-            backgroundColor: '#000000a0',
+          backgroundColor: '#000000a0',
-            width: isMobile ? '100vw' : 250,
+          width: isMobile ? '100vw' : 250,
-          },
         },
-      }}>
+      },
-     <List sx={{ width: isMobile ? '100vw' : 250, marginTop: 14 }}>
+    }}>
+      <List sx={{ width: isMobile ? '100vw' : 250, marginTop: 14 }}>
         {items.map((text, index) => (
           <ListItem key={index} onClick={onClose}>
-             <ListItemText
+            <ListItemText
               primary={text}
               slotProps={{
                 primary: {

src/index.css

@@ -18,6 +18,7 @@ a {
   color: #646cff;
   text-decoration: inherit;
 }
+
 a:hover {
   color: #535bf2;
 }
@@ -50,9 +51,11 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
+
 button:hover {
   border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -63,9 +66,11 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
+
   a:hover {
     color: #747bff;
   }
+
   button {
     background-color: #f9f9f9;
   }

src/private/Admin.jsx

@@ -2,43 +2,44 @@
 import SectionContainer from '../components/SectionContainer';
 import React, { useState } from 'react';
 import { DataGrid } from '@mui/x-data-grid';
-import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box, Avatar } from '@mui/material';
+import { Grid, Card, CardMedia, CardContent, Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box, Avatar } from '@mui/material';
 import AddOrEditProductForm from './AddOrEditProductForm.jsx';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
+
 import '../App.css';
-import { Visibility } from '@mui/icons-material';
 
 const columnsBase = [
-    { field: 'id', headerName: 'ID', width: 70, hide: false },
-    { field: 'company', headerName: 'Company', flex: 1 },
-    { field: 'name', headerName: 'Name', flex: 1 },
-    { field: 'price', headerName: '$', width: 120, type: 'number' },
-    { field: 'provider', headerName: 'Provider', flex: 1 },
-    { field: 'stock', headerName: 'Stock', width: 120, type: 'number' },
-    { field: 'category', headerName: 'Category', flex: 1 },
     {
         field: 'representation',
         headerName: 'Representation',
-        width: 200,
+        flex: 2,
-        renderCell: (params) => (
+        renderCell: (params) => {
-            <Box display="flex" justifyContent="center" width="100%">
+            const { representation, name, provider, price } = params.row;
-                <Avatar
+            return (
-                    variant="rounded"
+                <Box display="flex" alignItems="center" gap={2}>
-                    src={params.value}
+                    <Box
-                    sx={{ width: 180, height: 48 }}
+                        component="img"
-                    imgProps={{
+                        src={representation || '/favicon.png'}
-                        style: {
+                        alt={name}
-                            objectFit: 'contain', // or 'cover' if you want it to fill and crop
+                        sx={{ width: 140, height: 140, borderRadius: 1, objectFit: 'cover' }}
-                            width: '100%',
+                    />
-                            height: '100%',
+                    <Box>
-                        }
+                        <Typography fontWeight={700}>{name}</Typography>
-                    }}
+                        <Typography variant="body2" color="text.secondary">{provider}</Typography>
-                />
+                        <Typography variant="h6" color="text.secondary">${Number(price).toFixed(2)}</Typography>
-            </Box>
+                    </Box>
-        )
+                </Box>
-    }
+            );
+        }
+    },
+    { field: 'company', headerName: 'Company', flex: 1 },
+    { field: 'name', headerName: 'Name', flex: 1 },
+    { field: 'stock', headerName: 'Stock', width: 120, type: 'number' },
+    { field: 'category', headerName: 'Category', flex: 1 },
 ];
 
 export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
@@ -88,15 +89,43 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
         ...columnsBase,
         {
             field: 'actions',
-            headerName: 'Actions',
+            headerName: '',
             width: 130,
             renderCell: (params) => (
-                <Box>
+                <Box display="flex"
-                    <IconButton color="primary" onClick={() => handleEditClick(params)}>
+                    alignItems="center"
-                        <EditIcon />
+                    justifyContent="flex-start"
+                    height="100%"
+                    gap={2}>
+                    <IconButton
+                        size="small"
+                        sx={{
+                            backgroundColor: '#DFCCBC',
+                            color: '#26201A',
+                            '&:hover': {
+                                backgroundColor: '#C2B2A4',
+                            },
+                            borderRadius: 2,
+                            p: 1,
+                        }}
+                        onClick={() => handleEditClick(params)}
+                    >
+                        <EditRoundedIcon fontSize="small" />
                     </IconButton>
-                    <IconButton color="error" onClick={() => handleDeleteClick(params.row)}>
+                    <IconButton
-                        <DeleteIcon />
+                        size="small"
+                        sx={{
+                            backgroundColor: '#FBE9E7',
+                            color: '#C62828',
+                            '&:hover': {
+                                backgroundColor: '#EF9A9A',
+                            },
+                            borderRadius: 2,
+                            p: 1,
+                        }}
+                        onClick={() => handleDeleteClick(params.row)}
+                    >
+                        <DeleteRoundedIcon fontSize="small" />
                     </IconButton>
                 </Box>
             )
@@ -132,10 +161,15 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
 
             <Box mt={2}>
                 <DataGrid
+                    getRowHeight={() => 140}
                     rows={rows}
                     columns={columns}
                     pageSize={5}
                     rowsPerPageOptions={[5]}
+                    getRowSpacing={() => ({
+                        top: 8,
+                        bottom: 8,
+                    })}
                 />
 
                 <Box display="flex" justifyContent="flex-end" mt={2}>