+
+
+
+
+
+ {isLoading ? (
+
+
+
+ );
+}
diff --git a/frontend/src/components/admin/CreateUserDialog.tsx b/frontend/src/components/admin/CreateUserDialog.tsx
new file mode 100644
index 0000000..299f54d
--- /dev/null
+++ b/frontend/src/components/admin/CreateUserDialog.tsx
@@ -0,0 +1,184 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { UserPlus, Loader2 } from 'lucide-react';
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogFooter,
+ DialogClose,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { useCreateUser, getErrorMessage } from '@/hooks/useAdmin';
+import type { UserRole } from '@/types';
+
+interface CreateUserDialogProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+}
+
+export default function CreateUserDialog({ open, onOpenChange }: CreateUserDialogProps) {
+ const [username, setUsername] = useState('');
+ const [password, setPassword] = useState('');
+ const [role, setRole] = useState
+ Audit Log
+ {data && (
+
+ {data.total} entries
+
+ )}
+
+
+ {/* Filter controls */}
+
+
+
+
+
+
+
+
+
+ {filterAction && (
+
+ )}
+
+ {Array.from({ length: 8 }).map((_, i) => (
+
+ ) : !data?.entries?.length ? (
+ No audit entries found.
+ ) : ( + <> +
+
+
+
+
+
+ {/* Pagination */}
+ {totalPages > 1 && (
+ | + Time + | ++ Actor + | ++ Action + | ++ Target + | ++ IP + | ++ Detail + | +
|---|---|---|---|---|---|
| + {getRelativeTime(entry.created_at)} + | ++ {entry.actor_username ?? ( + system + )} + | ++ + {entry.action} + + | ++ {entry.target_username ?? '—'} + | ++ {entry.ip_address ?? '—'} + | ++ {entry.detail ?? '—'} + | +
+
+ Page {page} of {totalPages}
+
+
+ )}
+
+ )}
+
+
+
+
+
+ {/* Stats row */}
+
+
+
+
+ {usersLoading ? (
+
+
+
+ {/* User detail section */}
+ {selectedUserId !== null && (
+ setSelectedUserId(null)}
+ />
+ )}
+
+ {/* System settings */}
+
+
+
+
+ {configLoading ? (
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/admin/UserActionsMenu.tsx b/frontend/src/components/admin/UserActionsMenu.tsx
new file mode 100644
index 0000000..f4a641d
--- /dev/null
+++ b/frontend/src/components/admin/UserActionsMenu.tsx
@@ -0,0 +1,323 @@
+import { useState, useRef, useEffect } from 'react';
+import { toast } from 'sonner';
+import {
+ MoreHorizontal,
+ ShieldCheck,
+ KeyRound,
+ UserX,
+ UserCheck,
+ LogOut,
+ Smartphone,
+ ChevronRight,
+ Loader2,
+ Trash2,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useConfirmAction } from '@/hooks/useConfirmAction';
+import {
+ useUpdateRole,
+ useResetPassword,
+ useDisableMfa,
+ useEnforceMfa,
+ useRemoveMfaEnforcement,
+ useToggleUserActive,
+ useRevokeSessions,
+ useDeleteUser,
+ getErrorMessage,
+} from '@/hooks/useAdmin';
+import type { AdminUserDetail, UserRole } from '@/types';
+import { cn } from '@/lib/utils';
+
+interface UserActionsMenuProps {
+ user: AdminUserDetail;
+ currentUsername: string | null;
+}
+
+const ROLES: { value: UserRole; label: string }[] = [
+ { value: 'admin', label: 'Admin' },
+ { value: 'standard', label: 'Standard' },
+ { value: 'public_event_manager', label: 'Public Event Manager' },
+];
+
+export default function UserActionsMenu({ user, currentUsername }: UserActionsMenuProps) {
+ const [open, setOpen] = useState(false);
+ const [roleSubmenuOpen, setRoleSubmenuOpen] = useState(false);
+ const [tempPassword, setTempPassword] = useState
+
+
+ {/* User table */}
+
+ Users
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+ ) : !filteredUsers.length ? (
+ + {searchQuery ? 'No users match your search.' : 'No users found.'} +
+ ) : ( +
+
+
+
+
+ )}
+ | + Username + | ++ Email + | ++ Role + | ++ Status + | ++ Last Login + | ++ MFA + | ++ Sessions + | ++ Created + | ++ Actions + | +
|---|---|---|---|---|---|---|---|---|
| {user.username} | ++ {user.email || '—'} + | +
+ |
+ + + {user.is_active ? 'Active' : 'Disabled'} + + | ++ {user.last_login_at ? getRelativeTime(user.last_login_at) : '—'} + | ++ {user.totp_enabled ? ( + + On + + ) : user.mfa_enforce_pending ? ( + + Pending + + ) : ( + — + )} + | ++ {user.active_sessions} + | ++ {getRelativeTime(user.created_at)} + | + e.stopPropagation()}>
+ |
+
+ System Settings
+
+
+
+
+
+ ) : (
+ <>
+
+ handleConfigToggle('allow_registration', v)}
+ disabled={updateConfig.isPending}
+ />
+
+
+
+
+
+ + When enabled, the /register page accepts new sign-ups. +
+
+ handleConfigToggle('enforce_mfa_new_users', v)}
+ disabled={updateConfig.isPending}
+ />
+
+
+ )}
+
+
+
+ + Newly registered users will be required to set up TOTP before accessing the app. +
+
+
+
+ {open && (
+
+ );
+}
diff --git a/frontend/src/components/admin/UserDetailSection.tsx b/frontend/src/components/admin/UserDetailSection.tsx
new file mode 100644
index 0000000..0f09563
--- /dev/null
+++ b/frontend/src/components/admin/UserDetailSection.tsx
@@ -0,0 +1,197 @@
+import { X, User, ShieldCheck, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Select } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useAdminUserDetail, useUpdateRole, getErrorMessage } from '@/hooks/useAdmin';
+import { getRelativeTime } from '@/lib/date-utils';
+import { cn } from '@/lib/utils';
+import type { UserRole } from '@/types';
+
+interface UserDetailSectionProps {
+ userId: number;
+ onClose: () => void;
+}
+
+function DetailRow({ label, value }: { label: string; value: React.ReactNode }) {
+ return (
+
+ {/* Edit Role */}
+
+ )}
+
+
+
+ {roleSubmenuOpen && (
+
+
+ {/* Reset Password */}
+ {tempPassword ? (
+ setRoleSubmenuOpen(true)}
+ onMouseLeave={() => setRoleSubmenuOpen(false)}
+ >
+ {ROLES.map(({ value, label }) => (
+
+ ))}
+
+ )}
+
+
+ ) : (
+
+ )}
+
+
+
+ {/* MFA actions */}
+ {user.mfa_enforce_pending ? (
+
+ ) : (
+
+ )}
+
+ {user.totp_enabled && (
+
+ )}
+
+
+
+ {/* Disable / Enable Account */}
+
+
+ {/* Revoke Sessions */}
+
+
+ {/* Delete User — hidden for own account */}
+ {currentUsername !== user.username && (
+ <>
+
+
+
+
+ )}
+ Temporary password:
+ {
+ navigator.clipboard.writeText(tempPassword);
+ toast.success('Password copied to clipboard');
+ }}
+ >
+ {tempPassword}
+
+
+
+ {label}
+ {value || '—'}
+
+ );
+}
+
+function StatusBadge({ active }: { active: boolean }) {
+ return (
+
+ {active ? 'Active' : 'Disabled'}
+
+ );
+}
+
+function MfaBadge({ enabled, pending }: { enabled: boolean; pending: boolean }) {
+ if (enabled) {
+ return (
+
+ Enabled
+
+ );
+ }
+ if (pending) {
+ return (
+
+ Pending
+
+ );
+ }
+ return Off;
+}
+
+export default function UserDetailSection({ userId, onClose }: UserDetailSectionProps) {
+ const { data: user, isLoading } = useAdminUserDetail(userId);
+ const updateRole = useUpdateRole();
+
+ const handleRoleChange = async (newRole: UserRole) => {
+ if (!user || newRole === user.role) return;
+ try {
+ await updateRole.mutateAsync({ userId: user.id, role: newRole });
+ toast.success(`Role updated to "${newRole}"`);
+ } catch (err) {
+ toast.error(getErrorMessage(err, 'Failed to update role'));
+ }
+ };
+
+ if (isLoading) {
+ return (
+
+
+
+ {Array.from({ length: 5 }).map((_, i) => (
+
+
+
+
+ {Array.from({ length: 7 }).map((_, i) => (
+
+
+
+ );
+ }
+
+ if (!user) return null;
+
+ return (
+
+ {/* User Information (read-only) */}
+
+
+
+
+
+
+
+ {/* Security & Permissions */}
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/admin/shared.tsx b/frontend/src/components/admin/shared.tsx
new file mode 100644
index 0000000..0592f87
--- /dev/null
+++ b/frontend/src/components/admin/shared.tsx
@@ -0,0 +1,42 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+
+// ── StatCard ─────────────────────────────────────────────────────────────────
+
+interface StatCardProps {
+ icon: React.ReactNode;
+ label: string;
+ value: string | number;
+ iconBg?: string;
+}
+
+export function StatCard({ icon, label, value, iconBg = 'bg-accent/10' }: StatCardProps) {
+ return (
+
+ User Information
+
+
+
+
+
+ Security & Permissions
+
+
+
+
+ Role
+
+
+
+ {updateRole.isPending && (
+
+
+
+ {icon}
+
+
+ {label}
+{value}
+
+
+
+
+
+
+ Two-Factor Authentication
+
+ {useBackupCode ? 'Enter one of your backup codes' : 'Enter the code from your authenticator app'}
+
+
+
+
+
+
+
+
+ Set Up Two-Factor Authentication
+ Your account requires MFA before you can continue
+
+ + An administrator has required that your account be protected with an authenticator app. + You'll need an app like Google Authenticator, Authy, or 1Password to continue. +
+ +
+
+
+
+
+
+ Save Your Backup Codes
+ Store these somewhere safe — they won't be shown again
+
+ + These {mfaEnforceBackupCodes.length} codes can each be used once if you lose access to + your authenticator app. MFA is now active on your account. +
+
+ {mfaEnforceBackupCodes.map((code, i) => (
+
+
+
+
+ {code}
+
+ ))}
+
+
+
+
+
+
+ Scan QR Code
+ Add UMBRA to your authenticator app
+
+
+ 
+
+ + Can't scan? Enter this code manually in your app: +
+
+ {mfaEnforceSecret}
+
+
+
+
+
+
+
+
+ Verify Your Authenticator
+ Enter the 6-digit code shown in your app
+
+
+
+ setMfaEnforceCode(e.target.value.replace(/\D/g, ''))}
+ className="text-center tracking-widest text-lg"
+ autoFocus
+ autoComplete="one-time-code"
+ onKeyDown={(e) => { if (e.key === 'Enter') handleMfaEnforceConfirm(); }}
+ />
+
+
+
+
+
+
+
+
+
+ {isSetup ? 'Welcome to UMBRA' : 'Sign in'}
+
+ {isSetup ? 'Create your account to get started' : 'Enter your credentials to continue'}
+
+
+
+
+
+ )}
+
+
+ {/* Open registration link — only shown on login screen when enabled */}
+ {!isSetup && registrationOpen && (
+ {loginError}
+
+
+
+ )}
+
+
+
+
+
+
+ Create Account
+ Register for access to UMBRA
+
+
+
+
+
+
+
+
+
+
+ Password Change Required
+ An administrator has reset your password. Please set a new one.
+
+
-
-
-
-
-
- Two-Factor Authentication
-
- {useBackupCode
- ? 'Enter one of your backup codes'
- : 'Enter the code from your authenticator app'}
-
-
-
-
-
-
-
-
- {isSetup ? 'Welcome to UMBRA' : 'Sign in'}
-
- {isSetup
- ? 'Create your account to get started'
- : 'Enter your credentials to continue'}
-
-
-
-
-
- )}
-
-
- {lockoutMessage}
-