feat: new screens and docker setup

2025-06-12 21:07:51 -06:00
parent c20e04557b
commit 31600e5f1b
10 changed files with 291 additions and 9 deletions
--- a/src/private/categories/Categories.jsx
+++ b/src/private/categories/Categories.jsx
@@ -0,0 +1,142 @@
+import SectionContainer from '../../components/SectionContainer.jsx';
+import { useState } from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box } from '@mui/material';
+import AddOrEditCategoryForm from './AddOrEditCategoryForm.jsx';
+
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
+import '../../App.css';
+
+const columnsBase = [
+    { field: 'name', headerName: 'Name', flex: 1 },
+    { field: 'description', headerName: 'Description', flex: 2 }
+];
+
+export default function Categories({ children, maxWidth = 'lg', sx = {} }) {
+    const [rows, setRows] = useState([
+        { id: 1, name: 'Fabrics', description: 'Textile materials including silk, cotton, and synthetics.' },
+        { id: 2, name: 'Leather Goods', description: 'Leather-based components for luxury goods.' },
+        { id: 3, name: 'Metal Accessories', description: 'Buttons, zippers, and hardware in metal.' },
+        { id: 4, name: 'Embellishments', description: 'Decorative materials such as beads and sequins.' }
+    ]);
+
+    const [open, setOpen] = useState(false);
+    const [editingCategory, setEditingCategory] = useState(null);
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [rowToDelete, setRowToDelete] = useState(null);
+
+    const handleAddOrEditCategory = (category) => {
+        if (editingCategory) {
+            setRows(rows.map((row) => (row.id === editingCategory.id ? { ...editingCategory, ...category } : row)));
+        } else {
+            const id = rows.length + 1;
+            setRows([...rows, { id, ...category }]);
+        }
+        setOpen(false);
+        setEditingCategory(null);
+    };
+
+    const handleEditClick = (params) => {
+        setEditingCategory(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: '',
+            width: 130,
+            renderCell: (params) => (
+                <Box display="flex" alignItems="center" justifyContent="flex-end" 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
+                        size="small"
+                        sx={{
+                            backgroundColor: '#FBE9E7',
+                            color: '#C62828',
+                            '&:hover': {
+                                backgroundColor: '#EF9A9A',
+                            },
+                            borderRadius: 2,
+                            p: 1,
+                        }}
+                        onClick={() => handleDeleteClick(params.row)}
+                    >
+                        <DeleteRoundedIcon fontSize="small" />
+                    </IconButton>
+                </Box>
+            )
+        }
+    ];
+
+    return (
+        <SectionContainer sx={{ width: '100%' }}>
+            <Typography variant="h4" gutterBottom color='#26201AFF'>
+                Categories
+            </Typography>
+
+            <Dialog open={open} onClose={() => { setOpen(false); setEditingCategory(null); }} fullWidth>
+                <DialogTitle>{editingCategory ? 'Edit Category' : 'Add Category'}</DialogTitle>
+                <DialogContent>
+                    <AddOrEditCategoryForm onAdd={handleAddOrEditCategory} initialData={editingCategory} onCancel={() => { setOpen(false); setEditingCategory(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)} className='button-transparent'>Cancel</Button>
+                        <Button variant="contained" onClick={confirmDelete} className="button-gold">Delete</Button>
+                    </Box>
+                </DialogContent>
+            </Dialog>
+
+            <Box mt={2}>
+                <DataGrid
+                    rows={rows}
+                    columns={columns}
+                    pageSize={5}
+                    rowsPerPageOptions={[5]}
+                    getRowSpacing={() => ({ top: 8, bottom: 8 })}
+                />
+
+                <Box display="flex" justifyContent="flex-end" mt={2}>
+                    <Button variant="contained" onClick={() => setOpen(true)} className="button-gold">
+                        Add Category
+                    </Button>
+                </Box>
+            </Box>
+        </SectionContainer>
+    );
+}