feature: add actions for edit and delete

src/App.jsx

@@ -8,6 +8,7 @@ import Products from './private/products/Products';
 import Clients from './private/clients/Clients';
 import Providers from './private/providers/Providers';
 import Categories from './private/categories/Categories';
+import Admin from './private/mongo/Admin';
 
 function App() {
   const [zone, setZone] = useState('public'); // Could be 'public' | 'restricted' | 'private'
@@ -34,6 +35,7 @@ function App() {
           {zone === 'public' && currentView === 'Clients' && <Clients />}
           {zone === 'public' && currentView === 'Providers' && <Providers />}
           {zone === 'public' && currentView === 'Categories' && <Categories />}
+          {zone === 'public' && currentView === 'Admin' && <Admin />}
         </Box>
         <Footer zone={zone} />
       </Box>

src/api/mongo/actions.jsx

@@ -0,0 +1,65 @@
+const API_BASE_URL = 'http://portainer.white-enciso.pro:4001/api/v1/MongoSample';
+
+export async function getExternalData() {
+  try {
+    const response = await fetch(`${API_BASE_URL}/GetAll`);
+    if (!response.ok) throw new Error('Failed to fetch external data');
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error fetching external data:', error);
+    return [];
+  }
+}
+
+export async function createExternalData(data) {
+  try {
+    const response = await fetch(`${API_BASE_URL}/Create`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(data)
+    });
+    if (!response.ok) throw new Error('Failed to create external data');
+    const result = await response.json();
+    return result;
+  } catch (error) {
+    console.error('Error creating external data:', error);
+    throw error;
+  }
+}
+
+export async function updateExternalData(data) {
+  const response = await fetch(`${API_BASE_URL}/Update`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(data)
+  });
+
+  if (!response.ok) {
+    throw new Error('Failed to update item');
+  }
+
+  return await response.json();
+}
+
+export async function deleteExternalData(_Id) {
+  try {
+    const response = await fetch(`${API_BASE_URL}/Delete`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ _Id }),
+    });
+
+    if (!response.ok) throw new Error('Failed to delete external data');
+    return await response.json();
+  } catch (error) {
+    console.error('Error deleting external data:', error);
+    throw error;
+  }
+}

src/components/MenuDrawer.jsx

@@ -4,10 +4,13 @@ import PeopleIcon from '@mui/icons-material/People';
 import InventoryIcon from '@mui/icons-material/Inventory';
 import LocalShippingIcon from '@mui/icons-material/LocalShipping';
 import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
