diff --git a/apps/web/next.config.ts b/apps/web/next.config.ts
index 8ee077a..be5b7c4 100644
--- a/apps/web/next.config.ts
+++ b/apps/web/next.config.ts
@@ -1,9 +1,9 @@
 import path from "path";
 import type { NextConfig } from "next";
-import { withSentryConfig } from "@sentry/nextjs";
 
 const nextConfig: NextConfig = {
   output: "standalone",
+  devIndicators: false,
   experimental: {
     optimizePackageImports: ["recharts", "date-fns"],
   },
@@ -45,10 +45,20 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default withSentryConfig(nextConfig, {
-  silent: true,
-  sourcemaps: {
-    disable: true,
-  },
-  telemetry: false,
-});
+// Only wrap with Sentry in production — the worker.js crash in dev mode
+// (vendor-chunks/lib/worker.js MODULE_NOT_FOUND) makes the dev server unstable
+// Sentry only in production — dynamic import avoids side effects in dev
+let exportedConfig: NextConfig = nextConfig;
+if (process.env.NODE_ENV === "production") {
+  try {
+    const { withSentryConfig } = require("@sentry/nextjs");
+    exportedConfig = withSentryConfig(nextConfig, {
+      silent: true,
+      sourcemaps: { disable: true },
+      telemetry: false,
+    });
+  } catch {
+    // Sentry not available — use raw config
+  }
+}
+export default exportedConfig;
diff --git a/apps/web/package.json b/apps/web/package.json
index 6d38115..714d174 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,6 +11,9 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@node-rs/argon2": "^2.0.2",
     "@planarchy/api": "workspace:*",
     "@planarchy/application": "workspace:*",
diff --git a/apps/web/public/manifest.json b/apps/web/public/manifest.json
index 858c56e..87ff8bf 100644
--- a/apps/web/public/manifest.json
+++ b/apps/web/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "name": "Planarchy — Resource Planning",
-  "short_name": "Planarchy",
+  "name": "CapaKraken — Resource & Capacity Planning",
+  "short_name": "CapaKraken",
   "description": "Resource planning and project staffing for 3D production",
   "start_url": "/dashboard",
   "display": "standalone",
diff --git a/apps/web/src/app/(app)/admin/activity-log/page.tsx b/apps/web/src/app/(app)/admin/activity-log/page.tsx
new file mode 100644
index 0000000..292f6f6
--- /dev/null
+++ b/apps/web/src/app/(app)/admin/activity-log/page.tsx
@@ -0,0 +1,5 @@
+import { ActivityLogClient } from "~/components/admin/ActivityLogClient.js";
+
+export default function ActivityLogPage() {
+  return <ActivityLogClient />;
+}
diff --git a/apps/web/src/app/(app)/admin/dispo-imports/[batchId]/page.tsx b/apps/web/src/app/(app)/admin/dispo-imports/[batchId]/page.tsx
new file mode 100644
index 0000000..e6432b7
--- /dev/null
+++ b/apps/web/src/app/(app)/admin/dispo-imports/[batchId]/page.tsx
@@ -0,0 +1,10 @@
+import { DispoImportDetailClient } from "~/components/admin/DispoImportDetailClient.js";
+
+export default async function DispoImportDetailPage({
+  params,
+}: {
+  params: Promise<{ batchId: string }>;
+}) {
+  const { batchId } = await params;
+  return <DispoImportDetailClient batchId={batchId} />;
+}
diff --git a/apps/web/src/app/(app)/admin/dispo-imports/page.tsx b/apps/web/src/app/(app)/admin/dispo-imports/page.tsx
new file mode 100644
index 0000000..fd453eb
--- /dev/null
+++ b/apps/web/src/app/(app)/admin/dispo-imports/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function DispoImportRedirect() {
+  redirect("/admin/imports?tab=dispo");
+}
diff --git a/apps/web/src/app/(app)/admin/imports/page.tsx b/apps/web/src/app/(app)/admin/imports/page.tsx
new file mode 100644
index 0000000..21ed33c
--- /dev/null
+++ b/apps/web/src/app/(app)/admin/imports/page.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from "react";
+import dynamic from "next/dynamic";
+import { useSearchParams } from "next/navigation";
+
+const DispoImportClient = dynamic(
+  () => import("~/components/admin/DispoImportClient.js").then((m) => m.DispoImportClient),
+  { loading: () => <div className="p-6"><div className="h-8 w-48 shimmer-skeleton rounded" /><div className="mt-4 h-64 shimmer-skeleton rounded-xl" /></div> },
+);
+
+const BatchSkillImport = dynamic(
+  () => import("~/components/admin/BatchSkillImport.js").then((m) => m.BatchSkillImport),
+  { loading: () => <div className="p-6"><div className="h-8 w-48 shimmer-skeleton rounded" /><div className="mt-4 h-64 shimmer-skeleton rounded-xl" /></div> },
+);
+
+type Tab = "dispo" | "skills";
+
+const TABS: { key: Tab; label: string; description: string }[] = [
+  { key: "dispo", label: "Dispo Import", description: "Import planning data from Dispo V2 workbooks" },
+  { key: "skills", label: "Skill Matrix", description: "Import skill matrices from XLSX files" },
+];
+
+export default function ImportsPage() {
+  const searchParams = useSearchParams();
+  const initialTab = (searchParams.get("tab") as Tab) ?? "dispo";
+  const [activeTab, setActiveTab] = useState<Tab>(initialTab);
+
+  return (
+    <div className="app-page flex h-full flex-col gap-5 pb-6">
+      <div className="app-page-header">
+        <div>
+          <h1 className="app-page-title">Data Import</h1>
+          <p className="app-page-subtitle mt-1">Import planning data and skill matrices</p>
+        </div>
+      </div>
+
+      {/* Tab bar */}
+      <div className="flex border-b border-gray-200 dark:border-gray-700">
+        {TABS.map((tab) => (
+          <button
+            key={tab.key}
+            type="button"
+            onClick={() => setActiveTab(tab.key)}
+            className={`px-5 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
+              activeTab === tab.key
+                ? "border-brand-500 text-brand-600 dark:text-brand-400"
+                : "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <div className="flex-1 min-h-0">
+        {activeTab === "dispo" && <DispoImportClient />}
+        {activeTab === "skills" && <BatchSkillImport />}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(app)/admin/skill-import/page.tsx b/apps/web/src/app/(app)/admin/skill-import/page.tsx
index a3f2d05..f191481 100644
--- a/apps/web/src/app/(app)/admin/skill-import/page.tsx
+++ b/apps/web/src/app/(app)/admin/skill-import/page.tsx
@@ -1,5 +1,5 @@
-import { BatchSkillImport } from "~/components/admin/BatchSkillImport.js";
+import { redirect } from "next/navigation";
 
-export default function BatchSkillImportPage() {
-  return <BatchSkillImport />;
+export default function SkillImportRedirect() {
+  redirect("/admin/imports?tab=skills");
 }
diff --git a/apps/web/src/app/(app)/admin/vacations/page.tsx b/apps/web/src/app/(app)/admin/vacations/page.tsx
index fdf5a96..8ddf031 100644
--- a/apps/web/src/app/(app)/admin/vacations/page.tsx
+++ b/apps/web/src/app/(app)/admin/vacations/page.tsx
@@ -1,7 +1,7 @@
 import { PublicHolidayBatch } from "~/components/vacations/PublicHolidayBatch.js";
 import { EntitlementManager } from "~/components/vacations/EntitlementManager.js";
 
-export const metadata = { title: "Vacation Management — plANARCHY" };
+export const metadata = { title: "Vacation Management — CapaKraken" };
 
 export default function AdminVacationsPage() {
   return (
diff --git a/apps/web/src/app/(app)/analytics/skill-marketplace/page.tsx b/apps/web/src/app/(app)/analytics/skill-marketplace/page.tsx
index 57f5ef0..a57b7ae 100644
--- a/apps/web/src/app/(app)/analytics/skill-marketplace/page.tsx
+++ b/apps/web/src/app/(app)/analytics/skill-marketplace/page.tsx
@@ -1,5 +1,5 @@
-import { SkillMarketplace } from "~/components/analytics/SkillMarketplace.js";
+import { redirect } from "next/navigation";
 
 export default function SkillMarketplacePage() {
-  return <SkillMarketplace />;
+  redirect("/analytics/skills?tab=search");
 }
diff --git a/apps/web/src/app/(app)/analytics/skills/page.tsx b/apps/web/src/app/(app)/analytics/skills/page.tsx
index e2fbbeb..225165f 100644
--- a/apps/web/src/app/(app)/analytics/skills/page.tsx
+++ b/apps/web/src/app/(app)/analytics/skills/page.tsx
@@ -1,5 +1,5 @@
-import { SkillsAnalytics } from "~/components/analytics/SkillsAnalytics.js";
+import { SkillsHub } from "~/components/analytics/SkillsHub.js";
 
-export default function SkillsAnalyticsPage() {
-  return <SkillsAnalytics />;
+export default function SkillsHubPage() {
+  return <SkillsHub />;
 }
diff --git a/apps/web/src/app/(app)/estimates/EstimatesClient.tsx b/apps/web/src/app/(app)/estimates/EstimatesClient.tsx
index d92e1ac..205db5e 100644
--- a/apps/web/src/app/(app)/estimates/EstimatesClient.tsx
+++ b/apps/web/src/app/(app)/estimates/EstimatesClient.tsx
@@ -466,7 +466,7 @@ export function EstimatesClient() {
               No estimates yet
             </p>
             <p className="mt-2 text-sm text-gray-400 dark:text-gray-500">
-              Start with the wizard to create a connected estimate from plANARCHY data.
+              Start with the wizard to create a connected estimate from CapaKraken data.
             </p>
           </div>
         ) : (
diff --git a/apps/web/src/app/(app)/projects/ProjectsClient.tsx b/apps/web/src/app/(app)/projects/ProjectsClient.tsx
index 6f99a20..f05d6e3 100644
--- a/apps/web/src/app/(app)/projects/ProjectsClient.tsx
+++ b/apps/web/src/app/(app)/projects/ProjectsClient.tsx
@@ -27,6 +27,7 @@ import { useViewPrefs } from "~/hooks/useViewPrefs.js";
 import { useRowOrder } from "~/hooks/useRowOrder.js";
 import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
 import { DraggableTableRow } from "~/components/ui/DraggableTableRow.js";
+import { ShoringBadge } from "~/components/projects/ShoringIndicator.js";
 
 import { PROJECT_STATUS_BADGE as STATUS_COLORS, ORDER_TYPE_BADGE as ORDER_TYPE_COLORS } from "~/lib/status-styles.js";
 
@@ -453,6 +454,12 @@ export function ProjectsClient() {
             )}
           </td>
         );
+      case "shoring":
+        return (
+          <td key={col.key} className="px-4 py-3 text-center">
+            <ShoringBadge projectId={project.id} />
+          </td>
+        );
       case "responsible":
         return <td key={col.key} className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">—</td>;
       default:
diff --git a/apps/web/src/app/(app)/projects/[id]/page.tsx b/apps/web/src/app/(app)/projects/[id]/page.tsx
index 38175f1..e1be42d 100644
--- a/apps/web/src/app/(app)/projects/[id]/page.tsx
+++ b/apps/web/src/app/(app)/projects/[id]/page.tsx
@@ -10,6 +10,7 @@ import { ProjectAssignmentsTable } from "~/components/projects/ProjectAssignment
 import { PROJECT_STATUS_BADGE as STATUS_COLORS, ORDER_TYPE_BADGE as ORDER_TYPE_COLORS } from "~/lib/status-styles.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { CoverArtSection } from "~/components/projects/CoverArtSection.js";
+import { ShoringIndicator } from "~/components/projects/ShoringIndicator.js";
 
 const EDIT_ROLES = new Set(["ADMIN", "MANAGER"]);
 
@@ -133,6 +134,9 @@ export default async function ProjectDetailPage({ params }: ProjectDetailPagePro
       {/* Budget status card (client component) */}
       <BudgetStatusCard projectId={project.id} />
 
+      {/* Nearshore ratio indicator (client component) */}
+      <ShoringIndicator projectId={project.id} />
+
       {/* Assignments table (client component with delete action) */}
       <ProjectAssignmentsTable assignments={project.assignments as never} />
 
diff --git a/apps/web/src/app/(app)/projects/[id]/scenario/page.tsx b/apps/web/src/app/(app)/projects/[id]/scenario/page.tsx
index 2bc0aeb..3efee4e 100644
--- a/apps/web/src/app/(app)/projects/[id]/scenario/page.tsx
+++ b/apps/web/src/app/(app)/projects/[id]/scenario/page.tsx
@@ -50,8 +50,8 @@ export default async function ScenarioPage({ params }: ScenarioPageProps) {
       <ScenarioPlanner
         projectId={id}
         baseline={baseline}
-        resources={resources as never}
-        roles={roles as never}
+        resources={((resources as any)?.resources ?? resources) as never}
+        roles={(Array.isArray(roles) ? roles : []) as never}
       />
     </div>
   );
diff --git a/apps/web/src/app/(app)/resources/ResourcesClient.tsx b/apps/web/src/app/(app)/resources/ResourcesClient.tsx
index 6eea6bc..086663b 100644
--- a/apps/web/src/app/(app)/resources/ResourcesClient.tsx
+++ b/apps/web/src/app/(app)/resources/ResourcesClient.tsx
@@ -1001,7 +1001,7 @@ export function ResourcesClient() {
                             sortField={sortField}
                             sortDir={sortDir}
                             onSort={toggle}
-                            tooltip="Unique employee identifier used across all plANARCHY records."
+                            tooltip="Unique employee identifier used across all CapaKraken records."
                           />
                         );
                       case "displayName":
diff --git a/apps/web/src/app/(app)/resources/[id]/page.tsx b/apps/web/src/app/(app)/resources/[id]/page.tsx
index 7d0d6ec..78cea27 100644
--- a/apps/web/src/app/(app)/resources/[id]/page.tsx
+++ b/apps/web/src/app/(app)/resources/[id]/page.tsx
@@ -9,9 +9,9 @@ export async function generateMetadata(
   try {
     const trpc = await createCaller();
     const resource = await trpc.resource.getById({ id });
-    return { title: `${resource.displayName} — Resources | plANARCHY` };
+    return { title: `${resource.displayName} — Resources | CapaKraken` };
   } catch {
-    return { title: "Resource — plANARCHY" };
+    return { title: "Resource — CapaKraken" };
   }
 }
 
diff --git a/apps/web/src/app/(app)/timeline/page.tsx b/apps/web/src/app/(app)/timeline/page.tsx
index 6f8e683..d16dc8c 100644
--- a/apps/web/src/app/(app)/timeline/page.tsx
+++ b/apps/web/src/app/(app)/timeline/page.tsx
@@ -15,7 +15,7 @@ const TimelineView = dynamic(
 
 export default function TimelinePage() {
   return (
-    <div className="app-page flex max-h-[100dvh] flex-col gap-5 overflow-hidden pb-6">
+    <div className="app-page flex max-h-[100dvh] flex-col gap-5 pb-6">
       <div className="app-page-header">
         <div>
           <h1 className="app-page-title">Timeline</h1>
diff --git a/apps/web/src/app/(app)/vacations/my/page.tsx b/apps/web/src/app/(app)/vacations/my/page.tsx
index c5c5279..554c112 100644
--- a/apps/web/src/app/(app)/vacations/my/page.tsx
+++ b/apps/web/src/app/(app)/vacations/my/page.tsx
@@ -1,6 +1,6 @@
 import { MyVacationsClient } from "~/components/vacations/MyVacationsClient.js";
 
-export const metadata = { title: "My Vacations — plANARCHY" };
+export const metadata = { title: "My Vacations — CapaKraken" };
 
 export default function MyVacationsPage() {
   return <MyVacationsClient />;
diff --git a/apps/web/src/app/auth/signin/page.tsx b/apps/web/src/app/auth/signin/page.tsx
index 3eb9acf..a73aea2 100644
--- a/apps/web/src/app/auth/signin/page.tsx
+++ b/apps/web/src/app/auth/signin/page.tsx
@@ -37,7 +37,7 @@ export default function SignInPage() {
         <div className="hidden rounded-[2rem] border border-white/70 bg-white/75 p-10 shadow-2xl backdrop-blur lg:flex lg:flex-col lg:justify-between dark:border-slate-800 dark:bg-slate-950/60">
           <div>
             <span className="inline-flex rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-700 dark:border-brand-900/50 dark:bg-brand-900/20 dark:text-brand-300">
-              plANARCHY Control Center
+              CapaKraken Control Center
             </span>
             <h1 className="mt-6 font-display text-5xl font-semibold leading-tight text-gray-900 dark:text-gray-50">
               Resource planning that stays readable under pressure.
@@ -66,7 +66,7 @@ export default function SignInPage() {
           <div className="app-surface-strong p-8">
             <div className="mb-8">
               <p className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-600">Welcome Back</p>
-              <h2 className="mt-3 font-display text-4xl font-semibold text-gray-900 dark:text-gray-50">Sign in to plANARCHY</h2>
+              <h2 className="mt-3 font-display text-4xl font-semibold text-gray-900 dark:text-gray-50">Sign in to CapaKraken</h2>
               <p className="mt-2 text-sm text-gray-500">Resource Planning, staffing, and forecasting.</p>
             </div>
 
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index f1cff42..be1cd13 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -19,23 +19,23 @@ const displayFont = Manrope({
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://planarchy.hartmut-noerenberg.com"),
-  title: "plANARCHY — Resource Planning",
+  title: "CapaKraken — Resource & Capacity Planning",
   description: "Interactive resource planning and project staffing tool",
   manifest: "/manifest.json",
   appleWebApp: {
     capable: true,
     statusBarStyle: "default",
-    title: "Planarchy",
+    title: "CapaKraken",
   },
   openGraph: {
-    title: "plANARCHY — Resource Planning",
+    title: "CapaKraken — Resource & Capacity Planning",
     description: "Estimates, staffing, chargeability, and timelines in one workspace.",
-    images: [{ url: "/og-image.png", width: 1024, height: 1024, alt: "plANARCHY Logo" }],
+    images: [{ url: "/og-image.png", width: 1024, height: 1024, alt: "CapaKraken Logo" }],
     type: "website",
   },
   twitter: {
     card: "summary_large_image",
-    title: "plANARCHY — Resource Planning",
+    title: "CapaKraken — Resource & Capacity Planning",
     description: "Estimates, staffing, chargeability, and timelines in one workspace.",
     images: ["/og-image.png"],
   },
diff --git a/apps/web/src/components/admin/ActivityLogClient.tsx b/apps/web/src/components/admin/ActivityLogClient.tsx
new file mode 100644
index 0000000..a37c5bc
--- /dev/null
+++ b/apps/web/src/components/admin/ActivityLogClient.tsx
@@ -0,0 +1,470 @@
+"use client";
+
+import { useState, useMemo, useCallback, useEffect } from "react";
+import Link from "next/link";
+import type { Route } from "next";
+import { trpc } from "~/lib/trpc/client.js";
+
+// ─── Constants ──────────────────────────────────────────────────────────────
+
+const ACTION_BADGES: Record<string, { label: string; className: string }> = {
+  CREATE: { label: "Create", className: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400" },
+  UPDATE: { label: "Update", className: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400" },
+  DELETE: { label: "Delete", className: "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400" },
+  SHIFT: { label: "Shift", className: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400" },
+  IMPORT: { label: "Import", className: "bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400" },
+};
+
+const ENTITY_TYPE_OPTIONS = [
+  "Project",
+  "Resource",
+  "Allocation",
+  "Blueprint",
+  "Vacation",
+  "Role",
+  "Estimate",
+  "EstimateVersion",
+  "ScopeItem",
+  "DemandLine",
+  "Comment",
+];
+
+const ACTION_OPTIONS = ["CREATE", "UPDATE", "DELETE", "SHIFT", "IMPORT"];
+
+const ENTITY_LINKS: Record<string, (id: string) => string> = {
+  Project: (id) => `/projects/${id}`,
+  Resource: (id) => `/resources/${id}`,
+  Allocation: (id) => `/allocations?allocationId=${id}`,
+  Blueprint: (_id) => `/admin/blueprints`,
+  Vacation: (_id) => `/vacations`,
+  Role: (_id) => `/roles`,
+  Estimate: (id) => `/estimates/${id}`,
+};
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function relativeTime(date: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - new Date(date).getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHr = Math.floor(diffMin / 60);
+  const diffDays = Math.floor(diffHr / 24);
+
+  if (diffSec < 60) return "just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  if (diffHr < 24) return `${diffHr}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return new Date(date).toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" });
+}
+
+function userInitials(name: string | null | undefined, email: string): string {
+  if (name) {
+    const parts = name.trim().split(/\s+/);
+    if (parts.length >= 2) return (parts[0]![0]! + parts[parts.length - 1]![0]!).toUpperCase();
+    return name.slice(0, 2).toUpperCase();
+  }
+  return email.slice(0, 2).toUpperCase();
+}
+
+type DiffEntry = { old: unknown; new: unknown };
+type Changes = {
+  before?: Record<string, unknown>;
+  after?: Record<string, unknown>;
+  diff?: Record<string, DiffEntry>;
+  metadata?: Record<string, unknown>;
+};
+
+function parseChanges(changes: unknown): Changes {
+  if (!changes || typeof changes !== "object") return {};
+  return changes as Changes;
+}
+
+function formatValue(val: unknown): string {
+  if (val === null || val === undefined) return "(empty)";
+  if (typeof val === "boolean") return val ? "Yes" : "No";
+  if (typeof val === "object") return JSON.stringify(val);
+  return String(val);
+}
+
+// ─── Sub-components ─────────────────────────────────────────────────────────
+
+function ActionBadge({ action }: { action: string }) {
+  const badge = ACTION_BADGES[action] ?? { label: action, className: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400" };
+  return (
+    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${badge.className}`}>
+      {badge.label}
+    </span>
+  );
+}
+
+function DiffView({ changes }: { changes: Changes }) {
+  const diff = changes.diff;
+  if (!diff || Object.keys(diff).length === 0) {
+    return <p className="text-sm text-gray-500 dark:text-gray-400">No field-level diff available.</p>;
+  }
+
+  return (
+    <div className="space-y-1">
+      {Object.entries(diff).map(([field, { old: oldVal, new: newVal }]) => (
+        <div key={field} className="flex items-start gap-2 text-sm">
+          <span className="min-w-[120px] shrink-0 font-medium text-gray-700 dark:text-gray-300">{field}</span>
+          <span className="rounded bg-red-50 px-1.5 py-0.5 text-red-700 line-through dark:bg-red-900/20 dark:text-red-400">
+            {formatValue(oldVal)}
+          </span>
+          <span className="text-gray-400">&rarr;</span>
+          <span className="rounded bg-emerald-50 px-1.5 py-0.5 text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-400">
+            {formatValue(newVal)}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ExpandedDiff({ entryId }: { entryId: string }) {
+  const { data, isLoading } = trpc.auditLog.getById.useQuery(
+    { id: entryId },
+    { staleTime: 300_000 },
+  );
+
+  if (isLoading) {
+    return (
+      <div className="border-t border-gray-100 px-4 py-3 dark:border-slate-700">
+        <div className="h-4 w-48 shimmer-skeleton rounded" />
+      </div>
+    );
+  }
+
+  const changes = parseChanges((data as any)?.changes);
+  return (
+    <div className="border-t border-gray-100 px-4 py-3 dark:border-slate-700">
+      <DiffView changes={changes} />
+    </div>
+  );
+}
+
+function SummaryCards({ summary }: { summary: { byEntityType: Record<string, number>; total: number } }) {
+  const sorted = useMemo(() => {
+    return Object.entries(summary.byEntityType)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 5);
+  }, [summary.byEntityType]);
+
+  return (
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+      <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-800">
+        <p className="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Total (7d)</p>
+        <p className="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{summary.total}</p>
+      </div>
+      {sorted.map(([type, count]) => (
+        <div key={type} className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-800">
+          <p className="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">{type}</p>
+          <p className="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{count}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── Main Component ─────────────────────────────────────────────────────────
+
+export function ActivityLogClient() {
+  // Filters
+  const [entityType, setEntityType] = useState("");
+  const [action, setAction] = useState("");
+  const [userId, setUserId] = useState("");
+  const [search, setSearch] = useState("");
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+
+  // Expanded entry
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  // Summary (last 7 days)
+  const sevenDaysAgo = useMemo(() => {
+    const d = new Date();
+    d.setDate(d.getDate() - 7);
+    return d;
+  }, []);
+
+  const { data: summary } = trpc.auditLog.getActivitySummary.useQuery(
+    { startDate: sevenDaysAgo },
+    { staleTime: 60_000 },
+  );
+
+  // Users for filter dropdown
+  type UserListItem = { id: string; name: string | null; email: string };
+  const { data: users = [] } = trpc.user.list.useQuery(undefined, { staleTime: 300_000 }) as { data: UserListItem[] };
+
+  // Build query input
+  const queryInput = useMemo(() => {
+    const input: Record<string, unknown> = { limit: 50 };
+    if (entityType) input.entityType = entityType;
+    if (action) input.action = action;
+    if (userId) input.userId = userId;
+    if (search) input.search = search;
+    if (startDate) input.startDate = new Date(startDate);
+    if (endDate) input.endDate = new Date(endDate + "T23:59:59");
+    return input;
+  }, [entityType, action, userId, search, startDate, endDate]);
+
+  const [cursor, setCursor] = useState<string | undefined>(undefined);
+  const [allEntries, setAllEntries] = useState<any[]>([]);
+  const [hasNextPage, setHasNextPage] = useState(false);
+
+  const { data, isLoading, isFetching } = (trpc.auditLog.list as any).useQuery(
+    { ...queryInput, ...(cursor ? { cursor } : {}) },
+    { staleTime: 30_000, keepPreviousData: true },
+  ) as { data: { items: any[]; nextCursor?: string } | undefined; isLoading: boolean; isFetching: boolean };
+
+  // Append new page results
+  useEffect(() => {
+    if (!data) return;
+    if (!cursor) {
+      // First page or filter change — replace
+      setAllEntries(data.items);
+    } else {
+      // Subsequent page — append
+      setAllEntries((prev) => [...prev, ...data.items]);
+    }
+    setHasNextPage(!!data.nextCursor);
+  }, [data, cursor]);
+
+  // Reset cursor when filters change
+  useEffect(() => {
+    setCursor(undefined);
+    setAllEntries([]);
+  }, [entityType, action, userId, search, startDate, endDate]);
+
+  function loadMore() {
+    if (data?.nextCursor) {
+      setCursor(data.nextCursor);
+    }
+  }
+
+  const toggleExpand = useCallback((id: string) => {
+    setExpandedId((prev) => (prev === id ? null : id));
+  }, []);
+
+  const totalCount = summary?.total ?? 0;
+
+  return (
+    <div className="mx-auto max-w-7xl space-y-6 p-4 sm:p-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Activity Log</h1>
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          {totalCount.toLocaleString()} changes recorded in the last 7 days
+        </p>
+      </div>
+
+      {/* Summary Cards */}
+      {summary && <SummaryCards summary={summary} />}
+
+      {/* Filter Bar */}
+      <div className="flex flex-wrap items-end gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-800">
+        <div className="min-w-[140px]">
+          <label className="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">Entity Type</label>
+          <select
+            value={entityType}
+            onChange={(e) => setEntityType(e.target.value)}
+            className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200"
+          >
+            <option value="">All</option>
+            {ENTITY_TYPE_OPTIONS.map((t) => (
+              <option key={t} value={t}>{t}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="min-w-[120px]">
+          <label className="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">Action</label>
+          <select
+            value={action}
+            onChange={(e) => setAction(e.target.value)}
+            className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200"
+          >
+            <option value="">All</option>
+            {ACTION_OPTIONS.map((a) => (
+              <option key={a} value={a}>{a}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="min-w-[160px]">
+          <label className="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">User</label>
+          <select
+            value={userId}
+            onChange={(e) => setUserId(e.target.value)}
+            className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200"
+          >
+            <option value="">All</option>
+            {users.map((u) => (
+              <option key={u.id} value={u.id}>{u.name ?? u.email}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="min-w-[130px]">
+          <label className="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">From</label>
+          <input
+            type="date"
+            value={startDate}
+            onChange={(e) => setStartDate(e.target.value)}
+            className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200"
+          />
+        </div>
+
+        <div className="min-w-[130px]">
+          <label className="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">To</label>
+          <input
+            type="date"
+            value={endDate}
+            onChange={(e) => setEndDate(e.target.value)}
+            className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200"
+          />
+        </div>
+
+        <div className="min-w-[200px] flex-1">
+          <label className="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">Search</label>
+          <input
+            type="text"
+            placeholder="Search entity name or summary..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200"
+          />
+        </div>
+
+        <button
+          onClick={() => {
+            setEntityType("");
+            setAction("");
+            setUserId("");
+            setSearch("");
+            setStartDate("");
+            setEndDate("");
+          }}
+          className="rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 dark:border-slate-600 dark:text-gray-400 dark:hover:bg-slate-700"
+        >
+          Reset
+        </button>
+      </div>
+
+      {/* Timeline List */}
+      <div className="space-y-2">
+        {isLoading && (
+          <div className="flex items-center justify-center py-12">
+            <div className="h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600" />
+          </div>
+        )}
+
+        {!isLoading && allEntries.length === 0 && (
+          <div className="rounded-xl border border-dashed border-gray-300 bg-white py-16 text-center dark:border-slate-600 dark:bg-slate-800">
+            <svg className="mx-auto h-10 w-10 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <p className="mt-3 text-sm font-medium text-gray-600 dark:text-gray-400">No activity found</p>
+            <p className="mt-1 text-xs text-gray-500 dark:text-gray-500">Try adjusting your filters or date range.</p>
+          </div>
+        )}
+
+        {allEntries.map((entry) => {
+          const isExpanded = expandedId === entry.id;
+          const entityLink = ENTITY_LINKS[entry.entityType]?.(entry.entityId);
+
+          return (
+            <div
+              key={entry.id}
+              className="rounded-xl border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md dark:border-slate-700 dark:bg-slate-800"
+            >
+              <button
+                onClick={() => toggleExpand(entry.id)}
+                className="flex w-full items-start gap-3 p-4 text-left"
+              >
+                {/* User Avatar */}
+                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gray-200 text-xs font-semibold text-gray-700 dark:bg-slate-600 dark:text-gray-200">
+                  {entry.user ? userInitials(entry.user.name, entry.user.email) : "SY"}
+                </div>
+
+                {/* Content */}
+                <div className="min-w-0 flex-1">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="text-sm font-medium text-gray-900 dark:text-white">
+                      {entry.user?.name ?? entry.user?.email ?? "System"}
+                    </span>
+                    <ActionBadge action={entry.action} />
+                    <span className="text-xs text-gray-500 dark:text-gray-400">
+                      {entry.entityType}
+                    </span>
+                    {entry.entityName && (
+                      <>
+                        <span className="text-gray-400">&middot;</span>
+                        {entityLink ? (
+                          <Link
+                            href={entityLink as Route}
+                            onClick={(e) => e.stopPropagation()}
+                            className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-400"
+                          >
+                            {entry.entityName}
+                          </Link>
+                        ) : (
+                          <span className="text-sm text-gray-700 dark:text-gray-300">{entry.entityName}</span>
+                        )}
+                      </>
+                    )}
+                  </div>
+                  {entry.summary && (
+                    <p className="mt-0.5 text-sm text-gray-600 dark:text-gray-400">{entry.summary}</p>
+                  )}
+                </div>
+
+                {/* Timestamp */}
+                <div className="shrink-0 text-right">
+                  <span
+                    className="text-xs text-gray-500 dark:text-gray-400"
+                    title={new Date(entry.createdAt).toLocaleString("de-DE")}
+                  >
+                    {relativeTime(entry.createdAt)}
+                  </span>
+                  {entry.source && (
+                    <p className="mt-0.5 text-[10px] uppercase tracking-wide text-gray-400 dark:text-gray-500">
+                      {entry.source}
+                    </p>
+                  )}
+                </div>
+
+                {/* Expand indicator */}
+                <svg
+                  className={`h-4 w-4 shrink-0 text-gray-400 transition-transform ${isExpanded ? "rotate-180" : ""}`}
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+
+              {/* Expanded Diff — fetched on demand */}
+              {isExpanded && <ExpandedDiff entryId={entry.id} />}
+            </div>
+          );
+        })}
+
+        {/* Load More */}
+        {hasNextPage && (
+          <div className="flex justify-center pt-4">
+            <button
+              onClick={loadMore}
+              disabled={isFetching}
+              className="rounded-lg border border-gray-300 bg-white px-6 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-gray-300 dark:hover:bg-slate-700"
+            >
+              {isFetching ? "Loading..." : "Load more"}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/admin/CalculationRulesClient.tsx b/apps/web/src/components/admin/CalculationRulesClient.tsx
index 8811190..a9c4879 100644
--- a/apps/web/src/components/admin/CalculationRulesClient.tsx
+++ b/apps/web/src/components/admin/CalculationRulesClient.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { useState } from "react";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
+import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
@@ -71,6 +73,7 @@ const emptyRule: EditingRule = {
 
 export function CalculationRulesClient() {
   const [editing, setEditing] = useState<EditingRule | null>(null);
+  const [confirmDeleteRule, setConfirmDeleteRule] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const utils = trpc.useUtils();
@@ -219,7 +222,7 @@ export function CalculationRulesClient() {
                   <td className="px-4 py-3 text-right text-sm">
                     <button onClick={() => openEdit(rule)} className="mr-2 text-blue-600 hover:underline dark:text-blue-400">Edit</button>
                     <button
-                      onClick={() => { if (confirm("Delete this rule?")) deleteMut.mutate({ id: rule.id }); }}
+                      onClick={() => setConfirmDeleteRule(rule.id)}
                       className="text-red-600 hover:underline dark:text-red-400"
                     >
                       Delete
@@ -240,9 +243,9 @@ export function CalculationRulesClient() {
       </div>
 
       {/* ── Edit/Create Modal ── */}
-      {editing && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-          <div className="w-full max-w-lg rounded-lg bg-white p-6 shadow-xl dark:bg-gray-800">
+      <AnimatedModal open={editing !== null} onClose={() => setEditing(null)} maxWidth="max-w-lg">
+        {editing && (<>
+            <div className="p-6">
             <h2 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
               {editing.id ? "Edit Rule" : "New Rule"}
             </h2>
@@ -363,8 +366,22 @@ export function CalculationRulesClient() {
                 {createMut.isPending || updateMut.isPending ? "Saving..." : "Save"}
               </button>
             </div>
-          </div>
-        </div>
+            </div>
+        </>)}
+      </AnimatedModal>
+
+      {confirmDeleteRule && (
+        <ConfirmDialog
+          title="Delete rule"
+          message="Are you sure you want to delete this calculation rule?"
+          confirmLabel="Delete"
+          variant="danger"
+          onConfirm={() => {
+            deleteMut.mutate({ id: confirmDeleteRule });
+            setConfirmDeleteRule(null);
+          }}
+          onCancel={() => setConfirmDeleteRule(null)}
+        />
       )}
     </div>
   );
diff --git a/apps/web/src/components/admin/ClientsAdminClient.tsx b/apps/web/src/components/admin/ClientsAdminClient.tsx
index d26c6fa..043b6fe 100644
--- a/apps/web/src/components/admin/ClientsAdminClient.tsx
+++ b/apps/web/src/components/admin/ClientsAdminClient.tsx
@@ -1,9 +1,31 @@
 "use client";
 
-import { useState } from "react";
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
 type ClientRow = {
   id: string;
   name: string;
@@ -11,279 +33,1049 @@ type ClientRow = {
   parentId: string | null;
   sortOrder: number;
   isActive: boolean;
+  tags: string[];
+  _count?: { children: number; projects: number };
 };
 
-type ClientNode = ClientRow & { children: ClientNode[] };
-
-type EditingClient = {
-  id?: string;
-  name: string;
-  code: string;
-  parentId: string;
-  sortOrder: number;
+type TreeNode = ClientRow & {
+  children: TreeNode[];
+  depth: number;
 };
 
-function ClientTreeNode({
-  node,
-  onEdit,
-  onAddChild,
-  depth = 0,
+// ---------------------------------------------------------------------------
+// Tree helpers
+// ---------------------------------------------------------------------------
+
+function buildTree(clients: ClientRow[]): TreeNode[] {
+  const map = new Map<string, TreeNode>();
+  const roots: TreeNode[] = [];
+
+  // First pass: create nodes
+  for (const c of clients) {
+    map.set(c.id, { ...c, children: [], depth: 0 });
+  }
+
+  // Second pass: link parents
+  for (const c of clients) {
+    const node = map.get(c.id)!;
+    if (c.parentId && map.has(c.parentId)) {
+      map.get(c.parentId)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+
+  // Third pass: set depths and sort children
+  function setDepths(nodes: TreeNode[], depth: number) {
+    for (const n of nodes) {
+      n.depth = depth;
+      n.children.sort((a, b) => a.sortOrder - b.sortOrder || a.name.localeCompare(b.name));
+      setDepths(n.children, depth + 1);
+    }
+  }
+  roots.sort((a, b) => a.sortOrder - b.sortOrder || a.name.localeCompare(b.name));
+  setDepths(roots, 0);
+
+  return roots;
+}
+
+/** Flatten tree into display order, respecting collapsed state. */
+function flattenTree(nodes: TreeNode[], collapsedIds: Set<string>): TreeNode[] {
+  const result: TreeNode[] = [];
+  function walk(list: TreeNode[]) {
+    for (const n of list) {
+      result.push(n);
+      if (n.children.length > 0 && !collapsedIds.has(n.id)) {
+        walk(n.children);
+      }
+    }
+  }
+  walk(nodes);
+  return result;
+}
+
+/** Get all descendant IDs of a node (recursive). */
+function getDescendantIds(clientId: string, clients: ClientRow[]): Set<string> {
+  const ids = new Set<string>();
+  function collect(parentId: string) {
+    for (const c of clients) {
+      if (c.parentId === parentId && !ids.has(c.id)) {
+        ids.add(c.id);
+        collect(c.id);
+      }
+    }
+  }
+  collect(clientId);
+  return ids;
+}
+
+/** Get all ancestor IDs of a node (walk up). */
+function getAncestorIds(clientId: string, clientMap: Map<string, ClientRow>): Set<string> {
+  const ids = new Set<string>();
+  let current = clientMap.get(clientId);
+  while (current?.parentId) {
+    ids.add(current.parentId);
+    current = clientMap.get(current.parentId);
+  }
+  return ids;
+}
+
+// ---------------------------------------------------------------------------
+// Tag color palette -- deterministic color from tag name hash
+// ---------------------------------------------------------------------------
+
+const TAG_COLORS = [
+  { bg: "bg-purple-100 dark:bg-purple-900/40", text: "text-purple-700 dark:text-purple-300", border: "border-purple-200 dark:border-purple-700" },
+  { bg: "bg-emerald-100 dark:bg-emerald-900/40", text: "text-emerald-700 dark:text-emerald-300", border: "border-emerald-200 dark:border-emerald-700" },
+  { bg: "bg-amber-100 dark:bg-amber-900/40", text: "text-amber-700 dark:text-amber-300", border: "border-amber-200 dark:border-amber-700" },
+  { bg: "bg-rose-100 dark:bg-rose-900/40", text: "text-rose-700 dark:text-rose-300", border: "border-rose-200 dark:border-rose-700" },
+  { bg: "bg-sky-100 dark:bg-sky-900/40", text: "text-sky-700 dark:text-sky-300", border: "border-sky-200 dark:border-sky-700" },
+  { bg: "bg-indigo-100 dark:bg-indigo-900/40", text: "text-indigo-700 dark:text-indigo-300", border: "border-indigo-200 dark:border-indigo-700" },
+  { bg: "bg-teal-100 dark:bg-teal-900/40", text: "text-teal-700 dark:text-teal-300", border: "border-teal-200 dark:border-teal-700" },
+  { bg: "bg-orange-100 dark:bg-orange-900/40", text: "text-orange-700 dark:text-orange-300", border: "border-orange-200 dark:border-orange-700" },
+];
+
+function hashString(str: string): number {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i);
+    hash |= 0;
+  }
+  return Math.abs(hash);
+}
+
+function getTagColor(tag: string) {
+  return TAG_COLORS[hashString(tag) % TAG_COLORS.length]!;
+}
+
+// ---------------------------------------------------------------------------
+// Tag pill component
+// ---------------------------------------------------------------------------
+
+function TagPill({
+  tag,
+  onRemove,
 }: {
-  node: ClientNode;
-  onEdit: (c: ClientRow) => void;
-  onAddChild: (parentId: string) => void;
-  depth?: number;
+  tag: string;
+  onRemove?: () => void;
 }) {
-  const [expanded, setExpanded] = useState(depth < 1);
-  const hasChildren = node.children.length > 0;
+  const color = getTagColor(tag);
+  return (
+    <span
+      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border ${color.bg} ${color.text} ${color.border}`}
+    >
+      {tag}
+      {onRemove && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+          className="hover:opacity-70 leading-none text-[10px] ml-0.5"
+          aria-label={`Remove tag ${tag}`}
+        >
+          &times;
+        </button>
+      )}
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Inline tag adder with auto-suggest
+// ---------------------------------------------------------------------------
+
+function TagAdder({
+  existingTags,
+  allKnownTags,
+  onAdd,
+  onClose,
+}: {
+  existingTags: string[];
+  allKnownTags: string[];
+  onAdd: (tag: string) => void;
+  onClose: () => void;
+}) {
+  const [value, setValue] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const suggestions = useMemo(() => {
+    if (!value.trim()) return allKnownTags.filter((t) => !existingTags.includes(t)).slice(0, 8);
+    const lower = value.toLowerCase();
+    return allKnownTags
+      .filter((t) => t.toLowerCase().includes(lower) && !existingTags.includes(t))
+      .slice(0, 8);
+  }, [value, allKnownTags, existingTags]);
+
+  function submit(tag: string) {
+    const trimmed = tag.trim();
+    if (!trimmed || existingTags.includes(trimmed)) return;
+    onAdd(trimmed);
+    setValue("");
+  }
 
   return (
-    <div>
-      <div
-        className="flex items-center gap-2 py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-800/30 rounded-lg group"
-        style={{ paddingLeft: `${depth * 24 + 12}px` }}
-      >
-        {hasChildren ? (
-          <button
-            type="button"
-            onClick={() => setExpanded(!expanded)}
-            className="w-5 h-5 flex items-center justify-center text-gray-400 hover:text-gray-600 text-xs"
-          >
-            {expanded ? "▼" : "▶"}
-          </button>
-        ) : (
-          <span className="w-5" />
-        )}
-        <span className="text-sm font-medium text-gray-900 dark:text-gray-100 flex-1">
-          {node.name}
-          {node.code && <span className="text-gray-400 font-mono ml-1 text-xs">[{node.code}]</span>}
-        </span>
-        {!node.isActive && <span className="text-xs text-gray-400 italic">inactive</span>}
-        <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-          <button
-            type="button"
-            onClick={() => onAddChild(node.id)}
-            className="text-xs text-green-600 hover:text-green-800 font-medium"
-          >
-            + Child
-          </button>
-          <button
-            type="button"
-            onClick={() => onEdit(node)}
-            className="text-xs text-brand-600 hover:text-brand-800 font-medium"
-          >
-            Edit
-          </button>
+    <div className="relative inline-block">
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+          setShowSuggestions(true);
+        }}
+        onFocus={() => setShowSuggestions(true)}
+        onBlur={() => {
+          // Delay to allow click on suggestion
+          setTimeout(() => {
+            setShowSuggestions(false);
+            if (!value.trim()) onClose();
+          }, 200);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            submit(value);
+          }
+          if (e.key === "Escape") {
+            onClose();
+          }
+        }}
+        placeholder="Tag..."
+        className="w-24 px-2 py-0.5 text-xs rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-brand-400"
+      />
+      {showSuggestions && suggestions.length > 0 && (
+        <div className="absolute z-20 top-full left-0 mt-1 w-40 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg py-1 max-h-32 overflow-y-auto">
+          {suggestions.map((s) => (
+            <button
+              key={s}
+              type="button"
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => {
+                submit(s);
+                setShowSuggestions(false);
+              }}
+              className="block w-full text-left px-3 py-1 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+            >
+              <TagPill tag={s} />
+            </button>
+          ))}
         </div>
-      </div>
-      {expanded && node.children.map((child) => (
-        <ClientTreeNode key={child.id} node={child} onEdit={onEdit} onAddChild={onAddChild} depth={depth + 1} />
-      ))}
+      )}
     </div>
   );
 }
 
+// ---------------------------------------------------------------------------
+// Drag handle icon
+// ---------------------------------------------------------------------------
+
+function GripIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+      <circle cx="5" cy="3" r="1.5" />
+      <circle cx="11" cy="3" r="1.5" />
+      <circle cx="5" cy="8" r="1.5" />
+      <circle cx="11" cy="8" r="1.5" />
+      <circle cx="5" cy="13" r="1.5" />
+      <circle cx="11" cy="13" r="1.5" />
+    </svg>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Chevron icon for expand/collapse
+// ---------------------------------------------------------------------------
+
+function ChevronIcon({ expanded, className }: { expanded: boolean; className?: string }) {
+  return (
+    <svg
+      className={`transition-transform duration-150 ${expanded ? "rotate-90" : "rotate-0"} ${className ?? ""}`}
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M5 3l4 4-4 4" />
+    </svg>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Parent selector dropdown
+// ---------------------------------------------------------------------------
+
+function ParentSelector({
+  clients,
+  currentId,
+  currentParentId,
+  onChange,
+}: {
+  clients: ClientRow[];
+  currentId?: string;
+  currentParentId: string | null;
+  onChange: (parentId: string | null) => void;
+}) {
+  // Exclude self and all descendants to prevent circular refs
+  const excludeIds = useMemo(() => {
+    if (!currentId) return new Set<string>();
+    const ids = getDescendantIds(currentId, clients);
+    ids.add(currentId);
+    return ids;
+  }, [currentId, clients]);
+
+  const options = useMemo(() => {
+    return clients
+      .filter((c) => !excludeIds.has(c.id) && c.isActive)
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }, [clients, excludeIds]);
+
+  return (
+    <select
+      value={currentParentId ?? ""}
+      onChange={(e) => onChange(e.target.value || null)}
+      className="px-2 py-1 text-xs rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-1 focus:ring-brand-400 max-w-[160px]"
+    >
+      <option value="">(Top Level)</option>
+      {options.map((c) => (
+        <option key={c.id} value={c.id}>
+          {c.name}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Sortable client card
+// ---------------------------------------------------------------------------
+
+function SortableClientCard({
+  client,
+  allClients,
+  allKnownTags,
+  onUpdateName,
+  onUpdateSortOrder,
+  onUpdateTags,
+  onUpdateParent,
+  onDelete,
+  onToggleExpand,
+  isExpanded,
+  isDragOverlay,
+}: {
+  client: TreeNode;
+  allClients: ClientRow[];
+  allKnownTags: string[];
+  onUpdateName: (id: string, name: string) => void;
+  onUpdateSortOrder: (id: string, sortOrder: number) => void;
+  onUpdateTags: (id: string, tags: string[]) => void;
+  onUpdateParent: (id: string, parentId: string | null) => void;
+  onDelete: (id: string) => void;
+  onToggleExpand: (id: string) => void;
+  isExpanded: boolean;
+  isDragOverlay?: boolean;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: client.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const [editingName, setEditingName] = useState(false);
+  const [nameValue, setNameValue] = useState(client.name);
+  const [editingSortOrder, setEditingSortOrder] = useState(false);
+  const [sortOrderValue, setSortOrderValue] = useState(client.sortOrder);
+  const [addingTag, setAddingTag] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [showParentSelector, setShowParentSelector] = useState(false);
+  const nameInputRef = useRef<HTMLInputElement>(null);
+  const sortInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editingName) nameInputRef.current?.focus();
+  }, [editingName]);
+
+  useEffect(() => {
+    if (editingSortOrder) sortInputRef.current?.focus();
+  }, [editingSortOrder]);
+
+  // Sync external updates
+  useEffect(() => {
+    setNameValue(client.name);
+  }, [client.name]);
+
+  useEffect(() => {
+    setSortOrderValue(client.sortOrder);
+  }, [client.sortOrder]);
+
+  function saveName() {
+    const trimmed = nameValue.trim();
+    if (trimmed && trimmed !== client.name) {
+      onUpdateName(client.id, trimmed);
+    } else {
+      setNameValue(client.name);
+    }
+    setEditingName(false);
+  }
+
+  function saveSortOrder() {
+    if (sortOrderValue !== client.sortOrder) {
+      onUpdateSortOrder(client.id, sortOrderValue);
+    }
+    setEditingSortOrder(false);
+  }
+
+  const hasChildren = (client._count?.children ?? client.children.length) > 0;
+  const childCount = client._count?.children ?? client.children.length;
+  const depth = client.depth;
+
+  // Nesting depth styling: alternating subtle backgrounds
+  const depthBg = depth > 0
+    ? depth % 2 === 1
+      ? "bg-gray-50/50 dark:bg-gray-800/80"
+      : "bg-white dark:bg-gray-800/60"
+    : "bg-white dark:bg-gray-800";
+
+  const cardClasses = [
+    "flex items-center gap-3 px-4 py-3 rounded-xl border transition-all group",
+    isDragOverlay
+      ? "bg-white dark:bg-gray-800 border-brand-500 shadow-xl scale-[1.02] ring-2 ring-brand-500"
+      : isDragging
+        ? "opacity-30 bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700"
+        : `${depthBg} border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:shadow-sm`,
+  ].join(" ");
+
+  // Indent padding: 0 for root, 32px per level
+  const indentPx = depth * 32;
+
+  // Find parent name for display
+  const parentClient = client.parentId
+    ? allClients.find((c) => c.id === client.parentId)
+    : null;
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={depth > 0 ? "relative" : undefined}
+    >
+      {/* Tree connector line */}
+      {depth > 0 && !isDragOverlay && (
+        <div
+          className="absolute top-0 bottom-0 border-l-2 border-gray-300 dark:border-gray-600"
+          style={{ left: `${indentPx - 16}px` }}
+        />
+      )}
+
+      <div
+        className={cardClasses}
+        style={{ marginLeft: `${indentPx}px` }}
+      >
+        {/* Expand/collapse toggle */}
+        <div className="flex-shrink-0 w-5">
+          {hasChildren ? (
+            <button
+              type="button"
+              onClick={() => onToggleExpand(client.id)}
+              className="flex items-center justify-center w-5 h-5 rounded text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+              title={isExpanded ? "Collapse" : "Expand"}
+            >
+              <ChevronIcon expanded={isExpanded} />
+            </button>
+          ) : (
+            <span className="block w-5" />
+          )}
+        </div>
+
+        {/* Drag handle */}
+        <button
+          type="button"
+          className="cursor-grab active:cursor-grabbing text-gray-300 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 flex-shrink-0 touch-none"
+          {...attributes}
+          {...listeners}
+        >
+          <GripIcon />
+        </button>
+
+        {/* Name + parent info */}
+        <div className="flex-1 min-w-0">
+          {editingName ? (
+            <input
+              ref={nameInputRef}
+              type="text"
+              value={nameValue}
+              onChange={(e) => setNameValue(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") saveName();
+                if (e.key === "Escape") {
+                  setNameValue(client.name);
+                  setEditingName(false);
+                }
+              }}
+              onBlur={saveName}
+              className="w-full px-2 py-1 -ml-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
+            />
+          ) : (
+            <div className="flex items-center gap-2 min-w-0">
+              <button
+                type="button"
+                onClick={() => setEditingName(true)}
+                className="text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-brand-600 dark:hover:text-brand-400 truncate text-left cursor-text"
+                title="Click to edit name"
+              >
+                {client.name}
+                {client.code && (
+                  <span className="text-gray-400 dark:text-gray-500 font-mono ml-2 text-xs">
+                    [{client.code}]
+                  </span>
+                )}
+                {!client.isActive && (
+                  <span className="ml-2 text-xs text-gray-400 italic">inactive</span>
+                )}
+              </button>
+
+              {/* Children count badge */}
+              {hasChildren && (
+                <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 tabular-nums flex-shrink-0">
+                  {childCount}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Parent selector */}
+        <div className="flex-shrink-0">
+          {showParentSelector ? (
+            <div className="flex items-center gap-1">
+              <ParentSelector
+                clients={allClients}
+                currentId={client.id}
+                currentParentId={client.parentId}
+                onChange={(newParentId) => {
+                  if (newParentId !== client.parentId) {
+                    onUpdateParent(client.id, newParentId);
+                  }
+                  setShowParentSelector(false);
+                }}
+              />
+              <button
+                type="button"
+                onClick={() => setShowParentSelector(false)}
+                className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              >
+                &times;
+              </button>
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setShowParentSelector(true)}
+              className="text-[11px] text-gray-400 dark:text-gray-500 hover:text-brand-500 dark:hover:text-brand-400 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap"
+              title="Change parent"
+            >
+              {parentClient ? `\u2190 ${parentClient.name}` : "\u2190 Move..."}
+            </button>
+          )}
+        </div>
+
+        {/* Tags */}
+        <div className="flex items-center gap-1 flex-wrap flex-shrink-0">
+          {client.tags.map((tag) => (
+            <TagPill
+              key={tag}
+              tag={tag}
+              onRemove={() => {
+                onUpdateTags(client.id, client.tags.filter((t) => t !== tag));
+              }}
+            />
+          ))}
+          {addingTag ? (
+            <TagAdder
+              existingTags={client.tags}
+              allKnownTags={allKnownTags}
+              onAdd={(tag) => {
+                onUpdateTags(client.id, [...client.tags, tag]);
+              }}
+              onClose={() => setAddingTag(false)}
+            />
+          ) : (
+            <button
+              type="button"
+              onClick={() => setAddingTag(true)}
+              className="inline-flex items-center justify-center w-5 h-5 rounded-full text-xs text-gray-400 dark:text-gray-500 hover:text-brand-500 dark:hover:text-brand-400 hover:bg-gray-100 dark:hover:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity"
+              title="Add tag"
+            >
+              +
+            </button>
+          )}
+        </div>
+
+        {/* Sort order */}
+        <div className="flex-shrink-0 w-12">
+          {editingSortOrder ? (
+            <input
+              ref={sortInputRef}
+              type="number"
+              value={sortOrderValue}
+              onChange={(e) => setSortOrderValue(parseInt(e.target.value) || 0)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") saveSortOrder();
+                if (e.key === "Escape") {
+                  setSortOrderValue(client.sortOrder);
+                  setEditingSortOrder(false);
+                }
+              }}
+              onBlur={saveSortOrder}
+              className="w-full px-1 py-0.5 text-xs text-center rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400 focus:outline-none focus:ring-1 focus:ring-brand-400"
+            />
+          ) : (
+            <button
+              type="button"
+              onClick={() => setEditingSortOrder(true)}
+              className="w-full text-xs text-center text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 cursor-text tabular-nums"
+              title="Click to edit sort order"
+            >
+              #{client.sortOrder}
+            </button>
+          )}
+        </div>
+
+        {/* Delete */}
+        <div className="flex-shrink-0">
+          {confirmDelete ? (
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={() => {
+                  onDelete(client.id);
+                  setConfirmDelete(false);
+                }}
+                className="text-xs px-2 py-1 bg-red-600 text-white rounded hover:bg-red-700"
+              >
+                Delete
+              </button>
+              <button
+                type="button"
+                onClick={() => setConfirmDelete(false)}
+                className="text-xs px-2 py-1 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+              >
+                Cancel
+              </button>
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setConfirmDelete(true)}
+              className="text-gray-300 dark:text-gray-600 hover:text-red-500 dark:hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
+              title="Delete client"
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+                <path d="M2 4h12M5.33 4V2.67a1.33 1.33 0 011.34-1.34h2.66a1.33 1.33 0 011.34 1.34V4m2 0v9.33a1.33 1.33 0 01-1.34 1.34H4.67a1.33 1.33 0 01-1.34-1.34V4h9.34z" />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
 export function ClientsAdminClient() {
-  const [editing, setEditing] = useState<EditingClient | null>(null);
   const [search, setSearch] = useState("");
+  const [newName, setNewName] = useState("");
+  const [newParentId, setNewParentId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set());
+  const newInputRef = useRef<HTMLInputElement>(null);
 
   const utils = trpc.useUtils();
-  const { data: tree, isLoading } = trpc.clientEntity.getTree.useQuery();
-  const { data: flatList } = trpc.clientEntity.list.useQuery();
+  const { data: rawList, isLoading } = trpc.clientEntity.list.useQuery();
+
+  const clients = useMemo(() => {
+    return ((rawList ?? []) as unknown as ClientRow[]).slice().sort(
+      (a, b) => a.sortOrder - b.sortOrder || a.name.localeCompare(b.name),
+    );
+  }, [rawList]);
+
+  // Map for fast lookup
+  const clientMap = useMemo(() => {
+    const m = new Map<string, ClientRow>();
+    for (const c of clients) m.set(c.id, c);
+    return m;
+  }, [clients]);
+
+  // All known tags across all clients for auto-suggest
+  const allKnownTags = useMemo(() => {
+    const set = new Set<string>();
+    for (const c of clients) {
+      for (const t of c.tags ?? []) set.add(t);
+    }
+    return Array.from(set).sort();
+  }, [clients]);
+
+  // Build tree, then flatten with search filtering
+  const tree = useMemo(() => buildTree(clients), [clients]);
+
+  // When searching: filter matching clients and include their ancestors
+  const displayNodes = useMemo(() => {
+    if (!search.trim()) {
+      return flattenTree(tree, collapsedIds);
+    }
+
+    const lower = search.toLowerCase();
+    // Find IDs of clients matching the search
+    const matchingIds = new Set<string>();
+    for (const c of clients) {
+      if (
+        c.name.toLowerCase().includes(lower) ||
+        (c.code ?? "").toLowerCase().includes(lower) ||
+        (c.tags ?? []).some((t) => t.toLowerCase().includes(lower))
+      ) {
+        matchingIds.add(c.id);
+      }
+    }
+
+    // Also include all ancestors of matching clients so tree path is visible
+    const visibleIds = new Set(matchingIds);
+    for (const id of matchingIds) {
+      const ancestors = getAncestorIds(id, clientMap);
+      for (const aid of ancestors) visibleIds.add(aid);
+    }
+
+    // Build tree from only visible clients
+    const visibleClients = clients.filter((c) => visibleIds.has(c.id));
+    const filteredTree = buildTree(visibleClients);
+    // When searching, show all nodes expanded (don't respect collapsed state)
+    return flattenTree(filteredTree, new Set());
+  }, [search, tree, collapsedIds, clients, clientMap]);
+
+  // Drag sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  // Mutations
+  const invalidateAll = useCallback(() => {
+    void utils.clientEntity.list.invalidate();
+    void utils.clientEntity.getTree.invalidate();
+  }, [utils]);
 
   const createMut = trpc.clientEntity.create.useMutation({
-    onSuccess: () => { void utils.clientEntity.getTree.invalidate(); void utils.clientEntity.list.invalidate(); setEditing(null); },
+    onSuccess: () => {
+      invalidateAll();
+      setNewName("");
+      setNewParentId(null);
+    },
     onError: (e) => setError(e.message),
   });
+
   const updateMut = trpc.clientEntity.update.useMutation({
-    onSuccess: () => { void utils.clientEntity.getTree.invalidate(); void utils.clientEntity.list.invalidate(); setEditing(null); },
+    onSuccess: invalidateAll,
     onError: (e) => setError(e.message),
   });
 
-  const allClients = (flatList ?? []) as unknown as ClientRow[];
+  const deleteMut = trpc.clientEntity.delete.useMutation({
+    onSuccess: invalidateAll,
+    onError: (e) => setError(e.message),
+  });
 
-  function openCreate(parentId?: string) {
-    setEditing({ name: "", code: "", parentId: parentId ?? "", sortOrder: 0 });
-    setError(null);
-  }
+  const batchSortMut = trpc.clientEntity.batchUpdateSortOrder.useMutation({
+    onSuccess: invalidateAll,
+    onError: (e) => setError(e.message),
+  });
 
-  function openEdit(c: ClientRow) {
-    setEditing({
-      id: c.id,
-      name: c.name,
-      code: c.code ?? "",
-      parentId: c.parentId ?? "",
-      sortOrder: c.sortOrder,
+  // Handlers
+  function handleCreate() {
+    const trimmed = newName.trim();
+    if (!trimmed) return;
+    // Compute max sortOrder among siblings
+    const siblings = clients.filter((c) =>
+      newParentId ? c.parentId === newParentId : !c.parentId,
+    );
+    const maxSort = siblings.reduce((max, c) => Math.max(max, c.sortOrder), 0);
+    createMut.mutate({
+      name: trimmed,
+      sortOrder: maxSort + 1,
+      ...(newParentId ? { parentId: newParentId } : {}),
     });
-    setError(null);
   }
 
-  function handleSave() {
-    if (!editing) return;
-    setError(null);
-
-    if (editing.id) {
-      updateMut.mutate({
-        id: editing.id,
-        data: {
-          name: editing.name,
-          code: editing.code || undefined,
-          parentId: editing.parentId || undefined,
-          sortOrder: editing.sortOrder,
-        },
-      });
-    } else {
-      createMut.mutate({
-        name: editing.name,
-        code: editing.code || undefined,
-        parentId: editing.parentId || undefined,
-        sortOrder: editing.sortOrder,
-      });
-    }
+  function handleUpdateName(id: string, name: string) {
+    updateMut.mutate({ id, data: { name } });
   }
 
-  const isPending = createMut.isPending || updateMut.isPending;
-  const treeNodes = (tree ?? []) as unknown as ClientNode[];
+  function handleUpdateSortOrder(id: string, sortOrder: number) {
+    updateMut.mutate({ id, data: { sortOrder } });
+  }
 
-  // Simple client-side filter on tree
-  function filterTree(nodes: ClientNode[], q: string): ClientNode[] {
-    if (!q) return nodes;
-    const lower = q.toLowerCase();
-    return nodes.reduce<ClientNode[]>((acc, node) => {
-      const filteredChildren = filterTree(node.children, q);
-      if (node.name.toLowerCase().includes(lower) || (node.code ?? "").toLowerCase().includes(lower) || filteredChildren.length > 0) {
-        acc.push({ ...node, children: filteredChildren });
+  function handleUpdateTags(id: string, tags: string[]) {
+    updateMut.mutate({ id, data: { tags } });
+  }
+
+  function handleUpdateParent(id: string, parentId: string | null) {
+    updateMut.mutate({ id, data: { parentId } });
+  }
+
+  function handleDelete(id: string) {
+    deleteMut.mutate({ id });
+  }
+
+  function handleToggleExpand(id: string) {
+    setCollapsedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
       }
-      return acc;
-    }, []);
+      return next;
+    });
   }
 
-  const filteredTree = filterTree(treeNodes, search);
+  // Drag and drop — moves the whole subtree with the dragged client
+  function handleDragStart(event: DragStartEvent) {
+    setActiveId(event.active.id as string);
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    setActiveId(null);
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    const oldIndex = displayNodes.findIndex((c) => c.id === active.id);
+    const newIndex = displayNodes.findIndex((c) => c.id === over.id);
+    if (oldIndex === -1 || newIndex === -1) return;
+
+    // Get the dragged node and all its descendants (the subtree)
+    const draggedId = active.id as string;
+    const descendantIds = getDescendantIds(draggedId, clients);
+
+    // Filter display nodes to only siblings at the same parent level as the dragged node
+    const draggedClient = clientMap.get(draggedId);
+    if (!draggedClient) return;
+
+    const overClient = displayNodes[newIndex];
+    if (!overClient) return;
+
+    // Only allow reorder among siblings (same parentId)
+    if (draggedClient.parentId !== overClient.parentId) return;
+
+    // Get sibling nodes in display order (excluding descendants of dragged)
+    const siblings = displayNodes.filter(
+      (c) => c.parentId === draggedClient.parentId && !descendantIds.has(c.id),
+    );
+
+    const sibOldIndex = siblings.findIndex((c) => c.id === active.id);
+    const sibNewIndex = siblings.findIndex((c) => c.id === over.id);
+    if (sibOldIndex === -1 || sibNewIndex === -1) return;
+
+    const reordered = arrayMove(siblings, sibOldIndex, sibNewIndex);
+    const updates = reordered.map((c, i) => ({ id: c.id, sortOrder: i }));
+
+    // Optimistic update
+    utils.clientEntity.list.setData(undefined, (prev) => {
+      if (!prev) return prev;
+      const sortMap = new Map(updates.map((u) => [u.id, u.sortOrder]));
+      return prev.map((c) => {
+        const newSort = sortMap.get(c.id);
+        if (newSort !== undefined) return { ...c, sortOrder: newSort };
+        return c;
+      }) as typeof prev;
+    });
+
+    batchSortMut.mutate(updates);
+  }
+
+  const activeClient = activeId
+    ? displayNodes.find((c) => c.id === activeId)
+    : null;
 
   return (
     <div className="p-6 max-w-4xl mx-auto">
-      <div className="flex items-center justify-between mb-6">
-        <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-50">Clients</h1>
-          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-            Client hierarchy for project assignment and chargeability reporting <InfoTooltip content="Clients are companies or brands that commission projects. The hierarchy supports parent/child relationships (e.g. BMW Group > BMW > MINI). Projects are assigned to clients for revenue tracking and chargeability reporting." />
-          </p>
-        </div>
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-50">Clients</h1>
+        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+          Manage clients for project assignment and chargeability reporting{" "}
+          <InfoTooltip content="Clients are companies or brands that commission projects. Use the tree hierarchy for parent/child relationships. Drag to reorder within a level, click to edit inline, and use tags for categorization." />
+        </p>
+      </div>
+
+      {/* Add new client -- sticky row */}
+      <div className="mb-4 flex items-center gap-2">
+        <input
+          ref={newInputRef}
+          type="text"
+          value={newName}
+          onChange={(e) => setNewName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") handleCreate();
+          }}
+          placeholder="New client name..."
+          className="flex-1 border border-gray-300 dark:border-gray-600 rounded-xl px-4 py-2.5 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-transparent"
+        />
+        <select
+          value={newParentId ?? ""}
+          onChange={(e) => setNewParentId(e.target.value || null)}
+          className="border border-gray-300 dark:border-gray-600 rounded-xl px-3 py-2.5 text-sm bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-brand-400 max-w-[200px]"
+          title="Parent client (optional)"
+        >
+          <option value="">No parent (top level)</option>
+          {clients.filter((c) => c.isActive).map((c) => (
+            <option key={c.id} value={c.id}>
+              {c.name}
+            </option>
+          ))}
+        </select>
         <button
           type="button"
-          onClick={() => openCreate()}
-          className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium"
+          onClick={handleCreate}
+          disabled={!newName.trim() || createMut.isPending}
+          className="px-5 py-2.5 bg-brand-600 text-white rounded-xl hover:bg-brand-700 text-sm font-medium disabled:opacity-50 transition-colors flex-shrink-0"
         >
-          + Add Client
+          {createMut.isPending ? "Adding..." : "Add"}
         </button>
       </div>
 
-      <div className="mb-4">
+      {/* Search/filter */}
+      <div className="mb-4 flex items-center gap-2">
         <input
           type="search"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
-          placeholder="Search clients..."
-          className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 w-64 bg-white dark:bg-gray-900 dark:text-gray-100"
+          placeholder="Filter by name or tag..."
+          className="border border-gray-300 dark:border-gray-600 rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 w-full sm:w-72 bg-white dark:bg-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
         />
+        {!search && clients.length > 0 && (
+          <button
+            type="button"
+            onClick={() => {
+              // Toggle collapse all / expand all
+              const allWithChildren = clients.filter(
+                (c) => (c._count?.children ?? 0) > 0,
+              );
+              if (collapsedIds.size === 0) {
+                setCollapsedIds(new Set(allWithChildren.map((c) => c.id)));
+              } else {
+                setCollapsedIds(new Set());
+              }
+            }}
+            className="text-xs text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 whitespace-nowrap px-2 py-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            {collapsedIds.size === 0 ? "Collapse all" : "Expand all"}
+          </button>
+        )}
       </div>
 
+      {/* Error */}
       {error && (
-        <div className="mb-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 px-4 py-3 text-sm text-red-700 dark:text-red-400 flex items-center justify-between">
+        <div className="mb-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 px-4 py-3 text-sm text-red-700 dark:text-red-400 flex items-center justify-between">
           {error}
-          <button type="button" onClick={() => setError(null)} className="text-red-400 hover:text-red-600 text-lg leading-none">&times;</button>
+          <button
+            type="button"
+            onClick={() => setError(null)}
+            className="text-red-400 hover:text-red-600 text-lg leading-none ml-4"
+          >
+            &times;
+          </button>
         </div>
       )}
 
-      <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-2">
-        {isLoading && <div className="text-center py-8 text-gray-400">Loading...</div>}
-        {!isLoading && filteredTree.length === 0 && (
-          <div className="text-center py-8 text-gray-400">
-            {search ? "No clients match your search." : "No clients yet."}
+      {/* Client list */}
+      <div className="space-y-2">
+        {isLoading && (
+          <div className="text-center py-12 text-gray-400 dark:text-gray-500">Loading...</div>
+        )}
+
+        {!isLoading && displayNodes.length === 0 && (
+          <div className="text-center py-12 text-gray-400 dark:text-gray-500 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
+            {search ? "No clients match your filter." : "No clients yet. Add one above."}
           </div>
         )}
-        {filteredTree.map((node) => (
-          <ClientTreeNode key={node.id} node={node} onEdit={openEdit} onAddChild={(pid) => openCreate(pid)} />
-        ))}
+
+        {!isLoading && displayNodes.length > 0 && (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext
+              items={displayNodes.map((c) => c.id)}
+              strategy={verticalListSortingStrategy}
+            >
+              {displayNodes.map((client) => (
+                <SortableClientCard
+                  key={client.id}
+                  client={client}
+                  allClients={clients}
+                  allKnownTags={allKnownTags}
+                  onUpdateName={handleUpdateName}
+                  onUpdateSortOrder={handleUpdateSortOrder}
+                  onUpdateTags={handleUpdateTags}
+                  onUpdateParent={handleUpdateParent}
+                  onDelete={handleDelete}
+                  onToggleExpand={handleToggleExpand}
+                  isExpanded={!collapsedIds.has(client.id)}
+                />
+              ))}
+            </SortableContext>
+
+            <DragOverlay>
+              {activeClient ? (
+                <SortableClientCard
+                  client={{ ...activeClient, depth: 0 }}
+                  allClients={clients}
+                  allKnownTags={allKnownTags}
+                  onUpdateName={() => {}}
+                  onUpdateSortOrder={() => {}}
+                  onUpdateTags={() => {}}
+                  onUpdateParent={() => {}}
+                  onDelete={() => {}}
+                  onToggleExpand={() => {}}
+                  isExpanded={false}
+                  isDragOverlay
+                />
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+        )}
       </div>
 
-      {/* Create/Edit Modal */}
-      {editing && (
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
-          <div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-md mx-4">
-            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-              <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
-                {editing.id ? "Edit Client" : "Add Client"}
-              </h2>
-              <button type="button" onClick={() => setEditing(null)} className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-2xl leading-none">&times;</button>
-            </div>
-
-            <div className="px-6 py-5 space-y-4">
-              <div>
-                <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Name <InfoTooltip content="The full name of the client. Shown in project assignment dropdowns and reports." /></label>
-                <input
-                  type="text"
-                  value={editing.name}
-                  onChange={(e) => setEditing({ ...editing, name: e.target.value })}
-                  placeholder="e.g. BMW Group"
-                  className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
-                />
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Code <InfoTooltip content="A short abbreviation for this client (e.g. BMW). Used in compact views and rate card assignments." /></label>
-                  <input
-                    type="text"
-                    value={editing.code}
-                    onChange={(e) => setEditing({ ...editing, code: e.target.value })}
-                    placeholder="BMW"
-                    className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400 font-mono"
-                  />
-                </div>
-                <div>
-                  <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Sort Order <InfoTooltip content="Controls the display order. Lower numbers appear first." /></label>
-                  <input
-                    type="number"
-                    value={editing.sortOrder}
-                    onChange={(e) => setEditing({ ...editing, sortOrder: parseInt(e.target.value) || 0 })}
-                    className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <label className="flex items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Parent Client <InfoTooltip content="Set a parent to create a hierarchy (e.g. MINI under BMW Group). Child clients inherit the parent's reporting context." /></label>
-                <select
-                  value={editing.parentId}
-                  onChange={(e) => setEditing({ ...editing, parentId: e.target.value })}
-                  className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
-                >
-                  <option value="">— Top level (no parent) —</option>
-                  {allClients
-                    .filter((c) => c.id !== editing.id && c.isActive)
-                    .map((c) => (
-                      <option key={c.id} value={c.id}>
-                        {c.name} {c.code ? `[${c.code}]` : ""}
-                      </option>
-                    ))}
-                </select>
-              </div>
-            </div>
-
-            <div className="flex items-center justify-end px-6 py-4 border-t border-gray-200 dark:border-gray-700 gap-3">
-              <button type="button" onClick={() => setEditing(null)} className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">Cancel</button>
-              <button
-                type="button"
-                onClick={handleSave}
-                disabled={isPending || !editing.name}
-                className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
-              >
-                {isPending ? "Saving..." : editing.id ? "Update" : "Create"}
-              </button>
-            </div>
-          </div>
+      {/* Count */}
+      {!isLoading && clients.length > 0 && (
+        <div className="mt-4 text-xs text-gray-400 dark:text-gray-500 text-right">
+          {displayNodes.length} of {clients.length} client{clients.length !== 1 ? "s" : ""}
+          {clients.filter((c) => c.parentId).length > 0 && (
+            <span className="ml-2">
+              ({clients.filter((c) => !c.parentId).length} top-level, {clients.filter((c) => c.parentId).length} nested)
+            </span>
+          )}
         </div>
       )}
     </div>
diff --git a/apps/web/src/components/admin/CountriesClient.tsx b/apps/web/src/components/admin/CountriesClient.tsx
index dc8f269..d6f5c48 100644
--- a/apps/web/src/components/admin/CountriesClient.tsx
+++ b/apps/web/src/components/admin/CountriesClient.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { useState } from "react";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
+import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
@@ -58,6 +60,7 @@ export function CountriesClient() {
   const [editing, setEditing] = useState<EditingCountry | null>(null);
   const [cityName, setCityName] = useState("");
   const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [confirmDeleteCity, setConfirmDeleteCity] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const utils = trpc.useUtils();
@@ -236,11 +239,7 @@ export function CountriesClient() {
                   {city.name}
                   <button
                     type="button"
-                    onClick={() => {
-                      if (confirm(`Delete metro city "${city.name}"?`)) {
-                        deleteCityMut.mutate({ id: city.id });
-                      }
-                    }}
+                    onClick={() => setConfirmDeleteCity(city.id)}
                     className="text-gray-400 hover:text-red-500 text-xs leading-none ml-1"
                   >
                     &times;
@@ -274,9 +273,8 @@ export function CountriesClient() {
       })()}
 
       {/* Create/Edit Modal */}
-      {editing && (
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
-          <div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-lg mx-4 flex flex-col max-h-[90vh]">
+      <AnimatedModal open={editing !== null} onClose={() => setEditing(null)} maxWidth="max-w-lg" className="flex flex-col max-h-[90vh]">
+        {editing && (<>
             <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
               <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                 {editing.id ? "Edit Country" : "Add Country"}
@@ -406,8 +404,21 @@ export function CountriesClient() {
                 {isPending ? "Saving..." : editing.id ? "Update" : "Create"}
               </button>
             </div>
-          </div>
-        </div>
+        </>)}
+      </AnimatedModal>
+
+      {confirmDeleteCity && (
+        <ConfirmDialog
+          title="Delete metro city"
+          message="Are you sure you want to delete this metro city?"
+          confirmLabel="Delete"
+          variant="danger"
+          onConfirm={() => {
+            deleteCityMut.mutate({ id: confirmDeleteCity });
+            setConfirmDeleteCity(null);
+          }}
+          onCancel={() => setConfirmDeleteCity(null)}
+        />
       )}
     </div>
   );
diff --git a/apps/web/src/components/admin/DispoImportClient.tsx b/apps/web/src/components/admin/DispoImportClient.tsx
new file mode 100644
index 0000000..65b6999
--- /dev/null
+++ b/apps/web/src/components/admin/DispoImportClient.tsx
@@ -0,0 +1,317 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { clsx } from "clsx";
+import { Button } from "@planarchy/ui";
+import { Badge } from "@planarchy/ui";
+import { trpc } from "~/lib/trpc/client.js";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
+import { ShimmerSkeleton } from "~/components/ui/ShimmerSkeleton.js";
+
+/* ------------------------------------------------------------------ */
+/*  Types (mirrors API output)                                        */
+/* ------------------------------------------------------------------ */
+
+type BatchStatus =
+  | "DRAFT"
+  | "STAGING"
+  | "STAGED"
+  | "REVIEW_READY"
+  | "APPROVED"
+  | "COMMITTING"
+  | "COMMITTED"
+  | "FAILED"
+  | "CANCELLED";
+
+/* ------------------------------------------------------------------ */
+/*  Status badge                                                      */
+/* ------------------------------------------------------------------ */
+
+const STATUS_BADGE: Record<BatchStatus, { label: string; variant: "default" | "success" | "warning" | "danger" | "info" }> = {
+  DRAFT: { label: "Draft", variant: "default" },
+  STAGING: { label: "Staging", variant: "info" },
+  APPROVED: { label: "Approved", variant: "success" },
+  STAGED: { label: "Staged", variant: "info" },
+  REVIEW_READY: { label: "Review Ready", variant: "warning" },
+  COMMITTING: { label: "Committing", variant: "info" },
+  COMMITTED: { label: "Committed", variant: "success" },
+  FAILED: { label: "Failed", variant: "danger" },
+  CANCELLED: { label: "Cancelled", variant: "default" },
+};
+
+function StatusBadge({ status }: { status: BatchStatus }) {
+  const cfg = STATUS_BADGE[status] ?? STATUS_BADGE.DRAFT;
+  return <Badge variant={cfg.variant}>{cfg.label}</Badge>;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Truncate ID helper                                                */
+/* ------------------------------------------------------------------ */
+
+function truncateId(id: string) {
+  return id.length > 12 ? `${id.slice(0, 8)}...` : id;
+}
+
+/* ------------------------------------------------------------------ */
+/*  New Import Modal                                                   */
+/* ------------------------------------------------------------------ */
+
+const WORKBOOK_LABELS: { key: string; label: string; placeholder: string }[] = [
+  { key: "resources", label: "Resources Workbook", placeholder: "/data/dispo/resources.xlsx" },
+  { key: "projects", label: "Projects Workbook", placeholder: "/data/dispo/projects.xlsx" },
+  { key: "assignments", label: "Assignments Workbook", placeholder: "/data/dispo/assignments.xlsx" },
+  { key: "vacations", label: "Vacations Workbook", placeholder: "/data/dispo/vacations.xlsx" },
+  { key: "roles", label: "Roles Workbook", placeholder: "/data/dispo/roles.xlsx" },
+];
+
+function NewImportModal({
+  open,
+  onClose,
+  onCreated,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onCreated: () => void;
+}) {
+  const [filePaths, setFilePaths] = useState<Record<string, string>>({});
+  const [error, setError] = useState<string | null>(null);
+
+  const stageMutation = trpc.dispo.stageImportBatch.useMutation({
+    onSuccess: () => {
+      onCreated();
+      onClose();
+      setFilePaths({});
+      setError(null);
+    },
+    onError: (err) => setError(err.message),
+  });
+
+  function handleSubmit() {
+    setError(null);
+    const nonEmpty = Object.fromEntries(
+      Object.entries(filePaths).filter(([, v]) => v.trim().length > 0),
+    );
+    if (Object.keys(nonEmpty).length === 0) {
+      setError("Provide at least one workbook path.");
+      return;
+    }
+    stageMutation.mutate({
+      referenceWorkbookPath: (nonEmpty as Record<string, string>).referenceWorkbookPath ?? "",
+      planningWorkbookPath: (nonEmpty as Record<string, string>).planningWorkbookPath ?? "",
+      chargeabilityWorkbookPath: (nonEmpty as Record<string, string>).chargeabilityWorkbookPath ?? "",
+      ...(nonEmpty.rosterWorkbookPath ? { rosterWorkbookPath: nonEmpty.rosterWorkbookPath } : {}),
+      ...(nonEmpty.costWorkbookPath ? { costWorkbookPath: nonEmpty.costWorkbookPath } : {}),
+    } as any);
+  }
+
+  return (
+    <AnimatedModal open={open} onClose={onClose} maxWidth="max-w-lg">
+      <div className="px-6 py-5">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+          New Dispo Import
+        </h2>
+
+        <div className="space-y-3">
+          {WORKBOOK_LABELS.map(({ key, label, placeholder }) => (
+            <div key={key}>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                {label}
+              </label>
+              <input
+                type="text"
+                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
+                placeholder={placeholder}
+                value={filePaths[key] ?? ""}
+                onChange={(e) =>
+                  setFilePaths((prev) => ({ ...prev, [key]: e.target.value }))
+                }
+              />
+            </div>
+          ))}
+        </div>
+
+        {error && (
+          <p className="mt-3 text-sm text-red-600 dark:text-red-400">{error}</p>
+        )}
+
+        <div className="flex justify-end gap-3 mt-6">
+          <Button variant="secondary" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={stageMutation.isPending}
+          >
+            {stageMutation.isPending ? "Staging..." : "Stage Import"}
+          </Button>
+        </div>
+      </div>
+    </AnimatedModal>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Main Component                                                     */
+/* ------------------------------------------------------------------ */
+
+export function DispoImportClient() {
+  const [statusFilter, setStatusFilter] = useState<BatchStatus | "">("");
+  const [showNewModal, setShowNewModal] = useState(false);
+
+  const utils = trpc.useUtils();
+
+  const { data: batches, isLoading } = trpc.dispo.listImportBatches.useQuery(
+    { status: statusFilter || undefined },
+    { staleTime: 10_000 },
+  );
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+            Dispo Import
+          </h1>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+            Manage Dispo imports
+          </p>
+        </div>
+        <Button onClick={() => setShowNewModal(true)}>New Import</Button>
+      </div>
+
+      {/* Status filter */}
+      <div className="mb-4 flex items-center gap-3">
+        <label className="text-sm font-medium text-gray-600 dark:text-gray-400">
+          Status:
+        </label>
+        <select
+          className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
+          value={statusFilter}
+          onChange={(e) => setStatusFilter(e.target.value as BatchStatus | "")}
+        >
+          <option value="">All</option>
+          {Object.keys(STATUS_BADGE).map((s) => (
+            <option key={s} value={s}>
+              {STATUS_BADGE[s as BatchStatus].label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Table */}
+      {isLoading ? (
+        <div className="space-y-3">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <ShimmerSkeleton key={i} height={48} rounded="lg" />
+          ))}
+        </div>
+      ) : !batches?.items || batches.items.length === 0 ? (
+        <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-12 text-center">
+          <p className="text-gray-500 dark:text-gray-400">
+            No import batches found.
+          </p>
+        </div>
+      ) : (
+        <div className="overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead className="bg-gray-50 dark:bg-gray-800/60">
+              <tr>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  ID
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Source Files
+                </th>
+                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Staged
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Created
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Updated
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100 dark:divide-gray-700/50">
+              {batches.items.map((batch: any) => (
+                <tr
+                  key={batch.id}
+                  className="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors"
+                >
+                  <td className="px-4 py-3">
+                    <Link
+                      href={`/admin/dispo-imports/${batch.id}`}
+                      className="text-sm font-mono text-brand-600 hover:text-brand-800 dark:text-brand-400 dark:hover:text-brand-300 underline decoration-dotted"
+                    >
+                      {truncateId(batch.id)}
+                    </Link>
+                  </td>
+                  <td className="px-4 py-3">
+                    <StatusBadge status={batch.status} />
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-400 max-w-xs truncate">
+                    {batch.sourceFiles
+                      ? Object.keys(batch.sourceFiles).join(", ")
+                      : "-"}
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    {batch.stagedCounts ? (
+                      <div className="flex items-center justify-end gap-2 text-xs text-gray-500 dark:text-gray-400">
+                        <span>{batch.stagedCounts.resources} res</span>
+                        <span className="text-gray-300 dark:text-gray-600">|</span>
+                        <span>{batch.stagedCounts.projects} proj</span>
+                        <span className="text-gray-300 dark:text-gray-600">|</span>
+                        <span>{batch.stagedCounts.assignments} asgn</span>
+                        {batch.stagedCounts.unresolved > 0 && (
+                          <>
+                            <span className="text-gray-300 dark:text-gray-600">|</span>
+                            <span className="text-amber-600 dark:text-amber-400 font-medium">
+                              {batch.stagedCounts.unresolved} unresolved
+                            </span>
+                          </>
+                        )}
+                      </div>
+                    ) : (
+                      <span className="text-xs text-gray-400">-</span>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
+                    {new Date(batch.createdAt).toLocaleDateString("de-DE", {
+                      day: "2-digit",
+                      month: "2-digit",
+                      year: "numeric",
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
+                    {new Date(batch.updatedAt).toLocaleDateString("de-DE", {
+                      day: "2-digit",
+                      month: "2-digit",
+                      year: "numeric",
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* New Import Modal */}
+      <NewImportModal
+        open={showNewModal}
+        onClose={() => setShowNewModal(false)}
+        onCreated={() => utils.dispo.listImportBatches.invalidate()}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/components/admin/DispoImportDetailClient.tsx b/apps/web/src/components/admin/DispoImportDetailClient.tsx
new file mode 100644
index 0000000..6c16b33
--- /dev/null
+++ b/apps/web/src/components/admin/DispoImportDetailClient.tsx
@@ -0,0 +1,1119 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { clsx } from "clsx";
+import { Button } from "@planarchy/ui";
+import { Badge } from "@planarchy/ui";
+import { trpc } from "~/lib/trpc/client.js";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
+import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
+import { ShimmerSkeleton } from "~/components/ui/ShimmerSkeleton.js";
+
+/* ------------------------------------------------------------------ */
+/*  Shared types (mirrors API)                                        */
+/* ------------------------------------------------------------------ */
+
+type BatchStatus =
+  | "DRAFT"
+  | "STAGING"
+  | "STAGED"
+  | "REVIEW_READY"
+  | "APPROVED"
+  | "COMMITTING"
+  | "COMMITTED"
+  | "FAILED"
+  | "CANCELLED";
+
+type RecordStatus = "PARSED" | "NORMALIZED" | "UNRESOLVED" | "APPROVED" | "REJECTED" | "COMMITTED" | "FAILED";
+type UnresolvedAction = "APPROVE" | "REJECT" | "SKIP";
+
+const STATUS_BADGE: Record<
+  BatchStatus,
+  { label: string; variant: "default" | "success" | "warning" | "danger" | "info" }
+> = {
+  DRAFT: { label: "Draft", variant: "default" },
+  STAGING: { label: "Staging", variant: "info" },
+  STAGED: { label: "Staged", variant: "info" },
+  REVIEW_READY: { label: "Review Ready", variant: "warning" },
+  APPROVED: { label: "Approved", variant: "success" },
+  COMMITTING: { label: "Committing", variant: "info" },
+  COMMITTED: { label: "Committed", variant: "success" },
+  FAILED: { label: "Failed", variant: "danger" },
+  CANCELLED: { label: "Cancelled", variant: "default" },
+};
+
+const RECORD_STATUS_COLORS: Record<RecordStatus, string> = {
+  PARSED: "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400",
+  NORMALIZED: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400",
+  UNRESOLVED: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400",
+  APPROVED: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400",
+  REJECTED: "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400",
+  COMMITTED: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400",
+  FAILED: "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400",
+};
+
+type TabKey = "summary" | "resources" | "projects" | "assignments" | "vacations" | "unresolved";
+
+const TABS: { key: TabKey; label: string }[] = [
+  { key: "summary", label: "Summary" },
+  { key: "resources", label: "Resources" },
+  { key: "projects", label: "Projects" },
+  { key: "assignments", label: "Assignments" },
+  { key: "vacations", label: "Vacations" },
+  { key: "unresolved", label: "Unresolved" },
+];
+
+/* ------------------------------------------------------------------ */
+/*  Helper                                                             */
+/* ------------------------------------------------------------------ */
+
+function RecordBadge({ status }: { status: RecordStatus }) {
+  return (
+    <span
+      className={clsx(
+        "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
+        RECORD_STATUS_COLORS[status] ?? RECORD_STATUS_COLORS.PARSED,
+      )}
+    >
+      {status}
+    </span>
+  );
+}
+
+function formatDate(d: string | null | undefined) {
+  if (!d) return "-";
+  return new Date(d).toLocaleDateString("de-DE", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function SummaryCard({
+  label,
+  count,
+  variant = "default",
+}: {
+  label: string;
+  count: number;
+  variant?: "default" | "warning" | "danger";
+}) {
+  return (
+    <div
+      className={clsx(
+        "rounded-xl border p-4",
+        variant === "danger"
+          ? "border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20"
+          : variant === "warning"
+            ? "border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-900/20"
+            : "border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800",
+      )}
+    >
+      <p className="text-sm text-gray-500 dark:text-gray-400">{label}</p>
+      <p
+        className={clsx(
+          "text-2xl font-bold mt-1",
+          variant === "danger"
+            ? "text-red-700 dark:text-red-400"
+            : variant === "warning"
+              ? "text-amber-700 dark:text-amber-400"
+              : "text-gray-900 dark:text-gray-100",
+        )}
+      >
+        {count}
+      </p>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tab: Summary                                                       */
+/* ------------------------------------------------------------------ */
+
+function SummaryTab({
+  batch,
+  validationResult,
+}: {
+  batch: {
+    counts: {
+      resourceCount: number;
+      clientCount: number;
+      projectCount: number;
+      assignmentCount: number;
+      vacationCount: number;
+      availabilityRuleCount: number;
+      unresolvedCount: number;
+    } | null;
+    status: BatchStatus;
+  };
+  validationResult: { blocking: string[]; warnings: string[] } | null;
+}) {
+  const counts = batch.counts;
+
+  return (
+    <div className="space-y-6">
+      {/* Counts grid */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
+        <SummaryCard label="Resources" count={counts?.resourceCount ?? 0} />
+        <SummaryCard label="Projects" count={counts?.projectCount ?? 0} />
+        <SummaryCard label="Assignments" count={counts?.assignmentCount ?? 0} />
+        <SummaryCard label="Vacations" count={counts?.vacationCount ?? 0} />
+        <SummaryCard
+          label="Unresolved"
+          count={counts?.unresolvedCount ?? 0}
+          variant={
+            (counts?.unresolvedCount ?? 0) > 0 ? "warning" : "default"
+          }
+        />
+      </div>
+
+      {/* Validation results */}
+      {validationResult && (
+        <div className="space-y-4">
+          {validationResult.blocking.length > 0 && (
+            <div className="rounded-xl border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20 p-4">
+              <h3 className="text-sm font-semibold text-red-700 dark:text-red-400 mb-2">
+                Blocking Issues ({validationResult.blocking.length})
+              </h3>
+              <ul className="list-disc list-inside text-sm text-red-600 dark:text-red-400 space-y-1">
+                {validationResult.blocking.map((msg, i) => (
+                  <li key={i}>{msg}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {validationResult.warnings.length > 0 && (
+            <div className="rounded-xl border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-900/20 p-4">
+              <h3 className="text-sm font-semibold text-amber-700 dark:text-amber-400 mb-2">
+                Warnings ({validationResult.warnings.length})
+              </h3>
+              <ul className="list-disc list-inside text-sm text-amber-600 dark:text-amber-400 space-y-1">
+                {validationResult.warnings.map((msg, i) => (
+                  <li key={i}>{msg}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {validationResult.blocking.length === 0 &&
+            validationResult.warnings.length === 0 && (
+              <div className="rounded-xl border border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-900/20 p-4">
+                <p className="text-sm font-medium text-green-700 dark:text-green-400">
+                  All validation checks passed. Ready to commit.
+                </p>
+              </div>
+            )}
+        </div>
+      )}
+
+      {/* Status indicator for failed batches */}
+      {batch.status === "FAILED" && (
+        <div className="rounded-xl border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20 p-4">
+          <h3 className="text-sm font-semibold text-red-700 dark:text-red-400 mb-1">
+            Error
+          </h3>
+          <p className="text-sm text-red-600 dark:text-red-400 font-mono whitespace-pre-wrap">
+            This import batch has failed. Check the unresolved records tab for details.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tab: Resources                                                     */
+/* ------------------------------------------------------------------ */
+
+function ResourcesTab({ batchId }: { batchId: string }) {
+  const [page, setPage] = useState(0);
+  const PAGE_SIZE = 50;
+
+  const { data: rawData, isLoading } = trpc.dispo.listStagedResources.useQuery(
+    { importBatchId: batchId, limit: PAGE_SIZE },
+    { staleTime: 15_000 },
+  );
+  const data = rawData as { items: Record<string, unknown>[]; nextCursor?: string } | undefined;
+
+  if (isLoading) return <TableSkeleton rows={8} cols={5} />;
+
+  const records = data?.items ?? [];
+  const total = records.length;
+
+  return (
+    <div>
+      <PaginatedTable
+        total={total}
+        page={page}
+        pageSize={PAGE_SIZE}
+        onPageChange={setPage}
+      >
+        <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+          <thead className="bg-gray-50 dark:bg-gray-800/60">
+            <tr>
+              <Th>Name</Th>
+              <Th>EID</Th>
+              <Th>Chapter</Th>
+              <Th>Status</Th>
+              <Th>Warnings</Th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100 dark:divide-gray-700/50">
+            {records.map((r: Record<string, unknown>) => (
+              <tr key={r.id as string} className="hover:bg-gray-50 dark:hover:bg-gray-700/30">
+                <Td>{(r.displayName as string) ?? (r.name as string) ?? "-"}</Td>
+                <Td mono>{(r.eid as string) ?? "-"}</Td>
+                <Td>{(r.chapter as string) ?? "-"}</Td>
+                <Td>
+                  <RecordBadge status={(r.status as RecordStatus) ?? "PARSED"} />
+                </Td>
+                <Td>
+                  {Array.isArray(r.warnings) && r.warnings.length > 0 ? (
+                    <span className="text-amber-600 dark:text-amber-400 text-xs">
+                      {r.warnings.length} warning{r.warnings.length !== 1 ? "s" : ""}
+                    </span>
+                  ) : (
+                    <span className="text-gray-400 text-xs">-</span>
+                  )}
+                </Td>
+              </tr>
+            ))}
+            {records.length === 0 && (
+              <tr>
+                <td colSpan={5} className="px-4 py-8 text-center text-sm text-gray-400">
+                  No staged resources.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </PaginatedTable>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tab: Projects                                                      */
+/* ------------------------------------------------------------------ */
+
+function ProjectsTab({ batchId }: { batchId: string }) {
+  const [page, setPage] = useState(0);
+  const PAGE_SIZE = 50;
+
+  const { data: rawData, isLoading } = trpc.dispo.listStagedProjects.useQuery(
+    { importBatchId: batchId, limit: PAGE_SIZE } as { importBatchId: string; limit: number },
+    { staleTime: 15_000 },
+  );
+  const data = rawData as { items: Record<string, unknown>[]; nextCursor?: string } | undefined;
+
+  if (isLoading) return <TableSkeleton rows={8} cols={6} />;
+
+  const records = data?.items ?? [];
+  const total = records.length;
+
+  return (
+    <PaginatedTable total={total} page={page} pageSize={PAGE_SIZE} onPageChange={setPage}>
+      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead className="bg-gray-50 dark:bg-gray-800/60">
+          <tr>
+            <Th>Project Key</Th>
+            <Th>Name</Th>
+            <Th>Client</Th>
+            <Th>TBD</Th>
+            <Th>Status</Th>
+            <Th>Warnings</Th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-100 dark:divide-gray-700/50">
+          {records.map((r) => (
+            <tr key={r.id as string} className="hover:bg-gray-50 dark:hover:bg-gray-700/30">
+              <Td mono>{(r.projectKey as string) ?? "-"}</Td>
+              <Td>{(r.name as string) ?? "-"}</Td>
+              <Td>{(r.clientName as string) ?? "-"}</Td>
+              <Td>
+                {r.isTbd ? (
+                  <Badge variant="warning">TBD</Badge>
+                ) : null}
+              </Td>
+              <Td>
+                <RecordBadge status={(r.status as RecordStatus) ?? "PARSED"} />
+              </Td>
+              <Td>
+                {Array.isArray(r.warnings) && r.warnings.length > 0 ? (
+                  <span className="text-amber-600 dark:text-amber-400 text-xs">
+                    {r.warnings.length}
+                  </span>
+                ) : (
+                  <span className="text-gray-400 text-xs">-</span>
+                )}
+              </Td>
+            </tr>
+          ))}
+          {records.length === 0 && (
+            <tr>
+              <td colSpan={6} className="px-4 py-8 text-center text-sm text-gray-400">
+                No staged projects.
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </PaginatedTable>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tab: Assignments                                                   */
+/* ------------------------------------------------------------------ */
+
+function AssignmentsTab({ batchId }: { batchId: string }) {
+  const [page, setPage] = useState(0);
+  const PAGE_SIZE = 50;
+
+  const { data: rawData, isLoading } = trpc.dispo.listStagedAssignments.useQuery(
+    { importBatchId: batchId, limit: PAGE_SIZE },
+    { staleTime: 15_000 },
+  );
+  const data = rawData as { items: Record<string, unknown>[]; nextCursor?: string } | undefined;
+
+  if (isLoading) return <TableSkeleton rows={8} cols={6} />;
+
+  const records = data?.items ?? [];
+  const total = records.length;
+
+  return (
+    <PaginatedTable total={total} page={page} pageSize={PAGE_SIZE} onPageChange={setPage}>
+      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead className="bg-gray-50 dark:bg-gray-800/60">
+          <tr>
+            <Th>Resource</Th>
+            <Th>Project</Th>
+            <Th>Date</Th>
+            <Th>Hours</Th>
+            <Th>Role</Th>
+            <Th>Status</Th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-100 dark:divide-gray-700/50">
+          {records.map((r: Record<string, unknown>, idx: number) => (
+            <tr key={(r.id as string) ?? idx} className="hover:bg-gray-50 dark:hover:bg-gray-700/30">
+              <Td>{(r.resourceName as string) ?? (r.resourceEid as string) ?? "-"}</Td>
+              <Td>{(r.projectName as string) ?? (r.projectKey as string) ?? "-"}</Td>
+              <Td mono>{(r.date as string) ?? "-"}</Td>
+              <Td>{r.hours != null ? String(r.hours) : "-"}</Td>
+              <Td>{(r.roleName as string) ?? "-"}</Td>
+              <Td>
+                <RecordBadge status={(r.status as RecordStatus) ?? "PARSED"} />
+              </Td>
+            </tr>
+          ))}
+          {records.length === 0 && (
+            <tr>
+              <td colSpan={6} className="px-4 py-8 text-center text-sm text-gray-400">
+                No staged assignments.
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </PaginatedTable>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tab: Vacations                                                     */
+/* ------------------------------------------------------------------ */
+
+function VacationsTab({ batchId }: { batchId: string }) {
+  const [page, setPage] = useState(0);
+  const PAGE_SIZE = 50;
+
+  const { data: rawData, isLoading } = trpc.dispo.listStagedVacations.useQuery(
+    { importBatchId: batchId, limit: PAGE_SIZE },
+    { staleTime: 15_000 },
+  );
+  const data = rawData as { items: Record<string, unknown>[]; nextCursor?: string } | undefined;
+
+  if (isLoading) return <TableSkeleton rows={8} cols={5} />;
+
+  const records = data?.items ?? [];
+  const total = records.length;
+
+  return (
+    <PaginatedTable total={total} page={page} pageSize={PAGE_SIZE} onPageChange={setPage}>
+      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead className="bg-gray-50 dark:bg-gray-800/60">
+          <tr>
+            <Th>Resource</Th>
+            <Th>Start</Th>
+            <Th>End</Th>
+            <Th>Type</Th>
+            <Th>Status</Th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-100 dark:divide-gray-700/50">
+          {records.map((r: Record<string, unknown>, idx: number) => (
+            <tr key={(r.id as string) ?? idx} className="hover:bg-gray-50 dark:hover:bg-gray-700/30">
+              <Td>{(r.resourceName as string) ?? (r.resourceEid as string) ?? "-"}</Td>
+              <Td mono>{(r.startDate as string) ?? "-"}</Td>
+              <Td mono>{(r.endDate as string) ?? "-"}</Td>
+              <Td>{(r.vacationType as string) ?? "-"}</Td>
+              <Td>
+                <RecordBadge status={(r.status as RecordStatus) ?? "PARSED"} />
+              </Td>
+            </tr>
+          ))}
+          {records.length === 0 && (
+            <tr>
+              <td colSpan={5} className="px-4 py-8 text-center text-sm text-gray-400">
+                No staged vacations.
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </PaginatedTable>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tab: Unresolved Review Queue                                       */
+/* ------------------------------------------------------------------ */
+
+function UnresolvedTab({ batchId }: { batchId: string }) {
+  const utils = trpc.useUtils();
+
+  const { data: rawData, isLoading, refetch } = trpc.dispo.listStagedUnresolvedRecords.useQuery(
+    { importBatchId: batchId },
+    { staleTime: 10_000 },
+  );
+  const data = rawData as { items: Record<string, unknown>[]; nextCursor?: string } | undefined;
+
+  const resolveMutation = trpc.dispo.resolveStagedRecord.useMutation({
+    onSuccess: () => {
+      refetch();
+      utils.dispo.getImportBatch.invalidate({ id: batchId });
+    },
+  });
+
+  const records = data?.items ?? [];
+  const remaining = records.filter(
+    (r) => r.status === "PARSED" || r.status === "NORMALIZED" || r.status === "UNRESOLVED",
+  ).length;
+
+  function handleAction(recordId: string, action: UnresolvedAction) {
+    resolveMutation.mutate({
+      id: recordId,
+      recordType: "UNRESOLVED" as const,
+      action,
+    });
+  }
+
+  function handleBulkApproveNonBlocking() {
+    const nonBlocking = records.filter(
+      (r: Record<string, unknown>) =>
+        r.status === "PARSED" || r.status === "NORMALIZED" || r.status === "UNRESOLVED",
+    );
+    for (const r of nonBlocking) {
+      handleAction(r.id as string, "APPROVE");
+    }
+  }
+
+  function handleBulkSkipTbd() {
+    const tbdRecords = records.filter(
+      (r: Record<string, unknown>) =>
+        (r.status === "PARSED" || r.status === "NORMALIZED" || r.status === "UNRESOLVED") &&
+        typeof r.message === "string" &&
+        (r.message as string).toLowerCase().includes("[tbd]"),
+    );
+    for (const r of tbdRecords) {
+      handleAction(r.id as string, "SKIP");
+    }
+  }
+
+  if (isLoading) return <TableSkeleton rows={6} cols={5} />;
+
+  return (
+    <div className="space-y-4">
+      {/* Header with bulk actions */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+            Unresolved Records
+          </h3>
+          {remaining > 0 && (
+            <span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400 text-xs font-bold">
+              {remaining}
+            </span>
+          )}
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleBulkSkipTbd}
+            disabled={resolveMutation.isPending}
+          >
+            Skip All [tbd]
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleBulkApproveNonBlocking}
+            disabled={resolveMutation.isPending}
+          >
+            Approve All Non-Blocking
+          </Button>
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+        <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+          <thead className="bg-gray-50 dark:bg-gray-800/60">
+            <tr>
+              <Th>Type</Th>
+              <Th>Message</Th>
+              <Th>Source</Th>
+              <Th>Hint</Th>
+              <Th>Actions</Th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100 dark:divide-gray-700/50">
+            {records.map((r: Record<string, unknown>) => {
+              const resolved = r.status === "APPROVED" || r.status === "REJECTED";
+              return (
+                <tr
+                  key={r.id as string}
+                  className={clsx(
+                    "transition-colors",
+                    resolved
+                      ? "opacity-50 bg-gray-50 dark:bg-gray-800/30"
+                      : "hover:bg-gray-50 dark:hover:bg-gray-700/30",
+                  )}
+                >
+                  <Td>
+                    <Badge
+                      variant="warning"
+                    >
+                      {(r.recordType as string) ?? "unknown"}
+                    </Badge>
+                  </Td>
+                  <Td>
+                    <span className="text-sm text-gray-700 dark:text-gray-300">
+                      {(r.message as string) ?? "-"}
+                    </span>
+                  </Td>
+                  <Td>
+                    <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
+                      {(r.source as string) ?? "-"}
+                    </span>
+                  </Td>
+                  <Td>
+                    <span className="text-xs text-gray-500 dark:text-gray-400 italic">
+                      {(r.hint as string) ?? "-"}
+                    </span>
+                  </Td>
+                  <Td>
+                    {resolved ? (
+                      <span className="text-xs text-gray-400 italic">
+                        {r.status as string}
+                      </span>
+                    ) : (
+                      <div className="flex gap-1.5">
+                        <button
+                          type="button"
+                          onClick={() => handleAction(r.id as string, "APPROVE")}
+                          disabled={resolveMutation.isPending}
+                          className="px-2 py-1 text-xs font-medium rounded-md bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/40 dark:text-green-400 dark:hover:bg-green-900/60 transition-colors disabled:opacity-50"
+                        >
+                          Approve
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => handleAction(r.id as string, "REJECT")}
+                          disabled={resolveMutation.isPending}
+                          className="px-2 py-1 text-xs font-medium rounded-md bg-red-100 text-red-600 hover:bg-red-200 dark:bg-red-900/40 dark:text-red-400 dark:hover:bg-red-900/60 transition-colors disabled:opacity-50"
+                        >
+                          Reject
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => handleAction(r.id as string, "SKIP")}
+                          disabled={resolveMutation.isPending}
+                          className="px-2 py-1 text-xs font-medium rounded-md bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 transition-colors disabled:opacity-50"
+                        >
+                          Skip
+                        </button>
+                      </div>
+                    )}
+                  </Td>
+                </tr>
+              );
+            })}
+            {records.length === 0 && (
+              <tr>
+                <td colSpan={5} className="px-4 py-8 text-center text-sm text-gray-400">
+                  No unresolved records. Ready to commit.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Commit Confirmation Modal                                          */
+/* ------------------------------------------------------------------ */
+
+function CommitModal({
+  open,
+  onClose,
+  batchId,
+  counts,
+  validationResult,
+  onCommitted,
+}: {
+  open: boolean;
+  onClose: () => void;
+  batchId: string;
+  counts: {
+    resourceCount: number;
+    clientCount: number;
+    projectCount: number;
+    assignmentCount: number;
+    vacationCount: number;
+    availabilityRuleCount: number;
+    unresolvedCount: number;
+  } | null;
+  validationResult: { blocking: string[]; warnings: string[] } | null;
+  onCommitted: () => void;
+}) {
+  const commitMutation = trpc.dispo.commitImportBatch.useMutation({
+    onSuccess: () => {
+      onCommitted();
+      onClose();
+    },
+  });
+
+  const hasBlockers = (validationResult?.blocking.length ?? 0) > 0;
+
+  return (
+    <AnimatedModal open={open} onClose={onClose} maxWidth="max-w-lg">
+      <div className="px-6 py-5">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+          Commit Import
+        </h2>
+
+        {/* Validation results */}
+        {validationResult && validationResult.blocking.length > 0 && (
+          <div className="rounded-lg border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20 p-3 mb-4">
+            <p className="text-sm font-medium text-red-700 dark:text-red-400 mb-1">
+              Blocking Issues
+            </p>
+            <ul className="list-disc list-inside text-xs text-red-600 dark:text-red-400 space-y-0.5">
+              {validationResult.blocking.map((msg, i) => (
+                <li key={i}>{msg}</li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {validationResult && validationResult.warnings.length > 0 && (
+          <div className="rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-900/20 p-3 mb-4">
+            <p className="text-sm font-medium text-amber-700 dark:text-amber-400 mb-1">
+              Warnings
+            </p>
+            <ul className="list-disc list-inside text-xs text-amber-600 dark:text-amber-400 space-y-0.5">
+              {validationResult.warnings.map((msg, i) => (
+                <li key={i}>{msg}</li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {/* Entity counts */}
+        {counts && (
+          <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-3 mb-4">
+            <p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              Will be committed:
+            </p>
+            <div className="grid grid-cols-2 gap-2 text-sm">
+              <div className="text-gray-600 dark:text-gray-400">
+                Resources: <strong className="text-gray-900 dark:text-gray-100">{counts.resourceCount}</strong>
+              </div>
+              <div className="text-gray-600 dark:text-gray-400">
+                Projects: <strong className="text-gray-900 dark:text-gray-100">{counts.projectCount}</strong>
+              </div>
+              <div className="text-gray-600 dark:text-gray-400">
+                Assignments: <strong className="text-gray-900 dark:text-gray-100">{counts.assignmentCount}</strong>
+              </div>
+              <div className="text-gray-600 dark:text-gray-400">
+                Vacations: <strong className="text-gray-900 dark:text-gray-100">{counts.vacationCount}</strong>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Progress during commit */}
+        {commitMutation.isPending && (
+          <div className="mb-4">
+            <div className="flex items-center gap-3">
+              <div className="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
+                <div className="h-full bg-brand-600 rounded-full animate-pulse w-2/3" />
+              </div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">Committing...</span>
+            </div>
+          </div>
+        )}
+
+        {commitMutation.error && (
+          <p className="text-sm text-red-600 dark:text-red-400 mb-4">
+            {commitMutation.error.message}
+          </p>
+        )}
+
+        <div className="flex justify-end gap-3">
+          <Button variant="secondary" onClick={onClose} disabled={commitMutation.isPending}>
+            Cancel
+          </Button>
+          <Button
+            variant="danger"
+            onClick={() => commitMutation.mutate({ importBatchId: batchId })}
+            disabled={hasBlockers || commitMutation.isPending}
+          >
+            {commitMutation.isPending ? "Committing..." : "Commit Import"}
+          </Button>
+        </div>
+      </div>
+    </AnimatedModal>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Shared Table Primitives                                            */
+/* ------------------------------------------------------------------ */
+
+function Th({ children }: { children: React.ReactNode }) {
+  return (
+    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+      {children}
+    </th>
+  );
+}
+
+function Td({ children, mono }: { children: React.ReactNode; mono?: boolean }) {
+  return (
+    <td
+      className={clsx(
+        "px-4 py-3 text-sm text-gray-700 dark:text-gray-300",
+        mono && "font-mono",
+      )}
+    >
+      {children}
+    </td>
+  );
+}
+
+function TableSkeleton({ rows, cols }: { rows: number; cols: number }) {
+  return (
+    <div className="space-y-2">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex gap-4">
+          {Array.from({ length: cols }).map((_, j) => (
+            <ShimmerSkeleton key={j} height={20} rounded="md" className="flex-1" />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function PaginatedTable({
+  total,
+  page,
+  pageSize,
+  onPageChange,
+  children,
+}: {
+  total: number;
+  page: number;
+  pageSize: number;
+  onPageChange: (p: number) => void;
+  children: React.ReactNode;
+}) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
+  return (
+    <div>
+      <div className="overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+        {children}
+      </div>
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between mt-3 px-1">
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            Showing {page * pageSize + 1}-{Math.min((page + 1) * pageSize, total)} of {total}
+          </p>
+          <div className="flex gap-1">
+            <button
+              type="button"
+              disabled={page === 0}
+              onClick={() => onPageChange(page - 1)}
+              className="px-2.5 py-1 text-xs rounded-md border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+            >
+              Prev
+            </button>
+            <span className="px-2.5 py-1 text-xs text-gray-500 dark:text-gray-400">
+              {page + 1} / {totalPages}
+            </span>
+            <button
+              type="button"
+              disabled={page >= totalPages - 1}
+              onClick={() => onPageChange(page + 1)}
+              className="px-2.5 py-1 text-xs rounded-md border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Main Component                                                     */
+/* ------------------------------------------------------------------ */
+
+export function DispoImportDetailClient({ batchId }: { batchId: string }) {
+  const [activeTab, setActiveTab] = useState<TabKey>("summary");
+  const [showCommitModal, setShowCommitModal] = useState(false);
+  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
+  const [validationResult, setValidationResult] = useState<{
+    blocking: string[];
+    warnings: string[];
+  } | null>(null);
+
+  const utils = trpc.useUtils();
+
+  const { data: batch, isLoading } = trpc.dispo.getImportBatch.useQuery(
+    { id: batchId },
+    { staleTime: 5_000 },
+  );
+
+  // validateImportBatch is a query, so we use a manual trigger pattern
+  const [validationInput, setValidationInput] = useState<{
+    chargeabilityWorkbookPath: string;
+    planningWorkbookPath: string;
+    referenceWorkbookPath: string;
+    importBatchId: string;
+  } | null>(null);
+
+  const { isFetching: isValidating } = trpc.dispo.validateImportBatch.useQuery(
+    validationInput!,
+    {
+      enabled: validationInput !== null,
+      retry: false,
+      onSuccess: (result: { blocking: string[]; warnings: string[] }) => {
+        setValidationResult(result);
+        utils.dispo.getImportBatch.invalidate({ id: batchId });
+        setValidationInput(null);
+      },
+      onError: () => {
+        setValidationInput(null);
+      },
+    } as any,
+  );
+
+  const cancelMutation = trpc.dispo.cancelImportBatch.useMutation({
+    onSuccess: () => {
+      setShowCancelConfirm(false);
+      utils.dispo.getImportBatch.invalidate({ id: batchId });
+    },
+  });
+
+  const status = (batch?.status as BatchStatus) ?? "DRAFT";
+  const counts = batch?.counts ?? null;
+
+  const canReview = status === "STAGED" || status === "REVIEW_READY";
+  const canValidate = canReview;
+  const canCommit = canReview && (validationResult ? validationResult.blocking.length === 0 : false);
+  const canCancel = status === "DRAFT" || status === "STAGED" || status === "REVIEW_READY";
+  const isReadOnly = status === "COMMITTED" || status === "CANCELLED" || status === "FAILED";
+
+  if (isLoading) {
+    return (
+      <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8 space-y-6">
+        <ShimmerSkeleton height={40} rounded="lg" />
+        <div className="grid grid-cols-5 gap-4">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <ShimmerSkeleton key={i} height={80} rounded="xl" />
+          ))}
+        </div>
+        <ShimmerSkeleton height={300} rounded="xl" />
+      </div>
+    );
+  }
+
+  if (!batch) {
+    return (
+      <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
+        <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-12 text-center">
+          <p className="text-gray-500 dark:text-gray-400">Batch not found.</p>
+          <Link
+            href="/admin/dispo-imports"
+            className="text-sm text-brand-600 hover:text-brand-800 dark:text-brand-400 mt-2 inline-block"
+          >
+            Back to list
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
+      {/* Back link */}
+      <Link
+        href="/admin/dispo-imports"
+        className="text-sm text-brand-600 hover:text-brand-800 dark:text-brand-400 dark:hover:text-brand-300 mb-4 inline-flex items-center gap-1"
+      >
+        <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+        </svg>
+        All Imports
+      </Link>
+
+      {/* Header */}
+      <div className="flex items-start justify-between mb-6 mt-2">
+        <div>
+          <div className="flex items-center gap-3">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+              Import Batch
+            </h1>
+            <Badge variant={STATUS_BADGE[status]?.variant ?? "default"}>
+              {STATUS_BADGE[status]?.label ?? status}
+            </Badge>
+          </div>
+          <p className="text-xs text-gray-400 dark:text-gray-500 font-mono mt-1">
+            {batchId}
+          </p>
+          <div className="flex gap-4 text-xs text-gray-500 dark:text-gray-400 mt-2">
+            <span>Created: {formatDate(batch.createdAt as string)}</span>
+            <span>Updated: {formatDate(batch.updatedAt as string)}</span>
+            {batch.committedAt && (
+              <span>Committed: {formatDate(batch.committedAt as string)}</span>
+            )}
+          </div>
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex gap-2">
+          {canValidate && (
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => {
+                setValidationInput({
+                  chargeabilityWorkbookPath: (batch as any)?.chargeabilitySourceFile ?? "",
+                  planningWorkbookPath: (batch as any)?.planningSourceFile ?? "",
+                  referenceWorkbookPath: (batch as any)?.referenceSourceFile ?? "",
+                  importBatchId: batchId,
+                });
+              }}
+              disabled={isValidating}
+            >
+              {isValidating ? "Validating..." : "Validate"}
+            </Button>
+          )}
+          {canReview && (
+            <Button
+              size="sm"
+              onClick={() => setShowCommitModal(true)}
+              disabled={!canCommit && validationResult !== null}
+            >
+              Commit
+            </Button>
+          )}
+          {canCancel && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setShowCancelConfirm(true)}
+            >
+              Cancel Import
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="border-b border-gray-200 dark:border-gray-700 mb-6">
+        <nav className="flex gap-0 -mb-px">
+          {TABS.map((tab) => (
+            <button
+              key={tab.key}
+              type="button"
+              onClick={() => setActiveTab(tab.key)}
+              className={clsx(
+                "px-4 py-2.5 text-sm font-medium border-b-2 transition-colors",
+                activeTab === tab.key
+                  ? "border-brand-600 text-brand-700 dark:text-brand-400 dark:border-brand-400"
+                  : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600",
+              )}
+            >
+              {tab.label}
+              {tab.key === "unresolved" && (counts?.unresolvedCount ?? 0) > 0 && (
+                <span className="ml-1.5 inline-flex items-center justify-center min-w-[18px] h-4 px-1 rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400 text-[10px] font-bold">
+                  {counts!.unresolvedCount}
+                </span>
+              )}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {/* Tab content */}
+      <div>
+        {activeTab === "summary" && (
+          <SummaryTab batch={{ ...batch, status, counts }} validationResult={validationResult} />
+        )}
+        {activeTab === "resources" && <ResourcesTab batchId={batchId} />}
+        {activeTab === "projects" && <ProjectsTab batchId={batchId} />}
+        {activeTab === "assignments" && <AssignmentsTab batchId={batchId} />}
+        {activeTab === "vacations" && <VacationsTab batchId={batchId} />}
+        {activeTab === "unresolved" && <UnresolvedTab batchId={batchId} />}
+      </div>
+
+      {/* Commit modal */}
+      <CommitModal
+        open={showCommitModal}
+        onClose={() => setShowCommitModal(false)}
+        batchId={batchId}
+        counts={counts}
+        validationResult={validationResult}
+        onCommitted={() => utils.dispo.getImportBatch.invalidate({ id: batchId })}
+      />
+
+      {/* Cancel confirmation */}
+      {showCancelConfirm && (
+        <ConfirmDialog
+          title="Cancel Import"
+          message="Are you sure you want to cancel this import batch? All staged records will be discarded."
+          confirmLabel={cancelMutation.isPending ? "Cancelling..." : "Cancel Import"}
+          variant="danger"
+          onConfirm={() => cancelMutation.mutate({ id: batchId })}
+          onCancel={() => setShowCancelConfirm(false)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/admin/EffortRulesClient.tsx b/apps/web/src/components/admin/EffortRulesClient.tsx
index 32517b2..2af1de7 100644
--- a/apps/web/src/components/admin/EffortRulesClient.tsx
+++ b/apps/web/src/components/admin/EffortRulesClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
@@ -87,6 +88,7 @@ export function EffortRulesClient() {
 
   const [editing, setEditing] = useState<EditingRuleSet | null>(null);
   const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
 
   function handleSave() {
     if (!editing) return;
@@ -375,11 +377,7 @@ export function EffortRulesClient() {
                 Edit
               </button>
               <button
-                onClick={() => {
-                  if (confirm(`Delete rule set "${rs.name}"?`)) {
-                    deleteMutation.mutate({ id: rs.id });
-                  }
-                }}
+                onClick={() => setConfirmDelete(rs.id)}
                 className="rounded-xl border border-red-200 px-3 py-1 text-xs font-medium text-red-600 hover:bg-red-50"
               >
                 Delete
@@ -416,6 +414,20 @@ export function EffortRulesClient() {
           )}
         </div>
       ))}
+
+      {confirmDelete && (
+        <ConfirmDialog
+          title="Delete rule set"
+          message="Are you sure you want to delete this rule set? This action cannot be undone."
+          confirmLabel="Delete"
+          variant="danger"
+          onConfirm={() => {
+            deleteMutation.mutate({ id: confirmDelete });
+            setConfirmDelete(null);
+          }}
+          onCancel={() => setConfirmDelete(null)}
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/web/src/components/admin/ExperienceMultipliersClient.tsx b/apps/web/src/components/admin/ExperienceMultipliersClient.tsx
index 9a3b839..fec8fce 100644
--- a/apps/web/src/components/admin/ExperienceMultipliersClient.tsx
+++ b/apps/web/src/components/admin/ExperienceMultipliersClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
@@ -97,6 +98,7 @@ export function ExperienceMultipliersClient() {
 
   const [editing, setEditing] = useState<EditingSet | null>(null);
   const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
 
   function handleSave() {
     if (!editing) return;
@@ -422,11 +424,7 @@ export function ExperienceMultipliersClient() {
                 Edit
               </button>
               <button
-                onClick={() => {
-                  if (confirm(`Delete multiplier set "${s.name}"?`)) {
-                    deleteMutation.mutate({ id: s.id });
-                  }
-                }}
+                onClick={() => setConfirmDelete(s.id)}
                 className="rounded-xl border border-red-200 px-3 py-1 text-xs font-medium text-red-600 hover:bg-red-50"
               >
                 Delete
@@ -471,6 +469,20 @@ export function ExperienceMultipliersClient() {
           )}
         </div>
       ))}
+
+      {confirmDelete && (
+        <ConfirmDialog
+          title="Delete multiplier set"
+          message="Are you sure you want to delete this multiplier set? This action cannot be undone."
+          confirmLabel="Delete"
+          variant="danger"
+          onConfirm={() => {
+            deleteMutation.mutate({ id: confirmDelete });
+            setConfirmDelete(null);
+          }}
+          onCancel={() => setConfirmDelete(null)}
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/web/src/components/admin/ManagementLevelsClient.tsx b/apps/web/src/components/admin/ManagementLevelsClient.tsx
index 9618120..3eee28a 100644
--- a/apps/web/src/components/admin/ManagementLevelsClient.tsx
+++ b/apps/web/src/components/admin/ManagementLevelsClient.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { useState } from "react";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
+import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
@@ -29,6 +31,7 @@ type EditingLevel = {
 export function ManagementLevelsClient() {
   const [editingGroup, setEditingGroup] = useState<EditingGroup | null>(null);
   const [editingLevel, setEditingLevel] = useState<EditingLevel | null>(null);
+  const [confirmDeleteLevel, setConfirmDeleteLevel] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const utils = trpc.useUtils();
@@ -185,11 +188,7 @@ export function ManagementLevelsClient() {
                     </button>
                     <button
                       type="button"
-                      onClick={() => {
-                        if (confirm(`Delete level "${level.name}"?`)) {
-                          deleteLevelMut.mutate({ id: level.id });
-                        }
-                      }}
+                      onClick={() => setConfirmDeleteLevel(level.id)}
                       className="text-xs text-red-500 hover:text-red-700 font-medium"
                     >
                       Delete
@@ -207,9 +206,8 @@ export function ManagementLevelsClient() {
       </div>
 
       {/* Group Modal */}
-      {editingGroup && (
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
-          <div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-md mx-4">
+      <AnimatedModal open={editingGroup !== null} onClose={() => setEditingGroup(null)} maxWidth="max-w-md">
+        {editingGroup && (<>
             <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
               <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                 {editingGroup.id ? "Edit Group" : "Add Group"}
@@ -264,14 +262,12 @@ export function ManagementLevelsClient() {
                 {isGroupPending ? "Saving..." : editingGroup.id ? "Update" : "Create"}
               </button>
             </div>
-          </div>
-        </div>
-      )}
+        </>)}
+      </AnimatedModal>
 
       {/* Level Modal */}
-      {editingLevel && (
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
-          <div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-sm mx-4">
+      <AnimatedModal open={editingLevel !== null} onClose={() => setEditingLevel(null)} maxWidth="max-w-sm">
+        {editingLevel && (<>
             <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
               <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                 {editingLevel.id ? "Edit Level" : "Add Level"}
@@ -316,8 +312,21 @@ export function ManagementLevelsClient() {
                 {isLevelPending ? "Saving..." : editingLevel.id ? "Update" : "Create"}
               </button>
             </div>
-          </div>
-        </div>
+        </>)}
+      </AnimatedModal>
+
+      {confirmDeleteLevel && (
+        <ConfirmDialog
+          title="Delete level"
+          message="Are you sure you want to delete this level?"
+          confirmLabel="Delete"
+          variant="danger"
+          onConfirm={() => {
+            deleteLevelMut.mutate({ id: confirmDeleteLevel });
+            setConfirmDeleteLevel(null);
+          }}
+          onCancel={() => setConfirmDeleteLevel(null)}
+        />
       )}
     </div>
   );
diff --git a/apps/web/src/components/admin/OrgUnitsClient.tsx b/apps/web/src/components/admin/OrgUnitsClient.tsx
index a5f9ab0..87c5b99 100644
--- a/apps/web/src/components/admin/OrgUnitsClient.tsx
+++ b/apps/web/src/components/admin/OrgUnitsClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
@@ -195,9 +196,8 @@ export function OrgUnitsClient() {
       </div>
 
       {/* Create/Edit Modal */}
-      {editing && (
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
-          <div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-md mx-4">
+      <AnimatedModal open={editing !== null} onClose={() => setEditing(null)} maxWidth="max-w-md">
+        {editing && (<>
             <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
               <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                 {editing.id ? "Edit Org Unit" : `Add ${LEVEL_LABELS[editing.level] ?? `L${editing.level}`}`}
@@ -275,9 +275,8 @@ export function OrgUnitsClient() {
                 {isPending ? "Saving..." : editing.id ? "Update" : "Create"}
               </button>
             </div>
-          </div>
-        </div>
-      )}
+        </>)}
+      </AnimatedModal>
     </div>
   );
 }
diff --git a/apps/web/src/components/admin/RateCardsClient.tsx b/apps/web/src/components/admin/RateCardsClient.tsx
index 26cd72f..ba4e446 100644
--- a/apps/web/src/components/admin/RateCardsClient.tsx
+++ b/apps/web/src/components/admin/RateCardsClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
 import { formatCents } from "~/lib/format.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
@@ -101,6 +102,8 @@ export function RateCardsClient() {
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [editingCard, setEditingCard] = useState<EditingCard | null>(null);
   const [editingLine, setEditingLine] = useState<EditingLine | null>(null);
+  const [confirmDeleteLine, setConfirmDeleteLine] = useState<string | null>(null);
+  const [confirmDeactivate, setConfirmDeactivate] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const utils = trpc.useUtils();
@@ -260,7 +263,6 @@ export function RateCardsClient() {
   }
 
   async function handleDeleteLine(lineId: string) {
-    if (!confirm("Delete this rate line?")) return;
     try {
       await deleteLineMut.mutateAsync({ lineId });
       invalidateAll();
@@ -270,7 +272,6 @@ export function RateCardsClient() {
   }
 
   async function handleDeactivate(id: string) {
-    if (!confirm("Deactivate this rate card?")) return;
     try {
       await deactivateMut.mutateAsync({ id });
       invalidateAll();
@@ -445,7 +446,7 @@ export function RateCardsClient() {
                     {detail.isActive ? (
                       <button
                         type="button"
-                        onClick={() => handleDeactivate(detail.id)}
+                        onClick={() => setConfirmDeactivate(detail.id)}
                         className="px-3 py-1.5 text-sm text-gray-500 hover:text-red-600 font-medium"
                       >
                         Deactivate
@@ -528,7 +529,7 @@ export function RateCardsClient() {
                               </button>
                               <button
                                 type="button"
-                                onClick={() => handleDeleteLine(line.id)}
+                                onClick={() => setConfirmDeleteLine(line.id)}
                                 className="text-xs text-red-500 hover:text-red-700 font-medium"
                               >
                                 Delete
@@ -780,6 +781,34 @@ export function RateCardsClient() {
           </div>
         </div>
       )}
+
+      {confirmDeleteLine && (
+        <ConfirmDialog
+          title="Delete rate line"
+          message="Are you sure you want to delete this rate line?"
+          confirmLabel="Delete"
+          variant="danger"
+          onConfirm={() => {
+            void handleDeleteLine(confirmDeleteLine);
+            setConfirmDeleteLine(null);
+          }}
+          onCancel={() => setConfirmDeleteLine(null)}
+        />
+      )}
+
+      {confirmDeactivate && (
+        <ConfirmDialog
+          title="Deactivate rate card"
+          message="Are you sure you want to deactivate this rate card?"
+          confirmLabel="Deactivate"
+          variant="danger"
+          onConfirm={() => {
+            void handleDeactivate(confirmDeactivate);
+            setConfirmDeactivate(null);
+          }}
+          onCancel={() => setConfirmDeactivate(null)}
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/web/src/components/admin/SystemSettingsClient.tsx b/apps/web/src/components/admin/SystemSettingsClient.tsx
index 59d0baa..afd467c 100644
--- a/apps/web/src/components/admin/SystemSettingsClient.tsx
+++ b/apps/web/src/components/admin/SystemSettingsClient.tsx
@@ -96,6 +96,13 @@ export function SystemSettingsClient() {
   const [dalleEndpoint, setDalleEndpoint] = useState("");
   const [dalleApiKey, setDalleApiKey] = useState("");
 
+  // Gemini / Image generation settings
+  type ImageProvider = "dalle" | "gemini";
+  const [imageProvider, setImageProvider] = useState<ImageProvider>("dalle");
+  const [geminiApiKey, setGeminiApiKey] = useState("");
+  const [geminiModel, setGeminiModel] = useState("");
+  const [imageSaved, setImageSaved] = useState(false);
+
   // SMTP settings
   const [smtpHost, setSmtpHost] = useState("");
   const [smtpPort, setSmtpPort] = useState(587);
@@ -144,6 +151,9 @@ export function SystemSettingsClient() {
       // DALL-E
       setDalleDeployment(settings.azureDalleDeployment ?? "");
       setDalleEndpoint(settings.azureDalleEndpoint ?? "");
+      // Image provider / Gemini
+      setImageProvider((settings.imageProvider ?? "dalle") as ImageProvider);
+      setGeminiModel(settings.geminiModel ?? "");
       // SMTP
       setSmtpHost(settings.smtpHost ?? "");
       setSmtpPort(settings.smtpPort ?? 587);
@@ -240,6 +250,19 @@ export function SystemSettingsClient() {
     },
   });
 
+  const saveImageMutation = trpc.settings.updateSystemSettings.useMutation({
+    onSuccess: () => {
+      setImageSaved(true);
+      setTimeout(() => setImageSaved(false), 3000);
+    },
+  });
+
+  const [geminiTestResult, setGeminiTestResult] = useState<{ ok: boolean; model?: string; error?: string } | null>(null);
+  const testGeminiMut = trpc.settings.testGeminiConnection.useMutation({
+    onSuccess: (data) => setGeminiTestResult(data as any),
+    onError: (err) => setGeminiTestResult({ ok: false, error: err.message }),
+  });
+
   function handleSaveSmtp() {
     saveSmtpMutation.mutate({
       smtpHost: smtpHost || undefined,
@@ -259,6 +282,19 @@ export function SystemSettingsClient() {
     saveTimelineMutation.mutate({ timelineUndoMaxSteps: undoMaxSteps });
   }
 
+  function handleSaveImage() {
+    saveImageMutation.mutate({
+      imageProvider,
+      // DALL-E fields
+      azureDalleDeployment: dalleDeployment || undefined,
+      azureDalleEndpoint: provider === "azure" && dalleEndpoint ? dalleEndpoint : undefined,
+      ...(dalleApiKey ? { azureDalleApiKey: dalleApiKey } : {}),
+      // Gemini fields
+      ...(geminiApiKey ? { geminiApiKey } : {}),
+      geminiModel: geminiModel || undefined,
+    });
+  }
+
   function handleSaveAnonymization() {
     saveAnonymizationMutation.mutate({
       anonymizationEnabled,
@@ -295,9 +331,6 @@ export function SystemSettingsClient() {
       aiTemperature: temperature,
       aiSummaryPrompt: summaryPrompt || undefined,
       ...(apiKey ? { azureOpenAiApiKey: apiKey } : {}),
-      azureDalleDeployment: dalleDeployment,
-      azureDalleEndpoint: provider === "azure" && dalleEndpoint ? dalleEndpoint : undefined,
-      ...(dalleApiKey ? { azureDalleApiKey: dalleApiKey } : {}),
     });
   }
 
@@ -1018,69 +1051,184 @@ export function SystemSettingsClient() {
         </div>
       </div>
 
-      {/* ── DALL-E Image Generation ────────────────────────────────── */}
+      {/* ── Image Generation ────────────────────────────────── */}
       <div className={PANEL_CLASS}>
         <div>
           <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center">
-            DALL-E Image Generation <InfoTooltip content="Configure the DALL-E model used for generating project cover art. Uses the same provider (OpenAI / Azure) as the chat model above." />
+            Image Generation <InfoTooltip content="Configure the image generation provider used for AI-generated project cover art." />
           </h2>
           <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-            Used to generate AI cover art for projects. Leave blank to disable AI cover generation.
+            Used to generate AI cover art for projects. Configure at least one provider below.
           </p>
         </div>
 
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-          <div>
-            <label className={LABEL_CLASS}>
-              <span className="flex items-center">
-                Deployment Name <InfoTooltip content="The DALL-E model deployment name (e.g. dall-e-3). For OpenAI this is the model name, for Azure it is the deployment name." />
-              </span>
+        {/* Provider selector */}
+        <div>
+          <label className={LABEL_CLASS}>Provider</label>
+          <div className="flex gap-4">
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="radio"
+                name="imageProvider"
+                value="dalle"
+                checked={imageProvider === "dalle"}
+                onChange={() => setImageProvider("dalle")}
+                className="accent-brand-600"
+              />
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">DALL-E (Azure OpenAI / OpenAI)</span>
+            </label>
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="radio"
+                name="imageProvider"
+                value="gemini"
+                checked={imageProvider === "gemini"}
+                onChange={() => setImageProvider("gemini")}
+                className="accent-brand-600"
+              />
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Google Gemini</span>
             </label>
-            <input
-              type="text"
-              className={INPUT_CLASS}
-              value={dalleDeployment}
-              onChange={(e) => setDalleDeployment(e.target.value)}
-              placeholder="dall-e-3"
-            />
           </div>
+        </div>
 
-          {provider === "azure" && (
-            <>
+        {/* DALL-E settings (shown when DALL-E selected) */}
+        {imageProvider === "dalle" && (
+          <div className="space-y-4 rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
+            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">DALL-E Configuration</h3>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
               <div>
                 <label className={LABEL_CLASS}>
                   <span className="flex items-center">
-                    Endpoint <InfoTooltip content="Azure endpoint for the DALL-E deployment. Leave empty to use the same endpoint as the chat model." />
+                    Deployment Name <InfoTooltip content="The DALL-E model deployment name (e.g. dall-e-3). For OpenAI this is the model name, for Azure it is the deployment name." />
                   </span>
                 </label>
                 <input
                   type="text"
                   className={INPUT_CLASS}
-                  value={dalleEndpoint}
-                  onChange={(e) => setDalleEndpoint(e.target.value)}
-                  placeholder="Leave empty to use same endpoint as chat"
+                  value={dalleDeployment}
+                  onChange={(e) => setDalleDeployment(e.target.value)}
+                  placeholder="dall-e-3"
                 />
               </div>
 
+              {provider === "azure" && (
+                <>
+                  <div>
+                    <label className={LABEL_CLASS}>
+                      <span className="flex items-center">
+                        Endpoint <InfoTooltip content="Azure endpoint for the DALL-E deployment. Leave empty to use the same endpoint as the chat model." />
+                      </span>
+                    </label>
+                    <input
+                      type="text"
+                      className={INPUT_CLASS}
+                      value={dalleEndpoint}
+                      onChange={(e) => setDalleEndpoint(e.target.value)}
+                      placeholder="Leave empty to use same endpoint as chat"
+                    />
+                  </div>
+
+                  <div>
+                    <label className={LABEL_CLASS}>
+                      <span className="flex items-center">
+                        API Key{" "}
+                        <InfoTooltip content="API key for the DALL-E endpoint. Leave empty to use the same API key as the chat model." />
+                        <span className="ml-1 text-xs font-normal text-gray-400">(optional)</span>
+                      </span>
+                    </label>
+                    <input
+                      type="password"
+                      className={INPUT_CLASS}
+                      value={dalleApiKey}
+                      onChange={(e) => setDalleApiKey(e.target.value)}
+                      placeholder="Leave empty to use same API key as chat"
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+            {settings?.hasDalleApiKey && (
+              <p className="text-xs text-green-600 dark:text-green-400">A separate DALL-E API key is stored.</p>
+            )}
+          </div>
+        )}
+
+        {/* Gemini settings (shown when Gemini selected) */}
+        {imageProvider === "gemini" && (
+          <div className="space-y-4 rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
+            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">Google Gemini Configuration</h3>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
               <div>
                 <label className={LABEL_CLASS}>
                   <span className="flex items-center">
-                    API Key{" "}
-                    <InfoTooltip content="API key for the DALL-E endpoint. Leave empty to use the same API key as the chat model." />
-                    <span className="ml-1 text-xs font-normal text-gray-400">(optional)</span>
+                    API Key <InfoTooltip content="Google Gemini API key from Google AI Studio (aistudio.google.com)." />
                   </span>
                 </label>
                 <input
                   type="password"
                   className={INPUT_CLASS}
-                  value={dalleApiKey}
-                  onChange={(e) => setDalleApiKey(e.target.value)}
-                  placeholder="Leave empty to use same API key as chat"
+                  value={geminiApiKey}
+                  onChange={(e) => setGeminiApiKey(e.target.value)}
+                  placeholder={settings?.hasGeminiApiKey ? "••••••••  (key is stored)" : "Enter Gemini API key"}
                 />
+                {settings?.hasGeminiApiKey && !geminiApiKey && (
+                  <p className="text-xs text-green-600 dark:text-green-400 mt-1">API key is stored.</p>
+                )}
               </div>
-            </>
+              <div>
+                <label className={LABEL_CLASS}>
+                  <span className="flex items-center">
+                    Model <InfoTooltip content="Gemini model for image generation. The default model supports image output." />
+                  </span>
+                </label>
+                <select
+                  className={INPUT_CLASS}
+                  value={geminiModel || "gemini-2.5-flash-image"}
+                  onChange={(e) => setGeminiModel(e.target.value)}
+                >
+                  <option value="gemini-2.5-flash-image">Gemini 2.5 Flash Image — fast, high-volume</option>
+                  <option value="gemini-3-pro-image-preview">Gemini 3 Pro Image Preview — high-fidelity</option>
+                  <option value="gemini-3.1-flash-image-preview">Gemini 3.1 Flash Image Preview — latest</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className="flex flex-wrap items-center gap-3 pt-1">
+          <button
+            type="button"
+            className={PRIMARY_BUTTON_CLASS}
+            disabled={saveImageMutation.isPending}
+            onClick={handleSaveImage}
+          >
+            {saveImageMutation.isPending ? "Saving..." : "Save Image Settings"}
+          </button>
+          {imageProvider === "gemini" && (
+            <button
+              type="button"
+              className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-sm font-medium disabled:opacity-50"
+              disabled={testGeminiMut.isPending}
+              onClick={() => testGeminiMut.mutate()}
+            >
+              {testGeminiMut.isPending ? "Testing..." : "Test Gemini"}
+            </button>
+          )}
+          {imageSaved && (
+            <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved</span>
           )}
         </div>
+        {geminiTestResult && (
+          <div className={`mt-3 rounded-lg px-3 py-2 text-sm ${
+            geminiTestResult.ok
+              ? "bg-green-50 text-green-700 border border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800"
+              : "bg-red-50 text-red-700 border border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-800"
+          }`}>
+            {geminiTestResult.ok
+              ? `Gemini image generation works! Model: ${(geminiTestResult as any).model}`
+              : `Test failed: ${(geminiTestResult as any).error}`}
+          </div>
+        )}
       </div>
 
       {/* ── SMTP / Email ──────────────────────────────────────────── */}
diff --git a/apps/web/src/components/admin/UsersClient.tsx b/apps/web/src/components/admin/UsersClient.tsx
index e936a4d..6126605 100644
--- a/apps/web/src/components/admin/UsersClient.tsx
+++ b/apps/web/src/components/admin/UsersClient.tsx
@@ -3,6 +3,8 @@
 import { useState, useMemo } from "react";
 import { SystemRole, PermissionKey, ROLE_DEFAULT_PERMISSIONS, type PermissionOverrides } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
+import { SuccessToast } from "~/components/ui/SuccessToast.js";
 import { FilterChips } from "~/components/ui/FilterChips.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
@@ -90,6 +92,12 @@ export function UsersClient() {
   const [actionError, setActionError] = useState<string | null>(null);
   const [search, setSearch] = useState("");
   const [roleFilter, setRoleFilter] = useState<SystemRole | "">("");
+  const [editingName, setEditingName] = useState<{ userId: string; name: string } | null>(null);
+  const [passwordTarget, setPasswordTarget] = useState<{ userId: string; userName: string } | null>(null);
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [passwordError, setPasswordError] = useState<string | null>(null);
+  const [passwordSuccess, setPasswordSuccess] = useState(false);
 
   const utils = trpc.useUtils();
 
@@ -166,6 +174,61 @@ export function UsersClient() {
     onError: (err) => setActionError(err.message),
   });
 
+  const setPasswordMutation = trpc.user.setPassword.useMutation({
+    onSuccess: () => {
+      setPasswordSuccess(true);
+      setNewPassword("");
+      setConfirmPassword("");
+      setPasswordError(null);
+      setTimeout(() => {
+        setPasswordTarget(null);
+        setPasswordSuccess(false);
+      }, 1500);
+    },
+    onError: (err) => setPasswordError(err.message),
+  });
+
+  const updateNameMutation = trpc.user.updateName.useMutation({
+    onSuccess: async () => {
+      await utils.user.list.invalidate();
+      setEditingName(null);
+    },
+    onError: (err) => setActionError(err.message),
+  });
+
+  function openSetPassword(user: UserRow) {
+    setPasswordTarget({ userId: user.id, userName: user.name ?? user.email });
+    setNewPassword("");
+    setConfirmPassword("");
+    setPasswordError(null);
+    setPasswordSuccess(false);
+  }
+
+  function closeSetPassword() {
+    setPasswordTarget(null);
+    setNewPassword("");
+    setConfirmPassword("");
+    setPasswordError(null);
+    setPasswordSuccess(false);
+  }
+
+  async function handleSetPassword() {
+    if (!passwordTarget) return;
+    if (newPassword.length < 8) {
+      setPasswordError("Password must be at least 8 characters");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setPasswordError("Passwords do not match");
+      return;
+    }
+    setPasswordError(null);
+    await setPasswordMutation.mutateAsync({
+      userId: passwordTarget.userId,
+      password: newPassword,
+    });
+  }
+
   function openEdit(user: UserRow) {
     const role = (user.systemRole as SystemRole) ?? SystemRole.USER;
     const overrides = user.permissionOverrides as PermissionOverrides | null;
@@ -291,7 +354,8 @@ export function UsersClient() {
     updateRoleMutation.isPending ||
     setPermissionsMutation.isPending ||
     resetPermissionsMutation.isPending ||
-    createUserMutation.isPending;
+    createUserMutation.isPending ||
+    setPasswordMutation.isPending;
 
   function clearAll() {
     setSearch("");
@@ -474,13 +538,26 @@ export function UsersClient() {
                   {new Date(user.createdAt).toLocaleDateString("en-GB")}
                 </td>
                 <td className="px-4 py-3 text-right">
-                  <button
-                    type="button"
-                    onClick={() => openEdit(user)}
-                    className="text-xs text-brand-600 hover:text-brand-800 font-medium"
-                  >
-                    Edit
-                  </button>
+                  <div className="flex items-center justify-end gap-2">
+                    <button
+                      type="button"
+                      onClick={() => openSetPassword(user)}
+                      className="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 font-medium"
+                      title="Set password"
+                    >
+                      <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+                      </svg>
+                      Password
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => openEdit(user)}
+                      className="text-xs text-brand-600 hover:text-brand-800 font-medium"
+                    >
+                      Edit
+                    </button>
+                  </div>
                 </td>
               </tr>
             ))}
@@ -488,6 +565,81 @@ export function UsersClient() {
         </table>
       </div>
 
+      {/* Set Password Modal */}
+      <AnimatedModal open={!!passwordTarget} onClose={closeSetPassword} maxWidth="max-w-md">
+        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            Set Password for {passwordTarget?.userName}
+          </h2>
+        </div>
+
+        <div className="px-6 py-5 space-y-4">
+          {passwordError && (
+            <div className="rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 px-3 py-2 text-sm text-red-700 dark:text-red-400">
+              {passwordError}
+            </div>
+          )}
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              New Password
+            </label>
+            <input
+              type="password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              placeholder="Min. 8 characters"
+              className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
+              autoComplete="new-password"
+            />
+            {newPassword.length > 0 && newPassword.length < 8 && (
+              <p className="mt-1 text-xs text-amber-600 dark:text-amber-400">
+                {8 - newPassword.length} more character{8 - newPassword.length !== 1 ? "s" : ""} needed
+              </p>
+            )}
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Confirm Password
+            </label>
+            <input
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="Repeat password"
+              className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm w-full bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
+              autoComplete="new-password"
+            />
+            {confirmPassword.length > 0 && newPassword !== confirmPassword && (
+              <p className="mt-1 text-xs text-red-600 dark:text-red-400">
+                Passwords do not match
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700">
+          <button
+            type="button"
+            onClick={closeSetPassword}
+            className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={() => void handleSetPassword()}
+            disabled={setPasswordMutation.isPending || newPassword.length < 8 || newPassword !== confirmPassword}
+            className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {setPasswordMutation.isPending ? "Saving..." : "Set Password"}
+          </button>
+        </div>
+      </AnimatedModal>
+
+      <SuccessToast show={passwordSuccess} message="Password updated successfully" />
+
       {/* Create User Modal */}
       {createState && (
         <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
@@ -613,6 +765,61 @@ export function UsersClient() {
 
             {/* Modal Body */}
             <div className="overflow-y-auto flex-1 px-6 py-5 space-y-6">
+              {/* User Name */}
+              <section>
+                <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+                  Display Name
+                </h3>
+                {editingName?.userId === editState.userId ? (
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="text"
+                      value={editingName.name}
+                      onChange={(e) => setEditingName({ ...editingName, name: e.target.value })}
+                      className="flex-1 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
+                      autoFocus
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && editingName.name.trim()) {
+                          updateNameMutation.mutate({ id: editingName.userId, name: editingName.name.trim() });
+                        }
+                        if (e.key === "Escape") setEditingName(null);
+                      }}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => updateNameMutation.mutate({ id: editingName.userId, name: editingName.name.trim() })}
+                      disabled={!editingName.name.trim() || updateNameMutation.isPending}
+                      className="px-3 py-2 bg-brand-600 text-white rounded-lg text-sm font-medium hover:bg-brand-700 disabled:opacity-50"
+                    >
+                      {updateNameMutation.isPending ? "..." : "Save"}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setEditingName(null)}
+                      className="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 text-sm"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-gray-900 dark:text-gray-100">
+                      {(users as any)?.find((u: any) => u.id === editState.userId)?.name ?? "—"}
+                    </span>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const user = (users as any)?.find((u: any) => u.id === editState.userId);
+                        setEditingName({ userId: editState.userId, name: user?.name ?? "" });
+                      }}
+                      className="text-xs text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
+                    >
+                      Edit
+                    </button>
+                  </div>
+                )}
+              </section>
+
               {/* System Role */}
               <section>
                 <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
diff --git a/apps/web/src/components/admin/UtilizationCategoriesClient.tsx b/apps/web/src/components/admin/UtilizationCategoriesClient.tsx
index 6e5eced..1c46382 100644
--- a/apps/web/src/components/admin/UtilizationCategoriesClient.tsx
+++ b/apps/web/src/components/admin/UtilizationCategoriesClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
@@ -159,9 +160,8 @@ export function UtilizationCategoriesClient() {
       </div>
 
       {/* Create/Edit Modal */}
-      {editing && (
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
-          <div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-md mx-4">
+      <AnimatedModal open={editing !== null} onClose={() => setEditing(null)} maxWidth="max-w-md">
+        {editing && (<>
             <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
               <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                 {editing.id ? "Edit Category" : "Add Category"}
@@ -236,9 +236,8 @@ export function UtilizationCategoriesClient() {
                 {isPending ? "Saving..." : editing.id ? "Update" : "Create"}
               </button>
             </div>
-          </div>
-        </div>
-      )}
+        </>)}
+      </AnimatedModal>
     </div>
   );
 }
diff --git a/apps/web/src/components/admin/WebhooksClient.tsx b/apps/web/src/components/admin/WebhooksClient.tsx
index cb19158..48c2f01 100644
--- a/apps/web/src/components/admin/WebhooksClient.tsx
+++ b/apps/web/src/components/admin/WebhooksClient.tsx
@@ -176,7 +176,7 @@ export function WebhooksClient() {
         <div>
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Webhooks</h1>
           <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-            Configure outbound webhooks to notify external services about events in Planarchy.
+            Configure outbound webhooks to notify external services about events in CapaKraken.
           </p>
         </div>
         <button className={PRIMARY_BUTTON} onClick={openCreateModal}>
diff --git a/apps/web/src/components/allocations/AllocationModal.tsx b/apps/web/src/components/allocations/AllocationModal.tsx
index fa5c3ce..0e9a015 100644
--- a/apps/web/src/components/allocations/AllocationModal.tsx
+++ b/apps/web/src/components/allocations/AllocationModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
 import { useFocusTrap } from "~/hooks/useFocusTrap.js";
 import { useInvalidatePlanningViews } from "~/hooks/useInvalidatePlanningViews.js";
 import { AllocationStatus } from "@planarchy/shared";
@@ -73,6 +73,36 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
     { staleTime: 60_000 },
   );
 
+  // Fetch existing allocations for the selected resource+project to detect overlaps
+  const shouldCheckOverlap = !isDemandEntry && !!resourceId && !!projectId;
+  const { data: existingAllocations } = trpc.allocation.listView.useQuery(
+    { projectId, resourceId },
+    { enabled: shouldCheckOverlap, staleTime: 30_000 },
+  );
+
+  const overlapWarning = useMemo(() => {
+    if (!shouldCheckOverlap || !existingAllocations || !startDate || !endDate) return null;
+    const formStart = new Date(startDate);
+    const formEnd = new Date(endDate);
+    if (isNaN(formStart.getTime()) || isNaN(formEnd.getTime())) return null;
+
+    const allocList = (existingAllocations as { allocations?: Array<{ id: string; resourceId?: string | null; startDate: string | Date; endDate: string | Date }> }).allocations ?? [];
+    for (const existing of allocList) {
+      // Skip the allocation being edited
+      if (isEditing && allocation && existing.id === allocation.id) continue;
+      // Only check assignments for this resource
+      if (existing.resourceId !== resourceId) continue;
+      const exStart = new Date(existing.startDate);
+      const exEnd = new Date(existing.endDate);
+      // Check date overlap
+      if (formStart <= exEnd && formEnd >= exStart) {
+        const fmt = (d: Date) => d.toISOString().slice(0, 10);
+        return `This resource is already assigned to this project from ${fmt(exStart)} to ${fmt(exEnd)}. Consider updating the existing assignment instead.`;
+      }
+    }
+    return null;
+  }, [shouldCheckOverlap, existingAllocations, startDate, endDate, isEditing, allocation, resourceId]);
+
   const invalidatePlanningViews = useInvalidatePlanningViews();
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -473,6 +503,13 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
             </div>
           )}
 
+          {/* Overlap warning */}
+          {overlapWarning && (
+            <div className="rounded-lg border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-700 dark:bg-amber-950/30 dark:text-amber-300">
+              {"\u26A0"} {overlapWarning}
+            </div>
+          )}
+
           {/* Footer */}
           <div className="flex items-center justify-end gap-3 pt-2">
             <button
diff --git a/apps/web/src/components/analytics/SkillMarketplace.tsx b/apps/web/src/components/analytics/SkillMarketplace.tsx
index cea6537..500be55 100644
--- a/apps/web/src/components/analytics/SkillMarketplace.tsx
+++ b/apps/web/src/components/analytics/SkillMarketplace.tsx
@@ -3,67 +3,17 @@
 import { useState, useMemo } from "react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
-import { trpc } from "~/lib/trpc/client.js";
-import { useDebounce } from "~/hooks/useDebounce.js";
+import { PROFICIENCY_LABELS, ProficiencyBadge, GapIndicator, formatDate } from "~/components/analytics/skills/shared.js";
 import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
+import { useDebounce } from "~/hooks/useDebounce.js";
 import { useTableSort } from "~/hooks/useTableSort.js";
+import { trpc } from "~/lib/trpc/client.js";
 
 const SkillDistributionChart = dynamic(
   () => import("~/components/analytics/SkillDistributionChart.js"),
   { ssr: false, loading: () => <div className="h-80 shimmer-skeleton rounded-xl" /> },
 );
 
-const PROFICIENCY_LABELS = ["", "Aware", "Basic", "Intermediate", "Advanced", "Expert"];
-
-const PROFICIENCY_CLASSES = [
-  "bg-gray-100 text-gray-700 border-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-500",
-  "bg-blue-100 text-blue-800 border-blue-300 dark:bg-blue-900/60 dark:text-blue-200 dark:border-blue-600",
-  "bg-indigo-100 text-indigo-800 border-indigo-300 dark:bg-indigo-900/60 dark:text-indigo-200 dark:border-indigo-500",
-  "bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-900/60 dark:text-amber-200 dark:border-amber-500",
-  "bg-green-100 text-green-800 border-green-300 dark:bg-green-900/60 dark:text-green-200 dark:border-green-500",
-];
-
-function proficiencyClasses(level: number): string {
-  const idx = Math.max(0, Math.min(4, Math.round(level) - 1));
-  return PROFICIENCY_CLASSES[idx] ?? PROFICIENCY_CLASSES[0]!;
-}
-
-function ProficiencyBadge({ value }: { value: number }) {
-  return (
-    <span className={`inline-block px-2 py-0.5 text-xs rounded font-medium border ${proficiencyClasses(value)}`}>
-      {value} {PROFICIENCY_LABELS[value] ?? ""}
-    </span>
-  );
-}
-
-function GapIndicator({ gap }: { gap: number }) {
-  if (gap > 0) {
-    return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded font-semibold bg-red-100 text-red-700 border border-red-200 dark:bg-red-900/40 dark:text-red-300 dark:border-red-700">
-        -{gap} shortage
-      </span>
-    );
-  }
-  if (gap < 0) {
-    return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded font-semibold bg-green-100 text-green-700 border border-green-200 dark:bg-green-900/40 dark:text-green-300 dark:border-green-700">
-        +{Math.abs(gap)} surplus
-      </span>
-    );
-  }
-  return (
-    <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded font-semibold bg-gray-100 text-gray-500 border border-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600">
-      balanced
-    </span>
-  );
-}
-
-function formatDate(iso: string | null): string {
-  if (!iso) return "Not within 30d";
-  const d = new Date(iso);
-  return d.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" });
-}
-
 export function SkillMarketplace() {
   const [searchSkill, setSearchSkill] = useState("");
   const [minProficiency, setMinProficiency] = useState(1);
diff --git a/apps/web/src/components/analytics/SkillsAnalytics.tsx b/apps/web/src/components/analytics/SkillsAnalytics.tsx
index 5e0ef8f..a941156 100644
--- a/apps/web/src/components/analytics/SkillsAnalytics.tsx
+++ b/apps/web/src/components/analytics/SkillsAnalytics.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useId } from "react";
 import dynamic from "next/dynamic";
+import { PROFICIENCY_LABELS, proficiencyClasses, ProficiencyBadge } from "~/components/analytics/skills/shared.js";
 import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
 import { useTableSort } from "~/hooks/useTableSort.js";
 import { trpc } from "~/lib/trpc/client.js";
@@ -12,30 +13,6 @@ const SkillDistributionChart = dynamic(
   { ssr: false, loading: () => <div className="h-80 shimmer-skeleton rounded-xl" /> },
 );
 
-const PROFICIENCY_LABELS = ["", "Aware", "Basic", "Intermediate", "Advanced", "Expert"];
-
-// Tailwind class sets per proficiency level (1–5), dark-mode aware
-const PROFICIENCY_CLASSES = [
-  "bg-gray-100 text-gray-700 border-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-500",
-  "bg-blue-100 text-blue-800 border-blue-300 dark:bg-blue-900/60 dark:text-blue-200 dark:border-blue-600",
-  "bg-indigo-100 text-indigo-800 border-indigo-300 dark:bg-indigo-900/60 dark:text-indigo-200 dark:border-indigo-500",
-  "bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-900/60 dark:text-amber-200 dark:border-amber-500",
-  "bg-green-100 text-green-800 border-green-300 dark:bg-green-900/60 dark:text-green-200 dark:border-green-500",
-];
-
-function proficiencyClasses(level: number): string {
-  const idx = Math.max(0, Math.min(4, Math.round(level) - 1));
-  return PROFICIENCY_CLASSES[idx] ?? PROFICIENCY_CLASSES[0]!;
-}
-
-function ProficiencyBadge({ value }: { value: number }) {
-  return (
-    <span className={`inline-block px-2 py-0.5 text-xs rounded font-medium border ${proficiencyClasses(value)}`}>
-      {value} {PROFICIENCY_LABELS[value] ?? ""}
-    </span>
-  );
-}
-
 type SkillRule = { skill: string; minProficiency: number };
 
 export function SkillsAnalytics() {
diff --git a/apps/web/src/components/analytics/SkillsHub.tsx b/apps/web/src/components/analytics/SkillsHub.tsx
new file mode 100644
index 0000000..31dbbd4
--- /dev/null
+++ b/apps/web/src/components/analytics/SkillsHub.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { useSearchParams, useRouter } from "next/navigation";
+import dynamic from "next/dynamic";
+import { trpc } from "~/lib/trpc/client.js";
+
+const OverviewTab = dynamic(() => import("./skills/OverviewTab.js").then((m) => ({ default: m.OverviewTab })), {
+  loading: () => <div className="h-64 shimmer-skeleton rounded-xl" />,
+});
+const SearchTab = dynamic(() => import("./skills/SearchTab.js").then((m) => ({ default: m.SearchTab })), {
+  loading: () => <div className="h-64 shimmer-skeleton rounded-xl" />,
+});
+const GapsTab = dynamic(() => import("./skills/GapsTab.js").then((m) => ({ default: m.GapsTab })), {
+  loading: () => <div className="h-64 shimmer-skeleton rounded-xl" />,
+});
+const PeopleFinderTab = dynamic(() => import("./skills/PeopleFinderTab.js").then((m) => ({ default: m.PeopleFinderTab })), {
+  loading: () => <div className="h-64 shimmer-skeleton rounded-xl" />,
+});
+
+const TABS = [
+  { key: "overview", label: "Overview" },
+  { key: "search", label: "Search" },
+  { key: "gaps", label: "Gaps" },
+  { key: "people", label: "People Finder" },
+] as const;
+
+type TabKey = (typeof TABS)[number]["key"];
+
+export function SkillsHub() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const rawTab = searchParams.get("tab");
+  const activeTab: TabKey = TABS.some((t) => t.key === rawTab) ? (rawTab as TabKey) : "overview";
+
+  function setTab(tab: TabKey) {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("tab", tab);
+    router.replace(`/analytics/skills?${params.toString()}` as `/analytics/skills`, { scroll: false });
+  }
+
+  const { data, isLoading, error } = trpc.resource.getSkillsAnalytics.useQuery(undefined, { staleTime: 60_000 });
+
+  if (isLoading) {
+    return (
+      <div className="p-6 space-y-4">
+        <div className="h-8 shimmer-skeleton rounded w-64" />
+        <div className="h-64 shimmer-skeleton rounded-xl" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4 text-sm text-red-700 dark:text-red-300">
+          {error.message}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 pb-24 space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Skills Hub</h1>
+        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+          {data?.totalResources} active resources &middot; {data?.totalSkillEntries} distinct skills
+        </p>
+      </div>
+
+      {/* Tab bar */}
+      <div className="flex gap-1 border-b border-gray-200 dark:border-slate-700">
+        {TABS.map((tab) => (
+          <button
+            key={tab.key}
+            type="button"
+            onClick={() => setTab(tab.key)}
+            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px ${
+              activeTab === tab.key
+                ? "border-brand-600 text-brand-600 dark:text-brand-400 dark:border-brand-400"
+                : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-slate-600"
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      {activeTab === "overview" && data && (
+        <OverviewTab
+          aggregated={data.aggregated}
+          categories={data.categories}
+          totalResources={data.totalResources}
+          totalSkillEntries={data.totalSkillEntries}
+        />
+      )}
+      {activeTab === "search" && <SearchTab />}
+      {activeTab === "gaps" && <GapsTab />}
+      {activeTab === "people" && data && (
+        <PeopleFinderTab
+          allSkillNames={data.aggregated.map((e) => e.skill)}
+          allChapters={data.allChapters}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/analytics/skills/GapsTab.tsx b/apps/web/src/components/analytics/skills/GapsTab.tsx
new file mode 100644
index 0000000..6d21704
--- /dev/null
+++ b/apps/web/src/components/analytics/skills/GapsTab.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { useMemo } from "react";
+import { trpc } from "~/lib/trpc/client.js";
+import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
+import { useTableSort } from "~/hooks/useTableSort.js";
+import { GapIndicator } from "./shared.js";
+
+export function GapsTab() {
+  const { data, isLoading } = trpc.resource.getSkillMarketplace.useQuery(
+    { searchSkill: undefined, minProficiency: 1, availableOnly: false },
+    { staleTime: 60_000 },
+  );
+
+  const gapData = useMemo(() => data?.gapData ?? [], [data?.gapData]);
+  const { sorted, sortField, sortDir, toggle } = useTableSort(gapData);
+
+  if (isLoading) {
+    return (
+      <div className="space-y-4">
+        <div className="h-8 shimmer-skeleton rounded w-48" />
+        <div className="h-64 shimmer-skeleton rounded-xl" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-white dark:bg-slate-900 rounded-xl border border-gray-200 dark:border-slate-700 p-5 space-y-4">
+        <div>
+          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Supply vs Demand</h2>
+          <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+            Supply = resources with proficiency 3+ &middot; Demand = unfilled demand requirements &middot; Sorted by largest gap
+          </p>
+        </div>
+
+        {sorted.length === 0 ? (
+          <p className="text-sm text-gray-400 dark:text-gray-500 italic py-4">
+            No gap data available. Gaps appear when projects have unfilled demand requirements with required skills.
+          </p>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead className="bg-gray-50 dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700">
+                <tr>
+                  <SortableColumnHeader label="Skill" field="skill" sortField={sortField} sortDir={sortDir} onSort={toggle} />
+                  <SortableColumnHeader label="Supply" field="supply" sortField={sortField} sortDir={sortDir} onSort={toggle} align="right" />
+                  <SortableColumnHeader label="Demand" field="demand" sortField={sortField} sortDir={sortDir} onSort={toggle} align="right" />
+                  <SortableColumnHeader label="Gap" field="gap" sortField={sortField} sortDir={sortDir} onSort={toggle} align="center" />
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Visual</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-100 dark:divide-slate-700">
+                {sorted.map((row) => {
+                  const maxBar = Math.max(row.supply, row.demand, 1);
+                  return (
+                    <tr key={row.skill} className="hover:bg-gray-50 dark:hover:bg-slate-800/50">
+                      <td className="px-4 py-2.5 font-medium text-gray-900 dark:text-gray-100">{row.skill}</td>
+                      <td className="px-4 py-2.5 text-right text-gray-700 dark:text-gray-300">{row.supply}</td>
+                      <td className="px-4 py-2.5 text-right text-gray-700 dark:text-gray-300">{row.demand}</td>
+                      <td className="px-4 py-2.5 text-center"><GapIndicator gap={row.gap} /></td>
+                      <td className="px-4 py-2.5 w-48">
+                        <div className="flex items-center gap-1 h-4">
+                          <div
+                            className="h-3 rounded-sm bg-green-400 dark:bg-green-500 transition-all"
+                            style={{ width: `${(row.supply / maxBar) * 100}%`, minWidth: row.supply > 0 ? 4 : 0 }}
+                            title={`Supply: ${row.supply}`}
+                          />
+                          <div
+                            className="h-3 rounded-sm bg-red-400 dark:bg-red-500 transition-all"
+                            style={{ width: `${(row.demand / maxBar) * 100}%`, minWidth: row.demand > 0 ? 4 : 0 }}
+                            title={`Demand: ${row.demand}`}
+                          />
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+            <div className="flex items-center gap-4 mt-3 px-4">
+              <div className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
+                <span className="w-3 h-3 rounded-sm bg-green-400 dark:bg-green-500 inline-block" /> Supply (prof. 3+)
+              </div>
+              <div className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
+                <span className="w-3 h-3 rounded-sm bg-red-400 dark:bg-red-500 inline-block" /> Demand (unfilled)
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/analytics/skills/OverviewTab.tsx b/apps/web/src/components/analytics/skills/OverviewTab.tsx
new file mode 100644
index 0000000..5109054
--- /dev/null
+++ b/apps/web/src/components/analytics/skills/OverviewTab.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import { useState } from "react";
+import dynamic from "next/dynamic";
+import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
+import { useTableSort } from "~/hooks/useTableSort.js";
+import { ProficiencyBadge } from "./shared.js";
+
+const SkillDistributionChart = dynamic(
+  () => import("~/components/analytics/SkillDistributionChart.js"),
+  { ssr: false, loading: () => <div className="h-80 shimmer-skeleton rounded-xl" /> },
+);
+
+interface AggregatedSkill {
+  skill: string;
+  category: string;
+  count: number;
+  avgProficiency: number;
+  chapters: string[];
+}
+
+interface OverviewTabProps {
+  aggregated: AggregatedSkill[];
+  categories: string[];
+  totalResources: number;
+  totalSkillEntries: number;
+}
+
+export function OverviewTab({ aggregated, categories, totalResources, totalSkillEntries }: OverviewTabProps) {
+  const [categoryFilter, setCategoryFilter] = useState("");
+  const [minCount, setMinCount] = useState(1);
+
+  const filtered = aggregated.filter((e) => {
+    if (categoryFilter && e.category !== categoryFilter) return false;
+    if (e.count < minCount) return false;
+    return true;
+  });
+
+  const { sorted, sortField, sortDir, toggle } = useTableSort(filtered);
+  const top10 = filtered.slice(0, 10);
+  const avgProf = aggregated.length > 0
+    ? Math.round(aggregated.reduce((s, e) => s + e.avgProficiency, 0) / aggregated.length * 10) / 10
+    : 0;
+  const gapCount = aggregated.filter((e) => e.count < 3 && e.avgProficiency >= 3).length;
+
+  async function exportXlsx() {
+    const XLSX = await import("xlsx");
+    const rows = sorted.map((e) => ({
+      Skill: e.skill,
+      Category: e.category,
+      "# Resources": e.count,
+      "Avg Proficiency": e.avgProficiency,
+      Chapters: e.chapters.join(", "),
+    }));
+    const ws = XLSX.utils.json_to_sheet(rows);
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, "Skills Overview");
+    XLSX.writeFile(wb, `skills-overview-${Date.now()}.xlsx`);
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* KPI Cards */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {[
+          { label: "Total Resources", value: totalResources, color: "text-brand-600 dark:text-brand-400" },
+          { label: "Distinct Skills", value: totalSkillEntries, color: "text-indigo-600 dark:text-indigo-400" },
+          { label: "Avg Proficiency", value: avgProf, color: "text-amber-600 dark:text-amber-400" },
+          { label: "Scarce Skills", value: gapCount, color: "text-red-600 dark:text-red-400" },
+        ].map((kpi) => (
+          <div key={kpi.label} className="bg-white dark:bg-slate-900 rounded-xl border border-gray-200 dark:border-slate-700 p-4">
+            <p className="text-xs text-gray-500 dark:text-gray-400">{kpi.label}</p>
+            <p className={`text-2xl font-bold mt-1 ${kpi.color}`}>{kpi.value}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* Filters + Export */}
+      <div className="flex flex-wrap gap-3 items-center">
+        <select
+          value={categoryFilter}
+          onChange={(e) => setCategoryFilter(e.target.value)}
+          className="px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm bg-white dark:bg-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-500"
+        >
+          <option value="">All Categories</option>
+          {categories.map((c) => (
+            <option key={c} value={c}>{c}</option>
+          ))}
+        </select>
+
+        <label className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+          Min. resources:
+          <input
+            type="number"
+            min={1}
+            max={50}
+            value={minCount}
+            onChange={(e) => setMinCount(Math.max(1, parseInt(e.target.value, 10) || 1))}
+            className="w-16 px-2 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg text-sm bg-white dark:bg-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-500"
+          />
+        </label>
+
+        <span className="text-sm text-gray-400 dark:text-gray-500">{filtered.length} skills shown</span>
+
+        <button
+          type="button"
+          onClick={exportXlsx}
+          className="ml-auto px-3 py-1.5 text-sm rounded-lg border border-gray-200 dark:border-slate-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors"
+        >
+          Export XLSX
+        </button>
+      </div>
+
+      {/* Distribution Chart */}
+      {top10.length > 0 && (
+        <div className="bg-white dark:bg-slate-900 rounded-xl border border-gray-200 dark:border-slate-700 p-5">
+          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-4">Top 10 Skills by Resource Count</h2>
+          <SkillDistributionChart data={top10} />
+          <p className="text-xs text-gray-400 dark:text-gray-500 mt-2">Bar color = average proficiency (light to dark = low to high)</p>
+        </div>
+      )}
+
+      {/* Skills Table */}
+      <div className="bg-white dark:bg-slate-900 rounded-xl border border-gray-200 dark:border-slate-700 overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-gray-50 dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700">
+            <tr>
+              <SortableColumnHeader label="Skill" field="skill" sortField={sortField} sortDir={sortDir} onSort={toggle} />
+              <SortableColumnHeader label="Category" field="category" sortField={sortField} sortDir={sortDir} onSort={toggle} />
+              <SortableColumnHeader label="Resources" field="count" sortField={sortField} sortDir={sortDir} onSort={toggle} align="right" />
+              <SortableColumnHeader label="Avg Prof." field="avgProficiency" sortField={sortField} sortDir={sortDir} onSort={toggle} align="right" />
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Chapters</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100 dark:divide-slate-700">
+            {sorted.map((e) => (
+              <tr key={e.skill} className="hover:bg-gray-50 dark:hover:bg-slate-800/50">
+                <td className="px-4 py-2.5 font-medium text-gray-900 dark:text-gray-100">{e.skill}</td>
+                <td className="px-4 py-2.5 text-gray-500 dark:text-gray-400">{e.category}</td>
+                <td className="px-4 py-2.5 text-right text-gray-700 dark:text-gray-300">{e.count}</td>
+                <td className="px-4 py-2.5 text-right"><ProficiencyBadge value={e.avgProficiency} /></td>
+                <td className="px-4 py-2.5 text-gray-400 dark:text-gray-500 text-xs">{e.chapters.join(", ") || "---"}</td>
+              </tr>
+            ))}
+            {sorted.length === 0 && (
+              <tr>
+                <td colSpan={5} className="text-center py-10 text-gray-400 dark:text-gray-500 text-sm">
+                  No skills found matching the filters.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/analytics/skills/PeopleFinderTab.tsx b/apps/web/src/components/analytics/skills/PeopleFinderTab.tsx
new file mode 100644
index 0000000..99e1bc3
--- /dev/null
+++ b/apps/web/src/components/analytics/skills/PeopleFinderTab.tsx
@@ -0,0 +1,219 @@
+"use client";
+
+import { useState, useId } from "react";
+import Link from "next/link";
+import { trpc } from "~/lib/trpc/client.js";
+import { ProficiencyBadge, PROFICIENCY_LABELS, proficiencyClasses } from "./shared.js";
+
+type SkillRule = { skill: string; minProficiency: number };
+
+interface PeopleFinderTabProps {
+  allSkillNames: string[];
+  allChapters: string[];
+}
+
+export function PeopleFinderTab({ allSkillNames, allChapters }: PeopleFinderTabProps) {
+  const datalistId = useId();
+  const [rules, setRules] = useState<SkillRule[]>([]);
+  const [operator, setOperator] = useState<"AND" | "OR">("AND");
+  const [chapter, setChapter] = useState("");
+
+  const activeRules = rules.filter((r) => r.skill.trim().length > 0);
+  const { data: results, isFetching } = trpc.resource.searchBySkills.useQuery(
+    { rules: activeRules, operator, ...(chapter ? { chapter } : {}) },
+    { enabled: activeRules.length > 0, staleTime: 30_000 },
+  );
+
+  function addRule() { setRules((prev) => [...prev, { skill: "", minProficiency: 1 }]); }
+  function removeRule(idx: number) { setRules((prev) => prev.filter((_, i) => i !== idx)); }
+  function updateRule(idx: number, patch: Partial<SkillRule>) {
+    setRules((prev) => prev.map((r, i) => (i === idx ? { ...r, ...patch } : r)));
+  }
+
+  async function exportXlsx() {
+    if (!results || results.length === 0) return;
+    const XLSX = await import("xlsx");
+    const rows = results.map((p) => ({
+      Name: p.displayName,
+      EID: p.eid ?? "",
+      Chapter: p.chapter ?? "",
+      "Matched Skills": p.matchedSkills.map((s) => `${s.skill} (${s.proficiency})`).join(", "),
+    }));
+    const ws = XLSX.utils.json_to_sheet(rows);
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, "People Finder");
+    XLSX.writeFile(wb, `people-finder-${Date.now()}.xlsx`);
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-white dark:bg-slate-900 rounded-xl border border-gray-200 dark:border-slate-700 p-5 space-y-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200">People Finder</h2>
+          <span className="text-xs text-gray-400 dark:text-gray-500">Find resources that match skill criteria</span>
+        </div>
+
+        {/* Datalist */}
+        <datalist id={datalistId}>
+          {allSkillNames.map((s) => <option key={s} value={s} />)}
+        </datalist>
+
+        {/* Rules */}
+        <div className="space-y-2">
+          {rules.map((rule, idx) => (
+            <div key={idx} className="flex items-center gap-2 flex-wrap">
+              {idx > 0 ? (
+                <button
+                  type="button"
+                  onClick={() => setOperator((op) => (op === "AND" ? "OR" : "AND"))}
+                  className="w-12 text-center text-xs font-bold px-2 py-1.5 rounded-lg border border-brand-200 dark:border-brand-700 bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 hover:bg-brand-100 dark:hover:bg-brand-900/50 transition-colors shrink-0"
+                >
+                  {operator}
+                </button>
+              ) : (
+                <span className="w-12 text-center text-xs font-medium text-gray-400 dark:text-gray-500 shrink-0">knows</span>
+              )}
+
+              <input
+                type="text"
+                list={datalistId}
+                placeholder="Skill name..."
+                value={rule.skill}
+                onChange={(e) => updateRule(idx, { skill: e.target.value })}
+                className="flex-1 min-w-40 px-3 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg text-sm bg-white dark:bg-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-500"
+              />
+
+              <div className="flex items-center gap-1">
+                <span className="text-xs text-gray-400 dark:text-gray-500 shrink-0">min.</span>
+                <div className="flex rounded-lg overflow-hidden border border-gray-200 dark:border-slate-600">
+                  {[1, 2, 3, 4, 5].map((lvl) => (
+                    <button
+                      key={lvl}
+                      type="button"
+                      title={PROFICIENCY_LABELS[lvl]}
+                      onClick={() => updateRule(idx, { minProficiency: lvl })}
+                      className={`px-2 py-1 text-xs font-medium transition-colors ${
+                        rule.minProficiency === lvl
+                          ? "bg-brand-600 text-white"
+                          : "bg-white dark:bg-slate-800 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-slate-700"
+                      }`}
+                    >
+                      {lvl}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <button
+                type="button"
+                onClick={() => removeRule(idx)}
+                className="text-gray-400 hover:text-red-500 transition-colors p-1"
+              >
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          ))}
+        </div>
+
+        {/* Controls row */}
+        <div className="flex flex-wrap items-center gap-3">
+          <button type="button" onClick={addRule} className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-dashed border-brand-300 dark:border-brand-700 text-brand-600 dark:text-brand-400 hover:bg-brand-50 dark:hover:bg-brand-900/30 transition-colors">
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+            </svg>
+            Add skill rule
+          </button>
+
+          {rules.length > 1 && (
+            <div className="flex items-center gap-1.5">
+              <span className="text-xs text-gray-500 dark:text-gray-400">Match:</span>
+              {(["AND", "OR"] as const).map((op) => (
+                <button
+                  key={op}
+                  type="button"
+                  onClick={() => setOperator(op)}
+                  className={`px-2.5 py-1 text-xs font-medium border transition-colors ${
+                    op === "AND" ? "rounded-l-lg" : "rounded-r-lg -ml-px"
+                  } ${operator === op
+                    ? "bg-brand-600 border-brand-600 text-white"
+                    : "bg-white dark:bg-slate-800 border-gray-200 dark:border-slate-600 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-slate-700"
+                  }`}
+                >
+                  {op === "AND" ? "All (AND)" : "Any (OR)"}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {allChapters.length > 0 && (
+            <div className="flex items-center gap-1.5 ml-auto">
+              <span className="text-xs text-gray-500 dark:text-gray-400">Chapter:</span>
+              <select
+                value={chapter}
+                onChange={(e) => setChapter(e.target.value)}
+                className="px-2 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg text-sm bg-white dark:bg-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-500"
+              >
+                <option value="">All chapters</option>
+                {allChapters.map((c) => <option key={c} value={c}>{c}</option>)}
+              </select>
+            </div>
+          )}
+
+          {results && results.length > 0 && (
+            <button type="button" onClick={exportXlsx} className="px-3 py-1.5 text-sm rounded-lg border border-gray-200 dark:border-slate-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors">
+              Export XLSX
+            </button>
+          )}
+        </div>
+
+        {/* Results */}
+        {activeRules.length > 0 && (
+          <div className="border-t border-gray-100 dark:border-slate-700 pt-4">
+            {isFetching ? (
+              <div className="text-sm text-gray-400 animate-pulse">Searching...</div>
+            ) : results && results.length === 0 ? (
+              <p className="text-sm text-gray-400 dark:text-gray-500 italic">No resources match these criteria.</p>
+            ) : results && results.length > 0 ? (
+              <>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
+                  {results.length} resource{results.length !== 1 ? "s" : ""} found
+                </p>
+                <div className="space-y-2">
+                  {results.map((person) => (
+                    <div key={person.id} className="flex items-start gap-3 p-3 rounded-lg bg-gray-50 dark:bg-slate-800/50 hover:bg-gray-100 dark:hover:bg-slate-800 transition-colors">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <Link href={`/resources/${person.id}`} className="text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-brand-600 transition-colors">
+                            {person.displayName}
+                          </Link>
+                          {person.eid && (
+                            <span className="text-xs px-1.5 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300">{person.eid}</span>
+                          )}
+                          {person.chapter && (
+                            <span className="text-xs px-2 py-0.5 rounded-full bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-100">{person.chapter}</span>
+                          )}
+                        </div>
+                        <div className="flex flex-wrap gap-1.5 mt-1.5">
+                          {person.matchedSkills.map((s) => (
+                            <span key={s.skill} className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border ${proficiencyClasses(s.proficiency)}`}>
+                              {s.skill} <span className="font-semibold">{s.proficiency}</span>
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                      <Link href={`/resources/${person.id}`} className="text-xs text-brand-600 dark:text-brand-400 hover:underline shrink-0 mt-0.5">
+                        View
+                      </Link>
+                    </div>
+                  ))}
+                </div>
+              </>
+            ) : null}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/analytics/skills/SearchTab.tsx b/apps/web/src/components/analytics/skills/SearchTab.tsx
new file mode 100644
index 0000000..9a22ad8
--- /dev/null
+++ b/apps/web/src/components/analytics/skills/SearchTab.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { trpc } from "~/lib/trpc/client.js";
+import { useDebounce } from "~/hooks/useDebounce.js";
+import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
+import { useTableSort } from "~/hooks/useTableSort.js";
+import { ProficiencyBadge, PROFICIENCY_LABELS, formatDate } from "./shared.js";
+
+export function SearchTab() {
+  const [searchSkill, setSearchSkill] = useState("");
+  const [minProficiency, setMinProficiency] = useState(1);
+  const [availableOnly, setAvailableOnly] = useState(false);
+
+  const debouncedSearch = useDebounce(searchSkill, 300);
+
+  const { data, isLoading } = trpc.resource.getSkillMarketplace.useQuery(
+    { searchSkill: debouncedSearch || undefined, minProficiency, availableOnly },
+    { staleTime: 30_000, enabled: debouncedSearch.trim().length > 0 },
+  );
+
+  const { sorted, sortField, sortDir, toggle } = useTableSort(data?.searchResults ?? []);
+
+  return (
+    <div className="space-y-4">
+      {/* Filters */}
+      <div className="bg-white dark:bg-slate-900 rounded-xl border border-gray-200 dark:border-slate-700 p-5 space-y-4">
+        <div className="flex flex-wrap gap-3 items-center">
+          {/* Search input */}
+          <div className="relative">
+            <svg
+              className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"
+              fill="none" viewBox="0 0 24 24" stroke="currentColor"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
+            </svg>
+            <input
+              type="text"
+              placeholder="Search by skill name..."
+              value={searchSkill}
+              onChange={(e) => setSearchSkill(e.target.value)}
+              className="pl-8 pr-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm bg-white dark:bg-slate-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-500 w-60"
+            />
+          </div>
+
+          {/* Min proficiency */}
+          <div className="flex items-center gap-1.5">
+            <span className="text-xs text-gray-500 dark:text-gray-400">Min. proficiency:</span>
+            <div className="flex rounded-lg overflow-hidden border border-gray-200 dark:border-slate-600">
+              {[1, 2, 3, 4, 5].map((lvl) => (
+                <button
+                  key={lvl}
+                  type="button"
+                  title={PROFICIENCY_LABELS[lvl]}
+                  onClick={() => setMinProficiency(lvl)}
+                  className={`px-2 py-1 text-xs font-medium transition-colors ${
+                    minProficiency === lvl
+                      ? "bg-brand-600 text-white"
+                      : "bg-white dark:bg-slate-800 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-slate-700"
+                  }`}
+                >
+                  {lvl}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Available only */}
+          <label className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300 cursor-pointer select-none">
+            <input
+              type="checkbox"
+              checked={availableOnly}
+              onChange={(e) => setAvailableOnly(e.target.checked)}
+              className="rounded border-gray-300 text-brand-600 focus:ring-brand-500"
+            />
+            Available in next 30 days
+          </label>
+        </div>
+
+        {/* Results */}
+        {debouncedSearch.trim().length > 0 && (
+          <div className="border-t border-gray-100 dark:border-slate-700 pt-4">
+            {isLoading ? (
+              <div className="text-sm text-gray-400 animate-pulse">Searching...</div>
+            ) : sorted.length === 0 ? (
+              <p className="text-sm text-gray-400 dark:text-gray-500 italic">
+                No resources found with &quot;{debouncedSearch}&quot; at proficiency {minProficiency}+.
+              </p>
+            ) : (
+              <>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
+                  {sorted.length} resource{sorted.length !== 1 ? "s" : ""} found
+                </p>
+                <div className="overflow-x-auto">
+                  <table className="w-full text-sm">
+                    <thead className="bg-gray-50 dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700">
+                      <tr>
+                        <SortableColumnHeader label="Resource" field="displayName" sortField={sortField} sortDir={sortDir} onSort={toggle} />
+                        <SortableColumnHeader label="Chapter" field="chapter" sortField={sortField} sortDir={sortDir} onSort={toggle} />
+                        <SortableColumnHeader label="Skill" field="skillName" sortField={sortField} sortDir={sortDir} onSort={toggle} />
+                        <SortableColumnHeader label="Proficiency" field="skillProficiency" sortField={sortField} sortDir={sortDir} onSort={toggle} align="center" />
+                        <SortableColumnHeader label="Utilization" field="utilizationPercent" sortField={sortField} sortDir={sortDir} onSort={toggle} align="right" />
+                        <SortableColumnHeader label="Available From" field="availableFrom" sortField={sortField} sortDir={sortDir} onSort={toggle} />
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-100 dark:divide-slate-700">
+                      {sorted.map((r) => (
+                        <tr key={r.id} className="hover:bg-gray-50 dark:hover:bg-slate-800/50">
+                          <td className="px-4 py-2.5">
+                            <Link href={`/resources/${r.id}`} className="font-medium text-gray-900 dark:text-gray-100 hover:text-brand-600 transition-colors">
+                              {r.displayName}
+                            </Link>
+                          </td>
+                          <td className="px-4 py-2.5 text-gray-500 dark:text-gray-400">{r.chapter ?? "---"}</td>
+                          <td className="px-4 py-2.5 text-gray-700 dark:text-gray-300">{r.skillName}</td>
+                          <td className="px-4 py-2.5 text-center"><ProficiencyBadge value={r.skillProficiency} /></td>
+                          <td className="px-4 py-2.5 text-right">
+                            <span className={`text-sm font-medium ${
+                              r.utilizationPercent >= 90 ? "text-red-600 dark:text-red-400"
+                                : r.utilizationPercent >= 70 ? "text-amber-600 dark:text-amber-400"
+                                  : "text-green-600 dark:text-green-400"
+                            }`}>
+                              {r.utilizationPercent}%
+                            </span>
+                          </td>
+                          <td className="px-4 py-2.5 text-gray-500 dark:text-gray-400 text-sm">{formatDate(r.availableFrom)}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/analytics/skills/shared.tsx b/apps/web/src/components/analytics/skills/shared.tsx
new file mode 100644
index 0000000..2f826e9
--- /dev/null
+++ b/apps/web/src/components/analytics/skills/shared.tsx
@@ -0,0 +1,50 @@
+export const PROFICIENCY_LABELS = ["", "Aware", "Basic", "Intermediate", "Advanced", "Expert"];
+
+export const PROFICIENCY_CLASSES = [
+  "bg-gray-100 text-gray-700 border-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-500",
+  "bg-blue-100 text-blue-800 border-blue-300 dark:bg-blue-900/60 dark:text-blue-200 dark:border-blue-600",
+  "bg-indigo-100 text-indigo-800 border-indigo-300 dark:bg-indigo-900/60 dark:text-indigo-200 dark:border-indigo-500",
+  "bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-900/60 dark:text-amber-200 dark:border-amber-500",
+  "bg-green-100 text-green-800 border-green-300 dark:bg-green-900/60 dark:text-green-200 dark:border-green-500",
+];
+
+export function proficiencyClasses(level: number): string {
+  const idx = Math.max(0, Math.min(4, Math.round(level) - 1));
+  return PROFICIENCY_CLASSES[idx] ?? PROFICIENCY_CLASSES[0]!;
+}
+
+export function ProficiencyBadge({ value }: { value: number }) {
+  return (
+    <span className={`inline-block px-2 py-0.5 text-xs rounded font-medium border ${proficiencyClasses(value)}`}>
+      {value} {PROFICIENCY_LABELS[value] ?? ""}
+    </span>
+  );
+}
+
+export function GapIndicator({ gap }: { gap: number }) {
+  if (gap > 0) {
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded font-semibold bg-red-100 text-red-700 border border-red-200 dark:bg-red-900/40 dark:text-red-300 dark:border-red-700">
+        -{gap} shortage
+      </span>
+    );
+  }
+  if (gap < 0) {
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded font-semibold bg-green-100 text-green-700 border border-green-200 dark:bg-green-900/40 dark:text-green-300 dark:border-green-700">
+        +{Math.abs(gap)} surplus
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded font-semibold bg-gray-100 text-gray-500 border border-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600">
+      balanced
+    </span>
+  );
+}
+
+export function formatDate(iso: string | null): string {
+  if (!iso) return "Not within 30d";
+  const d = new Date(iso);
+  return d.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" });
+}
diff --git a/apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx b/apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx
new file mode 100644
index 0000000..6745ea0
--- /dev/null
+++ b/apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx
@@ -0,0 +1,786 @@
+"use client";
+
+import { useState, useMemo, useCallback } from "react";
+import { FieldType } from "@planarchy/shared";
+import type { BlueprintFieldDefinition, FieldOption, StaffingRequirement } from "@planarchy/shared";
+import { trpc } from "~/lib/trpc/client.js";
+import { RolePresetsEditor } from "./RolePresetsEditor.js";
+import { FieldCard } from "./FieldCard.js";
+import type { FieldOverrides } from "./FieldCard.js";
+import {
+  getCatalogForTarget,
+  getCategoriesForTarget,
+  findCatalogField,
+} from "~/lib/blueprint-field-catalog.js";
+import type { CatalogField } from "~/lib/blueprint-field-catalog.js";
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const INPUT_CLS =
+  "px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500";
+
+const BTN_PRIMARY =
+  "px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50";
+
+const BTN_SECONDARY =
+  "px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-sm font-medium";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type BlueprintTargetValue = "RESOURCE" | "PROJECT";
+
+/** Internal state for a field: catalog index or custom definition */
+interface FieldState {
+  /** Catalog key (undefined for custom fields) */
+  catalogKey: string | undefined;
+  overrides: FieldOverrides;
+  /** For custom fields only */
+  custom?: {
+    key: string;
+    label: string;
+    type: FieldType;
+    options: FieldOption[];
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Helpers: Convert between FieldState and BlueprintFieldDefinition
+// ---------------------------------------------------------------------------
+
+function fieldDefToState(
+  def: BlueprintFieldDefinition,
+  target: BlueprintTargetValue,
+): FieldState {
+  const catalogField = findCatalogField(target, def.key);
+  if (catalogField) {
+    return {
+      catalogKey: catalogField.key,
+      overrides: {
+        enabled: true,
+        required: def.required,
+        showInList: def.showInList ?? false,
+        defaultValue: def.defaultValue,
+        description: def.description ?? "",
+      },
+    };
+  }
+  // Custom field -- not in catalog
+  return {
+    catalogKey: undefined,
+    overrides: {
+      enabled: true,
+      required: def.required,
+      showInList: def.showInList ?? false,
+      defaultValue: def.defaultValue,
+      description: def.description ?? "",
+    },
+    custom: {
+      key: def.key,
+      label: def.label,
+      type: def.type,
+      options: def.options ?? [],
+    },
+  };
+}
+
+function stateToFieldDef(
+  state: FieldState,
+  order: number,
+  target: BlueprintTargetValue,
+): BlueprintFieldDefinition | null {
+  if (!state.overrides.enabled) return null;
+
+  if (state.catalogKey) {
+    const catalogField = findCatalogField(target, state.catalogKey);
+    if (!catalogField) return null;
+    const desc = state.overrides.description || catalogField.description;
+    return {
+      id: catalogField.key,
+      key: catalogField.key,
+      label: catalogField.label,
+      type: catalogField.type,
+      required: state.overrides.required,
+      order,
+      ...(state.overrides.showInList ? { showInList: true } : {}),
+      ...(desc ? { description: desc } : {}),
+      defaultValue: state.overrides.defaultValue,
+      ...(catalogField.options ? { options: catalogField.options } : {}),
+    };
+  }
+
+  // Custom field
+  if (!state.custom) return null;
+  const customDesc = state.overrides.description || undefined;
+  return {
+    id: state.custom.key,
+    key: state.custom.key,
+    label: state.custom.label,
+    type: state.custom.type,
+    required: state.overrides.required,
+    order,
+    ...(state.overrides.showInList ? { showInList: true } : {}),
+    ...(customDesc !== undefined ? { description: customDesc } : {}),
+    defaultValue: state.overrides.defaultValue,
+    ...(state.custom.options.length > 0 ? { options: state.custom.options } : {}),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+interface BlueprintFieldCatalogProps {
+  blueprintId: string;
+  blueprintName: string;
+  blueprintTarget: BlueprintTargetValue;
+  initialFieldDefs: BlueprintFieldDefinition[];
+  initialRolePresets?: StaffingRequirement[];
+  initialTab?: "fields" | "presets";
+  onClose: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const FIELD_TYPES: { value: FieldType; label: string }[] = [
+  { value: FieldType.TEXT, label: "Text" },
+  { value: FieldType.TEXTAREA, label: "Textarea" },
+  { value: FieldType.NUMBER, label: "Number" },
+  { value: FieldType.BOOLEAN, label: "Boolean" },
+  { value: FieldType.DATE, label: "Date" },
+  { value: FieldType.SELECT, label: "Select" },
+  { value: FieldType.MULTI_SELECT, label: "Multi-Select" },
+  { value: FieldType.URL, label: "URL" },
+  { value: FieldType.EMAIL, label: "Email" },
+];
+
+export function BlueprintFieldCatalog({
+  blueprintId,
+  blueprintName,
+  blueprintTarget,
+  initialFieldDefs,
+  initialRolePresets = [],
+  initialTab = "fields",
+  onClose,
+}: BlueprintFieldCatalogProps) {
+  const utils = trpc.useUtils();
+
+  const [activeTab, setActiveTab] = useState<"fields" | "presets">(initialTab);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeCategory, setActiveCategory] = useState<string | null>(null);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [presetSaveError, setPresetSaveError] = useState<string | null>(null);
+
+  // -- Custom field form state --
+  const [showCustomForm, setShowCustomForm] = useState(false);
+  const [customKey, setCustomKey] = useState("");
+  const [customLabel, setCustomLabel] = useState("");
+  const [customType, setCustomType] = useState<FieldType>(FieldType.TEXT);
+
+  const catalog = useMemo(() => getCatalogForTarget(blueprintTarget), [blueprintTarget]);
+  const categories = useMemo(() => getCategoriesForTarget(blueprintTarget), [blueprintTarget]);
+
+  // ---------------------------------------------------------------------------
+  // Build initial state from existing fieldDefs + catalog
+  // ---------------------------------------------------------------------------
+
+  const [catalogOverrides, setCatalogOverrides] = useState<
+    Record<string, FieldOverrides>
+  >(() => {
+    const map: Record<string, FieldOverrides> = {};
+    // Start with all catalog fields disabled
+    for (const cf of catalog) {
+      map[cf.key] = {
+        enabled: false,
+        required: false,
+        showInList: false,
+        defaultValue: cf.defaultValue,
+        description: "",
+      };
+    }
+    // Override from existing fieldDefs
+    for (const def of initialFieldDefs) {
+      const state = fieldDefToState(def, blueprintTarget);
+      if (state.catalogKey && map[state.catalogKey]) {
+        map[state.catalogKey] = state.overrides;
+      }
+    }
+    return map;
+  });
+
+  const [customFields, setCustomFields] = useState<FieldState[]>(() => {
+    return initialFieldDefs
+      .map((def) => fieldDefToState(def, blueprintTarget))
+      .filter((s) => !s.catalogKey);
+  });
+
+  // ---------------------------------------------------------------------------
+  // Mutations
+  // ---------------------------------------------------------------------------
+
+  const updateMutation = trpc.blueprint.update.useMutation();
+  const presetMutation = trpc.blueprint.updateRolePresets.useMutation();
+
+  // ---------------------------------------------------------------------------
+  // Derived data
+  // ---------------------------------------------------------------------------
+
+  const allCategoryNames = useMemo(
+    () => [...categories.map((c) => c.name), "Custom Fields"],
+    [categories],
+  );
+
+  const filteredCatalog = useMemo(() => {
+    if (!searchQuery.trim()) return catalog;
+    const q = searchQuery.toLowerCase();
+    return catalog.filter(
+      (f) =>
+        f.label.toLowerCase().includes(q) ||
+        f.key.toLowerCase().includes(q) ||
+        f.description.toLowerCase().includes(q) ||
+        f.category.toLowerCase().includes(q),
+    );
+  }, [catalog, searchQuery]);
+
+  const fieldsByCategory = useMemo(() => {
+    const map = new Map<string, CatalogField[]>();
+    for (const cat of categories) {
+      map.set(cat.name, []);
+    }
+    for (const f of filteredCatalog) {
+      const list = map.get(f.category);
+      if (list) list.push(f);
+    }
+    return map;
+  }, [filteredCatalog, categories]);
+
+  const enabledCount = useMemo(() => {
+    let count = 0;
+    for (const ov of Object.values(catalogOverrides)) {
+      if (ov.enabled) count++;
+    }
+    count += customFields.filter((f) => f.overrides.enabled).length;
+    return count;
+  }, [catalogOverrides, customFields]);
+
+  // ---------------------------------------------------------------------------
+  // Handlers
+  // ---------------------------------------------------------------------------
+
+  const handleCatalogFieldChange = useCallback(
+    (key: string, overrides: FieldOverrides) => {
+      setCatalogOverrides((prev) => ({ ...prev, [key]: overrides }));
+    },
+    [],
+  );
+
+  const handleCustomFieldChange = useCallback(
+    (idx: number, overrides: FieldOverrides) => {
+      setCustomFields((prev) =>
+        prev.map((f, i) => (i === idx ? { ...f, overrides } : f)),
+      );
+    },
+    [],
+  );
+
+  function removeCustomField(idx: number) {
+    setCustomFields((prev) => prev.filter((_, i) => i !== idx));
+  }
+
+  function addCustomField() {
+    if (!customKey.trim() || !customLabel.trim()) return;
+    // Check for duplicate key
+    const allKeys = new Set([
+      ...catalog.map((f) => f.key),
+      ...customFields.map((f) => f.custom?.key).filter(Boolean),
+    ]);
+    if (allKeys.has(customKey.trim())) return;
+
+    setCustomFields((prev) => [
+      ...prev,
+      {
+        catalogKey: undefined,
+        overrides: {
+          enabled: true,
+          required: false,
+          showInList: false,
+          defaultValue: undefined,
+          description: "",
+        },
+        custom: {
+          key: customKey.trim(),
+          label: customLabel.trim(),
+          type: customType,
+          options: [],
+        },
+      },
+    ]);
+    setCustomKey("");
+    setCustomLabel("");
+    setCustomType(FieldType.TEXT);
+    setShowCustomForm(false);
+  }
+
+  function handleSave() {
+    setSaveError(null);
+    const defs: BlueprintFieldDefinition[] = [];
+    let order = 0;
+
+    // Catalog fields first (in catalog order)
+    for (const cf of catalog) {
+      const ov = catalogOverrides[cf.key];
+      if (!ov?.enabled) continue;
+      const state: FieldState = { catalogKey: cf.key, overrides: ov };
+      const def = stateToFieldDef(state, order, blueprintTarget);
+      if (def) {
+        defs.push(def);
+        order++;
+      }
+    }
+
+    // Custom fields
+    for (const cf of customFields) {
+      if (!cf.overrides.enabled) continue;
+      const def = stateToFieldDef(cf, order, blueprintTarget);
+      if (def) {
+        defs.push(def);
+        order++;
+      }
+    }
+
+    updateMutation.mutate(
+      { id: blueprintId, data: { fieldDefs: defs } },
+      {
+        onSuccess: async () => {
+          await utils.blueprint.list.invalidate();
+          onClose();
+        },
+        onError: (err) => setSaveError(err.message),
+      },
+    );
+  }
+
+  function handleBackdropClick(e: React.MouseEvent<HTMLDivElement>) {
+    if (e.target === e.currentTarget) onClose();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Collapsed categories
+  // ---------------------------------------------------------------------------
+
+  const [collapsedCategories, setCollapsedCategories] = useState<Set<string>>(
+    new Set(),
+  );
+
+  function toggleCategory(name: string) {
+    setCollapsedCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  }
+
+  // ---------------------------------------------------------------------------
+  // Render
+  // ---------------------------------------------------------------------------
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
+      onClick={handleBackdropClick}
+    >
+      <div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-4xl mx-4 flex flex-col max-h-[90vh]">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700 shrink-0">
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              Configure Fields:{" "}
+              <span className="text-gray-600 dark:text-gray-400 font-normal">{blueprintName}</span>
+            </h2>
+            <p className="text-xs text-gray-400 mt-0.5">
+              {enabledCount} field{enabledCount !== 1 ? "s" : ""} enabled
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-2xl leading-none"
+            aria-label="Close"
+          >
+            x
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex border-b border-gray-200 dark:border-gray-700 px-6 shrink-0">
+          {(["fields", "presets"] as const).map((tab) => (
+            <button
+              key={tab}
+              type="button"
+              onClick={() => setActiveTab(tab)}
+              className={`px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
+                activeTab === tab
+                  ? "border-brand-500 text-brand-600"
+                  : "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+              }`}
+            >
+              {tab === "fields" ? "Fields" : "Role Presets"}
+            </button>
+          ))}
+        </div>
+
+        {activeTab === "fields" ? (
+          <>
+            {/* Search + category sidebar layout */}
+            <div className="flex flex-1 overflow-hidden">
+              {/* Category sidebar */}
+              <div className="w-48 shrink-0 border-r border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-900 overflow-y-auto hidden md:block">
+                <nav className="py-2">
+                  <button
+                    type="button"
+                    onClick={() => setActiveCategory(null)}
+                    className={`w-full text-left px-4 py-2 text-sm transition-colors ${
+                      activeCategory === null
+                        ? "bg-brand-100 dark:bg-gray-800 text-brand-700 dark:text-brand-400 font-medium border-l-2 border-brand-500"
+                        : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800/50 border-l-2 border-transparent"
+                    }`}
+                  >
+                    All Fields
+                  </button>
+                  {allCategoryNames.map((name) => {
+                    const catCount =
+                      name === "Custom Fields"
+                        ? customFields.length
+                        : (fieldsByCategory.get(name)?.length ?? 0);
+                    const enabledInCat =
+                      name === "Custom Fields"
+                        ? customFields.filter((f) => f.overrides.enabled).length
+                        : (fieldsByCategory.get(name) ?? []).filter(
+                            (f) => catalogOverrides[f.key]?.enabled,
+                          ).length;
+
+                    return (
+                      <button
+                        key={name}
+                        type="button"
+                        onClick={() => setActiveCategory(name)}
+                        className={`w-full text-left px-4 py-2 text-sm transition-colors ${
+                          activeCategory === name
+                            ? "bg-brand-100 dark:bg-gray-800 text-brand-700 dark:text-brand-400 font-medium border-l-2 border-brand-500"
+                            : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800/50 border-l-2 border-transparent"
+                        }`}
+                      >
+                        <span className="truncate block">{name}</span>
+                        {catCount > 0 && (
+                          <span className="text-xs text-gray-400">
+                            {enabledInCat}/{catCount}
+                          </span>
+                        )}
+                      </button>
+                    );
+                  })}
+                </nav>
+              </div>
+
+              {/* Main content */}
+              <div className="flex-1 flex flex-col overflow-hidden">
+                {/* Search bar */}
+                <div className="px-4 py-3 border-b border-gray-100 dark:border-gray-700 shrink-0">
+                  <input
+                    type="text"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    placeholder="Search fields..."
+                    className={`${INPUT_CLS} w-full`}
+                    autoFocus
+                  />
+                </div>
+
+                {/* Field cards */}
+                <div className="flex-1 overflow-y-auto px-4 py-4 space-y-6">
+                  {categories
+                    .filter(
+                      (cat) =>
+                        activeCategory === null ||
+                        activeCategory === cat.name,
+                    )
+                    .map((cat) => {
+                      const fields = fieldsByCategory.get(cat.name) ?? [];
+                      if (fields.length === 0 && searchQuery.trim()) return null;
+                      if (fields.length === 0 && activeCategory !== null && activeCategory !== cat.name) return null;
+
+                      const isCollapsed = collapsedCategories.has(cat.name);
+
+                      return (
+                        <div key={cat.name}>
+                          <button
+                            type="button"
+                            onClick={() => toggleCategory(cat.name)}
+                            className="flex items-center gap-2 mb-3 w-full text-left group"
+                          >
+                            <span className="text-xs text-gray-400 transition-transform group-hover:text-gray-600">
+                              {isCollapsed ? "\u25B6" : "\u25BC"}
+                            </span>
+                            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                              {cat.name}
+                            </h3>
+                            <span className="text-xs text-gray-400">
+                              {cat.description}
+                            </span>
+                          </button>
+                          {!isCollapsed && (
+                            <div className="grid grid-cols-1 gap-2">
+                              {fields.map((field) => (
+                                <FieldCard
+                                  key={field.key}
+                                  field={field}
+                                  overrides={catalogOverrides[field.key]!}
+                                  onChange={(ov) =>
+                                    handleCatalogFieldChange(field.key, ov)
+                                  }
+                                />
+                              ))}
+                              {fields.length === 0 && (
+                                <p className="text-sm text-gray-400 py-2">
+                                  No fields in this category.
+                                </p>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })}
+
+                  {/* Custom Fields section */}
+                  {(activeCategory === null ||
+                    activeCategory === "Custom Fields") && (
+                    <div>
+                      <button
+                        type="button"
+                        onClick={() => toggleCategory("Custom Fields")}
+                        className="flex items-center gap-2 mb-3 w-full text-left group"
+                      >
+                        <span className="text-xs text-gray-400 transition-transform group-hover:text-gray-600">
+                          {collapsedCategories.has("Custom Fields")
+                            ? "\u25B6"
+                            : "\u25BC"}
+                        </span>
+                        <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                          Custom Fields
+                        </h3>
+                        <span className="text-xs text-gray-400">
+                          User-defined fields not in the catalog
+                        </span>
+                      </button>
+                      {!collapsedCategories.has("Custom Fields") && (
+                        <div className="space-y-2">
+                          {customFields.map((cf, idx) => {
+                            if (!cf.custom) return null;
+                            // Build a pseudo CatalogField for the FieldCard
+                            const pseudoCatalog: CatalogField = {
+                              key: cf.custom.key,
+                              label: cf.custom.label,
+                              type: cf.custom.type,
+                              category: "Custom Fields",
+                              description:
+                                cf.overrides.description || "Custom field",
+                              ...(cf.custom.options.length > 0
+                                ? { options: cf.custom.options }
+                                : {}),
+                              builtIn: false,
+                            };
+                            return (
+                              <div key={cf.custom.key} className="relative">
+                                <FieldCard
+                                  field={pseudoCatalog}
+                                  overrides={cf.overrides}
+                                  onChange={(ov) =>
+                                    handleCustomFieldChange(idx, ov)
+                                  }
+                                />
+                                <button
+                                  type="button"
+                                  onClick={() => removeCustomField(idx)}
+                                  className="absolute top-3 right-14 text-xs text-red-400 hover:text-red-600"
+                                  title="Remove custom field"
+                                >
+                                  Remove
+                                </button>
+                              </div>
+                            );
+                          })}
+
+                          {/* Add custom field */}
+                          {showCustomForm ? (
+                            <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-4 space-y-3 bg-gray-50/50 dark:bg-gray-800">
+                              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                                <div className="flex flex-col gap-1">
+                                  <label className="text-xs font-medium text-gray-600">
+                                    Key{" "}
+                                    <span className="text-red-500">*</span>
+                                  </label>
+                                  <input
+                                    type="text"
+                                    value={customKey}
+                                    onChange={(e) =>
+                                      setCustomKey(
+                                        e.target.value.replace(
+                                          /[^a-zA-Z0-9_]/g,
+                                          "",
+                                        ),
+                                      )
+                                    }
+                                    placeholder="field_key"
+                                    className={`${INPUT_CLS} font-mono`}
+                                  />
+                                </div>
+                                <div className="flex flex-col gap-1">
+                                  <label className="text-xs font-medium text-gray-600">
+                                    Label{" "}
+                                    <span className="text-red-500">*</span>
+                                  </label>
+                                  <input
+                                    type="text"
+                                    value={customLabel}
+                                    onChange={(e) =>
+                                      setCustomLabel(e.target.value)
+                                    }
+                                    placeholder="Display Label"
+                                    className={INPUT_CLS}
+                                  />
+                                </div>
+                                <div className="flex flex-col gap-1">
+                                  <label className="text-xs font-medium text-gray-600">
+                                    Type
+                                  </label>
+                                  <select
+                                    value={customType}
+                                    onChange={(e) =>
+                                      setCustomType(
+                                        e.target.value as FieldType,
+                                      )
+                                    }
+                                    className={INPUT_CLS}
+                                  >
+                                    {FIELD_TYPES.map((ft) => (
+                                      <option key={ft.value} value={ft.value}>
+                                        {ft.label}
+                                      </option>
+                                    ))}
+                                  </select>
+                                </div>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <button
+                                  type="button"
+                                  onClick={addCustomField}
+                                  disabled={
+                                    !customKey.trim() || !customLabel.trim()
+                                  }
+                                  className={BTN_PRIMARY}
+                                >
+                                  Add
+                                </button>
+                                <button
+                                  type="button"
+                                  onClick={() => {
+                                    setShowCustomForm(false);
+                                    setCustomKey("");
+                                    setCustomLabel("");
+                                    setCustomType(FieldType.TEXT);
+                                  }}
+                                  className={BTN_SECONDARY}
+                                >
+                                  Cancel
+                                </button>
+                              </div>
+                            </div>
+                          ) : (
+                            <button
+                              type="button"
+                              onClick={() => setShowCustomForm(true)}
+                              className="flex items-center gap-1.5 text-sm text-brand-600 hover:text-brand-800 font-medium py-2"
+                            >
+                              <span className="text-lg leading-none">+</span>{" "}
+                              Add Custom Field
+                            </button>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Error */}
+            {saveError && (
+              <div className="mx-6 mb-2 px-3 py-2 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700 shrink-0">
+                {saveError}
+              </div>
+            )}
+
+            {/* Footer */}
+            <div className="flex items-center justify-between gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700 shrink-0">
+              <span className="text-xs text-gray-400">
+                {enabledCount} field{enabledCount !== 1 ? "s" : ""} will be
+                saved
+              </span>
+              <div className="flex items-center gap-3">
+                <button type="button" onClick={onClose} className={BTN_SECONDARY}>
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  onClick={handleSave}
+                  disabled={updateMutation.isPending}
+                  className={BTN_PRIMARY}
+                >
+                  {updateMutation.isPending ? "Saving..." : "Save Fields"}
+                </button>
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="px-6 py-4 overflow-y-auto">
+            <p className="text-xs text-gray-500 mb-4">
+              Role presets are auto-loaded in Step 3 of the Project Creation
+              Wizard when this blueprint is selected.
+            </p>
+            <RolePresetsEditor
+              initialPresets={initialRolePresets}
+              onSave={(presets) =>
+                presetMutation.mutate(
+                  { id: blueprintId, rolePresets: presets },
+                  {
+                    onSuccess: async () => {
+                      await utils.blueprint.list.invalidate();
+                      setPresetSaveError(null);
+                      onClose();
+                    },
+                    onError: (err) => {
+                      setPresetSaveError(err.message);
+                    },
+                  },
+                )
+              }
+              isSaving={presetMutation.isPending}
+              saveError={presetSaveError}
+            />
+            <div className="flex justify-start mt-4 border-t border-gray-200 pt-4">
+              <button type="button" onClick={onClose} className={BTN_SECONDARY}>
+                Close
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/blueprints/BlueprintsClient.tsx b/apps/web/src/components/blueprints/BlueprintsClient.tsx
index 5952034..073608a 100644
--- a/apps/web/src/components/blueprints/BlueprintsClient.tsx
+++ b/apps/web/src/components/blueprints/BlueprintsClient.tsx
@@ -5,7 +5,7 @@ import type { FormEvent, MouseEvent } from "react";
 import { BlueprintTarget } from "@planarchy/shared";
 import type { BlueprintFieldDefinition } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
-import { BlueprintFieldEditor } from "./BlueprintFieldEditor.js";
+import { BlueprintFieldCatalog } from "./BlueprintFieldCatalog.js";
 import { useSelection } from "~/hooks/useSelection.js";
 import { BatchActionBar } from "~/components/ui/BatchActionBar.js";
 import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
@@ -369,7 +369,7 @@ export function BlueprintsClient() {
                   const isProject = bp.target === "PROJECT";
 
                   return (
-                    <tr key={bp.id} className="border-b border-gray-100 last:border-b-0 hover:bg-gray-50 transition-colors">
+                    <tr key={bp.id} className="border-b border-gray-100 dark:border-gray-700/50 last:border-b-0 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                       <td className="px-3 py-3">
                         <input
                           type="checkbox"
@@ -380,20 +380,20 @@ export function BlueprintsClient() {
                       </td>
                       <td className="px-3 py-3">
                         <div className="min-w-0">
-                          <div className="font-medium text-gray-900">{bp.name}</div>
+                          <div className="font-medium text-gray-900 dark:text-gray-100">{bp.name}</div>
                           {bp.description && <div className="text-xs text-gray-500 mt-0.5 truncate">{bp.description}</div>}
                         </div>
                       </td>
                       <td className="px-3 py-3">
-                        <span className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${isProject ? "bg-purple-50 text-purple-700" : "bg-blue-50 text-blue-700"}`}>
+                        <span className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${isProject ? "bg-purple-50 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300" : "bg-blue-50 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300"}`}>
                           {bp.target}
                         </span>
                       </td>
-                      <td className="px-3 py-3 text-center text-gray-600">{fieldCount}</td>
-                      <td className="px-3 py-3 text-center text-gray-600">{isProject ? presetCount : "—"}</td>
+                      <td className="px-3 py-3 text-center text-gray-600 dark:text-gray-400">{fieldCount}</td>
+                      <td className="px-3 py-3 text-center text-gray-600 dark:text-gray-400">{isProject ? presetCount : "—"}</td>
                       <td className="px-3 py-3 text-center">
                         {bp.isGlobal ? (
-                          <span className="inline-block px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700 font-medium">
+                          <span className="inline-block px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300 font-medium">
                             Global
                           </span>
                         ) : (
@@ -496,9 +496,10 @@ export function BlueprintsClient() {
       )}
 
       {editingBlueprint && (
-        <BlueprintFieldEditor
+        <BlueprintFieldCatalog
           blueprintId={editingBlueprint.id}
           blueprintName={editingBlueprint.name}
+          blueprintTarget={editingBlueprint.target}
           initialFieldDefs={Array.isArray(editingBlueprint.fieldDefs) ? (editingBlueprint.fieldDefs as BlueprintFieldDefinition[]) : []}
           initialRolePresets={Array.isArray(editingBlueprint.rolePresets) ? (editingBlueprint.rolePresets as import("@planarchy/shared").StaffingRequirement[]) : []}
           initialTab={editingTab}
diff --git a/apps/web/src/components/blueprints/FieldCard.tsx b/apps/web/src/components/blueprints/FieldCard.tsx
new file mode 100644
index 0000000..0d36411
--- /dev/null
+++ b/apps/web/src/components/blueprints/FieldCard.tsx
@@ -0,0 +1,383 @@
+"use client";
+
+import { useState } from "react";
+import { FieldType } from "@planarchy/shared";
+import type { FieldOption } from "@planarchy/shared";
+import type { CatalogField } from "~/lib/blueprint-field-catalog.js";
+
+// ---------------------------------------------------------------------------
+// Type icons
+// ---------------------------------------------------------------------------
+
+const TYPE_ICONS: Record<FieldType, string> = {
+  [FieldType.TEXT]: "Aa",
+  [FieldType.TEXTAREA]: "Aa",
+  [FieldType.NUMBER]: "#",
+  [FieldType.BOOLEAN]: "\u2611",
+  [FieldType.DATE]: "\u{1F4C5}",
+  [FieldType.SELECT]: "\u25BC",
+  [FieldType.MULTI_SELECT]: "\u25BC\u25BC",
+  [FieldType.URL]: "\u{1F517}",
+  [FieldType.EMAIL]: "@",
+};
+
+const TYPE_LABELS: Record<FieldType, string> = {
+  [FieldType.TEXT]: "Text",
+  [FieldType.TEXTAREA]: "Textarea",
+  [FieldType.NUMBER]: "Number",
+  [FieldType.BOOLEAN]: "Boolean",
+  [FieldType.DATE]: "Date",
+  [FieldType.SELECT]: "Select",
+  [FieldType.MULTI_SELECT]: "Multi-Select",
+  [FieldType.URL]: "URL",
+  [FieldType.EMAIL]: "Email",
+};
+
+// ---------------------------------------------------------------------------
+// Field overrides that the user can set per-field
+// ---------------------------------------------------------------------------
+
+export interface FieldOverrides {
+  enabled: boolean;
+  required: boolean;
+  showInList: boolean;
+  defaultValue: unknown;
+  description: string;
+}
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+interface FieldCardProps {
+  field: CatalogField;
+  overrides: FieldOverrides;
+  onChange: (overrides: FieldOverrides) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const INPUT_CLS =
+  "px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm";
+
+export function FieldCard({ field, overrides, onChange }: FieldCardProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  function update(patch: Partial<FieldOverrides>) {
+    onChange({ ...overrides, ...patch });
+  }
+
+  function handleToggle() {
+    const next = !overrides.enabled;
+    update({ enabled: next });
+    if (!next) {
+      setExpanded(false);
+    }
+  }
+
+  const isActive = overrides.enabled;
+
+  return (
+    <div
+      className={`border rounded-lg transition-all ${
+        isActive
+          ? "border-brand-400/60 bg-brand-50/40 shadow-sm dark:border-brand-600/50 dark:bg-brand-950/50"
+          : "border-gray-200 bg-white dark:border-gray-700/50 dark:bg-gray-800"
+      }`}
+    >
+      {/* Header row */}
+      <div
+        className="flex items-center gap-3 px-4 py-3 cursor-pointer select-none"
+        onClick={() => {
+          if (isActive) setExpanded((v) => !v);
+          else handleToggle();
+        }}
+      >
+        {/* Type icon */}
+        <span
+          className={`w-8 h-8 rounded-md flex items-center justify-center text-sm font-bold shrink-0 ${
+            isActive
+              ? "bg-brand-100 text-brand-700 dark:bg-brand-900/50 dark:text-brand-300"
+              : "bg-gray-100 text-gray-400 dark:bg-gray-700 dark:text-gray-500"
+          }`}
+          title={TYPE_LABELS[field.type]}
+        >
+          {TYPE_ICONS[field.type]}
+        </span>
+
+        {/* Label + description */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span
+              className={`font-medium text-sm truncate ${
+                isActive ? "text-gray-900 dark:text-gray-100" : "text-gray-500 dark:text-gray-400"
+              }`}
+            >
+              {field.label}
+            </span>
+            <span className="text-xs text-gray-400 dark:text-gray-500 font-mono hidden sm:inline">
+              {field.key}
+            </span>
+          </div>
+          <p className="text-xs text-gray-400 dark:text-gray-500 truncate">{field.description}</p>
+        </div>
+
+        {/* Toggle switch */}
+        <button
+          type="button"
+          role="switch"
+          aria-checked={isActive}
+          aria-label={`Toggle ${field.label}`}
+          onClick={(e) => {
+            e.stopPropagation();
+            handleToggle();
+          }}
+          className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 ${
+            isActive ? "bg-brand-600" : "bg-gray-300 dark:bg-gray-600"
+          }`}
+        >
+          <span
+            className={`inline-block h-5 w-5 rounded-full bg-white shadow-sm transform transition-transform duration-200 ${
+              isActive ? "translate-x-5" : "translate-x-0"
+            }`}
+          />
+        </button>
+      </div>
+
+      {/* Expanded settings */}
+      {isActive && expanded && (
+        <div className="px-4 pb-4 pt-1 border-t border-brand-200/50 space-y-3">
+          {/* Default value input */}
+          <div className="flex flex-col gap-1">
+            <label className="text-xs font-medium text-gray-600 dark:text-gray-300">
+              Default Value
+            </label>
+            <DefaultValueInput
+              type={field.type}
+              {...(field.options ? { options: field.options } : {})}
+              value={overrides.defaultValue}
+              onChange={(val) => update({ defaultValue: val })}
+            />
+          </div>
+
+          {/* Toggles row */}
+          <div className="flex flex-wrap items-center gap-4">
+            <label className="flex items-center gap-1.5 text-sm text-gray-700 dark:text-gray-200 cursor-pointer select-none">
+              <input
+                type="checkbox"
+                checked={overrides.required}
+                onChange={(e) => update({ required: e.target.checked })}
+                className="w-4 h-4 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
+              />
+              Required
+            </label>
+            <label className="flex items-center gap-1.5 text-sm text-gray-700 dark:text-gray-200 cursor-pointer select-none">
+              <input
+                type="checkbox"
+                checked={overrides.showInList}
+                onChange={(e) => update({ showInList: e.target.checked })}
+                className="w-4 h-4 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
+              />
+              Show in list
+            </label>
+          </div>
+
+          {/* Description override */}
+          <div className="flex flex-col gap-1">
+            <label className="text-xs font-medium text-gray-600 dark:text-gray-300">
+              Helper Text
+            </label>
+            <input
+              type="text"
+              value={overrides.description}
+              onChange={(e) => update({ description: e.target.value })}
+              placeholder={field.description}
+              className={INPUT_CLS}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Type-appropriate default value input
+// ---------------------------------------------------------------------------
+
+function DefaultValueInput({
+  type,
+  options,
+  value,
+  onChange,
+}: {
+  type: FieldType;
+  options?: FieldOption[];
+  value: unknown;
+  onChange: (val: unknown) => void;
+}) {
+  switch (type) {
+    case FieldType.BOOLEAN:
+      return (
+        <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200 cursor-pointer select-none">
+          <input
+            type="checkbox"
+            checked={Boolean(value)}
+            onChange={(e) => onChange(e.target.checked)}
+            className="w-4 h-4 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
+          />
+          {value ? "True" : "False"}
+        </label>
+      );
+
+    case FieldType.NUMBER:
+      return (
+        <input
+          type="number"
+          value={value != null ? String(value) : ""}
+          onChange={(e) =>
+            onChange(e.target.value === "" ? undefined : Number(e.target.value))
+          }
+          placeholder="No default"
+          className={INPUT_CLS}
+        />
+      );
+
+    case FieldType.DATE:
+      return (
+        <input
+          type="date"
+          value={typeof value === "string" ? value : ""}
+          onChange={(e) =>
+            onChange(e.target.value === "" ? undefined : e.target.value)
+          }
+          className={INPUT_CLS}
+        />
+      );
+
+    case FieldType.SELECT:
+      return (
+        <select
+          value={typeof value === "string" ? value : ""}
+          onChange={(e) =>
+            onChange(e.target.value === "" ? undefined : e.target.value)
+          }
+          className={INPUT_CLS}
+        >
+          <option value="">No default</option>
+          {(options ?? []).map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      );
+
+    case FieldType.MULTI_SELECT:
+      return (
+        <MultiSelectDefaultInput
+          options={options ?? []}
+          value={Array.isArray(value) ? (value as string[]) : []}
+          onChange={onChange}
+        />
+      );
+
+    case FieldType.URL:
+      return (
+        <input
+          type="url"
+          value={typeof value === "string" ? value : ""}
+          onChange={(e) =>
+            onChange(e.target.value === "" ? undefined : e.target.value)
+          }
+          placeholder="https://..."
+          className={INPUT_CLS}
+        />
+      );
+
+    case FieldType.EMAIL:
+      return (
+        <input
+          type="email"
+          value={typeof value === "string" ? value : ""}
+          onChange={(e) =>
+            onChange(e.target.value === "" ? undefined : e.target.value)
+          }
+          placeholder="name@example.com"
+          className={INPUT_CLS}
+        />
+      );
+
+    case FieldType.TEXTAREA:
+      return (
+        <textarea
+          value={typeof value === "string" ? value : ""}
+          onChange={(e) =>
+            onChange(e.target.value === "" ? undefined : e.target.value)
+          }
+          placeholder="No default"
+          className={`${INPUT_CLS} resize-none`}
+          rows={2}
+        />
+      );
+
+    default:
+      return (
+        <input
+          type="text"
+          value={typeof value === "string" ? value : ""}
+          onChange={(e) =>
+            onChange(e.target.value === "" ? undefined : e.target.value)
+          }
+          placeholder="No default"
+          className={INPUT_CLS}
+        />
+      );
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Multi-select checkboxes for default value
+// ---------------------------------------------------------------------------
+
+function MultiSelectDefaultInput({
+  options,
+  value,
+  onChange,
+}: {
+  options: FieldOption[];
+  value: string[];
+  onChange: (val: string[]) => void;
+}) {
+  function toggleOption(optValue: string) {
+    const next = value.includes(optValue)
+      ? value.filter((v) => v !== optValue)
+      : [...value, optValue];
+    onChange(next.length > 0 ? next : []);
+  }
+
+  if (options.length === 0) {
+    return <span className="text-xs text-gray-400">No options defined</span>;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {options.map((opt) => (
+        <label
+          key={opt.value}
+          className="flex items-center gap-1.5 text-sm text-gray-700 dark:text-gray-200 cursor-pointer select-none"
+        >
+          <input
+            type="checkbox"
+            checked={value.includes(opt.value)}
+            onChange={() => toggleOption(opt.value)}
+            className="w-3.5 h-3.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
+          />
+          {opt.label}
+        </label>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/comments/CommentThread.tsx b/apps/web/src/components/comments/CommentThread.tsx
index 11651bb..06ed9cc 100644
--- a/apps/web/src/components/comments/CommentThread.tsx
+++ b/apps/web/src/components/comments/CommentThread.tsx
@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { clsx } from "clsx";
 import { trpc } from "~/lib/trpc/client.js";
+import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
 import { CommentInput } from "./CommentInput.js";
 
 interface CommentAuthor {
@@ -118,6 +119,7 @@ function SingleComment({
   isReply?: boolean;
 }) {
   const [showReplyInput, setShowReplyInput] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
   const utils = trpc.useUtils();
 
   const createMutation = trpc.comment.create.useMutation({
@@ -199,11 +201,7 @@ function SingleComment({
             )}
             <button
               type="button"
-              onClick={() => {
-                if (window.confirm("Delete this comment?")) {
-                  deleteMutation.mutate({ id: comment.id });
-                }
-              }}
+              onClick={() => setConfirmDelete(true)}
               disabled={deleteMutation.isPending}
               className="text-xs text-gray-400 hover:text-rose-600 dark:hover:text-rose-400"
             >
@@ -236,6 +234,20 @@ function SingleComment({
         </div>
       </div>
 
+      {confirmDelete && (
+        <ConfirmDialog
+          title="Delete comment"
+          message="Are you sure you want to delete this comment?"
+          confirmLabel="Delete"
+          variant="danger"
+          onConfirm={() => {
+            deleteMutation.mutate({ id: comment.id });
+            setConfirmDelete(false);
+          }}
+          onCancel={() => setConfirmDelete(false)}
+        />
+      )}
+
       {/* Render replies */}
       {"replies" in comment && comment.replies.length > 0 && (
         <div className="mt-3 space-y-3 border-l-2 border-gray-100 dark:border-gray-700 pl-2">
diff --git a/apps/web/src/components/dashboard/DashboardClient.tsx b/apps/web/src/components/dashboard/DashboardClient.tsx
index 13154b7..ac02a50 100644
--- a/apps/web/src/components/dashboard/DashboardClient.tsx
+++ b/apps/web/src/components/dashboard/DashboardClient.tsx
@@ -157,6 +157,7 @@ export function DashboardClient() {
                   <div key={widget.id}>
                     <WidgetContainer
                       title={widget.title ?? getWidget(widget.type).label}
+                      description={getWidget(widget.type).description}
                       onRemove={() => removeWidget(widget.id)}
                     >
                       {renderWidget(widget.type, widget.config, (update) =>
diff --git a/apps/web/src/components/dashboard/WidgetContainer.tsx b/apps/web/src/components/dashboard/WidgetContainer.tsx
index 91de87c..02e70ef 100644
--- a/apps/web/src/components/dashboard/WidgetContainer.tsx
+++ b/apps/web/src/components/dashboard/WidgetContainer.tsx
@@ -4,31 +4,54 @@ import { motion } from "framer-motion";
 
 interface WidgetContainerProps {
   title: string;
+  description?: string;
   onRemove: () => void;
   children: React.ReactNode;
   isDragging?: boolean;
 }
 
-export function WidgetContainer({ title, onRemove, children, isDragging }: WidgetContainerProps) {
+export function WidgetContainer({ title, description, onRemove, children, isDragging }: WidgetContainerProps) {
   return (
     <motion.div
       initial={{ opacity: 0, y: 16 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.35, ease: "easeOut" }}
-      className={`flex flex-col h-full bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden transition-colors duration-200 ${
-        isDragging ? "shadow-lg border-brand-300" : "hover:border-brand-200 dark:hover:border-brand-800"
+      className={`flex flex-col h-full rounded-xl border overflow-hidden transition-all duration-200 ${
+        isDragging
+          ? "shadow-xl border-brand-400 dark:border-brand-500 scale-[1.01] ring-2 ring-brand-400/30"
+          : "bg-white dark:bg-gray-900 border-gray-200/80 dark:border-gray-700/60 shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600"
       }`}
     >
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-2.5 border-b border-gray-100 bg-gray-50/50 shrink-0 cursor-grab active:cursor-grabbing widget-drag-handle">
-        <span className="text-sm font-semibold text-gray-700 truncate">{title}</span>
+      {/* Header — clean, no background separation */}
+      <div className="flex items-center justify-between px-4 pt-3.5 pb-2 shrink-0 cursor-grab active:cursor-grabbing widget-drag-handle group">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            {/* Drag grip dots */}
+            <svg
+              className="w-3.5 h-5 text-gray-300 dark:text-gray-600 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+              viewBox="0 0 14 20"
+              fill="currentColor"
+            >
+              <circle cx="4" cy="4" r="1.5" />
+              <circle cx="10" cy="4" r="1.5" />
+              <circle cx="4" cy="10" r="1.5" />
+              <circle cx="10" cy="10" r="1.5" />
+              <circle cx="4" cy="16" r="1.5" />
+              <circle cx="10" cy="16" r="1.5" />
+            </svg>
+            <span className="text-sm font-semibold text-gray-800 dark:text-gray-100 truncate">{title}</span>
+          </div>
+          {description && (
+            <p className="text-[11px] text-gray-400 dark:text-gray-500 truncate mt-0.5 ml-[22px]">{description}</p>
+          )}
+        </div>
         <button
           type="button"
           onClick={(e) => {
             e.stopPropagation();
             onRemove();
           }}
-          className="ml-2 p-1 text-gray-400 hover:text-gray-700 hover:bg-gray-100 rounded transition-colors shrink-0"
+          className="ml-2 p-1.5 text-gray-300 dark:text-gray-600 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg transition-colors shrink-0 opacity-0 group-hover:opacity-100"
           title="Remove widget"
         >
           <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -37,6 +60,9 @@ export function WidgetContainer({ title, onRemove, children, isDragging }: Widge
         </button>
       </div>
 
+      {/* Subtle separator */}
+      <div className="mx-4 border-t border-gray-100 dark:border-gray-800" />
+
       {/* Body */}
       <div className="flex-1 overflow-auto p-4">{children}</div>
     </motion.div>
diff --git a/apps/web/src/components/dashboard/WidgetFilterBar.tsx b/apps/web/src/components/dashboard/WidgetFilterBar.tsx
new file mode 100644
index 0000000..6eba3cf
--- /dev/null
+++ b/apps/web/src/components/dashboard/WidgetFilterBar.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { useMemo } from "react";
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+export interface WidgetFilter {
+  type: "search" | "select" | "toggle";
+  key: string;
+  label?: string;
+  placeholder?: string;
+  options?: { value: string; label: string }[];
+}
+
+interface WidgetFilterBarProps {
+  filters: WidgetFilter[];
+  values: Record<string, unknown>;
+  onChange: (update: Record<string, unknown>) => void;
+}
+
+// ─── Component ──────────────────────────────────────────────────────────────
+
+export function WidgetFilterBar({ filters, values, onChange }: WidgetFilterBarProps) {
+  const hasActiveFilters = useMemo(() => {
+    return filters.some((f) => {
+      const v = values[f.key];
+      if (f.type === "toggle") return v === true;
+      return typeof v === "string" && v.length > 0;
+    });
+  }, [filters, values]);
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5 px-1 pb-2">
+      {filters.map((filter) => {
+        switch (filter.type) {
+          case "search":
+            return (
+              <div key={filter.key} className="relative">
+                <svg
+                  className="absolute left-1.5 top-1/2 -translate-y-1/2 w-3 h-3 text-gray-400 dark:text-gray-500 pointer-events-none"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
+                </svg>
+                <input
+                  type="text"
+                  value={(values[filter.key] as string) ?? ""}
+                  onChange={(e) => onChange({ [filter.key]: e.target.value })}
+                  placeholder={filter.placeholder ?? "Search..."}
+                  className="pl-6 pr-2 py-1 w-32 text-[11px] border border-gray-200 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-brand-500 focus:border-brand-500"
+                />
+              </div>
+            );
+
+          case "select":
+            return (
+              <select
+                key={filter.key}
+                value={(values[filter.key] as string) ?? ""}
+                onChange={(e) => onChange({ [filter.key]: e.target.value })}
+                className="py-1 px-1.5 text-[11px] border border-gray-200 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-brand-500 min-w-[80px] max-w-[130px]"
+                title={filter.label}
+              >
+                <option value="">{filter.label ?? "All"}</option>
+                {(filter.options ?? []).map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            );
+
+          case "toggle":
+            return (
+              <label
+                key={filter.key}
+                className="flex items-center gap-1 text-[11px] text-gray-600 dark:text-gray-400 cursor-pointer select-none"
+              >
+                <input
+                  type="checkbox"
+                  checked={!!values[filter.key]}
+                  onChange={(e) => onChange({ [filter.key]: e.target.checked })}
+                  className="rounded border-gray-300 dark:border-gray-600 text-brand-600 focus:ring-brand-500 h-3 w-3"
+                />
+                {filter.label}
+              </label>
+            );
+
+          default:
+            return null;
+        }
+      })}
+
+      {hasActiveFilters && (
+        <button
+          type="button"
+          onClick={() => {
+            const reset: Record<string, unknown> = {};
+            for (const f of filters) {
+              reset[f.key] = f.type === "toggle" ? false : "";
+            }
+            onChange(reset);
+          }}
+          className="text-[10px] text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 px-1"
+          title="Reset filters"
+        >
+          Reset
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/dashboard/widgets/BudgetForecastWidget.tsx b/apps/web/src/components/dashboard/widgets/BudgetForecastWidget.tsx
index d32c49d..844d38b 100644
--- a/apps/web/src/components/dashboard/widgets/BudgetForecastWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/BudgetForecastWidget.tsx
@@ -1,7 +1,11 @@
 "use client";
 
+import { useMemo } from "react";
 import { trpc } from "~/lib/trpc/client.js";
 import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { WidgetFilterBar, type WidgetFilter } from "~/components/dashboard/WidgetFilterBar.js";
+import { useWidgetFilterOptions } from "~/hooks/useWidgetFilterOptions.js";
 
 function colorClass(pct: number): string {
   if (pct > 90) return "bg-red-500";
@@ -15,12 +19,34 @@ function textColorClass(pct: number): string {
   return "text-green-700";
 }
 
-export function BudgetForecastWidget(_props: WidgetProps) {
+export function BudgetForecastWidget({ config, onConfigChange }: WidgetProps) {
+  const { clients } = useWidgetFilterOptions();
+
+  const filters = useMemo<WidgetFilter[]>(
+    () => [
+      { type: "search", key: "search", placeholder: "Search project..." },
+      { type: "select", key: "clientId", label: "Client", options: clients },
+    ],
+    [clients],
+  );
+
   const { data, isLoading } = trpc.dashboard.getBudgetForecast.useQuery(
     undefined,
     { staleTime: 60_000, placeholderData: (prev) => prev },
   );
 
+  const search = ((config.search as string) ?? "").toLowerCase();
+  const clientId = (config.clientId as string) ?? "";
+
+  const rows = useMemo(() => {
+    const all = data ?? [];
+    return all.filter((r) => {
+      if (search && !r.projectName.toLowerCase().includes(search) && !r.shortCode.toLowerCase().includes(search)) return false;
+      if (clientId && r.clientId !== clientId) return false;
+      return true;
+    });
+  }, [data, search, clientId]);
+
   if (isLoading && !data) {
     return (
       <div className="flex flex-col gap-1 pt-1">
@@ -35,59 +61,71 @@ export function BudgetForecastWidget(_props: WidgetProps) {
     );
   }
 
-  const rows = data ?? [];
-
   if (rows.length === 0) {
     return (
-      <div className="flex items-center justify-center h-full text-sm text-gray-400">
-        No active projects with budgets.
+      <div className="flex flex-col h-full">
+        <WidgetFilterBar filters={filters} values={config} onChange={onConfigChange ?? (() => {})} />
+        <div className="flex items-center justify-center flex-1 text-sm text-gray-400">
+          No active projects with budgets.
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="overflow-auto h-full">
-      <table className="w-full text-xs">
-        <thead className="bg-gray-50 sticky top-0">
-          <tr>
-            <th className="px-3 py-2 text-left font-medium text-gray-500">Project</th>
-            <th className="px-3 py-2 text-left font-medium text-gray-500">Budget Usage</th>
-            <th className="px-3 py-2 text-right font-medium text-gray-500">Burn/mo</th>
-            <th className="px-3 py-2 text-right font-medium text-gray-500">Exhaustion</th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-gray-100">
-          {rows.map((row) => (
-            <tr key={row.shortCode} className="hover:bg-gray-50">
-              <td className="px-3 py-2 font-medium text-gray-900 max-w-[140px] truncate">
-                <span className="font-mono text-gray-500 mr-1">{row.shortCode}</span>
-                {row.projectName}
-              </td>
-              <td className="px-3 py-2">
-                <div className="flex items-center gap-2">
-                  <div className="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
-                    <div
-                      className={`h-full rounded-full transition-all ${colorClass(row.pctUsed)}`}
-                      style={{ width: `${Math.min(row.pctUsed, 100)}%` }}
-                    />
-                  </div>
-                  <span className={`text-[11px] font-semibold tabular-nums w-10 text-right ${textColorClass(row.pctUsed)}`}>
-                    {row.pctUsed}%
-                  </span>
-                </div>
-              </td>
-              <td className="px-3 py-2 text-right text-gray-700 tabular-nums">
-                {row.burnRate > 0
-                  ? `${(row.burnRate / 100).toLocaleString("de-DE", { maximumFractionDigits: 0 })} \u20AC`
-                  : "\u2014"}
-              </td>
-              <td className="px-3 py-2 text-right text-gray-500 tabular-nums">
-                {row.estimatedExhaustionDate ?? "\u2014"}
-              </td>
+    <div className="flex flex-col h-full overflow-hidden">
+      <WidgetFilterBar filters={filters} values={config} onChange={onConfigChange ?? (() => {})} />
+      <div className="overflow-auto flex-1">
+        <table className="w-full text-xs">
+          <thead className="bg-gray-50 dark:bg-gray-800/50 sticky top-0">
+            <tr>
+              <th className="px-3 py-2 text-left font-medium text-gray-500 dark:text-gray-400">
+                Project <InfoTooltip content="Active projects with a defined budget" />
+              </th>
+              <th className="px-3 py-2 text-left font-medium text-gray-500 dark:text-gray-400">
+                Budget Usage <InfoTooltip content="Percentage of total budget consumed by current allocations" />
+              </th>
+              <th className="px-3 py-2 text-right font-medium text-gray-500 dark:text-gray-400">
+                Burn/mo <InfoTooltip content="Monthly burn rate based on currently active allocations" />
+              </th>
+              <th className="px-3 py-2 text-right font-medium text-gray-500 dark:text-gray-400">
+                Exhaustion <InfoTooltip content="Projected date when budget will be fully consumed at the current burn rate" />
+              </th>
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+            {rows.map((row) => (
+              <tr key={row.shortCode} className="hover:bg-gray-50 dark:hover:bg-gray-800/30">
+                <td className="px-3 py-2 font-medium text-gray-900 dark:text-gray-100 max-w-[140px] truncate">
+                  <span className="font-mono text-gray-500 dark:text-gray-400 mr-1">{row.shortCode}</span>
+                  {row.projectName}
+                </td>
+                <td className="px-3 py-2">
+                  <div className="flex items-center gap-2">
+                    <div className="flex-1 h-2 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
+                      <div
+                        className={`h-full rounded-full transition-all ${colorClass(row.pctUsed)}`}
+                        style={{ width: `${Math.min(row.pctUsed, 100)}%` }}
+                      />
+                    </div>
+                    <span className={`text-[11px] font-semibold tabular-nums w-10 text-right ${textColorClass(row.pctUsed)}`}>
+                      {row.pctUsed}%
+                    </span>
+                  </div>
+                </td>
+                <td className="px-3 py-2 text-right text-gray-700 dark:text-gray-300 tabular-nums">
+                  {row.burnRate > 0
+                    ? `${(row.burnRate / 100).toLocaleString("de-DE", { maximumFractionDigits: 0 })} \u20AC`
+                    : "\u2014"}
+                </td>
+                <td className="px-3 py-2 text-right text-gray-500 dark:text-gray-400 tabular-nums">
+                  {row.estimatedExhaustionDate ?? "\u2014"}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/components/dashboard/widgets/ChargeabilityWidget.tsx b/apps/web/src/components/dashboard/widgets/ChargeabilityWidget.tsx
index c418e47..f1669fa 100644
--- a/apps/web/src/components/dashboard/widgets/ChargeabilityWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/ChargeabilityWidget.tsx
@@ -5,6 +5,8 @@ import { trpc } from "~/lib/trpc/client.js";
 import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { AnimatedNumber } from "~/components/ui/AnimatedNumber.js";
+import { WidgetFilterBar, type WidgetFilter } from "~/components/dashboard/WidgetFilterBar.js";
+import { useWidgetFilterOptions } from "~/hooks/useWidgetFilterOptions.js";
 
 function UtilizationBar({ percent }: { percent: number }) {
   const barColor =
@@ -71,9 +73,20 @@ function FilterDropdown({ label, children }: { label: string; children: ReactNod
   );
 }
 
-export function ChargeabilityWidget({ config: _config }: WidgetProps) {
-  const config = _config as { topN?: number; watchlistThreshold?: number };
-  const [includeProposed, setIncludeProposed] = useState(false);
+export function ChargeabilityWidget({ config: _config, onConfigChange }: WidgetProps) {
+  const config = _config as { topN?: number; watchlistThreshold?: number; chapter?: string; includeProposed?: boolean };
+  const { chapters } = useWidgetFilterOptions();
+
+  const widgetFilters = useMemo<WidgetFilter[]>(
+    () => [
+      { type: "select", key: "chapter", label: "Chapter", options: chapters },
+      { type: "toggle", key: "includeProposed", label: "Include Proposed" },
+    ],
+    [chapters],
+  );
+
+  const includeProposed = !!config.includeProposed;
+  const chapterFilter = (config.chapter as string) ?? "";
   const [showDeparted, setShowDeparted] = useState(false);
   const [selectedCountryIds, setSelectedCountryIds] = useState<string[]>([]);
   const [topSort, setTopSort] = useState<TopSortKey>("actual");
@@ -132,6 +145,23 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
     setWatchVisibleCount(batchSize);
   }, [batchSize, includeProposed, selectedCountryIds, showDeparted]);
 
+  // These useMemo hooks MUST be before any early return to respect Rules of Hooks
+  const rawTop = data?.top ?? [];
+  const rawWatch = data?.watchlist ?? [];
+  const month = (data?.month as string) ?? "";
+
+  const filteredTop = useMemo(() => {
+    const arr = rawTop as ChargeabilityRow[];
+    if (!chapterFilter) return arr;
+    return arr.filter((r) => r.chapter === chapterFilter);
+  }, [rawTop, chapterFilter]);
+
+  const filteredWatch = useMemo(() => {
+    const arr = rawWatch as ChargeabilityRow[];
+    if (!chapterFilter) return arr;
+    return arr.filter((r) => r.chapter === chapterFilter);
+  }, [rawWatch, chapterFilter]);
+
   if (isLoading) {
     return (
       <div className="flex flex-col gap-3 pt-1">
@@ -158,11 +188,7 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
     );
   }
 
-  const rawTop = data?.top ?? [];
-  const rawWatch = data?.watchlist ?? [];
-  const month = (data?.month as string) ?? "";
-
-  const top = ([...rawTop] as ChargeabilityRow[]).sort((a, b) => {
+  const top = ([...filteredTop]).sort((a, b) => {
     const mult = topDir === "asc" ? 1 : -1;
     switch (topSort) {
       case "name":
@@ -176,7 +202,7 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
     }
   });
 
-  const watchlist = ([...rawWatch] as ChargeabilityRow[]).sort((a, b) => {
+  const watchlist = ([...filteredWatch]).sort((a, b) => {
     const mult = watchDir === "asc" ? 1 : -1;
     switch (watchSort) {
       case "name":
@@ -233,9 +259,10 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
 
   return (
     <div className="h-full flex flex-col gap-2 overflow-hidden">
-      {month && (
-        <div className="px-1 flex-shrink-0 flex flex-col gap-2">
-          <div className="flex items-center justify-between gap-3">
+      <div className="px-1 flex-shrink-0 flex flex-col gap-2">
+        <WidgetFilterBar filters={widgetFilters} values={_config} onChange={onConfigChange ?? (() => {})} />
+        <div className="flex items-center justify-between gap-3">
+          {month && (
             <p className="text-xs text-gray-400 flex items-center gap-1">
               Period: {month}
               <InfoTooltip
@@ -243,66 +270,56 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
                 width="w-72"
               />
             </p>
-            <label className="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-900/70 dark:text-gray-300">
-              <input
-                type="checkbox"
-                checked={includeProposed}
-                onChange={(event) => setIncludeProposed(event.target.checked)}
-                className="rounded border-gray-300"
-              />
-              Include proposed
-              <InfoTooltip content="When enabled, PROPOSED bookings and imported TBD planning rows are also counted toward chargeability." />
-            </label>
-          </div>
-          <div className="flex flex-wrap items-center gap-2">
-            <label className="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-900/70 dark:text-gray-300">
-              <input
-                type="checkbox"
-                checked={showDeparted}
-                onChange={(event) => setShowDeparted(event.target.checked)}
-                className="rounded border-gray-300"
-              />
-              Show departed
-              <InfoTooltip content="When enabled, resources who have left the company are included in the lists." />
-            </label>
-            <FilterDropdown label={selectedCountryLabel}>
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <p className="text-xs font-medium text-gray-600">Countries</p>
-                  {selectedCountryIds.length > 0 ? (
-                    <button
-                      type="button"
-                      onClick={() => setSelectedCountryIds([])}
-                      className="text-[11px] text-brand-600 hover:text-brand-700"
-                    >
-                      Clear
-                    </button>
-                  ) : null}
-                </div>
-                <p className="text-[11px] text-gray-400">
-                  Empty selection means all countries are included.
-                </p>
-                <div className="max-h-48 space-y-1 overflow-y-auto pr-1">
-                  {countries.map((country) => (
-                    <label
-                      key={country.id}
-                      className="flex items-center gap-2 text-xs text-gray-700"
-                    >
-                      <input
-                        type="checkbox"
-                        checked={selectedCountryIds.includes(country.id)}
-                        onChange={(event) => toggleCountry(country.id, event.target.checked)}
-                        className="rounded border-gray-300"
-                      />
-                      <span>{country.name}</span>
-                    </label>
-                  ))}
-                </div>
-              </div>
-            </FilterDropdown>
-          </div>
+          )}
         </div>
-      )}
+        <div className="flex flex-wrap items-center gap-2">
+          <label className="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-900/70 dark:text-gray-300">
+            <input
+              type="checkbox"
+              checked={showDeparted}
+              onChange={(event) => setShowDeparted(event.target.checked)}
+              className="rounded border-gray-300"
+            />
+            Show departed
+            <InfoTooltip content="When enabled, resources who have left the company are included in the lists." />
+          </label>
+          <FilterDropdown label={selectedCountryLabel}>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <p className="text-xs font-medium text-gray-600">Countries</p>
+                {selectedCountryIds.length > 0 ? (
+                  <button
+                    type="button"
+                    onClick={() => setSelectedCountryIds([])}
+                    className="text-[11px] text-brand-600 hover:text-brand-700"
+                  >
+                    Clear
+                  </button>
+                ) : null}
+              </div>
+              <p className="text-[11px] text-gray-400">
+                Empty selection means all countries are included.
+              </p>
+              <div className="max-h-48 space-y-1 overflow-y-auto pr-1">
+                {countries.map((country) => (
+                  <label
+                    key={country.id}
+                    className="flex items-center gap-2 text-xs text-gray-700"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selectedCountryIds.includes(country.id)}
+                      onChange={(event) => toggleCountry(country.id, event.target.checked)}
+                      className="rounded border-gray-300"
+                    />
+                    <span>{country.name}</span>
+                  </label>
+                ))}
+              </div>
+            </div>
+          </FilterDropdown>
+        </div>
+      </div>
 
       {/* Top list */}
       <section
diff --git a/apps/web/src/components/dashboard/widgets/ProjectHealthWidget.tsx b/apps/web/src/components/dashboard/widgets/ProjectHealthWidget.tsx
index fc29df1..ec0efae 100644
--- a/apps/web/src/components/dashboard/widgets/ProjectHealthWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/ProjectHealthWidget.tsx
@@ -1,7 +1,13 @@
 "use client";
 
+import { useMemo } from "react";
+import Link from "next/link";
 import { trpc } from "~/lib/trpc/client.js";
 import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { ShoringBadge } from "~/components/projects/ShoringIndicator.js";
+import { WidgetFilterBar, type WidgetFilter } from "~/components/dashboard/WidgetFilterBar.js";
+import { useWidgetFilterOptions } from "~/hooks/useWidgetFilterOptions.js";
 
 function healthDot(value: number): string {
   if (value >= 70) return "bg-green-500";
@@ -10,17 +16,39 @@ function healthDot(value: number): string {
 }
 
 function scoreBadge(score: number): string {
-  if (score >= 70) return "bg-green-100 text-green-700";
-  if (score >= 40) return "bg-amber-100 text-amber-700";
-  return "bg-red-100 text-red-700";
+  if (score >= 70) return "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300";
+  if (score >= 40) return "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300";
+  return "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300";
 }
 
-export function ProjectHealthWidget(_props: WidgetProps) {
+export function ProjectHealthWidget({ config, onConfigChange }: WidgetProps) {
+  const { clients } = useWidgetFilterOptions();
+
+  const filters = useMemo<WidgetFilter[]>(
+    () => [
+      { type: "search", key: "search", placeholder: "Search project..." },
+      { type: "select", key: "clientId", label: "Client", options: clients },
+    ],
+    [clients],
+  );
+
   const { data, isLoading } = trpc.dashboard.getProjectHealth.useQuery(
     undefined,
     { staleTime: 60_000, placeholderData: (prev) => prev },
   );
 
+  const search = ((config.search as string) ?? "").toLowerCase();
+  const clientId = (config.clientId as string) ?? "";
+
+  const rows = useMemo(() => {
+    const all = data ?? [];
+    return all.filter((r) => {
+      if (search && !r.projectName.toLowerCase().includes(search) && !r.shortCode.toLowerCase().includes(search)) return false;
+      if (clientId && r.clientId !== clientId) return false;
+      return true;
+    });
+  }, [data, search, clientId]);
+
   if (isLoading && !data) {
     return (
       <div className="flex flex-col gap-1 pt-1">
@@ -40,62 +68,78 @@ export function ProjectHealthWidget(_props: WidgetProps) {
     );
   }
 
-  const rows = data ?? [];
-
   if (rows.length === 0) {
     return (
-      <div className="flex items-center justify-center h-full text-sm text-gray-400">
-        No active projects found.
+      <div className="flex flex-col h-full">
+        <WidgetFilterBar filters={filters} values={config} onChange={onConfigChange ?? (() => {})} />
+        <div className="flex items-center justify-center flex-1 text-sm text-gray-400">
+          No active projects found.
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="overflow-auto h-full">
-      <table className="w-full text-xs">
-        <thead className="bg-gray-50 sticky top-0">
-          <tr>
-            <th className="px-3 py-2 text-left font-medium text-gray-500">Project</th>
-            <th className="px-3 py-2 text-center font-medium text-gray-500" title="Budget / Staffing / Timeline">
-              B / S / T
-            </th>
-            <th className="px-3 py-2 text-right font-medium text-gray-500">Score</th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-gray-100">
-          {rows.map((row) => (
-            <tr key={row.shortCode} className="hover:bg-gray-50">
-              <td className="px-3 py-2 font-medium text-gray-900 max-w-[160px] truncate">
-                <span className="font-mono text-gray-500 mr-1">{row.shortCode}</span>
-                {row.projectName}
-              </td>
-              <td className="px-3 py-2">
-                <div className="flex items-center justify-center gap-2">
-                  <span
-                    className={`inline-block w-3 h-3 rounded-full ${healthDot(row.budgetHealth)}`}
-                    title={`Budget: ${row.budgetHealth}%`}
-                  />
-                  <span
-                    className={`inline-block w-3 h-3 rounded-full ${healthDot(row.staffingHealth)}`}
-                    title={`Staffing: ${row.staffingHealth}%`}
-                  />
-                  <span
-                    className={`inline-block w-3 h-3 rounded-full ${healthDot(row.timelineHealth)}`}
-                    title={`Timeline: ${row.timelineHealth}%`}
-                  />
-                </div>
-              </td>
-              <td className="px-3 py-2 text-right">
-                <span
-                  className={`inline-block px-2 py-0.5 rounded-full font-semibold tabular-nums ${scoreBadge(row.compositeScore)}`}
-                >
-                  {row.compositeScore}
-                </span>
-              </td>
+    <div className="flex flex-col h-full overflow-hidden">
+      <WidgetFilterBar filters={filters} values={config} onChange={onConfigChange ?? (() => {})} />
+      <div className="overflow-auto flex-1">
+        <table className="w-full text-xs">
+          <thead className="bg-gray-50 dark:bg-gray-800/50 sticky top-0">
+            <tr>
+              <th className="px-3 py-2 text-left font-medium text-gray-500 dark:text-gray-400">
+                Project <InfoTooltip content="Active projects scored across three health dimensions" />
+              </th>
+              <th className="px-3 py-2 text-center font-medium text-gray-500 dark:text-gray-400">
+                B / S / T <InfoTooltip content="Budget health (spent vs budget), Staffing health (filled vs total demands), Timeline health (within end date)" />
+              </th>
+              <th className="px-3 py-2 text-center font-medium text-gray-500 dark:text-gray-400">
+                Shoring <InfoTooltip content="Offshore staffing ratio: percentage of hours from non-onshore resources. Color indicates threshold status." />
+              </th>
+              <th className="px-3 py-2 text-right font-medium text-gray-500 dark:text-gray-400">
+                Score <InfoTooltip content="Composite score: average of Budget, Staffing, and Timeline health (0-100)" />
+              </th>
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+            {rows.map((row) => (
+              <tr key={row.shortCode} className="hover:bg-gray-50 dark:hover:bg-gray-800/30">
+                <td className="px-3 py-2 font-medium text-gray-900 dark:text-gray-100 max-w-[160px] truncate">
+                  <Link href={`/projects/${(row as any).id}`} className="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">
+                    <span className="font-mono text-gray-500 dark:text-gray-400 mr-1">{row.shortCode}</span>
+                    {row.projectName}
+                  </Link>
+                </td>
+                <td className="px-3 py-2">
+                  <div className="flex items-center justify-center gap-2">
+                    <span
+                      className={`inline-block w-3 h-3 rounded-full ${healthDot(row.budgetHealth)}`}
+                      title={`Budget: ${row.budgetHealth}%`}
+                    />
+                    <span
+                      className={`inline-block w-3 h-3 rounded-full ${healthDot(row.staffingHealth)}`}
+                      title={`Staffing: ${row.staffingHealth}%`}
+                    />
+                    <span
+                      className={`inline-block w-3 h-3 rounded-full ${healthDot(row.timelineHealth)}`}
+                      title={`Timeline: ${row.timelineHealth}%`}
+                    />
+                  </div>
+                </td>
+                <td className="px-3 py-2 text-center">
+                  <ShoringBadge projectId={(row as any).id} />
+                </td>
+                <td className="px-3 py-2 text-right">
+                  <span
+                    className={`inline-block px-2 py-0.5 rounded-full font-semibold tabular-nums ${scoreBadge(row.compositeScore)}`}
+                  >
+                    {row.compositeScore}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/components/dashboard/widgets/SkillGapWidget.tsx b/apps/web/src/components/dashboard/widgets/SkillGapWidget.tsx
index 035ad05..1061497 100644
--- a/apps/web/src/components/dashboard/widgets/SkillGapWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/SkillGapWidget.tsx
@@ -1,14 +1,29 @@
 "use client";
 
+import { useMemo } from "react";
 import { trpc } from "~/lib/trpc/client.js";
 import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { WidgetFilterBar, type WidgetFilter } from "~/components/dashboard/WidgetFilterBar.js";
 
-export function SkillGapWidget(_props: WidgetProps) {
+const FILTERS: WidgetFilter[] = [
+  { type: "search", key: "search", placeholder: "Search skill..." },
+];
+
+export function SkillGapWidget({ config, onConfigChange }: WidgetProps) {
   const { data, isLoading } = trpc.dashboard.getSkillGaps.useQuery(
     undefined,
     { staleTime: 60_000, placeholderData: (prev) => prev },
   );
 
+  const search = ((config.search as string) ?? "").toLowerCase();
+
+  const rows = useMemo(() => {
+    const all = data ?? [];
+    if (!search) return all;
+    return all.filter((r) => r.skill.toLowerCase().includes(search));
+  }, [data, search]);
+
   if (isLoading && !data) {
     return (
       <div className="flex flex-col gap-1 pt-1">
@@ -24,71 +39,83 @@ export function SkillGapWidget(_props: WidgetProps) {
     );
   }
 
-  const rows = data ?? [];
-
   if (rows.length === 0) {
     return (
-      <div className="flex items-center justify-center h-full text-sm text-gray-400">
-        No skill gaps detected.
+      <div className="flex flex-col h-full">
+        <WidgetFilterBar filters={FILTERS} values={config} onChange={onConfigChange ?? (() => {})} />
+        <div className="flex items-center justify-center flex-1 text-sm text-gray-400">
+          No skill gaps detected.
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="overflow-auto h-full">
-      <table className="w-full text-xs">
-        <thead className="bg-gray-50 sticky top-0">
-          <tr>
-            <th className="px-3 py-2 text-left font-medium text-gray-500">Skill</th>
-            <th className="px-3 py-2 text-right font-medium text-gray-500">Demand</th>
-            <th className="px-3 py-2 text-right font-medium text-gray-500">Supply</th>
-            <th className="px-3 py-2 text-center font-medium text-gray-500">Gap</th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-gray-100">
-          {rows.map((row) => {
-            const isShortage = row.gap < 0;
-            const isSurplus = row.gap > 0;
-            return (
-              <tr key={row.skill} className="hover:bg-gray-50">
-                <td className="px-3 py-2 font-medium text-gray-900 max-w-[180px] truncate">
-                  {row.skill}
-                </td>
-                <td className="px-3 py-2 text-right text-gray-700 tabular-nums">
-                  {row.demand}
-                </td>
-                <td className="px-3 py-2 text-right text-gray-700 tabular-nums">
-                  {row.supply}
-                </td>
-                <td className="px-3 py-2 text-center">
-                  <span className="inline-flex items-center gap-1.5">
-                    <span
-                      className={`inline-block w-2 h-2 rounded-full ${
-                        isShortage
-                          ? "bg-red-500"
-                          : isSurplus
-                            ? "bg-green-500"
-                            : "bg-gray-400"
-                      }`}
-                    />
-                    <span
-                      className={`font-semibold tabular-nums ${
-                        isShortage
-                          ? "text-red-700"
-                          : isSurplus
-                            ? "text-green-700"
-                            : "text-gray-500"
-                      }`}
-                    >
-                      {row.gap > 0 ? `+${row.gap}` : row.gap}
+    <div className="flex flex-col h-full overflow-hidden">
+      <WidgetFilterBar filters={FILTERS} values={config} onChange={onConfigChange ?? (() => {})} />
+      <div className="overflow-auto flex-1">
+        <table className="w-full text-xs">
+          <thead className="bg-gray-50 dark:bg-gray-800/50 sticky top-0">
+            <tr>
+              <th className="px-3 py-2 text-left font-medium text-gray-500 dark:text-gray-400">
+                Skill <InfoTooltip content="Skills required by open demand positions" />
+              </th>
+              <th className="px-3 py-2 text-right font-medium text-gray-500 dark:text-gray-400">
+                Demand <InfoTooltip content="Number of unfilled demand requirements needing this skill" />
+              </th>
+              <th className="px-3 py-2 text-right font-medium text-gray-500 dark:text-gray-400">
+                Supply <InfoTooltip content="Number of active resources with this skill at proficiency 3+" />
+              </th>
+              <th className="px-3 py-2 text-center font-medium text-gray-500 dark:text-gray-400">
+                Gap <InfoTooltip content="Supply minus Demand: negative (red) = shortage, positive (green) = surplus" />
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+            {rows.map((row) => {
+              const isShortage = row.gap < 0;
+              const isSurplus = row.gap > 0;
+              return (
+                <tr key={row.skill} className="hover:bg-gray-50 dark:hover:bg-gray-800/30">
+                  <td className="px-3 py-2 font-medium text-gray-900 dark:text-gray-100 max-w-[180px] truncate">
+                    {row.skill}
+                  </td>
+                  <td className="px-3 py-2 text-right text-gray-700 dark:text-gray-300 tabular-nums">
+                    {row.demand}
+                  </td>
+                  <td className="px-3 py-2 text-right text-gray-700 dark:text-gray-300 tabular-nums">
+                    {row.supply}
+                  </td>
+                  <td className="px-3 py-2 text-center">
+                    <span className="inline-flex items-center gap-1.5">
+                      <span
+                        className={`inline-block w-2 h-2 rounded-full ${
+                          isShortage
+                            ? "bg-red-500"
+                            : isSurplus
+                              ? "bg-green-500"
+                              : "bg-gray-400"
+                        }`}
+                      />
+                      <span
+                        className={`font-semibold tabular-nums ${
+                          isShortage
+                            ? "text-red-700"
+                            : isSurplus
+                              ? "text-green-700"
+                              : "text-gray-500"
+                        }`}
+                      >
+                        {row.gap > 0 ? `+${row.gap}` : row.gap}
+                      </span>
                     </span>
-                  </span>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/components/dashboard/widgets/StatCardsWidget.tsx b/apps/web/src/components/dashboard/widgets/StatCardsWidget.tsx
index ba097f4..beab32b 100644
--- a/apps/web/src/components/dashboard/widgets/StatCardsWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/StatCardsWidget.tsx
@@ -59,11 +59,13 @@ function StatCard({
             </ProgressRing>
           </div>
         ) : (
-          <span className="mt-2 text-2xl font-semibold text-gray-900 dark:text-gray-50">
-            <AnimatedNumber value={value} suffix={suffix} />
-          </span>
+          <div className="mt-2">
+            <span className="text-2xl font-semibold text-gray-900 dark:text-gray-50">
+              <AnimatedNumber value={value} suffix={suffix} />
+            </span>
+          </div>
         )}
-        {sub && <span className="mt-1 text-xs text-gray-500 dark:text-gray-400">{sub}</span>}
+        {sub && <p className="mt-0.5 text-xs text-gray-400 dark:text-gray-500">{sub}</p>}
       </div>
     </FadeIn>
   );
diff --git a/apps/web/src/components/dashboard/widgets/TopValueWidget.tsx b/apps/web/src/components/dashboard/widgets/TopValueWidget.tsx
index 395091c..241a634 100644
--- a/apps/web/src/components/dashboard/widgets/TopValueWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/TopValueWidget.tsx
@@ -1,14 +1,24 @@
 "use client";
 
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { trpc } from "~/lib/trpc/client.js";
 import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { WidgetFilterBar, type WidgetFilter } from "~/components/dashboard/WidgetFilterBar.js";
+import { useWidgetFilterOptions } from "~/hooks/useWidgetFilterOptions.js";
 
 type SortKey = "eid" | "name" | "chapter" | "score" | "lcr";
 
-export function TopValueWidget({ config }: WidgetProps) {
+export function TopValueWidget({ config, onConfigChange }: WidgetProps) {
   const limit = (config.limit as number) || 10;
+  const { chapters } = useWidgetFilterOptions();
+
+  const filters = useMemo<WidgetFilter[]>(
+    () => [
+      { type: "select", key: "chapter", label: "Chapter", options: chapters },
+    ],
+    [chapters],
+  );
 
   const [sortKey, setSortKey] = useState<SortKey>("score");
   const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
@@ -23,6 +33,28 @@ export function TopValueWidget({ config }: WidgetProps) {
     { staleTime: 60_000, placeholderData: (prev) => prev },
   );
 
+  const chapter = (config.chapter as string) ?? "";
+
+  const list = useMemo(() => {
+    const all = (data ?? []) as Array<{ id: string; eid: string; displayName: string; chapter: string | null; lcrCents: number; valueScore: number | null }>;
+    if (!chapter) return all;
+    return all.filter((r) => r.chapter === chapter);
+  }, [data, chapter]);
+
+  const sorted = useMemo(() => {
+    return [...list].sort((a, b) => {
+      const mult = sortDir === "asc" ? 1 : -1;
+      switch (sortKey) {
+        case "eid": return mult * a.eid.localeCompare(b.eid);
+        case "name": return mult * a.displayName.localeCompare(b.displayName);
+        case "chapter": return mult * (a.chapter ?? "").localeCompare(b.chapter ?? "");
+        case "score": return mult * ((a.valueScore ?? 0) - (b.valueScore ?? 0));
+        case "lcr": return mult * (a.lcrCents - b.lcrCents);
+        default: return 0;
+      }
+    });
+  }, [list, sortKey, sortDir]);
+
   if (isLoading) {
     return (
       <div className="flex flex-col gap-1 pt-1">
@@ -40,122 +72,114 @@ export function TopValueWidget({ config }: WidgetProps) {
     );
   }
 
-  const list = (data ?? []) as Array<{ id: string; eid: string; displayName: string; chapter: string | null; lcrCents: number; valueScore: number | null }>;
-
-  if (list.length === 0) {
+  if (sorted.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center h-full text-center py-8 text-gray-400 text-sm">
-        <p>No scores computed yet or you lack access.</p>
-        <p className="text-xs mt-1">Admins can recompute scores in Settings.</p>
+      <div className="flex flex-col h-full">
+        <WidgetFilterBar filters={filters} values={config} onChange={onConfigChange ?? (() => {})} />
+        <div className="flex flex-col items-center justify-center flex-1 text-center py-8 text-gray-400 text-sm">
+          <p>No scores computed yet or you lack access.</p>
+          <p className="text-xs mt-1">Admins can recompute scores in Settings.</p>
+        </div>
       </div>
     );
   }
 
-  const sorted = [...list].sort((a, b) => {
-    const mult = sortDir === "asc" ? 1 : -1;
-    switch (sortKey) {
-      case "eid": return mult * a.eid.localeCompare(b.eid);
-      case "name": return mult * a.displayName.localeCompare(b.displayName);
-      case "chapter": return mult * (a.chapter ?? "").localeCompare(b.chapter ?? "");
-      case "score": return mult * ((a.valueScore ?? 0) - (b.valueScore ?? 0));
-      case "lcr": return mult * (a.lcrCents - b.lcrCents);
-      default: return 0;
-    }
-  });
-
   function Ind({ k }: { k: SortKey }) {
     return sortKey === k
-      ? <span className="text-[10px] ml-0.5">{sortDir === "asc" ? "▲" : "▼"}</span>
-      : <span className="text-[10px] ml-0.5 text-gray-300">⇅</span>;
+      ? <span className="text-[10px] ml-0.5">{sortDir === "asc" ? "\u25B2" : "\u25BC"}</span>
+      : <span className="text-[10px] ml-0.5 text-gray-300">{"\u21C5"}</span>;
   }
 
   return (
-    <div className="overflow-auto h-full">
-      <table className="w-full text-xs">
-        <thead className="bg-gray-50 sticky top-0">
-          <tr>
-            <th className="px-3 py-2 text-left font-medium text-gray-500 w-8">
-              <span className="inline-flex items-center">
-                #
-                <InfoTooltip content="Rank position based on the current sort order." />
-              </span>
-            </th>
-            <th className="px-3 py-2 text-left font-medium text-gray-500">
-              <span className="inline-flex items-center">
-                <button type="button" onClick={() => toggleSort("eid")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
-                  EID<Ind k="eid" />
-                </button>
-                <InfoTooltip content="Employee ID — unique identifier for each resource." />
-              </span>
-            </th>
-            <th className="px-3 py-2 text-left font-medium text-gray-500">
-              <span className="inline-flex items-center">
-                <button type="button" onClick={() => toggleSort("name")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
-                  Name<Ind k="name" />
-                </button>
-                <InfoTooltip content="Display name of the resource." />
-              </span>
-            </th>
-            <th className="px-3 py-2 text-left font-medium text-gray-500">
-              <span className="inline-flex items-center">
-                <button type="button" onClick={() => toggleSort("chapter")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
-                  Chapter<Ind k="chapter" />
-                </button>
-                <InfoTooltip content="Organizational chapter (team/department) the resource belongs to." />
-              </span>
-            </th>
-            <th className="px-3 py-2 text-right font-medium text-gray-500">
-              <span className="inline-flex items-center justify-end">
-                <button type="button" onClick={() => toggleSort("score")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
-                  Score<Ind k="score" />
-                </button>
-                <InfoTooltip
-                  content={
-                    <span>
-                      Composite price/quality score 0–100.<br />
-                      Weights: Skill Depth 30% · Cost Efficiency 25% · Skill Breadth 15% · Chargeability 15% · Experience 15%.<br />
-                      Recompute in Admin → Settings.
-                    </span>
-                  }
-                  width="w-72"
-                />
-              </span>
-            </th>
-            <th className="px-3 py-2 text-right font-medium text-gray-500">
-              <span className="inline-flex items-center justify-end">
-                <button type="button" onClick={() => toggleSort("lcr")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
-                  LCR (€)<Ind k="lcr" />
-                </button>
-                <InfoTooltip content="Labour Cost Rate — hourly cost in EUR. Lower LCR = better cost efficiency score." />
-              </span>
-            </th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-gray-100">
-          {sorted.map((r, i) => (
-            <tr key={r.id} className="hover:bg-gray-50">
-              <td className="px-3 py-2 text-gray-400 font-medium">{i + 1}</td>
-              <td className="px-3 py-2 font-mono text-gray-600">{r.eid}</td>
-              <td className="px-3 py-2 font-medium text-gray-900">{r.displayName}</td>
-              <td className="px-3 py-2 text-gray-500">{r.chapter ?? "—"}</td>
-              <td className="px-3 py-2 text-right">
-                <span
-                  className={`inline-block px-2 py-0.5 rounded-full font-semibold ${
-                    (r.valueScore ?? 0) >= 70
-                      ? "bg-green-100 text-green-700"
-                      : (r.valueScore ?? 0) >= 40
-                      ? "bg-amber-100 text-amber-700"
-                      : "bg-red-100 text-red-700"
-                  }`}
-                >
-                  {r.valueScore ?? "—"}
+    <div className="flex flex-col h-full overflow-hidden">
+      <WidgetFilterBar filters={filters} values={config} onChange={onConfigChange ?? (() => {})} />
+      <div className="overflow-auto flex-1">
+        <table className="w-full text-xs">
+          <thead className="bg-gray-50 sticky top-0">
+            <tr>
+              <th className="px-3 py-2 text-left font-medium text-gray-500 w-8">
+                <span className="inline-flex items-center">
+                  #
+                  <InfoTooltip content="Rank position based on the current sort order." />
                 </span>
-              </td>
-              <td className="px-3 py-2 text-right text-gray-700">{(r.lcrCents / 100).toFixed(0)}</td>
+              </th>
+              <th className="px-3 py-2 text-left font-medium text-gray-500">
+                <span className="inline-flex items-center">
+                  <button type="button" onClick={() => toggleSort("eid")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
+                    EID<Ind k="eid" />
+                  </button>
+                  <InfoTooltip content="Employee ID — unique identifier for each resource." />
+                </span>
+              </th>
+              <th className="px-3 py-2 text-left font-medium text-gray-500">
+                <span className="inline-flex items-center">
+                  <button type="button" onClick={() => toggleSort("name")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
+                    Name<Ind k="name" />
+                  </button>
+                  <InfoTooltip content="Display name of the resource." />
+                </span>
+              </th>
+              <th className="px-3 py-2 text-left font-medium text-gray-500">
+                <span className="inline-flex items-center">
+                  <button type="button" onClick={() => toggleSort("chapter")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
+                    Chapter<Ind k="chapter" />
+                  </button>
+                  <InfoTooltip content="Organizational chapter (team/department) the resource belongs to." />
+                </span>
+              </th>
+              <th className="px-3 py-2 text-right font-medium text-gray-500">
+                <span className="inline-flex items-center justify-end">
+                  <button type="button" onClick={() => toggleSort("score")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
+                    Score<Ind k="score" />
+                  </button>
+                  <InfoTooltip
+                    content={
+                      <span>
+                        Composite price/quality score 0–100.<br />
+                        Weights: Skill Depth 30% · Cost Efficiency 25% · Skill Breadth 15% · Chargeability 15% · Experience 15%.<br />
+                        Recompute in Admin → Settings.
+                      </span>
+                    }
+                    width="w-72"
+                  />
+                </span>
+              </th>
+              <th className="px-3 py-2 text-right font-medium text-gray-500">
+                <span className="inline-flex items-center justify-end">
+                  <button type="button" onClick={() => toggleSort("lcr")} className="inline-flex items-center hover:text-gray-700 cursor-pointer">
+                    LCR ({"\u20AC"})<Ind k="lcr" />
+                  </button>
+                  <InfoTooltip content="Labour Cost Rate — hourly cost in EUR. Lower LCR = better cost efficiency score." />
+                </span>
+              </th>
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody className="divide-y divide-gray-100">
+            {sorted.map((r, i) => (
+              <tr key={r.id} className="hover:bg-gray-50">
+                <td className="px-3 py-2 text-gray-400 font-medium">{i + 1}</td>
+                <td className="px-3 py-2 font-mono text-gray-600">{r.eid}</td>
+                <td className="px-3 py-2 font-medium text-gray-900">{r.displayName}</td>
+                <td className="px-3 py-2 text-gray-500">{r.chapter ?? "\u2014"}</td>
+                <td className="px-3 py-2 text-right">
+                  <span
+                    className={`inline-block px-2 py-0.5 rounded-full font-semibold ${
+                      (r.valueScore ?? 0) >= 70
+                        ? "bg-green-100 text-green-700"
+                        : (r.valueScore ?? 0) >= 40
+                        ? "bg-amber-100 text-amber-700"
+                        : "bg-red-100 text-red-700"
+                    }`}
+                  >
+                    {r.valueScore ?? "\u2014"}
+                  </span>
+                </td>
+                <td className="px-3 py-2 text-right text-gray-700">{(r.lcrCents / 100).toFixed(0)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/components/estimates/ApplyEffortRules.tsx b/apps/web/src/components/estimates/ApplyEffortRules.tsx
index 982a4c7..7d1209b 100644
--- a/apps/web/src/components/estimates/ApplyEffortRules.tsx
+++ b/apps/web/src/components/estimates/ApplyEffortRules.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { clsx } from "clsx";
+import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
 import { trpc } from "~/lib/trpc/client.js";
 
 interface ApplyEffortRulesProps {
@@ -17,6 +18,7 @@ export function ApplyEffortRules({ estimateId, canEdit, onApplied }: ApplyEffort
   const [selectedRuleSetId, setSelectedRuleSetId] = useState<string>("");
   const [mode, setMode] = useState<"replace" | "append">("replace");
   const [showPreview, setShowPreview] = useState(false);
+  const [confirmApply, setConfirmApply] = useState(false);
 
   const previewQuery = trpc.effortRule.preview.useQuery(
     { estimateId, ruleSetId: selectedRuleSetId },
@@ -106,10 +108,7 @@ export function ApplyEffortRules({ estimateId, canEdit, onApplied }: ApplyEffort
         <button
           onClick={() => {
             if (!selectedRuleSetId) return;
-            const action = mode === "replace" ? "replace all existing demand lines" : "append new demand lines";
-            if (confirm(`This will ${action}. Continue?`)) {
-              applyMutation.mutate({ estimateId, ruleSetId: selectedRuleSetId, mode });
-            }
+            setConfirmApply(true);
           }}
           disabled={!selectedRuleSetId || applyMutation.isPending}
           className="rounded-2xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50"
@@ -210,6 +209,19 @@ export function ApplyEffortRules({ estimateId, canEdit, onApplied }: ApplyEffort
       {showPreview && previewQuery.isLoading && (
         <p className="mt-3 text-sm text-gray-400">Computing preview...</p>
       )}
+
+      {confirmApply && (
+        <ConfirmDialog
+          title="Apply effort rules"
+          message={`This will ${mode === "replace" ? "replace all existing demand lines" : "append new demand lines"}. Continue?`}
+          confirmLabel="Apply"
+          onConfirm={() => {
+            applyMutation.mutate({ estimateId, ruleSetId: selectedRuleSetId, mode });
+            setConfirmApply(false);
+          }}
+          onCancel={() => setConfirmApply(false)}
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/web/src/components/estimates/ApplyExperienceMultipliers.tsx b/apps/web/src/components/estimates/ApplyExperienceMultipliers.tsx
index db68f99..163f909 100644
--- a/apps/web/src/components/estimates/ApplyExperienceMultipliers.tsx
+++ b/apps/web/src/components/estimates/ApplyExperienceMultipliers.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { clsx } from "clsx";
+import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { formatCents } from "~/lib/format.js";
 import { trpc } from "~/lib/trpc/client.js";
@@ -18,6 +19,7 @@ export function ApplyExperienceMultipliers({ estimateId, canEdit, onApplied }: A
 
   const [selectedSetId, setSelectedSetId] = useState<string>("");
   const [showPreview, setShowPreview] = useState(false);
+  const [confirmApply, setConfirmApply] = useState(false);
 
   const previewQuery = trpc.experienceMultiplier.preview.useQuery(
     { estimateId, multiplierSetId: selectedSetId },
@@ -96,9 +98,7 @@ export function ApplyExperienceMultipliers({ estimateId, canEdit, onApplied }: A
         <button
           onClick={() => {
             if (!selectedSetId) return;
-            if (confirm("This will update cost/bill rates and hours on matching demand lines. Continue?")) {
-              applyMutation.mutate({ estimateId, multiplierSetId: selectedSetId });
-            }
+            setConfirmApply(true);
           }}
           disabled={!selectedSetId || applyMutation.isPending}
           className="rounded-2xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50"
@@ -204,6 +204,19 @@ export function ApplyExperienceMultipliers({ estimateId, canEdit, onApplied }: A
       {showPreview && previewQuery.isLoading && (
         <p className="mt-3 text-sm text-gray-400">Computing preview...</p>
       )}
+
+      {confirmApply && (
+        <ConfirmDialog
+          title="Apply experience multipliers"
+          message="This will update cost/bill rates and hours on matching demand lines. Continue?"
+          confirmLabel="Apply"
+          onConfirm={() => {
+            applyMutation.mutate({ estimateId, multiplierSetId: selectedSetId });
+            setConfirmApply(false);
+          }}
+          onCancel={() => setConfirmApply(false)}
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/web/src/components/estimates/EstimateWizard.tsx b/apps/web/src/components/estimates/EstimateWizard.tsx
index 6e50f93..987bdf0 100644
--- a/apps/web/src/components/estimates/EstimateWizard.tsx
+++ b/apps/web/src/components/estimates/EstimateWizard.tsx
@@ -441,7 +441,7 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
               <p className="text-xs font-semibold uppercase tracking-[0.24em] text-brand-600">Estimate Wizard</p>
               <h2 className="mt-2 text-2xl font-semibold text-gray-900">Create a connected estimate</h2>
               <p className="mt-1 text-sm text-gray-500">
-                Rates, resource snapshots, and project linkage are pulled from existing plANARCHY data.
+                Rates, resource snapshots, and project linkage are pulled from existing CapaKraken data.
               </p>
             </div>
             <button
@@ -490,7 +490,7 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
                       <input value={name} onChange={(event) => setName(event.target.value)} className={INPUT_CLS} placeholder="CGI Breakdown Q2 2026" />
                     </div>
                     <div>
-                      <label className={LABEL_CLS}>Linked Project <InfoTooltip content="Link to an existing plANARCHY project. This enables automatic date-based phasing and planning handoff." /></label>
+                      <label className={LABEL_CLS}>Linked Project <InfoTooltip content="Link to an existing CapaKraken project. This enables automatic date-based phasing and planning handoff." /></label>
                       <ProjectCombobox value={projectId} onChange={setProjectId} placeholder="Link to project" />
                     </div>
                     <div>
@@ -640,7 +640,7 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
                         <div key={line.id} className="rounded-3xl border border-gray-100 p-4">
                           <div className="grid gap-4 lg:grid-cols-2">
                             <div>
-                              <label className={LABEL_CLS}>Resource <InfoTooltip content="Link to a live plANARCHY resource. Auto-fills rates, chapter, and role." /></label>
+                              <label className={LABEL_CLS}>Resource <InfoTooltip content="Link to a live CapaKraken resource. Auto-fills rates, chapter, and role." /></label>
                               <ResourceCombobox value={line.resourceId} onChange={(resourceId) => applyResource(resourceId, line.id)} placeholder="Search resource" />
                             </div>
                             <div>
diff --git a/apps/web/src/components/estimates/editors/DemandLineEditor.tsx b/apps/web/src/components/estimates/editors/DemandLineEditor.tsx
index eae26ef..03f86dc 100644
--- a/apps/web/src/components/estimates/editors/DemandLineEditor.tsx
+++ b/apps/web/src/components/estimates/editors/DemandLineEditor.tsx
@@ -336,7 +336,7 @@ export function DemandLineEditor({
 
             <div className="mb-4 grid gap-4 md:grid-cols-2">
               <label>
-                <span className={LABEL_CLS}>Linked resource <InfoTooltip content="Link to a plANARCHY resource. Live-linked rates refresh automatically; manual overrides are persisted." /></span>
+                <span className={LABEL_CLS}>Linked resource <InfoTooltip content="Link to a CapaKraken resource. Live-linked rates refresh automatically; manual overrides are persisted." /></span>
                 <select
                   className={INPUT_CLS}
                   value={line.resourceId ?? ""}
@@ -353,7 +353,7 @@ export function DemandLineEditor({
               <div className="rounded-2xl bg-gray-50 px-4 py-3">
                 <p className="text-xs uppercase tracking-wide text-gray-400">Snapshot behavior</p>
                 <p className="mt-1 text-sm text-gray-700">
-                  Linked resources refresh from live plANARCHY rates when a rate is set to live mode. Manual overrides are persisted on the demand line.
+                  Linked resources refresh from live CapaKraken rates when a rate is set to live mode. Manual overrides are persisted on the demand line.
                 </p>
               </div>
             </div>
diff --git a/apps/web/src/components/layout/AppShell.tsx b/apps/web/src/components/layout/AppShell.tsx
index 3a76601..3605515 100644
--- a/apps/web/src/components/layout/AppShell.tsx
+++ b/apps/web/src/components/layout/AppShell.tsx
@@ -76,9 +76,48 @@ function NotificationsIcon() {
 function BroadcastIcon() {
   return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" /></svg>;
 }
+function ActivityLogIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>;
+}
 function AdminIcon() {
   return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 8a4 4 0 100 8 4 4 0 000-8zm8 4l-2.1.7a7.9 7.9 0 01-.6 1.5l1 2-2.1 2.1-2-1a7.9 7.9 0 01-1.5.6L12 20l-1.7-2.1a7.9 7.9 0 01-1.5-.6l-2 1-2.1-2.1 1-2a7.9 7.9 0 01-.6-1.5L4 12l2.1-1.7a7.9 7.9 0 01.6-1.5l-1-2 2.1-2.1 2 1a7.9 7.9 0 011.5-.6L12 4l1.7 2.1a7.9 7.9 0 011.5.6l2-1 2.1 2.1-1 2a7.9 7.9 0 01.6 1.5L20 12z" /></svg>;
 }
+function BlueprintIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>;
+}
+function ClientsIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>;
+}
+function CountryIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>;
+}
+function OrgUnitIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" /></svg>;
+}
+function CategoryIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" /></svg>;
+}
+function LevelsIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M3 4h18M3 8h12M3 12h8M3 16h14M3 20h10" /></svg>;
+}
+function ImportIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>;
+}
+function CalcRulesIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>;
+}
+function UsersIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>;
+}
+function SystemRolesIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>;
+}
+function SettingsIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>;
+}
+function WebhooksIcon() {
+  return <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>;
+}
 
 function CollapseIcon({ collapsed }: { collapsed: boolean }) {
   return (
@@ -144,8 +183,7 @@ const navSections: NavSection[] = [
   {
     label: "Analytics",
     items: [
-      { href: "/analytics/skills", label: "Skills Analytics", icon: <SkillsIcon />, roles: ["ADMIN", "MANAGER", "CONTROLLER", "VIEWER"] },
-      { href: "/analytics/skill-marketplace", label: "Skill Marketplace", icon: <MarketplaceIcon />, roles: ["ADMIN", "MANAGER", "CONTROLLER"] },
+      { href: "/analytics/skills", label: "Skills Hub", icon: <SkillsIcon />, roles: ["ADMIN", "MANAGER", "CONTROLLER", "VIEWER"] },
       { href: "/reports/chargeability", label: "Chargeability", icon: <ChargeabilityIcon />, roles: ["ADMIN", "MANAGER", "CONTROLLER"] },
       { href: "/reports/builder", label: "Report Builder", icon: <ReportBuilderIcon />, roles: ["ADMIN", "MANAGER", "CONTROLLER"] },
       { href: "/analytics/computation-graph", label: "Computation Graph", icon: <GraphIcon />, roles: ["ADMIN", "MANAGER", "CONTROLLER"] },
@@ -170,25 +208,26 @@ function isSubGroup(entry: AdminEntry): entry is AdminSubGroup {
 }
 
 const adminNavEntries: AdminEntry[] = [
-  { href: "/admin/blueprints", label: "Blueprints", icon: <AdminIcon /> },
-  { href: "/admin/clients", label: "Clients", icon: <AdminIcon /> },
+  { href: "/admin/blueprints", label: "Blueprints", icon: <BlueprintIcon /> },
+  { href: "/admin/clients", label: "Clients", icon: <ClientsIcon /> },
   {
     label: "ACN-Orga",
     collapsed: true,
     items: [
-      { href: "/admin/countries", label: "Countries", icon: <AdminIcon /> },
-      { href: "/admin/org-units", label: "Org Units", icon: <AdminIcon /> },
-      { href: "/admin/utilization-categories", label: "Util. Categories", icon: <AdminIcon /> },
-      { href: "/admin/management-levels", label: "Mgmt Levels", icon: <AdminIcon /> },
+      { href: "/admin/countries", label: "Countries", icon: <CountryIcon /> },
+      { href: "/admin/org-units", label: "Org Units", icon: <OrgUnitIcon /> },
+      { href: "/admin/utilization-categories", label: "Util. Categories", icon: <CategoryIcon /> },
+      { href: "/admin/management-levels", label: "Mgmt Levels", icon: <LevelsIcon /> },
+      { href: "/admin/imports", label: "Data Import", icon: <ImportIcon /> },
     ],
   },
-  { href: "/admin/calculation-rules", label: "Calc. Rules", icon: <AdminIcon /> },
-  { href: "/admin/users", label: "Users", icon: <AdminIcon /> },
-  { href: "/admin/system-roles", label: "System Roles", icon: <AdminIcon /> },
-  { href: "/admin/settings", label: "Settings", icon: <AdminIcon /> },
-  { href: "/admin/skill-import", label: "Skill Import", icon: <AdminIcon /> },
+  { href: "/admin/calculation-rules", label: "Calc. Rules", icon: <CalcRulesIcon /> },
+  { href: "/admin/users", label: "Users", icon: <UsersIcon /> },
+  { href: "/admin/system-roles", label: "System Roles", icon: <SystemRolesIcon /> },
+  { href: "/admin/settings", label: "Settings", icon: <SettingsIcon /> },
   { href: "/admin/notifications", label: "Broadcasts", icon: <BroadcastIcon /> },
-  { href: "/admin/webhooks", label: "Webhooks", icon: <AdminIcon /> },
+  { href: "/admin/webhooks", label: "Webhooks", icon: <WebhooksIcon /> },
+  { href: "/admin/activity-log", label: "Activity Log", icon: <ActivityLogIcon /> },
 ];
 
 /**
@@ -378,9 +417,9 @@ function SidebarContent({
           {!sidebarCollapsed && (
             <div className="overflow-hidden">
               <h1 className="font-display text-xl font-semibold text-gray-900 dark:text-gray-50">
-                Pl<span className="text-brand-600">anarchy</span>
+                Capa<span className="text-brand-600">Kraken</span>
               </h1>
-              <p className="text-xs uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400">Resource Planning</p>
+              <p className="text-xs uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400">Resource & Capacity Planning</p>
             </div>
           )}
         </div>
@@ -849,7 +888,7 @@ export function AppShell({ children, userRole = "USER" }: { children: React.Reac
               <HamburgerIcon />
             </button>
             <span className="ml-3 font-display text-sm font-semibold text-gray-900 dark:text-gray-50">
-              Pl<span className="text-brand-600">anarchy</span>
+              Capa<span className="text-brand-600">Kraken</span>
             </span>
           </div>
           <PageTransition>{children}</PageTransition>
diff --git a/apps/web/src/components/layout/InstallPrompt.tsx b/apps/web/src/components/layout/InstallPrompt.tsx
index 251124d..af95c86 100644
--- a/apps/web/src/components/layout/InstallPrompt.tsx
+++ b/apps/web/src/components/layout/InstallPrompt.tsx
@@ -74,7 +74,7 @@ export function InstallPrompt() {
         </div>
         <div className="min-w-0 flex-1">
           <p className="text-sm font-medium text-gray-900 dark:text-gray-50">
-            Install Planarchy
+            Install CapaKraken
           </p>
           <p className="text-xs text-gray-500 dark:text-gray-400">
             Add to home screen for quick access
diff --git a/apps/web/src/components/notifications/NotificationCenterClient.tsx b/apps/web/src/components/notifications/NotificationCenterClient.tsx
index b5f7431..23bc455 100644
--- a/apps/web/src/components/notifications/NotificationCenterClient.tsx
+++ b/apps/web/src/components/notifications/NotificationCenterClient.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { useSearchParams } from "next/navigation";
+import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
 import { trpc } from "~/lib/trpc/client.js";
 import { usePermissions } from "~/hooks/usePermissions.js";
 import { TaskCard } from "./TaskCard.js";
@@ -31,6 +32,7 @@ export function NotificationCenterClient() {
   const [activeTab, setActiveTab] = useState<TabKey>(initialTab);
   const { canEdit } = usePermissions();
   const [showTaskModal, setShowTaskModal] = useState(false);
+  const [confirmDeleteReminder, setConfirmDeleteReminder] = useState<string | null>(null);
   const [reminderModal, setReminderModal] = useState<{
     open: boolean;
     reminder: {
@@ -374,11 +376,7 @@ export function NotificationCenterClient() {
                         </button>
                         <button
                           type="button"
-                          onClick={() => {
-                            if (window.confirm("Delete this reminder?")) {
-                              deleteReminder.mutate({ id: r.id });
-                            }
-                          }}
+                          onClick={() => setConfirmDeleteReminder(r.id)}
                           disabled={deleteReminder.isPending}
                           className="p-1 text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
                           title="Delete"
@@ -413,6 +411,20 @@ export function NotificationCenterClient() {
           onSuccess={() => setShowTaskModal(false)}
         />
       )}
+
+      {confirmDeleteReminder && (
+        <ConfirmDialog
+          title="Delete reminder"
+          message="Are you sure you want to delete this reminder?"
+          confirmLabel="Delete"
+          variant="danger"
+          onConfirm={() => {
+            deleteReminder.mutate({ id: confirmDeleteReminder });
+            setConfirmDeleteReminder(null);
+          }}
+          onCancel={() => setConfirmDeleteReminder(null)}
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/web/src/components/notifications/ReminderModal.tsx b/apps/web/src/components/notifications/ReminderModal.tsx
index 69293bd..f844bce 100644
--- a/apps/web/src/components/notifications/ReminderModal.tsx
+++ b/apps/web/src/components/notifications/ReminderModal.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import { useRef, useState } from "react";
+import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
+import { DateInput } from "~/components/ui/DateInput.js";
 import { useFocusTrap } from "~/hooks/useFocusTrap.js";
 import { trpc } from "~/lib/trpc/client.js";
-import { DateInput } from "~/components/ui/DateInput.js";
 
 const RECURRENCE_OPTIONS = [
   { value: "", label: "None" },
@@ -50,6 +51,7 @@ export function ReminderModal({ reminder, onClose, onSuccess }: ReminderModalPro
   const [recurrence, setRecurrence] = useState(reminder?.recurrence ?? "");
   const [link, setLink] = useState(reminder?.link ?? "");
   const [serverError, setServerError] = useState<string | null>(null);
+  const [confirmDelete, setConfirmDelete] = useState(false);
 
   const panelRef = useRef<HTMLDivElement>(null);
   useFocusTrap(panelRef, true);
@@ -128,8 +130,7 @@ export function ReminderModal({ reminder, onClose, onSuccess }: ReminderModalPro
 
   function handleDelete() {
     if (!reminder) return;
-    if (!window.confirm("Delete this reminder?")) return;
-    deleteMutation.mutate({ id: reminder.id });
+    setConfirmDelete(true);
   }
 
   const inputClass =
@@ -303,6 +304,20 @@ export function ReminderModal({ reminder, onClose, onSuccess }: ReminderModalPro
           </div>
         </form>
       </div>
+
+      {confirmDelete && reminder && (
+        <ConfirmDialog
+          title="Delete reminder"
+          message="Are you sure you want to delete this reminder?"
+          confirmLabel="Delete"
+          variant="danger"
+          onConfirm={() => {
+            deleteMutation.mutate({ id: reminder.id });
+            setConfirmDelete(false);
+          }}
+          onCancel={() => setConfirmDelete(false)}
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/web/src/components/projects/CoverArtSection.tsx b/apps/web/src/components/projects/CoverArtSection.tsx
index a5a4142..4917bb9 100644
--- a/apps/web/src/components/projects/CoverArtSection.tsx
+++ b/apps/web/src/components/projects/CoverArtSection.tsx
@@ -25,7 +25,7 @@ export function CoverArtSection({ projectId, coverImageUrl, coverFocusY = 50, pr
   const fileInputRef = useRef<HTMLInputElement>(null);
   const utils = trpc.useUtils();
 
-  const { data: dalleStatus } = trpc.project.isDalleConfigured.useQuery();
+  const { data: imageGenStatus } = trpc.project.isImageGenConfigured.useQuery();
   const generateMutation = trpc.project.generateCover.useMutation();
   const uploadMutation = trpc.project.uploadCover.useMutation();
   const removeMutation = trpc.project.removeCover.useMutation();
@@ -207,7 +207,7 @@ export function CoverArtSection({ projectId, coverImageUrl, coverFocusY = 50, pr
           )}
 
           {/* Generate with AI */}
-          {dalleStatus?.configured && (
+          {imageGenStatus?.configured && (
             <button
               type="button"
               onClick={() => {
diff --git a/apps/web/src/components/projects/ProjectModal.tsx b/apps/web/src/components/projects/ProjectModal.tsx
index 90d63fc..1f4cca2 100644
--- a/apps/web/src/components/projects/ProjectModal.tsx
+++ b/apps/web/src/components/projects/ProjectModal.tsx
@@ -50,6 +50,7 @@ interface FormState {
   color: string;
   utilizationCategoryId: string;
   clientId: string;
+  shoringThreshold: string;
 }
 
 function getDefaultForm(): FormState {
@@ -68,6 +69,7 @@ function getDefaultForm(): FormState {
     color: "",
     utilizationCategoryId: "",
     clientId: "",
+    shoringThreshold: "55",
   };
 }
 
@@ -86,6 +88,7 @@ function projectToForm(project: Project): FormState {
     color: (project as unknown as { color?: string | null }).color ?? "",
     utilizationCategoryId: (project as unknown as { utilizationCategoryId?: string | null }).utilizationCategoryId ?? "",
     clientId: (project as unknown as { clientId?: string | null }).clientId ?? "",
+    shoringThreshold: String((project as unknown as { shoringThreshold?: number | null }).shoringThreshold ?? 55),
   };
 }
 
@@ -204,10 +207,11 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
           startDate: new Date(form.startDate),
           endDate: new Date(form.endDate),
           status: form.status as unknown as ProjectStatus,
-          responsiblePerson: form.responsiblePerson.trim() || undefined,
+          responsiblePerson: form.responsiblePerson.trim(),
           ...(form.color ? { color: form.color } : {}),
           ...(form.utilizationCategoryId ? { utilizationCategoryId: form.utilizationCategoryId } : {}),
           ...(form.clientId ? { clientId: form.clientId } : {}),
+          shoringThreshold: Number(form.shoringThreshold),
         },
       });
     } else {
@@ -223,10 +227,11 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
         status: form.status as unknown as ProjectStatus,
         staffingReqs: [],
         dynamicFields: {},
-        responsiblePerson: form.responsiblePerson.trim() || undefined,
+        responsiblePerson: form.responsiblePerson.trim(),
         ...(form.color ? { color: form.color } : {}),
         ...(form.utilizationCategoryId ? { utilizationCategoryId: form.utilizationCategoryId } : {}),
         ...(form.clientId ? { clientId: form.clientId } : {}),
+        shoringThreshold: Number(form.shoringThreshold),
       });
     }
   }
@@ -441,7 +446,7 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
               <legend className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
                 Timeline &amp; Budget
               </legend>
-              <div className="grid grid-cols-3 gap-4">
+              <div className="grid grid-cols-4 gap-4">
                 <div>
                   <label className={labelClass} htmlFor="startDate">
                     Start Date
@@ -492,6 +497,22 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                     <p className="mt-1 text-xs text-red-600 dark:text-red-400">{errors.budgetEur}</p>
                   )}
                 </div>
+                <div>
+                  <label className={labelClass} htmlFor="shoringThreshold">
+                    Min Offshore %
+                    <InfoTooltip content="Minimum offshore staffing target (0-100). Green when met, red when below. Higher offshore = more cost-efficient. Default: 55%." />
+                  </label>
+                  <input
+                    id="shoringThreshold"
+                    type="number"
+                    min={0}
+                    max={100}
+                    value={form.shoringThreshold}
+                    onChange={(e) => setField("shoringThreshold", e.target.value)}
+                    placeholder="55"
+                    className={inputClass}
+                  />
+                </div>
               </div>
             </fieldset>
 
@@ -521,8 +542,8 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                 </div>
                 <div>
                   <label className={labelClass} htmlFor="responsiblePerson">
-                    Responsible Person
-                    <InfoTooltip content="Project lead or account manager responsible for this project." />
+                    Responsible Person <span className="text-red-500">*</span>
+                    <InfoTooltip content="Project lead or account manager responsible for this project. Required." />
                   </label>
                   <input
                     id="responsiblePerson"
@@ -530,6 +551,7 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
                     value={form.responsiblePerson}
                     onChange={(e) => setField("responsiblePerson", e.target.value)}
                     placeholder="Name or EID"
+                    required
                     className={inputClass}
                   />
                 </div>
diff --git a/apps/web/src/components/projects/ProjectWizard.tsx b/apps/web/src/components/projects/ProjectWizard.tsx
index e81b108..f754202 100644
--- a/apps/web/src/components/projects/ProjectWizard.tsx
+++ b/apps/web/src/components/projects/ProjectWizard.tsx
@@ -1089,7 +1089,7 @@ export function ProjectWizard({ open, onClose }: ProjectWizardProps) {
         endDate: new Date(state.endDate),
         staffingReqs: state.staffingReqs,
         status: state.saveAsDraft ? ProjectStatus.DRAFT : ProjectStatus.ACTIVE,
-        responsiblePerson: state.responsiblePerson.trim() || undefined,
+        responsiblePerson: state.responsiblePerson.trim(),
         blueprintId: state.blueprintId ?? undefined,
         dynamicFields: {},
       });
diff --git a/apps/web/src/components/projects/ShoringIndicator.tsx b/apps/web/src/components/projects/ShoringIndicator.tsx
new file mode 100644
index 0000000..14e9349
--- /dev/null
+++ b/apps/web/src/components/projects/ShoringIndicator.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import { useState } from "react";
+import { trpc } from "~/lib/trpc/client.js";
+
+// Stable country colors — deterministic from code
+const COUNTRY_COLORS: Record<string, string> = {
+  DE: "#3b82f6",
+  ES: "#f59e0b",
+  IN: "#10b981",
+  PL: "#ef4444",
+  PT: "#8b5cf6",
+  RO: "#ec4899",
+  CZ: "#06b6d4",
+  HU: "#f97316",
+  BG: "#14b8a6",
+  US: "#6366f1",
+  UK: "#a855f7",
+  FR: "#84cc16",
+  IT: "#e11d48",
+  UNKNOWN: "#9ca3af",
+};
+
+function getCountryColor(code: string): string {
+  if (COUNTRY_COLORS[code]) return COUNTRY_COLORS[code];
+  // Deterministic fallback based on char codes
+  let hash = 0;
+  for (let i = 0; i < code.length; i++) {
+    hash = code.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const hue = Math.abs(hash) % 360;
+  return `hsl(${hue}, 65%, 50%)`;
+}
+
+function getSeverity(offshoreRatio: number, threshold: number): "green" | "yellow" | "red" {
+  // Higher offshore = better (cost-efficient). Threshold is the MINIMUM target.
+  if (offshoreRatio >= threshold) return "green";       // Target met
+  if (offshoreRatio >= threshold - 10) return "yellow"; // Close to target
+  return "red";                                          // Too little offshore
+}
+
+const SEVERITY_BADGE: Record<string, string> = {
+  green: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
+  yellow: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300",
+  red: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
+};
+
+const SEVERITY_DOT: Record<string, string> = {
+  green: "bg-green-500",
+  yellow: "bg-yellow-500",
+  red: "bg-red-500",
+};
+
+// ─── Mini badge for list views ────────────────────────────────────────────────
+
+export function ShoringBadge({ projectId }: { projectId: string }) {
+  const { data, isLoading } = trpc.project.getShoringRatio.useQuery(
+    { projectId },
+    { staleTime: 60_000 },
+  );
+
+  if (isLoading) {
+    return <span className="inline-block h-4 w-12 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />;
+  }
+
+  if (!data || data.totalHours === 0) {
+    return <span className="text-xs text-gray-400 dark:text-gray-500">--</span>;
+  }
+
+  const severity = getSeverity(data.offshoreRatio, data.threshold);
+
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      <span className={`h-2 w-2 rounded-full ${SEVERITY_DOT[severity]}`} />
+      <span className="text-xs text-gray-700 dark:text-gray-300">{data.offshoreRatio}%</span>
+    </span>
+  );
+}
+
+// ─── Full indicator for detail views ──────────────────────────────────────────
+
+export function ShoringIndicator({ projectId }: { projectId: string }) {
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  const { data, isLoading } = trpc.project.getShoringRatio.useQuery(
+    { projectId },
+    { staleTime: 30_000 },
+  );
+
+  if (isLoading) {
+    return (
+      <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
+        <div className="space-y-3 animate-pulse">
+          <div className="h-4 w-32 rounded bg-gray-200 dark:bg-gray-700" />
+          <div className="h-6 w-full rounded bg-gray-200 dark:bg-gray-700" />
+          <div className="h-4 w-48 rounded bg-gray-200 dark:bg-gray-700" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!data || data.totalHours === 0) {
+    return (
+      <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
+        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
+          Nearshore Ratio
+        </h3>
+        <p className="text-sm text-gray-400 dark:text-gray-500">No assignments</p>
+      </div>
+    );
+  }
+
+  const severity = getSeverity(data.offshoreRatio, data.threshold);
+
+  // Build sorted country segments for the bar
+  const segments = Object.entries(data.byCountry)
+    .filter(([code]) => code !== "UNKNOWN")
+    .sort((a, b) => b[1].pct - a[1].pct);
+
+  if (data.byCountry["UNKNOWN"]) {
+    segments.push(["UNKNOWN", data.byCountry["UNKNOWN"]]);
+  }
+
+  return (
+    <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          Nearshore Ratio
+        </h3>
+        <span className={`inline-block rounded-full px-2.5 py-0.5 text-xs font-medium ${SEVERITY_BADGE[severity]}`}>
+          {data.offshoreRatio}% offshore
+          {severity === "green" ? " — Target met" : severity === "red" ? ` — Below ${data.threshold}% target` : ""}
+        </span>
+      </div>
+
+      {/* Stacked horizontal bar */}
+      <div
+        className="relative h-7 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800 cursor-pointer"
+        onMouseEnter={() => setTooltipOpen(true)}
+        onMouseLeave={() => setTooltipOpen(false)}
+      >
+        <div className="absolute inset-0 flex">
+          {segments.map(([code, info]) => (
+            <div
+              key={code}
+              className="h-full flex items-center justify-center text-[10px] font-semibold text-white transition-all duration-500 first:rounded-l-full last:rounded-r-full"
+              style={{
+                width: `${info.pct}%`,
+                backgroundColor: getCountryColor(code),
+                minWidth: info.pct > 0 ? "2px" : "0",
+              }}
+            >
+              {info.pct > 10 ? `${code} ${info.pct}%` : ""}
+            </div>
+          ))}
+        </div>
+
+        {/* Tooltip overlay */}
+        {tooltipOpen && (
+          <div className="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 z-10 min-w-[200px] rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-3 shadow-xl text-xs">
+            <div className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
+              Country Breakdown
+            </div>
+            <div className="space-y-1.5">
+              {segments.map(([code, info]) => (
+                <div key={code} className="flex items-center justify-between gap-3">
+                  <div className="flex items-center gap-2">
+                    <span
+                      className="inline-block h-2.5 w-2.5 rounded-full flex-shrink-0"
+                      style={{ backgroundColor: getCountryColor(code) }}
+                    />
+                    <span className="text-gray-700 dark:text-gray-300">
+                      {code === "UNKNOWN" ? "Unknown" : code}
+                    </span>
+                  </div>
+                  <div className="text-gray-500 dark:text-gray-400 tabular-nums">
+                    {info.pct}% ({info.resourceCount} {info.resourceCount === 1 ? "person" : "people"})
+                  </div>
+                </div>
+              ))}
+            </div>
+            {data.unknownCount > 0 && (
+              <div className="mt-2 pt-2 border-t border-gray-100 dark:border-gray-800 text-gray-400 dark:text-gray-500">
+                {data.unknownCount} resource{data.unknownCount !== 1 ? "s" : ""} without country
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Summary text */}
+      <div className="mt-2 flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
+        <span>{data.onshoreRatio}% onshore ({data.onshoreCountryCode})</span>
+        <span className="text-gray-300 dark:text-gray-600">|</span>
+        <span>{data.offshoreRatio}% offshore</span>
+        <span className="text-gray-300 dark:text-gray-600">|</span>
+        <span>Threshold: {data.threshold}%</span>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/reports/AllocationReport.tsx b/apps/web/src/components/reports/AllocationReport.tsx
index de74394..489e6c5 100644
--- a/apps/web/src/components/reports/AllocationReport.tsx
+++ b/apps/web/src/components/reports/AllocationReport.tsx
@@ -63,7 +63,7 @@ export function AllocationReport({ title, generatedAt, rows }: AllocationReportP
           ))}
         </View>
 
-        <Text style={styles.footer}>plANARCHY · Confidential · {rows.length} allocations</Text>
+        <Text style={styles.footer}>CapaKraken · Confidential · {rows.length} allocations</Text>
       </Page>
     </Document>
   );
diff --git a/apps/web/src/components/resources/SkillMatrixUpload.tsx b/apps/web/src/components/resources/SkillMatrixUpload.tsx
index 371018d..bc85412 100644
--- a/apps/web/src/components/resources/SkillMatrixUpload.tsx
+++ b/apps/web/src/components/resources/SkillMatrixUpload.tsx
@@ -169,7 +169,7 @@ export function SkillMatrixUpload({ resourceId, isOwner, onClose, onSuccess }: P
 
               {preview.matchedRoleName && (
                 <p className="text-xs text-gray-600">
-                  <span className="font-medium">Area of expertise</span> matched to plANARCHY role:{" "}
+                  <span className="font-medium">Area of expertise</span> matched to CapaKraken role:{" "}
                   <span className="font-semibold text-brand-700">{preview.matchedRoleName}</span>
                 </p>
               )}
diff --git a/apps/web/src/components/roles/RoleModal.tsx b/apps/web/src/components/roles/RoleModal.tsx
index d44bd41..41157fd 100644
--- a/apps/web/src/components/roles/RoleModal.tsx
+++ b/apps/web/src/components/roles/RoleModal.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useRef, useState } from "react";
+import { useState } from "react";
 import type { RoleWithResourceCount } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
-import { useFocusTrap } from "~/hooks/useFocusTrap.js";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 
 const PRESET_COLORS = [
@@ -33,9 +33,6 @@ export function RoleModal({ role, onClose, onSuccess }: RoleModalProps) {
   const [color, setColor] = useState(role?.color ?? PRESET_COLORS[0]!);
   const [serverError, setServerError] = useState<string | null>(null);
 
-  const panelRef = useRef<HTMLDivElement>(null);
-  useFocusTrap(panelRef, true);
-
   const utils = trpc.useUtils();
 
   const createMutation = trpc.role.create.useMutation({
@@ -82,19 +79,7 @@ export function RoleModal({ role, onClose, onSuccess }: RoleModalProps) {
   const labelClass = "app-label";
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/55 py-8 backdrop-blur-sm"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div
-        ref={panelRef}
-        className="mx-4 w-full max-w-md rounded-3xl border border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-gray-900"
-        onKeyDown={(e) => {
-          if (e.key === "Escape") onClose();
-        }}
-      >
+    <AnimatedModal open onClose={onClose} maxWidth="max-w-md">
         <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700">
           <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
             {isEditing ? "Edit Role" : "New Role"}
@@ -199,7 +184,6 @@ export function RoleModal({ role, onClose, onSuccess }: RoleModalProps) {
             </button>
           </div>
         </form>
-      </div>
-    </div>
+    </AnimatedModal>
   );
 }
diff --git a/apps/web/src/components/staffing/StaffingPanel.tsx b/apps/web/src/components/staffing/StaffingPanel.tsx
index a20e12b..1598c69 100644
--- a/apps/web/src/components/staffing/StaffingPanel.tsx
+++ b/apps/web/src/components/staffing/StaffingPanel.tsx
@@ -75,7 +75,7 @@ export function StaffingPanel() {
         <div className="app-surface max-w-xl p-4">
           <p className="text-sm font-medium text-gray-900 dark:text-gray-100">How scoring works</p>
           <p className="mt-1 text-sm text-gray-500">
-            plANARCHY blends skill fit, free capacity, cost, and current utilization. Add the must-have skills first, then narrow the date window to get cleaner results.
+            CapaKraken blends skill fit, free capacity, cost, and current utilization. Add the must-have skills first, then narrow the date window to get cleaner results.
           </p>
         </div>
       </div>
diff --git a/apps/web/src/components/timeline/TimelineProjectPanel.tsx b/apps/web/src/components/timeline/TimelineProjectPanel.tsx
index 2672834..e6caa68 100644
--- a/apps/web/src/components/timeline/TimelineProjectPanel.tsx
+++ b/apps/web/src/components/timeline/TimelineProjectPanel.tsx
@@ -137,47 +137,6 @@ type ProjectFlatRow =
 const EMPTY_DAY_METRICS: ProjectDayMetric[] = [];
 const SVG_XMLNS = "http://www.w3.org/2000/svg";
 
-function buildProjectRowGridBackground(dates: Date[], CELL_WIDTH: number, today: Date) {
-  const gradientLayers: string[] = [
-    `repeating-linear-gradient(to right, transparent 0, transparent ${Math.max(
-      CELL_WIDTH - 1,
-      0,
-    )}px, rgba(229, 231, 235, 1) ${Math.max(CELL_WIDTH - 1, 0)}px, rgba(229, 231, 235, 1) ${CELL_WIDTH}px)`,
-  ];
-
-  dates.forEach((date, index) => {
-    const left = index * CELL_WIDTH;
-    const right = left + CELL_WIDTH;
-    const isToday = date.toDateString() === today.toDateString();
-    const isSaturday = date.getDay() === 6;
-    const isSunday = date.getDay() === 0;
-
-    if (isSaturday) {
-      gradientLayers.push(
-        `linear-gradient(to right, transparent ${left}px, rgba(254, 243, 199, 0.4) ${left}px, rgba(254, 243, 199, 0.4) ${right}px, transparent ${right}px)`,
-      );
-    } else if (isSunday) {
-      gradientLayers.push(
-        `linear-gradient(to right, transparent ${left}px, rgba(243, 244, 246, 0.6) ${left}px, rgba(243, 244, 246, 0.6) ${right}px, transparent ${right}px)`,
-      );
-    }
-
-    if (isToday) {
-      gradientLayers.push(
-        `linear-gradient(to right, transparent ${left}px, rgba(110, 231, 183, 0.95) ${left}px, rgba(110, 231, 183, 0.95) ${Math.min(
-          left + 2,
-          right,
-        )}px, transparent ${Math.min(left + 2, right)}px)`,
-      );
-    }
-  });
-
-  return {
-    backgroundImage: gradientLayers.join(", "),
-    backgroundRepeat: "no-repeat",
-  } as const;
-}
-
 // ─── Component ──────────────────────────────────────────────────────────────
 
 function TimelineProjectPanelInner({
@@ -432,11 +391,6 @@ function TimelineProjectPanelInner({
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalRowHeight = rowVirtualizer.getTotalSize();
 
-  const resourceRowGridStyle = useMemo(
-    () => buildProjectRowGridBackground(dates, CELL_WIDTH, today),
-    [CELL_WIDTH, dates, today],
-  );
-
   const resourcesWithVacations = useMemo(() => {
     const result = new Set<string>();
     for (const [resourceId, vacations] of vacationsByResource) {
@@ -713,7 +667,7 @@ function TimelineProjectPanelInner({
                 totalCanvasWidth,
                 toLeft,
                 toWidth,
-                resourceRowGridStyle,
+                gridLines,
                 onOpenDemandClick,
                 onAllocMouseDown,
                 onAllocTouchStart,
@@ -750,7 +704,6 @@ function TimelineProjectPanelInner({
                     width: totalCanvasWidth,
                     height: ROW_HEIGHT,
                     touchAction: "none",
-                    ...resourceRowGridStyle,
                   }}
                   onMouseDown={(e) => {
                     const rect = e.currentTarget.getBoundingClientRect();
@@ -776,6 +729,7 @@ function TimelineProjectPanelInner({
                   }}
                   onMouseLeave={clearHoverTooltips}
                 >
+                  {gridLines}
                   {renderProjectUtilOverlay(
                     projectRowMetrics.get(row.metricsKey) ?? EMPTY_DAY_METRICS,
                     CELL_WIDTH,
@@ -889,7 +843,7 @@ function renderOpenDemandRow(
   totalCanvasWidth: number,
   toLeft: (d: Date) => number,
   toWidth: (s: Date, e: Date) => number,
-  rowGridStyle: CSSProperties,
+  rowGridLines: React.ReactNode,
   _onOpenDemandClick: (demand: OpenDemandAssignment) => void,
   onAllocMouseDown: (e: React.MouseEvent, info: AllocMouseDownInfo) => void,
   onAllocTouchStart: (e: React.TouchEvent, info: AllocMouseDownInfo) => void,
@@ -934,8 +888,9 @@ function renderOpenDemandRow(
 
       <div
         className="relative overflow-hidden bg-amber-50 touch-none dark:bg-slate-950"
-        style={{ width: totalCanvasWidth, height: rowHeight, ...rowGridStyle }}
+        style={{ width: totalCanvasWidth, height: rowHeight }}
       >
+        {rowGridLines}
         <div className="pointer-events-none absolute inset-x-0 inset-y-0 border-y border-dashed border-amber-200/70 dark:border-amber-800/80" />
         <div className="pointer-events-none absolute inset-x-0 inset-y-1 rounded-md bg-amber-100/25 dark:bg-amber-950/35" />
         {openDemands.map((alloc) => {
diff --git a/apps/web/src/components/timeline/TimelineResourcePanel.tsx b/apps/web/src/components/timeline/TimelineResourcePanel.tsx
index c54b2db..4e3a175 100644
--- a/apps/web/src/components/timeline/TimelineResourcePanel.tsx
+++ b/apps/web/src/components/timeline/TimelineResourcePanel.tsx
@@ -141,6 +141,10 @@ function TimelineResourcePanelInner({
       orderType: string;
       hoursPerDay: number;
       responsiblePerson?: string | null;
+      role?: string | null;
+      status?: string;
+      startDate?: string;
+      endDate?: string;
     }[];
   } | null>(null);
 
@@ -295,6 +299,10 @@ function TimelineResourcePanelInner({
             orderType: string;
             hours: number;
             responsiblePerson?: string | null;
+            role?: string | null;
+            status?: string;
+            startDate?: string;
+            endDate?: string;
           }
         >();
         for (const alloc of a) {
@@ -314,6 +322,10 @@ function TimelineResourcePanelInner({
               hours: alloc.hoursPerDay,
               responsiblePerson:
                 (alloc.project as { responsiblePerson?: string | null }).responsiblePerson ?? null,
+              role: alloc.role ?? alloc.roleEntity?.name ?? null,
+              status: alloc.status,
+              startDate: new Date(alloc.startDate).toISOString().slice(0, 10),
+              endDate: new Date(alloc.endDate).toISOString().slice(0, 10),
             });
           }
         }
diff --git a/apps/web/src/components/timeline/TimelineToolbar.tsx b/apps/web/src/components/timeline/TimelineToolbar.tsx
index 3bbea95..d74d1c8 100644
--- a/apps/web/src/components/timeline/TimelineToolbar.tsx
+++ b/apps/web/src/components/timeline/TimelineToolbar.tsx
@@ -90,7 +90,7 @@ export function TimelineToolbar({
   }
 
   return (
-    <div className="app-toolbar flex flex-wrap items-center justify-between gap-3">
+    <div className="app-toolbar relative z-20 flex flex-wrap items-center justify-between gap-3">
       <div className="flex items-center gap-3">
         <ProjectCombobox
           value={filters.projectIds[0] ?? null}
diff --git a/apps/web/src/components/timeline/TimelineTooltip.tsx b/apps/web/src/components/timeline/TimelineTooltip.tsx
index 0b9a0f0..3281755 100644
--- a/apps/web/src/components/timeline/TimelineTooltip.tsx
+++ b/apps/web/src/components/timeline/TimelineTooltip.tsx
@@ -13,6 +13,10 @@ export type HeatmapHoverData = {
     orderType: string;
     hoursPerDay: number;
     responsiblePerson?: string | null;
+    role?: string | null;
+    status?: string;
+    startDate?: string;
+    endDate?: string;
   }[];
 };
 
@@ -81,10 +85,20 @@ export function TimelineTooltip({
                     {entry.projectName}
                   </div>
                   <div className="truncate text-[11px] text-gray-400">
-                    {entry.responsiblePerson
-                      ? `Lead: ${entry.responsiblePerson}`
-                      : entry.orderType}
+                    {[
+                      entry.role,
+                      entry.responsiblePerson ? `Lead: ${entry.responsiblePerson}` : null,
+                      entry.orderType,
+                    ].filter(Boolean).join(" · ")}
                   </div>
+                  {entry.startDate && entry.endDate && (
+                    <div className="text-[10px] text-gray-500">
+                      {entry.startDate} → {entry.endDate}
+                      {entry.status && entry.status !== "CONFIRMED" && (
+                        <span className="ml-1 uppercase text-amber-400">{entry.status}</span>
+                      )}
+                    </div>
+                  )}
                 </div>
                 <span className="whitespace-nowrap text-[11px] font-semibold text-gray-200">
                   {entry.hoursPerDay}h
@@ -146,10 +160,20 @@ export function TimelineTooltip({
                     {entry.projectName}
                   </div>
                   <div className="truncate text-[11px] text-gray-400">
-                    {entry.responsiblePerson
-                      ? `Lead: ${entry.responsiblePerson}`
-                      : entry.orderType}
+                    {[
+                      entry.role,
+                      entry.responsiblePerson ? `Lead: ${entry.responsiblePerson}` : null,
+                      entry.orderType,
+                    ].filter(Boolean).join(" · ")}
                   </div>
+                  {entry.startDate && entry.endDate && (
+                    <div className="text-[10px] text-gray-500">
+                      {entry.startDate} → {entry.endDate}
+                      {entry.status && entry.status !== "CONFIRMED" && (
+                        <span className="ml-1 uppercase text-amber-400">{entry.status}</span>
+                      )}
+                    </div>
+                  )}
                 </div>
                 <span className="whitespace-nowrap text-[11px] font-semibold text-gray-200">
                   {entry.hoursPerDay}h
diff --git a/apps/web/src/components/timeline/TimelineView.tsx b/apps/web/src/components/timeline/TimelineView.tsx
index 88881f3..186824c 100644
--- a/apps/web/src/components/timeline/TimelineView.tsx
+++ b/apps/web/src/components/timeline/TimelineView.tsx
@@ -615,7 +615,7 @@ function TimelineViewContent({
       <div
         ref={scrollContainerRef}
         onScroll={handleContainerScroll}
-        className="app-surface relative flex-1 overflow-auto"
+        className="app-surface relative z-0 flex-1 overflow-auto"
       >
         {isInitialLoading ? (
           <div className="flex items-center justify-center py-24 text-sm text-gray-500 dark:text-gray-400">
diff --git a/apps/web/src/components/ui/EntityCombobox.tsx b/apps/web/src/components/ui/EntityCombobox.tsx
new file mode 100644
index 0000000..cc76a0d
--- /dev/null
+++ b/apps/web/src/components/ui/EntityCombobox.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { useState, useRef, useEffect, useMemo, type ReactNode } from "react";
+import { useDebounce } from "~/hooks/useDebounce.js";
+
+interface EntityComboboxProps<T extends { id: string }> {
+  value: string | null;
+  onChange: (id: string | null) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  /** Hook that returns search results when the dropdown is open. */
+  useSearchQuery: (search: string, enabled: boolean) => { data: T[] | undefined };
+  /** Hook that returns a broader list so the selected item's label can be resolved when the dropdown is closed. */
+  useSelectedQuery: (id: string | null, enabled: boolean) => { data: T[] | undefined };
+  /** Derive the display label from an item (shown in the input when closed). */
+  getLabel: (item: T) => string;
+  /** Optional custom renderer for each dropdown row. Falls back to `getLabel`. */
+  renderItem?: (item: T, isSelected: boolean) => ReactNode;
+}
+
+export function EntityCombobox<T extends { id: string }>({
+  value,
+  onChange,
+  placeholder = "Search\u2026",
+  disabled = false,
+  className = "",
+  useSearchQuery,
+  useSelectedQuery,
+  getLabel,
+  renderItem,
+}: EntityComboboxProps<T>) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const debouncedSearch = useDebounce(search, 300);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { data: searchItems } = useSearchQuery(debouncedSearch, open);
+  const items = searchItems ?? [];
+
+  const { data: selectedItems } = useSelectedQuery(value, !!value && !open);
+
+  const selectedLabel = useMemo(() => {
+    if (!value) return "";
+    const fromOpen = items.find((i) => i.id === value);
+    if (fromOpen) return getLabel(fromOpen);
+    const fromSelected = selectedItems?.find((i) => i.id === value);
+    if (fromSelected) return getLabel(fromSelected);
+    return value;
+  }, [value, items, selectedItems, getLabel]);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setSearch("");
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+
+  function handleFocus() {
+    if (disabled) return;
+    setOpen(true);
+    setSearch("");
+  }
+
+  function select(id: string | null) {
+    onChange(id);
+    setOpen(false);
+    setSearch("");
+    inputRef.current?.blur();
+  }
+
+  return (
+    <div className={`relative ${className}`} ref={containerRef}>
+      <div className="relative">
+        <input
+          ref={inputRef}
+          type="text"
+          value={open ? search : selectedLabel}
+          onChange={(e) => setSearch(e.target.value)}
+          onFocus={handleFocus}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed ${
+            open
+              ? "border-brand-500 ring-2 ring-brand-500"
+              : "border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"
+          } bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500`}
+          readOnly={!open}
+        />
+        {value && !disabled && !open && (
+          <button
+            type="button"
+            onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); select(null); }}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-lg leading-none"
+            aria-label="Clear"
+            tabIndex={-1}
+          >
+            {"\u00d7"}
+          </button>
+        )}
+      </div>
+
+      {open && (
+        <div className="absolute left-0 right-0 top-full mt-1 z-[60] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl overflow-hidden">
+          <ul className="max-h-52 overflow-y-auto py-1">
+            {items.length === 0 ? (
+              <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">No results</li>
+            ) : (
+              items.map((item) => (
+                <li key={item.id}>
+                  <button
+                    type="button"
+                    onMouseDown={() => select(item.id)}
+                    className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 dark:hover:bg-brand-950/40 ${
+                      item.id === value
+                        ? "bg-brand-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-300 font-medium"
+                        : "text-gray-700 dark:text-gray-200"
+                    }`}
+                  >
+                    {renderItem ? renderItem(item, item.id === value) : getLabel(item)}
+                  </button>
+                </li>
+              ))
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/ui/EntityHistory.tsx b/apps/web/src/components/ui/EntityHistory.tsx
new file mode 100644
index 0000000..4ad591c
--- /dev/null
+++ b/apps/web/src/components/ui/EntityHistory.tsx
@@ -0,0 +1,176 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import Link from "next/link";
+import type { Route } from "next";
+import { trpc } from "~/lib/trpc/client.js";
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+const ACTION_BADGES: Record<string, { label: string; className: string }> = {
+  CREATE: { label: "Create", className: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400" },
+  UPDATE: { label: "Update", className: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400" },
+  DELETE: { label: "Delete", className: "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400" },
+  SHIFT: { label: "Shift", className: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400" },
+  IMPORT: { label: "Import", className: "bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400" },
+};
+
+function relativeTime(date: Date | string): string {
+  const now = new Date();
+  const diffMs = now.getTime() - new Date(date).getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHr = Math.floor(diffMin / 60);
+  const diffDays = Math.floor(diffHr / 24);
+
+  if (diffSec < 60) return "just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  if (diffHr < 24) return `${diffHr}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return new Date(date).toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" });
+}
+
+function formatValue(val: unknown): string {
+  if (val === null || val === undefined) return "(empty)";
+  if (typeof val === "boolean") return val ? "Yes" : "No";
+  if (typeof val === "object") return JSON.stringify(val);
+  return String(val);
+}
+
+type DiffEntry = { old: unknown; new: unknown };
+type Changes = {
+  before?: Record<string, unknown>;
+  after?: Record<string, unknown>;
+  diff?: Record<string, DiffEntry>;
+};
+
+function parseChanges(changes: unknown): Changes {
+  if (!changes || typeof changes !== "object") return {};
+  return changes as Changes;
+}
+
+// ─── Component ──────────────────────────────────────────────────────────────
+
+interface EntityHistoryProps {
+  entityType: string;
+  entityId: string;
+  limit?: number;
+}
+
+type AuditEntry = {
+  id: string;
+  entityType: string;
+  entityId: string;
+  action: string;
+  changes: unknown;
+  createdAt: Date | string;
+  source: string | null;
+  entityName: string | null;
+  summary: string | null;
+  user: { id: string; name: string | null; email: string } | null;
+};
+
+export function EntityHistory({ entityType, entityId, limit = 10 }: EntityHistoryProps) {
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  const { data: entries = [], isLoading } = trpc.auditLog.getByEntity.useQuery(
+    { entityType, entityId, limit },
+    { staleTime: 30_000 },
+  ) as { data: AuditEntry[]; isLoading: boolean };
+
+  const toggleExpand = useCallback((id: string) => {
+    setExpandedId((prev) => (prev === id ? null : id));
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-6">
+        <div className="h-5 w-5 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600" />
+      </div>
+    );
+  }
+
+  if (entries.length === 0) {
+    return (
+      <div className="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
+        No history recorded yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      <h3 className="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">Change History</h3>
+
+      {/* Timeline */}
+      <div className="relative space-y-0">
+        {/* Vertical line */}
+        <div className="absolute left-3 top-2 bottom-2 w-px bg-gray-200 dark:bg-slate-600" />
+
+        {entries.map((entry) => {
+          const changes = parseChanges(entry.changes);
+          const isExpanded = expandedId === entry.id;
+          const badge = ACTION_BADGES[entry.action] ?? { label: entry.action, className: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400" };
+
+          return (
+            <div key={entry.id} className="relative pl-8">
+              {/* Dot */}
+              <div className="absolute left-1.5 top-2.5 h-3 w-3 rounded-full border-2 border-white bg-gray-400 dark:border-slate-800 dark:bg-slate-500" />
+
+              <button
+                onClick={() => toggleExpand(entry.id)}
+                className="w-full rounded-lg p-2 text-left transition-colors hover:bg-gray-50 dark:hover:bg-slate-700/50"
+              >
+                <div className="flex items-center gap-2">
+                  <span className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium ${badge.className}`}>
+                    {badge.label}
+                  </span>
+                  <span className="text-xs text-gray-500 dark:text-gray-400">
+                    {entry.user?.name ?? entry.user?.email ?? "System"}
+                  </span>
+                  <span
+                    className="ml-auto text-[10px] text-gray-400 dark:text-gray-500"
+                    title={new Date(entry.createdAt).toLocaleString("de-DE")}
+                  >
+                    {relativeTime(entry.createdAt)}
+                  </span>
+                </div>
+                {entry.summary && (
+                  <p className="mt-0.5 text-xs text-gray-600 dark:text-gray-400">{entry.summary}</p>
+                )}
+              </button>
+
+              {/* Expanded diff */}
+              {isExpanded && changes.diff && Object.keys(changes.diff).length > 0 && (
+                <div className="mb-2 ml-2 rounded-lg border border-gray-100 bg-gray-50 p-2 dark:border-slate-700 dark:bg-slate-800/50">
+                  {Object.entries(changes.diff).map(([field, { old: oldVal, new: newVal }]) => (
+                    <div key={field} className="flex items-start gap-2 text-xs">
+                      <span className="min-w-[80px] shrink-0 font-medium text-gray-600 dark:text-gray-400">{field}</span>
+                      <span className="rounded bg-red-50 px-1 text-red-600 line-through dark:bg-red-900/20 dark:text-red-400">
+                        {formatValue(oldVal)}
+                      </span>
+                      <span className="text-gray-400">&rarr;</span>
+                      <span className="rounded bg-emerald-50 px-1 text-emerald-600 dark:bg-emerald-900/20 dark:text-emerald-400">
+                        {formatValue(newVal)}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Link to full log */}
+      <div className="pt-2 text-center">
+        <Link
+          href={`/admin/activity-log?entityType=${encodeURIComponent(entityType)}&search=${encodeURIComponent(entityId)}` as Route}
+          className="text-xs font-medium text-blue-600 hover:underline dark:text-blue-400"
+        >
+          View all in Activity Log
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/ui/ProjectCombobox.tsx b/apps/web/src/components/ui/ProjectCombobox.tsx
index fe95453..efd956c 100644
--- a/apps/web/src/components/ui/ProjectCombobox.tsx
+++ b/apps/web/src/components/ui/ProjectCombobox.tsx
@@ -1,9 +1,11 @@
 "use client";
 
-import { useState, useRef, useEffect, useMemo } from "react";
+import { useCallback } from "react";
 import { trpc } from "~/lib/trpc/client.js";
-import { useDebounce } from "~/hooks/useDebounce.js";
 import type { ProjectStatus } from "@planarchy/shared";
+import { EntityCombobox } from "./EntityCombobox.js";
+
+type ProjectItem = { id: string; shortCode: string; name: string };
 
 interface ProjectComboboxProps {
   value: string | null;
@@ -15,122 +17,48 @@ interface ProjectComboboxProps {
 }
 
 export function ProjectCombobox({
-  value,
-  onChange,
-  placeholder = "Search project\u2026",
-  disabled = false,
   status,
-  className = "",
+  ...props
 }: ProjectComboboxProps) {
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState("");
-  const debouncedSearch = useDebounce(search, 300);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const useSearchQuery = (search: string, enabled: boolean) => {
+    const { data } = trpc.project.list.useQuery(
+      { search: search || undefined, limit: 15, ...(status ? { status } : {}) },
+      { enabled, staleTime: 30_000 },
+    );
+    return { data: (data?.projects ?? []) as ProjectItem[] };
+  };
 
-  const { data } = trpc.project.list.useQuery(
-    { search: debouncedSearch || undefined, limit: 15, ...(status ? { status } : {}) },
-    { enabled: open, staleTime: 30_000 },
+  const useSelectedQuery = (_id: string | null, enabled: boolean) => {
+    const { data } = trpc.project.list.useQuery(
+      { limit: 500 },
+      { enabled, staleTime: 60_000 },
+    );
+    return { data: (data?.projects ?? []) as ProjectItem[] };
+  };
+
+  const getLabel = useCallback(
+    (p: ProjectItem) => `${p.shortCode} \u2014 ${p.name}`,
+    [],
   );
 
-  const projects = data?.projects ?? [];
-
-  const { data: allData } = trpc.project.list.useQuery(
-    { limit: 500 },
-    { enabled: !!value && !open, staleTime: 60_000 },
+  const renderItem = useCallback(
+    (p: ProjectItem) => (
+      <>
+        <span className="font-medium text-xs text-gray-400 dark:text-gray-500 mr-1.5">{p.shortCode}</span>
+        <span>{p.name}</span>
+      </>
+    ),
+    [],
   );
 
-  const selectedLabel = useMemo(() => {
-    if (!value) return "";
-    const fromOpen = projects.find((p) => p.id === value);
-    if (fromOpen) return `${fromOpen.shortCode} \u2014 ${fromOpen.name}`;
-    const fromAll = allData?.projects.find((p) => p.id === value);
-    if (fromAll) return `${fromAll.shortCode} \u2014 ${fromAll.name}`;
-    return value;
-  }, [value, projects, allData]);
-
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setOpen(false);
-        setSearch("");
-      }
-    }
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [open]);
-
-  function handleFocus() {
-    if (disabled) return;
-    setOpen(true);
-    setSearch("");
-  }
-
-  function select(id: string | null) {
-    onChange(id);
-    setOpen(false);
-    setSearch("");
-    inputRef.current?.blur();
-  }
-
   return (
-    <div className={`relative ${className}`} ref={containerRef}>
-      <div className="relative">
-        <input
-          ref={inputRef}
-          type="text"
-          value={open ? search : selectedLabel}
-          onChange={(e) => setSearch(e.target.value)}
-          onFocus={handleFocus}
-          placeholder={placeholder}
-          disabled={disabled}
-          className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed ${
-            open
-              ? "border-brand-500 ring-2 ring-brand-500"
-              : "border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"
-          } bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500`}
-          readOnly={!open}
-        />
-        {value && !disabled && !open && (
-          <button
-            type="button"
-            onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); select(null); }}
-            className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-lg leading-none"
-            aria-label="Clear"
-            tabIndex={-1}
-          >
-            \u00d7
-          </button>
-        )}
-      </div>
-
-      {open && (
-        <div className="absolute left-0 right-0 top-full mt-1 z-[60] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl overflow-hidden">
-          <ul className="max-h-52 overflow-y-auto py-1">
-            {projects.length === 0 ? (
-              <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">No results</li>
-            ) : (
-              projects.map((p) => (
-                <li key={p.id}>
-                  <button
-                    type="button"
-                    onMouseDown={() => select(p.id)}
-                    className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 dark:hover:bg-brand-950/40 ${
-                      p.id === value
-                        ? "bg-brand-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-300 font-medium"
-                        : "text-gray-700 dark:text-gray-200"
-                    }`}
-                  >
-                    <span className="font-medium text-xs text-gray-400 dark:text-gray-500 mr-1.5">{p.shortCode}</span>
-                    <span>{p.name}</span>
-                  </button>
-                </li>
-              ))
-            )}
-          </ul>
-        </div>
-      )}
-    </div>
+    <EntityCombobox<ProjectItem>
+      {...props}
+      placeholder={props.placeholder ?? "Search project\u2026"}
+      useSearchQuery={useSearchQuery}
+      useSelectedQuery={useSelectedQuery}
+      getLabel={getLabel}
+      renderItem={renderItem}
+    />
   );
 }
diff --git a/apps/web/src/components/ui/ResourceCombobox.tsx b/apps/web/src/components/ui/ResourceCombobox.tsx
index 82c3b29..e8aaaed 100644
--- a/apps/web/src/components/ui/ResourceCombobox.tsx
+++ b/apps/web/src/components/ui/ResourceCombobox.tsx
@@ -1,8 +1,10 @@
 "use client";
 
-import { useState, useRef, useEffect, useMemo } from "react";
+import { useCallback } from "react";
 import { trpc } from "~/lib/trpc/client.js";
-import { useDebounce } from "~/hooks/useDebounce.js";
+import { EntityCombobox } from "./EntityCombobox.js";
+
+type ResourceItem = { id: string; displayName: string; eid: string };
 
 interface ResourceComboboxProps {
   value: string | null;
@@ -14,123 +16,48 @@ interface ResourceComboboxProps {
 }
 
 export function ResourceCombobox({
-  value,
-  onChange,
-  placeholder = "Search resource\u2026",
-  disabled = false,
   isActive = true,
-  className = "",
+  ...props
 }: ResourceComboboxProps) {
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState("");
-  const debouncedSearch = useDebounce(search, 300);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const useSearchQuery = (search: string, enabled: boolean) => {
+    const { data } = trpc.resource.list.useQuery(
+      { search: search || undefined, limit: 15, isActive },
+      { enabled, staleTime: 30_000 },
+    );
+    return { data: (data?.resources ?? []) as ResourceItem[] };
+  };
 
-  const { data } = trpc.resource.list.useQuery(
-    { search: debouncedSearch || undefined, limit: 15, isActive },
-    { enabled: open, staleTime: 30_000 },
+  const useSelectedQuery = (_id: string | null, enabled: boolean) => {
+    const { data } = trpc.resource.list.useQuery(
+      { limit: 500 },
+      { enabled, staleTime: 60_000 },
+    );
+    return { data: (data?.resources ?? []) as ResourceItem[] };
+  };
+
+  const getLabel = useCallback(
+    (r: ResourceItem) => `${r.displayName} (${r.eid})`,
+    [],
   );
 
-  const resources = (data?.resources ?? []) as Array<{ id: string; displayName: string; eid: string }>;
-
-  const selectedQuery = trpc.resource.list.useQuery(
-    { limit: 500 },
-    { enabled: !!value && !open, staleTime: 60_000 },
+  const renderItem = useCallback(
+    (r: ResourceItem) => (
+      <>
+        <span>{r.displayName}</span>
+        <span className="ml-1.5 text-xs text-gray-400 dark:text-gray-500">{r.eid}</span>
+      </>
+    ),
+    [],
   );
-  const selectedResources = (selectedQuery.data?.resources ?? []) as Array<{ id: string; displayName: string; eid: string }>;
-
-  const selectedLabel = useMemo(() => {
-    if (!value) return "";
-    const fromOpen = resources.find((r) => r.id === value);
-    if (fromOpen) return `${fromOpen.displayName} (${fromOpen.eid})`;
-    const fromSelected = selectedResources.find((r) => r.id === value);
-    if (fromSelected) return `${fromSelected.displayName} (${fromSelected.eid})`;
-    return value;
-  }, [value, resources, selectedResources]);
-
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setOpen(false);
-        setSearch("");
-      }
-    }
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [open]);
-
-  function handleFocus() {
-    if (disabled) return;
-    setOpen(true);
-    setSearch("");
-  }
-
-  function select(id: string | null) {
-    onChange(id);
-    setOpen(false);
-    setSearch("");
-    inputRef.current?.blur();
-  }
 
   return (
-    <div className={`relative ${className}`} ref={containerRef}>
-      <div className="relative">
-        <input
-          ref={inputRef}
-          type="text"
-          value={open ? search : selectedLabel}
-          onChange={(e) => setSearch(e.target.value)}
-          onFocus={handleFocus}
-          placeholder={placeholder}
-          disabled={disabled}
-          className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed ${
-            open
-              ? "border-brand-500 ring-2 ring-brand-500"
-              : "border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"
-          } bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500`}
-          readOnly={!open}
-        />
-        {value && !disabled && !open && (
-          <button
-            type="button"
-            onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); select(null); }}
-            className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-lg leading-none"
-            aria-label="Clear"
-            tabIndex={-1}
-          >
-            \u00d7
-          </button>
-        )}
-      </div>
-
-      {open && (
-        <div className="absolute left-0 right-0 top-full mt-1 z-[60] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl overflow-hidden">
-          <ul className="max-h-52 overflow-y-auto py-1">
-            {resources.length === 0 ? (
-              <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">No results</li>
-            ) : (
-              resources.map((r) => (
-                <li key={r.id}>
-                  <button
-                    type="button"
-                    onMouseDown={() => select(r.id)}
-                    className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 dark:hover:bg-brand-950/40 ${
-                      r.id === value
-                        ? "bg-brand-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-300 font-medium"
-                        : "text-gray-700 dark:text-gray-200"
-                    }`}
-                  >
-                    <span>{r.displayName}</span>
-                    <span className="ml-1.5 text-xs text-gray-400 dark:text-gray-500">{r.eid}</span>
-                  </button>
-                </li>
-              ))
-            )}
-          </ul>
-        </div>
-      )}
-    </div>
+    <EntityCombobox<ResourceItem>
+      {...props}
+      placeholder={props.placeholder ?? "Search resource\u2026"}
+      useSearchQuery={useSearchQuery}
+      useSelectedQuery={useSelectedQuery}
+      getLabel={getLabel}
+      renderItem={renderItem}
+    />
   );
 }
diff --git a/apps/web/src/hooks/useWidgetFilterOptions.ts b/apps/web/src/hooks/useWidgetFilterOptions.ts
new file mode 100644
index 0000000..3fd751a
--- /dev/null
+++ b/apps/web/src/hooks/useWidgetFilterOptions.ts
@@ -0,0 +1,59 @@
+/**
+ * Shared hook for loading filter options used across dashboard widgets.
+ * Loads clients, countries, roles, and chapters once with long cache TTL.
+ */
+"use client";
+
+import { useMemo } from "react";
+import { trpc } from "~/lib/trpc/client.js";
+
+export interface FilterOption {
+  value: string;
+  label: string;
+}
+
+export function useWidgetFilterOptions() {
+  const { data: clientsRaw } = trpc.clientEntity.list.useQuery(
+    { isActive: true },
+    { staleTime: 300_000 },
+  );
+
+  const { data: countriesRaw } = trpc.country.list.useQuery(
+    { isActive: true },
+    { staleTime: 300_000 },
+  );
+
+  const { data: rolesRaw } = trpc.role.list.useQuery(
+    { isActive: true },
+    { staleTime: 300_000 },
+  );
+
+  const clients = useMemo<FilterOption[]>(() => {
+    const list = (Array.isArray(clientsRaw) ? clientsRaw : (clientsRaw as any)?.clients ?? []) as Array<{ id: string; name: string }>;
+    return list.map((c) => ({ value: c.id, label: c.name }));
+  }, [clientsRaw]);
+
+  const countries = useMemo<FilterOption[]>(() => {
+    const list = (Array.isArray(countriesRaw) ? countriesRaw : []) as Array<{ id: string; name: string }>;
+    return list.map((c) => ({ value: c.id, label: c.name }));
+  }, [countriesRaw]);
+
+  const roles = useMemo<FilterOption[]>(() => {
+    const list = (Array.isArray(rolesRaw) ? rolesRaw : []) as Array<{ id: string; name: string }>;
+    return list.map((r) => ({ value: r.id, label: r.name }));
+  }, [rolesRaw]);
+
+  // Chapters are derived from roles or can be hardcoded common ones
+  const chapters = useMemo<FilterOption[]>(() => {
+    const common = [
+      "Digital Content Production",
+      "Project Management",
+      "Art Direction",
+      "CGI-Dev",
+      "Product Data Management",
+    ];
+    return common.map((c) => ({ value: c, label: c }));
+  }, []);
+
+  return { clients, countries, roles, chapters };
+}
diff --git a/apps/web/src/instrumentation.ts b/apps/web/src/instrumentation.ts
index 4df5ea8..3ee6217 100644
--- a/apps/web/src/instrumentation.ts
+++ b/apps/web/src/instrumentation.ts
@@ -1,12 +1,19 @@
-import * as Sentry from "@sentry/nextjs";
-
 export async function register() {
-  if (process.env.NEXT_RUNTIME === "nodejs") {
-    await import("../sentry.server.config");
-  }
-  if (process.env.NEXT_RUNTIME === "edge") {
-    await import("../sentry.edge.config");
+  // Only load Sentry in production — the worker.js crash in dev mode
+  // (vendor-chunks/lib/worker.js MODULE_NOT_FOUND) makes the dev server unstable
+  if (process.env.NODE_ENV === "production") {
+    if (process.env.NEXT_RUNTIME === "nodejs") {
+      await import("../sentry.server.config");
+    }
+    if (process.env.NEXT_RUNTIME === "edge") {
+      await import("../sentry.edge.config");
+    }
   }
 }
 
-export const onRequestError = Sentry.captureRequestError;
+export async function onRequestError(...args: unknown[]) {
+  if (process.env.NODE_ENV === "production") {
+    const Sentry = await import("@sentry/nextjs");
+    (Sentry.captureRequestError as Function)(...args);
+  }
+}
diff --git a/apps/web/src/lib/blueprint-field-catalog.ts b/apps/web/src/lib/blueprint-field-catalog.ts
new file mode 100644
index 0000000..55bbd95
--- /dev/null
+++ b/apps/web/src/lib/blueprint-field-catalog.ts
@@ -0,0 +1,517 @@
+import { FieldType, BlueprintTarget } from "@planarchy/shared";
+import type { FieldOption } from "@planarchy/shared";
+
+// ---------------------------------------------------------------------------
+// Catalog types
+// ---------------------------------------------------------------------------
+
+export interface CatalogField {
+  key: string;
+  label: string;
+  type: FieldType;
+  category: string;
+  description: string;
+  options?: FieldOption[];
+  defaultValue?: unknown;
+  /** true = maps to a real model column; false = stored in dynamicFields JSONB */
+  builtIn: boolean;
+}
+
+export interface CatalogCategory {
+  name: string;
+  description: string;
+}
+
+// ---------------------------------------------------------------------------
+// PROJECT catalog
+// ---------------------------------------------------------------------------
+
+export const PROJECT_CATEGORIES: CatalogCategory[] = [
+  { name: "Client & Billing", description: "Client relationship and billing details" },
+  { name: "Technical Specs", description: "Render pipeline and delivery format" },
+  { name: "Scope & Delivery", description: "Approval rounds, revision budgets, complexity" },
+];
+
+export const PROJECT_FIELD_CATALOG: CatalogField[] = [
+  // -- Client & Billing --
+  {
+    key: "clientUnit",
+    label: "Client Unit",
+    type: FieldType.TEXT,
+    category: "Client & Billing",
+    description: "Business unit or division of the client",
+    builtIn: false,
+  },
+  {
+    key: "personHoursSold",
+    label: "Person-Hours Sold",
+    type: FieldType.NUMBER,
+    category: "Client & Billing",
+    description: "Total billable person-hours sold to the client",
+    builtIn: false,
+  },
+  {
+    key: "billingModel",
+    label: "Billing Model",
+    type: FieldType.SELECT,
+    category: "Client & Billing",
+    description: "How the project is billed",
+    options: [
+      { value: "fixed", label: "Fixed Price" },
+      { value: "tm", label: "Time & Material" },
+      { value: "hybrid", label: "Hybrid" },
+    ],
+    builtIn: false,
+  },
+  {
+    key: "poNumber",
+    label: "PO Number",
+    type: FieldType.TEXT,
+    category: "Client & Billing",
+    description: "Purchase order reference number",
+    builtIn: false,
+  },
+  {
+    key: "invoiceCycle",
+    label: "Invoice Cycle",
+    type: FieldType.SELECT,
+    category: "Client & Billing",
+    description: "How often invoices are sent",
+    options: [
+      { value: "weekly", label: "Weekly" },
+      { value: "biweekly", label: "Bi-weekly" },
+      { value: "monthly", label: "Monthly" },
+      { value: "milestone", label: "Per Milestone" },
+      { value: "on_completion", label: "On Completion" },
+    ],
+    builtIn: false,
+  },
+
+  // -- Technical Specs --
+  {
+    key: "renderEngine",
+    label: "Render Engine",
+    type: FieldType.SELECT,
+    category: "Technical Specs",
+    description: "Primary render engine used",
+    options: [
+      { value: "vray", label: "V-Ray" },
+      { value: "arnold", label: "Arnold" },
+      { value: "redshift", label: "Redshift" },
+      { value: "octane", label: "Octane" },
+      { value: "cycles", label: "Cycles" },
+      { value: "unreal", label: "Unreal Engine" },
+      { value: "unity", label: "Unity" },
+      { value: "other", label: "Other" },
+    ],
+    builtIn: false,
+  },
+  {
+    key: "renderFarm",
+    label: "Render Farm",
+    type: FieldType.SELECT,
+    category: "Technical Specs",
+    description: "Render farm provider",
+    options: [
+      { value: "internal", label: "Internal" },
+      { value: "rebusfarm", label: "RebusFarm" },
+      { value: "ranch", label: "Ranch Computing" },
+      { value: "garagefarm", label: "GarageFarm" },
+      { value: "aws", label: "AWS Deadline" },
+      { value: "other", label: "Other" },
+    ],
+    builtIn: false,
+  },
+  {
+    key: "deliveryFormat",
+    label: "Delivery Format",
+    type: FieldType.MULTI_SELECT,
+    category: "Technical Specs",
+    description: "Final deliverable formats",
+    options: [
+      { value: "exr", label: "EXR" },
+      { value: "png", label: "PNG" },
+      { value: "mp4", label: "MP4 (H.264)" },
+      { value: "mov_prores", label: "MOV (ProRes)" },
+      { value: "tiff", label: "TIFF" },
+      { value: "dpx", label: "DPX" },
+      { value: "fbx", label: "FBX" },
+      { value: "glb", label: "GLB/glTF" },
+      { value: "usd", label: "USD" },
+    ],
+    builtIn: false,
+  },
+  {
+    key: "frameRate",
+    label: "Frame Rate",
+    type: FieldType.SELECT,
+    category: "Technical Specs",
+    description: "Target frame rate for animation/video",
+    options: [
+      { value: "24", label: "24 fps (Film)" },
+      { value: "25", label: "25 fps (PAL)" },
+      { value: "30", label: "30 fps (NTSC)" },
+      { value: "48", label: "48 fps (HFR)" },
+      { value: "60", label: "60 fps" },
+    ],
+    builtIn: false,
+  },
+  {
+    key: "colorSpace",
+    label: "Color Space",
+    type: FieldType.SELECT,
+    category: "Technical Specs",
+    description: "Working color space",
+    options: [
+      { value: "srgb", label: "sRGB" },
+      { value: "aces", label: "ACES" },
+      { value: "rec709", label: "Rec.709" },
+      { value: "rec2020", label: "Rec.2020" },
+      { value: "display_p3", label: "Display P3" },
+      { value: "linear", label: "Linear" },
+    ],
+    builtIn: false,
+  },
+  {
+    key: "resolution",
+    label: "Resolution",
+    type: FieldType.SELECT,
+    category: "Technical Specs",
+    description: "Output resolution",
+    options: [
+      { value: "hd", label: "1920x1080 (Full HD)" },
+      { value: "2k", label: "2048x1080 (2K)" },
+      { value: "qhd", label: "2560x1440 (QHD)" },
+      { value: "uhd", label: "3840x2160 (4K UHD)" },
+      { value: "4k_dci", label: "4096x2160 (4K DCI)" },
+      { value: "8k", label: "7680x4320 (8K)" },
+      { value: "custom", label: "Custom" },
+    ],
+    builtIn: false,
+  },
+
+  // -- Scope & Delivery --
+  {
+    key: "clientApprovalRounds",
+    label: "Client Approval Rounds",
+    type: FieldType.NUMBER,
+    category: "Scope & Delivery",
+    description: "Number of approval rounds included in the scope",
+    defaultValue: 2,
+    builtIn: false,
+  },
+  {
+    key: "revisionBudgetHours",
+    label: "Revision Budget (hours)",
+    type: FieldType.NUMBER,
+    category: "Scope & Delivery",
+    description: "Hours reserved for client-requested revisions",
+    builtIn: false,
+  },
+  {
+    key: "complexityLevel",
+    label: "Complexity Level",
+    type: FieldType.SELECT,
+    category: "Scope & Delivery",
+    description: "Overall project complexity assessment",
+    options: [
+      { value: "low", label: "Low" },
+      { value: "medium", label: "Medium" },
+      { value: "high", label: "High" },
+      { value: "very_high", label: "Very High" },
+    ],
+    builtIn: false,
+  },
+  {
+    key: "shotCount",
+    label: "Shot Count",
+    type: FieldType.NUMBER,
+    category: "Scope & Delivery",
+    description: "Total number of shots or scenes",
+    builtIn: false,
+  },
+  {
+    key: "deliveryDate",
+    label: "Delivery Date",
+    type: FieldType.DATE,
+    category: "Scope & Delivery",
+    description: "Final delivery deadline to the client",
+    builtIn: false,
+  },
+  {
+    key: "nda",
+    label: "NDA Required",
+    type: FieldType.BOOLEAN,
+    category: "Scope & Delivery",
+    description: "Whether a non-disclosure agreement is in effect",
+    defaultValue: false,
+    builtIn: false,
+  },
+  {
+    key: "projectBrief",
+    label: "Project Brief URL",
+    type: FieldType.URL,
+    category: "Scope & Delivery",
+    description: "Link to the project brief or scope document",
+    builtIn: false,
+  },
+];
+
+// ---------------------------------------------------------------------------
+// RESOURCE catalog
+// ---------------------------------------------------------------------------
+
+export const RESOURCE_CATEGORIES: CatalogCategory[] = [
+  { name: "Person Info", description: "Basic employee information" },
+  { name: "Organization", description: "Organizational placement and location" },
+  { name: "Contract", description: "Contract terms and rates" },
+  { name: "Skills & Work", description: "Technical skills and work preferences" },
+];
+
+export const RESOURCE_FIELD_CATALOG: CatalogField[] = [
+  // -- Person Info --
+  {
+    key: "nickname",
+    label: "Nickname",
+    type: FieldType.TEXT,
+    category: "Person Info",
+    description: "Preferred name or nickname",
+    builtIn: false,
+  },
+  {
+    key: "phone",
+    label: "Phone Number",
+    type: FieldType.TEXT,
+    category: "Person Info",
+    description: "Business phone number",
+    builtIn: false,
+  },
+  {
+    key: "personalEmail",
+    label: "Personal Email",
+    type: FieldType.EMAIL,
+    category: "Person Info",
+    description: "Personal/secondary email address",
+    builtIn: false,
+  },
+  {
+    key: "linkedInUrl",
+    label: "LinkedIn Profile",
+    type: FieldType.URL,
+    category: "Person Info",
+    description: "Link to LinkedIn profile",
+    builtIn: false,
+  },
+  {
+    key: "startDate",
+    label: "Start Date",
+    type: FieldType.DATE,
+    category: "Person Info",
+    description: "Employment start date",
+    builtIn: false,
+  },
+
+  // -- Organization --
+  {
+    key: "department",
+    label: "Department",
+    type: FieldType.TEXT,
+    category: "Organization",
+    description: "Department or team name",
+    builtIn: false,
+  },
+  {
+    key: "costCenter",
+    label: "Cost Center",
+    type: FieldType.TEXT,
+    category: "Organization",
+    description: "Accounting cost center code",
+    builtIn: false,
+  },
+  {
+    key: "officeLocation",
+    label: "Office Location",
+    type: FieldType.TEXT,
+    category: "Organization",
+    description: "Physical office location or site name",
+    builtIn: false,
+  },
+  {
+    key: "reportingTo",
+    label: "Reporting To",
+    type: FieldType.TEXT,
+    category: "Organization",
+    description: "Direct manager or supervisor name",
+    builtIn: false,
+  },
+
+  // -- Contract --
+  {
+    key: "contractType",
+    label: "Contract Type",
+    type: FieldType.SELECT,
+    category: "Contract",
+    description: "Type of employment contract",
+    options: [
+      { value: "permanent", label: "Permanent" },
+      { value: "fixed_term", label: "Fixed Term" },
+      { value: "freelance", label: "Freelance" },
+      { value: "internship", label: "Internship" },
+      { value: "working_student", label: "Working Student" },
+    ],
+    builtIn: false,
+  },
+  {
+    key: "contractEndDate",
+    label: "Contract End Date",
+    type: FieldType.DATE,
+    category: "Contract",
+    description: "End date for fixed-term contracts",
+    builtIn: false,
+  },
+  {
+    key: "probationEndDate",
+    label: "Probation End Date",
+    type: FieldType.DATE,
+    category: "Contract",
+    description: "End of probationary period",
+    builtIn: false,
+  },
+  {
+    key: "weeklyHours",
+    label: "Weekly Hours",
+    type: FieldType.NUMBER,
+    category: "Contract",
+    description: "Contracted weekly working hours",
+    defaultValue: 40,
+    builtIn: false,
+  },
+
+  // -- Skills & Work --
+  {
+    key: "primarySoftware",
+    label: "Primary Software",
+    type: FieldType.MULTI_SELECT,
+    category: "Skills & Work",
+    description: "Main software tools used",
+    options: [
+      { value: "maya", label: "Maya" },
+      { value: "3dsmax", label: "3ds Max" },
+      { value: "blender", label: "Blender" },
+      { value: "cinema4d", label: "Cinema 4D" },
+      { value: "houdini", label: "Houdini" },
+      { value: "zbrush", label: "ZBrush" },
+      { value: "substance", label: "Substance 3D" },
+      { value: "nuke", label: "Nuke" },
+      { value: "aftereffects", label: "After Effects" },
+      { value: "unreal", label: "Unreal Engine" },
+      { value: "unity", label: "Unity" },
+      { value: "photoshop", label: "Photoshop" },
+    ],
+    builtIn: false,
+  },
+  {
+    key: "yearsOfExperience",
+    label: "Years of Experience",
+    type: FieldType.NUMBER,
+    category: "Skills & Work",
+    description: "Total years of professional experience",
+    builtIn: false,
+  },
+  {
+    key: "spokenLanguages",
+    label: "Spoken Languages",
+    type: FieldType.MULTI_SELECT,
+    category: "Skills & Work",
+    description: "Languages the person speaks",
+    options: [
+      { value: "de", label: "German" },
+      { value: "en", label: "English" },
+      { value: "fr", label: "French" },
+      { value: "es", label: "Spanish" },
+      { value: "it", label: "Italian" },
+      { value: "pt", label: "Portuguese" },
+      { value: "zh", label: "Chinese" },
+      { value: "ja", label: "Japanese" },
+      { value: "ko", label: "Korean" },
+      { value: "ru", label: "Russian" },
+    ],
+    builtIn: false,
+  },
+  {
+    key: "timezone",
+    label: "Timezone",
+    type: FieldType.SELECT,
+    category: "Skills & Work",
+    description: "Primary working timezone",
+    options: [
+      { value: "Europe/Berlin", label: "CET (Berlin)" },
+      { value: "Europe/London", label: "GMT (London)" },
+      { value: "America/New_York", label: "EST (New York)" },
+      { value: "America/Los_Angeles", label: "PST (Los Angeles)" },
+      { value: "Asia/Tokyo", label: "JST (Tokyo)" },
+      { value: "Asia/Shanghai", label: "CST (Shanghai)" },
+      { value: "Asia/Kolkata", label: "IST (Mumbai)" },
+      { value: "Australia/Sydney", label: "AEDT (Sydney)" },
+    ],
+    builtIn: false,
+  },
+  {
+    key: "remoteEligible",
+    label: "Remote Eligible",
+    type: FieldType.BOOLEAN,
+    category: "Skills & Work",
+    description: "Whether the person can work remotely",
+    defaultValue: false,
+    builtIn: false,
+  },
+  {
+    key: "specialization",
+    label: "Specialization",
+    type: FieldType.SELECT,
+    category: "Skills & Work",
+    description: "Primary area of specialization",
+    options: [
+      { value: "modeling", label: "3D Modeling" },
+      { value: "texturing", label: "Texturing" },
+      { value: "rigging", label: "Rigging" },
+      { value: "animation", label: "Animation" },
+      { value: "lighting", label: "Lighting" },
+      { value: "rendering", label: "Rendering" },
+      { value: "compositing", label: "Compositing" },
+      { value: "fx", label: "FX / Simulation" },
+      { value: "concept", label: "Concept Art" },
+      { value: "motion_design", label: "Motion Design" },
+      { value: "td", label: "Technical Direction" },
+      { value: "pipeline", label: "Pipeline / Tools" },
+      { value: "generalist", label: "Generalist" },
+    ],
+    builtIn: false,
+  },
+];
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Return the catalog for a given blueprint target */
+export function getCatalogForTarget(target: BlueprintTarget | string): CatalogField[] {
+  return target === BlueprintTarget.PROJECT
+    ? PROJECT_FIELD_CATALOG
+    : RESOURCE_FIELD_CATALOG;
+}
+
+/** Return the categories for a given blueprint target */
+export function getCategoriesForTarget(target: BlueprintTarget | string): CatalogCategory[] {
+  return target === BlueprintTarget.PROJECT
+    ? PROJECT_CATEGORIES
+    : RESOURCE_CATEGORIES;
+}
+
+/** Look up a catalog field by key */
+export function findCatalogField(
+  target: BlueprintTarget | string,
+  key: string,
+): CatalogField | undefined {
+  return getCatalogForTarget(target).find((f) => f.key === key);
+}
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index a54a5a8..2b8cf48 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -17,6 +17,7 @@ const config: Config = {
           700: "rgb(var(--accent-700) / <alpha-value>)",
           800: "rgb(var(--accent-800) / <alpha-value>)",
           900: "rgb(var(--accent-900) / <alpha-value>)",
+          950: "rgb(var(--accent-900) / <alpha-value>)",
         },
       },
       fontFamily: {
diff --git a/packages/api/src/gemini-client.ts b/packages/api/src/gemini-client.ts
new file mode 100644
index 0000000..d84757a
--- /dev/null
+++ b/packages/api/src/gemini-client.ts
@@ -0,0 +1,94 @@
+type GeminiSettings = {
+  geminiApiKey?: string | null;
+  geminiModel?: string | null;
+};
+
+/** Returns true if the settings have a Gemini API key configured. */
+export function isGeminiConfigured(settings: GeminiSettings | null | undefined): boolean {
+  return !!settings?.geminiApiKey;
+}
+
+/**
+ * Generates an image using the Google Gemini API.
+ * @returns A base64 data URL of the generated image.
+ */
+export async function generateGeminiImage(
+  apiKey: string,
+  prompt: string,
+  model = "gemini-2.5-flash-image",
+): Promise<string> {
+  const fullPrompt = `Generate a professional, cinematic cover image for a 3D production project. ${prompt}`;
+
+  const response = await fetch(
+    `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        contents: [{ parts: [{ text: fullPrompt }] }],
+        generationConfig: { responseModalities: ["TEXT", "IMAGE"] },
+      }),
+    },
+  );
+
+  if (!response.ok) {
+    const body = await response.text();
+    let msg = body;
+    try {
+      const parsed = JSON.parse(body) as { error?: { message?: string } };
+      if (parsed.error?.message) msg = parsed.error.message;
+    } catch {
+      /* keep raw */
+    }
+    throw new Error(`HTTP ${response.status}: ${msg}`);
+  }
+
+  const data = (await response.json()) as {
+    candidates?: Array<{
+      content?: {
+        parts?: Array<{
+          inlineData?: { data: string; mimeType: string };
+          text?: string;
+        }>;
+      };
+    }>;
+  };
+
+  const imagePart = data.candidates?.[0]?.content?.parts?.find(
+    (p) => p.inlineData,
+  );
+
+  if (!imagePart?.inlineData?.data) {
+    throw new Error("No image data returned from Gemini");
+  }
+
+  const base64 = imagePart.inlineData.data;
+  const mimeType = imagePart.inlineData.mimeType ?? "image/png";
+  return `data:${mimeType};base64,${base64}`;
+}
+
+/** Turns Gemini API errors into actionable human-readable messages. */
+export function parseGeminiError(err: unknown): string {
+  const msg = err instanceof Error ? err.message : String(err);
+  const lower = msg.toLowerCase();
+
+  if (lower.includes("400") || lower.includes("invalid")) {
+    return "Invalid request — check the Gemini model name and prompt.";
+  }
+  if (lower.includes("401") || lower.includes("unauthorized") || lower.includes("api_key_invalid") || lower.includes("api key not valid")) {
+    return "Invalid API key — make sure you copied it correctly from Google AI Studio.";
+  }
+  if (lower.includes("403") || lower.includes("forbidden") || lower.includes("permission")) {
+    return "Access denied — your API key may not have permission to use image generation.";
+  }
+  if (lower.includes("404") || lower.includes("not found")) {
+    return "Model not found — verify the Gemini model name is correct.";
+  }
+  if (lower.includes("429") || lower.includes("rate limit") || lower.includes("quota")) {
+    return "Rate limit or quota exceeded — wait a moment and try again.";
+  }
+  if (lower.includes("econnrefused") || lower.includes("enotfound") || lower.includes("fetch failed")) {
+    return "Cannot reach the Gemini API — check your network connection.";
+  }
+  return msg.replace(/^Error: /, "").slice(0, 300);
+}
diff --git a/packages/api/src/index.ts b/packages/api/src/index.ts
index 9289595..16fdccb 100644
--- a/packages/api/src/index.ts
+++ b/packages/api/src/index.ts
@@ -3,9 +3,11 @@ export { createTRPCContext, createTRPCRouter, createCallerFactory, publicProcedu
 export { eventBus, emitAllocationCreated, emitAllocationUpdated, emitAllocationDeleted, emitProjectShifted, emitBudgetWarning, flushPendingEvents, cancelPendingEvents } from "./sse/event-bus.js";
 export { logger } from "./lib/logger.js";
 export { anonymizeResource, anonymizeResources, anonymizeUser, getAnonymizationConfig, getAnonymizationDirectory } from "./lib/anonymization.js";
+export { createNotification, createNotificationsForUsers } from "./lib/create-notification.js";
 export { checkBudgetThresholds } from "./lib/budget-alerts.js";
 export { checkPendingEstimateReminders } from "./lib/estimate-reminders.js";
 export { checkChargeabilityAlerts } from "./lib/chargeability-alerts.js";
 export { checkVacationConflicts, checkBatchVacationConflicts } from "./lib/vacation-conflicts.js";
 export { lookupRate, type RateCardLookupParams, type RateCardLookupResult } from "./lib/rate-card-lookup.js";
 export { autoImportPublicHolidays, type AutoImportResult } from "./lib/holiday-auto-import.js";
+export { createAuditEntry, computeDiff, generateSummary } from "./lib/audit.js";
diff --git a/packages/api/src/lib/audit.ts b/packages/api/src/lib/audit.ts
new file mode 100644
index 0000000..5d31dbe
--- /dev/null
+++ b/packages/api/src/lib/audit.ts
@@ -0,0 +1,130 @@
+import type { PrismaClient, Prisma } from "@planarchy/db";
+import { logger } from "./logger.js";
+
+type AuditAction = "CREATE" | "UPDATE" | "DELETE" | "SHIFT" | "IMPORT";
+type AuditSource = "ui" | "api" | "ai" | "import" | "cron";
+
+interface CreateAuditEntryParams {
+  db: PrismaClient;
+  entityType: string;
+  entityId: string;
+  entityName?: string;
+  action: AuditAction;
+  userId?: string;
+  before?: Record<string, unknown>;
+  after?: Record<string, unknown>;
+  source?: AuditSource;
+  summary?: string;
+  metadata?: Record<string, unknown>;
+}
+
+const INTERNAL_FIELDS = new Set(["id", "createdAt", "updatedAt"]);
+
+/**
+ * Compare two snapshots and return only the changed fields.
+ * Skips internal fields (id, createdAt, updatedAt).
+ * Uses JSON.stringify for nested object comparison.
+ */
+export function computeDiff(
+  before: Record<string, unknown>,
+  after: Record<string, unknown>,
+): Record<string, { old: unknown; new: unknown }> {
+  const diff: Record<string, { old: unknown; new: unknown }> = {};
+
+  const allKeys = new Set([...Object.keys(before), ...Object.keys(after)]);
+
+  for (const key of allKeys) {
+    if (INTERNAL_FIELDS.has(key)) continue;
+
+    const oldVal = before[key];
+    const newVal = after[key];
+
+    // Compare by JSON serialization to handle nested objects/arrays
+    const oldStr = JSON.stringify(oldVal) ?? "undefined";
+    const newStr = JSON.stringify(newVal) ?? "undefined";
+
+    if (oldStr !== newStr) {
+      diff[key] = { old: oldVal, new: newVal };
+    }
+  }
+
+  return diff;
+}
+
+/**
+ * Auto-generate a human-readable summary from the action and diff.
+ */
+export function generateSummary(
+  action: string,
+  entityType: string,
+  diff?: Record<string, { old: unknown; new: unknown }>,
+): string {
+  switch (action) {
+    case "CREATE":
+      return `Created ${entityType}`;
+    case "DELETE":
+      return `Deleted ${entityType}`;
+    case "SHIFT":
+      return `Shifted ${entityType}`;
+    case "IMPORT":
+      return `Imported ${entityType}`;
+    case "UPDATE": {
+      if (!diff || Object.keys(diff).length === 0) {
+        return `Updated ${entityType}`;
+      }
+      const fields = Object.keys(diff);
+      if (fields.length <= 3) {
+        return `Updated ${fields.join(", ")}`;
+      }
+      return `Updated ${fields.slice(0, 3).join(", ")} and ${fields.length - 3} more`;
+    }
+    default:
+      return `${action} ${entityType}`;
+  }
+}
+
+/**
+ * Create an audit log entry. Fire-and-forget — errors are logged but never thrown.
+ *
+ * If both `before` and `after` are provided, a diff is computed automatically.
+ * If no `summary` is given, one is generated from the action and diff.
+ */
+export async function createAuditEntry(params: CreateAuditEntryParams): Promise<void> {
+  try {
+    const { db, entityType, entityId, entityName, action, userId, before, after, source, metadata } = params;
+
+    // Compute diff if both snapshots are available
+    const diff = before && after ? computeDiff(before, after) : undefined;
+
+    // Skip UPDATE entries where nothing actually changed
+    if (action === "UPDATE" && diff && Object.keys(diff).length === 0) {
+      return;
+    }
+
+    // Auto-generate summary if not provided
+    const summary = params.summary ?? generateSummary(action, entityType, diff);
+
+    // Build the changes JSONB payload
+    const changes: Record<string, unknown> = {};
+    if (before) changes.before = before;
+    if (after) changes.after = after;
+    if (diff) changes.diff = diff;
+    if (metadata) changes.metadata = metadata;
+
+    await db.auditLog.create({
+      data: {
+        entityType,
+        entityId,
+        action,
+        userId: userId ?? null,
+        changes: changes as unknown as Prisma.InputJsonValue,
+        source: source ?? null,
+        entityName: entityName ?? null,
+        summary,
+      },
+    });
+  } catch (error) {
+    // Fire-and-forget: log but never propagate
+    logger.error({ err: error, entityType: params.entityType, entityId: params.entityId }, "Failed to create audit entry");
+  }
+}
diff --git a/packages/api/src/lib/auto-staffing.ts b/packages/api/src/lib/auto-staffing.ts
index 501b46f..a10e8b3 100644
--- a/packages/api/src/lib/auto-staffing.ts
+++ b/packages/api/src/lib/auto-staffing.ts
@@ -1,7 +1,7 @@
 import { listAssignmentBookings } from "@planarchy/application";
 import { rankResources } from "@planarchy/staffing";
 import type { SkillEntry } from "@planarchy/shared";
-import { emitNotificationCreated } from "../sse/event-bus.js";
+import { createNotificationsForUsers } from "./create-notification.js";
 
 /**
  * Minimal DB interface for auto-staffing — avoids importing the full PrismaClient.
@@ -227,24 +227,19 @@ export async function generateAutoSuggestions(
       select: { id: true },
     });
 
-    for (const manager of managers) {
-      const notification = await db.notification.create({
-        data: {
-          userId: manager.id,
-          type: "AUTO_STAFFING_SUGGESTION",
-          category: "NOTIFICATION",
-          priority: "NORMAL",
-          title,
-          body,
-          entityId: demandRequirementId,
-          entityType: "demand",
-          link: `/staffing?demandId=${demandRequirementId}`,
-          channel: "in_app",
-        },
-      });
-
-      emitNotificationCreated(manager.id, notification.id);
-    }
+    await createNotificationsForUsers({
+      db,
+      userIds: managers.map((m) => m.id),
+      type: "AUTO_STAFFING_SUGGESTION",
+      category: "NOTIFICATION",
+      priority: "NORMAL",
+      title,
+      body,
+      entityId: demandRequirementId,
+      entityType: "demand",
+      link: `/staffing?demandId=${demandRequirementId}`,
+      channel: "in_app",
+    });
   } catch {
     // Fire-and-forget: swallow all errors to avoid disrupting the caller.
   }
diff --git a/packages/api/src/lib/budget-alerts.ts b/packages/api/src/lib/budget-alerts.ts
index 9ab9572..605aa5d 100644
--- a/packages/api/src/lib/budget-alerts.ts
+++ b/packages/api/src/lib/budget-alerts.ts
@@ -1,5 +1,5 @@
 import { listAssignmentBookings } from "@planarchy/application";
-import { emitNotificationCreated } from "../sse/event-bus.js";
+import { createNotificationsForUsers } from "./create-notification.js";
 
 type DbClient = Parameters<typeof listAssignmentBookings>[0] & {
   project: {
@@ -119,23 +119,18 @@ export async function checkBudgetThresholds(
       { minimumFractionDigits: 2, maximumFractionDigits: 2 },
     );
 
-    for (const manager of managers) {
-      const notification = await db.notification.create({
-        data: {
-          userId: manager.id,
-          type: threshold.type,
-          category: "NOTIFICATION",
-          priority: threshold.priority,
-          title: `Budget alert: ${project.name} has reached ${threshold.label} of budget`,
-          body: `Project ${project.shortCode} "${project.name}" has spent ${formattedSpend} EUR of ${formattedBudget} EUR budget (${Math.round(spendPercent)}%).`,
-          entityId: projectId,
-          entityType: "project_budget",
-          link: `/projects/${projectId}`,
-          channel: "in_app",
-        },
-      });
-
-      emitNotificationCreated(manager.id, notification.id);
-    }
+    await createNotificationsForUsers({
+      db,
+      userIds: managers.map((m) => m.id),
+      type: threshold.type,
+      category: "NOTIFICATION",
+      priority: threshold.priority,
+      title: `Budget alert: ${project.name} has reached ${threshold.label} of budget`,
+      body: `Project ${project.shortCode} "${project.name}" has spent ${formattedSpend} EUR of ${formattedBudget} EUR budget (${Math.round(spendPercent)}%).`,
+      entityId: projectId,
+      entityType: "project_budget",
+      link: `/projects/${projectId}`,
+      channel: "in_app",
+    });
   }
 }
diff --git a/packages/api/src/lib/chargeability-alerts.ts b/packages/api/src/lib/chargeability-alerts.ts
index 5ebef5c..b4c5bf2 100644
--- a/packages/api/src/lib/chargeability-alerts.ts
+++ b/packages/api/src/lib/chargeability-alerts.ts
@@ -8,7 +8,7 @@ import {
 import type { SpainScheduleRule } from "@planarchy/shared";
 import { isChargeabilityActualBooking, listAssignmentBookings } from "@planarchy/application";
 import { VacationStatus } from "@planarchy/db";
-import { emitNotificationCreated } from "../sse/event-bus.js";
+import { createNotificationsForUsers } from "./create-notification.js";
 
 /**
  * Minimal DB client type for chargeability alerts.
@@ -237,24 +237,19 @@ export async function checkChargeabilityAlerts(
 
     if (existing) continue;
 
-    for (const manager of managers) {
-      const notification = await (db as DbClient).notification.create({
-        data: {
-          userId: manager.id,
-          type: "CHARGEABILITY_ALERT",
-          category: "NOTIFICATION",
-          priority: "HIGH",
-          title: `Low chargeability: ${resource.displayName}`,
-          body: `${resource.displayName} is at ${chg}% chargeability this month (target: ${target}%, gap: ${gap}pp).`,
-          entityId,
-          entityType: "chargeability_alert",
-          link: "/chargeability",
-          channel: "in_app",
-        },
-      });
-
-      emitNotificationCreated(manager.id, notification.id);
-    }
+    await createNotificationsForUsers({
+      db: db as DbClient,
+      userIds: managers.map((m) => m.id),
+      type: "CHARGEABILITY_ALERT",
+      category: "NOTIFICATION",
+      priority: "HIGH",
+      title: `Low chargeability: ${resource.displayName}`,
+      body: `${resource.displayName} is at ${chg}% chargeability this month (target: ${target}%, gap: ${gap}pp).`,
+      entityId,
+      entityType: "chargeability_alert",
+      link: "/chargeability",
+      channel: "in_app",
+    });
 
     alertCount++;
   }
diff --git a/packages/api/src/lib/create-notification.ts b/packages/api/src/lib/create-notification.ts
new file mode 100644
index 0000000..f6c5f99
--- /dev/null
+++ b/packages/api/src/lib/create-notification.ts
@@ -0,0 +1,102 @@
+import { emitNotificationCreated } from "../sse/event-bus.js";
+
+export interface CreateNotificationParams {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  db: { notification: { create: (args: any) => Promise<{ id: string; userId: string }> } };
+  userId: string;
+  type: string;
+  title: string;
+  body?: string | undefined;
+  link?: string | undefined;
+  entityId?: string | undefined;
+  entityType?: string | undefined;
+  category?: string | undefined;
+  priority?: string | undefined;
+  senderId?: string | undefined;
+  channel?: string | undefined;
+  taskStatus?: string | undefined;
+  taskAction?: string | undefined;
+  assigneeId?: string | undefined;
+  dueDate?: Date | undefined;
+  sourceId?: string | undefined;
+  /** Set to false to suppress the SSE emitNotificationCreated call. Default: true. */
+  emit?: boolean | undefined;
+}
+
+/**
+ * Create a single in-app notification and optionally emit an SSE event.
+ *
+ * Handles the `exactOptionalPropertyTypes` spread pattern internally so
+ * callers do not need to repeat the `...(val !== undefined ? { key: val } : {})` boilerplate.
+ *
+ * Returns the created notification's ID.
+ */
+export async function createNotification(
+  params: CreateNotificationParams,
+): Promise<string> {
+  const {
+    db,
+    userId,
+    type,
+    title,
+    body,
+    link,
+    entityId,
+    entityType,
+    category,
+    priority,
+    senderId,
+    channel,
+    taskStatus,
+    taskAction,
+    assigneeId,
+    dueDate,
+    sourceId,
+    emit = true,
+  } = params;
+
+  const notification = await db.notification.create({
+    data: {
+      userId,
+      type,
+      title,
+      ...(body !== undefined ? { body } : {}),
+      ...(link !== undefined ? { link } : {}),
+      ...(entityId !== undefined ? { entityId } : {}),
+      ...(entityType !== undefined ? { entityType } : {}),
+      ...(category !== undefined ? { category } : {}),
+      ...(priority !== undefined ? { priority } : {}),
+      ...(senderId !== undefined ? { senderId } : {}),
+      ...(channel !== undefined ? { channel } : {}),
+      ...(taskStatus !== undefined ? { taskStatus } : {}),
+      ...(taskAction !== undefined ? { taskAction } : {}),
+      ...(assigneeId !== undefined ? { assigneeId } : {}),
+      ...(dueDate !== undefined ? { dueDate } : {}),
+      ...(sourceId !== undefined ? { sourceId } : {}),
+    },
+  });
+
+  if (emit) {
+    emitNotificationCreated(userId, notification.id);
+  }
+
+  return notification.id;
+}
+
+/**
+ * Create one notification per user ID.
+ *
+ * Useful for fan-out scenarios (e.g. notifying all managers).
+ * Returns the count of notifications created.
+ */
+export async function createNotificationsForUsers(
+  params: Omit<CreateNotificationParams, "userId"> & { userIds: string[] },
+): Promise<number> {
+  const { userIds, ...rest } = params;
+  let count = 0;
+  for (const userId of userIds) {
+    await createNotification({ ...rest, userId });
+    count++;
+  }
+  return count;
+}
diff --git a/packages/api/src/lib/estimate-reminders.ts b/packages/api/src/lib/estimate-reminders.ts
index 56cd182..50ef498 100644
--- a/packages/api/src/lib/estimate-reminders.ts
+++ b/packages/api/src/lib/estimate-reminders.ts
@@ -1,4 +1,4 @@
-import { emitNotificationCreated } from "../sse/event-bus.js";
+import { createNotificationsForUsers } from "./create-notification.js";
 
 type DbClient = {
   estimate: {
@@ -138,24 +138,19 @@ export async function checkPendingEstimateReminders(
         )
       : REMINDER_DAYS;
 
-    for (const manager of managers) {
-      const notification = await db.notification.create({
-        data: {
-          userId: manager.id,
-          type: "ESTIMATE_APPROVAL_REMINDER",
-          category: "REMINDER",
-          priority: "HIGH",
-          title: `Estimate awaiting approval: ${estimate.name} (v${version.versionNumber})`,
-          body: `Estimate "${estimate.name}" version ${version.versionNumber} has been pending approval for ${daysPending} days.`,
-          entityId: version.id,
-          entityType: "estimate_approval_reminder",
-          link: `/estimates/${estimate.id}`,
-          channel: "in_app",
-        },
-      });
-
-      emitNotificationCreated(manager.id, notification.id);
-    }
+    await createNotificationsForUsers({
+      db,
+      userIds: managers.map((m) => m.id),
+      type: "ESTIMATE_APPROVAL_REMINDER",
+      category: "REMINDER",
+      priority: "HIGH",
+      title: `Estimate awaiting approval: ${estimate.name} (v${version.versionNumber})`,
+      body: `Estimate "${estimate.name}" version ${version.versionNumber} has been pending approval for ${daysPending} days.`,
+      entityId: version.id,
+      entityType: "estimate_approval_reminder",
+      link: `/estimates/${estimate.id}`,
+      channel: "in_app",
+    });
 
     reminderCount++;
   }
diff --git a/packages/api/src/lib/vacation-conflicts.ts b/packages/api/src/lib/vacation-conflicts.ts
index 44e87b8..a20bf79 100644
--- a/packages/api/src/lib/vacation-conflicts.ts
+++ b/packages/api/src/lib/vacation-conflicts.ts
@@ -1,5 +1,5 @@
 import { VacationStatus } from "@planarchy/db";
-import { emitNotificationCreated } from "../sse/event-bus.js";
+import { createNotification } from "./create-notification.js";
 
 type DbClient = {
   vacation: {
@@ -189,21 +189,19 @@ export async function checkVacationConflicts(
 
     // Create a notification for the approver if provided
     if (approverUserId) {
-      const notification = await db.notification.create({
-        data: {
-          userId: approverUserId,
-          type: "VACATION_CONFLICT_WARNING",
-          category: "NOTIFICATION",
-          priority: "HIGH",
-          title: `Vacation conflict warning: ${vacation.resource.displayName}`,
-          body: warning,
-          entityId: vacationId,
-          entityType: "vacation",
-          link: "/vacations",
-          channel: "in_app",
-        },
+      await createNotification({
+        db,
+        userId: approverUserId,
+        type: "VACATION_CONFLICT_WARNING",
+        category: "NOTIFICATION",
+        priority: "HIGH",
+        title: `Vacation conflict warning: ${vacation.resource.displayName}`,
+        body: warning,
+        entityId: vacationId,
+        entityType: "vacation",
+        link: "/vacations",
+        channel: "in_app",
       });
-      emitNotificationCreated(approverUserId, notification.id);
     }
   }
 
diff --git a/packages/api/src/router/assistant-tools.ts b/packages/api/src/router/assistant-tools.ts
index cd417f5..e46e7b6 100644
--- a/packages/api/src/router/assistant-tools.ts
+++ b/packages/api/src/router/assistant-tools.ts
@@ -4,7 +4,7 @@
  */
 
 import { prisma } from "@planarchy/db";
-import { calculateAllocation, countWorkingDays } from "@planarchy/engine/allocation";
+import { calculateAllocation, checkDuplicateAssignment, countWorkingDays } from "@planarchy/engine/allocation";
 import { computeBudgetStatus } from "@planarchy/engine";
 import type { PermissionKey } from "@planarchy/shared";
 import { parseTaskAction } from "@planarchy/shared";
@@ -276,7 +276,7 @@ export const TOOL_DEFINITIONS: ToolDef[] = [
     type: "function",
     function: {
       name: "navigate_to_page",
-      description: "Navigate the user to a specific page in Planarchy, optionally with filters. Use this when the user wants to see data on a specific page (e.g. 'show me on the timeline', 'open the resources page').",
+      description: "Navigate the user to a specific page in CapaKraken, optionally with filters. Use this when the user wants to see data on a specific page (e.g. 'show me on the timeline', 'open the resources page').",
       parameters: {
         type: "object",
         properties: {
@@ -1020,7 +1020,7 @@ export const TOOL_DEFINITIONS: ToolDef[] = [
     type: "function",
     function: {
       name: "generate_project_cover",
-      description: "Generate an AI cover art image for a project using DALL-E. The image will be stored as the project's cover. Requires manageProjects permission and DALL-E to be configured.",
+      description: "Generate an AI cover art image for a project. Uses the configured image provider (DALL-E or Google Gemini). The image will be stored as the project's cover. Requires manageProjects permission.",
       parameters: {
         type: "object",
         properties: {
@@ -1351,6 +1351,54 @@ export const TOOL_DEFINITIONS: ToolDef[] = [
       },
     },
   },
+  {
+    type: "function",
+    function: {
+      name: "query_change_history",
+      description: "Search the activity history for changes to projects, resources, allocations, vacations, or any entity. Can filter by entity type, entity name, user, date range, or action type.",
+      parameters: {
+        type: "object",
+        properties: {
+          entityType: { type: "string", description: "Filter by entity type (e.g. 'Project', 'Resource', 'Allocation', 'Vacation', 'Role', 'Estimate')" },
+          search: { type: "string", description: "Search in entity name or summary text" },
+          userId: { type: "string", description: "Filter by user ID who made the change" },
+          daysBack: { type: "integer", description: "How many days back to search. Default: 7" },
+          action: { type: "string", description: "Filter by action type: CREATE, UPDATE, DELETE, SHIFT, IMPORT" },
+          limit: { type: "integer", description: "Max results. Default: 20" },
+        },
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "get_entity_timeline",
+      description: "Get the complete change history for a specific entity (project, resource, etc). Shows who made what changes and when.",
+      parameters: {
+        type: "object",
+        properties: {
+          entityType: { type: "string", description: "Entity type (e.g. 'Project', 'Resource', 'Allocation')" },
+          entityId: { type: "string", description: "Entity ID" },
+          limit: { type: "integer", description: "Max results. Default: 50" },
+        },
+        required: ["entityType", "entityId"],
+      },
+    },
+  },
+  {
+    type: "function",
+    function: {
+      name: "get_shoring_ratio",
+      description: "Get the onshore/offshore staffing ratio for a project. Higher offshore is better (cost-efficient). The threshold is the MINIMUM offshore target. Shows country breakdown and whether the target is met.",
+      parameters: {
+        type: "object",
+        properties: {
+          projectId: { type: "string", description: "Project ID or short code" },
+        },
+        required: ["projectId"],
+      },
+    },
+  },
 ];
 
 // ─── Helpers ────────────────────────────────────────────────────────────────
@@ -2161,6 +2209,16 @@ const executors = {
     const startDate = new Date(params.startDate);
     const endDate = new Date(params.endDate);
 
+    // Check for overlapping duplicate assignments (same resource + project + overlapping dates)
+    const existingAssignments = await ctx.db.assignment.findMany({
+      where: { resourceId: resource.id, status: { not: "CANCELLED" } },
+      select: { id: true, resourceId: true, projectId: true, startDate: true, endDate: true, status: true },
+    });
+    const dupCheck = checkDuplicateAssignment(resource.id, project.id, startDate, endDate, existingAssignments);
+    if (dupCheck.isDuplicate) {
+      return { error: dupCheck.message + " Use update_allocation_status to modify the existing assignment." };
+    }
+
     // Check for existing CANCELLED allocation with same unique key — reactivate it
     const existing = await ctx.db.assignment.findUnique({
       where: {
@@ -2968,6 +3026,16 @@ const executors = {
     }
     if (!resource) return { error: `Resource not found: ${params.resourceId}` };
 
+    // Check for overlapping duplicate assignments (same resource + project + overlapping dates)
+    const existingAssignments = await ctx.db.assignment.findMany({
+      where: { resourceId: resource.id, status: { not: "CANCELLED" } },
+      select: { id: true, resourceId: true, projectId: true, startDate: true, endDate: true, status: true },
+    });
+    const dupCheck = checkDuplicateAssignment(resource.id, demand.project.id, demand.startDate, demand.endDate, existingAssignments);
+    if (dupCheck.isDuplicate) {
+      return { error: dupCheck.message + " Use update_allocation_status to modify the existing assignment." };
+    }
+
     const roleName = demand.roleEntity?.name ?? demand.role ?? null;
     const dailyCostCents = Math.round(resource.lcrCents * demand.hoursPerDay);
     const assignment = await ctx.db.assignment.create({
@@ -3759,43 +3827,64 @@ const executors = {
     if (!project) return { error: `Project not found: ${params.projectId}` };
 
     const settings = await ctx.db.systemSettings.findUnique({ where: { id: "singleton" } });
-    if (!isDalleConfigured(settings)) {
-      return { error: "DALL-E is not configured. Set up the DALL-E deployment in Admin → Settings." };
+    const imageProvider = settings?.imageProvider ?? "dalle";
+    const { isGeminiConfigured: isGeminiOk } = await import("../gemini-client.js");
+    const useGemini = imageProvider === "gemini" && isGeminiOk(settings);
+    const useDalle = imageProvider === "dalle" && isDalleConfigured(settings);
+
+    if (!useGemini && !useDalle) {
+      return { error: "No image provider configured. Set up DALL-E or Gemini in Admin → Settings." };
     }
 
     const clientName = project.client?.name ? ` for ${project.client.name}` : "";
     const basePrompt = `Professional cover art for a 3D automotive visualization project: "${project.name}"${clientName}. Style: cinematic, modern, photorealistic CGI rendering, dramatic lighting, studio environment. No text or typography in the image.`;
     const finalPrompt = params.prompt ? `${basePrompt} Additional direction: ${params.prompt}` : basePrompt;
 
-    const dalleClient = createDalleClient(settings!);
-    const model = settings!.aiProvider === "azure" ? settings!.azureDalleDeployment! : "dall-e-3";
+    let coverImageUrl: string;
 
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const response: any = await dalleClient.images.generate({
-        model,
-        prompt: finalPrompt,
-        size: "1024x1024",
-        n: 1,
-        response_format: "b64_json",
-      });
+    if (useGemini) {
+      try {
+        const { generateGeminiImage, parseGeminiError } = await import("../gemini-client.js");
+        coverImageUrl = await generateGeminiImage(
+          settings!.geminiApiKey!,
+          finalPrompt,
+          settings!.geminiModel ?? undefined,
+        );
+      } catch (err) {
+        const { parseGeminiError: parseErr } = await import("../gemini-client.js");
+        return { error: `Gemini error: ${parseErr(err)}` };
+      }
+    } else {
+      const dalleClient = createDalleClient(settings!);
+      const model = settings!.aiProvider === "azure" ? settings!.azureDalleDeployment! : "dall-e-3";
 
-      const b64 = response.data?.[0]?.b64_json;
-      if (!b64) return { error: "No image data returned from DALL-E" };
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const response: any = await dalleClient.images.generate({
+          model,
+          prompt: finalPrompt,
+          size: "1024x1024",
+          n: 1,
+          response_format: "b64_json",
+        });
 
-      const coverImageUrl = `data:image/png;base64,${b64}`;
-      await ctx.db.project.update({ where: { id: params.projectId }, data: { coverImageUrl } });
-
-      return {
-        __action: "invalidate",
-        scope: ["project"],
-        success: true,
-        message: `Generated cover art for project "${project.name}"`,
-        coverImageUrl: coverImageUrl.slice(0, 100) + "...[truncated]",
-      };
-    } catch (err) {
-      return { error: `DALL-E error: ${parseAiError(err)}` };
+        const b64 = response.data?.[0]?.b64_json;
+        if (!b64) return { error: "No image data returned from DALL-E" };
+        coverImageUrl = `data:image/png;base64,${b64}`;
+      } catch (err) {
+        return { error: `DALL-E error: ${parseAiError(err)}` };
+      }
     }
+
+    await ctx.db.project.update({ where: { id: params.projectId }, data: { coverImageUrl } });
+
+    return {
+      __action: "invalidate",
+      scope: ["project"],
+      success: true,
+      message: `Generated cover art for project "${project.name}" using ${useGemini ? "Gemini" : "DALL-E"}`,
+      coverImageUrl: coverImageUrl.slice(0, 100) + "...[truncated]",
+    };
   },
 
   async remove_project_cover(params: { projectId: string }, ctx: ToolContext) {
@@ -5339,6 +5428,162 @@ const executors = {
       body: updated.body.slice(0, 100),
     };
   },
+
+  async query_change_history(params: {
+    entityType?: string;
+    search?: string;
+    userId?: string;
+    daysBack?: number;
+    action?: string;
+    limit?: number;
+  }, ctx: ToolContext) {
+    const limit = Math.min(params.limit ?? 20, 50);
+    const daysBack = params.daysBack ?? 7;
+
+    const startDate = new Date();
+    startDate.setDate(startDate.getDate() - daysBack);
+
+    const where: Record<string, unknown> = {
+      createdAt: { gte: startDate },
+    };
+
+    if (params.entityType) where.entityType = params.entityType;
+    if (params.action) where.action = params.action;
+    if (params.userId) where.userId = params.userId;
+
+    if (params.search) {
+      where.OR = [
+        { entityName: { contains: params.search, mode: "insensitive" } },
+        { summary: { contains: params.search, mode: "insensitive" } },
+        { entityType: { contains: params.search, mode: "insensitive" } },
+      ];
+    }
+
+    const entries = await ctx.db.auditLog.findMany({
+      where,
+      include: {
+        user: { select: { id: true, name: true, email: true } },
+      },
+      orderBy: { createdAt: "desc" },
+      take: limit,
+    });
+
+    if (entries.length === 0) {
+      return `No changes found in the last ${daysBack} days matching your criteria.`;
+    }
+
+    const lines = entries.map((e) => {
+      const who = e.user?.name ?? e.user?.email ?? "System";
+      const when = e.createdAt.toISOString().slice(0, 16).replace("T", " ");
+      const name = e.entityName ? ` "${e.entityName}"` : "";
+      const summary = e.summary ? ` — ${e.summary}` : "";
+      return `[${when}] ${who}: ${e.action} ${e.entityType}${name}${summary}`;
+    });
+
+    return `Found ${entries.length} changes (last ${daysBack} days):\n\n${lines.join("\n")}`;
+  },
+
+  async get_entity_timeline(params: {
+    entityType: string;
+    entityId: string;
+    limit?: number;
+  }, ctx: ToolContext) {
+    const limit = Math.min(params.limit ?? 50, 200);
+
+    const entries = await ctx.db.auditLog.findMany({
+      where: {
+        entityType: params.entityType,
+        entityId: params.entityId,
+      },
+      include: {
+        user: { select: { id: true, name: true, email: true } },
+      },
+      orderBy: { createdAt: "desc" },
+      take: limit,
+    });
+
+    if (entries.length === 0) {
+      return `No change history found for ${params.entityType} ${params.entityId}.`;
+    }
+
+    const entityName = entries[0]?.entityName ?? params.entityId;
+
+    const lines = entries.map((e) => {
+      const who = e.user?.name ?? e.user?.email ?? "System";
+      const when = e.createdAt.toISOString().slice(0, 16).replace("T", " ");
+      const summary = e.summary ?? e.action;
+      const source = e.source ? ` (via ${e.source})` : "";
+
+      // Include changed fields summary for UPDATE actions
+      const changes = e.changes as Record<string, unknown> | null;
+      const diff = changes?.diff as Record<string, { old: unknown; new: unknown }> | undefined;
+      let diffSummary = "";
+      if (diff && Object.keys(diff).length > 0) {
+        const fields = Object.entries(diff)
+          .slice(0, 3)
+          .map(([k, v]) => `${k}: ${JSON.stringify(v.old)} → ${JSON.stringify(v.new)}`)
+          .join("; ");
+        diffSummary = `\n    Changed: ${fields}`;
+        if (Object.keys(diff).length > 3) {
+          diffSummary += ` (+${Object.keys(diff).length - 3} more)`;
+        }
+      }
+
+      return `[${when}] ${who}${source}: ${summary}${diffSummary}`;
+    });
+
+    return `Change history for ${params.entityType} "${entityName}" (${entries.length} entries):\n\n${lines.join("\n")}`;
+  },
+
+  async get_shoring_ratio(params: { projectId: string }, ctx: ToolContext) {
+    const sel = { id: true, name: true, shortCode: true, shoringThreshold: true, onshoreCountryCode: true } as const;
+    let project = await ctx.db.project.findUnique({ where: { id: params.projectId }, select: sel });
+    if (!project) {
+      project = await ctx.db.project.findUnique({ where: { shortCode: params.projectId }, select: sel });
+    }
+    if (!project) return { error: `Project not found: ${params.projectId}` };
+
+    const assignments = await ctx.db.assignment.findMany({
+      where: { projectId: project.id, status: { not: "CANCELLED" } },
+      include: { resource: { include: { country: { select: { code: true } } } } },
+    });
+
+    if (assignments.length === 0) {
+      return `Project "${project.name}" (${project.shortCode}): No active assignments — shoring ratio not available.`;
+    }
+
+    const { calculateShoringRatio: calcShoring } = await import("@planarchy/engine/allocation");
+
+    const mapped = assignments.map((a) => {
+      const start = new Date(a.startDate);
+      const end = new Date(a.endDate);
+      const diffDays = Math.max(1, Math.round((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)) + 1);
+      const workingDays = Math.max(1, Math.round(diffDays / 7 * 5));
+      return {
+        resourceId: a.resourceId,
+        countryCode: a.resource.country?.code ?? null,
+        hoursPerDay: a.hoursPerDay,
+        workingDays,
+      };
+    });
+
+    const threshold = project.shoringThreshold ?? 55;
+    const onshoreCode = project.onshoreCountryCode ?? "DE";
+    const result = calcShoring(mapped, threshold, onshoreCode);
+
+    const countryParts = Object.entries(result.byCountry)
+      .sort((a, b) => b[1].pct - a[1].pct)
+      .map(([code, info]) => `${code} ${info.pct}% (${info.resourceCount} people)`)
+      .join(", ");
+
+    const status = result.offshoreRatio >= threshold
+      ? `Target met (>=${threshold}% offshore)`
+      : result.offshoreRatio >= threshold - 10
+        ? `Close to target (${threshold}% offshore needed)`
+        : `Below target — only ${result.offshoreRatio}% offshore, need ${threshold}%`;
+
+    return `Project "${project.name}" (${project.shortCode}): ${result.onshoreRatio}% onshore (${onshoreCode}), ${result.offshoreRatio}% offshore. ${status}. Breakdown: ${countryParts}.${result.unknownCount > 0 ? ` (${result.unknownCount} resource(s) without country)` : ""}`;
+  },
 };
 
 // ─── Executor ───────────────────────────────────────────────────────────────
@@ -5383,16 +5628,19 @@ export async function executeTool(
 
       if (actionType === "invalidate") {
         const scope = actionResult.scope as string[];
-        // Strip __action and scope from the result sent back to the AI
-        const { __action: _, scope: _s, ...rest } = actionResult;
+        // Strip __action, scope, and large data from the result sent back to the AI
+        const { __action: _, scope: _s, coverImageUrl: _img, ...rest } = actionResult;
+        const content = JSON.stringify(rest);
         return {
-          content: JSON.stringify(rest),
+          content: content.length > 4000 ? content.slice(0, 4000) + '..."' : content,
           action: { type: "invalidate", scope },
         };
       }
     }
 
-    return { content: JSON.stringify(result) };
+    // Cap tool result size to prevent oversized OpenAI conversation payloads
+    const content = typeof result === "string" ? result : JSON.stringify(result);
+    return { content: content.length > 8000 ? content.slice(0, 8000) + '..."' : content };
   } catch (err) {
     const msg = err instanceof Error ? err.message : String(err);
     return { content: JSON.stringify({ error: msg }) };
diff --git a/packages/api/src/router/assistant.ts b/packages/api/src/router/assistant.ts
index 085a1cc..7c9b855 100644
--- a/packages/api/src/router/assistant.ts
+++ b/packages/api/src/router/assistant.ts
@@ -12,7 +12,7 @@ import { TOOL_DEFINITIONS, executeTool, type ToolContext, type ToolAction } from
 
 const MAX_TOOL_ITERATIONS = 8;
 
-const SYSTEM_PROMPT = `Du bist der plANARCHY-Assistent — ein hilfreicher AI-Assistent für Ressourcenplanung und Projektmanagement in einer 3D-Produktionsumgebung.
+const SYSTEM_PROMPT = `Du bist der CapaKraken-Assistent — ein hilfreicher AI-Assistent für Ressourcenplanung und Projektmanagement in einer 3D-Produktionsumgebung.
 
 Deine Fähigkeiten:
 - Fragen über Ressourcen, Projekte, Allokationen, Budget, Urlaub, Estimates, Org-Struktur, Rollen, Blueprints, Rate Cards beantworten
diff --git a/packages/api/src/router/audit-log.ts b/packages/api/src/router/audit-log.ts
new file mode 100644
index 0000000..5de9f09
--- /dev/null
+++ b/packages/api/src/router/audit-log.ts
@@ -0,0 +1,242 @@
+import { z } from "zod";
+import { createTRPCRouter, controllerProcedure } from "../trpc.js";
+
+// ─── Router ───────────────────────────────────────────────────────────────────
+
+export const auditLogRouter = createTRPCRouter({
+  /**
+   * Paginated, filterable list of audit log entries.
+   * Cursor-based pagination using createdAt + id.
+   */
+  list: controllerProcedure
+    .input(
+      z.object({
+        entityType: z.string().optional(),
+        entityId: z.string().optional(),
+        userId: z.string().optional(),
+        action: z.string().optional(),
+        source: z.string().optional(),
+        startDate: z.date().optional(),
+        endDate: z.date().optional(),
+        search: z.string().optional(),
+        limit: z.number().min(1).max(100).default(50),
+        cursor: z.string().optional(), // id of the last item
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      const { entityType, entityId, userId, action, source, startDate, endDate, search, limit, cursor } = input;
+
+      const where: Record<string, unknown> = {};
+
+      if (entityType) where.entityType = entityType;
+      if (entityId) where.entityId = entityId;
+      if (userId) where.userId = userId;
+      if (action) where.action = action;
+      if (source) where.source = source;
+
+      if (startDate || endDate) {
+        const createdAt: Record<string, Date> = {};
+        if (startDate) createdAt.gte = startDate;
+        if (endDate) createdAt.lte = endDate;
+        where.createdAt = createdAt;
+      }
+
+      if (search) {
+        where.OR = [
+          { entityName: { contains: search, mode: "insensitive" } },
+          { summary: { contains: search, mode: "insensitive" } },
+          { entityType: { contains: search, mode: "insensitive" } },
+        ];
+      }
+
+      // Default to last 30 days if no date filter to avoid full table scan
+      if (!startDate && !endDate && !entityId) {
+        const thirtyDaysAgo = new Date();
+        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+        where.createdAt = { ...(where.createdAt as Record<string, Date> ?? {}), gte: thirtyDaysAgo };
+      }
+
+      const items = await ctx.db.auditLog.findMany({
+        where,
+        select: {
+          id: true,
+          entityType: true,
+          entityId: true,
+          entityName: true,
+          action: true,
+          userId: true,
+          source: true,
+          summary: true,
+          createdAt: true,
+          user: { select: { id: true, name: true, email: true } },
+          // Exclude 'changes' from list query — fetch on demand when expanding
+        },
+        orderBy: { createdAt: "desc" },
+        take: limit + 1,
+        ...(cursor ? { cursor: { id: cursor }, skip: 1 } : {}),
+      });
+
+      let nextCursor: string | undefined;
+      if (items.length > limit) {
+        const next = items.pop();
+        nextCursor = next?.id;
+      }
+
+      return { items, nextCursor };
+    }),
+
+  /**
+   * Get a single audit entry with full changes JSONB (for expand/detail view).
+   */
+  getById: controllerProcedure
+    .input(z.object({ id: z.string() }))
+    .query(async ({ ctx, input }) => {
+      return ctx.db.auditLog.findUniqueOrThrow({
+        where: { id: input.id },
+        include: { user: { select: { id: true, name: true, email: true } } },
+      });
+    }),
+
+  /**
+   * Get all audit entries for a specific entity (e.g. a project or resource).
+   */
+  getByEntity: controllerProcedure
+    .input(
+      z.object({
+        entityType: z.string(),
+        entityId: z.string(),
+        limit: z.number().min(1).max(200).default(50),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      return ctx.db.auditLog.findMany({
+        where: {
+          entityType: input.entityType,
+          entityId: input.entityId,
+        },
+        include: {
+          user: { select: { id: true, name: true, email: true } },
+        },
+        orderBy: { createdAt: "desc" },
+        take: input.limit,
+      });
+    }),
+
+  /**
+   * Timeline view: entries grouped by date (YYYY-MM-DD).
+   */
+  getTimeline: controllerProcedure
+    .input(
+      z.object({
+        startDate: z.date().optional(),
+        endDate: z.date().optional(),
+        limit: z.number().min(1).max(500).default(200),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      const where: Record<string, unknown> = {};
+
+      if (input.startDate || input.endDate) {
+        const createdAt: Record<string, Date> = {};
+        if (input.startDate) createdAt.gte = input.startDate;
+        if (input.endDate) createdAt.lte = input.endDate;
+        where.createdAt = createdAt;
+      }
+
+      const entries = await ctx.db.auditLog.findMany({
+        where,
+        include: {
+          user: { select: { id: true, name: true, email: true } },
+        },
+        orderBy: { createdAt: "desc" },
+        take: input.limit,
+      });
+
+      // Group by date string (YYYY-MM-DD)
+      const grouped: Record<string, typeof entries> = {};
+      for (const entry of entries) {
+        const dateKey = entry.createdAt.toISOString().slice(0, 10);
+        if (!grouped[dateKey]) grouped[dateKey] = [];
+        grouped[dateKey].push(entry);
+      }
+
+      return grouped;
+    }),
+
+  /**
+   * Activity summary: counts by entity type, action, and user for a date range.
+   */
+  getActivitySummary: controllerProcedure
+    .input(
+      z.object({
+        startDate: z.date().optional(),
+        endDate: z.date().optional(),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      const where: Record<string, unknown> = {};
+
+      if (input.startDate || input.endDate) {
+        const createdAt: Record<string, Date> = {};
+        if (input.startDate) createdAt.gte = input.startDate;
+        if (input.endDate) createdAt.lte = input.endDate;
+        where.createdAt = createdAt;
+      }
+
+      // Run aggregation queries in parallel
+      const [byEntityTypeRaw, byActionRaw, byUserRaw, total] = await Promise.all([
+        ctx.db.auditLog.groupBy({
+          by: ["entityType"],
+          where,
+          _count: { id: true },
+        }),
+        ctx.db.auditLog.groupBy({
+          by: ["action"],
+          where,
+          _count: { id: true },
+        }),
+        ctx.db.auditLog.groupBy({
+          by: ["userId"],
+          where,
+          _count: { id: true },
+          orderBy: { _count: { id: "desc" } },
+          take: 20,
+        }),
+        ctx.db.auditLog.count({ where }),
+      ]);
+
+      // Convert to simple Record<string, number>
+      const byEntityType: Record<string, number> = {};
+      for (const row of byEntityTypeRaw) {
+        byEntityType[row.entityType] = row._count.id;
+      }
+
+      const byAction: Record<string, number> = {};
+      for (const row of byActionRaw) {
+        byAction[row.action] = row._count.id;
+      }
+
+      // Resolve user names for the top users
+      const userIds = byUserRaw
+        .map((row) => row.userId)
+        .filter((id): id is string => id !== null);
+
+      const users = userIds.length > 0
+        ? await ctx.db.user.findMany({
+            where: { id: { in: userIds } },
+            select: { id: true, name: true, email: true },
+          })
+        : [];
+
+      const userMap = new Map(users.map((u) => [u.id, u.name ?? u.email]));
+
+      const byUser = byUserRaw
+        .filter((row) => row.userId !== null)
+        .map((row) => ({
+          name: userMap.get(row.userId!) ?? "Unknown",
+          count: row._count.id,
+        }));
+
+      return { byEntityType, byAction, byUser, total };
+    }),
+});
diff --git a/packages/api/src/router/blueprint.ts b/packages/api/src/router/blueprint.ts
index 8af44e9..5d1a567 100644
--- a/packages/api/src/router/blueprint.ts
+++ b/packages/api/src/router/blueprint.ts
@@ -3,6 +3,7 @@ import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
 import { adminProcedure, createTRPCRouter, protectedProcedure } from "../trpc.js";
+import { createAuditEntry } from "../lib/audit.js";
 
 export const blueprintRouter = createTRPCRouter({
   list: protectedProcedure
@@ -35,7 +36,7 @@ export const blueprintRouter = createTRPCRouter({
   create: adminProcedure
     .input(CreateBlueprintSchema)
     .mutation(async ({ ctx, input }) => {
-      return ctx.db.blueprint.create({
+      const blueprint = await ctx.db.blueprint.create({
         data: {
           name: input.name,
           target: input.target,
@@ -45,17 +46,30 @@ export const blueprintRouter = createTRPCRouter({
           validationRules: input.validationRules as unknown as import("@planarchy/db").Prisma.InputJsonValue,
         } as unknown as Parameters<typeof ctx.db.blueprint.create>[0]["data"],
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Blueprint",
+        entityId: blueprint.id,
+        entityName: blueprint.name,
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        after: { name: input.name, target: input.target, description: input.description },
+        source: "ui",
+      });
+
+      return blueprint;
     }),
 
   update: adminProcedure
     .input(z.object({ id: z.string(), data: UpdateBlueprintSchema }))
     .mutation(async ({ ctx, input }) => {
-      await findUniqueOrThrow(
+      const before = await findUniqueOrThrow(
         ctx.db.blueprint.findUnique({ where: { id: input.id } }),
         "Blueprint",
       );
 
-      return ctx.db.blueprint.update({
+      const updated = await ctx.db.blueprint.update({
         where: { id: input.id },
         data: {
           ...(input.data.name !== undefined ? { name: input.data.name } : {}),
@@ -65,30 +79,71 @@ export const blueprintRouter = createTRPCRouter({
           ...(input.data.validationRules !== undefined ? { validationRules: input.data.validationRules as unknown as import("@planarchy/db").Prisma.InputJsonValue } : {}),
         } as unknown as Parameters<typeof ctx.db.blueprint.update>[0]["data"],
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Blueprint",
+        entityId: input.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before: before as unknown as Record<string, unknown>,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return updated;
     }),
 
   /** Dedicated mutation for saving role presets — separate from field defs to avoid Zod depth issues */
   updateRolePresets: adminProcedure
     .input(z.object({ id: z.string(), rolePresets: z.array(z.unknown()) }))
     .mutation(async ({ ctx, input }) => {
-      await findUniqueOrThrow(
+      const before = await findUniqueOrThrow(
         ctx.db.blueprint.findUnique({ where: { id: input.id } }),
         "Blueprint",
       );
-      return ctx.db.blueprint.update({
+      const updated = await ctx.db.blueprint.update({
         where: { id: input.id },
         data: { rolePresets: input.rolePresets as unknown as import("@planarchy/db").Prisma.InputJsonValue },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Blueprint",
+        entityId: input.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before: { rolePresets: before.rolePresets },
+        after: { rolePresets: input.rolePresets },
+        source: "ui",
+        summary: "Updated role presets",
+      });
+
+      return updated;
     }),
 
   delete: adminProcedure
     .input(z.object({ id: z.string() }))
     .mutation(async ({ ctx, input }) => {
       // Soft delete — mark as inactive
-      return ctx.db.blueprint.update({
+      const deleted = await ctx.db.blueprint.update({
         where: { id: input.id },
         data: { isActive: false },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Blueprint",
+        entityId: input.id,
+        entityName: deleted.name,
+        action: "DELETE",
+        userId: ctx.dbUser?.id,
+        source: "ui",
+      });
+
+      return deleted;
     }),
 
   batchDelete: adminProcedure
@@ -100,6 +155,19 @@ export const blueprintRouter = createTRPCRouter({
           ctx.db.blueprint.update({ where: { id }, data: { isActive: false } }),
         ),
       );
+
+      for (const bp of updated) {
+        void createAuditEntry({
+          db: ctx.db,
+          entityType: "Blueprint",
+          entityId: bp.id,
+          entityName: bp.name,
+          action: "DELETE",
+          userId: ctx.dbUser?.id,
+          source: "ui",
+        });
+      }
+
       return { count: updated.length };
     }),
 
@@ -122,9 +190,23 @@ export const blueprintRouter = createTRPCRouter({
   setGlobal: adminProcedure
     .input(z.object({ id: z.string(), isGlobal: z.boolean() }))
     .mutation(async ({ ctx, input }) => {
-      return ctx.db.blueprint.update({
+      const updated = await ctx.db.blueprint.update({
         where: { id: input.id },
         data: { isGlobal: input.isGlobal },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Blueprint",
+        entityId: input.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        after: { isGlobal: input.isGlobal },
+        source: "ui",
+        summary: input.isGlobal ? "Set blueprint as global" : "Removed global flag from blueprint",
+      });
+
+      return updated;
     }),
 });
diff --git a/packages/api/src/router/calculation-rules.ts b/packages/api/src/router/calculation-rules.ts
index cf8e790..a5e0729 100644
--- a/packages/api/src/router/calculation-rules.ts
+++ b/packages/api/src/router/calculation-rules.ts
@@ -6,6 +6,7 @@ import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
 import { PROJECT_BRIEF_SELECT } from "../db/selects.js";
 import { createTRPCRouter, controllerProcedure, managerProcedure } from "../trpc.js";
+import { createAuditEntry } from "../lib/audit.js";
 
 export const calculationRuleRouter = createTRPCRouter({
   list: controllerProcedure.query(async ({ ctx }) => {
@@ -38,7 +39,7 @@ export const calculationRuleRouter = createTRPCRouter({
   create: managerProcedure
     .input(CreateCalculationRuleSchema)
     .mutation(async ({ ctx, input }) => {
-      return ctx.db.calculationRule.create({
+      const rule = await ctx.db.calculationRule.create({
         data: {
           name: input.name,
           triggerType: input.triggerType,
@@ -52,13 +53,26 @@ export const calculationRuleRouter = createTRPCRouter({
           isActive: input.isActive,
         },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "CalculationRule",
+        entityId: rule.id,
+        entityName: rule.name,
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        after: rule as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return rule;
     }),
 
   update: managerProcedure
     .input(UpdateCalculationRuleSchema)
     .mutation(async ({ ctx, input }) => {
       const { id, ...data } = input;
-      await findUniqueOrThrow(
+      const before = await findUniqueOrThrow(
         ctx.db.calculationRule.findUnique({ where: { id } }),
         "CalculationRule",
       );
@@ -76,20 +90,46 @@ export const calculationRuleRouter = createTRPCRouter({
       if (data.priority !== undefined) updateData.priority = data.priority;
       if (data.isActive !== undefined) updateData.isActive = data.isActive;
 
-      return ctx.db.calculationRule.update({
+      const updated = await ctx.db.calculationRule.update({
         where: { id },
         data: updateData,
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "CalculationRule",
+        entityId: id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before: before as unknown as Record<string, unknown>,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return updated;
     }),
 
   delete: managerProcedure
     .input(z.object({ id: z.string() }))
     .mutation(async ({ ctx, input }) => {
-      await findUniqueOrThrow(
+      const rule = await findUniqueOrThrow(
         ctx.db.calculationRule.findUnique({ where: { id: input.id } }),
         "CalculationRule",
       );
       await ctx.db.calculationRule.delete({ where: { id: input.id } });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "CalculationRule",
+        entityId: input.id,
+        entityName: rule.name,
+        action: "DELETE",
+        userId: ctx.dbUser?.id,
+        before: rule as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
       return { success: true };
     }),
 });
diff --git a/packages/api/src/router/client.ts b/packages/api/src/router/client.ts
index fb1eab5..12f0bdb 100644
--- a/packages/api/src/router/client.ts
+++ b/packages/api/src/router/client.ts
@@ -2,7 +2,8 @@ import { CreateClientSchema, UpdateClientSchema } from "@planarchy/shared";
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
-import { createTRPCRouter, managerProcedure, protectedProcedure } from "../trpc.js";
+import { createAuditEntry } from "../lib/audit.js";
+import { adminProcedure, createTRPCRouter, managerProcedure, protectedProcedure } from "../trpc.js";
 
 import type { ClientTree } from "@planarchy/shared";
 
@@ -13,6 +14,7 @@ interface FlatClient {
   parentId: string | null;
   isActive: boolean;
   sortOrder: number;
+  tags: string[];
   createdAt: Date;
   updatedAt: Date;
 }
@@ -96,14 +98,28 @@ export const clientRouter = createTRPCRouter({
         }
       }
 
-      return ctx.db.client.create({
+      const created = await ctx.db.client.create({
         data: {
           name: input.name,
           ...(input.code ? { code: input.code } : {}),
           ...(input.parentId ? { parentId: input.parentId } : {}),
           sortOrder: input.sortOrder,
+          ...(input.tags ? { tags: input.tags } : {}),
         },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Client",
+        entityId: created.id,
+        entityName: created.name,
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        after: created as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return created;
     }),
 
   update: managerProcedure
@@ -121,7 +137,9 @@ export const clientRouter = createTRPCRouter({
         }
       }
 
-      return ctx.db.client.update({
+      const before = existing as unknown as Record<string, unknown>;
+
+      const updated = await ctx.db.client.update({
         where: { id: input.id },
         data: {
           ...(input.data.name !== undefined ? { name: input.data.name } : {}),
@@ -129,16 +147,112 @@ export const clientRouter = createTRPCRouter({
           ...(input.data.sortOrder !== undefined ? { sortOrder: input.data.sortOrder } : {}),
           ...(input.data.isActive !== undefined ? { isActive: input.data.isActive } : {}),
           ...(input.data.parentId !== undefined ? { parentId: input.data.parentId } : {}),
+          ...(input.data.tags !== undefined ? { tags: input.data.tags } : {}),
         },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Client",
+        entityId: updated.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return updated;
     }),
 
   deactivate: managerProcedure
     .input(z.object({ id: z.string() }))
     .mutation(async ({ ctx, input }) => {
-      return ctx.db.client.update({
+      const updated = await ctx.db.client.update({
         where: { id: input.id },
         data: { isActive: false },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Client",
+        entityId: updated.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before: { isActive: true },
+        after: { isActive: false },
+        source: "ui",
+        summary: "Deactivated Client",
+      });
+
+      return updated;
+    }),
+
+  delete: adminProcedure
+    .input(z.object({ id: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      const client = await findUniqueOrThrow(
+        ctx.db.client.findUnique({
+          where: { id: input.id },
+          include: { _count: { select: { projects: true, children: true } } },
+        }),
+        "Client",
+      );
+      if (client._count.projects > 0) {
+        throw new TRPCError({
+          code: "PRECONDITION_FAILED",
+          message: `Cannot delete client with ${client._count.projects} project(s). Deactivate instead.`,
+        });
+      }
+      if (client._count.children > 0) {
+        throw new TRPCError({
+          code: "PRECONDITION_FAILED",
+          message: `Cannot delete client with ${client._count.children} child client(s). Remove children first.`,
+        });
+      }
+      await ctx.db.client.delete({ where: { id: input.id } });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Client",
+        entityId: client.id,
+        entityName: client.name,
+        action: "DELETE",
+        userId: ctx.dbUser?.id,
+        before: client as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return client;
+    }),
+
+  batchUpdateSortOrder: managerProcedure
+    .input(z.array(z.object({ id: z.string(), sortOrder: z.number().int() })))
+    .mutation(async ({ ctx, input }) => {
+      await ctx.db.$transaction(
+        input.map((item) =>
+          ctx.db.client.update({
+            where: { id: item.id },
+            data: { sortOrder: item.sortOrder },
+          }),
+        ),
+      );
+
+      for (const item of input) {
+        void createAuditEntry({
+          db: ctx.db,
+          entityType: "Client",
+          entityId: item.id,
+          action: "UPDATE",
+          userId: ctx.dbUser?.id,
+          after: { sortOrder: item.sortOrder },
+          source: "ui",
+          summary: "Updated sort order",
+        });
+      }
+
+      return { ok: true };
     }),
 });
diff --git a/packages/api/src/router/comment.ts b/packages/api/src/router/comment.ts
index d7246d5..6782e1f 100644
--- a/packages/api/src/router/comment.ts
+++ b/packages/api/src/router/comment.ts
@@ -2,7 +2,8 @@ import { z } from "zod";
 import { TRPCError } from "@trpc/server";
 import { SystemRole } from "@planarchy/shared";
 import { createTRPCRouter, protectedProcedure } from "../trpc.js";
-import { emitNotificationCreated } from "../sse/event-bus.js";
+import { createNotification } from "../lib/create-notification.js";
+import { createAuditEntry } from "../lib/audit.js";
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
@@ -138,25 +139,34 @@ export const commentRouter = createTRPCRouter({
           input.body.length > 120 ? `${input.body.slice(0, 120)}...` : input.body;
 
         await Promise.all(
-          mentionedUserIds.map(async (userId) => {
-            const notification = await ctx.db.notification.create({
-              data: {
-                userId,
-                type: "COMMENT_MENTION",
-                title: `${authorName} mentioned you in a comment`,
-                body: truncatedBody,
-                entityId: input.entityId,
-                entityType: input.entityType,
-                senderId: authorId,
-                link: `/estimates/${input.entityId}?tab=comments`,
-                channel: "in_app",
-              },
-            });
-            emitNotificationCreated(userId, notification.id);
-          }),
+          mentionedUserIds.map((userId) =>
+            createNotification({
+              db: ctx.db,
+              userId,
+              type: "COMMENT_MENTION",
+              title: `${authorName} mentioned you in a comment`,
+              body: truncatedBody,
+              entityId: input.entityId,
+              entityType: input.entityType,
+              senderId: authorId,
+              link: `/estimates/${input.entityId}?tab=comments`,
+              channel: "in_app",
+            }),
+          ),
         );
       }
 
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Comment",
+        entityId: comment.id,
+        entityName: input.body.slice(0, 50),
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        after: comment as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
       return comment;
     }),
 
@@ -190,13 +200,26 @@ export const commentRouter = createTRPCRouter({
         });
       }
 
-      return ctx.db.comment.update({
+      const updated = await ctx.db.comment.update({
         where: { id: input.id },
         data: { resolved: input.resolved },
         include: {
           author: { select: { id: true, name: true, email: true, image: true } },
         },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Comment",
+        entityId: input.id,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        summary: input.resolved ? "Resolved comment" : "Unresolved comment",
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return updated;
     }),
 
   /** Delete a comment (author or admin only). Hard-deletes, including all replies. */
@@ -229,5 +252,15 @@ export const commentRouter = createTRPCRouter({
       });
 
       await ctx.db.comment.delete({ where: { id: input.id } });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Comment",
+        entityId: input.id,
+        action: "DELETE",
+        userId: ctx.dbUser?.id,
+        before: existing as unknown as Record<string, unknown>,
+        source: "ui",
+      });
     }),
 });
diff --git a/packages/api/src/router/computation-graph.ts b/packages/api/src/router/computation-graph.ts
index c91352a..7942048 100644
--- a/packages/api/src/router/computation-graph.ts
+++ b/packages/api/src/router/computation-graph.ts
@@ -6,6 +6,9 @@ import {
   getMonthRange,
   countWorkingDaysInOverlap,
   DEFAULT_CALCULATION_RULES,
+  summarizeEstimateDemandLines,
+  computeEvenSpread,
+  distributeHoursToWeeks,
   type AssignmentSlice,
 } from "@planarchy/engine";
 import type { CalculationRule, AbsenceDay, SpainScheduleRule, WeekdayAvailability } from "@planarchy/shared";
@@ -141,9 +144,14 @@ export const computationGraphRouter = createTRPCRouter({
         select: { startDate: true, endDate: true, type: true, isHalfDay: true },
       });
 
-      // Build absence dates for SAH (ISO strings)
+      // Build absence dates for SAH (ISO strings), separating public holidays
+      const publicHolidayStrings: string[] = [];
       const absenceDateStrings: string[] = [];
       const absenceDays: AbsenceDay[] = [];
+      let halfDayCount = 0;
+      let vacationDayCount = 0;
+      let sickDayCount = 0;
+      let publicHolidayCount = 0;
       for (const v of vacations) {
         const vStart = new Date(Math.max(v.startDate.getTime(), monthStart.getTime()));
         const vEnd = new Date(Math.min(v.endDate.getTime(), monthEnd.getTime()));
@@ -156,12 +164,21 @@ export const computationGraphRouter = createTRPCRouter({
           : v.type === "PUBLIC_HOLIDAY" ? "PUBLIC_HOLIDAY" as const
           : "VACATION" as const;
         while (cursor <= endNorm) {
-          absenceDateStrings.push(cursor.toISOString().slice(0, 10));
+          const isoDate = cursor.toISOString().slice(0, 10);
+          if (triggerType === "PUBLIC_HOLIDAY") {
+            publicHolidayStrings.push(isoDate);
+            publicHolidayCount++;
+          } else {
+            absenceDateStrings.push(isoDate);
+            if (triggerType === "VACATION") vacationDayCount++;
+            if (triggerType === "SICK") sickDayCount++;
+          }
           absenceDays.push({
             date: new Date(cursor),
             type: triggerType,
             ...(v.isHalfDay ? { isHalfDay: true } : {}),
           });
+          if (v.isHalfDay) halfDayCount++;
           cursor.setUTCDate(cursor.getUTCDate() + 1);
         }
       }
@@ -187,7 +204,7 @@ export const computationGraphRouter = createTRPCRouter({
         fte: resource.fte,
         periodStart: monthStart,
         periodEnd: monthEnd,
-        publicHolidays: [],
+        publicHolidays: publicHolidayStrings,
         absenceDays: absenceDateStrings,
       });
 
@@ -301,6 +318,9 @@ export const computationGraphRouter = createTRPCRouter({
       const avgHoursPerDay = assignments.length > 0
         ? assignments.reduce((sum, a) => sum + a.hoursPerDay, 0) / assignments.length
         : 0;
+      const totalWorkingDaysInMonth = assignments.reduce((sum, a) => {
+        return sum + countWorkingDaysInOverlap(monthStart, monthEnd, a.startDate, a.endDate);
+      }, 0);
 
       // Format weekly availability for display
       const weekdayLabels = ["Mo", "Tu", "We", "Th", "Fr"];
@@ -311,30 +331,46 @@ export const computationGraphRouter = createTRPCRouter({
         ? `${weekdayValues[0]}h/day`
         : weekdayLabels.map((d, i) => `${d}:${weekdayValues[i]}`).join(" ");
 
+      // Derived utilization ratio
+      const utilizationPct = sahResult.standardAvailableHours > 0
+        ? (totalAllocHours / sahResult.standardAvailableHours) * 100
+        : 0;
+
+      // Has schedule rules (Spain variable hours)?
+      const hasScheduleRules = !!scheduleRules;
+
       const nodes: GraphNode[] = [
         // INPUT
         n("input.fte", "FTE", fmtNum(resource.fte, 2), "ratio", "INPUT", `Resource FTE factor`, 0),
         n("input.dailyHours", "Country Hours", `${dailyHours} h`, "hours", "INPUT", `Base daily working hours (${resource.country?.code ?? "?"})`, 0),
+        ...(hasScheduleRules ? [
+          n("input.scheduleRules", "Schedule Rules", "Spain", "—", "INPUT", "Variable daily hours (regular/friday/summer)", 0),
+        ] : []),
         n("input.weeklyAvail", "Weekly Avail.", `${weeklyTotalHours}h`, "h/week", "INPUT", `Resource availability: ${availabilityLabel}`, 0),
         n("input.lcrCents", "LCR", fmtEur(resource.lcrCents), "cents/h", "INPUT", "Loaded Cost Rate per hour", 0),
         n("input.hoursPerDay", "Hours/Day", fmtNum(avgHoursPerDay), "hours", "INPUT", "Average hours/day across assignments", 0),
-        n("input.absences", "Absences", `${absenceDays.length}`, "count", "INPUT", `Absence days in ${input.month}`, 0),
+        n("input.absences", "Absences", `${absenceDays.length}`, "count", "INPUT", `Absence days in ${input.month} (${vacationDayCount} vacation, ${sickDayCount} sick${halfDayCount > 0 ? `, ${halfDayCount} half-day` : ""})`, 0),
+        n("input.publicHolidays", "Public Holidays", `${publicHolidayCount}`, "count", "INPUT", `Public holidays in ${input.month}`, 0),
         n("input.calcRules", "Active Rules", `${calcRules.length}`, "count", "INPUT", "Active calculation rules", 0),
         n("input.targetPct", "Target", fmtPct(targetPct), "%", "INPUT", `Chargeability target (${resource.managementLevelGroup?.name ?? "legacy"})`, 0),
+        n("input.assignmentCount", "Assignments", `${assignments.length}`, "count", "INPUT", `Active assignments in ${input.month}`, 0),
 
         // SAH
         n("sah.calendarDays", "Calendar Days", `${sahResult.calendarDays}`, "days", "SAH", "Total calendar days in period", 1),
         n("sah.weekendDays", "Weekend Days", `${sahResult.weekendDays}`, "days", "SAH", "Saturday + Sunday count", 1),
         n("sah.grossWorkingDays", "Gross Work Days", `${sahResult.grossWorkingDays}`, "days", "SAH", "Calendar days minus weekends", 1, "calendarDays - weekendDays"),
-        n("sah.absenceDays", "Absence Ded.", `${sahResult.absenceDays}`, "days", "SAH", "Absences falling on working days", 1),
-        n("sah.netWorkingDays", "Net Work Days", `${sahResult.netWorkingDays}`, "days", "SAH", "Working days after deductions", 2, "gross - absences"),
-        n("sah.effectiveHoursPerDay", "Eff. Hrs/Day", fmtNum(sahResult.effectiveHoursPerDay), "hours", "SAH", "Average effective hours per net working day", 2, "Σ(dailyHours × FTE) / netDays"),
+        n("sah.publicHolidayDays", "Holiday Ded.", `${sahResult.publicHolidayDays}`, "days", "SAH", "Public holidays falling on working days", 1),
+        n("sah.absenceDays", "Absence Ded.", `${sahResult.absenceDays}`, "days", "SAH", "Absences (vacation/sick) falling on working days", 1),
+        n("sah.netWorkingDays", "Net Work Days", `${sahResult.netWorkingDays}`, "days", "SAH", "Working days after deductions", 2, "gross - holidays - absences"),
+        n("sah.effectiveHoursPerDay", "Eff. Hrs/Day", fmtNum(sahResult.effectiveHoursPerDay), "hours", "SAH", "Average effective hours per net working day (FTE-scaled)", 2, "Σ(dailyHours × FTE) / netDays"),
         n("sah.sah", "SAH", fmtNum(sahResult.standardAvailableHours), "hours", "SAH", "Standard Available Hours — chargeability denominator", 2, "Σ(dailyHours × FTE) per net day"),
 
         // ALLOCATION
-        n("alloc.totalHours", "Total Hours", fmtNum(totalAllocHours), "hours", "ALLOCATION", "Sum of effective hours across assignments", 2, "Σ(effectiveHours/day)"),
+        n("alloc.workingDays", "Work Days", `${totalWorkingDaysInMonth}`, "days", "ALLOCATION", "Working days covered by assignments in period", 1, "Σ(overlap workdays)"),
+        n("alloc.totalHours", "Total Hours", fmtNum(totalAllocHours), "hours", "ALLOCATION", "Sum of effective hours across assignments", 2, "Σ(min(h/day, avail) × workdays)"),
         n("alloc.dailyCostCents", "Daily Cost", fmtEur(dailyCostCents), "EUR", "ALLOCATION", "Cost per working day", 1, "hoursPerDay × LCR"),
-        n("alloc.totalCostCents", "Total Cost", fmtEur(totalAllocCostCents), "EUR", "ALLOCATION", "Sum of daily costs", 2, "Σ(dailyCost)"),
+        n("alloc.totalCostCents", "Total Cost", fmtEur(totalAllocCostCents), "EUR", "ALLOCATION", "Sum of daily costs", 2, "Σ(dailyCost × workdays)"),
+        n("alloc.utilizationPct", "Utilization", `${utilizationPct.toFixed(1)}%`, "%", "ALLOCATION", "Allocation utilization: allocated hours / SAH", 3, "totalHours / SAH × 100"),
         ...(hasRulesEffect ? [
           n("alloc.chargeableHours", "Chargeable Hrs", fmtNum(totalChargeableHours), "hours", "ALLOCATION", "Rules-adjusted chargeable hours", 2, "rules-adjusted"),
           n("alloc.projectCostCents", "Project Cost", fmtEur(totalProjectCostCents), "EUR", "ALLOCATION", "Rules-adjusted project cost", 2, "rules-adjusted"),
@@ -345,11 +381,29 @@ export const computationGraphRouter = createTRPCRouter({
           n("rules.activeRules", "Matched Rules", `${calcRules.length} rules`, "—", "RULES", "Rules evaluated for absence days", 1),
           n("rules.costEffect", "Cost Effect", hasRulesEffect ? "ZERO" : "—", "—", "RULES", "How absent days affect project cost", 1, "CHARGE / ZERO / REDUCE"),
           n("rules.chgEffect", "Chg Effect", hasRulesEffect ? "COUNT" : "—", "—", "RULES", "How absent days affect chargeability", 1, "COUNT / SKIP"),
+          ...(hasRulesEffect ? [
+            n("rules.costReduction", "Cost Reduction", "per rule", "—", "RULES", "Cost reduction percentage applied to absent hours", 2, "normalCost × (100 - reductionPct) / 100"),
+          ] : []),
         ] : []),
 
-        // CHARGEABILITY
+        // CHARGEABILITY — full breakdown from deriveResourceForecast
         n("chg.chgHours", "Chg Hours", fmtNum(forecast.chg * sahResult.standardAvailableHours), "hours", "CHARGEABILITY", "Total chargeable hours", 2, "Σ(Chg-category slices)"),
         n("chg.chg", "Chargeability", fmtPct(forecast.chg), "%", "CHARGEABILITY", "Chargeability ratio", 3, "chgHours / SAH"),
+        ...(forecast.bd > 0 ? [
+          n("chg.bd", "BD Ratio", fmtPct(forecast.bd), "%", "CHARGEABILITY", `Business development: ${fmtNum(forecast.bd * sahResult.standardAvailableHours)}h`, 3, "bdHours / SAH"),
+        ] : []),
+        ...(forecast.mdi > 0 ? [
+          n("chg.mdi", "MD&I Ratio", fmtPct(forecast.mdi), "%", "CHARGEABILITY", `MD&I hours: ${fmtNum(forecast.mdi * sahResult.standardAvailableHours)}h`, 3, "mdiHours / SAH"),
+        ] : []),
+        ...(forecast.mo > 0 ? [
+          n("chg.mo", "M&O Ratio", fmtPct(forecast.mo), "%", "CHARGEABILITY", `M&O hours: ${fmtNum(forecast.mo * sahResult.standardAvailableHours)}h`, 3, "moHours / SAH"),
+        ] : []),
+        ...(forecast.pdr > 0 ? [
+          n("chg.pdr", "PD&R Ratio", fmtPct(forecast.pdr), "%", "CHARGEABILITY", `PD&R hours: ${fmtNum(forecast.pdr * sahResult.standardAvailableHours)}h`, 3, "pdrHours / SAH"),
+        ] : []),
+        ...(forecast.absence > 0 ? [
+          n("chg.absence", "Absence Ratio", fmtPct(forecast.absence), "%", "CHARGEABILITY", `Absence hours: ${fmtNum(forecast.absence * sahResult.standardAvailableHours)}h`, 3, "absenceHours / SAH"),
+        ] : []),
         n("chg.unassigned", "Unassigned", fmtPct(forecast.unassigned), "%", "CHARGEABILITY", `${fmtNum(forecast.unassigned * sahResult.standardAvailableHours)}h of ${fmtNum(sahResult.standardAvailableHours)}h SAH not assigned`, 3, "max(0, SAH - assigned) / SAH"),
         n("chg.target", "Target", fmtPct(targetPct), "%", "CHARGEABILITY", "Chargeability target from management level", 3),
         n("chg.gap", "Gap to Target", `${forecast.chg - targetPct >= 0 ? "+" : ""}${((forecast.chg - targetPct) * 100).toFixed(1)} pp`, "pp", "CHARGEABILITY", `Chargeability (${fmtPct(forecast.chg)}) vs. target (${fmtPct(targetPct)})`, 3, "chargeability − target"),
@@ -361,10 +415,15 @@ export const computationGraphRouter = createTRPCRouter({
       const links: GraphLink[] = [
         // INPUT → SAH
         l("input.dailyHours", "sah.grossWorkingDays", "base hours", 1),
+        ...(hasScheduleRules ? [
+          l("input.scheduleRules", "sah.effectiveHoursPerDay", "variable h/day", 1),
+        ] : []),
         l("sah.calendarDays", "sah.grossWorkingDays", "− weekends", 2),
         l("sah.weekendDays", "sah.grossWorkingDays", "−", 1),
+        l("input.publicHolidays", "sah.publicHolidayDays", "∩ workdays", 1),
         l("input.absences", "sah.absenceDays", "∩ workdays", 1),
         l("sah.grossWorkingDays", "sah.netWorkingDays", "−", 2),
+        l("sah.publicHolidayDays", "sah.netWorkingDays", "−", 1),
         l("sah.absenceDays", "sah.netWorkingDays", "−", 1),
         l("input.dailyHours", "sah.effectiveHoursPerDay", "×", 1),
         l("input.fte", "sah.effectiveHoursPerDay", "× FTE", 2),
@@ -376,8 +435,14 @@ export const computationGraphRouter = createTRPCRouter({
         l("input.weeklyAvail", "alloc.totalHours", "caps h/day", 2),
         l("input.hoursPerDay", "alloc.dailyCostCents", "×", 1),
         l("input.lcrCents", "alloc.dailyCostCents", "× LCR", 2),
+        l("input.hoursPerDay", "alloc.workingDays", "per assignment", 1),
+        l("input.assignmentCount", "alloc.workingDays", "× overlap", 1),
+        l("alloc.workingDays", "alloc.totalHours", "× h/day", 2),
         l("input.hoursPerDay", "alloc.totalHours", "× workdays", 1),
-        l("alloc.dailyCostCents", "alloc.totalCostCents", "Σ", 2),
+        l("alloc.dailyCostCents", "alloc.totalCostCents", "× workdays", 2),
+        l("alloc.workingDays", "alloc.totalCostCents", "×", 1),
+        l("alloc.totalHours", "alloc.utilizationPct", "÷ SAH × 100", 2),
+        l("sah.sah", "alloc.utilizationPct", "÷", 1),
 
         // RULES → ALLOCATION (if absences)
         ...(absenceDays.length > 0 ? [
@@ -392,12 +457,20 @@ export const computationGraphRouter = createTRPCRouter({
           l("alloc.totalCostCents", "alloc.projectCostCents", "adjust", 1),
           l("rules.chgEffect", "alloc.chargeableHours", "apply", 2),
           l("alloc.totalHours", "alloc.chargeableHours", "adjust", 1),
+          ...(absenceDays.length > 0 ? [
+            l("rules.costEffect", "rules.costReduction", "reduce %", 1),
+          ] : []),
         ] : []),
 
         // ALLOCATION + SAH → CHARGEABILITY
         l(hasRulesEffect ? "alloc.chargeableHours" : "alloc.totalHours", "chg.chgHours", "Σ Chg", 2),
         l("chg.chgHours", "chg.chg", "÷ SAH", 2),
         l("sah.sah", "chg.chg", "÷", 2),
+        ...(forecast.bd > 0 ? [l("sah.sah", "chg.bd", "÷", 1)] : []),
+        ...(forecast.mdi > 0 ? [l("sah.sah", "chg.mdi", "÷", 1)] : []),
+        ...(forecast.mo > 0 ? [l("sah.sah", "chg.mo", "÷", 1)] : []),
+        ...(forecast.pdr > 0 ? [l("sah.sah", "chg.pdr", "÷", 1)] : []),
+        ...(forecast.absence > 0 ? [l("sah.sah", "chg.absence", "÷", 1)] : []),
         l("sah.sah", "chg.unassigned", "− assigned ÷ SAH", 1),
         l("chg.chgHours", "chg.unassigned", "SAH − Σ", 1),
         l("input.targetPct", "chg.target", "=", 1),
@@ -421,7 +494,7 @@ export const computationGraphRouter = createTRPCRouter({
     }),
 
   /**
-   * Project View: Estimate, Commercial, Budget
+   * Project View: Estimate, Commercial, Experience, Effort, Spread, Budget
    */
   getProjectData: controllerProcedure
     .input(z.object({
@@ -441,7 +514,7 @@ export const computationGraphRouter = createTRPCRouter({
         },
       });
 
-      // Load latest estimate version with demand lines
+      // Load latest estimate version with demand lines + scope items
       const estimate = await ctx.db.estimate.findFirst({
         where: { projectId: input.projectId },
         select: {
@@ -454,11 +527,38 @@ export const computationGraphRouter = createTRPCRouter({
               commercialTerms: true,
               demandLines: {
                 select: {
+                  id: true,
                   hours: true,
                   costRateCents: true,
                   billRateCents: true,
                   costTotalCents: true,
                   priceTotalCents: true,
+                  chapter: true,
+                  monthlySpread: true,
+                  scopeItemId: true,
+                  resourceId: true,
+                },
+              },
+              scopeItems: {
+                select: {
+                  id: true,
+                  name: true,
+                  scopeType: true,
+                  frameCount: true,
+                  itemCount: true,
+                  unitMode: true,
+                },
+              },
+              resourceSnapshots: {
+                select: {
+                  id: true,
+                  resourceId: true,
+                  displayName: true,
+                  chapter: true,
+                  lcrCents: true,
+                  ucrCents: true,
+                  location: true,
+                  level: true,
                 },
               },
             },
@@ -468,38 +568,66 @@ export const computationGraphRouter = createTRPCRouter({
       });
       const latestVersion = estimate?.versions[0];
 
+      // Load effort rule sets and experience multiplier sets for this project
+      let effortRuleCount = 0;
+      let experienceRuleCount = 0;
+      try {
+        effortRuleCount = await ctx.db.effortRule.count();
+        experienceRuleCount = await ctx.db.experienceMultiplierRule.count();
+      } catch {
+        // tables may not exist yet
+      }
+
       const nodes: GraphNode[] = [];
       const links: GraphLink[] = [];
 
-      // Budget inputs
+      // Budget + project inputs
       const hasBudget = project.budgetCents > 0;
+      const hasDateRange = !!(project.startDate && project.endDate);
       nodes.push(
         n("input.budgetCents", "Project Budget", hasBudget ? fmtEur(project.budgetCents) : "Not set", hasBudget ? "EUR" : "—", "INPUT", hasBudget ? `Budget for ${project.name}` : `No budget defined for ${project.name}`, 0),
         n("input.winProbability", "Win Probability", `${project.winProbability}%`, "%", "INPUT", "Project win probability", 0),
+        ...(hasDateRange ? [
+          n("input.projectStart", "Project Start", project.startDate!.toISOString().slice(0, 10), "date", "INPUT", "Project start date", 0),
+          n("input.projectEnd", "Project End", project.endDate!.toISOString().slice(0, 10), "date", "INPUT", "Project end date", 0),
+        ] : []),
       );
 
-
       if (latestVersion && latestVersion.demandLines.length > 0) {
         const lines = latestVersion.demandLines;
-        const totalHours = lines.reduce((s, dl) => s + dl.hours, 0);
-        const totalCostCents = lines.reduce((s, dl) => s + dl.costTotalCents, 0);
-        const totalPriceCents = lines.reduce((s, dl) => s + dl.priceTotalCents, 0);
-        const marginCents = totalPriceCents - totalCostCents;
-        const marginPct = totalPriceCents > 0 ? (marginCents / totalPriceCents) * 100 : 0;
+        const summary = summarizeEstimateDemandLines(lines);
+        const { totalHours, totalCostCents, totalPriceCents, marginCents, marginPercent: marginPct } = summary;
 
         // Average rates
         const avgCostRate = totalHours > 0 ? Math.round(totalCostCents / totalHours) : 0;
         const avgBillRate = totalHours > 0 ? Math.round(totalPriceCents / totalHours) : 0;
 
+        // Chapters
+        const chapterMap = new Map<string, number>();
+        for (const dl of lines) {
+          const ch = dl.chapter ?? "(none)";
+          chapterMap.set(ch, (chapterMap.get(ch) ?? 0) + dl.hours);
+        }
+        const chapterCount = chapterMap.size;
+
+        // Resource snapshots
+        const snapshotCount = latestVersion.resourceSnapshots?.length ?? 0;
+
         nodes.push(
           n("input.estLines", "Demand Lines", `${lines.length}`, "count", "INPUT", "Estimate demand line count", 0),
           n("input.avgCostRate", "Avg Cost Rate", fmtEur(avgCostRate), "cents/h", "INPUT", "Average cost rate across demand lines", 0),
           n("input.avgBillRate", "Avg Bill Rate", fmtEur(avgBillRate), "cents/h", "INPUT", "Average bill rate across demand lines", 0),
+          ...(snapshotCount > 0 ? [
+            n("input.resourceSnapshots", "Res. Snapshots", `${snapshotCount}`, "count", "INPUT", "Resource rate snapshots frozen in estimate version", 0),
+          ] : []),
           n("est.totalHours", "Est. Hours", fmtNum(totalHours), "hours", "ESTIMATE", "Total estimated hours", 2, "Σ(line.hours)"),
           n("est.totalCostCents", "Est. Cost", fmtEur(totalCostCents), "EUR", "ESTIMATE", "Total estimated cost", 2, "Σ(hours × costRate)"),
           n("est.totalPriceCents", "Est. Price", fmtEur(totalPriceCents), "EUR", "ESTIMATE", "Total estimated price", 2, "Σ(hours × billRate)"),
           n("est.marginCents", "Margin", fmtEur(marginCents), "EUR", "ESTIMATE", "Price minus cost", 3, "price - cost"),
           n("est.marginPercent", "Margin %", `${marginPct.toFixed(1)}%`, "%", "ESTIMATE", "Margin as percentage of price", 3, "margin / price × 100"),
+          ...(chapterCount > 1 ? [
+            n("est.chapters", "Chapters", `${chapterCount}`, "count", "ESTIMATE", `Demand lines grouped by ${chapterCount} chapters`, 1),
+          ] : []),
         );
 
         links.push(
@@ -512,13 +640,88 @@ export const computationGraphRouter = createTRPCRouter({
           l("est.totalCostCents", "est.marginCents", "−", 2),
           l("est.marginCents", "est.marginPercent", "÷ price × 100", 2),
           l("est.totalPriceCents", "est.marginPercent", "÷", 1),
+          ...(snapshotCount > 0 ? [
+            l("input.resourceSnapshots", "input.avgCostRate", "LCR snapshot", 1),
+            l("input.resourceSnapshots", "input.avgBillRate", "UCR snapshot", 1),
+          ] : []),
+          ...(chapterCount > 1 ? [
+            l("input.estLines", "est.chapters", "group by", 1),
+            l("est.chapters", "est.totalHours", "Σ per chapter", 1),
+          ] : []),
         );
 
-        // Commercial terms
-        const terms = latestVersion.commercialTerms as { contingencyPercent?: number; discountPercent?: number } | null;
-        if (terms && (terms.contingencyPercent || terms.discountPercent)) {
-          const contingencyPct = terms.contingencyPercent ?? 0;
-          const discountPct = terms.discountPercent ?? 0;
+        // ── EFFORT domain: scope items → demand line expansion ──
+        const scopeItems = latestVersion.scopeItems ?? [];
+        if (scopeItems.length > 0) {
+          const totalFrameCount = scopeItems.reduce((s, si) => s + (si.frameCount ?? 0), 0);
+          const totalItemCount = scopeItems.reduce((s, si) => s + (si.itemCount ?? 0), 0);
+          const scopeTypes = new Set(scopeItems.map((si) => si.scopeType));
+
+          nodes.push(
+            n("effort.scopeItems", "Scope Items", `${scopeItems.length}`, "count", "EFFORT", `${scopeItems.length} scope items across ${scopeTypes.size} type(s)`, 0),
+            ...(totalFrameCount > 0 ? [
+              n("effort.totalFrames", "Total Frames", `${totalFrameCount}`, "frames", "EFFORT", "Sum of frame counts across scope items", 1),
+            ] : []),
+            ...(totalItemCount > 0 ? [
+              n("effort.totalItems", "Total Items", fmtNum(totalItemCount), "items", "EFFORT", "Sum of item counts across scope items", 1),
+            ] : []),
+            n("effort.effortRules", "Effort Rules", `${effortRuleCount}`, "count", "EFFORT", "Configured effort expansion rules (scopeType → discipline)", 0),
+            n("effort.expandedHours", "Expanded Hours", fmtNum(totalHours), "hours", "EFFORT", "Total hours from scope-to-effort expansion (unitCount × hoursPerUnit)", 2, "Σ(unitCount × hoursPerUnit)"),
+          );
+
+          links.push(
+            l("effort.scopeItems", "effort.expandedHours", "expand", 2),
+            l("effort.effortRules", "effort.expandedHours", "× hoursPerUnit", 2),
+            ...(totalFrameCount > 0 ? [
+              l("effort.scopeItems", "effort.totalFrames", "Σ frames", 1),
+              l("effort.totalFrames", "effort.expandedHours", "per_frame", 1),
+            ] : []),
+            ...(totalItemCount > 0 ? [
+              l("effort.scopeItems", "effort.totalItems", "Σ items", 1),
+              l("effort.totalItems", "effort.expandedHours", "per_item", 1),
+            ] : []),
+            l("effort.expandedHours", "est.totalHours", "→ demand lines", 2),
+          );
+        }
+
+        // ── EXPERIENCE domain: multiplier rules ──
+        if (experienceRuleCount > 0) {
+          nodes.push(
+            n("exp.ruleCount", "Exp. Rules", `${experienceRuleCount}`, "count", "EXPERIENCE", "Experience multiplier rules (chapter/location/level → rate adjustments)", 0),
+            n("exp.costMultiplier", "Cost Multiplier", "per rule", "×", "EXPERIENCE", "Multiplier applied to cost rate (costRateCents × multiplier)", 1, "costRate × costMultiplier"),
+            n("exp.billMultiplier", "Bill Multiplier", "per rule", "×", "EXPERIENCE", "Multiplier applied to bill rate (billRateCents × multiplier)", 1, "billRate × billMultiplier"),
+            n("exp.shoringRatio", "Shoring Ratio", "per rule", "ratio", "EXPERIENCE", "Offshore/nearshore effort factor (onsiteHours + offshoreHours × (1 + additionalEffort))", 2, "onsite + offshore × (1 + addlEffort)"),
+            n("exp.adjustedRates", "Adjusted Rates", "applied", "—", "EXPERIENCE", "Final cost and bill rates after experience multipliers", 2, "rate × multiplier"),
+          );
+
+          links.push(
+            l("exp.ruleCount", "exp.costMultiplier", "match rule", 1),
+            l("exp.ruleCount", "exp.billMultiplier", "match rule", 1),
+            l("exp.ruleCount", "exp.shoringRatio", "match rule", 1),
+            l("exp.costMultiplier", "exp.adjustedRates", "×", 2),
+            l("exp.billMultiplier", "exp.adjustedRates", "×", 2),
+            l("exp.shoringRatio", "exp.adjustedRates", "adjust hours", 1),
+            l("exp.adjustedRates", "est.totalCostCents", "→ costRate", 1),
+            l("exp.adjustedRates", "est.totalPriceCents", "→ billRate", 1),
+          );
+        }
+
+        // ── COMMERCIAL terms (enhanced) ──
+        const terms = latestVersion.commercialTerms as {
+          contingencyPercent?: number;
+          discountPercent?: number;
+          pricingModel?: string;
+          paymentTermDays?: number;
+          warrantyMonths?: number;
+          paymentMilestones?: Array<{ label: string; percent: number; dueDate?: string | null }>;
+        } | null;
+
+        const hasCommercialAdjustments = terms && (terms.contingencyPercent || terms.discountPercent);
+        const hasCommercialMeta = terms && (terms.pricingModel || terms.paymentTermDays || terms.warrantyMonths);
+
+        if (hasCommercialAdjustments) {
+          const contingencyPct = terms!.contingencyPercent ?? 0;
+          const discountPct = terms!.discountPercent ?? 0;
           const contingencyCents = Math.round(totalCostCents * contingencyPct / 100);
           const discountCents = Math.round(totalPriceCents * discountPct / 100);
           const adjCost = totalCostCents + contingencyCents;
@@ -527,8 +730,8 @@ export const computationGraphRouter = createTRPCRouter({
           const adjMarginPct = adjPrice > 0 ? (adjMargin / adjPrice) * 100 : 0;
 
           nodes.push(
-            n("input.contingencyPct", "Contingency %", `${contingencyPct}%`, "%", "INPUT", "Contingency percentage", 0),
-            n("input.discountPct", "Discount %", `${discountPct}%`, "%", "INPUT", "Discount percentage", 0),
+            n("input.contingencyPct", "Contingency %", `${contingencyPct}%`, "%", "INPUT", "Contingency percentage (risk buffer on cost)", 0),
+            n("input.discountPct", "Discount %", `${discountPct}%`, "%", "INPUT", "Discount percentage (reduction on sell side)", 0),
             n("comm.contingencyCents", "Contingency", fmtEur(contingencyCents), "EUR", "COMMERCIAL", "Contingency surcharge", 2, "baseCost × contingency%"),
             n("comm.discountCents", "Discount", fmtEur(discountCents), "EUR", "COMMERCIAL", "Discount deduction", 2, "basePrice × discount%"),
             n("comm.adjustedCost", "Adj. Cost", fmtEur(adjCost), "EUR", "COMMERCIAL", "Cost plus contingency", 3, "baseCost + contingency"),
@@ -552,9 +755,87 @@ export const computationGraphRouter = createTRPCRouter({
             l("comm.adjustedPrice", "comm.adjustedMarginPct", "÷", 1),
           );
         }
+
+        // Commercial metadata nodes (pricingModel, payment terms, milestones)
+        if (hasCommercialMeta || (terms?.paymentMilestones && terms.paymentMilestones.length > 0)) {
+          if (terms!.pricingModel) {
+            nodes.push(
+              n("comm.pricingModel", "Pricing Model", terms!.pricingModel.replace(/_/g, " "), "—", "COMMERCIAL", `Pricing model: ${terms!.pricingModel}`, 0),
+            );
+          }
+          if (terms!.paymentTermDays) {
+            nodes.push(
+              n("comm.paymentTermDays", "Payment Terms", `${terms!.paymentTermDays} days`, "days", "COMMERCIAL", `Net payment terms: ${terms!.paymentTermDays} days`, 0),
+            );
+          }
+          if (terms!.warrantyMonths) {
+            nodes.push(
+              n("comm.warrantyMonths", "Warranty", `${terms!.warrantyMonths} mo`, "months", "COMMERCIAL", `Warranty period: ${terms!.warrantyMonths} months`, 0),
+            );
+          }
+          const milestones = terms!.paymentMilestones ?? [];
+          if (milestones.length > 0) {
+            const effectivePrice = hasCommercialAdjustments
+              ? totalPriceCents - Math.round(totalPriceCents * (terms!.discountPercent ?? 0) / 100)
+              : totalPriceCents;
+            nodes.push(
+              n("comm.milestones", "Milestones", `${milestones.length}`, "count", "COMMERCIAL", `${milestones.length} payment milestones (${milestones.map((m) => `${m.label}: ${m.percent}%`).join(", ")})`, 2),
+              n("comm.milestoneTotalPct", "Milestone Sum", `${milestones.reduce((s, m) => s + m.percent, 0).toFixed(0)}%`, "%", "COMMERCIAL", "Sum of milestone percentages (should be 100%)", 2, "Σ(milestone.percent)"),
+            );
+            links.push(
+              l(hasCommercialAdjustments ? "comm.adjustedPrice" : "est.totalPriceCents", "comm.milestones", "× %", 1),
+            );
+          }
+        }
+
+        // ── SPREAD domain: monthly + weekly distribution ──
+        if (hasDateRange) {
+          // Compute monthly spread from demand lines
+          const spreadResult = computeEvenSpread({
+            totalHours,
+            startDate: project.startDate!,
+            endDate: project.endDate!,
+          });
+          const monthCount = spreadResult.months.length;
+
+          // Compute weekly phasing
+          const weeklyResult = distributeHoursToWeeks({
+            totalHours,
+            startDate: project.startDate!.toISOString().slice(0, 10),
+            endDate: project.endDate!.toISOString().slice(0, 10),
+            pattern: "even",
+          });
+          const weekCount = weeklyResult.weeks.length;
+
+          // Check if demand lines have manual monthly spreads
+          const hasManualSpreads = lines.some((dl) => {
+            const spread = dl.monthlySpread as Record<string, number> | null;
+            return spread && Object.keys(spread).length > 0;
+          });
+
+          nodes.push(
+            n("spread.monthCount", "Months", `${monthCount}`, "count", "SPREAD", `${monthCount} months in project date range`, 1),
+            n("spread.weekCount", "Weeks", `${weekCount}`, "count", "SPREAD", `${weekCount} ISO weeks in project date range`, 1),
+            n("spread.monthlySpread", "Monthly Spread", hasManualSpreads ? "manual + even" : "even", "—", "SPREAD", "Hours distributed across months weighted by working days", 2, "hours × (monthWorkDays / totalWorkDays)"),
+            n("spread.weeklyPhasing", "Weekly Phasing", "even", "—", "SPREAD", "Hours distributed across ISO weeks (even/front/back-loaded)", 2, "totalHours / weekCount"),
+            n("spread.totalDistributed", "Distributed Hours", fmtNum(weeklyResult.totalDistributedHours), "hours", "SPREAD", "Total hours after weekly distribution (should match estimate)", 3, "Σ(weeklyHours)"),
+          );
+
+          links.push(
+            l("input.projectStart", "spread.monthCount", "→ range", 1),
+            l("input.projectEnd", "spread.monthCount", "→ range", 1),
+            l("input.projectStart", "spread.weekCount", "→ range", 1),
+            l("input.projectEnd", "spread.weekCount", "→ range", 1),
+            l("est.totalHours", "spread.monthlySpread", "distribute", 2),
+            l("spread.monthCount", "spread.monthlySpread", "÷ by workdays", 1),
+            l("est.totalHours", "spread.weeklyPhasing", "distribute", 2),
+            l("spread.weekCount", "spread.weeklyPhasing", "÷ by weeks", 1),
+            l("spread.weeklyPhasing", "spread.totalDistributed", "Σ", 2),
+          );
+        }
       }
 
-      // Budget status — always show allocation totals; remaining/utilization only when budget > 0
+      // ── Budget status ──
       const projectAllocs = await ctx.db.assignment.findMany({
         where: { projectId: input.projectId },
         select: { status: true, dailyCostCents: true, startDate: true, endDate: true, hoursPerDay: true },
@@ -575,6 +856,9 @@ export const computationGraphRouter = createTRPCRouter({
           project.endDate ?? new Date(),
         );
 
+        // Total allocated hours for comparison
+        const totalAllocatedHours = projectAllocs.reduce((sum, pa) => sum + pa.hoursPerDay, 0);
+
         nodes.push(
           n("budget.confirmedCents", "Confirmed", fmtEur(budgetStatus.confirmedCents), "EUR", "BUDGET", "Confirmed allocation costs", 2, "Σ(CONFIRMED allocs)"),
           n("budget.proposedCents", "Proposed", fmtEur(budgetStatus.proposedCents), "EUR", "BUDGET", "Proposed allocation costs", 2, "Σ(PROPOSED allocs)"),
@@ -590,9 +874,12 @@ export const computationGraphRouter = createTRPCRouter({
             hasBudget ? "Budget utilization" : "Cannot compute — no budget set",
             3, hasBudget ? "allocated / budget × 100" : "needs budget"),
           n("budget.weightedCents", "Win-Weighted", fmtEur(budgetStatus.winProbabilityWeightedCents), "EUR", "BUDGET", "Win-weighted cost", 3, "allocated × winProb / 100"),
+          n("budget.allocCount", "Allocations", `${projectAllocs.length}`, "count", "BUDGET", `${projectAllocs.length} resource allocations on project`, 1),
         );
 
         links.push(
+          l("budget.allocCount", "budget.confirmedCents", "Σ confirmed", 1),
+          l("budget.allocCount", "budget.proposedCents", "Σ proposed", 1),
           l("budget.confirmedCents", "budget.allocatedCents", "+", 2),
           l("budget.proposedCents", "budget.allocatedCents", "+", 2),
           l("input.budgetCents", "budget.remainingCents", "−", 2),
@@ -602,6 +889,25 @@ export const computationGraphRouter = createTRPCRouter({
           l("budget.allocatedCents", "budget.weightedCents", "× winProb / 100", 1),
           l("input.winProbability", "budget.weightedCents", "×", 1),
         );
+
+        // Estimate vs actual gap (if estimate exists)
+        if (latestVersion && latestVersion.demandLines.length > 0) {
+          const estCost = latestVersion.demandLines.reduce((s, dl) => s + dl.costTotalCents, 0);
+          const gapCents = budgetStatus.allocatedCents - estCost;
+          nodes.push(
+            n("budget.estVsActualGap", "Est. vs Actual", fmtEur(Math.abs(gapCents)), "EUR", "BUDGET",
+              gapCents > 0
+                ? `Actual allocations exceed estimate by ${fmtEur(gapCents)}`
+                : gapCents < 0
+                ? `Actual allocations under estimate by ${fmtEur(Math.abs(gapCents))}`
+                : "Actual allocations match estimate",
+              3, "allocated - estCost"),
+          );
+          links.push(
+            l("budget.allocatedCents", "budget.estVsActualGap", "−", 1),
+            l("est.totalCostCents", "budget.estVsActualGap", "−", 1),
+          );
+        }
       }
 
       return {
diff --git a/packages/api/src/router/country.ts b/packages/api/src/router/country.ts
index 08f1b1d..5db86de 100644
--- a/packages/api/src/router/country.ts
+++ b/packages/api/src/router/country.ts
@@ -8,6 +8,7 @@ import { Prisma } from "@planarchy/db";
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
+import { createAuditEntry } from "../lib/audit.js";
 import { adminProcedure, createTRPCRouter, protectedProcedure } from "../trpc.js";
 
 /** Convert nullable JSON to Prisma-compatible value (null → Prisma.JsonNull). */
@@ -52,7 +53,7 @@ export const countryRouter = createTRPCRouter({
       if (existing) {
         throw new TRPCError({ code: "CONFLICT", message: `Country code "${input.code}" already exists` });
       }
-      return ctx.db.country.create({
+      const created = await ctx.db.country.create({
         data: {
           code: input.code,
           name: input.name,
@@ -61,6 +62,19 @@ export const countryRouter = createTRPCRouter({
         },
         include: { metroCities: true },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Country",
+        entityId: created.id,
+        entityName: created.name,
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        after: created as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return created;
     }),
 
   update: adminProcedure
@@ -78,7 +92,9 @@ export const countryRouter = createTRPCRouter({
         }
       }
 
-      return ctx.db.country.update({
+      const before = existing as unknown as Record<string, unknown>;
+
+      const updated = await ctx.db.country.update({
         where: { id: input.id },
         data: {
           ...(input.data.code !== undefined ? { code: input.data.code } : {}),
@@ -89,6 +105,20 @@ export const countryRouter = createTRPCRouter({
         },
         include: { metroCities: true },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Country",
+        entityId: updated.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return updated;
     }),
 
   // ─── Metro City ─────────────────────────────────────────────
@@ -101,18 +131,51 @@ export const countryRouter = createTRPCRouter({
         "Country",
       );
 
-      return ctx.db.metroCity.create({
+      const created = await ctx.db.metroCity.create({
         data: { name: input.name, countryId: input.countryId },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "MetroCity",
+        entityId: created.id,
+        entityName: created.name,
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        after: created as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return created;
     }),
 
   updateCity: adminProcedure
     .input(z.object({ id: z.string(), data: UpdateMetroCitySchema }))
     .mutation(async ({ ctx, input }) => {
-      return ctx.db.metroCity.update({
+      const existing = await findUniqueOrThrow(
+        ctx.db.metroCity.findUnique({ where: { id: input.id } }),
+        "Metro city",
+      );
+      const before = existing as unknown as Record<string, unknown>;
+
+      const updated = await ctx.db.metroCity.update({
         where: { id: input.id },
         data: { ...(input.data.name !== undefined ? { name: input.data.name } : {}) },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "MetroCity",
+        entityId: updated.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return updated;
     }),
 
   deleteCity: adminProcedure
@@ -132,6 +195,18 @@ export const countryRouter = createTRPCRouter({
         });
       }
       await ctx.db.metroCity.delete({ where: { id: input.id } });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "MetroCity",
+        entityId: city.id,
+        entityName: city.name,
+        action: "DELETE",
+        userId: ctx.dbUser?.id,
+        before: city as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
       return { success: true };
     }),
 });
diff --git a/packages/api/src/router/dispo.ts b/packages/api/src/router/dispo.ts
new file mode 100644
index 0000000..4cdb3c2
--- /dev/null
+++ b/packages/api/src/router/dispo.ts
@@ -0,0 +1,452 @@
+import {
+  ImportBatchStatus,
+  StagedRecordStatus,
+  DispoStagedRecordType,
+} from "@planarchy/db";
+import {
+  assessDispoImportReadiness,
+  commitDispoImportBatch,
+  stageDispoImportBatch,
+} from "@planarchy/application";
+import { TRPCError } from "@trpc/server";
+import { z } from "zod";
+import { adminProcedure, createTRPCRouter } from "../trpc.js";
+import { createAuditEntry } from "../lib/audit.js";
+
+// ─── Shared schemas ──────────────────────────────────────────────────────────
+
+const paginationSchema = z.object({
+  cursor: z.string().optional(),
+  limit: z.number().int().min(1).max(200).default(50),
+});
+
+const importBatchStatusSchema = z.nativeEnum(ImportBatchStatus);
+const stagedRecordStatusSchema = z.nativeEnum(StagedRecordStatus);
+const stagedRecordTypeSchema = z.nativeEnum(DispoStagedRecordType);
+
+// ─── Router ──────────────────────────────────────────────────────────────────
+
+export const dispoRouter = createTRPCRouter({
+  // ── 1. stageImportBatch ──────────────────────────────────────────────────
+
+  stageImportBatch: adminProcedure
+    .input(
+      z.object({
+        chargeabilityWorkbookPath: z.string(),
+        costWorkbookPath: z.string().optional(),
+        notes: z.string().nullish(),
+        planningWorkbookPath: z.string(),
+        referenceWorkbookPath: z.string(),
+        rosterWorkbookPath: z.string().optional(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      return stageDispoImportBatch(ctx.db, {
+        chargeabilityWorkbookPath: input.chargeabilityWorkbookPath,
+        planningWorkbookPath: input.planningWorkbookPath,
+        referenceWorkbookPath: input.referenceWorkbookPath,
+        ...(input.costWorkbookPath !== undefined ? { costWorkbookPath: input.costWorkbookPath } : {}),
+        ...(input.notes !== undefined ? { notes: input.notes } : {}),
+        ...(input.rosterWorkbookPath !== undefined ? { rosterWorkbookPath: input.rosterWorkbookPath } : {}),
+      });
+    }),
+
+  // ── 2. validateImportBatch ───────────────────────────────────────────────
+
+  validateImportBatch: adminProcedure
+    .input(
+      z.object({
+        chargeabilityWorkbookPath: z.string(),
+        costWorkbookPath: z.string().optional(),
+        importBatchId: z.string().optional(),
+        notes: z.string().nullish(),
+        planningWorkbookPath: z.string(),
+        referenceWorkbookPath: z.string(),
+        rosterWorkbookPath: z.string().optional(),
+      }),
+    )
+    .query(async ({ input }) => {
+      return assessDispoImportReadiness({
+        chargeabilityWorkbookPath: input.chargeabilityWorkbookPath,
+        planningWorkbookPath: input.planningWorkbookPath,
+        referenceWorkbookPath: input.referenceWorkbookPath,
+        ...(input.costWorkbookPath !== undefined ? { costWorkbookPath: input.costWorkbookPath } : {}),
+        ...(input.importBatchId !== undefined ? { importBatchId: input.importBatchId } : {}),
+        ...(input.notes !== undefined ? { notes: input.notes } : {}),
+        ...(input.rosterWorkbookPath !== undefined ? { rosterWorkbookPath: input.rosterWorkbookPath } : {}),
+      });
+    }),
+
+  // ── 3. listImportBatches ─────────────────────────────────────────────────
+
+  listImportBatches: adminProcedure
+    .input(
+      paginationSchema.extend({
+        status: importBatchStatusSchema.optional(),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      const { cursor, limit, status } = input;
+
+      const items = await ctx.db.importBatch.findMany({
+        where: {
+          ...(status !== undefined ? { status } : {}),
+        },
+        orderBy: { createdAt: "desc" },
+        take: limit + 1,
+        ...(cursor ? { cursor: { id: cursor }, skip: 1 } : {}),
+      });
+
+      let nextCursor: string | undefined;
+      if (items.length > limit) {
+        const next = items.pop();
+        nextCursor = next?.id;
+      }
+
+      return { items, nextCursor };
+    }),
+
+  // ── 4. getImportBatch ────────────────────────────────────────────────────
+
+  getImportBatch: adminProcedure
+    .input(z.object({ id: z.string() }))
+    .query(async ({ ctx, input }) => {
+      const batch = await ctx.db.importBatch.findUnique({
+        where: { id: input.id },
+      });
+
+      if (!batch) {
+        throw new TRPCError({ code: "NOT_FOUND", message: `Import batch "${input.id}" not found` });
+      }
+
+      const [
+        resourceCount,
+        clientCount,
+        projectCount,
+        assignmentCount,
+        vacationCount,
+        availabilityRuleCount,
+        unresolvedCount,
+      ] = await Promise.all([
+        ctx.db.stagedResource.count({ where: { importBatchId: input.id } }),
+        ctx.db.stagedClient.count({ where: { importBatchId: input.id } }),
+        ctx.db.stagedProject.count({ where: { importBatchId: input.id } }),
+        ctx.db.stagedAssignment.count({ where: { importBatchId: input.id } }),
+        ctx.db.stagedVacation.count({ where: { importBatchId: input.id } }),
+        ctx.db.stagedAvailabilityRule.count({ where: { importBatchId: input.id } }),
+        ctx.db.stagedUnresolvedRecord.count({ where: { importBatchId: input.id } }),
+      ]);
+
+      return {
+        ...batch,
+        counts: {
+          assignmentCount,
+          availabilityRuleCount,
+          clientCount,
+          projectCount,
+          resourceCount,
+          unresolvedCount,
+          vacationCount,
+        },
+      };
+    }),
+
+  // ── 5. cancelImportBatch ─────────────────────────────────────────────────
+
+  cancelImportBatch: adminProcedure
+    .input(z.object({ id: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      const batch = await ctx.db.importBatch.findUnique({
+        where: { id: input.id },
+        select: { id: true, status: true },
+      });
+
+      if (!batch) {
+        throw new TRPCError({ code: "NOT_FOUND", message: `Import batch "${input.id}" not found` });
+      }
+
+      const terminalStatuses: ImportBatchStatus[] = [
+        ImportBatchStatus.COMMITTED,
+        ImportBatchStatus.CANCELLED,
+      ];
+      if (terminalStatuses.includes(batch.status)) {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: `Cannot cancel batch in status "${batch.status}"`,
+        });
+      }
+
+      const cancelled = await ctx.db.importBatch.update({
+        where: { id: input.id },
+        data: { status: ImportBatchStatus.CANCELLED },
+      });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "ImportBatch",
+        entityId: input.id,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        summary: "Cancelled import batch",
+        after: cancelled as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return cancelled;
+    }),
+
+  // ── 6. listStagedResources ───────────────────────────────────────────────
+
+  listStagedResources: adminProcedure
+    .input(
+      paginationSchema.extend({
+        importBatchId: z.string(),
+        status: stagedRecordStatusSchema.optional(),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      const { cursor, importBatchId, limit, status } = input;
+
+      const items = await ctx.db.stagedResource.findMany({
+        where: {
+          importBatchId,
+          ...(status !== undefined ? { status } : {}),
+        },
+        orderBy: { canonicalExternalId: "asc" },
+        take: limit + 1,
+        ...(cursor ? { cursor: { id: cursor }, skip: 1 } : {}),
+      });
+
+      let nextCursor: string | undefined;
+      if (items.length > limit) {
+        const next = items.pop();
+        nextCursor = next?.id;
+      }
+
+      return { items, nextCursor };
+    }),
+
+  // ── 7. listStagedProjects ────────────────────────────────────────────────
+
+  listStagedProjects: adminProcedure
+    .input(
+      paginationSchema.extend({
+        importBatchId: z.string(),
+        isTbd: z.boolean().optional(),
+        status: stagedRecordStatusSchema.optional(),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      const { cursor, importBatchId, isTbd, limit, status } = input;
+
+      const items = await ctx.db.stagedProject.findMany({
+        where: {
+          importBatchId,
+          ...(status !== undefined ? { status } : {}),
+          ...(isTbd !== undefined ? { isTbd } : {}),
+        },
+        orderBy: { projectKey: "asc" },
+        take: limit + 1,
+        ...(cursor ? { cursor: { id: cursor }, skip: 1 } : {}),
+      });
+
+      let nextCursor: string | undefined;
+      if (items.length > limit) {
+        const next = items.pop();
+        nextCursor = next?.id;
+      }
+
+      return { items, nextCursor };
+    }),
+
+  // ── 8. listStagedAssignments ─────────────────────────────────────────────
+
+  listStagedAssignments: adminProcedure
+    .input(
+      paginationSchema.extend({
+        importBatchId: z.string(),
+        resourceExternalId: z.string().optional(),
+        status: stagedRecordStatusSchema.optional(),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      const { cursor, importBatchId, limit, resourceExternalId, status } = input;
+
+      const items = await ctx.db.stagedAssignment.findMany({
+        where: {
+          importBatchId,
+          ...(status !== undefined ? { status } : {}),
+          ...(resourceExternalId !== undefined ? { resourceExternalId } : {}),
+        },
+        orderBy: { createdAt: "asc" },
+        take: limit + 1,
+        ...(cursor ? { cursor: { id: cursor }, skip: 1 } : {}),
+      });
+
+      let nextCursor: string | undefined;
+      if (items.length > limit) {
+        const next = items.pop();
+        nextCursor = next?.id;
+      }
+
+      return { items, nextCursor };
+    }),
+
+  // ── 9. listStagedVacations ───────────────────────────────────────────────
+
+  listStagedVacations: adminProcedure
+    .input(
+      paginationSchema.extend({
+        importBatchId: z.string(),
+        resourceExternalId: z.string().optional(),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      const { cursor, importBatchId, limit, resourceExternalId } = input;
+
+      const items = await ctx.db.stagedVacation.findMany({
+        where: {
+          importBatchId,
+          ...(resourceExternalId !== undefined ? { resourceExternalId } : {}),
+        },
+        orderBy: { startDate: "asc" },
+        take: limit + 1,
+        ...(cursor ? { cursor: { id: cursor }, skip: 1 } : {}),
+      });
+
+      let nextCursor: string | undefined;
+      if (items.length > limit) {
+        const next = items.pop();
+        nextCursor = next?.id;
+      }
+
+      return { items, nextCursor };
+    }),
+
+  // ── 10. listStagedUnresolvedRecords ──────────────────────────────────────
+
+  listStagedUnresolvedRecords: adminProcedure
+    .input(
+      paginationSchema.extend({
+        importBatchId: z.string(),
+        recordType: stagedRecordTypeSchema.optional(),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      const { cursor, importBatchId, limit, recordType } = input;
+
+      const items = await ctx.db.stagedUnresolvedRecord.findMany({
+        where: {
+          importBatchId,
+          ...(recordType !== undefined ? { recordType } : {}),
+        },
+        orderBy: { createdAt: "asc" },
+        take: limit + 1,
+        ...(cursor ? { cursor: { id: cursor }, skip: 1 } : {}),
+      });
+
+      let nextCursor: string | undefined;
+      if (items.length > limit) {
+        const next = items.pop();
+        nextCursor = next?.id;
+      }
+
+      return { items, nextCursor };
+    }),
+
+  // ── 11. resolveStagedRecord ──────────────────────────────────────────────
+
+  resolveStagedRecord: adminProcedure
+    .input(
+      z.object({
+        action: z.enum(["APPROVE", "REJECT", "SKIP"]),
+        id: z.string(),
+        recordType: stagedRecordTypeSchema,
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const statusMap: Record<string, StagedRecordStatus> = {
+        APPROVE: StagedRecordStatus.APPROVED,
+        REJECT: StagedRecordStatus.REJECTED,
+        SKIP: StagedRecordStatus.REJECTED,
+      };
+      const nextStatus = statusMap[input.action]!;
+
+      // Delegate table lookup based on record type
+      switch (input.recordType) {
+        case DispoStagedRecordType.RESOURCE:
+          return ctx.db.stagedResource.update({
+            where: { id: input.id },
+            data: { status: nextStatus },
+          });
+        case DispoStagedRecordType.CLIENT:
+          return ctx.db.stagedClient.update({
+            where: { id: input.id },
+            data: { status: nextStatus },
+          });
+        case DispoStagedRecordType.PROJECT:
+          return ctx.db.stagedProject.update({
+            where: { id: input.id },
+            data: { status: nextStatus },
+          });
+        case DispoStagedRecordType.ASSIGNMENT:
+          return ctx.db.stagedAssignment.update({
+            where: { id: input.id },
+            data: { status: nextStatus },
+          });
+        case DispoStagedRecordType.VACATION:
+          return ctx.db.stagedVacation.update({
+            where: { id: input.id },
+            data: { status: nextStatus },
+          });
+        case DispoStagedRecordType.AVAILABILITY_RULE:
+          return ctx.db.stagedAvailabilityRule.update({
+            where: { id: input.id },
+            data: { status: nextStatus },
+          });
+        case DispoStagedRecordType.UNRESOLVED:
+          return ctx.db.stagedUnresolvedRecord.update({
+            where: { id: input.id },
+            data: { status: nextStatus },
+          });
+        default:
+          throw new TRPCError({
+            code: "BAD_REQUEST",
+            message: `Unknown record type: ${input.recordType as string}`,
+          });
+      }
+    }),
+
+  // ── 12. commitImportBatch ────────────────────────────────────────────────
+
+  commitImportBatch: adminProcedure
+    .input(
+      z.object({
+        allowTbdUnresolved: z.boolean().optional(),
+        importBatchId: z.string(),
+        importTbdProjects: z.boolean().optional(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const result = await commitDispoImportBatch(ctx.db, {
+        importBatchId: input.importBatchId,
+        ...(input.allowTbdUnresolved !== undefined ? { allowTbdUnresolved: input.allowTbdUnresolved } : {}),
+        ...(input.importTbdProjects !== undefined ? { importTbdProjects: input.importTbdProjects } : {}),
+      });
+
+      const counts = result as unknown as Record<string, unknown>;
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "ImportBatch",
+        entityId: input.importBatchId,
+        entityName: input.importBatchId,
+        action: "IMPORT",
+        userId: ctx.dbUser?.id,
+        summary: `Committed import batch (${JSON.stringify(counts)})`,
+        after: counts,
+        source: "ui",
+      });
+
+      return result;
+    }),
+});
diff --git a/packages/api/src/router/effort-rule.ts b/packages/api/src/router/effort-rule.ts
index 0544bb1..d876eee 100644
--- a/packages/api/src/router/effort-rule.ts
+++ b/packages/api/src/router/effort-rule.ts
@@ -13,6 +13,7 @@ import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
 import { createTRPCRouter, controllerProcedure, managerProcedure } from "../trpc.js";
+import { createAuditEntry } from "../lib/audit.js";
 
 const ruleInclude = {
   rules: { orderBy: { sortOrder: "asc" as const } },
@@ -50,7 +51,7 @@ export const effortRuleRouter = createTRPCRouter({
         });
       }
 
-      return ctx.db.effortRuleSet.create({
+      const ruleSet = await ctx.db.effortRuleSet.create({
         data: {
           name: input.name,
           ...(input.description ? { description: input.description } : {}),
@@ -69,13 +70,26 @@ export const effortRuleRouter = createTRPCRouter({
         },
         include: ruleInclude,
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "EffortRuleSet",
+        entityId: ruleSet.id,
+        entityName: ruleSet.name,
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        after: { name: input.name, isDefault: input.isDefault, ruleCount: input.rules.length },
+        source: "ui",
+      });
+
+      return ruleSet;
     }),
 
   update: managerProcedure
     .input(UpdateEffortRuleSetSchema)
     .mutation(async ({ ctx, input }) => {
-      await findUniqueOrThrow(
-        ctx.db.effortRuleSet.findUnique({ where: { id: input.id } }),
+      const before = await findUniqueOrThrow(
+        ctx.db.effortRuleSet.findUnique({ where: { id: input.id }, include: ruleInclude }),
         "Effort rule set",
       );
 
@@ -104,7 +118,7 @@ export const effortRuleRouter = createTRPCRouter({
         });
       }
 
-      return ctx.db.effortRuleSet.update({
+      const updated = await ctx.db.effortRuleSet.update({
         where: { id: input.id },
         data: {
           ...(input.name !== undefined ? { name: input.name } : {}),
@@ -113,16 +127,41 @@ export const effortRuleRouter = createTRPCRouter({
         },
         include: ruleInclude,
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "EffortRuleSet",
+        entityId: input.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before: { name: before.name, isDefault: before.isDefault, ruleCount: before.rules.length },
+        after: { name: updated.name, isDefault: updated.isDefault, ruleCount: updated.rules.length },
+        source: "ui",
+      });
+
+      return updated;
     }),
 
   delete: managerProcedure
     .input(z.object({ id: z.string() }))
     .mutation(async ({ ctx, input }) => {
-      await findUniqueOrThrow(
+      const ruleSet = await findUniqueOrThrow(
         ctx.db.effortRuleSet.findUnique({ where: { id: input.id } }),
         "Effort rule set",
       );
       await ctx.db.effortRuleSet.delete({ where: { id: input.id } });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "EffortRuleSet",
+        entityId: input.id,
+        entityName: ruleSet.name,
+        action: "DELETE",
+        userId: ctx.dbUser?.id,
+        source: "ui",
+      });
+
       return { id: input.id };
     }),
 
diff --git a/packages/api/src/router/entitlement.ts b/packages/api/src/router/entitlement.ts
index dbed422..f3bae9a 100644
--- a/packages/api/src/router/entitlement.ts
+++ b/packages/api/src/router/entitlement.ts
@@ -8,6 +8,7 @@ import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { RESOURCE_BRIEF_SELECT } from "../db/selects.js";
 import { createTRPCRouter, adminProcedure, managerProcedure, protectedProcedure } from "../trpc.js";
+import { createAuditEntry } from "../lib/audit.js";
 
 /** Types that consume from annual leave balance */
 const BALANCE_TYPES: VacationType[] = [VacationType.ANNUAL, VacationType.OTHER];
@@ -189,12 +190,27 @@ export const entitlementRouter = createTRPCRouter({
         where: { resourceId_year: { resourceId: input.resourceId, year: input.year } },
       });
       if (existing) {
-        return ctx.db.vacationEntitlement.update({
+        const updated = await ctx.db.vacationEntitlement.update({
           where: { id: existing.id },
           data: { entitledDays: input.entitledDays },
         });
+
+        void createAuditEntry({
+          db: ctx.db,
+          entityType: "VacationEntitlement",
+          entityId: updated.id,
+          entityName: `Entitlement ${input.resourceId} / ${input.year}`,
+          action: "UPDATE",
+          ...(ctx.dbUser?.id ? { userId: ctx.dbUser.id } : {}),
+          before: existing as unknown as Record<string, unknown>,
+          after: updated as unknown as Record<string, unknown>,
+          source: "ui",
+          summary: `Updated entitlement from ${existing.entitledDays} to ${input.entitledDays} days (${input.year})`,
+        });
+
+        return updated;
       }
-      return ctx.db.vacationEntitlement.create({
+      const created = await ctx.db.vacationEntitlement.create({
         data: {
           resourceId: input.resourceId,
           year: input.year,
@@ -204,6 +220,20 @@ export const entitlementRouter = createTRPCRouter({
           pendingDays: 0,
         },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "VacationEntitlement",
+        entityId: created.id,
+        entityName: `Entitlement ${input.resourceId} / ${input.year}`,
+        action: "CREATE",
+        ...(ctx.dbUser?.id ? { userId: ctx.dbUser.id } : {}),
+        after: created as unknown as Record<string, unknown>,
+        source: "ui",
+        summary: `Set entitlement to ${input.entitledDays} days (${input.year})`,
+      });
+
+      return created;
     }),
 
   /**
@@ -244,6 +274,18 @@ export const entitlementRouter = createTRPCRouter({
         updated++;
       }
 
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "VacationEntitlement",
+        entityId: `bulk-${input.year}`,
+        entityName: `Bulk Entitlement ${input.year}`,
+        action: "UPDATE",
+        ...(ctx.dbUser?.id ? { userId: ctx.dbUser.id } : {}),
+        after: { year: input.year, entitledDays: input.entitledDays, resourceCount: updated } as unknown as Record<string, unknown>,
+        source: "ui",
+        summary: `Bulk set entitlement to ${input.entitledDays} days for ${updated} resources (${input.year})`,
+      });
+
       return { updated };
     }),
 
diff --git a/packages/api/src/router/experience-multiplier.ts b/packages/api/src/router/experience-multiplier.ts
index 62af83c..c16c751 100644
--- a/packages/api/src/router/experience-multiplier.ts
+++ b/packages/api/src/router/experience-multiplier.ts
@@ -12,6 +12,7 @@ import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
 import { createTRPCRouter, controllerProcedure, managerProcedure } from "../trpc.js";
+import { createAuditEntry } from "../lib/audit.js";
 
 const ruleInclude = {
   rules: { orderBy: { sortOrder: "asc" as const } },
@@ -72,7 +73,7 @@ export const experienceMultiplierRouter = createTRPCRouter({
         });
       }
 
-      return ctx.db.experienceMultiplierSet.create({
+      const set = await ctx.db.experienceMultiplierSet.create({
         data: {
           name: input.name,
           ...(input.description ? { description: input.description } : {}),
@@ -93,13 +94,26 @@ export const experienceMultiplierRouter = createTRPCRouter({
         },
         include: ruleInclude,
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "ExperienceMultiplierSet",
+        entityId: set.id,
+        entityName: set.name,
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        after: { name: input.name, isDefault: input.isDefault, ruleCount: input.rules.length },
+        source: "ui",
+      });
+
+      return set;
     }),
 
   update: managerProcedure
     .input(UpdateExperienceMultiplierSetSchema)
     .mutation(async ({ ctx, input }) => {
-      await findUniqueOrThrow(
-        ctx.db.experienceMultiplierSet.findUnique({ where: { id: input.id } }),
+      const before = await findUniqueOrThrow(
+        ctx.db.experienceMultiplierSet.findUnique({ where: { id: input.id }, include: ruleInclude }),
         "Experience multiplier set",
       );
 
@@ -128,7 +142,7 @@ export const experienceMultiplierRouter = createTRPCRouter({
         });
       }
 
-      return ctx.db.experienceMultiplierSet.update({
+      const updated = await ctx.db.experienceMultiplierSet.update({
         where: { id: input.id },
         data: {
           ...(input.name !== undefined ? { name: input.name } : {}),
@@ -137,16 +151,41 @@ export const experienceMultiplierRouter = createTRPCRouter({
         },
         include: ruleInclude,
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "ExperienceMultiplierSet",
+        entityId: input.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before: { name: before.name, isDefault: before.isDefault, ruleCount: before.rules.length },
+        after: { name: updated.name, isDefault: updated.isDefault, ruleCount: updated.rules.length },
+        source: "ui",
+      });
+
+      return updated;
     }),
 
   delete: managerProcedure
     .input(z.object({ id: z.string() }))
     .mutation(async ({ ctx, input }) => {
-      await findUniqueOrThrow(
+      const set = await findUniqueOrThrow(
         ctx.db.experienceMultiplierSet.findUnique({ where: { id: input.id } }),
         "Experience multiplier set",
       );
       await ctx.db.experienceMultiplierSet.delete({ where: { id: input.id } });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "ExperienceMultiplierSet",
+        entityId: input.id,
+        entityName: set.name,
+        action: "DELETE",
+        userId: ctx.dbUser?.id,
+        source: "ui",
+      });
+
       return { id: input.id };
     }),
 
diff --git a/packages/api/src/router/index.ts b/packages/api/src/router/index.ts
index 38f4df3..6564a96 100644
--- a/packages/api/src/router/index.ts
+++ b/packages/api/src/router/index.ts
@@ -1,6 +1,7 @@
 import { createTRPCRouter } from "../trpc.js";
 import { allocationRouter } from "./allocation.js";
 import { assistantRouter } from "./assistant.js";
+import { auditLogRouter } from "./audit-log.js";
 import { calculationRuleRouter } from "./calculation-rules.js";
 import { blueprintRouter } from "./blueprint.js";
 import { chargeabilityReportRouter } from "./chargeability-report.js";
@@ -9,6 +10,7 @@ import { clientRouter } from "./client.js";
 import { commentRouter } from "./comment.js";
 import { countryRouter } from "./country.js";
 import { dashboardRouter } from "./dashboard.js";
+import { dispoRouter } from "./dispo.js";
 import { effortRuleRouter } from "./effort-rule.js";
 import { experienceMultiplierRouter } from "./experience-multiplier.js";
 import { estimateRouter } from "./estimate.js";
@@ -35,7 +37,9 @@ import { webhookRouter } from "./webhook.js";
 
 export const appRouter = createTRPCRouter({
   assistant: assistantRouter,
+  auditLog: auditLogRouter,
   dashboard: dashboardRouter,
+  dispo: dispoRouter,
   effortRule: effortRuleRouter,
   experienceMultiplier: experienceMultiplierRouter,
   estimate: estimateRouter,
diff --git a/packages/api/src/router/management-level.ts b/packages/api/src/router/management-level.ts
index 9bbc266..6e8eb5f 100644
--- a/packages/api/src/router/management-level.ts
+++ b/packages/api/src/router/management-level.ts
@@ -7,6 +7,7 @@ import {
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
+import { createAuditEntry } from "../lib/audit.js";
 import { adminProcedure, createTRPCRouter, protectedProcedure } from "../trpc.js";
 
 export const managementLevelRouter = createTRPCRouter({
@@ -42,7 +43,7 @@ export const managementLevelRouter = createTRPCRouter({
       if (existing) {
         throw new TRPCError({ code: "CONFLICT", message: `Group "${input.name}" already exists` });
       }
-      return ctx.db.managementLevelGroup.create({
+      const created = await ctx.db.managementLevelGroup.create({
         data: {
           name: input.name,
           targetPercentage: input.targetPercentage,
@@ -50,6 +51,19 @@ export const managementLevelRouter = createTRPCRouter({
         },
         include: { levels: true },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "ManagementLevelGroup",
+        entityId: created.id,
+        entityName: created.name,
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        after: created as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return created;
     }),
 
   updateGroup: adminProcedure
@@ -67,7 +81,9 @@ export const managementLevelRouter = createTRPCRouter({
         }
       }
 
-      return ctx.db.managementLevelGroup.update({
+      const before = existing as unknown as Record<string, unknown>;
+
+      const updated = await ctx.db.managementLevelGroup.update({
         where: { id: input.id },
         data: {
           ...(input.data.name !== undefined ? { name: input.data.name } : {}),
@@ -76,6 +92,20 @@ export const managementLevelRouter = createTRPCRouter({
         },
         include: { levels: true },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "ManagementLevelGroup",
+        entityId: updated.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return updated;
     }),
 
   // ─── Levels ─────────────────────────────────────────────
@@ -93,9 +123,22 @@ export const managementLevelRouter = createTRPCRouter({
         throw new TRPCError({ code: "CONFLICT", message: `Level "${input.name}" already exists` });
       }
 
-      return ctx.db.managementLevel.create({
+      const created = await ctx.db.managementLevel.create({
         data: { name: input.name, groupId: input.groupId },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "ManagementLevel",
+        entityId: created.id,
+        entityName: created.name,
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        after: created as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return created;
     }),
 
   updateLevel: adminProcedure
@@ -113,13 +156,29 @@ export const managementLevelRouter = createTRPCRouter({
         }
       }
 
-      return ctx.db.managementLevel.update({
+      const before = existing as unknown as Record<string, unknown>;
+
+      const updated = await ctx.db.managementLevel.update({
         where: { id: input.id },
         data: {
           ...(input.data.name !== undefined ? { name: input.data.name } : {}),
           ...(input.data.groupId !== undefined ? { groupId: input.data.groupId } : {}),
         },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "ManagementLevel",
+        entityId: updated.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return updated;
     }),
 
   deleteLevel: adminProcedure
@@ -139,6 +198,18 @@ export const managementLevelRouter = createTRPCRouter({
         });
       }
       await ctx.db.managementLevel.delete({ where: { id: input.id } });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "ManagementLevel",
+        entityId: level.id,
+        entityName: level.name,
+        action: "DELETE",
+        userId: ctx.dbUser?.id,
+        before: level as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
       return { success: true };
     }),
 });
diff --git a/packages/api/src/router/notification.ts b/packages/api/src/router/notification.ts
index dc8b40e..4088e14 100644
--- a/packages/api/src/router/notification.ts
+++ b/packages/api/src/router/notification.ts
@@ -9,6 +9,7 @@ import {
   emitTaskStatusChanged,
   emitBroadcastSent,
 } from "../sse/event-bus.js";
+import { createNotification } from "../lib/create-notification.js";
 import { resolveRecipients } from "../lib/notification-targeting.js";
 import { sendEmail } from "../lib/email.js";
 
@@ -154,31 +155,28 @@ export const notificationRouter = createTRPCRouter({
     .mutation(async ({ ctx, input }) => {
       const currentUserId = ctx.dbUser.id;
 
-      const n = await ctx.db.notification.create({
-        data: {
-          userId: input.userId,
-          type: input.type,
-          title: input.title,
-          ...(input.body !== undefined ? { body: input.body } : {}),
-          ...(input.entityId !== undefined ? { entityId: input.entityId } : {}),
-          ...(input.entityType !== undefined ? { entityType: input.entityType } : {}),
-          ...(input.category !== undefined ? { category: input.category } : {}),
-          ...(input.priority !== undefined ? { priority: input.priority } : {}),
-          ...(input.link !== undefined ? { link: input.link } : {}),
-          ...(input.taskStatus !== undefined ? { taskStatus: input.taskStatus } : {}),
-          ...(input.taskAction !== undefined ? { taskAction: input.taskAction } : {}),
-          ...(input.assigneeId !== undefined ? { assigneeId: input.assigneeId } : {}),
-          ...(input.dueDate !== undefined ? { dueDate: input.dueDate } : {}),
-          ...(input.channel !== undefined ? { channel: input.channel } : {}),
-          senderId: input.senderId ?? currentUserId,
-        },
+      const notificationId = await createNotification({
+        db: ctx.db,
+        userId: input.userId,
+        type: input.type,
+        title: input.title,
+        body: input.body,
+        entityId: input.entityId,
+        entityType: input.entityType,
+        category: input.category,
+        priority: input.priority,
+        link: input.link,
+        taskStatus: input.taskStatus,
+        taskAction: input.taskAction,
+        assigneeId: input.assigneeId,
+        dueDate: input.dueDate,
+        channel: input.channel,
+        senderId: input.senderId ?? currentUserId,
       });
 
-      emitNotificationCreated(input.userId, n.id);
-
       // Emit task-specific events
       if (input.category === "TASK" || input.category === "APPROVAL") {
-        emitTaskAssigned(input.userId, n.id);
+        emitTaskAssigned(input.userId, notificationId);
       }
 
       // Email if channel includes email
@@ -187,6 +185,8 @@ export const notificationRouter = createTRPCRouter({
         void sendNotificationEmail(ctx.db, input.userId, input.title, input.body);
       }
 
+      // Re-fetch for return value (to maintain API contract)
+      const n = await ctx.db.notification.findUnique({ where: { id: notificationId } });
       return n;
     }),
 
@@ -332,6 +332,9 @@ export const notificationRouter = createTRPCRouter({
     .mutation(async ({ ctx, input }) => {
       const userId = await resolveUserId(ctx);
 
+      // Reminders have extra fields (remindAt, nextRemindAt, recurrence) not covered
+      // by the generic helper, so we keep the direct create here but still use
+      // the exactOptionalPropertyTypes spread pattern.
       return ctx.db.notification.create({
         data: {
           userId,
@@ -479,54 +482,51 @@ export const notificationRouter = createTRPCRouter({
       // 4. Create individual notifications for each recipient
       const isTask = input.category === "TASK" || input.category === "APPROVAL";
 
-      const notifications = await Promise.all(
-        recipientIds.map((recipientUserId) =>
-          ctx.db.notification.create({
-            data: {
-              userId: recipientUserId,
-              type: `BROADCAST_${input.category}`,
-              title: input.title,
-              ...(input.body !== undefined ? { body: input.body } : {}),
-              ...(input.link !== undefined ? { link: input.link } : {}),
-              category: input.category,
-              priority: input.priority,
-              channel: input.channel,
-              sourceId: broadcast.id,
-              senderId,
-              ...(isTask ? { taskStatus: "OPEN" as const } : {}),
-              ...(input.taskAction !== undefined ? { taskAction: input.taskAction } : {}),
-              ...(input.dueDate !== undefined ? { dueDate: input.dueDate } : {}),
-            },
-          }),
-        ),
-      );
+      // SSE emit handled by createNotification; task events need separate emit
+      const notificationIds: Array<{ id: string; userId: string }> = [];
+      for (const recipientUserId of recipientIds) {
+        const nId = await createNotification({
+          db: ctx.db,
+          userId: recipientUserId,
+          type: `BROADCAST_${input.category}`,
+          title: input.title,
+          body: input.body,
+          link: input.link,
+          category: input.category,
+          priority: input.priority,
+          channel: input.channel,
+          sourceId: broadcast.id,
+          senderId,
+          taskStatus: isTask ? "OPEN" : undefined,
+          taskAction: input.taskAction,
+          dueDate: input.dueDate,
+        });
+        notificationIds.push({ id: nId, userId: recipientUserId });
+        if (isTask) {
+          emitTaskAssigned(recipientUserId, nId);
+        }
+      }
 
       // 5. Update broadcast with sent info
       await ctx.db.notificationBroadcast.update({
         where: { id: broadcast.id },
         data: {
           sentAt: new Date(),
-          recipientCount: notifications.length,
+          recipientCount: notificationIds.length,
         },
       });
 
-      // 6. Emit SSE events
-      for (const n of notifications) {
-        emitNotificationCreated(n.userId, n.id);
-        if (isTask) {
-          emitTaskAssigned(n.userId, n.id);
-        }
-      }
-      emitBroadcastSent(broadcast.id, notifications.length);
+      // 6. Broadcast-level SSE event
+      emitBroadcastSent(broadcast.id, notificationIds.length);
 
       // 7. Send emails if channel includes email (non-blocking)
       if (input.channel === "email" || input.channel === "both") {
-        for (const n of notifications) {
+        for (const n of notificationIds) {
           void sendNotificationEmail(ctx.db, n.userId, input.title, input.body);
         }
       }
 
-      return { ...broadcast, recipientCount: notifications.length, sentAt: new Date() };
+      return { ...broadcast, recipientCount: notificationIds.length, sentAt: new Date() };
     }),
 
   /** List broadcasts */
@@ -565,33 +565,33 @@ export const notificationRouter = createTRPCRouter({
     .mutation(async ({ ctx, input }) => {
       const senderId = ctx.dbUser.id;
 
-      const n = await ctx.db.notification.create({
-        data: {
-          userId: input.userId,
-          type: "TASK_CREATED",
-          category: "TASK",
-          taskStatus: "OPEN",
-          title: input.title,
-          priority: input.priority,
-          senderId,
-          channel: input.channel,
-          ...(input.body !== undefined ? { body: input.body } : {}),
-          ...(input.dueDate !== undefined ? { dueDate: input.dueDate } : {}),
-          ...(input.taskAction !== undefined ? { taskAction: input.taskAction } : {}),
-          ...(input.entityId !== undefined ? { entityId: input.entityId } : {}),
-          ...(input.entityType !== undefined ? { entityType: input.entityType } : {}),
-          ...(input.link !== undefined ? { link: input.link } : {}),
-        },
+      const notificationId = await createNotification({
+        db: ctx.db,
+        userId: input.userId,
+        type: "TASK_CREATED",
+        category: "TASK",
+        taskStatus: "OPEN",
+        title: input.title,
+        priority: input.priority,
+        senderId,
+        channel: input.channel,
+        body: input.body,
+        dueDate: input.dueDate,
+        taskAction: input.taskAction,
+        entityId: input.entityId,
+        entityType: input.entityType,
+        link: input.link,
       });
 
-      emitNotificationCreated(input.userId, n.id);
-      emitTaskAssigned(input.userId, n.id);
+      emitTaskAssigned(input.userId, notificationId);
 
       // Send email if channel includes email
       if (input.channel === "email" || input.channel === "both") {
         void sendNotificationEmail(ctx.db, input.userId, input.title, input.body);
       }
 
+      // Re-fetch for return value
+      const n = await ctx.db.notification.findUnique({ where: { id: notificationId } });
       return n;
     }),
 
diff --git a/packages/api/src/router/org-unit.ts b/packages/api/src/router/org-unit.ts
index 5f7d4c5..eeb7822 100644
--- a/packages/api/src/router/org-unit.ts
+++ b/packages/api/src/router/org-unit.ts
@@ -2,6 +2,7 @@ import { CreateOrgUnitSchema, UpdateOrgUnitSchema } from "@planarchy/shared";
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
+import { createAuditEntry } from "../lib/audit.js";
 import { adminProcedure, createTRPCRouter, protectedProcedure } from "../trpc.js";
 
 import type { OrgUnitTree } from "@planarchy/shared";
@@ -93,7 +94,7 @@ export const orgUnitRouter = createTRPCRouter({
         }
       }
 
-      return ctx.db.orgUnit.create({
+      const created = await ctx.db.orgUnit.create({
         data: {
           name: input.name,
           ...(input.shortName !== undefined ? { shortName: input.shortName } : {}),
@@ -102,17 +103,32 @@ export const orgUnitRouter = createTRPCRouter({
           sortOrder: input.sortOrder,
         },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "OrgUnit",
+        entityId: created.id,
+        entityName: created.name,
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        after: created as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return created;
     }),
 
   update: adminProcedure
     .input(z.object({ id: z.string(), data: UpdateOrgUnitSchema }))
     .mutation(async ({ ctx, input }) => {
-      await findUniqueOrThrow(
+      const existing = await findUniqueOrThrow(
         ctx.db.orgUnit.findUnique({ where: { id: input.id } }),
         "Org unit",
       );
 
-      return ctx.db.orgUnit.update({
+      const before = existing as unknown as Record<string, unknown>;
+
+      const updated = await ctx.db.orgUnit.update({
         where: { id: input.id },
         data: {
           ...(input.data.name !== undefined ? { name: input.data.name } : {}),
@@ -122,14 +138,43 @@ export const orgUnitRouter = createTRPCRouter({
           ...(input.data.parentId !== undefined ? { parentId: input.data.parentId } : {}),
         },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "OrgUnit",
+        entityId: updated.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return updated;
     }),
 
   deactivate: adminProcedure
     .input(z.object({ id: z.string() }))
     .mutation(async ({ ctx, input }) => {
-      return ctx.db.orgUnit.update({
+      const updated = await ctx.db.orgUnit.update({
         where: { id: input.id },
         data: { isActive: false },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "OrgUnit",
+        entityId: updated.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before: { isActive: true },
+        after: { isActive: false },
+        source: "ui",
+        summary: "Deactivated OrgUnit",
+      });
+
+      return updated;
     }),
 });
diff --git a/packages/api/src/router/project.ts b/packages/api/src/router/project.ts
index 01840c4..c5de384 100644
--- a/packages/api/src/router/project.ts
+++ b/packages/api/src/router/project.ts
@@ -5,6 +5,7 @@ import {
 import { BlueprintTarget, CreateProjectSchema, FieldType, PermissionKey, ProjectStatus, UpdateProjectSchema } from "@planarchy/shared";
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
+import { calculateShoringRatio, type ShoringAssignment } from "@planarchy/engine/allocation";
 import { findUniqueOrThrow } from "../db/helpers.js";
 import { paginate, paginateCursor, PaginationInputSchema, CursorInputSchema } from "../db/pagination.js";
 import { assertBlueprintDynamicFields } from "./blueprint-validation.js";
@@ -12,6 +13,7 @@ import { buildDynamicFieldWhereClauses } from "./custom-field-filters.js";
 import { loadProjectPlanningReadModel } from "./project-planning-read-model.js";
 import { adminProcedure, controllerProcedure, createTRPCRouter, managerProcedure, protectedProcedure, requirePermission } from "../trpc.js";
 import { createDalleClient, isDalleConfigured, parseAiError } from "../ai-client.js";
+import { generateGeminiImage, isGeminiConfigured, parseGeminiError } from "../gemini-client.js";
 import { invalidateDashboardCache } from "../lib/cache.js";
 import { dispatchWebhooks } from "../lib/webhook-dispatcher.js";
 
@@ -105,6 +107,49 @@ export const projectRouter = createTRPCRouter({
       };
     }),
 
+  getShoringRatio: protectedProcedure
+    .input(z.object({ projectId: z.string() }))
+    .query(async ({ ctx, input }) => {
+      const project = await ctx.db.project.findUnique({
+        where: { id: input.projectId },
+        select: {
+          id: true,
+          name: true,
+          shoringThreshold: true,
+          onshoreCountryCode: true,
+        },
+      });
+
+      if (!project) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "Project not found" });
+      }
+
+      const assignments = await ctx.db.assignment.findMany({
+        where: { projectId: input.projectId, status: { not: "CANCELLED" } },
+        include: { resource: { include: { country: { select: { code: true } } } } },
+      });
+
+      const mapped: ShoringAssignment[] = assignments.map((a) => {
+        const start = new Date(a.startDate);
+        const end = new Date(a.endDate);
+        const diffMs = end.getTime() - start.getTime();
+        const diffDays = Math.max(1, Math.round(diffMs / (1000 * 60 * 60 * 24)) + 1);
+        const workingDays = Math.round(diffDays / 7 * 5);
+        return {
+          resourceId: a.resourceId,
+          countryCode: a.resource.country?.code ?? null,
+          hoursPerDay: a.hoursPerDay,
+          workingDays: Math.max(1, workingDays),
+        };
+      });
+
+      return calculateShoringRatio(
+        mapped,
+        project.shoringThreshold ?? 55,
+        project.onshoreCountryCode ?? "DE",
+      );
+    }),
+
   create: managerProcedure
     .input(CreateProjectSchema)
     .mutation(async ({ ctx, input }) => {
@@ -204,6 +249,8 @@ export const projectRouter = createTRPCRouter({
           ...(input.data.blueprintId !== undefined ? { blueprintId: input.data.blueprintId } : {}),
           ...(input.data.utilizationCategoryId !== undefined ? { utilizationCategoryId: input.data.utilizationCategoryId || null } : {}),
           ...(input.data.clientId !== undefined ? { clientId: input.data.clientId || null } : {}),
+          ...(input.data.shoringThreshold !== undefined ? { shoringThreshold: input.data.shoringThreshold } : {}),
+          ...(input.data.onshoreCountryCode !== undefined ? { onshoreCountryCode: input.data.onshoreCountryCode } : {}),
         } as unknown as Parameters<typeof ctx.db.project.update>[0]["data"],
       });
 
@@ -434,10 +481,14 @@ export const projectRouter = createTRPCRouter({
         where: { id: "singleton" },
       });
 
-      if (!isDalleConfigured(settings)) {
+      const imageProvider = settings?.imageProvider ?? "dalle";
+      const useGemini = imageProvider === "gemini" && isGeminiConfigured(settings);
+      const useDalle = imageProvider === "dalle" && isDalleConfigured(settings);
+
+      if (!useGemini && !useDalle) {
         throw new TRPCError({
           code: "PRECONDITION_FAILED",
-          message: "DALL-E is not configured. Set up the DALL-E deployment in Admin → Settings.",
+          message: "No image provider configured. Set up DALL-E or Gemini in Admin → Settings.",
         });
       }
 
@@ -447,36 +498,53 @@ export const projectRouter = createTRPCRouter({
         ? `${basePrompt} Additional direction: ${input.prompt}`
         : basePrompt;
 
-      const dalleClient = createDalleClient(settings!);
-      const model = settings!.aiProvider === "azure" ? settings!.azureDalleDeployment! : "dall-e-3";
+      let coverImageUrl: string;
 
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      let response: any;
-      try {
-        response = await dalleClient.images.generate({
-          model,
-          prompt: finalPrompt,
-          size: "1024x1024",
-          n: 1,
-          response_format: "b64_json",
-        });
-      } catch (err) {
-        throw new TRPCError({
-          code: "INTERNAL_SERVER_ERROR",
-          message: `DALL-E error: ${parseAiError(err)}`,
-        });
+      if (useGemini) {
+        try {
+          coverImageUrl = await generateGeminiImage(
+            settings!.geminiApiKey!,
+            finalPrompt,
+            settings!.geminiModel ?? undefined,
+          );
+        } catch (err) {
+          throw new TRPCError({
+            code: "INTERNAL_SERVER_ERROR",
+            message: `Gemini error: ${parseGeminiError(err)}`,
+          });
+        }
+      } else {
+        const dalleClient = createDalleClient(settings!);
+        const model = settings!.aiProvider === "azure" ? settings!.azureDalleDeployment! : "dall-e-3";
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let response: any;
+        try {
+          response = await dalleClient.images.generate({
+            model,
+            prompt: finalPrompt,
+            size: "1024x1024",
+            n: 1,
+            response_format: "b64_json",
+          });
+        } catch (err) {
+          throw new TRPCError({
+            code: "INTERNAL_SERVER_ERROR",
+            message: `DALL-E error: ${parseAiError(err)}`,
+          });
+        }
+
+        const b64 = response.data?.[0]?.b64_json;
+        if (!b64) {
+          throw new TRPCError({
+            code: "INTERNAL_SERVER_ERROR",
+            message: "No image data returned from DALL-E",
+          });
+        }
+
+        coverImageUrl = `data:image/png;base64,${b64}`;
       }
 
-      const b64 = response.data?.[0]?.b64_json;
-      if (!b64) {
-        throw new TRPCError({
-          code: "INTERNAL_SERVER_ERROR",
-          message: "No image data returned from DALL-E",
-        });
-      }
-
-      const coverImageUrl = `data:image/png;base64,${b64}`;
-
       await ctx.db.project.update({
         where: { id: input.projectId },
         data: { coverImageUrl },
@@ -552,11 +620,28 @@ export const projectRouter = createTRPCRouter({
       return { ok: true };
     }),
 
+  isImageGenConfigured: protectedProcedure
+    .query(async ({ ctx }) => {
+      const settings = await ctx.db.systemSettings.findUnique({
+        where: { id: "singleton" },
+      });
+      const imageProvider = settings?.imageProvider ?? "dalle";
+      const configured = imageProvider === "gemini"
+        ? isGeminiConfigured(settings)
+        : isDalleConfigured(settings);
+      return { configured, provider: imageProvider };
+    }),
+
+  /** @deprecated Use isImageGenConfigured instead */
   isDalleConfigured: protectedProcedure
     .query(async ({ ctx }) => {
       const settings = await ctx.db.systemSettings.findUnique({
         where: { id: "singleton" },
       });
-      return { configured: isDalleConfigured(settings) };
+      const imageProvider = settings?.imageProvider ?? "dalle";
+      const configured = imageProvider === "gemini"
+        ? isGeminiConfigured(settings)
+        : isDalleConfigured(settings);
+      return { configured };
     }),
 });
diff --git a/packages/api/src/router/rate-card.ts b/packages/api/src/router/rate-card.ts
index e352f64..3451e94 100644
--- a/packages/api/src/router/rate-card.ts
+++ b/packages/api/src/router/rate-card.ts
@@ -10,6 +10,7 @@ import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
 import { createTRPCRouter, controllerProcedure, managerProcedure } from "../trpc.js";
 import { ROLE_BRIEF_SELECT } from "../db/selects.js";
+import { createAuditEntry } from "../lib/audit.js";
 
 const lineSelect = {
   id: true,
@@ -96,7 +97,7 @@ export const rateCardRouter = createTRPCRouter({
     .mutation(async ({ ctx, input }) => {
       const { lines, ...cardData } = input;
 
-      return ctx.db.rateCard.create({
+      const rateCard = await ctx.db.rateCard.create({
         data: {
           name: cardData.name,
           currency: cardData.currency,
@@ -123,17 +124,30 @@ export const rateCardRouter = createTRPCRouter({
           lines: { select: lineSelect },
         },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "RateCard",
+        entityId: rateCard.id,
+        entityName: rateCard.name,
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        after: { name: cardData.name, currency: cardData.currency, lineCount: lines.length },
+        source: "ui",
+      });
+
+      return rateCard;
     }),
 
   update: managerProcedure
     .input(z.object({ id: z.string(), data: UpdateRateCardSchema }))
     .mutation(async ({ ctx, input }) => {
-      await findUniqueOrThrow(
+      const before = await findUniqueOrThrow(
         ctx.db.rateCard.findUnique({ where: { id: input.id } }),
         "Rate card",
       );
 
-      return ctx.db.rateCard.update({
+      const updated = await ctx.db.rateCard.update({
         where: { id: input.id },
         data: {
           ...(input.data.name !== undefined ? { name: input.data.name } : {}),
@@ -149,15 +163,42 @@ export const rateCardRouter = createTRPCRouter({
           client: { select: { id: true, name: true, code: true } },
         },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "RateCard",
+        entityId: input.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before: before as unknown as Record<string, unknown>,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return updated;
     }),
 
   deactivate: managerProcedure
     .input(z.object({ id: z.string() }))
     .mutation(async ({ ctx, input }) => {
-      return ctx.db.rateCard.update({
+      const deactivated = await ctx.db.rateCard.update({
         where: { id: input.id },
         data: { isActive: false },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "RateCard",
+        entityId: input.id,
+        entityName: deactivated.name,
+        action: "DELETE",
+        userId: ctx.dbUser?.id,
+        source: "ui",
+        summary: "Deactivated rate card",
+      });
+
+      return deactivated;
     }),
 
   // ─── Line CRUD ─────────────────────────────────────────────────────────────
@@ -165,12 +206,12 @@ export const rateCardRouter = createTRPCRouter({
   addLine: managerProcedure
     .input(z.object({ rateCardId: z.string(), line: CreateRateCardLineSchema }))
     .mutation(async ({ ctx, input }) => {
-      await findUniqueOrThrow(
+      const rateCard = await findUniqueOrThrow(
         ctx.db.rateCard.findUnique({ where: { id: input.rateCardId } }),
         "Rate card",
       );
 
-      return ctx.db.rateCardLine.create({
+      const line = await ctx.db.rateCardLine.create({
         data: {
           rateCardId: input.rateCardId,
           ...(input.line.roleId !== undefined ? { roleId: input.line.roleId } : {}),
@@ -186,12 +227,25 @@ export const rateCardRouter = createTRPCRouter({
         },
         select: lineSelect,
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "RateCardLine",
+        entityId: line.id,
+        entityName: `${rateCard.name} — ${input.line.chapter ?? "line"}`,
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        after: { rateCardId: input.rateCardId, costRateCents: input.line.costRateCents, billRateCents: input.line.billRateCents },
+        source: "ui",
+      });
+
+      return line;
     }),
 
   updateLine: managerProcedure
     .input(z.object({ lineId: z.string(), data: UpdateRateCardLineSchema }))
     .mutation(async ({ ctx, input }) => {
-      await findUniqueOrThrow(
+      const before = await findUniqueOrThrow(
         ctx.db.rateCardLine.findUnique({ where: { id: input.lineId } }),
         "Rate card line",
       );
@@ -208,22 +262,46 @@ export const rateCardRouter = createTRPCRouter({
       if (input.data.machineRateCents !== undefined) updateData.machineRateCents = input.data.machineRateCents;
       if (input.data.attributes !== undefined) updateData.attributes = input.data.attributes as Prisma.InputJsonValue;
 
-      return ctx.db.rateCardLine.update({
+      const updated = await ctx.db.rateCardLine.update({
         where: { id: input.lineId },
         data: updateData,
         select: lineSelect,
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "RateCardLine",
+        entityId: input.lineId,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before: before as unknown as Record<string, unknown>,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return updated;
     }),
 
   deleteLine: managerProcedure
     .input(z.object({ lineId: z.string() }))
     .mutation(async ({ ctx, input }) => {
-      await findUniqueOrThrow(
+      const line = await findUniqueOrThrow(
         ctx.db.rateCardLine.findUnique({ where: { id: input.lineId } }),
         "Rate card line",
       );
 
       await ctx.db.rateCardLine.delete({ where: { id: input.lineId } });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "RateCardLine",
+        entityId: input.lineId,
+        action: "DELETE",
+        userId: ctx.dbUser?.id,
+        before: line as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
       return { deleted: true };
     }),
 
@@ -235,12 +313,12 @@ export const rateCardRouter = createTRPCRouter({
       lines: z.array(CreateRateCardLineSchema),
     }))
     .mutation(async ({ ctx, input }) => {
-      await findUniqueOrThrow(
+      const rateCard = await findUniqueOrThrow(
         ctx.db.rateCard.findUnique({ where: { id: input.rateCardId } }),
         "Rate card",
       );
 
-      return ctx.db.$transaction(async (tx) => {
+      const result = await ctx.db.$transaction(async (tx) => {
         await tx.rateCardLine.deleteMany({ where: { rateCardId: input.rateCardId } });
 
         const created = await Promise.all(
@@ -266,6 +344,20 @@ export const rateCardRouter = createTRPCRouter({
 
         return created;
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "RateCard",
+        entityId: input.rateCardId,
+        entityName: rateCard.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        after: { replacedLineCount: result.length },
+        source: "ui",
+        summary: `Replaced all lines with ${result.length} new lines`,
+      });
+
+      return result;
     }),
 
   // ─── Rate resolution ───────────────────────────────────────────────────────
diff --git a/packages/api/src/router/scenario.ts b/packages/api/src/router/scenario.ts
index e208202..d7c1395 100644
--- a/packages/api/src/router/scenario.ts
+++ b/packages/api/src/router/scenario.ts
@@ -2,6 +2,7 @@ import { calculateAllocation, countWorkingDays } from "@planarchy/engine/allocat
 import { z } from "zod";
 import { TRPCError } from "@trpc/server";
 import { createTRPCRouter, controllerProcedure, protectedProcedure } from "../trpc.js";
+import { createAuditEntry } from "../lib/audit.js";
 
 const DEFAULT_AVAILABILITY = {
   monday: 8,
@@ -485,7 +486,7 @@ export const scenarioRouter = createTRPCRouter({
 
       const project = await ctx.db.project.findUnique({
         where: { id: projectId },
-        select: { id: true },
+        select: { id: true, name: true },
       });
       if (!project) {
         throw new TRPCError({ code: "NOT_FOUND", message: "Project not found" });
@@ -548,6 +549,18 @@ export const scenarioRouter = createTRPCRouter({
         created.push(newAssignment.id);
       }
 
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "ScenarioApplication",
+        entityId: projectId,
+        entityName: project.name,
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        summary: `Applied scenario to project "${project.name}" (${created.length} allocations created/modified)`,
+        metadata: { appliedCount: created.length, assignmentIds: created },
+        source: "ui",
+      });
+
       return { appliedCount: created.length };
     }),
 });
diff --git a/packages/api/src/router/settings.ts b/packages/api/src/router/settings.ts
index da2d75a..59a75ed 100644
--- a/packages/api/src/router/settings.ts
+++ b/packages/api/src/router/settings.ts
@@ -4,6 +4,16 @@ import { createAiClient, isAiConfigured, parseAiError } from "../ai-client.js";
 import { DEFAULT_SUMMARY_PROMPT } from "./resource.js";
 import { VALUE_SCORE_WEIGHTS } from "@planarchy/shared";
 import { testSmtpConnection } from "../lib/email.js";
+import { createAuditEntry } from "../lib/audit.js";
+
+/** Fields that must never appear in audit log values */
+const SENSITIVE_FIELDS = new Set([
+  "azureOpenAiApiKey",
+  "smtpPassword",
+  "azureDalleApiKey",
+  "anonymizationSeed",
+  "geminiApiKey",
+]);
 
 export const settingsRouter = createTRPCRouter({
   getSystemSettings: adminProcedure.query(async ({ ctx }) => {
@@ -46,6 +56,11 @@ export const settingsRouter = createTRPCRouter({
       azureDalleDeployment: settings?.azureDalleDeployment ?? null,
       azureDalleEndpoint: settings?.azureDalleEndpoint ?? null,
       hasDalleApiKey: !!settings?.azureDalleApiKey,
+      // Gemini
+      geminiModel: settings?.geminiModel ?? "gemini-2.5-flash-image",
+      hasGeminiApiKey: !!settings?.geminiApiKey,
+      // Image provider
+      imageProvider: settings?.imageProvider ?? "dalle",
       // Vacation defaults
       vacationDefaultDays: settings?.vacationDefaultDays ?? 28,
       // Timeline
@@ -94,6 +109,11 @@ export const settingsRouter = createTRPCRouter({
         azureDalleDeployment: z.string().optional(),
         azureDalleEndpoint: z.string().url().optional().or(z.literal("")),
         azureDalleApiKey: z.string().optional(),
+        // Gemini image generation
+        geminiApiKey: z.string().optional(),
+        geminiModel: z.string().optional(),
+        // Image provider selection
+        imageProvider: z.enum(["dalle", "gemini"]).optional(),
         // Vacation
         vacationDefaultDays: z.number().int().min(0).max(365).optional(),
         // Timeline
@@ -146,17 +166,52 @@ export const settingsRouter = createTRPCRouter({
         data.azureDalleEndpoint = input.azureDalleEndpoint || null;
       if (input.azureDalleApiKey !== undefined)
         data.azureDalleApiKey = input.azureDalleApiKey || null;
+      // Gemini
+      if (input.geminiApiKey !== undefined)
+        data.geminiApiKey = input.geminiApiKey || null;
+      if (input.geminiModel !== undefined)
+        data.geminiModel = input.geminiModel || null;
+      // Image provider
+      if (input.imageProvider !== undefined)
+        data.imageProvider = input.imageProvider;
       // Vacation
       if (input.vacationDefaultDays !== undefined) data.vacationDefaultDays = input.vacationDefaultDays;
       // Timeline
       if (input.timelineUndoMaxSteps !== undefined) data.timelineUndoMaxSteps = input.timelineUndoMaxSteps;
 
+      // Fetch current settings for before-snapshot
+      const before = await ctx.db.systemSettings.findUnique({ where: { id: "singleton" } });
+
       await ctx.db.systemSettings.upsert({
         where: { id: "singleton" },
         create: { id: "singleton", ...data },
         update: data,
       });
 
+      // Build sanitized snapshots — redact sensitive fields
+      const sanitize = (obj: Record<string, unknown>): Record<string, unknown> => {
+        const result: Record<string, unknown> = {};
+        for (const [key, value] of Object.entries(obj)) {
+          result[key] = SENSITIVE_FIELDS.has(key) ? (value ? "***" : null) : value;
+        }
+        return result;
+      };
+
+      const sanitizedBefore = before ? sanitize(before as unknown as Record<string, unknown>) : undefined;
+      const sanitizedAfter = sanitize(data);
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "SystemSettings",
+        entityId: "singleton",
+        entityName: "System Settings",
+        action: before ? "UPDATE" : "CREATE",
+        userId: ctx.dbUser?.id,
+        ...(sanitizedBefore !== undefined ? { before: sanitizedBefore } : {}),
+        after: sanitizedAfter,
+        source: "ui",
+      });
+
       return { ok: true };
     }),
 
@@ -246,8 +301,64 @@ export const settingsRouter = createTRPCRouter({
     }
   }),
 
-  testSmtpConnection: adminProcedure.mutation(async () => {
-    return testSmtpConnection();
+  testSmtpConnection: adminProcedure.mutation(async ({ ctx }) => {
+    const result = await testSmtpConnection();
+
+    void createAuditEntry({
+      db: ctx.db,
+      entityType: "SystemSettings",
+      entityId: "singleton",
+      entityName: "SMTP Connection Test",
+      action: "UPDATE",
+      userId: ctx.dbUser?.id,
+      after: { testResult: result.ok ? "success" : "failed" },
+      source: "ui",
+      summary: result.ok ? "SMTP connection test succeeded" : "SMTP connection test failed",
+    });
+
+    return result;
+  }),
+
+  testGeminiConnection: adminProcedure.mutation(async ({ ctx }) => {
+    const settings = await ctx.db.systemSettings.findUnique({
+      where: { id: "singleton" },
+      select: { geminiApiKey: true, geminiModel: true },
+    });
+
+    if (!settings?.geminiApiKey) {
+      return { ok: false, error: "Gemini API key is not configured." };
+    }
+
+    try {
+      const { generateGeminiImage } = await import("../gemini-client.js");
+      const model = settings.geminiModel ?? "gemini-2.5-flash-image";
+
+      // Generate a tiny test image with a simple prompt
+      const dataUrl = await generateGeminiImage(
+        settings.geminiApiKey,
+        "A simple blue circle on white background, minimal, 256x256",
+        model,
+      );
+
+      const hasImage = dataUrl.startsWith("data:image/");
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "SystemSettings",
+        entityId: "singleton",
+        entityName: "Gemini Connection Test",
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        after: { testResult: hasImage ? "success" : "failed" },
+        source: "ui",
+        summary: hasImage ? "Gemini image generation test succeeded" : "Gemini test returned no image",
+      });
+
+      return { ok: hasImage, model, preview: hasImage ? dataUrl.slice(0, 100) + "..." : undefined };
+    } catch (err) {
+      const { parseGeminiError } = await import("../gemini-client.js");
+      return { ok: false, error: parseGeminiError(err) };
+    }
   }),
 
   getAiConfigured: protectedProcedure.query(async ({ ctx }) => {
diff --git a/packages/api/src/router/system-role-config.ts b/packages/api/src/router/system-role-config.ts
index 94dd1a3..897cd25 100644
--- a/packages/api/src/router/system-role-config.ts
+++ b/packages/api/src/router/system-role-config.ts
@@ -1,5 +1,6 @@
 import { z } from "zod";
 import { adminProcedure, createTRPCRouter, invalidateRoleDefaultsCache, protectedProcedure } from "../trpc.js";
+import { createAuditEntry } from "../lib/audit.js";
 
 export const systemRoleConfigRouter = createTRPCRouter({
   /** List all role configs (sorted by sortOrder) */
@@ -21,6 +22,10 @@ export const systemRoleConfigRouter = createTRPCRouter({
       }),
     )
     .mutation(async ({ ctx, input }) => {
+      const existing = await ctx.db.systemRoleConfig.findUnique({
+        where: { role: input.role as never },
+      });
+
       const data: Record<string, unknown> = {};
       if (input.label !== undefined) data.label = input.label;
       if (input.description !== undefined) data.description = input.description;
@@ -35,6 +40,18 @@ export const systemRoleConfigRouter = createTRPCRouter({
       // Invalidate cached role defaults so changes take effect immediately
       invalidateRoleDefaultsCache();
 
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "SystemRoleConfig",
+        entityId: input.role,
+        entityName: result.label,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before: (existing ?? {}) as unknown as Record<string, unknown>,
+        after: result as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
       return result;
     }),
 });
diff --git a/packages/api/src/router/user.ts b/packages/api/src/router/user.ts
index 0fc5d54..f5f20cb 100644
--- a/packages/api/src/router/user.ts
+++ b/packages/api/src/router/user.ts
@@ -13,6 +13,7 @@ import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
 import { adminProcedure, createTRPCRouter, managerProcedure, protectedProcedure } from "../trpc.js";
+import { createAuditEntry } from "../lib/audit.js";
 
 export const userRouter = createTRPCRouter({
   /** Lightweight user list for task assignment (ADMIN + MANAGER) */
@@ -111,9 +112,55 @@ export const userRouter = createTRPCRouter({
         });
       }
 
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "User",
+        entityId: user.id,
+        entityName: `${user.name} (${user.email})`,
+        action: "CREATE",
+        ...(ctx.dbUser?.id ? { userId: ctx.dbUser.id } : {}),
+        after: user as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
       return user;
     }),
 
+  setPassword: adminProcedure
+    .input(
+      z.object({
+        userId: z.string(),
+        password: z.string().min(8, "Password must be at least 8 characters"),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const user = await ctx.db.user.findUniqueOrThrow({
+        where: { id: input.userId },
+        select: { id: true, name: true, email: true },
+      });
+
+      const { hash } = await import("@node-rs/argon2");
+      const passwordHash = await hash(input.password);
+
+      await ctx.db.user.update({
+        where: { id: input.userId },
+        data: { passwordHash },
+      });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "User",
+        entityId: user.id,
+        entityName: `${user.name} (${user.email})`,
+        action: "UPDATE",
+        ...(ctx.dbUser?.id ? { userId: ctx.dbUser.id } : {}),
+        source: "ui",
+        summary: "Password reset by admin",
+      });
+
+      return { success: true };
+    }),
+
   updateRole: adminProcedure
     .input(
       z.object({
@@ -122,11 +169,66 @@ export const userRouter = createTRPCRouter({
       }),
     )
     .mutation(async ({ ctx, input }) => {
-      return ctx.db.user.update({
+      const before = await ctx.db.user.findUniqueOrThrow({
+        where: { id: input.id },
+        select: { id: true, name: true, email: true, systemRole: true },
+      });
+
+      const updated = await ctx.db.user.update({
         where: { id: input.id },
         data: { systemRole: input.systemRole },
         select: { id: true, name: true, email: true, systemRole: true },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "User",
+        entityId: updated.id,
+        entityName: `${updated.name} (${updated.email})`,
+        action: "UPDATE",
+        ...(ctx.dbUser?.id ? { userId: ctx.dbUser.id } : {}),
+        before: before as unknown as Record<string, unknown>,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+        summary: `Changed role from ${before.systemRole} to ${updated.systemRole}`,
+      });
+
+      return updated;
+    }),
+
+  updateName: adminProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        name: z.string().min(1, "Name is required").max(200),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const before = await ctx.db.user.findUniqueOrThrow({
+        where: { id: input.id },
+        select: { id: true, name: true, email: true },
+      });
+
+      const updated = await ctx.db.user.update({
+        where: { id: input.id },
+        data: { name: input.name },
+        select: { id: true, name: true, email: true },
+      });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "User",
+        entityId: updated.id,
+        entityName: `${updated.name} (${updated.email})`,
+        action: "UPDATE",
+        ...(ctx.dbUser?.id ? { userId: ctx.dbUser.id } : {}),
+        before: before as unknown as Record<string, unknown>,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+        summary: `Changed name from "${before.name}" to "${updated.name}"`,
+      });
+
+      return updated;
     }),
 
   // ─── Resource Linking ──────────────────────────────────────────────────
@@ -242,20 +344,61 @@ export const userRouter = createTRPCRouter({
       }),
     )
     .mutation(async ({ ctx, input }) => {
+      const before = await ctx.db.user.findUniqueOrThrow({
+        where: { id: input.userId },
+        select: { id: true, name: true, email: true, permissionOverrides: true },
+      });
+
       const user = await ctx.db.user.update({
         where: { id: input.userId },
         data: { permissionOverrides: input.overrides ?? Prisma.DbNull },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "User",
+        entityId: input.userId,
+        entityName: `${before.name} (${before.email})`,
+        action: "UPDATE",
+        ...(ctx.dbUser?.id ? { userId: ctx.dbUser.id } : {}),
+        before: { permissionOverrides: before.permissionOverrides } as unknown as Record<string, unknown>,
+        after: { permissionOverrides: input.overrides } as unknown as Record<string, unknown>,
+        source: "ui",
+        summary: input.overrides
+          ? `Set permission overrides (granted: ${input.overrides.granted?.length ?? 0}, denied: ${input.overrides.denied?.length ?? 0})`
+          : "Cleared permission overrides",
+      });
+
       return user;
     }),
 
   resetPermissions: adminProcedure
     .input(z.object({ userId: z.string() }))
     .mutation(async ({ ctx, input }) => {
-      return ctx.db.user.update({
+      const before = await ctx.db.user.findUniqueOrThrow({
+        where: { id: input.userId },
+        select: { id: true, name: true, email: true, permissionOverrides: true },
+      });
+
+      const updated = await ctx.db.user.update({
         where: { id: input.userId },
         data: { permissionOverrides: Prisma.DbNull },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "User",
+        entityId: input.userId,
+        entityName: `${before.name} (${before.email})`,
+        action: "UPDATE",
+        ...(ctx.dbUser?.id ? { userId: ctx.dbUser.id } : {}),
+        before: { permissionOverrides: before.permissionOverrides } as unknown as Record<string, unknown>,
+        after: { permissionOverrides: null } as unknown as Record<string, unknown>,
+        source: "ui",
+        summary: "Reset permission overrides to role defaults",
+      });
+
+      return updated;
     }),
 
   getColumnPreferences: protectedProcedure.query(async ({ ctx }) => {
diff --git a/packages/api/src/router/utilization-category.ts b/packages/api/src/router/utilization-category.ts
index 1158300..7f894de 100644
--- a/packages/api/src/router/utilization-category.ts
+++ b/packages/api/src/router/utilization-category.ts
@@ -5,6 +5,7 @@ import {
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
+import { createAuditEntry } from "../lib/audit.js";
 import { adminProcedure, createTRPCRouter, protectedProcedure } from "../trpc.js";
 
 export const utilizationCategoryRouter = createTRPCRouter({
@@ -48,7 +49,7 @@ export const utilizationCategoryRouter = createTRPCRouter({
         });
       }
 
-      return ctx.db.utilizationCategory.create({
+      const created = await ctx.db.utilizationCategory.create({
         data: {
           code: input.code,
           name: input.name,
@@ -57,6 +58,19 @@ export const utilizationCategoryRouter = createTRPCRouter({
           isDefault: input.isDefault,
         },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "UtilizationCategory",
+        entityId: created.id,
+        entityName: created.name,
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        after: created as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return created;
     }),
 
   update: adminProcedure
@@ -82,7 +96,9 @@ export const utilizationCategoryRouter = createTRPCRouter({
         });
       }
 
-      return ctx.db.utilizationCategory.update({
+      const before = existing as unknown as Record<string, unknown>;
+
+      const updated = await ctx.db.utilizationCategory.update({
         where: { id: input.id },
         data: {
           ...(input.data.code !== undefined ? { code: input.data.code } : {}),
@@ -93,5 +109,19 @@ export const utilizationCategoryRouter = createTRPCRouter({
           ...(input.data.isDefault !== undefined ? { isDefault: input.data.isDefault } : {}),
         },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "UtilizationCategory",
+        entityId: updated.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return updated;
     }),
 });
diff --git a/packages/api/src/router/vacation.ts b/packages/api/src/router/vacation.ts
index a90e4fd..f06a9d3 100644
--- a/packages/api/src/router/vacation.ts
+++ b/packages/api/src/router/vacation.ts
@@ -4,12 +4,14 @@ import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { findUniqueOrThrow } from "../db/helpers.js";
 import { RESOURCE_BRIEF_SELECT } from "../db/selects.js";
-import { emitVacationCreated, emitVacationUpdated, emitNotificationCreated, emitTaskAssigned } from "../sse/event-bus.js";
+import { emitVacationCreated, emitVacationUpdated, emitTaskAssigned } from "../sse/event-bus.js";
+import { createNotification } from "../lib/create-notification.js";
 import { createTRPCRouter, adminProcedure, managerProcedure, protectedProcedure } from "../trpc.js";
 import { sendEmail } from "../lib/email.js";
 import { anonymizeResource, anonymizeUser, getAnonymizationDirectory } from "../lib/anonymization.js";
 import { checkVacationConflicts, checkBatchVacationConflicts } from "../lib/vacation-conflicts.js";
 import { dispatchWebhooks } from "../lib/webhook-dispatcher.js";
+import { createAuditEntry } from "../lib/audit.js";
 
 /** Types that consume from annual leave balance */
 const BALANCE_TYPES = [VacationType.ANNUAL, VacationType.OTHER];
@@ -55,23 +57,21 @@ async function notifyVacationStatus(
     : `Your vacation request has been ${statusLabel}.`;
 
   // In-app notification
-  const notification = await db.notification.create({
-    data: {
-      userId: resource.user.id,
-      type: `VACATION_${newStatus}`,
-      title,
-      body,
-      entityId: vacationId,
-      entityType: "vacation",
-    },
+  await createNotification({
+    db,
+    userId: resource.user.id,
+    type: `VACATION_${newStatus}`,
+    title,
+    body,
+    entityId: vacationId,
+    entityType: "vacation",
   });
-  emitNotificationCreated(resource.user.id, notification.id);
 
   // Email (non-blocking)
   if (resource.user.email) {
     void sendEmail({
       to: resource.user.email,
-      subject: `Planarchy — ${title}`,
+      subject: `CapaKraken — ${title}`,
       text: body,
     });
   }
@@ -220,6 +220,17 @@ export const vacationRouter = createTRPCRouter({
 
       emitVacationCreated({ id: vacation.id, resourceId: vacation.resourceId, status: vacation.status });
 
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Vacation",
+        entityId: vacation.id,
+        entityName: `${vacation.resource?.displayName ?? "Unknown"} - ${vacation.type}`,
+        action: "CREATE",
+        userId: userRecord.id,
+        after: vacation as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
       // Create approval tasks for managers when a non-manager submits a vacation request
       if (status === VacationStatus.PENDING) {
         const resourceName = vacation.resource?.displayName ?? "Unknown";
@@ -233,25 +244,23 @@ export const vacationRouter = createTRPCRouter({
 
         for (const manager of managers) {
           if (manager.id === userRecord.id) continue;
-          const task = await ctx.db.notification.create({
-            data: {
-              userId: manager.id,
-              category: "APPROVAL",
-              type: "VACATION_APPROVAL",
-              priority: "NORMAL",
-              title: `Vacation approval: ${resourceName}`,
-              body: `${resourceName} requests ${input.type} from ${startStr} to ${endStr}`,
-              taskStatus: "OPEN",
-              taskAction: buildTaskAction("approve_vacation", vacation.id),
-              entityId: vacation.id,
-              entityType: "vacation",
-              link: "/vacations",
-              senderId: userRecord.id,
-              channel: "in_app",
-            },
+          const taskId = await createNotification({
+            db: ctx.db,
+            userId: manager.id,
+            category: "APPROVAL",
+            type: "VACATION_APPROVAL",
+            priority: "NORMAL",
+            title: `Vacation approval: ${resourceName}`,
+            body: `${resourceName} requests ${input.type} from ${startStr} to ${endStr}`,
+            taskStatus: "OPEN",
+            taskAction: buildTaskAction("approve_vacation", vacation.id),
+            entityId: vacation.id,
+            entityType: "vacation",
+            link: "/vacations",
+            senderId: userRecord.id,
+            channel: "in_app",
           });
-          emitNotificationCreated(manager.id, task.id);
-          emitTaskAssigned(manager.id, task.id);
+          emitTaskAssigned(manager.id, taskId);
         }
       }
 
@@ -294,6 +303,20 @@ export const vacationRouter = createTRPCRouter({
       });
 
       emitVacationUpdated({ id: updated.id, resourceId: updated.resourceId, status: updated.status });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Vacation",
+        entityId: updated.id,
+        entityName: `Vacation ${updated.id}`,
+        action: "UPDATE",
+        ...(userRecord?.id ? { userId: userRecord.id } : {}),
+        before: existing as unknown as Record<string, unknown>,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+        summary: `Approved vacation (was ${existing.status})`,
+      });
+
       void dispatchWebhooks(ctx.db, "vacation.approved", {
         id: updated.id,
         resourceId: updated.resourceId,
@@ -364,6 +387,19 @@ export const vacationRouter = createTRPCRouter({
         },
       });
 
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Vacation",
+        entityId: updated.id,
+        entityName: `Vacation ${updated.id}`,
+        action: "UPDATE",
+        ...(userRecord?.id ? { userId: userRecord.id } : {}),
+        before: existing as unknown as Record<string, unknown>,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+        summary: `Rejected vacation${input.rejectionReason ? `: ${input.rejectionReason}` : ""}`,
+      });
+
       void notifyVacationStatus(ctx.db, updated.id, updated.resourceId, VacationStatus.REJECTED, input.rejectionReason);
 
       return updated;
@@ -407,6 +443,18 @@ export const vacationRouter = createTRPCRouter({
         emitVacationUpdated({ id: v.id, resourceId: v.resourceId, status: VacationStatus.APPROVED });
         void notifyVacationStatus(ctx.db, v.id, v.resourceId, VacationStatus.APPROVED);
 
+        void createAuditEntry({
+          db: ctx.db,
+          entityType: "Vacation",
+          entityId: v.id,
+          entityName: `Vacation ${v.id}`,
+          action: "UPDATE",
+          ...(userRecord?.id ? { userId: userRecord.id } : {}),
+          after: { status: VacationStatus.APPROVED } as unknown as Record<string, unknown>,
+          source: "ui",
+          summary: "Batch approved vacation",
+        });
+
         // Mark approval tasks as DONE
         await ctx.db.notification.updateMany({
           where: {
@@ -464,6 +512,18 @@ export const vacationRouter = createTRPCRouter({
         emitVacationUpdated({ id: v.id, resourceId: v.resourceId, status: VacationStatus.REJECTED });
         void notifyVacationStatus(ctx.db, v.id, v.resourceId, VacationStatus.REJECTED, input.rejectionReason);
 
+        void createAuditEntry({
+          db: ctx.db,
+          entityType: "Vacation",
+          entityId: v.id,
+          entityName: `Vacation ${v.id}`,
+          action: "UPDATE",
+          ...(userRecord?.id ? { userId: userRecord.id } : {}),
+          after: { status: VacationStatus.REJECTED, rejectionReason: input.rejectionReason } as unknown as Record<string, unknown>,
+          source: "ui",
+          summary: `Batch rejected vacation${input.rejectionReason ? `: ${input.rejectionReason}` : ""}`,
+        });
+
         // Mark approval tasks as DONE
         await ctx.db.notification.updateMany({
           where: {
@@ -526,6 +586,20 @@ export const vacationRouter = createTRPCRouter({
       });
 
       emitVacationUpdated({ id: updated.id, resourceId: updated.resourceId, status: updated.status });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Vacation",
+        entityId: updated.id,
+        entityName: `Vacation ${updated.id}`,
+        action: "UPDATE",
+        userId: userRecord.id,
+        before: existing as unknown as Record<string, unknown>,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+        summary: `Cancelled vacation (was ${existing.status})`,
+      });
+
       return updated;
     }),
 
@@ -690,6 +764,18 @@ export const vacationRouter = createTRPCRouter({
         }
       }
 
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Vacation",
+        entityId: `public-holidays-${input.year}`,
+        entityName: `Public Holidays ${input.year}${input.federalState ? ` (${input.federalState})` : ""}`,
+        action: "CREATE",
+        userId: adminUser.id,
+        after: { created, holidays: holidays.length, resources: resources.length, year: input.year, federalState: input.federalState } as unknown as Record<string, unknown>,
+        source: "ui",
+        summary: `Batch created ${created} public holidays for ${resources.length} resources (${input.year})`,
+      });
+
       return { created, holidays: holidays.length, resources: resources.length };
     }),
 
@@ -732,6 +818,20 @@ export const vacationRouter = createTRPCRouter({
       });
 
       emitVacationUpdated({ id: updated.id, resourceId: updated.resourceId, status: updated.status });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Vacation",
+        entityId: updated.id,
+        entityName: `Vacation ${updated.id}`,
+        action: "UPDATE",
+        userId: userRecord.id,
+        before: existing as unknown as Record<string, unknown>,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+        summary: `Updated vacation status to ${input.status}`,
+      });
+
       return updated;
     }),
 });
diff --git a/packages/api/src/router/webhook.ts b/packages/api/src/router/webhook.ts
index 96f3d76..571e44e 100644
--- a/packages/api/src/router/webhook.ts
+++ b/packages/api/src/router/webhook.ts
@@ -2,6 +2,7 @@ import { z } from "zod";
 import { TRPCError } from "@trpc/server";
 import { createTRPCRouter, adminProcedure } from "../trpc.js";
 import { WEBHOOK_EVENTS } from "../lib/webhook-dispatcher.js";
+import { createAuditEntry } from "../lib/audit.js";
 
 const webhookEventEnum = z.enum(WEBHOOK_EVENTS as unknown as [string, ...string[]]);
 
@@ -36,7 +37,7 @@ export const webhookRouter = createTRPCRouter({
       }),
     )
     .mutation(async ({ ctx, input }) => {
-      return ctx.db.webhook.create({
+      const webhook = await ctx.db.webhook.create({
         data: {
           name: input.name,
           url: input.url,
@@ -45,6 +46,19 @@ export const webhookRouter = createTRPCRouter({
           isActive: input.isActive,
         },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Webhook",
+        entityId: webhook.id,
+        entityName: webhook.name,
+        action: "CREATE",
+        userId: ctx.dbUser?.id,
+        after: webhook as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return webhook;
     }),
 
   /** Update an existing webhook. */
@@ -67,7 +81,7 @@ export const webhookRouter = createTRPCRouter({
         throw new TRPCError({ code: "NOT_FOUND", message: "Webhook not found" });
       }
 
-      return ctx.db.webhook.update({
+      const updated = await ctx.db.webhook.update({
         where: { id: input.id },
         data: {
           ...(input.data.name !== undefined ? { name: input.data.name } : {}),
@@ -77,6 +91,20 @@ export const webhookRouter = createTRPCRouter({
           ...(input.data.isActive !== undefined ? { isActive: input.data.isActive } : {}),
         },
       });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Webhook",
+        entityId: input.id,
+        entityName: updated.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        before: existing as unknown as Record<string, unknown>,
+        after: updated as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return updated;
     }),
 
   /** Delete a webhook. */
@@ -88,6 +116,17 @@ export const webhookRouter = createTRPCRouter({
         throw new TRPCError({ code: "NOT_FOUND", message: "Webhook not found" });
       }
       await ctx.db.webhook.delete({ where: { id: input.id } });
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Webhook",
+        entityId: input.id,
+        entityName: existing.name,
+        action: "DELETE",
+        userId: ctx.dbUser?.id,
+        before: existing as unknown as Record<string, unknown>,
+        source: "ui",
+      });
     }),
 
   /** Send a test payload to a webhook URL. */
@@ -105,7 +144,7 @@ export const webhookRouter = createTRPCRouter({
         payload: {
           webhookId: wh.id,
           webhookName: wh.name,
-          message: "This is a test payload from Planarchy.",
+          message: "This is a test payload from CapaKraken.",
         },
       };
 
@@ -127,6 +166,8 @@ export const webhookRouter = createTRPCRouter({
       const controller = new AbortController();
       const timeout = setTimeout(() => controller.abort(), 5_000);
 
+      let result: { success: boolean; statusCode: number; statusText: string };
+
       try {
         const response = await fetch(wh.url, {
           method: "POST",
@@ -134,13 +175,13 @@ export const webhookRouter = createTRPCRouter({
           body,
           signal: controller.signal,
         });
-        return {
+        result = {
           success: response.ok,
           statusCode: response.status,
           statusText: response.statusText,
         };
       } catch (err) {
-        return {
+        result = {
           success: false,
           statusCode: 0,
           statusText: err instanceof Error ? err.message : "Unknown error",
@@ -148,5 +189,19 @@ export const webhookRouter = createTRPCRouter({
       } finally {
         clearTimeout(timeout);
       }
+
+      void createAuditEntry({
+        db: ctx.db,
+        entityType: "Webhook",
+        entityId: wh.id,
+        entityName: wh.name,
+        action: "UPDATE",
+        userId: ctx.dbUser?.id,
+        summary: `Tested webhook (result: ${result.success ? "success" : "failed"})`,
+        metadata: result as unknown as Record<string, unknown>,
+        source: "ui",
+      });
+
+      return result;
     }),
 });
diff --git a/packages/application/src/use-cases/allocation/create-assignment.ts b/packages/application/src/use-cases/allocation/create-assignment.ts
index 3ffccc4..2892015 100644
--- a/packages/application/src/use-cases/allocation/create-assignment.ts
+++ b/packages/application/src/use-cases/allocation/create-assignment.ts
@@ -1,4 +1,4 @@
-import { calculateAllocation, validateAvailability } from "@planarchy/engine";
+import { calculateAllocation, validateAvailability, checkDuplicateAssignment } from "@planarchy/engine";
 import type { PrismaClient, Prisma } from "@planarchy/db";
 import {
   type Allocation,
@@ -105,6 +105,28 @@ export async function createAssignment(
     },
   );
 
+  const duplicateResult = checkDuplicateAssignment(
+    input.resourceId,
+    input.projectId,
+    input.startDate,
+    input.endDate,
+    existingBookings.map(b => ({
+      id: b.id,
+      resourceId: b.resourceId ?? "",
+      projectId: b.projectId,
+      startDate: b.startDate,
+      endDate: b.endDate,
+      status: b.status,
+    })),
+  );
+
+  if (duplicateResult.isDuplicate) {
+    throw new TRPCError({
+      code: "CONFLICT",
+      message: duplicateResult.message ?? "Resource is already assigned to this project with overlapping dates",
+    });
+  }
+
   const availability = resource.availability as unknown as WeekdayAvailability;
   const availabilityWindows = existingBookings.map((booking) => ({
     startDate: booking.startDate,
diff --git a/packages/application/src/use-cases/allocation/fill-demand-requirement.ts b/packages/application/src/use-cases/allocation/fill-demand-requirement.ts
index 33bdbb3..1c9fd30 100644
--- a/packages/application/src/use-cases/allocation/fill-demand-requirement.ts
+++ b/packages/application/src/use-cases/allocation/fill-demand-requirement.ts
@@ -1,8 +1,10 @@
 import type { PrismaClient } from "@planarchy/db";
 import { AllocationStatus, type FillDemandRequirementInput } from "@planarchy/shared";
+import { checkDuplicateAssignment } from "@planarchy/engine";
 import { TRPCError } from "@trpc/server";
 import { type AssignmentWithRelations } from "./create-assignment.js";
 import { fillDemandRequirementWithLegacySync } from "./fill-demand-requirement-with-legacy-sync.js";
+import { listAssignmentBookings } from "./list-assignment-bookings.js";
 
 export interface FillDemandRequirementResult {
   assignment: AssignmentWithRelations;
@@ -54,5 +56,34 @@ export async function fillDemandRequirement(
     });
   }
 
+  const existingBookings = await listAssignmentBookings(
+    db as unknown as Parameters<typeof listAssignmentBookings>[0],
+    {
+      resourceIds: [input.resourceId],
+    },
+  );
+
+  const duplicateResult = checkDuplicateAssignment(
+    input.resourceId,
+    demandRequirement.projectId,
+    demandRequirement.startDate,
+    demandRequirement.endDate,
+    existingBookings.map(b => ({
+      id: b.id,
+      resourceId: b.resourceId ?? "",
+      projectId: b.projectId,
+      startDate: b.startDate,
+      endDate: b.endDate,
+      status: b.status,
+    })),
+  );
+
+  if (duplicateResult.isDuplicate) {
+    throw new TRPCError({
+      code: "CONFLICT",
+      message: duplicateResult.message ?? "Resource is already assigned to this project with overlapping dates",
+    });
+  }
+
   return fillDemandRequirementWithLegacySync(db, demandRequirement, input);
 }
diff --git a/packages/application/src/use-cases/dashboard/get-budget-forecast.ts b/packages/application/src/use-cases/dashboard/get-budget-forecast.ts
index fdd1814..6d43620 100644
--- a/packages/application/src/use-cases/dashboard/get-budget-forecast.ts
+++ b/packages/application/src/use-cases/dashboard/get-budget-forecast.ts
@@ -4,6 +4,8 @@ import { calculateInclusiveDays, MILLISECONDS_PER_DAY } from "./shared.js";
 export interface BudgetForecastRow {
   projectName: string;
   shortCode: string;
+  clientId: string | null;
+  clientName: string | null;
   budgetCents: number;
   spentCents: number;
   burnRate: number;
@@ -23,6 +25,8 @@ export async function getDashboardBudgetForecast(
       budgetCents: true,
       startDate: true,
       endDate: true,
+      clientId: true,
+      client: { select: { name: true } },
     },
   });
 
@@ -86,6 +90,8 @@ export async function getDashboardBudgetForecast(
     return {
       projectName: p.name,
       shortCode: p.shortCode,
+      clientId: p.clientId,
+      clientName: p.client?.name ?? null,
       budgetCents: p.budgetCents,
       spentCents,
       burnRate,
diff --git a/packages/application/src/use-cases/dashboard/get-project-health.ts b/packages/application/src/use-cases/dashboard/get-project-health.ts
index 9169230..1ea34c2 100644
--- a/packages/application/src/use-cases/dashboard/get-project-health.ts
+++ b/packages/application/src/use-cases/dashboard/get-project-health.ts
@@ -2,8 +2,11 @@ import type { PrismaClient } from "@planarchy/db";
 import { calculateInclusiveDays } from "./shared.js";
 
 export interface ProjectHealthRow {
+  id: string;
   projectName: string;
   shortCode: string;
+  clientId: string | null;
+  clientName: string | null;
   budgetHealth: number;
   staffingHealth: number;
   timelineHealth: number;
@@ -21,6 +24,8 @@ export async function getDashboardProjectHealth(
       shortCode: true,
       budgetCents: true,
       endDate: true,
+      clientId: true,
+      client: { select: { name: true } },
       demandRequirements: {
         select: {
           id: true,
@@ -90,8 +95,11 @@ export async function getDashboardProjectHealth(
     );
 
     return {
+      id: p.id,
       projectName: p.name,
       shortCode: p.shortCode,
+      clientId: p.clientId,
+      clientName: p.client?.name ?? null,
       budgetHealth,
       staffingHealth,
       timelineHealth,
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
index 6ffa41e..c2c8278 100644
--- a/packages/db/prisma/schema.prisma
+++ b/packages/db/prisma/schema.prisma
@@ -602,6 +602,7 @@ model Client {
   children  Client[]  @relation("ClientTree")
   isActive  Boolean   @default(true)
   sortOrder Int       @default(0)
+  tags      String[]  @default([])
 
   projects          Project[]
   resourceClientUnits Resource[] @relation("resource_client_unit")
@@ -811,7 +812,9 @@ model Project {
   startDate       DateTime       @db.Date
   endDate         DateTime       @db.Date
   status          ProjectStatus  @default(DRAFT)
-  responsiblePerson String?
+  responsiblePerson  String?
+  shoringThreshold   Int?              @default(55)  // Max offshore % before alert (0-100)
+  onshoreCountryCode String?           @default("DE") // Country code considered "onshore"
   color             String?           // Hex color for timeline display, e.g. "#3b82f6"
   coverImageUrl     String?  @db.Text // Base64 data-URL for project cover art
   coverFocusY       Int      @default(50) // Vertical focus point 0-100 (% from top)
@@ -1446,6 +1449,10 @@ model SystemSettings {
   azureDalleDeployment    String?  // e.g. "dall-e-3" — Azure DALL-E deployment name
   azureDalleEndpoint      String?  // Optional: separate endpoint for DALL-E (if different from chat)
   azureDalleApiKey        String?  // Optional: separate API key for DALL-E
+  // Gemini image generation
+  geminiApiKey            String?
+  geminiModel             String?  @default("gemini-2.5-flash-image")
+  imageProvider           String?  @default("dalle")  // "dalle" | "gemini"
   updatedAt               DateTime @updatedAt
 
   @@map("system_settings")
@@ -1517,10 +1524,14 @@ model AuditLog {
   // changes: { before: Record<string, unknown>, after: Record<string, unknown> }
   changes    Json        @db.JsonB
   createdAt  DateTime    @default(now())
+  source     String?     // "ui" | "api" | "ai" | "import" | "cron"
+  entityName String?     // Human-readable name e.g. "Porsche Taycan Project"
+  summary    String?     // One-liner: "Changed status from DRAFT to ACTIVE"
 
   @@index([entityType, entityId])
   @@index([userId])
   @@index([createdAt])
+  @@index([entityType, createdAt])
   @@map("audit_logs")
 }
 
diff --git a/packages/engine/src/__tests__/duplicate-check.test.ts b/packages/engine/src/__tests__/duplicate-check.test.ts
new file mode 100644
index 0000000..3e0bf62
--- /dev/null
+++ b/packages/engine/src/__tests__/duplicate-check.test.ts
@@ -0,0 +1,99 @@
+import { describe, it, expect } from "vitest";
+import { checkDuplicateAssignment, type ExistingAssignment } from "../allocation/duplicate-check.js";
+
+const base: ExistingAssignment = {
+  id: "a1",
+  resourceId: "r1",
+  projectId: "p1",
+  startDate: new Date("2026-03-01"),
+  endDate: new Date("2026-06-30"),
+  status: "CONFIRMED",
+};
+
+describe("checkDuplicateAssignment", () => {
+  it("returns no duplicate when no existing assignments", () => {
+    const result = checkDuplicateAssignment("r1", "p1", "2026-04-01", "2026-05-01", []);
+    expect(result.isDuplicate).toBe(false);
+  });
+
+  it("returns no duplicate for different project", () => {
+    const result = checkDuplicateAssignment("r1", "p2", "2026-04-01", "2026-05-01", [base]);
+    expect(result.isDuplicate).toBe(false);
+  });
+
+  it("returns no duplicate for different resource", () => {
+    const result = checkDuplicateAssignment("r2", "p1", "2026-04-01", "2026-05-01", [base]);
+    expect(result.isDuplicate).toBe(false);
+  });
+
+  it("returns no duplicate when dates don't overlap (before)", () => {
+    const result = checkDuplicateAssignment("r1", "p1", "2026-01-01", "2026-02-28", [base]);
+    expect(result.isDuplicate).toBe(false);
+  });
+
+  it("returns no duplicate when dates don't overlap (after)", () => {
+    const result = checkDuplicateAssignment("r1", "p1", "2026-07-01", "2026-08-01", [base]);
+    expect(result.isDuplicate).toBe(false);
+  });
+
+  it("detects duplicate with full overlap", () => {
+    const result = checkDuplicateAssignment("r1", "p1", "2026-03-15", "2026-05-15", [base]);
+    expect(result.isDuplicate).toBe(true);
+    expect(result.conflictingAssignment?.id).toBe("a1");
+    expect(result.message).toContain("already assigned");
+  });
+
+  it("detects duplicate with partial overlap (start before, end during)", () => {
+    const result = checkDuplicateAssignment("r1", "p1", "2026-02-15", "2026-04-01", [base]);
+    expect(result.isDuplicate).toBe(true);
+  });
+
+  it("detects duplicate with partial overlap (start during, end after)", () => {
+    const result = checkDuplicateAssignment("r1", "p1", "2026-05-01", "2026-07-15", [base]);
+    expect(result.isDuplicate).toBe(true);
+  });
+
+  it("detects duplicate on exact same dates", () => {
+    const result = checkDuplicateAssignment("r1", "p1", "2026-03-01", "2026-06-30", [base]);
+    expect(result.isDuplicate).toBe(true);
+  });
+
+  it("ignores CANCELLED assignments", () => {
+    const cancelled = { ...base, status: "CANCELLED" };
+    const result = checkDuplicateAssignment("r1", "p1", "2026-04-01", "2026-05-01", [cancelled]);
+    expect(result.isDuplicate).toBe(false);
+  });
+
+  it("ignores DRAFT assignments", () => {
+    const draft = { ...base, status: "DRAFT" };
+    const result = checkDuplicateAssignment("r1", "p1", "2026-04-01", "2026-05-01", [draft]);
+    expect(result.isDuplicate).toBe(false);
+  });
+
+  it("excludes self by ID (for updates)", () => {
+    const result = checkDuplicateAssignment("r1", "p1", "2026-04-01", "2026-05-01", [base], "a1");
+    expect(result.isDuplicate).toBe(false);
+  });
+
+  it("does not exclude other assignments when excludeId is set", () => {
+    const other: ExistingAssignment = { ...base, id: "a2" };
+    const result = checkDuplicateAssignment("r1", "p1", "2026-04-01", "2026-05-01", [other], "a1");
+    expect(result.isDuplicate).toBe(true);
+  });
+
+  it("works with string dates", () => {
+    const strAssignment: ExistingAssignment = {
+      ...base,
+      startDate: "2026-03-01",
+      endDate: "2026-06-30",
+    };
+    const result = checkDuplicateAssignment("r1", "p1", "2026-04-01", "2026-05-01", [strAssignment]);
+    expect(result.isDuplicate).toBe(true);
+  });
+
+  it("checks PROPOSED status as active", () => {
+    const proposed = { ...base, status: "PROPOSED" };
+    const result = checkDuplicateAssignment("r1", "p1", "2026-04-01", "2026-05-01", [proposed]);
+    expect(result.isDuplicate).toBe(true);
+  });
+});
diff --git a/packages/engine/src/__tests__/shoring-ratio.test.ts b/packages/engine/src/__tests__/shoring-ratio.test.ts
new file mode 100644
index 0000000..71a158e
--- /dev/null
+++ b/packages/engine/src/__tests__/shoring-ratio.test.ts
@@ -0,0 +1,118 @@
+import { describe, it, expect } from "vitest";
+import { calculateShoringRatio, type ShoringAssignment } from "../allocation/shoring-ratio.js";
+
+function make(resourceId: string, countryCode: string | null, hoursPerDay = 8, workingDays = 20): ShoringAssignment {
+  return { resourceId, countryCode, hoursPerDay, workingDays };
+}
+
+describe("calculateShoringRatio", () => {
+  it("returns zeros for empty assignments", () => {
+    const r = calculateShoringRatio([]);
+    expect(r.totalHours).toBe(0);
+    expect(r.offshoreRatio).toBe(0);
+    expect(r.isAboveThreshold).toBe(false);
+  });
+
+  it("100% German → 0% offshore", () => {
+    const r = calculateShoringRatio([make("r1", "DE"), make("r2", "DE")]);
+    expect(r.onshoreRatio).toBe(100);
+    expect(r.offshoreRatio).toBe(0);
+    expect(r.isAboveThreshold).toBe(false);
+  });
+
+  it("100% offshore → 100% offshore, above threshold", () => {
+    const r = calculateShoringRatio([make("r1", "ES"), make("r2", "IN")]);
+    expect(r.offshoreRatio).toBe(100);
+    expect(r.isAboveThreshold).toBe(true);
+  });
+
+  it("50/50 mix → 50% offshore, below 55% threshold", () => {
+    const r = calculateShoringRatio([make("r1", "DE"), make("r2", "ES")]);
+    expect(r.offshoreRatio).toBe(50);
+    expect(r.isAboveThreshold).toBe(false);
+  });
+
+  it("40% onshore / 60% offshore → above 55% threshold", () => {
+    const assignments = [
+      make("r1", "DE", 8, 20),  // 160h
+      make("r2", "DE", 8, 20),  // 160h  → 320h onshore
+      make("r3", "ES", 8, 20),  // 160h
+      make("r4", "IN", 8, 20),  // 160h
+      make("r5", "IN", 8, 20),  // 160h  → 480h offshore
+    ];
+    const r = calculateShoringRatio(assignments);
+    expect(r.offshoreRatio).toBe(60);
+    expect(r.isAboveThreshold).toBe(true);
+  });
+
+  it("custom threshold: 30% → 40% offshore is above", () => {
+    const assignments = [
+      make("r1", "DE", 8, 20),  // 160h onshore
+      make("r2", "DE", 8, 20),  // 160h onshore  → 320h
+      make("r3", "ES", 4, 20),  // 80h offshore
+      make("r4", "IN", 4, 20),  // 80h offshore  → 160h
+    ];
+    // Total 480h, offshore 160h = 33%
+    const r = calculateShoringRatio(assignments, 30);
+    expect(r.offshoreRatio).toBe(33);
+    expect(r.isAboveThreshold).toBe(true);
+  });
+
+  it("resource without country counts as offshore", () => {
+    const r = calculateShoringRatio([make("r1", "DE"), make("r2", null)]);
+    expect(r.offshoreRatio).toBe(50);
+    expect(r.unknownCount).toBe(1);
+    expect(r.byCountry["UNKNOWN"]).toBeDefined();
+  });
+
+  it("country code is case-insensitive", () => {
+    const r = calculateShoringRatio([make("r1", "de"), make("r2", "De")]);
+    expect(r.onshoreRatio).toBe(100);
+    expect(r.offshoreRatio).toBe(0);
+  });
+
+  it("custom onshore country code", () => {
+    const r = calculateShoringRatio([make("r1", "ES"), make("r2", "DE")], 55, "ES");
+    expect(r.onshoreCountryCode).toBe("ES");
+    expect(r.onshoreHours).toBe(160); // r1 is onshore
+    expect(r.offshoreHours).toBe(160); // r2 is offshore (DE is not onshore here)
+  });
+
+  it("byCountry breakdown is correct", () => {
+    const r = calculateShoringRatio([
+      make("r1", "DE", 8, 10),
+      make("r2", "ES", 8, 10),
+      make("r3", "ES", 4, 10),
+      make("r4", "IN", 8, 10),
+    ]);
+    expect(r.byCountry["DE"].resourceCount).toBe(1);
+    expect(r.byCountry["ES"].resourceCount).toBe(2);
+    expect(r.byCountry["IN"].resourceCount).toBe(1);
+    expect(r.byCountry["DE"].hours).toBe(80);
+    expect(r.byCountry["ES"].hours).toBe(120);
+    expect(r.byCountry["IN"].hours).toBe(80);
+  });
+
+  it("exactly at threshold is above", () => {
+    // 55% offshore = at threshold = isAboveThreshold true (>= not >)
+    // Need 55/100 = 11/20 ratio
+    const assignments = [
+      make("r1", "DE", 9, 20),   // 180h onshore
+      make("r2", "ES", 11, 20),  // 220h offshore
+    ];
+    // Total 400h, offshore 220h = 55%
+    const r = calculateShoringRatio(assignments);
+    expect(r.offshoreRatio).toBe(55);
+    expect(r.isAboveThreshold).toBe(true);
+  });
+
+  it("weighted by hours — FTE matters", () => {
+    const r = calculateShoringRatio([
+      make("r1", "DE", 8, 20),  // 160h full-time onshore
+      make("r2", "ES", 2, 20),  // 40h part-time offshore
+    ]);
+    // Total 200h, offshore 40h = 20%
+    expect(r.offshoreRatio).toBe(20);
+    expect(r.isAboveThreshold).toBe(false);
+  });
+});
diff --git a/packages/engine/src/allocation/duplicate-check.ts b/packages/engine/src/allocation/duplicate-check.ts
new file mode 100644
index 0000000..68f6c9e
--- /dev/null
+++ b/packages/engine/src/allocation/duplicate-check.ts
@@ -0,0 +1,78 @@
+/**
+ * Checks whether a resource is already assigned to the same project
+ * with overlapping dates. Used to prevent duplicate bookings.
+ */
+
+export interface ExistingAssignment {
+  id: string;
+  resourceId: string;
+  projectId: string;
+  startDate: Date | string;
+  endDate: Date | string;
+  status: string;
+}
+
+export interface DuplicateCheckResult {
+  isDuplicate: boolean;
+  conflictingAssignment?: ExistingAssignment;
+  message?: string;
+}
+
+const ACTIVE_STATUSES = new Set(["CONFIRMED", "ACTIVE", "PROPOSED"]);
+
+function toTime(d: Date | string): number {
+  const dt = typeof d === "string" ? new Date(d) : d;
+  dt.setHours(0, 0, 0, 0);
+  return dt.getTime();
+}
+
+/**
+ * Check if assigning a resource to a project with the given dates
+ * would create a duplicate (same resource + same project + overlapping dates).
+ *
+ * @param resourceId - The resource being assigned
+ * @param projectId - The project being assigned to
+ * @param startDate - Start of the new assignment
+ * @param endDate - End of the new assignment
+ * @param existingAssignments - All current assignments for this resource
+ * @param excludeAssignmentId - Exclude this ID (for updates — don't conflict with self)
+ */
+export function checkDuplicateAssignment(
+  resourceId: string,
+  projectId: string,
+  startDate: Date | string,
+  endDate: Date | string,
+  existingAssignments: ExistingAssignment[],
+  excludeAssignmentId?: string,
+): DuplicateCheckResult {
+  const newStart = toTime(startDate);
+  const newEnd = toTime(endDate);
+
+  for (const existing of existingAssignments) {
+    // Skip self (for updates)
+    if (excludeAssignmentId && existing.id === excludeAssignmentId) continue;
+
+    // Skip different resource or project
+    if (existing.resourceId !== resourceId) continue;
+    if (existing.projectId !== projectId) continue;
+
+    // Skip cancelled/inactive
+    if (!ACTIVE_STATUSES.has(existing.status)) continue;
+
+    // Check date overlap: existingStart <= newEnd && existingEnd >= newStart
+    const existStart = toTime(existing.startDate);
+    const existEnd = toTime(existing.endDate);
+
+    if (existStart <= newEnd && existEnd >= newStart) {
+      const startStr = new Date(existing.startDate).toISOString().slice(0, 10);
+      const endStr = new Date(existing.endDate).toISOString().slice(0, 10);
+      return {
+        isDuplicate: true,
+        conflictingAssignment: existing,
+        message: `Resource is already assigned to this project from ${startStr} to ${endStr}. Consider updating the existing assignment instead.`,
+      };
+    }
+  }
+
+  return { isDuplicate: false };
+}
diff --git a/packages/engine/src/allocation/index.ts b/packages/engine/src/allocation/index.ts
index 408b102..94f39e2 100644
--- a/packages/engine/src/allocation/index.ts
+++ b/packages/engine/src/allocation/index.ts
@@ -2,3 +2,5 @@ export * from "./calculator.js";
 export * from "./availability-validator.js";
 export * from "./recurrence.js";
 export * from "./chargeability.js";
+export * from "./duplicate-check.js";
+export * from "./shoring-ratio.js";
diff --git a/packages/engine/src/allocation/shoring-ratio.ts b/packages/engine/src/allocation/shoring-ratio.ts
new file mode 100644
index 0000000..b910f6a
--- /dev/null
+++ b/packages/engine/src/allocation/shoring-ratio.ts
@@ -0,0 +1,115 @@
+/**
+ * Calculate the onshore/offshore staffing ratio for a project.
+ * "Onshore" = resources in the configured country (default: DE).
+ * "Offshore" = everything else (including resources without a country).
+ */
+
+export interface ShoringAssignment {
+  resourceId: string;
+  countryCode: string | null;
+  hoursPerDay: number;
+  workingDays: number;
+}
+
+export interface ShoringCountryBreakdown {
+  hours: number;
+  pct: number;
+  resourceCount: number;
+}
+
+export interface ShoringResult {
+  totalHours: number;
+  onshoreHours: number;
+  offshoreHours: number;
+  onshoreRatio: number;  // 0-100
+  offshoreRatio: number; // 0-100
+  threshold: number;
+  isAboveThreshold: boolean;
+  onshoreCountryCode: string;
+  /** Breakdown per country code ("DE" → { hours, pct, resourceCount }) */
+  byCountry: Record<string, ShoringCountryBreakdown>;
+  /** Resources with no country assigned */
+  unknownCount: number;
+}
+
+/**
+ * @param assignments - All active assignments for a project with their resource's country
+ * @param threshold - Max offshore percentage before alert (default 55)
+ * @param onshoreCountryCode - Country code considered "onshore" (default "DE")
+ */
+export function calculateShoringRatio(
+  assignments: ShoringAssignment[],
+  threshold = 55,
+  onshoreCountryCode = "DE",
+): ShoringResult {
+  if (assignments.length === 0) {
+    return {
+      totalHours: 0,
+      onshoreHours: 0,
+      offshoreHours: 0,
+      onshoreRatio: 0,
+      offshoreRatio: 0,
+      threshold,
+      isAboveThreshold: false,
+      onshoreCountryCode,
+      byCountry: {},
+      unknownCount: 0,
+    };
+  }
+
+  const byCountry: Record<string, { hours: number; resources: Set<string> }> = {};
+  let totalHours = 0;
+  let onshoreHours = 0;
+  let unknownCount = 0;
+  const unknownResources = new Set<string>();
+
+  for (const a of assignments) {
+    const hours = a.hoursPerDay * a.workingDays;
+    totalHours += hours;
+
+    const code = a.countryCode?.toUpperCase() ?? "UNKNOWN";
+
+    if (code === "UNKNOWN") {
+      if (!unknownResources.has(a.resourceId)) {
+        unknownCount++;
+        unknownResources.add(a.resourceId);
+      }
+    }
+
+    if (!byCountry[code]) {
+      byCountry[code] = { hours: 0, resources: new Set() };
+    }
+    byCountry[code].hours += hours;
+    byCountry[code].resources.add(a.resourceId);
+
+    if (code === onshoreCountryCode.toUpperCase()) {
+      onshoreHours += hours;
+    }
+  }
+
+  const offshoreHours = totalHours - onshoreHours;
+  const offshoreRatio = totalHours > 0 ? Math.round((offshoreHours / totalHours) * 100) : 0;
+  const onshoreRatio = totalHours > 0 ? 100 - offshoreRatio : 0;
+
+  const result: Record<string, ShoringCountryBreakdown> = {};
+  for (const [code, data] of Object.entries(byCountry)) {
+    result[code] = {
+      hours: data.hours,
+      pct: totalHours > 0 ? Math.round((data.hours / totalHours) * 100) : 0,
+      resourceCount: data.resources.size,
+    };
+  }
+
+  return {
+    totalHours,
+    onshoreHours,
+    offshoreHours,
+    onshoreRatio,
+    offshoreRatio,
+    threshold,
+    isAboveThreshold: offshoreRatio >= threshold,
+    onshoreCountryCode: onshoreCountryCode.toUpperCase(),
+    byCountry: result,
+    unknownCount,
+  };
+}
diff --git a/packages/shared/src/constants/columns.ts b/packages/shared/src/constants/columns.ts
index 15ee15e..c1226d8 100644
--- a/packages/shared/src/constants/columns.ts
+++ b/packages/shared/src/constants/columns.ts
@@ -21,6 +21,7 @@ export const PROJECT_COLUMNS: ColumnDef[] = [
   { key: "dates",       label: "Dates",       defaultVisible: true,  hideable: true  },
   { key: "budget",      label: "Budget",      defaultVisible: false, hideable: true  },
   { key: "allocations", label: "Allocations", defaultVisible: true,  hideable: true  },
+  { key: "shoring",     label: "Shoring",     defaultVisible: false, hideable: true  },
   { key: "responsible", label: "Responsible", defaultVisible: false, hideable: true  },
 ];
 
diff --git a/packages/shared/src/schemas/client.schema.ts b/packages/shared/src/schemas/client.schema.ts
index 75c5125..4d9a4fa 100644
--- a/packages/shared/src/schemas/client.schema.ts
+++ b/packages/shared/src/schemas/client.schema.ts
@@ -5,6 +5,7 @@ export const CreateClientSchema = z.object({
   code: z.string().max(50).optional(),
   parentId: z.string().optional(),
   sortOrder: z.number().int().default(0),
+  tags: z.array(z.string().max(50)).optional(),
 });
 
 export const UpdateClientSchema = z.object({
@@ -13,6 +14,7 @@ export const UpdateClientSchema = z.object({
   sortOrder: z.number().int().optional(),
   isActive: z.boolean().optional(),
   parentId: z.string().nullable().optional(),
+  tags: z.array(z.string().max(50)).optional(),
 });
 
 export type CreateClientInput = z.infer<typeof CreateClientSchema>;
diff --git a/packages/shared/src/schemas/project.schema.ts b/packages/shared/src/schemas/project.schema.ts
index d0a9b26..0863f3b 100644
--- a/packages/shared/src/schemas/project.schema.ts
+++ b/packages/shared/src/schemas/project.schema.ts
@@ -28,11 +28,13 @@ export const CreateProjectBaseSchema = z.object({
   dynamicFields: z.record(z.string(), z.unknown()).default({}),
   blueprintId: z.string().optional(),
   status: z.nativeEnum(ProjectStatus).default(ProjectStatus.DRAFT),
-  responsiblePerson: z.string().max(200).optional(),
+  responsiblePerson: z.string().min(1, "Responsible person is required").max(200),
   color: z.string().regex(/^#[0-9a-fA-F]{6}$/, "Must be a hex color like #3b82f6").optional(),
   utilizationCategoryId: z.string().optional(),
   clientId: z.string().optional(),
   coverImageUrl: z.string().optional(),
+  shoringThreshold: z.number().int().min(0).max(100).optional(),
+  onshoreCountryCode: z.string().min(2).max(3).optional(),
 });
 
 // Full schema with date-range validation
diff --git a/packages/shared/src/types/client.ts b/packages/shared/src/types/client.ts
index e57630d..1fee6be 100644
--- a/packages/shared/src/types/client.ts
+++ b/packages/shared/src/types/client.ts
@@ -5,6 +5,7 @@ export interface Client {
   parentId?: string | null;
   isActive: boolean;
   sortOrder: number;
+  tags: string[];
   createdAt: Date;
   updatedAt: Date;
 }
diff --git a/plan.md b/plan.md
index 15aa887..a7e7013 100644
--- a/plan.md
+++ b/plan.md
@@ -1,265 +1,177 @@
-# Planarchy — Product Owner Strategic Plan
+# Nearshore-Ratio Indikator — Plan
 
-> Consolidated analysis from 4 expert agents: Roadmap, API Surface, Frontend UX, and Test Infrastructure.
-> Date: 2026-03-19
+## Anforderungsanalyse
+
+**Was:** Ein Nearshore/Offshore-Ratio Indikator pro Projekt, der zeigt wieviel % der gebuchten Ressourcen Standort Deutschland vs. andere Standorte haben.
+
+**Kernkonzept:**
+- **Onshore** = Resource hat `countryId` → Country mit Code "DE" (Deutschland)
+- **Offshore/Nearshore** = Resource hat `countryId` → Country mit Code != "DE" (oder kein Country gesetzt)
+- **Shoring-Ratio** = (Offshore-Stunden / Gesamt-Stunden) * 100
+- **Threshold** = Default 55%, pro Projekt aenderbar
+- **Anzeige** = Farbiger Indikator (gruen < Threshold, rot >= Threshold)
+
+**Datenquelle:** Assignments eines Projekts → Resource.countryId → Country.code
 
 ---
 
-## Executive Summary
+## Betroffene Pakete & Dateien
 
-Planarchy has reached **Phase 9** with a mature core: timeline planning, allocation management, estimating, vacation pro, skill matrix, RBAC, and chargeability reporting. The product covers 34 routes, 47 DB models, ~200 tRPC procedures, and 109+ domain components.
-
-**However, the product has critical gaps preventing production readiness and growth:**
-
-| Dimension | Score | Verdict |
-|-----------|-------|---------|
-| Feature completeness | 85% | Strong core, thin edges (staffing, reporting) |
-| Code quality | 90% | Zero TODOs, clean architecture, typed end-to-end |
-| Test coverage | 55% | Engine excellent, API routers ~5%, no integration tests |
-| CI/CD & DevOps | 10% | No pipeline, no prod Docker, no monitoring |
-| UX polish | 75% | Deep timeline/estimates, but gaps in staffing workflow |
-| Growth readiness | 40% | No scenario planning, no integrations, no mobile |
+| Paket | Dateien | Art der Aenderung |
+|-------|---------|------------------|
+| `packages/db` | `prisma/schema.prisma` | **edit** — `shoringThreshold Int?` auf Project |
+| `packages/engine` | `src/allocation/shoring-ratio.ts` | **create** — Pure Berechnung |
+| `packages/engine` | `src/__tests__/shoring-ratio.test.ts` | **create** — Unit Tests |
+| `packages/api` | `src/router/project.ts` | **edit** — `getShoringRatio` Query + Threshold im Update |
+| `packages/api` | `src/router/assistant-tools.ts` | **edit** — `get_shoring_ratio` AI Tool |
+| `apps/web` | `src/components/projects/ShoringIndicator.tsx` | **create** — Visueller Indikator |
+| `apps/web` | `src/app/(app)/projects/[id]/page.tsx` | **edit** — Indikator auf Detail-Seite |
+| `apps/web` | `src/app/(app)/projects/ProjectsClient.tsx` | **edit** — Indikator-Spalte in Projektliste |
+| `apps/web` | `src/components/projects/ProjectModal.tsx` | **edit** — Threshold-Feld im Edit |
+| `apps/web` | `src/components/dashboard/widgets/ProjectHealthWidget.tsx` | **edit** — Optional: Shoring in Health-Score |
 
 ---
 
-## Part 1: Bottlenecks
+## Task-Liste
 
-### 1.1 Production Readiness Blockers (Critical)
+### Phase 1: Schema + Engine (sequenziell)
 
-| # | Bottleneck | Impact | Severity |
-|---|-----------|--------|----------|
-| B1 | **No CI/CD pipeline** — tests, lint, tsc not automated on PR | Regressions ship undetected | CRITICAL |
-| B2 | **No production Docker image** — only dev Dockerfile exists | Cannot deploy containerized | CRITICAL |
-| B3 | **No monitoring/logging** — no Sentry, no Pino, no APM | Blind in production, cannot debug | CRITICAL |
-| B4 | **No health check endpoints** — `/health`, `/ready` missing | Cannot detect/recover from failures | HIGH |
-| B5 | **API router test coverage ~5%** — 28 routers, almost no unit tests | Mutations untested at API boundary | HIGH |
+- [ ] **Task 1:** Schema erweitern → `packages/db/prisma/schema.prisma`
+  - `shoringThreshold Int? @default(55)` auf dem Project Model
+  - Repraesntiert den kritischen Shoring-Prozentsatz (Default 55%)
+  - `prisma db push`
 
-### 1.2 UX Bottlenecks
+- [ ] **Task 2:** Pure Shoring-Ratio Berechnung → `packages/engine/src/allocation/shoring-ratio.ts`
+  ```typescript
+  interface ShoringInput {
+    resourceId: string;
+    countryCode: string | null; // "DE", "ES", "IN", etc.
+    hoursPerDay: number;
+    workingDays: number; // oder totalHours direkt
+  }
 
-| # | Bottleneck | Impact | Severity |
-|---|-----------|--------|----------|
-| B6 | **Staffing -> Allocation gap** — match results don't link to allocation creation | Users must manually recreate allocations after finding matches | HIGH |
-| B7 | **Reporting is thin** — only 2 report types (chargeability, PDF allocations) | Finance/PMs can't self-serve custom reports | MEDIUM |
-| B8 | **No bulk operations in list views** — no multi-select outside timeline | Slow to manage 10+ resources/projects at once | MEDIUM |
-| B9 | **Dashboard metrics computed live** — no caching/pre-computation | Slow dashboard load with growing data | MEDIUM |
-| B10 | **Timeline 3.3K LOC ecosystem** — ResourcePanel 1035, ProjectPanel 1315 LOC | Hard to maintain, risky to modify | LOW |
+  interface ShoringResult {
+    totalHours: number;
+    onshoreHours: number;     // countryCode === "DE"
+    offshoreHours: number;    // countryCode !== "DE"
+    offshoreRatio: number;    // 0-100 (%)
+    onshoreRatio: number;     // 0-100 (%)
+    threshold: number;        // Default 55
+    isAboveThreshold: boolean;
+    byCountry: Record<string, { hours: number; pct: number; resourceCount: number }>;
+  }
 
-### 1.3 Architecture Bottlenecks
+  export function calculateShoringRatio(
+    assignments: ShoringInput[],
+    threshold?: number, // Default 55
+    onshoreCountryCode?: string, // Default "DE"
+  ): ShoringResult
+  ```
 
-| # | Bottleneck | Impact | Severity |
-|---|-----------|--------|----------|
-| B11 | **Prisma client cache invalidation** — dev server restart required after schema changes | Developer friction, CI complexity | MEDIUM |
-| B12 | **No webhook/event outbound** — SSE event bus exists but no external subscriptions | Cannot notify external systems (Slack, Jira) | MEDIUM |
-| B13 | **No soft-delete strategy** — mixed approach (isActive, status, hard delete) | Data loss risk, no audit trail on deletions | LOW |
-| B14 | **Rate card lookup manual in estimates** — no auto-lookup by resource chapter/level | Estimate creation slower than needed | LOW |
+- [ ] **Task 3:** Unit Tests → `packages/engine/src/__tests__/shoring-ratio.test.ts`
+  - 100% Deutsche Ressourcen → offshoreRatio = 0, isAboveThreshold = false
+  - 100% Offshore → offshoreRatio = 100, isAboveThreshold = true
+  - 50/50 Mix → offshoreRatio = 50, isAboveThreshold = false (< 55)
+  - 60/40 Mix → offshoreRatio = 60, isAboveThreshold = true (> 55)
+  - Custom Threshold (30%) → 40% Offshore = above threshold
+  - Leere Assignments → offshoreRatio = 0
+  - Resource ohne Country → zaehlt als Offshore
+
+- [ ] **Task 4:** Export → `packages/engine/src/allocation/index.ts`
+
+### Phase 2: API + UI (parallel)
+
+- [ ] **Task 5:** API Query → `packages/api/src/router/project.ts`
+  - `getShoringRatio` Query (protectedProcedure):
+    - Input: `{ projectId: string }`
+    - Laedt Assignments mit Resource.country
+    - Ruft `calculateShoringRatio()` auf
+    - Returns: `ShoringResult`
+  - `update` Mutation erweitern: `shoringThreshold` im Input akzeptieren
+  - `getById` erweitern: `shoringThreshold` im Response zurueckgeben
+
+- [ ] **Task 6:** Visueller Indikator → `ShoringIndicator.tsx`
+  - Kompakte Anzeige:
+    ```
+    [====DE 45%====|==ES 30%==|IN 25%] ⚠ 55% offshore (Limit: 55%)
+    ```
+  - Stacked horizontal bar: Laender-Segmente farbig
+  - Gruen/Gelb/Rot Badge je nach Threshold
+  - Gruen: < Threshold - 10pp
+  - Gelb: Threshold - 10pp bis Threshold
+  - Rot: >= Threshold
+  - Tooltip: Aufschluesselung nach Land
+  - Props: `projectId: string` (laedt Daten selbst via tRPC)
+
+- [ ] **Task 7:** Threshold im ProjectModal → `ProjectModal.tsx`
+  - Neues Feld: "Max Offshore %" (Number Input, 0-100, Default 55)
+  - Unter "Budget" oder als eigene Section "Shoring"
+  - Label: "Maximum Offshore/Nearshore Ratio (%)"
+  - Hinweis: "Alert when offshore staffing exceeds this percentage"
+
+- [ ] **Task 8:** Indikator auf Projekt-Detail-Seite → `projects/[id]/page.tsx`
+  - `<ShoringIndicator projectId={id} />` neben dem Budget-Status
+  - Oder als eigene Karte unter den Budget-Karten
+
+- [ ] **Task 9:** Indikator-Spalte in Projektliste → `ProjectsClient.tsx`
+  - Neue Spalte "Shoring" mit Mini-Indikator (nur Badge gruen/gelb/rot + %)
+  - InfoTooltip: "Offshore staffing ratio vs project threshold"
+
+### Phase 3: AI + Dashboard (parallel)
+
+- [ ] **Task 10:** AI Assistant Tool → `assistant-tools.ts`
+  - `get_shoring_ratio` Tool:
+    - Input: `{ projectId: string }`
+    - Returns: menschenlesbare Aufschluesselung
+    - "Project X: 45% onshore (DE), 55% offshore (ES 30%, IN 25%). ⚠ Above 55% threshold."
+
+- [ ] **Task 11:** Optional: Dashboard Widget oder ProjectHealth Integration
+  - Shoring-Warnung in ProjectHealthWidget einbauen
+  - Oder neues Mini-Widget "Shoring Alerts" (Projekte ueber Threshold)
 
 ---
 
-## Part 2: Growth Potential
+## Abhaengigkeiten
 
-### 2.1 High-Value Feature Opportunities
+```
+Task 1 (Schema) → Task 2 (Engine) → Task 3 (Tests) → Task 4 (Export)
+Task 4 → Task 5 (API)
+Task 5 → Task 6 + Task 7 + Task 8 + Task 9 (alle parallel)
+Task 5 → Task 10 (AI Tool)
+Task 5 → Task 11 (Dashboard)
+```
 
-#### Tier 1 — Quick Wins (1-3 days each)
-
-| # | Feature | Value | Effort |
-|---|---------|-------|--------|
-| G1 | **Staffing "Assign" button** — pre-populate allocation modal from match result | Closes biggest UX gap, saves 5+ clicks per staffing decision | 1-2 days |
-| G2 | **Dashboard caching** — pre-compute metrics, invalidate on SSE events | 3-5x dashboard load speed improvement | 1-2 days |
-| G3 | **Bulk list operations** — multi-select + context menu on resources/projects | Enables batch edit, export, status change | 2-3 days |
-| G4 | **Health check endpoints** — `/api/health` (liveness), `/api/ready` (DB + Redis) | Production deployment prerequisite | 0.5 day |
-
-#### Tier 2 — Strategic Features (1-2 weeks each)
-
-| # | Feature | Value | Effort |
-|---|---------|-------|--------|
-| G5 | **Scenario/What-If Planning** — alternate staffing mixes, cost simulations | Differentiation for PMs and finance; leverages existing engine | 1-2 weeks |
-| G6 | **Skill Marketplace** — searchable skill inventory, gap heat map, hiring priorities | High leverage from existing skill matrix; enables org-wide planning | 1 week |
-| G7 | **Custom Report Builder** — drag columns, pivot, grouping, scheduled exports | Unlocks self-service analytics for finance and executives | 1-2 weeks |
-| G8 | **Collaboration Layer** — inline comments on estimates, @mention, approval feedback | Enables cross-functional workflows (finance, PM, staffing) | 1-2 weeks |
-
-#### Tier 3 — Market Differentiators (2-4 weeks each)
-
-| # | Feature | Value | Effort |
-|---|---------|-------|--------|
-| G9 | **AI-Powered Insights** — auto-suggest staffing, anomaly detection, narrative reports | Leverages existing Azure OpenAI integration; executive decision support | 2-3 weeks |
-| G10 | **External Integrations** — Jira/Linear sync, Slack notifications, Google Calendar | Stickiness; connects Planarchy into existing workflows | 2-4 weeks |
-| G11 | **Mobile Companion** — PWA with quick-view (status, gaps, approvals, push notifications) | Engagement for field PMs and remote staff | 3-4 weeks |
-| G12 | **Dispo V2 Clean-Slate Import** — design doc + tickets exist, ready for implementation | Unblocks migration from legacy system; critical for customer onboarding | 1-2 weeks |
-
-### 2.2 Missing Dashboard Widgets
-
-| Widget | Purpose | Effort |
-|--------|---------|--------|
-| Budget spend forecast | Forward-looking actuals vs budget trend line | 2 days |
-| Team utilization heatmap | Resource x week grid with color intensity | 2 days |
-| Skill gap analysis | Required vs available skills across open demands | 3 days |
-| Project health scorecard | On-time, on-budget, quality composite score | 2 days |
-| Hiring pipeline | Forecast unfilled demand 3-6 months out | 3 days |
+- Tasks 6-9 **vollstaendig parallel** (verschiedene Dateien)
+- Tasks 10-11 parallel zu Tasks 6-9
 
 ---
 
-## Part 3: Automation Potential
+## Akzeptanzkriterien
 
-### 3.1 Development Workflow Automation
-
-| # | Automation | Current State | Target | Effort |
-|---|-----------|--------------|--------|--------|
-| A1 | **CI/CD Pipeline** | None | GitHub Actions: test + lint + tsc on PR, build + deploy on merge | 1-2 days |
-| A2 | **Dependency scanning** | None | Dependabot + npm audit in CI | 0.5 day |
-| A3 | **E2E test suite expansion** | 4 specs (auth, timeline, projects, resources) | 20+ specs covering key user flows | 1 week |
-| A4 | **API integration tests** | ~5% router coverage | 80% coverage with mock DB layer | 1-2 weeks |
-| A5 | **Coverage gates** | Engine 95%, staffing 90%, others none | All packages minimum 80% | 2 days config |
-
-### 3.2 Business Process Automation
-
-| # | Automation | Current Manual Process | Automated Process | Effort |
-|---|-----------|----------------------|-------------------|--------|
-| A6 | **Auto-staffing suggestions** | PM manually searches for resources per demand | System proposes top-3 matches when demand is created | 3 days |
-| A7 | **Vacation conflict alerts** | Manager manually checks team calendar before approving | Auto-detect overlap > threshold, flag in approval flow | 2 days |
-| A8 | **Budget overrun notifications** | Finance checks dashboards manually | SSE-triggered notification when project hits 80%/100% budget | 1 day |
-| A9 | **Estimate approval reminders** | Verbal follow-up | Scheduled notification after N days in SUBMITTED status | 1 day |
-| A10 | **Chargeability alerts** | Monthly manual review | Weekly auto-email when resource chargeability drops below target | 2 days |
-| A11 | **Rate card auto-apply** | Manual rate lookup when creating estimate demand lines | Auto-fill LCR/UCR from rate card by resource chapter + level + client | 2 days |
-| A12 | **Public holiday auto-import** | Admin manually batch-creates per year | Auto-generate on year rollover based on country/state config | 1 day |
-
-### 3.3 Monitoring & Observability Automation
-
-| # | Automation | Target | Effort |
-|---|-----------|--------|--------|
-| A13 | **Structured logging** (Pino) | All API requests logged with correlation ID | 2 days |
-| A14 | **Error tracking** (Sentry) | Unhandled exceptions captured with context | 1 day |
-| A15 | **Performance monitoring** | Slow query detection, API response time tracking | 2 days |
-| A16 | **Uptime monitoring** | External health check probe, alerting | 0.5 day |
+- [ ] `pnpm test:unit` laeuft gruen (inkl. neue shoring-ratio Tests)
+- [ ] `pnpm --filter @planarchy/web exec tsc --noEmit` — keine neuen Errors
+- [ ] **Projekt-Detail:** Shoring-Indikator sichtbar mit Laender-Aufschluesselung
+- [ ] **Projektliste:** Shoring-Badge-Spalte (gruen/gelb/rot)
+- [ ] **Projekt-Edit:** Threshold aenderbar (Default 55%)
+- [ ] **AI Assistant:** "Wie ist der Shoring-Mix bei Projekt X?" liefert Antwort
+- [ ] **Farben:** Gruen < 45%, Gelb 45-55%, Rot >= 55% (bei Default-Threshold)
+- [ ] **Resource ohne Country:** Zaehlt als Offshore
+- [ ] **Projekt ohne Assignments:** Zeigt "No data" statt Fehler
 
 ---
 
-## Part 4: Prioritized Roadmap
+## Risiken & offene Fragen
 
-### Sprint 0: Production Foundation (Week 1)
+### Risiken
+- **Country-Daten unvollstaendig:** Viele Resources haben moeglicherweise kein `countryId` gesetzt
+  → Mitigation: Zaehlt als Offshore + Warning "X resources have no country assigned"
+- **Stunden vs Headcount:** Soll nach Stunden oder Koepfen gemessen werden?
+  → Vorschlag: Stunden (gewichtet), da ein 50%-FTE weniger zaehlt als ein 100%-FTE
 
-**Goal:** Unblock production deployment.
-
-- [ ] **A1** — GitHub Actions CI pipeline (test + lint + tsc + build)
-- [ ] **G4** — Health check endpoints (`/api/health`, `/api/ready`)
-- [ ] **A14** — Sentry error tracking integration
-- [ ] **A13** — Pino structured logging in API layer
-- [ ] Production Dockerfile (multi-stage, distroless base)
-- [ ] docker-compose.prod.yml with env-based config
-- [ ] Database backup strategy (pg_dump cron + S3)
-
-**Acceptance:** `main` branch has green CI, production image builds, errors are captured.
-
-### Sprint 1: Quick Wins (Week 2)
-
-**Goal:** Close the biggest UX gaps and improve daily workflows.
-
-- [ ] **G1** — Staffing "Assign" button (match -> allocation in 1 click)
-- [ ] **G2** — Dashboard metric caching (Redis-backed, SSE-invalidated)
-- [ ] **G3** — Bulk operations on resource/project lists
-- [ ] **A8** — Budget overrun notifications (80% + 100% thresholds)
-- [ ] **A9** — Estimate approval reminders (auto-notify after 3 days)
-
-**Acceptance:** Staffing-to-allocation is 1 click, dashboard loads <500ms, bulk select works.
-
-### Sprint 2: Test Coverage & Stability (Week 3)
-
-**Goal:** Harden the codebase for confident iteration.
-
-- [ ] **A4** — API router integration tests (target 15 most-used routers)
-- [ ] **A5** — Coverage gates: api + application packages at 80%
-- [ ] **A3** — E2E expansion: 10 new specs (estimate lifecycle, vacation flow, bulk ops, filters)
-- [ ] **A2** — Dependabot + npm audit in CI
-
-**Acceptance:** `pnpm test:unit` covers all routers, E2E suite runs in CI, zero high-severity vulnerabilities.
-
-### Sprint 3: Automation & Intelligence (Week 4-5)
-
-**Goal:** Automate repetitive decisions, surface insights proactively.
-
-- [ ] **A6** — Auto-staffing suggestions on demand creation
-- [ ] **A7** — Vacation conflict detection in approval flow
-- [ ] **A10** — Weekly chargeability alerts
-- [ ] **A11** — Rate card auto-apply in estimate demand lines
-- [ ] **A12** — Public holiday auto-import on year rollover
-- [ ] **G6** — Skill marketplace MVP (searchable inventory + gap heat map)
-
-**Acceptance:** Demands auto-suggest resources, vacation conflicts auto-flagged, rate cards auto-filled.
-
-### Sprint 4: Strategic Features (Week 6-8)
-
-**Goal:** Build differentiation features that create competitive moat.
-
-- [ ] **G5** — Scenario/what-if planning (staffing mix simulator)
-- [ ] **G7** — Custom report builder MVP (column picker, filters, export)
-- [ ] **G8** — Collaboration layer (comments on estimates, @mention)
-- [ ] **G12** — Dispo V2 clean-slate import (leverage existing design docs + tickets)
-- [ ] Dashboard new widgets: budget forecast, skill gap, project health scorecard
-
-**Acceptance:** PMs can simulate staffing scenarios, finance can build custom reports, Dispo import onboards first customer.
-
-### Sprint 5: Market Expansion (Week 9-12)
-
-**Goal:** Expand the platform beyond core planning.
-
-- [ ] **G9** — AI insights: auto-staffing, anomaly detection, narrative summaries
-- [ ] **G10** — Jira/Linear integration + Slack notifications
-- [ ] **G11** — Mobile PWA companion
-- [ ] **A15** — Performance monitoring + load testing baseline
-- [ ] Advanced: multi-tenant architecture planning
-
-**Acceptance:** AI suggestions active, Jira sync live, mobile app installable.
-
----
-
-## Part 5: Risk Register
-
-| # | Risk | Probability | Impact | Mitigation |
-|---|------|-------------|--------|------------|
-| R1 | Production deployment without CI catches regressions | HIGH | CRITICAL | Sprint 0 is mandatory before any feature work |
-| R2 | Timeline 3.3K LOC becomes unmaintainable | MEDIUM | HIGH | Decompose into sub-hook modules when next touching timeline |
-| R3 | Dashboard performance degrades with data growth | MEDIUM | MEDIUM | G2 (caching) in Sprint 1; monitor query times |
-| R4 | Prisma schema changes break dev workflow | HIGH | LOW | Automate restart in dev scripts (already documented) |
-| R5 | Skill matrix AI costs grow with usage | LOW | MEDIUM | Add token budget tracking in SystemSettings |
-| R6 | No data backup strategy | MEDIUM | CRITICAL | Add pg_dump cron + S3 upload in Sprint 0 |
-| R7 | Single-point-of-failure (1 dev, 1 server) | HIGH | CRITICAL | Document architecture, automate deployment, enable team onboarding |
-
----
-
-## Part 6: Key Metrics to Track
-
-### Product Metrics
-- **Time-to-staff**: Minutes from demand creation to resource assignment
-- **Estimate turnaround**: Days from estimate creation to approval
-- **Vacation approval latency**: Hours from request to decision
-- **Dashboard load time**: P95 response time for dashboard page
-- **Chargeability accuracy**: Forecast vs actual deviation %
-
-### Engineering Metrics
-- **Test coverage**: % by package (target: all >=80%)
-- **CI green rate**: % of PRs passing all gates
-- **Build time**: Minutes for full `next build`
-- **Error rate**: Sentry exceptions per hour
-- **API latency**: P95 tRPC procedure response time
-
----
-
-## Appendix: Current State Snapshot
-
-| Dimension | Count |
-|-----------|-------|
-| Database models | 47 |
-| tRPC routers | 28 |
-| tRPC procedures | ~200 (120Q + 80M) |
-| Frontend routes | 34 |
-| Domain components | 109+ |
-| Shared UI components | 20+ |
-| Unit test files | 62 |
-| E2E test specs | 4 |
-| Engine test coverage | 95% (gated) |
-| Staffing test coverage | 90% (gated) |
-| API router test coverage | ~5% (not gated) |
-| CI/CD pipeline | None |
-| Production Docker | None |
-| Monitoring/APM | None |
-| Completed phases | 9 |
-| Known pain points | 24 (documented in LEARNINGS.md) |
+### Offene Fragen
+1. **Nur "DE" als Onshore?** Oder soll der Onshore-Laendercode konfigurierbar sein?
+   → Vorschlag: Default "DE", aber konfigurierbar pro Projekt
+2. **Welche Assignment-Status zaehlen?** Nur CONFIRMED? Auch PROPOSED?
+   → Vorschlag: CONFIRMED + PROPOSED (beide relevant fuer Planung)
+3. **Soll der Indikator auch in der Timeline sichtbar sein?**
+   → Vorschlag: Erst mal nur Projektliste + Detail-Seite
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 41dfa83..01e6ca9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,6 +30,15 @@ importers:
 
   apps/web:
     dependencies:
+      '@dnd-kit/core':
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@dnd-kit/sortable':
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
+      '@dnd-kit/utilities':
+        specifier: ^3.2.2
+        version: 3.2.2(react@19.2.4)
       '@node-rs/argon2':
         specifier: ^2.0.2
         version: 2.0.2
@@ -471,6 +480,28 @@ packages:
   '@dimforge/rapier3d-compat@0.12.0':
     resolution: {integrity: sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==}
 
+  '@dnd-kit/accessibility@3.1.1':
+    resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@dnd-kit/core@6.3.1':
+    resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@dnd-kit/sortable@10.0.0':
+    resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
+  '@dnd-kit/utilities@3.2.2':
+    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
   '@emnapi/core@1.8.1':
     resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
 
@@ -4574,6 +4605,31 @@ snapshots:
 
   '@dimforge/rapier3d-compat@0.12.0': {}
 
+  '@dnd-kit/accessibility@3.1.1(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+      tslib: 2.8.1
+
+  '@dnd-kit/core@6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.1(react@19.2.4)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      tslib: 2.8.1
+
+  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.4)
+      react: 19.2.4
+      tslib: 2.8.1
+
+  '@dnd-kit/utilities@3.2.2(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+      tslib: 2.8.1
+
   '@emnapi/core@1.8.1':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
diff --git a/scripts/restart.sh b/scripts/restart.sh
new file mode 100755
index 0000000..533431a
--- /dev/null
+++ b/scripts/restart.sh
@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+set -euo pipefail
+cd "$(dirname "$0")/.."
+
+echo "Restarting Planarchy..."
+echo ""
+
+# Stop
+bash scripts/stop.sh
+
+echo ""
+sleep 1
+
+# Start
+bash scripts/start.sh
diff --git a/scripts/start.sh b/scripts/start.sh
new file mode 100755
index 0000000..8e1030a
--- /dev/null
+++ b/scripts/start.sh
@@ -0,0 +1,51 @@
+#!/usr/bin/env bash
+set -euo pipefail
+cd "$(dirname "$0")/.."
+
+echo "Starting Planarchy..."
+
+# 1. Start Docker services
+echo "  Starting PostgreSQL + Redis..."
+docker compose up -d postgres redis
+sleep 2
+
+# 2. Wait for PostgreSQL to be healthy
+echo "  Waiting for PostgreSQL..."
+for i in {1..30}; do
+  if docker exec planarchy-postgres-1 pg_isready -U planarchy -q 2>/dev/null; then
+    break
+  fi
+  sleep 1
+done
+
+# 3. Regenerate Prisma client
+echo "  Generating Prisma client..."
+pnpm --filter @planarchy/db exec prisma generate --no-hints 2>/dev/null
+
+# 4. Clear stale Next.js cache
+rm -rf apps/web/.next
+
+# 5. Start Next.js dev server
+echo "  Starting Next.js on port 3100..."
+nohup pnpm --filter @planarchy/web dev > /tmp/planarchy-dev.log 2>&1 &
+echo $! > /tmp/planarchy-dev.pid
+
+# 6. Wait for server to be ready
+echo "  Waiting for server..."
+for i in {1..30}; do
+  if curl -sf http://localhost:3100/api/health > /dev/null 2>&1; then
+    echo ""
+    echo "Planarchy is running!"
+    curl -s http://localhost:3100/api/ready | python3 -m json.tool 2>/dev/null || curl -s http://localhost:3100/api/ready
+    echo ""
+    echo "  URL: http://localhost:3100"
+    echo "  Logs: tail -f /tmp/planarchy-dev.log"
+    echo "  PID: $(cat /tmp/planarchy-dev.pid)"
+    exit 0
+  fi
+  sleep 1
+done
+
+echo "ERROR: Server failed to start within 30 seconds"
+echo "Check logs: tail -50 /tmp/planarchy-dev.log"
+exit 1
diff --git a/scripts/stop.sh b/scripts/stop.sh
new file mode 100755
index 0000000..0e78694
--- /dev/null
+++ b/scripts/stop.sh
@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+set -euo pipefail
+cd "$(dirname "$0")/.."
+
+echo "Stopping Planarchy..."
+
+# 1. Stop Next.js dev server
+if [ -f /tmp/planarchy-dev.pid ]; then
+  PID=$(cat /tmp/planarchy-dev.pid)
+  if kill -0 "$PID" 2>/dev/null; then
+    echo "  Stopping Next.js (PID $PID)..."
+    kill "$PID" 2>/dev/null || true
+    sleep 1
+    kill -9 "$PID" 2>/dev/null || true
+  fi
+  rm -f /tmp/planarchy-dev.pid
+fi
+
+# Also kill anything on port 3100
+fuser -k 3100/tcp 2>/dev/null || true
+
+# 2. Stop Docker services (keep data volumes)
+echo "  Stopping PostgreSQL + Redis..."
+docker compose stop postgres redis 2>/dev/null || true
+
+echo ""
+echo "Planarchy stopped."