feat: standardize shared UI primitives across frontend

2026-02-23 02:14:37 -05:00
parent 97cd297f46
commit 6a76e61792
20 changed files with 265 additions and 188 deletions
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -11,8 +11,8 @@ export const apiClient = axios.create({
  },
 })

-// Global error handler - shows toast for common API errors
-// Pages can still catch errors explicitly if they need custom handling
+// Global error handler for shared cases only.
+// By convention, 4xx errors are handled at the page/component level.
 function handleGlobalError(error: AxiosError) {
  // Network error (no response from server)
  if (!error.response) {
@@ -43,9 +43,8 @@ function handleGlobalError(error: AxiosError) {
    return
  }

-  // Client errors (4xx) — don't toast globally.
-  // Pages handle their own 4xx errors (permission checks, validation, not-found)
-  // and many are caught silently. Global toasts here cause noisy duplicates.
+  // Client errors (4xx) remain page-owned to avoid duplicate/noisy toasts.
+  // Global handling only covers 401/429/5xx.
  if (status >= 400 && status < 500) {
    return
  }
--- a/frontend/src/components/admin/PageHeader.tsx
+++ b/frontend/src/components/admin/PageHeader.tsx
@@ -1,25 +1,2 @@
-import type { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-
-interface PageHeaderProps {
-  title: string
-  description?: string
-  action?: ReactNode
-  className?: string
-}
-
-export function PageHeader({ title, description, action, className }: PageHeaderProps) {
-  return (
-    <div className={cn('flex items-start justify-between gap-4', className)}>
-      <div>
-        <h1 className="text-2xl font-bold font-heading text-foreground">{title}</h1>
-        {description && (
-          <p className="mt-1 text-sm text-muted-foreground">{description}</p>
-        )}
-      </div>
-      {action && <div className="flex-shrink-0">{action}</div>}
-    </div>
-  )
-}
-
-export default PageHeader
+export { PageHeader } from '@/components/common/PageHeader'
+export { PageHeader as default } from '@/components/common/PageHeader'
--- a/frontend/src/components/common/PageHeader.tsx
+++ b/frontend/src/components/common/PageHeader.tsx
@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+interface PageHeaderProps {
+  title: string
+  description?: string
+  icon?: ReactNode
+  action?: ReactNode
+  className?: string
+  titleClassName?: string
+  descriptionClassName?: string
+}
+
+export function PageHeader({
+  title,
+  description,
+  icon,
+  action,
+  className,
+  titleClassName,
+  descriptionClassName,
+}: PageHeaderProps) {
+  return (
+    <div className={cn('flex items-start justify-between gap-4', className)}>
+      <div className="flex items-start gap-3">
+        {icon && <div className="shrink-0">{icon}</div>}
+        <div>
+          <h1 className={cn('text-2xl font-bold font-heading text-foreground', titleClassName)}>
+            {title}
+          </h1>
+          {description && (
+            <p className={cn('mt-1 text-sm text-muted-foreground', descriptionClassName)}>
+              {description}
+            </p>
+          )}
+        </div>
+      </div>
+      {action && <div className="shrink-0">{action}</div>}
+    </div>
+  )
+}
+
+export default PageHeader
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback } from 'react'
 import { Outlet, useLocation, useNavigate, Link } from 'react-router-dom'
-import { Menu, X, LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Users, Settings, LogOut, Shield } from 'lucide-react'
+import { Menu, X, LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Settings, LogOut, Shield } from 'lucide-react'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
@@ -55,8 +55,7 @@ export function AppLayout() {
    { path: '/sessions', label: 'Sessions', icon: Clock },
    { path: '/shares', label: 'Exports', icon: FileText },
    { path: '/step-library', label: 'Step Library', icon: Bookmark },
-    { path: '/account', label: 'Team', icon: Users },
-    { path: '/account', label: 'Settings', icon: Settings },
+    { path: '/account', label: 'Account', icon: Settings },
  ]

  return (
--- a/frontend/src/components/layout/ProtectedRoute.tsx
+++ b/frontend/src/components/layout/ProtectedRoute.tsx
@@ -1,6 +1,7 @@
 import { Navigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions, type EffectiveRole } from '@/hooks/usePermissions'
+import { Spinner } from '@/components/common/Spinner'

 interface ProtectedRouteProps {
  requiredRole?: EffectiveRole
@@ -15,7 +16,7 @@ export function ProtectedRoute({ requiredRole, children }: ProtectedRouteProps)
  if (isLoading) {
    return (
      <div className="flex h-screen items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
+        <Spinner className="border-t-foreground" />
      </div>
    )
  }
--- a/frontend/src/components/maintenance/BatchLaunchModal.tsx
+++ b/frontend/src/components/maintenance/BatchLaunchModal.tsx
@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
 import { targetListsApi, batchLaunchApi } from '@/api'
 import type { TargetList, TargetEntry } from '@/types'
+import { Spinner } from '@/components/common/Spinner'

 interface BatchLaunchModalProps {
  treeId: string
@@ -127,7 +128,7 @@ export function BatchLaunchModal({ treeId, treeName, onClose, onLaunched }: Batc
            <div className="space-y-2">
              {savedLists === null ? (
                <div className="flex h-24 items-center justify-center">
-                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+                  <Spinner size="sm" className="border-primary border-t-transparent" />
                </div>
              ) : savedLists.length === 0 ? (
                <p className="text-[0.875rem] text-muted-foreground">
--- a/frontend/src/components/session/ShareSessionModal.tsx
+++ b/frontend/src/components/session/ShareSessionModal.tsx
@@ -5,6 +5,7 @@ import { sessionsApi } from '@/api/sessions'
 import { buildSessionShareUrl, filterSharesForSession } from '@/lib/sessionShare'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
+import { Spinner } from '@/components/common/Spinner'

 interface ShareSessionModalProps {
  sessionId: string
@@ -406,7 +407,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
          {/* Loading state */}
          {isLoadingShares && shares.length === 0 && (
            <div className="flex items-center justify-center py-4">
-              <div className="h-5 w-5 animate-spin rounded-full border-2 border-border border-t-foreground" />
+              <Spinner size="sm" className="h-5 w-5 border-t-foreground" />
            </div>
          )}
        </div>
--- a/frontend/src/components/step-library/CustomStepModal.tsx
+++ b/frontend/src/components/step-library/CustomStepModal.tsx
@@ -5,6 +5,7 @@ import { usePermissions } from '@/hooks/usePermissions'
 import { StepForm } from './StepForm'
 import { StepLibraryBrowser } from './StepLibraryBrowser'
 import type { Step, StepCreate } from '@/types/step'
+import { Spinner } from '@/components/common/Spinner'

 export interface CustomStepDraft {
  title: string
@@ -134,7 +135,7 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
        {isSubmitting && (
          <div className="absolute inset-0 flex items-center justify-center bg-black/80 backdrop-blur-sm">
            <div className="flex flex-col items-center gap-3">
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
+              <Spinner className="border-t-foreground" />
              <p className="text-sm text-muted-foreground">Creating step...</p>
            </div>
          </div>
--- a/frontend/src/components/tree-editor/TreeEditorLayout.tsx
+++ b/frontend/src/components/tree-editor/TreeEditorLayout.tsx
@@ -5,6 +5,7 @@ import { NodeEditorPanel } from './NodeEditorPanel'
 import { MetadataSidePanel } from './MetadataSidePanel'
 import { useTreeEditorStore } from '@/store/treeEditorStore'
 import { cn } from '@/lib/utils'
+import { Spinner } from '@/components/common/Spinner'

 // Lazy load CodeModeEditor (Monaco is ~2MB)
 const CodeModeEditor = lazy(() =>
@@ -46,7 +47,7 @@ export function TreeEditorLayout({
          )}>
            <Suspense fallback={
              <div className="flex h-full items-center justify-center bg-card">
-                <div className="h-6 w-6 animate-spin rounded-full border-2 border-border border-t-foreground" />
+                <Spinner size="sm" className="h-6 w-6 border-t-foreground" />
              </div>
            }>
              <CodeModeEditor />
--- a/frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx
+++ b/frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx
@@ -9,6 +9,7 @@ import { createCompletionProvider } from './resolutionFlowCompletions'
 import { CodeModeToolbar } from './CodeModeToolbar'
 import { SyntaxHelpPanel } from './SyntaxHelpPanel'
 import { setMonacoEditor } from './monacoEditorRef'
+import { Spinner } from '@/components/common/Spinner'

 export function CodeModeEditor() {
  const editorRef = useRef<MonacoEditor.IStandaloneCodeEditor | null>(null)
@@ -167,7 +168,7 @@ export function CodeModeEditor() {
          onMount={handleEditorDidMount}
          loading={
            <div className="flex h-full items-center justify-center bg-card">
-              <div className="h-6 w-6 animate-spin rounded-full border-2 border-border border-t-foreground" />
+              <Spinner size="sm" className="h-6 w-6 border-t-foreground" />
            </div>
          }
          options={{
--- a/frontend/src/pages/AccountSettingsPage.tsx
+++ b/frontend/src/pages/AccountSettingsPage.tsx
@@ -138,12 +138,10 @@ export function AccountSettingsPage() {

  if (error) {
    return (
-      <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
-        <div className="rounded-md border border-red-400/20 bg-red-400/10 p-4 text-red-400">
-          <div className="flex items-center gap-2">
-            <AlertCircle className="h-5 w-5" />
-            {error}
-          </div>
+      <div className="rounded-md border border-red-400/20 bg-red-400/10 p-4 text-red-400">
+        <div className="flex items-center gap-2">
+          <AlertCircle className="h-5 w-5" />
+          {error}
        </div>
      </div>
    )
@@ -152,7 +150,7 @@ export function AccountSettingsPage() {
  const sub = subscription?.subscription

  return (
-    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
+    <div>
      <div className="mb-8">
        <div className="flex items-center gap-3">
          <Building2 className="h-8 w-8 text-muted-foreground" />
--- a/frontend/src/pages/ForgotPasswordPage.tsx
+++ b/frontend/src/pages/ForgotPasswordPage.tsx
@@ -35,7 +35,7 @@ export function ForgotPasswordPage() {
              <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
            </div>
          </div>
-          <h1 className="text-3xl font-bold text-foreground tracking-tight">
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
            Reset Password
          </h1>
          <p className="mt-2 text-sm text-muted-foreground">
--- a/frontend/src/pages/MaintenanceFlowDetailPage.tsx
+++ b/frontend/src/pages/MaintenanceFlowDetailPage.tsx
@@ -5,6 +5,9 @@ import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
 import { maintenanceSchedulesApi } from '@/api/maintenanceSchedules'
 import { BatchLaunchModal } from '@/components/maintenance/BatchLaunchModal'
+import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
+import { PageHeader } from '@/components/common/PageHeader'
 import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
 import type { Tree, MaintenanceSchedule, Session } from '@/types'
@@ -64,12 +67,29 @@ export default function MaintenanceFlowDetailPage() {
  if (isLoading) {
    return (
      <div className="flex h-64 items-center justify-center">
-        <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+        <Spinner size="sm" className="h-6 w-6 border-primary border-t-transparent" />
      </div>
    )
  }

-  if (!tree) return null
+  if (!tree) {
+    return (
+      <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
+        <EmptyState
+          title="Maintenance flow not found"
+          description="This flow is unavailable or you do not have access."
+          action={(
+            <button
+              onClick={() => navigate('/trees?type=maintenance')}
+              className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              Back to Maintenance Flows
+            </button>
+          )}
+        />
+      </div>
+    )
+  }

  // Group sessions by batch_id for run history
  const batchMap = new Map<string, Session[]>()
@@ -81,43 +101,42 @@ export default function MaintenanceFlowDetailPage() {
  const batches = Array.from(batchMap.entries()).slice(0, 10)

  return (
-    <div className="mx-auto max-w-4xl space-y-6 p-6">
+    <div className="container mx-auto max-w-4xl space-y-6 px-4 py-6 sm:px-6 sm:py-8">
      {/* Header */}
-      <div className="flex items-start justify-between">
-        <div className="flex items-center gap-3">
+      <PageHeader
+        title={tree.name}
+        description={tree.description || undefined}
+        icon={(
          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-500/10 text-amber-400">
            <Wrench className="h-5 w-5" />
          </div>
-          <div>
-            <h1 className="text-xl font-semibold text-foreground">{tree.name}</h1>
-            {tree.description && (
-              <p className="text-[0.8125rem] text-muted-foreground">{tree.description}</p>
-            )}
+        )}
+        titleClassName="text-xl font-semibold"
+        action={(
+          <div className="flex gap-2">
+            <button
+              onClick={() => navigate(`/flows/${id}/edit`)}
+              className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              <Settings className="h-3.5 w-3.5" />
+              Edit Flow
+            </button>
+            <button
+              onClick={() => navigate(`/flows/${id}/navigate`)}
+              className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
+            >
+              <Play className="h-3.5 w-3.5" />
+              Run
+            </button>
+            <button
+              onClick={() => setShowBatchModal(true)}
+              className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              Batch Launch
+            </button>
          </div>
-        </div>
-        <div className="flex gap-2">
-          <button
-            onClick={() => navigate(`/flows/${id}/edit`)}
-            className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
-            <Settings className="h-3.5 w-3.5" />
-            Edit Flow
-          </button>
-          <button
-            onClick={() => navigate(`/flows/${id}/navigate`)}
-            className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
-          >
-            <Play className="h-3.5 w-3.5" />
-            Run
-          </button>
-          <button
-            onClick={() => setShowBatchModal(true)}
-            className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
-            Batch Launch
-          </button>
-        </div>
-      </div>
+        )}
+      />

      {/* Schedule Panel */}
      <div className="rounded-xl border border-border bg-card p-5">
--- a/frontend/src/pages/MyAnalyticsPage.tsx
+++ b/frontend/src/pages/MyAnalyticsPage.tsx
@@ -11,6 +11,7 @@ import {
  ResponsiveContainer,
 } from 'recharts'
 import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
 import { analyticsApi } from '@/api'
 import { usePermissions } from '@/hooks/usePermissions'
 import type { PersonalAnalyticsResponse, AnalyticsPeriod } from '@/types'
@@ -54,8 +55,11 @@ export default function MyAnalyticsPage() {

  if (!data) {
    return (
-      <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-muted-foreground">Failed to load analytics data.</p>
+      <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
+        <EmptyState
+          title="Analytics unavailable"
+          description="Failed to load analytics data. Please try again."
+        />
      </div>
    )
  }
--- a/frontend/src/pages/TeamAnalyticsPage.tsx
+++ b/frontend/src/pages/TeamAnalyticsPage.tsx
@@ -11,8 +11,10 @@ import {
  ResponsiveContainer,
 } from 'recharts'
 import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
 import { analyticsApi } from '@/api'
 import { usePermissions } from '@/hooks/usePermissions'
+import { toast } from '@/lib/toast'
 import type { TeamAnalyticsResponse, AnalyticsPeriod } from '@/types'

 const CHART_COLORS = {
@@ -46,6 +48,12 @@ export default function TeamAnalyticsPage() {
      .finally(() => setLoading(false))
  }, [period, isAccountOwner, isSuperAdmin])

+  useEffect(() => {
+    if (!isAccountOwner && !isSuperAdmin) {
+      toast.info('Viewing your personal analytics', { id: 'analytics-redirect' })
+    }
+  }, [isAccountOwner, isSuperAdmin])
+
  if (!isAccountOwner && !isSuperAdmin) {
    return <Navigate to="/analytics/me" replace />
  }
@@ -60,8 +68,11 @@ export default function TeamAnalyticsPage() {

  if (!data) {
    return (
-      <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-muted-foreground">Failed to load analytics data.</p>
+      <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
+        <EmptyState
+          title="Analytics unavailable"
+          description="Failed to load analytics data. Please try again."
+        />
      </div>
    )
  }
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -21,6 +21,8 @@ import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore'
 import { useCachedQuota } from '@/hooks/useCachedQuota'
 import { AIFlowBuilderModal } from '@/components/ai-builder/AIFlowBuilderModal'
 import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
+import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
 import { toast } from '@/lib/toast'

 export function TreeLibraryPage() {
@@ -465,13 +467,17 @@ export function TreeLibraryPage() {
          {/* Loading State */}
          {isLoading ? (
            <div className="flex justify-center py-12">
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-primary" />
+              <Spinner />
            </div>
          ) : trees.length === 0 ? (
-            <div className="py-12 text-center text-muted-foreground">
-              No flows found.{' '}
-              {(searchQuery || hasActiveFilters) && 'Try adjusting your filters.'}
-            </div>
+            <EmptyState
+              title="No flows found"
+              description={
+                (searchQuery || hasActiveFilters)
+                  ? 'Try adjusting your filters.'
+                  : 'Create your first flow to get started.'
+              }
+            />
          ) : (
            <>
              {treeLibraryView === 'grid' && (
--- a/frontend/src/pages/TreeNavigationPage.tsx
+++ b/frontend/src/pages/TreeNavigationPage.tsx
@@ -795,7 +795,7 @@ export function TreeNavigationPage() {
                  {index < 9 && (
                    selectingOption === option.id ? (
                      <span className="flex h-6 w-6 shrink-0 items-center justify-center">
-                        <span className="h-4 w-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
+                        <Spinner size="sm" className="h-4 w-4 border-t-foreground" />
                      </span>
                    ) : (
                      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-accent text-xs font-medium text-muted-foreground">
--- a/frontend/src/pages/account/TargetListsPage.tsx
+++ b/frontend/src/pages/account/TargetListsPage.tsx
@@ -4,6 +4,10 @@ import { targetListsApi } from '@/api'
 import type { TargetList, TargetListCreate, TargetEntry } from '@/types'
 import { toast } from '@/lib/toast'
 import { ConfirmDialog } from '@/components/common/ConfirmDialog'
+import { Modal } from '@/components/common/Modal'
+import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
+import { PageHeader } from '@/components/common/PageHeader'

 export default function TargetListsPage() {
  const [lists, setLists] = useState<TargetList[]>([])
@@ -103,34 +107,31 @@ export default function TargetListsPage() {

  return (
    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-xl font-semibold text-foreground">Target Lists</h1>
-          <p className="text-[0.8125rem] text-muted-foreground">
-            Saved server lists for maintenance flow batch launching
-          </p>
-        </div>
-        <button
-          onClick={() => openEditor()}
-          className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
-        >
-          <Plus className="h-4 w-4" />
-          New List
-        </button>
-      </div>
+      <PageHeader
+        title="Target Lists"
+        titleClassName="text-xl font-semibold"
+        description="Saved server lists for maintenance flow batch launching"
+        action={(
+          <button
+            onClick={() => openEditor()}
+            className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
+          >
+            <Plus className="h-4 w-4" />
+            New List
+          </button>
+        )}
+      />

      {isLoading ? (
        <div className="flex h-32 items-center justify-center">
-          <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+          <Spinner size="sm" className="h-5 w-5 border-primary border-t-transparent" />
        </div>
      ) : lists.length === 0 ? (
-        <div className="flex flex-col items-center justify-center rounded-xl border border-border bg-card py-12 text-center">
-          <Server className="mb-3 h-10 w-10 text-muted-foreground" />
-          <p className="font-medium text-foreground">No target lists yet</p>
-          <p className="mt-1 text-[0.8125rem] text-muted-foreground">
-            Create lists of servers to reuse across maintenance runs
-          </p>
-        </div>
+        <EmptyState
+          icon={<Server className="h-10 w-10" />}
+          title="No target lists yet"
+          description="Create lists of servers to reuse across maintenance runs."
+        />
      ) : (
        <div className="space-y-3">
          {lists.map(list => (
@@ -172,68 +173,68 @@ export default function TargetListsPage() {
      )}

      {/* Editor Modal */}
-      {showEditor && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
-          <div className="w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-2xl">
-            <h2 className="mb-4 text-base font-semibold text-foreground">
-              {editingList ? 'Edit Target List' : 'New Target List'}
-            </h2>
-            <div className="space-y-4">
-              <div>
-                <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
-                  Name
-                </label>
-                <input
-                  type="text"
-                  value={editorName}
-                  onChange={e => setEditorName(e.target.value)}
-                  className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
-                  placeholder="e.g. RDS Farm A"
-                />
-              </div>
-              <div>
-                <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
-                  Description (optional)
-                </label>
-                <input
-                  type="text"
-                  value={editorDescription}
-                  onChange={e => setEditorDescription(e.target.value)}
-                  className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
-                  placeholder="e.g. Production RDS servers"
-                />
-              </div>
-              <div>
-                <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
-                  Targets &mdash; one per line (add notes after #)
-                </label>
-                <textarea
-                  value={editorTargets}
-                  onChange={e => setEditorTargets(e.target.value)}
-                  rows={6}
-                  className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
-                  placeholder={"RDS-01 # 192.168.1.10\nRDS-02\nRDS-03 # Backup server"}
-                />
-              </div>
-            </div>
-            <div className="mt-6 flex justify-end gap-2">
-              <button
-                onClick={() => setShowEditor(false)}
-                className="rounded-lg border border-border px-4 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleSave}
-                disabled={isSaving}
-                className="rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
-              >
-                {isSaving ? 'Saving\u2026' : 'Save'}
-              </button>
-            </div>
+      <Modal
+        isOpen={showEditor}
+        onClose={() => setShowEditor(false)}
+        title={editingList ? 'Edit Target List' : 'New Target List'}
+        size="md"
+        footer={(
+          <div className="flex justify-end gap-2">
+            <button
+              onClick={() => setShowEditor(false)}
+              className="rounded-lg border border-border px-4 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSave}
+              disabled={isSaving}
+              className="rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
+            >
+              {isSaving ? 'Saving\u2026' : 'Save'}
+            </button>
+          </div>
+        )}
+      >
+        <div className="space-y-4">
+          <div>
+            <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+              Name
+            </label>
+            <input
+              type="text"
+              value={editorName}
+              onChange={e => setEditorName(e.target.value)}
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              placeholder="e.g. RDS Farm A"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+              Description (optional)
+            </label>
+            <input
+              type="text"
+              value={editorDescription}
+              onChange={e => setEditorDescription(e.target.value)}
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              placeholder="e.g. Production RDS servers"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+              Targets &mdash; one per line (add notes after #)
+            </label>
+            <textarea
+              value={editorTargets}
+              onChange={e => setEditorTargets(e.target.value)}
+              rows={6}
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              placeholder={"RDS-01 # 192.168.1.10\nRDS-02\nRDS-03 # Backup server"}
+            />
          </div>
        </div>
-      )}
+      </Modal>

      {deleteTarget && (
        <ConfirmDialog
--- a/frontend/src/pages/account/TeamCategoriesPage.tsx
+++ b/frontend/src/pages/account/TeamCategoriesPage.tsx
@@ -3,6 +3,7 @@ import { Plus, Trash2, Pencil, FolderTree } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
 import { Modal } from '@/components/common/Modal'
+import { PageHeader } from '@/components/common/PageHeader'
 import api from '@/api/client'

 interface TeamCategory {
@@ -80,17 +81,17 @@ export function TeamCategoriesPage() {
  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20')

  return (
-    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
-      <div className="mb-6 flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold font-heading text-foreground">Team Categories</h1>
-          <p className="mt-1 text-sm text-muted-foreground">Manage tree categories for your team</p>
-        </div>
-        <button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>
-          <Plus className="h-4 w-4" />
-          Create Category
-        </button>
-      </div>
+    <div className="space-y-6">
+      <PageHeader
+        title="Team Categories"
+        description="Manage tree categories for your team"
+        action={(
+          <button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>
+            <Plus className="h-4 w-4" />
+            Create Category
+          </button>
+        )}
+      />

      {loading ? (
        <div className="space-y-3">
--- a/frontend/src/pages/admin/UserDetailPage.tsx
+++ b/frontend/src/pages/admin/UserDetailPage.tsx
@@ -3,6 +3,8 @@ import { useParams, useNavigate } from 'react-router-dom'
 import { ArrowLeft, Shield, Crown, UserCheck, UserX, Clock, Ticket, KeyRound, Copy, Check, Archive, ArchiveRestore, Trash2 } from 'lucide-react'
 import { StatusBadge } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
+import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
 import { adminApi } from '@/api/admin'
 import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
@@ -177,14 +179,25 @@ export function UserDetailPage() {
  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
-        <div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-foreground" />
+        <Spinner className="border-t-foreground" />
      </div>
    )
  }

  if (!user) {
    return (
-      <div className="py-20 text-center text-muted-foreground">User not found</div>
+      <EmptyState
+        title="User not found"
+        description="This user may have been removed or is unavailable."
+        action={(
+          <button
+            onClick={() => navigate('/admin/users')}
+            className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            Back to Users
+          </button>
+        )}
+      />
    )
  }

@@ -202,7 +215,7 @@ export function UserDetailPage() {
          <ArrowLeft className="h-4 w-4" />
        </button>
        <div className="flex-1">
-          <h1 className="text-xl font-semibold text-foreground">
+          <h1 className="text-xl font-heading font-semibold text-foreground">
            {user.full_name || user.email}
          </h1>
          <p className="text-sm text-muted-foreground">{user.email}</p>