feat: improve the gridview presentation

2025-06-09 22:31:06 -06:00
parent c667d7e606
commit a79f27dc3d
5 changed files with 94 additions and 55 deletions
--- a/src/components/AppHeader.jsx
+++ b/src/components/AppHeader.jsx
@@ -2,14 +2,14 @@ import { useState } from 'react';
 import fendiLogo from '/favicon.png'
 import { AppBar, Toolbar, Typography, InputBase, IconButton, Box } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
-import MenuDrawer from './MenuDrawer'; 
+import MenuDrawer from './MenuDrawer';

 export default function AppHeader({ zone = 'public' }) {

  const bgColor = {
-      public: '#40120EFF',
-      restricted: '#e0e0ff',
-      private: '#d0f0e0',
+    public: '#40120EFF',
+    restricted: '#e0e0ff',
+    private: '#d0f0e0',
  };

  const [menuOpen, setMenuOpen] = useState(false);
@@ -20,12 +20,12 @@ export default function AppHeader({ zone = 'public' }) {

  return (
    <AppBar position="static"
-       sx={{
-          textAlign: 'center',
-          bgcolor: bgColor[zone],
-          mt: 'auto',
-          fontSize: { xs: '0.75rem', md: '1rem' },
-        }} >
+      sx={{
+        textAlign: 'center',
+        bgcolor: bgColor[zone],
+        mt: 'auto',
+        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>
--- a/src/components/Footer.jsx
+++ b/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.`}
--- a/src/components/MenuDrawer.jsx
+++ b/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: {
-          sx: {
-            backgroundColor: '#000000a0',
-            width: isMobile ? '100vw' : 250,
-          },
+      paper: {
+        sx: {
+          backgroundColor: '#000000a0',
+          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: {
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,5 @@
 :root {
-  font-family: "Montserrat", sans-serif !important; 
+  font-family: "Montserrat", sans-serif !important;
  line-height: 1.5;
  font-weight: 100 !important;

@@ -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,10 +66,12 @@ button:focus-visible {
    color: #213547;
    background-color: #ffffff;
  }
+
  a:hover {
    color: #747bff;
  }
+
  button {
    background-color: #f9f9f9;
  }
-}
+}
--- a/src/private/Admin.jsx
+++ b/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,
-        renderCell: (params) => (
-            <Box display="flex" justifyContent="center" width="100%">
-                <Avatar
-                    variant="rounded"
-                    src={params.value}
-                    sx={{ width: 180, height: 48 }}
-                    imgProps={{
-                        style: {
-                            objectFit: 'contain', // or 'cover' if you want it to fill and crop
-                            width: '100%',
-                            height: '100%',
-                        }
-                    }}
-                />
-            </Box>
-        )
-    }
+        flex: 2,
+        renderCell: (params) => {
+            const { representation, name, provider, price } = params.row;
+            return (
+                <Box display="flex" alignItems="center" gap={2}>
+                    <Box
+                        component="img"
+                        src={representation || '/favicon.png'}
+                        alt={name}
+                        sx={{ width: 140, height: 140, borderRadius: 1, objectFit: 'cover' }}
+                    />
+                    <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>
-                    <IconButton color="primary" onClick={() => handleEditClick(params)}>
-                        <EditIcon />
+                <Box display="flex"
+                    alignItems="center"
+                    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)}>
-                        <DeleteIcon />
+                    <IconButton
+                        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}>