feat: improve usability and ui minor changes

src/private/AddOrEditProductForm.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Box, Button, TextField, Grid, Avatar, Typography } from '@mui/material';
+import { Box, Button, TextField, Grid, Avatar, Typography, Paper } from '@mui/material';
+import { handleDecimalInputKeyDown } from '../utils/validation';
 
 export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
   const [product, setProduct] = useState({
@@ -52,26 +53,78 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
   };
 
   return (
-    <Box mt={2}>
-      <TextField
-        fullWidth
-        label="Name"
-        name="name"
-        value={product.name}
-        onChange={handleChange}
-        margin="normal"
-      />
-      <TextField
-        fullWidth
-        label="Price"
-        name="price"
-        type="number"
-        value={product.price}
-        onChange={handleChange}
-        margin="normal"
-      />
-      <Grid container spacing={2}>
-        <Grid item xs={6}>
+    <Box sx={{ px: 2, py: 3 }}>
+      <Box display="flex" flexDirection={{ xs: 'column', md: 'row' }} gap={4}>
+        {/* Left visual panel */}
+        <Paper
+          elevation={0}
+          sx={{
+            bgcolor: '#f9f9f9',
+            p: 2,
+            borderRadius: 2,
+            flex: 1,
+            minWidth: '400px',
+          }}
+        >
+          <Typography variant="subtitle1" fontWeight={600} gutterBottom>
+            {product.name || 'N/A'}
+          </Typography>
+          <Typography variant="body2" gutterBottom>
+            {product.provider || 'N/A'}
+          </Typography>
+          <Typography variant="body2" gutterBottom>
+            {product.price ? `$${product.price.toFixed(2)}` : '$0.00'}
+          </Typography>
+          {product.representation ? (
+            <Avatar
+              variant="rounded"
+              src={product.representation}
+              sx={{ width: '100%', height: 280, borderRadius: 2 }}
+              imgProps={{ style: { objectFit: 'cover', width: '100%', height: '100%' } }}
+            />
+          ) : (
+            <Box
+              sx={{
+                width: '100%',
+                height: 240,
+                bgcolor: '#e0e0e0',
+                borderRadius: 2,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+              }}
+            >
+              <Typography variant="body2" color="text.secondary">Image Preview</Typography>
+            </Box>
+          )}
+          <Box mt={2}>
+            <Button component="label" className="button-transparent" fullWidth >
+              Upload Image
+              <input type="file" hidden accept="image/*" onChange={handleImageChange} />
+            </Button>
+          </Box>
+        </Paper>
+
+        {/* Right input panel */}
+        <Box flex={1}>
+          <TextField
+            fullWidth
+            label="Product Name"
+            name="name"
+            value={product.name}
+            onChange={handleChange}
+            margin="normal"
+          />
+          <TextField
+            fullWidth
+            label="Price"
+            name="price"
+            type="number"
+            value={product.price}
+            onChange={handleChange}
+            margin="normal"
+            onKeyDown={handleDecimalInputKeyDown}
+          />
           <TextField
             fullWidth
             label="Provider"
@@ -80,8 +133,6 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
             onChange={handleChange}
             margin="normal"
           />
-        </Grid>
-        <Grid item xs={6}>
           <TextField
             fullWidth
             label="Stock"
@@ -90,48 +141,21 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
             value={product.stock}
             onChange={handleChange}
             margin="normal"
+            onKeyDown={handleDecimalInputKeyDown}
+          />
+          <TextField
+            fullWidth
+            label="Category"
+            name="category"
+            value={product.category}
+            onChange={handleChange}
+            margin="normal"
           />
-        </Grid>
-      </Grid>
-      <TextField
-        fullWidth
-        label="Category"
-        name="category"
-        value={product.category}
-        onChange={handleChange}
-        margin="normal"
-      />
-      <Grid item xs={12} textAlign="center">
-        {product.representation && (
-          <Box mb={1}>
-            <Typography variant="subtitle1" gutterBottom>Representation</Typography>
-            <Avatar
-              variant="rounded"
-              src={product.representation}
-              sx={{ width: 120, height: 120, mx: 'auto' }}
-              imgProps={{
-                style: {
-                  objectFit: 'contain',
-                  width: '100%',
-                  height: '100%',
-                }
-              }}
-            />
-          </Box>
-        )}
-        <Button component="label" className="button-transparent">
-          Upload Image
-          <input type="file" hidden accept="image/*" onChange={handleImageChange} />
-        </Button>
-      </Grid>
 
-      <Box mt={2}>
-        {/* Fields... */}
-        <Box display="flex" justifyContent="flex-end" gap={1} mt={2}>
-          <Button onClick={onCancel} className='button-transparent'>
-            Cancel</Button>
-          <Button variant="contained" onClick={handleSubmit} className="button-gold">
-            Save</Button>
+          <Box display="flex" justifyContent="flex-end" gap={1} mt={3}>
+            <Button onClick={onCancel} className='button-transparent'>Cancel</Button>
+            <Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
+          </Box>
         </Box>
       </Box>
     </Box>

src/private/Admin.jsx

@@ -15,7 +15,7 @@ import '../App.css';
 const columnsBase = [
     {
         field: 'representation',
-        headerName: 'Representation',
+        headerName: '',
         flex: 2,
         renderCell: (params) => {
             const { representation, name, provider, price } = params.row;
@@ -25,7 +25,7 @@ const columnsBase = [
                         component="img"
                         src={representation || '/favicon.png'}
                         alt={name}
-                        sx={{ width: 140, height: 140, borderRadius: 1, objectFit: 'cover' }}
+                        sx={{ width: 120, height: 140, borderRadius: 1, objectFit: 'cover' }}
                     />
                     <Box>
                         <Typography fontWeight={700}>{name}</Typography>
@@ -37,18 +37,17 @@ const columnsBase = [
         }
     },
     { 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 },
+    { field: 'stock', headerName: 'Stock', width: 120, type: 'number' },
 ];
 
 export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
     const [rows, setRows] = useState([
-        { id: 1, company: 'Fendi casa', name: 'Product 1', price: 10.99, provider: 'Provider A', stock: 100, category: 'Home', representation: '/favicon.png' },
-        { id: 2, company: 'Fendi casa', name: 'Product 2', price: 20.0, provider: 'Provider B', stock: 50, category: 'Home', representation: '/logo.png' },
-        { id: 3, company: 'Fendi casa', name: 'Product 3', price: 5.5, provider: 'Provider C', stock: 200, category: 'Home', representation: '/background.jpg' },
-        { id: 4, company: 'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home', representation: '/background.jpg' },
-        { id: 5, company: 'Fendi casa', name: 'Product 5', price: 8.2, provider: 'Provider E', stock: 75, category: 'Home', representation: '/favicon.png' }
+        { id: 1, company: 'Fendi casa', name: 'Product 1', price: 10.99, provider: 'Provider A', stock: 100, category: 'Home', representation: '/1.jpg' },
+        { id: 2, company: 'Fendi casa', name: 'Product 2', price: 20.0, provider: 'Provider B', stock: 50, category: 'Home', representation: '/2.jpg' },
+        { id: 3, company: 'Fendi casa', name: 'Product 3', price: 5.5, provider: 'Provider C', stock: 200, category: 'Home', representation: '/3.jpg' },
+        { id: 4, company: 'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home', representation: '/4.jpg' },
+        { id: 5, company: 'Fendi casa', name: 'Product 5', price: 8.2, provider: 'Provider E', stock: 75, category: 'Home', representation: '/5.jpg' }
     ]);
 
     const [open, setOpen] = useState(false);
@@ -94,7 +93,7 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
             renderCell: (params) => (
                 <Box display="flex"
                     alignItems="center"
-                    justifyContent="flex-start"
+                    justifyContent="flex-end"
                     height="100%"
                     gap={2}>
                     <IconButton
@@ -134,11 +133,11 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
 
     return (
         <SectionContainer sx={{ width: '100%' }}>
-            <Typography variant="h6" gutterBottom color='#26201AFF'>
+            <Typography variant="h4" gutterBottom color='#26201AFF'>
                 Product Catalog
             </Typography>
 
-            <Dialog open={open} onClose={() => { setOpen(false); setEditingProduct(null); }} maxWidth="sm" fullWidth>
+            <Dialog open={open} onClose={() => { setOpen(false); setEditingProduct(null); }} maxWidth="md" fullWidth>
                 <DialogTitle>{editingProduct ? 'Edit Product' : 'Add Product'}</DialogTitle>
                 <DialogContent>
                     <AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} onCancel={() => { setOpen(false); setEditingProduct(null); }} />