Initial admin dashboard layout

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 = () => {
               </Group>
             </UnstyledButton>
 
+            {user.role === 'admin' && (
+              <UnstyledButton
+                onClick={() => {
+                  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],
+                  },
+                })}
+              >
+                <Group>
+                  <IconUsers size={16} />
+                  <Text size="sm">Admin Dashboard</Text>
+                </Group>
+              </UnstyledButton>
+            )}
+
             <UnstyledButton
               onClick={handleLogout}
               px="sm"
@@ -111,6 +143,11 @@ const UserMenu = () => {
         opened={accountSettingsOpened}
         onClose={() => setAccountSettingsOpened(false)}
       />
+
+      <AdminDashboard
+        opened={adminDashboardOpened}
+        onClose={() => setAdminDashboardOpened(false)}
+      />
     </>
   );
 };

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 (
+    <Modal opened={opened} onClose={onClose} title="Create New User" centered>
+      <Stack>
+        <TextInput
+          label="Email"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.currentTarget.value)}
+          placeholder="user@example.com"
+        />
+        <TextInput
+          label="Display Name"
+          value={displayName}
+          onChange={(e) => setDisplayName(e.currentTarget.value)}
+          placeholder="John Doe"
+        />
+        <PasswordInput
+          label="Password"
+          required
+          value={password}
+          onChange={(e) => setPassword(e.currentTarget.value)}
+          placeholder="Enter password"
+        />
+        <Select
+          label="Role"
+          required
+          value={role}
+          onChange={setRole}
+          data={[
+            { value: 'admin', label: 'Admin' },
+            { value: 'editor', label: 'Editor' },
+            { value: 'viewer', label: 'Viewer' },
+          ]}
+        />
+        <Group justify="flex-end" mt="md">
+          <Button variant="default" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit}>Create User</Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+};
+
+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) => (
+    <Table.Tr key={user.id}>
+      <Table.Td>{user.email}</Table.Td>
+      <Table.Td>{user.displayName}</Table.Td>
+      <Table.Td>
+        <Text transform="capitalize">{user.role}</Text>
+      </Table.Td>
+      <Table.Td>{new Date(user.createdAt).toLocaleDateString()}</Table.Td>
+      <Table.Td>
+        <Group gap="xs" justify="flex-end">
+          <ActionIcon variant="subtle" color="blue">
+            <IconEdit size={16} />
+          </ActionIcon>
+          <ActionIcon
+            variant="subtle"
+            color="red"
+            onClick={() => handleDeleteUser(user.id)}
+          >
+            <IconTrash size={16} />
+          </ActionIcon>
+        </Group>
+      </Table.Td>
+    </Table.Tr>
+  ));
+
+  return (
+    <Modal opened={opened} onClose={onClose} size="xl" title="Admin Dashboard">
+      <Box>
+        <Group justify="space-between" mb="md">
+          <Text size="xl" fw={700}>
+            User Management
+          </Text>
+          <Button
+            leftSection={<IconPlus size={16} />}
+            onClick={() => setCreateModalOpened(true)}
+          >
+            Create User
+          </Button>
+        </Group>
+
+        <Table striped highlightOnHover withTableBorder>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Email</Table.Th>
+              <Table.Th>Display Name</Table.Th>
+              <Table.Th>Role</Table.Th>
+              <Table.Th>Created At</Table.Th>
+              <Table.Th style={{ width: 100 }}>Actions</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>{rows}</Table.Tbody>
+        </Table>
+
+        <CreateUserModal
+          opened={createModalOpened}
+          onClose={() => setCreateModalOpened(false)}
+          onCreateUser={handleCreateUser}
+        />
+      </Box>
+    </Modal>
+  );
+};
+
+export default AdminDashboard;