+
 import { useState } from 'react';
 
 const menuOptions = {
   public: [
+    { text: 'Admin', icon: <AdminPanelSettingsIcon /> },
     { text: 'Categories', icon: <CategoryIcon /> },
     { text: 'Clients', icon: <PeopleIcon /> },
     { text: 'Products', icon: <InventoryIcon /> },
@@ -16,6 +19,7 @@ const menuOptions = {
   ],
   restricted: [],
   private: [
+    { text: 'Admin', icon: <AdminPanelSettingsIcon /> },
     { text: 'Categories', icon: <CategoryIcon /> },
     { text: 'Clients', icon: <PeopleIcon /> },
     { text: 'Products', icon: <InventoryIcon /> },

src/private/mongo/AddOrEditAdminForm.jsx

@@ -0,0 +1,80 @@
+import { useState, useEffect } from 'react';
+import { Box, Button, TextField, MenuItem } from '@mui/material';
+import { createExternalData, updateExternalData } from '../../api/mongo/actions';
+
+export default function AddOrEditAdminForm({ onAdd, initialData, onCancel }) {
+    const [formData, setFormData] = useState({
+        name: '',
+        description: '',
+        status: 'Active'
+    });
+
+    useEffect(() => {
+        if (initialData) {
+            setFormData({ ...initialData });
+        } else {
+            setFormData({
+                name: '',
+                description: '',
+                status: 'Active'
+            });
+        }
+    }, [initialData]);
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+    };
+
+    const handleSubmit = async () => {
+        try {
+            if (initialData) {
+                await updateExternalData(formData);
+            } else {
+                await createExternalData(formData);
+            }
+            if (onAdd) onAdd();
+        } catch (error) {
+            console.error('Error submitting form:', error);
+        }
+    };
+
+    return (
+
+        <Box sx={{ py: 2 }}>
+            <TextField
+                fullWidth
+                label="Name"
+                name="name"
+                value={formData.name}
+                onChange={handleChange}
+                margin="normal"
+            />
+            <TextField
+                fullWidth
+                label="Description"
+                name="description"
+                value={formData.description}
+                onChange={handleChange}
+                margin="normal"
+            />
+            <TextField
+                fullWidth
+                select
+                label="Status"
+                name="status"
+                value={formData.status}
+                onChange={handleChange}
+                margin="normal"
+            >
+                <MenuItem value="Active">Active</MenuItem>
+                <MenuItem value="Inactive">Inactive</MenuItem>
+            </TextField>
+            <Box display="flex" justifyContent="flex-end" mt={3} gap={1}>
+                <Button onClick={onCancel} className="button-transparent">Cancel</Button>
+                <Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
+            </Box>
+
+        </Box>
+    );
+}

src/private/mongo/Admin.jsx

@@ -0,0 +1,165 @@
+import SectionContainer from '../../components/SectionContainer';
+import { useEffect, useState } from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { Typography, Button, Dialog, DialogTitle, DialogContent, IconButton, Box } from '@mui/material';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
+import AddOrEditAdminForm from './AddOrEditAdminForm';
+import { getExternalData, deleteExternalData } from '../../api/mongo/actions';
+
+const columnsBase = [
+    { field: 'name', headerName: 'Name', flex: 2 },
+    { field: 'description', headerName: 'Description', flex: 2 },
+    { field: 'status', headerName: 'Status', width: 120 },
+    {
+        field: 'createdAt',
+        headerName: 'Created At',
+        width: 120,
+        valueFormatter: (params) => {
+            const date = params?.value;
+            return date ? new Date(date).toLocaleString() : '—';
+        }
+    },
+    { field: 'createdBy', headerName: 'Created By', flex: 1 },
+    {
+        field: 'updatedAt',
+        headerName: 'Updated At',
+        width: 120,
+        valueFormatter: (params) => {
+            const date = params?.value;
+            return date ? new Date(date).toLocaleString() : '—';
+        }
+    },
+    { field: 'updatedBy', headerName: 'Updated By', flex: 1 },
+];
+
+export default function Admin() {
+    const [rows, setRows] = useState([]);
+    const [open, setOpen] = useState(false);
+    const [editingData, setEditingData] = useState(null);
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [rowToDelete, setRowToDelete] = useState(null);
+
+    useEffect(() => {
+        let isMounted = true;
+
+        getExternalData()
+            .then(data => {
+                if (isMounted) {
+                    const safeData = Array.isArray(data) ? data : [];
+                    setRows(safeData);
+                }
+            })
+            .catch(error => {
+                console.error('Error loading data:', error);
+                if (isMounted) setRows([]);
+            });
+
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+
+    const handleEditClick = (params) => {
+        setEditingData(params.row);
+        setOpen(true);
+    };
+
+    const handleDeleteClick = (row) => {
+        setRowToDelete(row);
+        setConfirmOpen(true);
+    };
+
+    const handleConfirmDelete = async () => {
+        try {
+            await deleteExternalData(rowToDelete._Id);
+            setRows((prevRows) => prevRows.filter(r => r._Id !== rowToDelete._Id));
+        } catch (error) {
+            console.error('Delete failed:', error);
+        } finally {
+            setConfirmOpen(false);
+            setRowToDelete(null);
+        }
+    };
+
+    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'>Admin</Typography>
+
+            <Dialog open={open} onClose={() => { setOpen(false); setEditingData(null); }} maxWidth="md" fullWidth>
+                <DialogTitle>{editingData ? 'Edit Item' : 'Add Item'}</DialogTitle>
+                <DialogContent>
+                    <AddOrEditAdminForm onAdd={() => { }} initialData={editingData} onCancel={() => { setOpen(false); setEditingData(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={handleConfirmDelete} className="button-gold">Delete</Button>
+                    </Box>
+                </DialogContent>
+            </Dialog>
+
+            <Box mt={2}>
+                <DataGrid
+                    rows={rows}
+                    columns={columns}
+                    pageSize={5}
+                    rowsPerPageOptions={[5]}
+                    getRowSpacing={() => ({ top: 4, bottom: 4 })}
+                />
+
+                <Box display="flex" justifyContent="flex-end" mt={2}>
+                    <Button variant="contained" onClick={() => setOpen(true)} className="button-gold">
+                        Add Item
+                    </Button>
+                </Box>
+            </Box>
+        </SectionContainer>
+    );
+}