diff --git a/frontend/src/components/navigation/UserMenu.jsx b/frontend/src/components/navigation/UserMenu.jsx
index c5d0e68..0002eb0 100644
--- a/frontend/src/components/navigation/UserMenu.jsx
+++ b/frontend/src/components/navigation/UserMenu.jsx
@@ -8,12 +8,19 @@ import {
Text,
Divider,
} from '@mantine/core';
-import { IconUser, IconLogout, IconSettings } from '@tabler/icons-react';
+import {
+ IconUser,
+ IconUsers,
+ IconLogout,
+ IconSettings,
+} from '@tabler/icons-react';
import { useAuth } from '../../contexts/AuthContext';
import AccountSettings from '../settings/account/AccountSettings';
+import AdminDashboard from '../settings/admin/AdminDashboard';
const UserMenu = () => {
const [accountSettingsOpened, setAccountSettingsOpened] = useState(false);
+ const [adminDashboardOpened, setAdminDashboardOpened] = useState(false);
const [opened, setOpened] = useState(false);
const { user, logout } = useAuth();
@@ -81,6 +88,31 @@ const UserMenu = () => {
+ {user.role === 'admin' && (
+ {
+ setAdminDashboardOpened(true);
+ setOpened(false);
+ }}
+ px="sm"
+ py="xs"
+ style={(theme) => ({
+ borderRadius: theme.radius.sm,
+ '&:hover': {
+ backgroundColor:
+ theme.colorScheme === 'dark'
+ ? theme.colors.dark[5]
+ : theme.colors.gray[0],
+ },
+ })}
+ >
+
+
+ Admin Dashboard
+
+
+ )}
+
{
opened={accountSettingsOpened}
onClose={() => setAccountSettingsOpened(false)}
/>
+
+ setAdminDashboardOpened(false)}
+ />
>
);
};
diff --git a/frontend/src/components/settings/admin/AdminDashboard.jsx b/frontend/src/components/settings/admin/AdminDashboard.jsx
new file mode 100644
index 0000000..74f468b
--- /dev/null
+++ b/frontend/src/components/settings/admin/AdminDashboard.jsx
@@ -0,0 +1,182 @@
+import React, { useState } from 'react';
+import {
+ Modal,
+ Table,
+ Button,
+ Group,
+ TextInput,
+ PasswordInput,
+ Select,
+ Stack,
+ Text,
+ ActionIcon,
+ Box,
+} from '@mantine/core';
+import { IconTrash, IconEdit, IconPlus } from '@tabler/icons-react';
+
+// Dummy data - replace with actual API calls in production
+const DUMMY_USERS = [
+ {
+ id: 1,
+ email: 'admin@example.com',
+ displayName: 'Admin User',
+ role: 'admin',
+ createdAt: '2024-01-01',
+ },
+ {
+ id: 2,
+ email: 'editor@example.com',
+ displayName: 'Editor User',
+ role: 'editor',
+ createdAt: '2024-01-02',
+ },
+ {
+ id: 3,
+ email: 'viewer@example.com',
+ displayName: 'Viewer User',
+ role: 'viewer',
+ createdAt: '2024-01-03',
+ },
+];
+
+const CreateUserModal = ({ opened, onClose, onCreateUser }) => {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [displayName, setDisplayName] = useState('');
+ const [role, setRole] = useState('viewer');
+
+ const handleSubmit = () => {
+ onCreateUser({ email, password, displayName, role });
+ setEmail('');
+ setPassword('');
+ setDisplayName('');
+ setRole('viewer');
+ onClose();
+ };
+
+ return (
+
+
+ setEmail(e.currentTarget.value)}
+ placeholder="user@example.com"
+ />
+ setDisplayName(e.currentTarget.value)}
+ placeholder="John Doe"
+ />
+ setPassword(e.currentTarget.value)}
+ placeholder="Enter password"
+ />
+
+
+
+
+
+
+
+ );
+};
+
+const AdminDashboard = ({ opened, onClose }) => {
+ const [users, setUsers] = useState(DUMMY_USERS);
+ const [createModalOpened, setCreateModalOpened] = useState(false);
+
+ const handleCreateUser = (newUser) => {
+ // In production, make an API call here
+ setUsers([
+ ...users,
+ { ...newUser, id: users.length + 1, createdAt: new Date().toISOString() },
+ ]);
+ };
+
+ const handleDeleteUser = (userId) => {
+ // In production, make an API call here
+ setUsers(users.filter((user) => user.id !== userId));
+ };
+
+ const rows = users.map((user) => (
+
+ {user.email}
+ {user.displayName}
+
+ {user.role}
+
+ {new Date(user.createdAt).toLocaleDateString()}
+
+
+
+
+
+ handleDeleteUser(user.id)}
+ >
+
+
+
+
+
+ ));
+
+ return (
+
+
+
+
+ User Management
+
+ }
+ onClick={() => setCreateModalOpened(true)}
+ >
+ Create User
+
+
+
+
+
+
+ Email
+ Display Name
+ Role
+ Created At
+ Actions
+
+
+ {rows}
+
+
+ setCreateModalOpened(false)}
+ onCreateUser={handleCreateUser}
+ />
+
+
+ );
+};
+
+export default AdminDashboard;