Add user profile page, password change, reset links, auto-seed RBAC

Backend:
- POST /v1/auth/change-password (current user)
- POST /v1/auth/reset-password/:userId (admin generates 24h signed link)
- POST /v1/auth/reset-password (token-based reset, no auth required)
- GET/PATCH /v1/auth/me (profile read/update)
- Auto-seed system permissions on server startup

Frontend:
- Profile page with name edit, password change, theme/color settings
- Sidebar user link goes to profile page (replaces dropdown)
- Users page: "Reset Password Link" in kebab (copies to clipboard)
- Sign out button below profile link

packages/admin/src/routes/_authenticated.tsx

@@ -1,20 +1,7 @@
 import { createFileRoute, Outlet, Link, redirect, useRouter } from '@tanstack/react-router'
 import { useAuthStore } from '@/stores/auth.store'
-import { useThemeStore } from '@/stores/theme.store'
-import { themes } from '@/lib/themes'
 import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-} from '@/components/ui/dropdown-menu'
-import { Users, UserRound, HelpCircle, Shield, UserCog, Sun, Moon, Monitor, LogOut, User, Palette } from 'lucide-react'
+import { Users, UserRound, HelpCircle, Shield, UserCog, LogOut, User } from 'lucide-react'
 
 export const Route = createFileRoute('/_authenticated')({
   beforeLoad: () => {
@@ -26,18 +13,10 @@ export const Route = createFileRoute('/_authenticated')({
   component: AuthenticatedLayout,
 })
 
-function ModeIcon() {
-  const mode = useThemeStore((s) => s.mode)
-  if (mode === 'dark') return <Moon className="h-4 w-4" />
-  if (mode === 'light') return <Sun className="h-4 w-4" />
-  return <Monitor className="h-4 w-4" />
-}
-
 function AuthenticatedLayout() {
   const router = useRouter()
   const user = useAuthStore((s) => s.user)
   const logout = useAuthStore((s) => s.logout)
-  const { mode, colorTheme, setMode, setColorTheme } = useThemeStore()
 
   function handleLogout() {
     logout()
@@ -98,64 +77,24 @@ function AuthenticatedLayout() {
             </Link>
           </div>
 
-          <div className="p-3 border-t border-sidebar-border">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="w-full justify-start gap-2 text-sm text-sidebar-foreground">
-                  <User className="h-4 w-4" />
-                  <span className="truncate">{user?.firstName} {user?.lastName}</span>
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="w-48">
-                <DropdownMenuLabel className="font-normal">
-                  <p className="text-sm font-medium">{user?.firstName} {user?.lastName}</p>
-                  <p className="text-xs text-muted-foreground">{user?.email}</p>
-                </DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger>
-                    <ModeIcon />
-                    <span className="ml-2">Mode</span>
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuSubContent>
-                    <DropdownMenuItem onClick={() => setMode('light')}>
-                      <Sun className="mr-2 h-4 w-4" />
-                      Light {mode === 'light' && '•'}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => setMode('dark')}>
-                      <Moon className="mr-2 h-4 w-4" />
-                      Dark {mode === 'dark' && '•'}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => setMode('system')}>
-                      <Monitor className="mr-2 h-4 w-4" />
-                      System {mode === 'system' && '•'}
-                    </DropdownMenuItem>
-                  </DropdownMenuSubContent>
-                </DropdownMenuSub>
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger>
-                    <Palette className="h-4 w-4" />
-                    <span className="ml-2">Color</span>
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuSubContent>
-                    {themes.map((t) => (
-                      <DropdownMenuItem key={t.name} onClick={() => setColorTheme(t.name)}>
-                        <span
-                          className="mr-2 h-4 w-4 rounded-full border inline-block"
-                          style={{ backgroundColor: `hsl(${t.light.primary})` }}
-                        />
-                        {t.label} {colorTheme === t.name && '•'}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuSubContent>
-                </DropdownMenuSub>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem onClick={handleLogout}>
-                  <LogOut className="mr-2 h-4 w-4" />
-                  Sign out
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+          <div className="p-3 border-t border-sidebar-border space-y-1">
+            <Link
+              to="/profile"
+              className="flex items-center gap-2 px-3 py-2 rounded-md text-sm text-sidebar-foreground hover:bg-sidebar-accent w-full"
+              activeProps={{ className: 'flex items-center gap-2 px-3 py-2 rounded-md text-sm bg-sidebar-accent text-sidebar-accent-foreground w-full' }}
+            >
+              <User className="h-4 w-4" />
+              <span className="truncate">{user?.firstName} {user?.lastName}</span>
+            </Link>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="w-full justify-start gap-2 text-sm text-sidebar-foreground/70 hover:text-sidebar-foreground"
+              onClick={handleLogout}
+            >
+              <LogOut className="h-4 w-4" />
+              Sign out
+            </Button>
           </div>
         </nav>
         <main className="flex-1 p-6">

packages/admin/src/routes/_authenticated/profile.tsx

@@ -0,0 +1,192 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { queryOptions } from '@tanstack/react-query'
+import { api } from '@/lib/api-client'
+import { useAuthStore } from '@/stores/auth.store'
+import { useThemeStore } from '@/stores/theme.store'
+import { themes } from '@/lib/themes'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Separator } from '@/components/ui/separator'
+import { Sun, Moon, Monitor } from 'lucide-react'
+import { toast } from 'sonner'
+
+export const Route = createFileRoute('/_authenticated/profile')({
+  component: ProfilePage,
+})
+
+function profileOptions() {
+  return queryOptions({
+    queryKey: ['auth', 'me'],
+    queryFn: () => api.get<{ id: string; email: string; firstName: string; lastName: string }>('/v1/auth/me'),
+  })
+}
+
+function ProfilePage() {
+  const queryClient = useQueryClient()
+  const setAuth = useAuthStore((s) => s.setAuth)
+  const storeUser = useAuthStore((s) => s.user)
+  const storeToken = useAuthStore((s) => s.token)
+  const { mode, colorTheme, setMode, setColorTheme } = useThemeStore()
+
+  const { data: profile } = useQuery(profileOptions())
+
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [nameLoaded, setNameLoaded] = useState(false)
+
+  if (profile && !nameLoaded) {
+    setFirstName(profile.firstName)
+    setLastName(profile.lastName)
+    setNameLoaded(true)
+  }
+
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+
+  const updateProfileMutation = useMutation({
+    mutationFn: (data: Record<string, unknown>) => api.patch<{ id: string; email: string; firstName: string; lastName: string }>('/v1/auth/me', data),
+    onSuccess: (updated) => {
+      queryClient.invalidateQueries({ queryKey: ['auth', 'me'] })
+      if (storeToken && storeUser) {
+        setAuth(storeToken, { ...storeUser, firstName: updated.firstName, lastName: updated.lastName })
+      }
+      toast.success('Profile updated')
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const changePasswordMutation = useMutation({
+    mutationFn: () => api.post('/v1/auth/change-password', { currentPassword, newPassword }),
+    onSuccess: () => {
+      setCurrentPassword('')
+      setNewPassword('')
+      setConfirmPassword('')
+      toast.success('Password changed')
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  function handlePasswordChange() {
+    if (newPassword.length < 12) {
+      toast.error('Password must be at least 12 characters')
+      return
+    }
+    if (newPassword !== confirmPassword) {
+      toast.error('Passwords do not match')
+      return
+    }
+    changePasswordMutation.mutate()
+  }
+
+  return (
+    <div className="space-y-6 max-w-2xl">
+      <h1 className="text-2xl font-bold">Profile</h1>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">Account</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label>Email</Label>
+            <Input value={profile?.email ?? ''} disabled className="opacity-60" />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>First Name</Label>
+              <Input value={firstName} onChange={(e) => setFirstName(e.target.value)} />
+            </div>
+            <div className="space-y-2">
+              <Label>Last Name</Label>
+              <Input value={lastName} onChange={(e) => setLastName(e.target.value)} />
+            </div>
+          </div>
+          <Button
+            onClick={() => updateProfileMutation.mutate({ firstName, lastName })}
+            disabled={updateProfileMutation.isPending}
+          >
+            {updateProfileMutation.isPending ? 'Saving...' : 'Save'}
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">Change Password</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label>Current Password</Label>
+            <Input type="password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label>New Password</Label>
+            <Input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label>Confirm New Password</Label>
+            <Input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
+          </div>
+          <Button onClick={handlePasswordChange} disabled={changePasswordMutation.isPending}>
+            {changePasswordMutation.isPending ? 'Changing...' : 'Change Password'}
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">Appearance</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label>Mode</Label>
+            <div className="flex gap-2">
+              {[
+                { value: 'light' as const, icon: Sun, label: 'Light' },
+                { value: 'dark' as const, icon: Moon, label: 'Dark' },
+                { value: 'system' as const, icon: Monitor, label: 'System' },
+              ].map((m) => (
+                <Button
+                  key={m.value}
+                  variant={mode === m.value ? 'default' : 'secondary'}
+                  size="sm"
+                  onClick={() => setMode(m.value)}
+                >
+                  <m.icon className="mr-2 h-4 w-4" />
+                  {m.label}
+                </Button>
+              ))}
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="space-y-2">
+            <Label>Color Theme</Label>
+            <div className="flex gap-2 flex-wrap">
+              {themes.map((t) => (
+                <Button
+                  key={t.name}
+                  variant={colorTheme === t.name ? 'default' : 'secondary'}
+                  size="sm"
+                  onClick={() => setColorTheme(t.name)}
+                >
+                  <span
+                    className="mr-2 h-3 w-3 rounded-full border inline-block"
+                    style={{ backgroundColor: `hsl(${t.light.primary})` }}
+                  />
+                  {t.label}
+                </Button>
+              ))}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

packages/admin/src/routes/_authenticated/users.tsx

@@ -15,7 +15,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { MoreVertical, Shield, Plus, X } from 'lucide-react'
+import { MoreVertical, Shield, Plus, X, KeyRound } from 'lucide-react'
 import { toast } from 'sonner'
 import { queryOptions } from '@tanstack/react-query'
 
@@ -181,6 +181,18 @@ function UsersPage() {
                           <Shield className="mr-2 h-4 w-4" />
                           Manage Roles
                         </DropdownMenuItem>
+                        <DropdownMenuItem onClick={async () => {
+                          try {
+                            const res = await api.post<{ resetLink: string }>(`/v1/auth/reset-password/${user.id}`, {})
+                            await navigator.clipboard.writeText(res.resetLink)
+                            toast.success('Reset link copied to clipboard')
+                          } catch (err) {
+                            toast.error(err instanceof Error ? err.message : 'Failed to generate link')
+                          }
+                        }}>
+                          <KeyRound className="mr-2 h-4 w-4" />
+                          Reset Password Link
+                        </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
                   </TableCell>