feat: improve the gridview presentation

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