fendi-react-app/src/private/Admin.jsx

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 AddOrEditProductForm from './AddOrEditProductForm.jsx';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';

const columnsBase = [
    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'company', headerName: 'Company', flex: 1 },
    { field: 'name', headerName: 'Name', flex: 1 },
    { 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: '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', 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' }
    ]);

    const [open, setOpen] = useState(false);
    const [editingProduct, setEditingProduct] = useState(null);
    const [confirmOpen, setConfirmOpen] = useState(false);
    const [rowToDelete, setRowToDelete] = useState(null);

    const handleAddOrEditProduct = (product) => {
        if (editingProduct) {
            // Update existing
            setRows(rows.map((row) => (row.id === editingProduct.id ? { ...editingProduct, ...product } : row)));
        } else {
            // Add new
            const id = rows.length + 1;
            setRows([...rows, { id, company: 'Fendi casa', ...product }]);
        }
        setOpen(false);
        setEditingProduct(null);
    };

    const handleEditClick = (params) => {
        setEditingProduct(params.row);
        setOpen(true);
    };

    const handleDeleteClick = (row) => {
        setRowToDelete(row);
        setConfirmOpen(true);
    };

    const confirmDelete = () => {
        setRows(rows.filter((row) => row.id !== rowToDelete.id));
        setRowToDelete(null);
        setConfirmOpen(false);
    };

    const columns = [
        ...columnsBase,
        {
            field: 'actions',
            headerName: 'Actions',
            width: 130,
            renderCell: (params) => (
                <Box>
                    <IconButton color="primary" onClick={() => handleEditClick(params)}>
                        <EditIcon />
                    </IconButton>
                    <IconButton color="error" onClick={() => handleDeleteClick(params.row)}>
                        <DeleteIcon />
                    </IconButton>
                </Box>
            )
        }
    ];

    return (
        <SectionContainer sx={{ width: '100%' }}>
            <Typography variant="h6" gutterBottom>
                Product Catalog
            </Typography>

            <Dialog open={open} onClose={() => { setOpen(false); setEditingProduct(null); }} maxWidth="sm" fullWidth>
                <DialogTitle>{editingProduct ? 'Edit Product' : 'Add Product'}</DialogTitle>
                <DialogContent>
                    <AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} onCancel={() => { setOpen(false); setEditingProduct(null); }} />
                </DialogContent>
            </Dialog>

            <Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
                <DialogTitle>Confirm Delete</DialogTitle>
                <DialogContent>
                    <Typography>
                        Are you sure you want to delete{' '}
                        <strong>{rowToDelete?.name}</strong>?
                    </Typography>
                    <Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
                        <Button onClick={() => setConfirmOpen(false)}
                            sx={{
                                backgroundColor: 'transparent',
                                color: 'black',
                                textTransform: 'uppercase',
                                fontWeight: 600,
                                px: 3,
                                '&:hover': {
                                    backgroundColor: '#26201A',
                                    color: '#fff',
                                },
                            }}>Cancel</Button>
                        <Button variant="contained" color="error" onClick={confirmDelete}
                            sx={{
                                backgroundColor: '#A68A72',
                                color: '#fff',
                                borderRadius: 2,
                                textTransform: 'uppercase',
                                fontWeight: 600,
                                px: 3,
                                '&:hover': {
                                    backgroundColor: '#26201A',
                                },
                            }}>Delete</Button>
                    </Box>
                </DialogContent>
            </Dialog>

            <Box mt={2}>
                <DataGrid
                    rows={rows}
                    columns={columns}
                    pageSize={5}
                    rowsPerPageOptions={[5]}
                />

                <Box display="flex" justifyContent="flex-end" mt={2}>
                    <Button variant="contained" color="primary" onClick={() => setOpen(true)}
                        sx={{
                            backgroundColor: '#A68A72',
                            color: '#fff',
                            borderRadius: 2,
                            textTransform: 'uppercase',
                            fontWeight: 600,
                            px: 3,
                            '&:hover': {
                                backgroundColor: '#26201A',
                            },
                        }}>
                        Add Product
                    </Button>
                </Box>
            </Box>
        </SectionContainer>
    );
}