feat: add the new menu for admin and the users page

2025-08-28 21:45:07 -06:00
parent 91ed5ccaa5
commit d8c890313f
4 changed files with 548 additions and 266 deletions
--- a/src/private/users/AddOrEditUserForm.jsx
+++ b/src/private/users/AddOrEditUserForm.jsx
@@ -0,0 +1,103 @@
+import { useState, useEffect } from 'react';
+import { Box, Button, TextField, MenuItem } from '@mui/material';
+import { createExternalData, updateExternalData } from '../../api/mongo/actions';
+
+export default function AddOrEditUserForm({ onAdd, initialData, onCancel }) {
+    const [formData, setFormData] = useState({
+        username: '',
+        fullName: '',
+        email: '',
+        role: 'User',
+        status: 'Active'
+    });
+
+    useEffect(() => {
+        if (initialData) {
+            setFormData({ ...initialData });
+        } else {
+            setFormData({
+                username: '',
+                fullName: '',
+                email: '',
+                role: 'User',
+                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="Username"
+                name="username"
+                value={formData.username}
+                onChange={handleChange}
+                margin="normal"
+            />
+            <TextField
+                fullWidth
+                label="Full Name"
+                name="fullName"
+                value={formData.fullName}
+                onChange={handleChange}
+                margin="normal"
+            />
+            <TextField
+                fullWidth
+                label="Email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                margin="normal"
+            />
+            <TextField
+                fullWidth
+                select
+                label="Role"
+                name="role"
+                value={formData.role}
+                onChange={handleChange}
+                margin="normal"
+            >
+                <MenuItem value="Admin">Admin</MenuItem>
+                <MenuItem value="User">User</MenuItem>
+                <MenuItem value="Manager">Manager</MenuItem>
+            </TextField>
+            <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>
+    );
+}