feat: add action class to connect the api mongo - getAll

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/actions.jsx

@@ -0,0 +1,13 @@
+export async function getExternalData() {
+    try {
+        const response = await fetch('http://portainer.white-enciso.pro:4001/api/v1/MongoSample/GetAll');
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        return data;
+    } catch (error) {
+        console.error('Failed to fetch data:', error);
+        return [];
+    }
+}

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,93 @@
+import { useEffect, useState } from 'react';
+import {
+    Box,
+    Button,
+    TextField,
+    Typography,
+    Paper,
+    MenuItem
+} from '@mui/material';
+
+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 = () => {
+        if (onAdd) {
+            onAdd(formData);
+        }
+    };
+
+    return (
+        <Box sx={{ px: 2, py: 3 }}>
+            <Paper elevation={0} sx={{ bgcolor: '#f9f9f9', p: 2, borderRadius: 2 }}>
+                <Typography variant="h6" gutterBottom>
+                    Item details
+                </Typography>
+
+                <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
+                    select
+                    fullWidth
+                    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" gap={1} mt={3}>
+                    <Button onClick={onCancel} className="button-transparent">
+                        Cancel
+                    </Button>
+                    <Button variant="contained" onClick={handleSubmit} className="button-gold">
+                        Save
+                    </Button>
+                </Box>
+            </Paper>
+        </Box>
+    );
+}

src/private/mongo/Admin.jsx

@@ -0,0 +1,143 @@
+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 } from '../../api/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(() => {
+        getExternalData().then(data => {
+            const safeData = Array.isArray(data) ? data : [];
+            setRows(safeData);
+        }).catch(error => {
+            console.error('Error loading data:', error);
+            setRows([]);
+        });
+    }, []);
+
+    const handleEditClick = (params) => {
+        setEditingData(params.row);
+        setOpen(true);
+    };
+
+    const handleDeleteClick = (row) => {
+        setRowToDelete(row);
+        setConfirmOpen(true);
+    };
+
+    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={() => { }} 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>
+    );
+}