feat: add image as representation field

src/private/AddOrEditProductForm.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Box, Button, TextField, Grid } from '@mui/material';
+import { Box, Button, TextField, Grid, Avatar, Typography } from '@mui/material';
 
 export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
   const [product, setProduct] = useState({
@@ -7,7 +7,8 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
     price: '',
     provider: '',
     stock: '',
-    category: ''
+    category: '',
+    representation: ''
   });
 
   useEffect(() => {
@@ -19,7 +20,8 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
         price: '',
         provider: '',
         stock: '',
-        category: ''
+        category: '',
+        representation: ''
       });
     }
   }, [initialData]);
@@ -32,6 +34,17 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
     }));
   };
 
+   const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setProduct((prev) => ({ ...prev, representation: reader.result }));
+    };
+    reader.readAsDataURL(file);
+  };
+
   const handleSubmit = () => {
     if (onAdd) {
       onAdd(product);
@@ -88,6 +101,30 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
         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 variant="outlined" component="label">
+            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}>

src/private/Admin.jsx

@@ -2,7 +2,7 @@
 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 } from '@mui/material';
+import { 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';
@@ -14,21 +14,41 @@ const columnsBase = [
     { 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 }
+    { field: 'category', headerName: 'Category', flex: 1 },
+    {
+    field: 'representation',
+    headerName: 'Representation',
+    width: 120,
+    renderCell: (params) => (
+      <Box display="flex" justifyContent="center" width="100%">
+      <Avatar
+        variant="rounded"
+        src={params.value}
+        sx={{ width: 100, height: 48 }}
+        imgProps={{
+    style: {
+      objectFit: 'contain', // or 'cover' if you want it to fill and crop
+      width: '100%',
+      height: '100%',
+    }
+  }}
+      />
+    </Box>
+    )
+  }
 ];
 
 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' },
+    { 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' },
+    { 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' },
+    { 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' },
+    { 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' }
+    { id: 5, company: 'Fendi casa', name: 'Product 5', price: 8.2, provider: 'Provider E', stock: 75, category: 'Home', representation: '/favicon.png' }
-    ]);
+  ]);
 
     const [open, setOpen] = useState(false);
     const [editingProduct, setEditingProduct] = useState(null);
-
     const [confirmOpen, setConfirmOpen] = useState(false);
     const [rowToDelete, setRowToDelete] = useState(null);