Merge remote-tracking branch 'origin/main' into feat/SH-388-uplift-slide-over

# Conflicts:
#	e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-detail.png
#	src/app/(protected)/workorders/_components/list/table/cells/uplift-cell.tsx
#	src/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells.tsx
#	src/app/(protected)/workorders/_components/uplifts/work-order-uplift-list-item.tsx
#	src/app/(protected)/workorders/_components/uplifts/work-order-uplifts-dialog-content.tsx
#	src/app/(protected)/workorders/_components/uplifts/work-order-uplifts-dialog.tsx
#	src/components/common/address-autocomplete-field.tsx
#	src/domain/work-orders/utils/uplift-display-utils.ts
#	src/test/app/(protected)/workorders/work-order-uplifts-affordances.test.tsx

docs/FEATURE_PRIORITIZATION.md

@@ -26,7 +26,7 @@
 | 4     | dashboard                 | must-have   | 1    | `pages/Dashboard.js`                | `/`, `/dashboard`                                                             | 253    | auth                                                                         |
 | 5     | settings/dropdowns        | must-have   | 1    | `pages/settings/` (DropdownOptions) | `/settings/dropdowns`                                                         | 866\*  | auth                                                                         |
 | 6     | accounts                  | must-have   | 2    | `pages/accounts/`                   | `/accounts`, `/accounts/new`, `/accounts/edit/:id`                            | 745    | auth                                                                         |
-| 7     | locations                 | must-have   | 2    | `pages/locations/`                  | `/locations`, `/locations/new`, `/locations/edit/:id`                         | 1.1k   | auth, accounts                                                               |
+| 7     | locations                 | must-have   | 2    | `pages/locations/`                  | `/locations` (Add Site modal, detail panel)                                   | 1.1k   | auth, accounts                                                               |
 | 8     | employees                 | must-have   | 2    | `pages/employees/`                  | `/employees`, `/employees/new`, `/employees/edit/:id`                         | 1.9k   | auth                                                                         |
 | 9     | vendors                   | should-have | 3    | `pages/vendors/`                    | `/vendors`, `/vendors/new`, `/vendors/edit/:id`                               | 610    | auth, work-orders (full)                                                     |
 | 10    | vendor-pos                | should-have | 3    | `pages/vendor-pos/`                 | `/vendor-pos`, `/vendor-pos/:id`                                              | 1k     | auth, work-orders (full)                                                     |

e2e/dashboard/dashboard.visual.spec.ts

@@ -191,7 +191,10 @@ async function mockDashboardApi(page: Page, userRoles: string) {
       return;
     }
 
-    if (pathname.includes("/Dashboard/Stats")) return fulfillJson(route, { data: STATS });
+    if (pathname.includes("/Dashboard/Stats")) {
+      const unassigned = userRoles === "Dispatcher" ? 0 : 11;
+      return fulfillJson(route, { data: { ...STATS, unassigned } });
+    }
     if (pathname.includes("/Dashboard/Workload")) return fulfillJson(route, { data: WORKLOAD });
     if (pathname.includes("/Dashboard/Performance"))
       return fulfillJson(route, { data: PERFORMANCE });

e2e/vendors/vendor-uplift-workflow.spec.ts

@@ -97,7 +97,7 @@ test("vendor uploads scanned evidence and submits a dispatch-scoped uplift", asy
 
   await page.getByLabel("New total NTE").fill("125");
   await page.getByLabel("Reason").fill("Replacement compressor");
-  await page.getByLabel("Evidence (PDF/JPG/PNG)").setInputFiles({
+  await page.getByLabel("Evidence (PDF, JPG, PNG, HEIC, MP4, MOV)").setInputFiles({
     name: "estimate.pdf",
     mimeType: "application/pdf",
     buffer: Buffer.from("%PDF-1.4\nmock estimate"),
@@ -349,7 +349,7 @@ test("internal approver can approve, reject, and revoke with audited notes", asy
   await expect(page.getByRole("heading", { name: "Uplift Approvals" })).toBeVisible();
 
   const approvalRow = page.getByRole("row").filter({ hasText: "DSP-41" });
-  await approvalRow.getByRole("button", { name: "Approve" }).click();
+  await approvalRow.getByRole("button", { name: "Approve $25.00" }).click();
 
   const changesRow = page.getByRole("row").filter({ hasText: "DSP-42" });
   await changesRow.getByRole("button", { name: "Reject" }).click();
@@ -360,7 +360,7 @@ test("internal approver can approve, reject, and revoke with audited notes", asy
   const approvedRow = page.getByRole("row").filter({ hasText: "DSP-41" });
   await approvedRow.getByRole("button", { name: "Revoke" }).click();
   await page.getByLabel("Reason for revoking").fill("Approval was made in error.");
-  await page.getByRole("button", { name: "Revoke $125" }).click();
+  await page.getByRole("button", { name: "Revoke $25.00" }).click();
 
   await expect
     .poll(() => decisions)

package.json

@@ -50,63 +50,63 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@fontsource/dm-sans": "^5.2.8",
-    "@fontsource/jetbrains-mono": "^5.2.8",
-    "@fontsource/montserrat": "^5.2.8",
+    "@fontsource/dm-sans": "^5.3.0",
+    "@fontsource/jetbrains-mono": "^5.3.0",
+    "@fontsource/montserrat": "^5.3.0",
     "@fullcalendar/daygrid": "^6.1.21",
     "@fullcalendar/interaction": "^6.1.21",
     "@fullcalendar/react": "^6.1.21",
     "@fullcalendar/timegrid": "^6.1.21",
     "@generouted/react-router": "^1.20.2",
-    "@hookform/resolvers": "^5.4.0",
-    "@mui/icons-material": "^9.2.0",
-    "@mui/material": "^9.2.0",
-    "@sentry/react": "10.73.0",
-    "@tanstack/query-broadcast-client-experimental": "5.101.2",
-    "@tanstack/react-query": "5.101.2",
-    "@tanstack/react-query-devtools": "5.101.2",
-    "@testing-library/dom": "^10.4.1",
+    "@hookform/resolvers": "^5.9.1",
+    "@mui/icons-material": "9.2.0",
+    "@mui/material": "9.2.0",
+    "@sentry/react": "10.75.0",
+    "@tanstack/query-broadcast-client-experimental": "5.103.1",
+    "@tanstack/react-query": "5.103.1",
+    "@tanstack/react-query-devtools": "5.103.1",
+    "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
     "clsx": "^2.1.1",
-    "ky": "^2.0.2",
-    "lucide-react": "^1.24.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "react-hook-form": "^7.81.0",
+    "ky": "^2.1.0",
+    "lucide-react": "^1.47.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-hook-form": "^7.88.0",
     "react-icons": "^5.7.0",
-    "react-router": "^8.2.0",
+    "react-router": "^8.4.0",
     "react-toastify": "^11.1.0",
-    "tailwind-merge": "^3.6.0",
-    "zod": "^4.4.3"
+    "tailwind-merge": "^3.7.0",
+    "zod": "^4.6.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^21.2.1",
-    "@commitlint/config-conventional": "^21.2.0",
+    "@commitlint/cli": "^21.2.3",
+    "@commitlint/config-conventional": "^21.2.3",
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.61.1",
-    "@sentry/cli": "3.7.0",
-    "@tailwindcss/vite": "^4.3.2",
-    "@types/node": "^24.13.3",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.3",
-    "@vitest/coverage-v8": "^4.1.10",
-    "eslint": "^10.7.0",
+    "@sentry/cli": "3.8.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^24.13.6",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "@vitest/coverage-v8": "^4.1.11",
+    "eslint": "^10.11.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.3",
-    "globals": "^17.7.0",
+    "eslint-plugin-react-refresh": "^0.5.7",
+    "globals": "^17.12.0",
     "husky": "^9.1.7",
     "jsdom": "^29.1.1",
-    "lint-staged": "^17.0.8",
-    "prettier": "^3.9.5",
-    "tailwindcss": "^4.3.2",
+    "lint-staged": "^17.5.1",
+    "prettier": "^3.9.8",
+    "tailwindcss": "^4.3.3",
     "typescript": "~6.0.3",
-    "typescript-eslint": "^8.63.0",
-    "vite": "^8.1.4",
-    "vitest": "^4.1.10"
+    "typescript-eslint": "^8.70.0",
+    "vite": "^8.3.0",
+    "vitest": "^4.1.11"
   },
   "engines": {
     "node": ">=22.22.1"

src/api/api-error.ts

@@ -10,11 +10,21 @@ export class ApiError extends Error {
   }
 }
 
+export const REQUEST_UPLIFTS_ROLE_DENIAL_MESSAGE =
+  "Your role can't request uplifts on this work order.";
+
 export function mapHttpStatusToMessage(status: number, data?: unknown): string {
   if (status === 401) {
     return "You are not authorized to access this page.";
   }
   if (status === 403) {
+    if (data && typeof data === "object") {
+      const record = data as Record<string, unknown>;
+      const message = record.message ?? record.Message ?? record.error;
+      if (message === REQUEST_UPLIFTS_ROLE_DENIAL_MESSAGE) {
+        return REQUEST_UPLIFTS_ROLE_DENIAL_MESSAGE;
+      }
+    }
     return "You do not have permission to perform this action.";
   }
   if (status === 404) {

src/api/api-paths.ts

@@ -33,6 +33,9 @@ export const API_PATHS = {
     pocPatch: (id: string | number) => `workorders/${id}/poc`,
     boardDetail: (id: string | number) => `workorders/${id}/detail`,
     completionTemplates: "workorders/completion-templates",
+    completionTemplateById: (id: string | number) => `workorders/completion-templates/${id}`,
+    completionTemplateLinkedWorkOrders: (id: string | number) =>
+      `workorders/completion-templates/${id}/linked-work-orders`,
     comments: (id: string | number) => `workorders/${id}/comments`,
     commentItem: (workOrderId: string | number, commentId: string | number) =>
       `workorders/${workOrderId}/comments/${commentId}`,
@@ -86,6 +89,14 @@ export const API_PATHS = {
     getList: "User",
     create: "team-members",
     detail: "team-members",
+    invite: (id: string | number) => `team-members/${encodeURIComponent(String(id))}/invite`,
+    myPermissions: "team-members/me/permissions",
+  },
+  teamMemberInvite: {
+    resolve: "team-member-invites/resolve",
+    sendCode: "team-member-invites/send-code",
+    verifyCode: "team-member-invites/verify-code",
+    complete: "team-member-invites/complete",
   },
   contact: {
     getList: "Contact/GetContactList",

src/app/(protected)/_layout.tsx

@@ -6,6 +6,7 @@ import { ProtectedRoute } from "@/components/auth/protected-route";
 import { AppSidebar } from "@/components/layout/app-sidebar";
 import { getSidebarWidth } from "@/config/menu";
 import { AppTopbar } from "@/components/layout/app-topbar";
+import { SlaAtRiskBanner } from "@/components/notifications/sla-at-risk-banner";
 import { NotificationSessionProvider } from "@/domain/notifications/session/notification-session-provider";
 
 export default function AdminShellLayout() {
@@ -40,6 +41,7 @@ export default function AdminShellLayout() {
             sx={{ width: `calc(100% - ${sidebarWidth}px)` }}
           >
             <AppTopbar onToggleNav={handleToggleNav} />
+            <SlaAtRiskBanner />
 
             <Box
               component="main"

src/app/(protected)/account/_components/account-summary-card.tsx

@@ -0,0 +1,33 @@
+import { Text } from "@/components/ui/text";
+import type { AuthUser } from "@/domain/auth/types/auth-user";
+
+function ReadOnlyValue({ label, value }: { label: string; value: string | undefined }) {
+  return (
+    <div className="grid gap-1.5">
+      <Text variant="label" tone="muted" className="text-[12px]!">
+        {label}
+      </Text>
+      <Text variant="body" className="m-0 text-[14px]!">
+        {value || "—"}
+      </Text>
+    </div>
+  );
+}
+
+export function AccountSummaryCard({ user }: { user: AuthUser }) {
+  return (
+    <section
+      aria-label="Account details"
+      className="grid gap-4 rounded-lg border border-(--color-border) bg-(--color-bg-surface) p-5"
+    >
+      <div className="grid grid-cols-2 gap-3">
+        <ReadOnlyValue label="Name" value={user.fullname} />
+        <ReadOnlyValue label="Role" value={user.userRoles} />
+      </div>
+      <ReadOnlyValue label="Email" value={user.email} />
+      <Text variant="caption" tone="muted" className="text-[11.5px]!">
+        Contact your Admin to change your name, role, or email.
+      </Text>
+    </section>
+  );
+}

src/app/(protected)/account/_components/change-password-section.tsx

@@ -0,0 +1,132 @@
+import { useForm, useWatch } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Box } from "@mui/material";
+import { KeyRound } from "lucide-react";
+
+import { PasswordChecklist } from "@/components/auth/password-checklist";
+import { Button } from "@/components/ui/button";
+import { FormField } from "@/components/ui/form-field";
+import { PasswordField } from "@/components/ui/password-field";
+import { Text } from "@/components/ui/text";
+import {
+  CURRENT_PASSWORD_INCORRECT_MESSAGE,
+  changePasswordSchema,
+  type ChangePasswordFormValues,
+} from "@/domain/auth/schemas/change-password-schema";
+import { useChangePassword } from "@/domain/auth/use-cases/use-change-password";
+
+const EMPTY_VALUES: ChangePasswordFormValues = {
+  currentPassword: "",
+  newPassword: "",
+  confirmPassword: "",
+};
+
+export function ChangePasswordSection() {
+  const changePassword = useChangePassword();
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    setError,
+    formState: { errors },
+  } = useForm<ChangePasswordFormValues>({
+    resolver: zodResolver(changePasswordSchema),
+    defaultValues: EMPTY_VALUES,
+    mode: "onTouched",
+  });
+
+  const values = useWatch({ control });
+  const newPassword = values.newPassword ?? "";
+  const canSubmit = changePasswordSchema.safeParse(values).success;
+  const serverError = changePassword.error?.message;
+  const showServerError =
+    Boolean(serverError) && serverError !== CURRENT_PASSWORD_INCORRECT_MESSAGE;
+
+  const onSubmit = (form: ChangePasswordFormValues) => {
+    changePassword.mutate(
+      {
+        Currentpassword: form.currentPassword,
+        Newpassword: form.newPassword,
+        Confirmpassword: form.confirmPassword,
+      },
+      {
+        onSuccess: () => reset(EMPTY_VALUES),
+        onError: (error) => {
+          if (error.message === CURRENT_PASSWORD_INCORRECT_MESSAGE) {
+            setError("currentPassword", { message: CURRENT_PASSWORD_INCORRECT_MESSAGE });
+          }
+        },
+      },
+    );
+  };
+
+  return (
+    <Box
+      component="form"
+      aria-labelledby="change-password-heading"
+      onSubmit={handleSubmit(onSubmit)}
+      className="grid gap-4 rounded-lg border border-(--color-border) bg-(--color-bg-surface) p-5"
+    >
+      <div className="flex items-center gap-2">
+        <KeyRound size={15} aria-hidden="true" className="text-primary" />
+        <Text id="change-password-heading" variant="heading" className="m-0 text-[15px]!">
+          Change Password
+        </Text>
+      </div>
+
+      <FormField
+        label="Current password"
+        htmlFor="account-current-password"
+        required
+        error={Boolean(errors.currentPassword)}
+        helperText={errors.currentPassword?.message}
+      >
+        <PasswordField
+          {...register("currentPassword")}
+          id="account-current-password"
+          autoComplete="current-password"
+          error={Boolean(errors.currentPassword)}
+        />
+      </FormField>
+
+      <FormField label="New password" htmlFor="account-new-password" required>
+        <PasswordField
+          {...register("newPassword")}
+          id="account-new-password"
+          autoComplete="new-password"
+          slotProps={{ htmlInput: { "aria-describedby": "account-password-rules" } }}
+        />
+        <PasswordChecklist id="account-password-rules" password={newPassword} />
+      </FormField>
+
+      <FormField
+        label="Confirm new password"
+        htmlFor="account-confirm-password"
+        required
+        error={Boolean(errors.confirmPassword)}
+        helperText={errors.confirmPassword?.message}
+      >
+        <PasswordField
+          {...register("confirmPassword")}
+          id="account-confirm-password"
+          autoComplete="new-password"
+          error={Boolean(errors.confirmPassword)}
+        />
+      </FormField>
+
+      {showServerError && <Text variant="error">{serverError}</Text>}
+
+      <div className="flex justify-end">
+        <Button
+          type="submit"
+          disabled={!canSubmit}
+          loading={changePassword.isPending}
+          loadingText="Updating…"
+        >
+          Update password
+        </Button>
+      </div>
+    </Box>
+  );
+}

src/app/(protected)/account/index.tsx

@@ -0,0 +1,24 @@
+import { Box } from "@mui/material";
+
+import { AccountSummaryCard } from "@/app/(protected)/account/_components/account-summary-card";
+import { ChangePasswordSection } from "@/app/(protected)/account/_components/change-password-section";
+import { PageHeader } from "@/components/ui/page-header";
+import { useAuthContext } from "@/providers/auth-context";
+
+export default function MyAccountPage() {
+  const { user } = useAuthContext();
+
+  return (
+    <Box className="flex flex-col gap-2 p-2.5">
+      <PageHeader
+        surface
+        title="My Account"
+        subtitle="Review your account and manage your password"
+      />
+      <Box className="grid max-w-md gap-5 px-5 pb-5">
+        {user != null && <AccountSummaryCard user={user} />}
+        <ChangePasswordSection />
+      </Box>
+    </Box>
+  );
+}

src/app/(protected)/completion-docs/_components/completion-template-add-link.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+export function CompletionTemplateAddLink({
+  onClick,
+  children,
+}: {
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="self-start"
+      style={{ fontSize: 12, fontWeight: 500, color: "var(--color-primary)", textAlign: "left" }}
+    >
+      {children}
+    </button>
+  );
+}

src/app/(protected)/completion-docs/_components/completion-template-created-by.tsx

@@ -0,0 +1,42 @@
+import { Text } from "@/components/ui/text";
+
+function initials(name: string): string {
+  return name
+    .trim()
+    .split(/\s+/)
+    .map((part) => part[0] ?? "")
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+export function CompletionTemplateCreatedBy({ name }: { name: string | null }) {
+  if (name === null) {
+    return (
+      <Text variant="caption" tone="muted" sx={{ fontSize: 13 }}>
+        —
+      </Text>
+    );
+  }
+  return (
+    <span className="flex items-center gap-2">
+      <span
+        aria-hidden
+        className="flex shrink-0 items-center justify-center rounded-full"
+        style={{
+          width: 22,
+          height: 22,
+          fontSize: 9,
+          fontWeight: 600,
+          background: "var(--color-bg-muted)",
+          color: "var(--color-primary)",
+        }}
+      >
+        {initials(name)}
+      </span>
+      <Text variant="caption" sx={{ fontSize: 13 }}>
+        {name}
+      </Text>
+    </span>
+  );
+}

src/app/(protected)/completion-docs/_components/completion-template-detail.tsx

@@ -0,0 +1,87 @@
+import type { ReactNode } from "react";
+import { Text } from "@/components/ui/text";
+import { COMPLETION_TEMPLATE_COPY } from "@/domain/completion-templates/constants/completion-template-constants";
+import type { CompletionTemplate } from "@/domain/completion-templates/types/completion-template";
+import { descriptionLines } from "@/domain/completion-templates/utils/description-lines";
+import { formatTemplateDate } from "@/domain/completion-templates/utils/format-template-date";
+import { CompletionTemplateCreatedBy } from "./completion-template-created-by";
+import {
+  AutoPopulatedFields,
+  FieldLabel,
+  SectionTitle,
+  StandardSafetyBullets,
+} from "./completion-template-sections";
+
+function ReadOnlyField({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div>
+      <Text
+        variant="label"
+        tone="muted"
+        sx={{ fontSize: 12, fontWeight: 500, display: "block", marginBottom: "6px" }}
+      >
+        {label}
+      </Text>
+      {children}
+    </div>
+  );
+}
+
+function ProcedureList({ template }: { template: CompletionTemplate }) {
+  if (template.procedures.length === 0) {
+    return (
+      <Text variant="caption" tone="muted" sx={{ fontSize: 13 }}>
+        {COMPLETION_TEMPLATE_COPY.noProcedureDetail}
+      </Text>
+    );
+  }
+  return (
+    <ol className="m-0 list-none p-0">
+      {template.procedures.map((procedure, index) => (
+        <li key={index} style={{ marginBottom: 12 }}>
+          <Text variant="label" sx={{ fontSize: 13, fontWeight: 600, display: "block", mb: 0.5 }}>
+            {procedure.name || `Procedure ${index + 1}`}
+          </Text>
+          {descriptionLines(procedure.description).map((line, lineIndex) => (
+            <Text key={lineIndex} variant="body" sx={{ fontSize: 13, lineHeight: 1.5, my: 0.5 }}>
+              {line}
+            </Text>
+          ))}
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+/** Everything a template holds, read-only. */
+export function CompletionTemplateDetail({ template }: { template: CompletionTemplate }) {
+  return (
+    <div className="grid gap-3.5">
+      <SectionTitle>Completion Document</SectionTitle>
+      <ReadOnlyField label="Document Title">
+        <Text variant="body" sx={{ fontSize: 13 }}>
+          {template.name || "—"}
+        </Text>
+      </ReadOnlyField>
+      <AutoPopulatedFields />
+      <div>
+        <FieldLabel>Safety Notes</FieldLabel>
+        <StandardSafetyBullets extra={template.extraSafetyNote} />
+      </div>
+      <div>
+        <FieldLabel hint="(optional)">Procedures</FieldLabel>
+        <ProcedureList template={template} />
+      </div>
+      <div className="grid grid-cols-2 gap-3">
+        <ReadOnlyField label="Last Updated">
+          <Text variant="body" sx={{ fontSize: 13 }}>
+            {formatTemplateDate(template.lastUpdatedAt)}
+          </Text>
+        </ReadOnlyField>
+        <ReadOnlyField label="Created By">
+          <CompletionTemplateCreatedBy name={template.createdByName} />
+        </ReadOnlyField>
+      </div>
+    </div>
+  );
+}

src/app/(protected)/completion-docs/_components/completion-template-dialog-chrome.tsx

@@ -0,0 +1,105 @@
+import { FileText, Pencil, Plus, Save, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { DialogCancelButton } from "@/components/ui/dialog-cancel-button";
+import { IconCloseButton } from "@/components/ui/icon-close-button";
+import { Text } from "@/components/ui/text";
+import { COMPLETION_TEMPLATE_COPY } from "@/domain/completion-templates/constants/completion-template-constants";
+import type { CompletionTemplatePermissions } from "./use-completion-template-permissions";
+import type { CompletionTemplateDialogMode } from "./use-completion-template-dialog";
+
+export function CompletionTemplateDialogHeader({
+  title,
+  subtitle,
+  onClose,
+}: {
+  title: string;
+  subtitle: string;
+  onClose: () => void;
+}) {
+  return (
+    <div
+      className="flex shrink-0 items-center justify-between"
+      style={{
+        height: 60,
+        padding: "0 20px",
+        borderBottom: "1px solid var(--color-border)",
+        background: "var(--color-bg-surface)",
+      }}
+    >
+      <div className="flex min-w-0 items-center gap-2.5">
+        <FileText size={18} className="shrink-0" style={{ color: "var(--color-primary)" }} />
+        <div className="min-w-0">
+          <Text
+            as="div"
+            variant="heading"
+            className="truncate"
+            sx={{ fontSize: 16, fontWeight: 700, lineHeight: 1.1 }}
+          >
+            {title}
+          </Text>
+          <Text as="div" variant="caption" tone="muted" className="truncate" sx={{ fontSize: 13 }}>
+            {subtitle}
+          </Text>
+        </div>
+      </div>
+      <IconCloseButton onClick={onClose} />
+    </div>
+  );
+}
+
+type FooterProps = {
+  mode: CompletionTemplateDialogMode;
+  permissions: CompletionTemplatePermissions;
+  isSaving: boolean;
+  onCancel: () => void;
+  onSubmit: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+};
+
+export function CompletionTemplateDialogFooter({
+  mode,
+  permissions,
+  isSaving,
+  onCancel,
+  onSubmit,
+  onEdit,
+  onDelete,
+}: FooterProps) {
+  const footerStyle = {
+    padding: "12px 20px",
+    borderTop: "1px solid var(--color-border)",
+    background: "var(--color-bg-surface)",
+    flexShrink: 0,
+  };
+  if (mode !== "view") {
+    return (
+      <div className="flex items-center justify-end gap-3" style={footerStyle}>
+        <DialogCancelButton onClick={onCancel} disabled={isSaving} />
+        <Button onClick={onSubmit} disabled={isSaving} className="gap-1.5">
+          {mode === "create" ? <Plus size={13} /> : <Save size={13} />}
+          {mode === "create"
+            ? COMPLETION_TEMPLATE_COPY.addTemplate
+            : COMPLETION_TEMPLATE_COPY.saveChanges}
+        </Button>
+      </div>
+    );
+  }
+  return (
+    <div
+      className={`flex items-center gap-3 ${permissions.canDelete ? "justify-between" : "justify-end"}`}
+      style={footerStyle}
+    >
+      {permissions.canDelete && (
+        <Button variant="ghost" onClick={onDelete} className="gap-1.5 text-destructive">
+          <Trash2 size={13} /> Delete
+        </Button>
+      )}
+      {permissions.canEdit && (
+        <Button onClick={onEdit} className="gap-1.5">
+          <Pencil size={13} /> Edit
+        </Button>
+      )}
+    </div>
+  );
+}

src/app/(protected)/completion-docs/_components/completion-template-dialog-heading.ts

@@ -0,0 +1,21 @@
+import type { CompletionTemplate } from "@/domain/completion-templates/types/completion-template";
+import { formatTemplateDate } from "@/domain/completion-templates/utils/format-template-date";
+import type { CompletionTemplateDialogMode } from "./use-completion-template-dialog";
+
+export function dialogHeading(
+  template: CompletionTemplate | null,
+  mode: CompletionTemplateDialogMode,
+): { title: string; subtitle: string } {
+  if (template === null) {
+    return {
+      title: "New Completion Document Template",
+      subtitle: "Completion Document Template",
+    };
+  }
+  if (mode === "edit") return { title: template.name, subtitle: "Editing template" };
+  const createdBy = template.createdByName ?? "—";
+  return {
+    title: template.name,
+    subtitle: `Created by ${createdBy} · Updated ${formatTemplateDate(template.lastUpdatedAt)}`,
+  };
+}

src/app/(protected)/completion-docs/_components/completion-template-dialog.tsx

@@ -0,0 +1,102 @@
+import { Dialog, DialogTitle } from "@mui/material";
+import { useState } from "react";
+import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+import type { CompletionTemplate } from "@/domain/completion-templates/types/completion-template";
+import { CompletionTemplateDetail } from "./completion-template-detail";
+import {
+  CompletionTemplateDialogFooter,
+  CompletionTemplateDialogHeader,
+} from "./completion-template-dialog-chrome";
+import { dialogHeading } from "./completion-template-dialog-heading";
+import { CompletionTemplateForm } from "./completion-template-form";
+import { CompletionTemplatePreview } from "./completion-template-preview";
+import { DeleteCompletionTemplateDialog } from "./delete-completion-template-dialog";
+import {
+  useCompletionTemplateDialog,
+  type CompletionTemplateDialogMode,
+} from "./use-completion-template-dialog";
+import type { CompletionTemplatePermissions } from "./use-completion-template-permissions";
+
+type CompletionTemplateDialogProps = {
+  /** `null` adds a new template. */
+  template: CompletionTemplate | null;
+  initialMode: CompletionTemplateDialogMode;
+  permissions: CompletionTemplatePermissions;
+  onClose: () => void;
+  onSaved: (template: CompletionTemplate) => void;
+};
+
+/** View, add or edit one template beside its document preview. */
+export function CompletionTemplateDialog({
+  template,
+  initialMode,
+  permissions,
+  onClose,
+  onSaved,
+}: CompletionTemplateDialogProps) {
+  const dialog = useCompletionTemplateDialog({ template, initialMode, onClose, onSaved });
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
+  const heading = dialogHeading(template, dialog.mode);
+
+  return (
+    <Dialog
+      open
+      onClose={onClose}
+      maxWidth={false}
+      aria-labelledby="completion-template-dialog-title"
+      slotProps={{
+        ...dialogBlurBackdropSlotProps,
+        paper: {
+          className: "flex max-h-[85vh] flex-col overflow-hidden border border-border p-0",
+          style: {
+            borderRadius: 12,
+            width: "min(1040px, calc(100vw - 32px))",
+            maxWidth: "none",
+            background: "var(--color-bg-muted)",
+          },
+        },
+      }}
+    >
+      <DialogTitle id="completion-template-dialog-title" className="sr-only">
+        {heading.title}
+      </DialogTitle>
+      <CompletionTemplateDialogHeader
+        title={heading.title}
+        subtitle={heading.subtitle}
+        onClose={onClose}
+      />
+      <div className="flex min-h-0 flex-1 flex-row">
+        <CompletionTemplatePreview values={dialog.previewValues} isEditing={dialog.isEditing} />
+        <div
+          className="flex min-h-0 flex-col"
+          style={{ width: "42%", background: "var(--color-bg-surface)" }}
+        >
+          <div className="min-h-0 flex-1 overflow-y-auto" style={{ padding: 20 }}>
+            {dialog.isEditing ? (
+              <CompletionTemplateForm form={dialog.form} />
+            ) : (
+              template !== null && <CompletionTemplateDetail template={template} />
+            )}
+          </div>
+        </div>
+      </div>
+      <CompletionTemplateDialogFooter
+        mode={dialog.mode}
+        permissions={permissions}
+        isSaving={dialog.isSaving}
+        onCancel={dialog.cancel}
+        onSubmit={() => void dialog.submit()}
+        onEdit={dialog.startEditing}
+        onDelete={() => setConfirmingDelete(true)}
+      />
+      {template !== null && permissions.canDelete && (
+        <DeleteCompletionTemplateDialog
+          template={template}
+          open={confirmingDelete}
+          onClose={() => setConfirmingDelete(false)}
+          onDeleted={onClose}
+        />
+      )}
+    </Dialog>
+  );
+}

src/app/(protected)/completion-docs/_components/completion-template-form.tsx

@@ -0,0 +1,64 @@
+import { Controller, type UseFormReturn } from "react-hook-form";
+import { FormField } from "@/components/ui/form-field";
+import { TextField } from "@/components/ui/text-field";
+import type { CompletionTemplateFormValues } from "@/domain/completion-templates/schemas/completion-template-schema";
+import { CompletionTemplateProceduresEditor } from "./completion-template-procedures-editor";
+import { CompletionTemplateSafetyNoteField } from "./completion-template-safety-note-field";
+import {
+  AutoPopulatedFields,
+  FieldLabel,
+  SectionTitle,
+  StandardSafetyBullets,
+} from "./completion-template-sections";
+
+type CompletionTemplateFormProps = {
+  form: UseFormReturn<CompletionTemplateFormValues>;
+};
+
+function TitleField({ form }: CompletionTemplateFormProps) {
+  return (
+    <Controller
+      control={form.control}
+      name="name"
+      render={({ field, fieldState }) => (
+        <FormField
+          label="Document Title"
+          htmlFor="completion-template-title"
+          required
+          error={fieldState.error !== undefined}
+          helperText={fieldState.error?.message}
+        >
+          <TextField
+            id="completion-template-title"
+            value={field.value}
+            onChange={field.onChange}
+            onBlur={field.onBlur}
+            inputRef={field.ref}
+            placeholder="Completion document title"
+            error={fieldState.error !== undefined}
+          />
+        </FormField>
+      )}
+    />
+  );
+}
+
+/** The editable template: title, fixed references, the optional note and procedures. */
+export function CompletionTemplateForm({ form }: CompletionTemplateFormProps) {
+  return (
+    <div className="grid gap-3.5">
+      <SectionTitle>Completion Document</SectionTitle>
+      <TitleField form={form} />
+      <AutoPopulatedFields />
+      <div className="grid gap-1">
+        <FieldLabel>Safety Notes</FieldLabel>
+        <StandardSafetyBullets />
+        <CompletionTemplateSafetyNoteField form={form} />
+      </div>
+      <div>
+        <FieldLabel hint="(optional)">Procedures</FieldLabel>
+        <CompletionTemplateProceduresEditor form={form} />
+      </div>
+    </div>
+  );
+}

src/app/(protected)/completion-docs/_components/completion-template-preview.tsx

@@ -0,0 +1,139 @@
+import { FileText } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import { Text } from "@/components/ui/text";
+import { CompDocDocumentFrame } from "@/app/(protected)/workorders/_components/comp-doc/comp-doc-document-frame";
+import { CompDocPreviewHeader } from "@/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-header";
+import { CompDocProcedureHeading } from "@/app/(protected)/workorders/_components/comp-doc/comp-doc-procedure-heading";
+import { CompDocSafetyBullets } from "@/app/(protected)/workorders/_components/comp-doc/comp-doc-safety-bullets";
+import {
+  AUTO_POPULATED_FIELDS,
+  COMPLETION_TEMPLATE_COPY,
+} from "@/domain/completion-templates/constants/completion-template-constants";
+import type { CompletionTemplateProcedure } from "@/domain/completion-templates/types/completion-template";
+import { descriptionLines } from "@/domain/completion-templates/utils/description-lines";
+import {
+  pageIndicatorLabel,
+  type PagePosition,
+} from "@/domain/work-orders/utils/completion-doc-pagination";
+
+export interface CompletionTemplatePreviewValues {
+  name: string;
+  extraSafetyNote: string | null;
+  procedures: CompletionTemplateProcedure[];
+}
+
+type CompletionTemplatePreviewProps = {
+  values: CompletionTemplatePreviewValues;
+  isEditing: boolean;
+};
+
+function PreviewPill({ isEditing, page }: { isEditing: boolean; page: PagePosition }) {
+  return (
+    <div className="flex shrink-0 items-center justify-center" style={{ padding: "12px 0" }}>
+      <span
+        className="inline-flex items-center gap-1.5"
+        style={{
+          height: 28,
+          padding: "0 12px",
+          borderRadius: 9999,
+          background: "var(--color-bg-surface)",
+          border: "1px solid var(--color-border)",
+          fontSize: 12,
+          fontWeight: 500,
+          color: "var(--muted-foreground)",
+        }}
+      >
+        <FileText size={13} />
+        {isEditing ? "Live preview" : "Document preview"}
+        {pageIndicatorLabel(page)}
+      </span>
+    </div>
+  );
+}
+
+function PreviewTitle({ name }: { name: string }) {
+  const title = name.trim();
+  return (
+    <>
+      <Text
+        as="h2"
+        variant="title"
+        family="body"
+        sx={{
+          fontSize: 13,
+          fontWeight: 700,
+          letterSpacing: "0.02em",
+          color: title ? "#161E38" : "#9CA3AF",
+          margin: "16px 0 4px",
+        }}
+      >
+        {title ? title.toUpperCase() : COMPLETION_TEMPLATE_COPY.untitledDocument}
+      </Text>
+      <Text variant="body" sx={{ fontSize: 12, color: "#58595B", margin: "2px 0 12px" }}>
+        {AUTO_POPULATED_FIELDS.join(" · ")} {COMPLETION_TEMPLATE_COPY.autoFilledSuffix}
+      </Text>
+    </>
+  );
+}
+
+/** One block per procedure (each kept whole on a page), or the empty-state line. */
+function previewSections(procedures: CompletionTemplateProcedure[]): ReactNode[] {
+  if (procedures.length === 0) {
+    return [
+      <Text
+        key="empty"
+        variant="body"
+        sx={{ fontSize: 12.5, color: "#9CA3AF", margin: "16px 0 0", fontStyle: "italic" }}
+      >
+        {COMPLETION_TEMPLATE_COPY.noProcedurePreview}
+      </Text>,
+    ];
+  }
+  return procedures.map((procedure, index) => (
+    <section key={index} aria-label={`Preview procedure ${index + 1}`}>
+      <CompDocProcedureHeading>
+        {procedure.name.trim() || `Procedure ${index + 1}`}
+      </CompDocProcedureHeading>
+      {descriptionLines(procedure.description).map((line, lineIndex) => (
+        <Text
+          key={lineIndex}
+          variant="body"
+          sx={{ fontSize: 13, lineHeight: 1.5, color: "#161E38", margin: "4px 0" }}
+        >
+          {line}
+        </Text>
+      ))}
+    </section>
+  ));
+}
+
+/** The template rendered on the same page, header and safety bullets as a work order's document. */
+export function CompletionTemplatePreview({ values, isEditing }: CompletionTemplatePreviewProps) {
+  const [page, setPage] = useState<PagePosition>({ current: 1, total: 1 });
+  const note = values.extraSafetyNote?.trim() ?? "";
+  return (
+    <div
+      className="flex min-h-0 flex-col"
+      style={{
+        width: "58%",
+        borderRight: "1px solid var(--color-border)",
+        background: "var(--color-bg-muted)",
+      }}
+    >
+      <PreviewPill isEditing={isEditing} page={page} />
+      <div className="flex min-h-0 flex-1 flex-col" data-testid="completion-template-preview">
+        <CompDocDocumentFrame
+          onPageChange={setPage}
+          header={
+            <>
+              <CompDocPreviewHeader />
+              <PreviewTitle name={values.name} />
+              <CompDocSafetyBullets extra={note === "" ? [] : [note]} />
+            </>
+          }
+          sections={previewSections(values.procedures)}
+        />
+      </div>
+    </div>
+  );
+}

src/app/(protected)/completion-docs/_components/completion-template-procedures-editor.tsx

@@ -0,0 +1,103 @@
+import { Controller, useFieldArray, type UseFormReturn } from "react-hook-form";
+import { Text } from "@/components/ui/text";
+import { TextField } from "@/components/ui/text-field";
+import { PROCEDURE_NAME_MAX_LENGTH } from "@/domain/completion-templates/constants/completion-template-constants";
+import type { CompletionTemplateFormValues } from "@/domain/completion-templates/schemas/completion-template-schema";
+import { CompletionTemplateAddLink } from "./completion-template-add-link";
+import { CompletionTemplateRemoveButton } from "./completion-template-remove-button";
+
+type ProceduresEditorProps = {
+  form: UseFormReturn<CompletionTemplateFormValues>;
+};
+
+const DESCRIPTION_PLACEHOLDER =
+  "Describe the procedure — steps, sub-items, whatever the source document has. One item per line works well.";
+
+function ProcedureFields({ form, index }: ProceduresEditorProps & { index: number }) {
+  return (
+    <div className="grid gap-2.5">
+      <Controller
+        control={form.control}
+        name={`procedures.${index}.name`}
+        render={({ field }) => (
+          <TextField
+            value={field.value}
+            onChange={field.onChange}
+            onBlur={field.onBlur}
+            inputRef={field.ref}
+            placeholder="Procedure name (e.g. Backflow Procedure)"
+            slotProps={{
+              htmlInput: {
+                "aria-label": `Procedure ${index + 1} name`,
+                maxLength: PROCEDURE_NAME_MAX_LENGTH,
+              },
+            }}
+          />
+        )}
+      />
+      <Controller
+        control={form.control}
+        name={`procedures.${index}.description`}
+        render={({ field }) => (
+          <TextField
+            value={field.value}
+            onChange={field.onChange}
+            onBlur={field.onBlur}
+            inputRef={field.ref}
+            multiline
+            minRows={5}
+            maxRows={8}
+            placeholder={DESCRIPTION_PLACEHOLDER}
+            slotProps={{ htmlInput: { "aria-label": `Procedure ${index + 1} description` } }}
+            sx={{ "& .MuiOutlinedInput-root": { height: "auto" } }}
+          />
+        )}
+      />
+    </div>
+  );
+}
+
+/** Procedures print in the order they are listed here. */
+export function CompletionTemplateProceduresEditor({ form }: ProceduresEditorProps) {
+  const { fields, append, remove } = useFieldArray({ control: form.control, name: "procedures" });
+
+  return (
+    <div className="grid gap-3">
+      {fields.map((field, index) => (
+        <fieldset
+          key={field.id}
+          aria-label={`Procedure ${index + 1}`}
+          className="m-0 min-w-0"
+          style={{
+            padding: 12,
+            borderRadius: "var(--radius-md)",
+            border: "1px solid var(--color-border)",
+          }}
+        >
+          <div className="flex items-center justify-between" style={{ marginBottom: 8 }}>
+            <Text
+              variant="caption"
+              tone="muted"
+              sx={{
+                fontSize: 12,
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.04em",
+              }}
+            >
+              Procedure {index + 1}
+            </Text>
+            <CompletionTemplateRemoveButton
+              label={`Remove procedure ${index + 1}`}
+              onClick={() => remove(index)}
+            />
+          </div>
+          <ProcedureFields form={form} index={index} />
+        </fieldset>
+      ))}
+      <CompletionTemplateAddLink onClick={() => append({ name: "", description: "" })}>
+        + Add procedure
+      </CompletionTemplateAddLink>
+    </div>
+  );
+}

src/app/(protected)/completion-docs/_components/completion-template-remove-button.tsx

@@ -0,0 +1,22 @@
+import { X } from "lucide-react";
+
+export function CompletionTemplateRemoveButton({
+  label,
+  onClick,
+}: {
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={label}
+      aria-label={label}
+      className="shrink-0"
+      style={{ color: "var(--color-text-muted)" }}
+    >
+      <X size={14} />
+    </button>
+  );
+}

src/app/(protected)/completion-docs/_components/completion-template-safety-note-field.tsx

@@ -0,0 +1,55 @@
+import { Controller, useWatch, type UseFormReturn } from "react-hook-form";
+import { TextField } from "@/components/ui/text-field";
+import { EXTRA_SAFETY_NOTE_MAX_LENGTH } from "@/domain/completion-templates/constants/completion-template-constants";
+import type { CompletionTemplateFormValues } from "@/domain/completion-templates/schemas/completion-template-schema";
+import { CompletionTemplateAddLink } from "./completion-template-add-link";
+import { CompletionTemplateRemoveButton } from "./completion-template-remove-button";
+
+type SafetyNoteFieldProps = {
+  form: UseFormReturn<CompletionTemplateFormValues>;
+};
+
+/** At most one template-specific note, printed after the standard bullets. */
+export function CompletionTemplateSafetyNoteField({ form }: SafetyNoteFieldProps) {
+  const note = useWatch({ control: form.control, name: "extraSafetyNote" });
+  const setNote = (value: string | null) =>
+    form.setValue("extraSafetyNote", value, { shouldDirty: true });
+
+  if (note === null) {
+    return (
+      <CompletionTemplateAddLink onClick={() => setNote("")}>
+        + Add safety note
+      </CompletionTemplateAddLink>
+    );
+  }
+  return (
+    <div className="flex items-start gap-2">
+      <Controller
+        control={form.control}
+        name="extraSafetyNote"
+        render={({ field }) => (
+          <TextField
+            multiline
+            minRows={3}
+            maxRows={8}
+            value={field.value ?? ""}
+            onChange={field.onChange}
+            onBlur={field.onBlur}
+            inputRef={field.ref}
+            placeholder="Type safety note…"
+            slotProps={{
+              htmlInput: {
+                "aria-label": "Extra safety note",
+                maxLength: EXTRA_SAFETY_NOTE_MAX_LENGTH,
+              },
+            }}
+            sx={{ "& .MuiOutlinedInput-root": { height: "auto" } }}
+          />
+        )}
+      />
+      <div style={{ marginTop: 6 }}>
+        <CompletionTemplateRemoveButton label="Remove safety note" onClick={() => setNote(null)} />
+      </div>
+    </div>
+  );
+}

src/app/(protected)/completion-docs/_components/completion-template-sections.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from "react";
+import { Text } from "@/components/ui/text";
+import { AUTO_POPULATED_FIELDS } from "@/domain/completion-templates/constants/completion-template-constants";
+import { SAFETY_BULLETS } from "@/domain/work-orders/utils/completion-doc-procedures";
+
+export function SectionTitle({ children }: { children: ReactNode }) {
+  return (
+    <Text as="div" variant="heading" family="body" sx={{ fontSize: 16, fontWeight: 600 }}>
+      {children}
+    </Text>
+  );
+}
+
+export function FieldLabel({ children, hint }: { children: ReactNode; hint?: string }) {
+  return (
+    <div className="flex items-baseline gap-1.5" style={{ marginBottom: 4 }}>
+      <Text
+        variant="caption"
+        tone="muted"
+        sx={{ fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.06em" }}
+      >
+        {children}
+      </Text>
+      {hint !== undefined && (
+        <Text variant="caption" tone="muted" sx={{ fontSize: 11 }}>
+          {hint}
+        </Text>
+      )}
+    </div>
+  );
+}
+
+export function AutoPopulatedFields() {
+  return (
+    <div>
+      <FieldLabel>Auto-populated fields</FieldLabel>
+      <ul className="m-0 flex list-none flex-wrap items-center gap-1.5 p-0">
+        {AUTO_POPULATED_FIELDS.map((field) => (
+          <li
+            key={field}
+            className="inline-flex items-center"
+            style={{
+              background: "var(--color-bg-muted)",
+              color: "var(--color-text-muted)",
+              fontSize: 12,
+              padding: "2px 8px",
+              borderRadius: 4,
+            }}
+          >
+            {field}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/** The standard bullets every generated document prints; never editable per template. */
+export function StandardSafetyBullets({ extra }: { extra?: string | null }) {
+  return (
+    <ul aria-label="Safety notes" style={{ margin: "0 0 8px", paddingLeft: 18 }}>
+      {SAFETY_BULLETS.map((bullet) => (
+        <li
+          key={bullet}
+          style={{ fontSize: 12.5, color: "var(--color-text-muted)", margin: "2px 0" }}
+        >
+          {bullet}
+        </li>
+      ))}
+      {Boolean(extra) && (
+        <li style={{ fontSize: 12.5, margin: "2px 0", whiteSpace: "pre-wrap" }}>{extra}</li>
+      )}
+    </ul>
+  );
+}

src/app/(protected)/completion-docs/_components/completion-templates-table.tsx

@@ -0,0 +1,162 @@
+import { Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
+import { Eye, FileText, Pencil, Search } from "lucide-react";
+import type { MouseEvent } from "react";
+import { TableLoadingRow } from "@/components/ui/table-state-rows";
+import { Text } from "@/components/ui/text";
+import { COMPLETION_TEMPLATE_COPY } from "@/domain/completion-templates/constants/completion-template-constants";
+import type { CompletionTemplate } from "@/domain/completion-templates/types/completion-template";
+import { formatTemplateDate } from "@/domain/completion-templates/utils/format-template-date";
+import { CompletionTemplateCreatedBy } from "./completion-template-created-by";
+
+const HEAD_CELL_SX = {
+  fontSize: 10.5,
+  fontWeight: 700,
+  letterSpacing: "0.06em",
+  textTransform: "uppercase",
+  background: "var(--color-bg-muted)",
+  padding: "11px 14px",
+  whiteSpace: "nowrap",
+} as const;
+
+const BODY_CELL_SX = { fontSize: 13, padding: "8px 12px" } as const;
+
+type CompletionTemplatesTableProps = {
+  templates: CompletionTemplate[];
+  isLoading: boolean;
+  /** The load failed: the page shows the error, so there is no search result to explain. */
+  hasError: boolean;
+  canEdit: boolean;
+  onView: (template: CompletionTemplate) => void;
+  onEdit: (template: CompletionTemplate) => void;
+};
+
+function RowAction({
+  label,
+  icon: Icon,
+  onClick,
+}: {
+  label: string;
+  icon: typeof Eye;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      title={label}
+      aria-label={label}
+      onClick={(event: MouseEvent) => {
+        event.stopPropagation();
+        onClick();
+      }}
+      className="flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-primary"
+    >
+      <Icon size={15} />
+    </button>
+  );
+}
+
+function EmptyRow() {
+  return (
+    <TableRow>
+      <TableCell colSpan={4} sx={{ padding: 0, borderBottom: 0 }}>
+        <div
+          className="flex flex-col items-center justify-center gap-2 text-center"
+          style={{ padding: "64px 16px" }}
+        >
+          <Search size={22} aria-hidden style={{ color: "var(--color-text-muted)" }} />
+          <Text variant="body" sx={{ fontSize: 14, fontWeight: 600 }}>
+            {COMPLETION_TEMPLATE_COPY.emptySearchTitle}
+          </Text>
+          <Text variant="description" tone="muted" sx={{ fontSize: 12.5 }}>
+            {COMPLETION_TEMPLATE_COPY.emptySearchHint}
+          </Text>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function TemplateRow({
+  template,
+  canEdit,
+  onView,
+  onEdit,
+}: Omit<CompletionTemplatesTableProps, "templates" | "isLoading" | "hasError"> & {
+  template: CompletionTemplate;
+}) {
+  return (
+    <TableRow hover onClick={() => onView(template)} sx={{ cursor: "pointer", height: 52 }}>
+      <TableCell sx={BODY_CELL_SX}>
+        <span className="inline-flex items-center gap-2.5">
+          <span
+            aria-hidden
+            className="inline-flex shrink-0 items-center justify-center rounded-full"
+            style={{
+              width: 28,
+              height: 28,
+              background: "var(--color-bg-muted)",
+              color: "var(--color-primary)",
+            }}
+          >
+            <FileText size={14} />
+          </span>
+          {template.name}
+        </span>
+      </TableCell>
+      <TableCell sx={{ ...BODY_CELL_SX, color: "text.secondary" }}>
+        {formatTemplateDate(template.lastUpdatedAt)}
+      </TableCell>
+      <TableCell sx={BODY_CELL_SX}>
+        <CompletionTemplateCreatedBy name={template.createdByName} />
+      </TableCell>
+      <TableCell sx={BODY_CELL_SX}>
+        <span className="flex items-center gap-1">
+          <RowAction label="View details" icon={Eye} onClick={() => onView(template)} />
+          {canEdit && <RowAction label="Edit" icon={Pencil} onClick={() => onEdit(template)} />}
+        </span>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export function CompletionTemplatesTable({
+  templates,
+  isLoading,
+  hasError,
+  canEdit,
+  onView,
+  onEdit,
+}: CompletionTemplatesTableProps) {
+  return (
+    <Table
+      stickyHeader
+      size="small"
+      aria-label="Completion document templates"
+      sx={{ minWidth: 700 }}
+    >
+      <TableHead>
+        <TableRow>
+          <TableCell sx={{ ...HEAD_CELL_SX, width: 360 }}>Document Title</TableCell>
+          <TableCell sx={{ ...HEAD_CELL_SX, width: 140 }}>Last Updated</TableCell>
+          <TableCell sx={{ ...HEAD_CELL_SX, width: 180 }}>Created By</TableCell>
+          <TableCell sx={{ ...HEAD_CELL_SX, width: 90 }}>
+            <span className="sr-only">Actions</span>
+          </TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {isLoading && <TableLoadingRow colSpan={4} />}
+        {!isLoading && !hasError && templates.length === 0 && <EmptyRow />}
+        {templates.map((template) => (
+          <TemplateRow
+            key={template.id}
+            template={template}
+            canEdit={canEdit}
+            onView={onView}
+            onEdit={onEdit}
+          />
+        ))}
+      </TableBody>
+    </Table>
+  );
+}

src/app/(protected)/completion-docs/_components/delete-completion-template-dialog.tsx

@@ -0,0 +1,98 @@
+import { CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import { useNavigate } from "react-router";
+import { Button } from "@/components/ui/button";
+import { DialogCancelButton } from "@/components/ui/dialog-cancel-button";
+import { Text } from "@/components/ui/text";
+import type {
+  CompletionTemplate,
+  LinkedWorkOrders,
+} from "@/domain/completion-templates/types/completion-template";
+import { useDeleteCompletionTemplate } from "@/domain/completion-templates/use-cases/use-completion-template-mutations";
+import { useLinkedWorkOrders } from "@/domain/completion-templates/use-cases/use-completion-templates";
+import { buildWorkOrderIdsHref } from "@/domain/work-orders/utils/work-order-ids-filter";
+
+type DeleteCompletionTemplateDialogProps = {
+  template: CompletionTemplate;
+  open: boolean;
+  onClose: () => void;
+  onDeleted: () => void;
+};
+
+function deleteMessage(name: string, linked: LinkedWorkOrders): string {
+  if (linked.count === 0) return `This will permanently remove "${name}". This cannot be undone.`;
+  const plural = linked.count === 1 ? "" : "s";
+  return (
+    `This will permanently remove "${name}". It's still linked to ${linked.count} open work ` +
+    `order${plural} through its Service — deleting it won't change that Service, but new ` +
+    "documents generated for those work orders will fall back to a generic procedure until " +
+    "reassigned. This cannot be undone."
+  );
+}
+
+function LinkedWorkOrdersMessage({
+  name,
+  linked,
+}: {
+  name: string;
+  linked: ReturnType<typeof useLinkedWorkOrders>;
+}) {
+  if (linked.isPending) {
+    return (
+      <div className="flex items-center gap-2" role="status">
+        <CircularProgress size={16} />
+        <Text variant="description" tone="muted">
+          Checking linked work orders…
+        </Text>
+      </div>
+    );
+  }
+  if (linked.isError) {
+    return (
+      <Text variant="error">
+        Couldn't check which work orders use this template. Close this and try again.
+      </Text>
+    );
+  }
+  return <Text variant="description">{deleteMessage(name, linked.data)}</Text>;
+}
+
+/** Deleting always asks first, and names the open work orders that still depend on the template. */
+export function DeleteCompletionTemplateDialog({
+  template,
+  open,
+  onClose,
+  onDeleted,
+}: DeleteCompletionTemplateDialogProps) {
+  const navigate = useNavigate();
+  const linked = useLinkedWorkOrders(open ? template.id : null);
+  const remove = useDeleteCompletionTemplate();
+  const linkedIds = linked.data?.workOrderIds ?? [];
+
+  function confirmDelete() {
+    remove.mutate(template.id, { onSuccess: onDeleted });
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
+      <DialogTitle>Delete this template?</DialogTitle>
+      <DialogContent>
+        <LinkedWorkOrdersMessage name={template.name} linked={linked} />
+      </DialogContent>
+      <DialogActions>
+        <DialogCancelButton onClick={onClose} />
+        {linkedIds.length > 0 && (
+          <Button variant="outline" onClick={() => void navigate(buildWorkOrderIdsHref(linkedIds))}>
+            View linked work orders
+          </Button>
+        )}
+        <Button
+          variant="destructive"
+          onClick={confirmDelete}
+          disabled={!linked.isSuccess || remove.isPending}
+        >
+          Delete
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/app/(protected)/completion-docs/_components/use-completion-template-dialog.ts

@@ -0,0 +1,109 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import { COMPLETION_TEMPLATE_COPY } from "@/domain/completion-templates/constants/completion-template-constants";
+import {
+  toCompletionTemplateFormValues,
+  toCompletionTemplateInput,
+} from "@/domain/completion-templates/mappers/completion-template-mapper";
+import {
+  completionTemplateFormSchema,
+  type CompletionTemplateFormValues,
+} from "@/domain/completion-templates/schemas/completion-template-schema";
+import type { CompletionTemplate } from "@/domain/completion-templates/types/completion-template";
+import {
+  isTitleRequiredError,
+  useCreateCompletionTemplate,
+  useUpdateCompletionTemplate,
+} from "@/domain/completion-templates/use-cases/use-completion-template-mutations";
+import type { CompletionTemplatePreviewValues } from "./completion-template-preview";
+
+export type CompletionTemplateDialogMode = "create" | "view" | "edit";
+
+type UseCompletionTemplateDialogOptions = {
+  template: CompletionTemplate | null;
+  initialMode: CompletionTemplateDialogMode;
+  onClose: () => void;
+  onSaved: (template: CompletionTemplate) => void;
+};
+
+function usePreviewValues(
+  control: ReturnType<typeof useForm<CompletionTemplateFormValues>>["control"],
+): CompletionTemplatePreviewValues {
+  const watched = useWatch({ control });
+  return {
+    name: watched.name ?? "",
+    extraSafetyNote: watched.extraSafetyNote ?? null,
+    procedures: (watched.procedures ?? []).map((procedure) => ({
+      name: procedure?.name ?? "",
+      description: procedure?.description ?? "",
+    })),
+  };
+}
+
+export function useCompletionTemplateDialog({
+  template,
+  initialMode,
+  onClose,
+  onSaved,
+}: UseCompletionTemplateDialogOptions) {
+  const [mode, setMode] = useState<CompletionTemplateDialogMode>(
+    template === null ? "create" : initialMode,
+  );
+  const form = useForm<CompletionTemplateFormValues>({
+    resolver: zodResolver(completionTemplateFormSchema),
+    defaultValues: toCompletionTemplateFormValues(template),
+  });
+  const previewValues = usePreviewValues(form.control);
+  const create = useCreateCompletionTemplate();
+  const update = useUpdateCompletionTemplate();
+
+  function showServerTitleError(error: Error) {
+    if (!isTitleRequiredError(error)) return;
+    form.setError(
+      "name",
+      { message: COMPLETION_TEMPLATE_COPY.titleRequired },
+      { shouldFocus: true },
+    );
+  }
+
+  const submit = form.handleSubmit((values) => {
+    const input = toCompletionTemplateInput(values);
+    if (template === null) {
+      create.mutate(input, { onSuccess: onClose, onError: showServerTitleError });
+      return;
+    }
+    update.mutate(
+      { template, input },
+      {
+        onSuccess: (saved) => {
+          form.reset(toCompletionTemplateFormValues(saved));
+          setMode("view");
+          onSaved(saved);
+        },
+        onError: showServerTitleError,
+      },
+    );
+  });
+
+  /** Discards unsaved edits: back to the template as it was, or closed when creating. */
+  function cancel() {
+    if (template === null) {
+      onClose();
+      return;
+    }
+    form.reset(toCompletionTemplateFormValues(template));
+    setMode("view");
+  }
+
+  return {
+    mode,
+    isEditing: mode !== "view",
+    form,
+    previewValues,
+    submit,
+    cancel,
+    startEditing: () => setMode("edit"),
+    isSaving: create.isPending || update.isPending,
+  };
+}

src/app/(protected)/completion-docs/_components/use-completion-template-permissions.ts

@@ -0,0 +1,17 @@
+import { hasPermission, usePermissions } from "@/domain/auth/use-cases/use-permissions";
+
+export interface CompletionTemplatePermissions {
+  canCreate: boolean;
+  canEdit: boolean;
+  canDelete: boolean;
+}
+
+/** Template actions follow the signed-in user's effective permissions, never their role alone. */
+export function useCompletionTemplatePermissions(): CompletionTemplatePermissions {
+  const permissions = usePermissions();
+  return {
+    canCreate: hasPermission(permissions, "createCompletionDocTemplates"),
+    canEdit: hasPermission(permissions, "editCompletionDocTemplates"),
+    canDelete: hasPermission(permissions, "deleteCompletionDocTemplates"),
+  };
+}

src/app/(protected)/completion-docs/index.tsx

@@ -0,0 +1,99 @@
+import { Box } from "@mui/material";
+import { Plus } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { PageHeader } from "@/components/ui/page-header";
+import { QueryErrorPanel } from "@/components/ui/query-error-panel";
+import { SearchInput } from "@/components/ui/search-input";
+import { Text } from "@/components/ui/text";
+import {
+  COMPLETION_TEMPLATE_COPY,
+  templateCountLabel,
+} from "@/domain/completion-templates/constants/completion-template-constants";
+import type { CompletionTemplate } from "@/domain/completion-templates/types/completion-template";
+import { useCompletionTemplates } from "@/domain/completion-templates/use-cases/use-completion-templates";
+import { useDebounce } from "@/hooks/use-debounce";
+import { CompletionTemplateDialog } from "./_components/completion-template-dialog";
+import { CompletionTemplatesTable } from "./_components/completion-templates-table";
+import type { CompletionTemplateDialogMode } from "./_components/use-completion-template-dialog";
+import { useCompletionTemplatePermissions } from "./_components/use-completion-template-permissions";
+
+type OpenDialog = { template: CompletionTemplate | null; mode: CompletionTemplateDialogMode };
+
+export default function CompletionDocsPage() {
+  const permissions = useCompletionTemplatePermissions();
+  const [search, setSearch] = useState("");
+  const debouncedSearch = useDebounce(search, 250);
+  const all = useCompletionTemplates();
+  const filtered = useCompletionTemplates(debouncedSearch);
+  const [dialog, setDialog] = useState<OpenDialog | null>(null);
+  const templates = filtered.data ?? [];
+
+  return (
+    <Box className="flex h-full flex-col overflow-hidden p-2.5">
+      <PageHeader
+        surface
+        title={COMPLETION_TEMPLATE_COPY.pageTitle}
+        subtitle={templateCountLabel(all.data?.length ?? 0)}
+        actions={
+          <div className="flex items-center gap-2">
+            <SearchInput
+              value={search}
+              onChange={setSearch}
+              placeholder={COMPLETION_TEMPLATE_COPY.searchPlaceholder}
+              aria-label="Search document title"
+              className="w-56"
+            />
+            {permissions.canCreate && (
+              <Button
+                onClick={() => setDialog({ template: null, mode: "create" })}
+                className="gap-1.5"
+              >
+                <Plus size={13} /> {COMPLETION_TEMPLATE_COPY.addTemplate}
+              </Button>
+            )}
+          </div>
+        }
+      />
+
+      {filtered.error !== null && (
+        <QueryErrorPanel
+          className="mt-3 shrink-0"
+          compact
+          message={filtered.error.message || "Failed to load templates."}
+          onRetry={() => void filtered.refetch()}
+        />
+      )}
+
+      <div
+        className="mt-4 min-h-0 flex-1 overflow-auto rounded-lg border border-border"
+        style={{ background: "var(--card)" }}
+      >
+        <CompletionTemplatesTable
+          templates={templates}
+          isLoading={filtered.isPending}
+          hasError={filtered.error !== null}
+          canEdit={permissions.canEdit}
+          onView={(template) => setDialog({ template, mode: "view" })}
+          onEdit={(template) => setDialog({ template, mode: "edit" })}
+        />
+      </div>
+      <div className="shrink-0 px-4 py-2">
+        <Text variant="caption" tone="muted" sx={{ fontSize: 11 }}>
+          {templateCountLabel(templates.length)}
+        </Text>
+      </div>
+
+      {dialog !== null && (
+        <CompletionTemplateDialog
+          key={dialog.template?.id ?? "new"}
+          template={dialog.template}
+          initialMode={dialog.mode}
+          permissions={permissions}
+          onClose={() => setDialog(null)}
+          onSaved={(template) => setDialog({ template, mode: "view" })}
+        />
+      )}
+    </Box>
+  );
+}

src/app/(protected)/dashboard/_components/dashboard-kpi-cards.tsx

@@ -0,0 +1,71 @@
+import { useNavigate } from "react-router";
+import AssignmentLateOutlinedIcon from "@mui/icons-material/AssignmentLateOutlined";
+import EventOutlinedIcon from "@mui/icons-material/EventOutlined";
+import PendingActionsIcon from "@mui/icons-material/PendingActions";
+import ShieldOutlinedIcon from "@mui/icons-material/ShieldOutlined";
+import { Box } from "@mui/material";
+import { DashboardKpiCard } from "@/app/(protected)/dashboard/_components/dashboard-kpi-card";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import type { DashboardStats } from "@/domain/dashboard/types/dashboard-stats";
+import {
+  avetaPendingDrilldownSearch,
+  scheduledTomorrowDrilldownSearch,
+  unassignedDrilldownSearch,
+  UPLIFTS_ROUTE,
+  workOrderDrilldownUrl,
+} from "@/domain/dashboard/utils/work-order-drilldown-links";
+
+interface DashboardKpiCardsProps {
+  stats?: DashboardStats;
+  loading: boolean;
+  range: DashboardRangeKey;
+}
+
+export function DashboardKpiCards({ stats, loading, range }: DashboardKpiCardsProps) {
+  const navigate = useNavigate();
+  const scheduledTomorrow = stats?.scheduledTomorrow ?? 0;
+  const pendingUplifts = stats?.pendingUplifts ?? 0;
+  const avetaPending = stats?.avetaPending ?? 0;
+  const unassigned = stats?.unassigned ?? 0;
+
+  return (
+    <Box className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+      <DashboardKpiCard
+        title="Scheduled Tomorrow"
+        icon={<EventOutlinedIcon />}
+        tone="primary"
+        value={stats?.scheduledTomorrow}
+        loading={loading}
+        active={scheduledTomorrow > 0}
+        onSelect={() => navigate(workOrderDrilldownUrl(scheduledTomorrowDrilldownSearch()))}
+      />
+      <DashboardKpiCard
+        title="Pending Uplifts"
+        icon={<PendingActionsIcon />}
+        tone="info"
+        value={stats?.pendingUplifts}
+        loading={loading}
+        active={pendingUplifts > 0}
+        onSelect={() => navigate(UPLIFTS_ROUTE)}
+      />
+      <DashboardKpiCard
+        title="Aveta Pending"
+        icon={<ShieldOutlinedIcon />}
+        tone="warning"
+        value={stats?.avetaPending}
+        loading={loading}
+        active={avetaPending > 0}
+        onSelect={() => navigate(workOrderDrilldownUrl(avetaPendingDrilldownSearch()))}
+      />
+      <DashboardKpiCard
+        title="Unassigned"
+        icon={<AssignmentLateOutlinedIcon />}
+        tone="warning"
+        value={stats?.unassigned}
+        loading={loading}
+        active={unassigned > 0}
+        onSelect={() => navigate(workOrderDrilldownUrl(unassignedDrilldownSearch(range)))}
+      />
+    </Box>
+  );
+}

src/app/(protected)/dashboard/index.tsx

@@ -1,11 +1,7 @@
-import { useNavigate } from "react-router";
-import EventOutlinedIcon from "@mui/icons-material/EventOutlined";
-import PendingActionsIcon from "@mui/icons-material/PendingActions";
-import ShieldOutlinedIcon from "@mui/icons-material/ShieldOutlined";
 import { Box } from "@mui/material";
 import { PageHeader } from "@/components/ui/page-header";
 import { DashboardHeaderActions } from "@/app/(protected)/dashboard/_components/dashboard-header-actions";
-import { DashboardKpiCard } from "@/app/(protected)/dashboard/_components/dashboard-kpi-card";
+import { DashboardKpiCards } from "@/app/(protected)/dashboard/_components/dashboard-kpi-cards";
 import { DashboardTrendCard } from "@/app/(protected)/dashboard/_components/dashboard-trend-card";
 import { DispatcherTablesSection } from "@/app/(protected)/dashboard/_components/dispatcher-tables-section";
 import { StatusDistributionCard } from "@/app/(protected)/dashboard/_components/status-distribution-card";
@@ -19,15 +15,8 @@ import { useDashboardStats } from "@/domain/dashboard/use-cases/use-dashboard-st
 import { useDashboardVendorInsights } from "@/domain/dashboard/use-cases/use-dashboard-vendor-insights";
 import { useDashboardWorkload } from "@/domain/dashboard/use-cases/use-dashboard-workload";
 import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
-import {
-  avetaPendingDrilldownSearch,
-  scheduledTomorrowDrilldownSearch,
-  UPLIFTS_ROUTE,
-  workOrderDrilldownUrl,
-} from "@/domain/dashboard/utils/work-order-drilldown-links";
 
 export default function DashboardPage() {
-  const navigate = useNavigate();
   const scope = useDashboardScope();
   const { canViewAll, range, dispatcherId, workloadPage, performancePage } = scope;
 
@@ -62,35 +51,7 @@ export default function DashboardPage() {
           />
         }
       />
-      <Box className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-        <DashboardKpiCard
-          title="Scheduled Tomorrow"
-          icon={<EventOutlinedIcon />}
-          tone="primary"
-          value={stats.data?.scheduledTomorrow}
-          loading={stats.isLoading}
-          active={(stats.data?.scheduledTomorrow ?? 0) > 0}
-          onSelect={() => navigate(workOrderDrilldownUrl(scheduledTomorrowDrilldownSearch()))}
-        />
-        <DashboardKpiCard
-          title="Pending Uplifts"
-          icon={<PendingActionsIcon />}
-          tone="info"
-          value={stats.data?.pendingUplifts}
-          loading={stats.isLoading}
-          active={(stats.data?.pendingUplifts ?? 0) > 0}
-          onSelect={() => navigate(UPLIFTS_ROUTE)}
-        />
-        <DashboardKpiCard
-          title="Aveta Pending"
-          icon={<ShieldOutlinedIcon />}
-          tone="warning"
-          value={stats.data?.avetaPending}
-          loading={stats.isLoading}
-          active={(stats.data?.avetaPending ?? 0) > 0}
-          onSelect={() => navigate(workOrderDrilldownUrl(avetaPendingDrilldownSearch()))}
-        />
-      </Box>
+      <DashboardKpiCards stats={stats.data} loading={stats.isLoading} range={range} />
       <Box className="grid grid-cols-1 gap-4 lg:grid-cols-2">
         <WorkOrderBreakdownCard
           breakdown={stats.data?.breakdown ?? []}

src/app/(protected)/locations/_components/add-site-dialog.tsx

@@ -0,0 +1,94 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography,
+} from "@mui/material";
+import { DIALOG_BLUR_BACKDROP_SX } from "@/components/ui/dialog-blur-backdrop";
+import {
+  locationDefaultValues,
+  locationSchema,
+  type LocationFormValues,
+} from "@/domain/locations/schemas/location-schema";
+import { useCreateLocation } from "@/domain/locations/use-cases/use-create-location";
+import {
+  DUPLICATE_SITE_CODE_MESSAGE,
+  isDuplicateSiteCodeError,
+} from "@/domain/locations/utils/site-code-conflict";
+import { SiteFormFields } from "./site-form-fields";
+
+interface AddSiteDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+/** Add Site modal: closes on success; a duplicate Site Code stays open with an inline error. */
+export function AddSiteDialog({ open, onClose }: AddSiteDialogProps) {
+  const createLocation = useCreateLocation();
+  const form = useForm<LocationFormValues>({
+    resolver: zodResolver(locationSchema),
+    defaultValues: locationDefaultValues,
+  });
+
+  const close = () => {
+    form.reset(locationDefaultValues);
+    createLocation.reset();
+    onClose();
+  };
+
+  const onSubmit = (values: LocationFormValues) => {
+    createLocation.mutate(values, {
+      onSuccess: close,
+      onError: (error) => {
+        if (isDuplicateSiteCodeError(error)) {
+          form.setError("name", { type: "server", message: DUPLICATE_SITE_CODE_MESSAGE });
+        }
+      },
+    });
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={() => {
+        if (!createLocation.isPending) {
+          close();
+        }
+      }}
+      fullWidth
+      maxWidth="sm"
+      aria-labelledby="add-site-title"
+      slotProps={{ backdrop: { sx: DIALOG_BLUR_BACKDROP_SX } }}
+    >
+      <Box component="form" noValidate onSubmit={form.handleSubmit(onSubmit)}>
+        <DialogTitle id="add-site-title">
+          Add Site
+          <Typography
+            variant="body2"
+            component="span"
+            className="block"
+            sx={{ color: "text.secondary" }}
+          >
+            Create a new client site record.
+          </Typography>
+        </DialogTitle>
+        <DialogContent dividers>
+          <SiteFormFields form={form} />
+        </DialogContent>
+        <DialogActions>
+          <Button variant="text" onClick={close} disabled={createLocation.isPending}>
+            Cancel
+          </Button>
+          <Button type="submit" variant="contained" disabled={createLocation.isPending}>
+            {createLocation.isPending ? "Adding..." : "Add Site"}
+          </Button>
+        </DialogActions>
+      </Box>
+    </Dialog>
+  );
+}

src/app/(protected)/locations/_components/client-select.tsx

@@ -0,0 +1,64 @@
+import { useMemo, useState } from "react";
+import { Controller, type Control, type FieldError } from "react-hook-form";
+import { Autocomplete, TextField } from "@mui/material";
+import type { AccountListItem } from "@/domain/accounts/types/account";
+import { useAccountsList } from "@/domain/accounts/use-cases/use-accounts-list";
+import type { LocationFormValues } from "@/domain/locations/schemas/location-schema";
+import { useDebounce } from "@/hooks/use-debounce";
+
+type ClientOption = Pick<AccountListItem, "id" | "name">;
+
+interface ClientSelectProps {
+  control: Control<LocationFormValues>;
+  error?: FieldError;
+  /** Stored client, shown even when it is not in the first page of search results. */
+  initialClient?: ClientOption;
+}
+
+/** Searchable client (account) picker bound to `accountId`. */
+export function ClientSelect({ control, error, initialClient }: ClientSelectProps) {
+  const [search, setSearch] = useState("");
+  const debouncedSearch = useDebounce(search, 300);
+  const { data, isLoading } = useAccountsList({ search: debouncedSearch, page: 1, pageSize: 50 });
+
+  const options = useMemo<ClientOption[]>(() => {
+    const items: ClientOption[] = data?.items ?? [];
+    const hasInitial =
+      initialClient !== undefined &&
+      items.some((item) => String(item.id) === String(initialClient.id));
+    return initialClient === undefined || hasInitial ? items : [initialClient, ...items];
+  }, [data?.items, initialClient]);
+
+  return (
+    <Controller
+      name="accountId"
+      control={control}
+      render={({ field }) => (
+        <Autocomplete<ClientOption>
+          options={options}
+          loading={isLoading}
+          getOptionLabel={(option) => option.name || String(option.id)}
+          isOptionEqualToValue={(option, value) => String(option.id) === String(value.id)}
+          value={options.find((option) => String(option.id) === field.value) ?? null}
+          onChange={(_event, option) => field.onChange(option ? String(option.id) : "")}
+          onBlur={field.onBlur}
+          onInputChange={(_event, value, reason) => {
+            if (reason === "input") {
+              setSearch(value);
+            }
+          }}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label="Client"
+              required
+              placeholder="Search clients..."
+              error={Boolean(error)}
+              helperText={error?.message}
+            />
+          )}
+        />
+      )}
+    />
+  );
+}

src/app/(protected)/locations/_components/location-contacts-field-array.tsx

@@ -202,7 +202,7 @@ export function LocationContactsFieldArray({
     <Box ref={rootRef}>
       <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
         <Typography variant="subtitle2" className="font-semibold uppercase">
-          Contacts
+          Points of contact
         </Typography>
         <Button
           size="small"
@@ -210,7 +210,7 @@ export function LocationContactsFieldArray({
           startIcon={<AddIcon fontSize="small" />}
           onClick={() => append({ name: "", phone: "" })}
         >
-          Add Contact
+          Add point of contact
         </Button>
       </Stack>
       <Stack spacing={1.5} className="mt-2">

src/app/(protected)/locations/_components/location-delete-dialog.tsx

@@ -1,42 +0,0 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from "@mui/material";
-import type { LocationListItem } from "@/domain/locations/types/location";
-
-interface LocationDeleteDialogProps {
-  isPending: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-  target: LocationListItem | null;
-}
-
-export function LocationDeleteDialog({
-  isPending,
-  onClose,
-  onConfirm,
-  target,
-}: LocationDeleteDialogProps) {
-  return (
-    <Dialog open={Boolean(target)} onClose={onClose}>
-      <DialogTitle>Delete Location</DialogTitle>
-      <DialogContent>
-        <DialogContentText>
-          Are you sure you want to delete &quot;{target?.name}&quot;? This action cannot be undone.
-        </DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose} disabled={isPending}>
-          Cancel
-        </Button>
-        <Button color="error" variant="contained" onClick={onConfirm} disabled={isPending}>
-          {isPending ? "Deleting..." : "Delete"}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-}

src/app/(protected)/locations/_components/location-form-fields.tsx

@@ -1,143 +0,0 @@
-import { Controller, type Control, type FieldErrors, type UseFormRegister } from "react-hook-form";
-import {
-  Autocomplete,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
-import type { AccountListItem } from "@/domain/accounts/types/account";
-import type { LocationFormValues } from "@/domain/locations/schemas/location-schema";
-import { LOCATION_STATUS_OPTIONS } from "@/domain/locations/types/location";
-import { LocationContactsFieldArray } from "./location-contacts-field-array";
-import { StateSelect } from "./state-select";
-
-interface SharedFieldsProps {
-  control: Control<LocationFormValues>;
-  errors: FieldErrors<LocationFormValues>;
-  register: UseFormRegister<LocationFormValues>;
-}
-
-interface LocationDetailsFieldsProps extends SharedFieldsProps {
-  accountOptions: AccountListItem[];
-  isLoadingAccounts: boolean;
-  onAccountSearchChange: (value: string) => void;
-}
-
-export function LocationDetailsFields({
-  accountOptions,
-  control,
-  errors,
-  isLoadingAccounts,
-  onAccountSearchChange,
-  register,
-}: LocationDetailsFieldsProps) {
-  return (
-    <Stack spacing={2}>
-      <Typography variant="subtitle1" className="font-semibold">
-        Location Information
-      </Typography>
-      <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
-        <TextField
-          {...register("name")}
-          label="Name"
-          required
-          error={Boolean(errors.name)}
-          helperText={errors.name?.message}
-          fullWidth
-        />
-        <Controller
-          name="accountId"
-          control={control}
-          render={({ field }) => (
-            <Autocomplete
-              options={accountOptions}
-              loading={isLoadingAccounts}
-              getOptionLabel={(option: AccountListItem) => option.name || String(option.id)}
-              isOptionEqualToValue={(option, value) => String(option.id) === String(value.id)}
-              value={accountOptions.find((account) => String(account.id) === field.value) ?? null}
-              onChange={(_event, option) => field.onChange(option ? String(option.id) : "")}
-              onInputChange={(_event, value, reason) => {
-                if (reason === "input") {
-                  onAccountSearchChange(value);
-                }
-              }}
-              renderInput={(params) => (
-                <TextField {...params} label="Account" placeholder="Search accounts..." />
-              )}
-              className="flex-1"
-            />
-          )}
-        />
-      </Stack>
-      <TextField
-        {...register("address")}
-        label="Address"
-        required
-        error={Boolean(errors.address)}
-        helperText={errors.address?.message}
-        fullWidth
-      />
-      <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
-        <TextField
-          {...register("city")}
-          label="City"
-          required
-          error={Boolean(errors.city)}
-          helperText={errors.city?.message}
-          fullWidth
-        />
-        <StateSelect control={control} error={errors.state} />
-        <TextField
-          {...register("zipCode")}
-          label="Zip Code"
-          required
-          error={Boolean(errors.zipCode)}
-          helperText={errors.zipCode?.message}
-          fullWidth
-        />
-      </Stack>
-    </Stack>
-  );
-}
-
-export function LocationContactFields({ control, errors, register }: SharedFieldsProps) {
-  return (
-    <Stack spacing={2}>
-      <Typography variant="subtitle1" className="font-semibold">
-        Contact Information
-      </Typography>
-      <LocationContactsFieldArray control={control} errors={errors} register={register} />
-      <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
-        <TextField
-          {...register("contactEmail")}
-          label="Contact Email"
-          type="email"
-          required
-          error={Boolean(errors.contactEmail)}
-          helperText={errors.contactEmail?.message}
-          fullWidth
-        />
-        <Controller
-          name="status"
-          control={control}
-          render={({ field }) => (
-            <FormControl fullWidth required error={Boolean(errors.status)}>
-              <InputLabel id="status-label">Status</InputLabel>
-              <Select {...field} labelId="status-label" label="Status" value={field.value}>
-                {LOCATION_STATUS_OPTIONS.map((status) => (
-                  <MenuItem key={status} value={status}>
-                    {status}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          )}
-        />
-      </Stack>
-    </Stack>
-  );
-}

src/app/(protected)/locations/_components/location-form.tsx

@@ -1,141 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useNavigate, useParams } from "react-router";
-import { Alert, Box, Button, CircularProgress, Paper, Stack, Typography } from "@mui/material";
-import { useAccountsList } from "@/domain/accounts/use-cases/use-accounts-list";
-import { normalizeStateCode } from "@/data/areas";
-import {
-  locationDefaultValues,
-  locationSchema,
-  type LocationFormValues,
-} from "@/domain/locations/schemas/location-schema";
-import { useCreateLocation } from "@/domain/locations/use-cases/use-create-location";
-import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
-import { useUpdateLocation } from "@/domain/locations/use-cases/use-update-location";
-import { useDebounce } from "@/hooks/use-debounce";
-import { LocationContactFields, LocationDetailsFields } from "./location-form-fields";
-
-export default function LocationFormPage() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const isEdit = Boolean(id);
-
-  const [accountSearch, setAccountSearch] = useState("");
-  const debouncedAccountSearch = useDebounce(accountSearch, 300);
-
-  const { data: location, isLoading, error } = useLocationDetail(id);
-  const { data: accountsData, isLoading: isLoadingAccounts } = useAccountsList({
-    search: debouncedAccountSearch,
-    page: 1,
-    pageSize: 50,
-  });
-  const createLocation = useCreateLocation();
-  const updateLocation = useUpdateLocation();
-
-  const accountOptions = useMemo(() => accountsData?.items ?? [], [accountsData?.items]);
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    control,
-    formState: { errors },
-  } = useForm<LocationFormValues>({
-    resolver: zodResolver(locationSchema),
-    defaultValues: locationDefaultValues,
-  });
-
-  useEffect(() => {
-    if (location && isEdit) {
-      reset({
-        name: location.name ?? "",
-        accountId: location.accountId != null ? String(location.accountId) : "",
-        address: location.address ?? "",
-        city: location.city ?? "",
-        state: normalizeStateCode(location.state) ?? "",
-        zipCode: location.zipCode ?? "",
-        contacts:
-          location.contacts && location.contacts.length > 0
-            ? location.contacts
-            : [{ name: location.contact ?? "", phone: location.phone ?? "" }],
-        contactEmail: location.contactEmail ?? "",
-        status: (location.status as LocationFormValues["status"]) || "Active",
-      });
-    }
-  }, [location, isEdit, reset]);
-
-  const isSaving = createLocation.isPending || updateLocation.isPending;
-
-  const onSubmit = (values: LocationFormValues) => {
-    if (isEdit && id) {
-      updateLocation.mutate({ id, values });
-      return;
-    }
-    createLocation.mutate(values);
-  };
-
-  if (isEdit && isLoading) {
-    return (
-      <Box className="flex justify-center p-10">
-        <CircularProgress />
-      </Box>
-    );
-  }
-
-  return (
-    <Box className="mx-auto max-w-4xl p-4">
-      <Paper variant="outlined" className="p-6">
-        <Stack spacing={4}>
-          <Stack
-            direction="row"
-            sx={{
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
-          >
-            <Typography variant="h5" component="h1">
-              {isEdit ? "Edit Location" : "Create a Location"}
-            </Typography>
-            <Button variant="text" onClick={() => navigate("/locations")}>
-              Back to list
-            </Button>
-          </Stack>
-
-          {Boolean(error) && (
-            <Alert severity="error">
-              {error instanceof Error ? error.message : "Failed to load location"}
-            </Alert>
-          )}
-
-          <Box component="form" onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6">
-            <LocationDetailsFields
-              accountOptions={accountOptions}
-              control={control}
-              errors={errors}
-              isLoadingAccounts={isLoadingAccounts}
-              onAccountSearchChange={setAccountSearch}
-              register={register}
-            />
-            <LocationContactFields control={control} errors={errors} register={register} />
-
-            <Stack
-              direction="row"
-              spacing={2}
-              sx={{
-                justifyContent: "flex-end",
-              }}
-            >
-              <Button variant="outlined" onClick={() => navigate("/locations")} disabled={isSaving}>
-                Cancel
-              </Button>
-              <Button type="submit" variant="contained" disabled={isSaving}>
-                {isSaving ? "Saving..." : isEdit ? "Update Location" : "Create Location"}
-              </Button>
-            </Stack>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}

src/app/(protected)/locations/_components/locations-table.tsx

@@ -1,9 +1,6 @@
-import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
-import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import {
   Button,
   CircularProgress,
-  IconButton,
   Paper,
   Table,
   TableBody,
@@ -11,7 +8,6 @@ import {
   TableContainer,
   TableHead,
   TableRow,
-  Tooltip,
   Typography,
 } from "@mui/material";
 import type { LocationListItem } from "@/domain/locations/types/location";
@@ -20,84 +16,82 @@ import { StateAreaCell } from "./state-area-cell";
 
 interface LocationsTableProps {
   isLoading: boolean;
-  onDelete: (row: LocationListItem) => void;
-  onEdit: (row: LocationListItem) => void;
+  onOpen: (row: LocationListItem) => void;
   rows: LocationListItem[];
+  selectedId?: string | null;
 }
 
-export function LocationsTable({ isLoading, onDelete, onEdit, rows }: LocationsTableProps) {
+const COLUMN_COUNT = 7;
+
+export function LocationsTable({
+  isLoading,
+  onOpen,
+  rows,
+  selectedId = null,
+}: LocationsTableProps) {
   return (
     <TableContainer component={Paper} variant="outlined">
       <Table size="small">
         <TableHead>
           <TableRow>
-            <TableCell className="font-semibold">Location Name</TableCell>
-            <TableCell className="font-semibold">Address</TableCell>
+            <TableCell className="font-semibold">Site Code</TableCell>
+            <TableCell className="font-semibold">Client</TableCell>
+            <TableCell className="font-semibold">Street Address</TableCell>
             <TableCell className="font-semibold">City</TableCell>
             <TableCell className="font-semibold">State</TableCell>
-            <TableCell className="font-semibold">Phone</TableCell>
-            <TableCell className="font-semibold">Contact</TableCell>
-            <TableCell className="font-semibold">Status</TableCell>
-            <TableCell align="right" className="font-semibold">
-              Actions
-            </TableCell>
+            <TableCell className="font-semibold">POC Name</TableCell>
+            <TableCell className="font-semibold">POC Phone</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {isLoading ? (
+          {isLoading && (
             <TableRow>
-              <TableCell colSpan={8} align="center" className="py-10">
+              <TableCell colSpan={COLUMN_COUNT} align="center" className="py-10">
                 <CircularProgress size={28} />
               </TableCell>
             </TableRow>
-          ) : rows.length === 0 ? (
+          )}
+          {!isLoading && rows.length === 0 && (
             <TableRow>
-              <TableCell colSpan={8} align="center" className="py-10">
-                <Typography sx={{ color: "text.secondary" }}>No locations found</Typography>
+              <TableCell colSpan={COLUMN_COUNT} align="center" className="py-10">
+                <Typography sx={{ color: "text.secondary" }}>No sites found</Typography>
               </TableCell>
             </TableRow>
-          ) : (
+          )}
+          {!isLoading &&
             rows.map((row) => (
-              <TableRow key={String(row.id)} hover>
+              <TableRow
+                key={String(row.id)}
+                hover
+                selected={String(row.id) === selectedId}
+                onClick={() => onOpen(row)}
+                className="cursor-pointer"
+              >
                 <TableCell>
                   <Button
                     variant="text"
                     size="small"
                     className="font-semibold"
-                    onClick={() => onEdit(row)}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onOpen(row);
+                    }}
                   >
                     {row.name || "—"}
                   </Button>
                 </TableCell>
+                <TableCell>{row.clientName || "—"}</TableCell>
                 <TableCell>{row.address || "—"}</TableCell>
                 <TableCell>{row.city || "—"}</TableCell>
                 <TableCell>
                   <StateAreaCell state={row.state} />
                 </TableCell>
-                <TableCell>{row.phone || "—"}</TableCell>
                 <TableCell>
                   <LocationsContactsCell row={row} />
                 </TableCell>
-                <TableCell>{row.status || "—"}</TableCell>
-                <TableCell align="right">
-                  <Tooltip title="Edit">
-                    <IconButton size="small" aria-label="Edit location" onClick={() => onEdit(row)}>
-                      <EditOutlinedIcon fontSize="small" />
-                    </IconButton>
-                  </Tooltip>
-                  <Tooltip title="Delete">
-                    <IconButton
-                      size="small"
-                      aria-label="Delete location"
-                      onClick={() => onDelete(row)}
-                    >
-                      <DeleteOutlineIcon fontSize="small" />
-                    </IconButton>
-                  </Tooltip>
-                </TableCell>
+                <TableCell>{row.phone || "—"}</TableCell>
               </TableRow>
-            ))
-          )}
+            ))}
         </TableBody>
       </Table>
     </TableContainer>

src/app/(protected)/locations/_components/site-delete-dialog.tsx

@@ -0,0 +1,107 @@
+import { useNavigate } from "react-router";
+import {
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import { DIALOG_BLUR_BACKDROP_SX } from "@/components/ui/dialog-blur-backdrop";
+import { useDeleteLocation } from "@/domain/locations/use-cases/use-delete-location";
+import { useSiteOpenWorkOrders } from "@/domain/locations/use-cases/use-site-open-work-orders";
+import { buildSiteOpenWorkOrdersHref } from "@/domain/work-orders/utils/dashboard-drilldown-params";
+import { buildWorkOrderIdsHref } from "@/domain/work-orders/utils/work-order-ids-filter";
+
+interface SiteDeleteDialogProps {
+  open: boolean;
+  siteId: string;
+  siteCode: string;
+  onClose: () => void;
+  onDeleted: () => void;
+}
+
+const CHECK_FAILED_MESSAGE =
+  "Couldn't check this site for open work orders. Try again before deleting it.";
+
+function describeDeletion(siteCode: string, openCount: number): string {
+  if (openCount === 0) {
+    return `This will permanently remove ${siteCode} from Sites. This cannot be undone.`;
+  }
+  const noun = openCount === 1 ? "work order" : "work orders";
+  return `This will permanently remove ${siteCode} from Sites. It still has ${openCount} open ${noun} — deleting the site won't cancel them automatically. This cannot be undone.`;
+}
+
+/** Delete confirmation; warns with the open work-order count and links to those work orders. */
+export function SiteDeleteDialog({
+  open,
+  siteId,
+  siteCode,
+  onClose,
+  onDeleted,
+}: SiteDeleteDialogProps) {
+  const navigate = useNavigate();
+  const deleteLocation = useDeleteLocation();
+  const {
+    data: openWorkOrders,
+    isLoading,
+    isError,
+    isFetching,
+    refetch,
+  } = useSiteOpenWorkOrders(siteId, open);
+  const openCount = openWorkOrders?.count ?? 0;
+  const countUnknown = isLoading || isFetching || isError;
+  const openIds = openWorkOrders?.workOrderIds ?? [];
+  const openWorkOrdersHref =
+    openIds.length > 0 && openIds.length >= openCount
+      ? buildWorkOrderIdsHref(openIds)
+      : buildSiteOpenWorkOrdersHref(siteId);
+
+  return (
+    <Dialog
+      open={open}
+      onClose={() => {
+        if (!deleteLocation.isPending) {
+          onClose();
+        }
+      }}
+      aria-labelledby="site-delete-title"
+      slotProps={{ backdrop: { sx: DIALOG_BLUR_BACKDROP_SX } }}
+    >
+      <DialogTitle id="site-delete-title">Delete this site?</DialogTitle>
+      <DialogContent>
+        {isFetching && !isError && (
+          <CircularProgress size={20} aria-label="Checking open work orders" />
+        )}
+        {isError && <DialogContentText role="alert">{CHECK_FAILED_MESSAGE}</DialogContentText>}
+        {!countUnknown && (
+          <DialogContentText>{describeDeletion(siteCode, openCount)}</DialogContentText>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button variant="text" onClick={onClose} disabled={deleteLocation.isPending}>
+          Cancel
+        </Button>
+        {isError && (
+          <Button variant="outlined" disabled={isFetching} onClick={() => void refetch()}>
+            Try again
+          </Button>
+        )}
+        {!countUnknown && openCount > 0 && (
+          <Button variant="outlined" onClick={() => navigate(openWorkOrdersHref)}>
+            View open work orders
+          </Button>
+        )}
+        <Button
+          variant="contained"
+          color="error"
+          disabled={countUnknown || deleteLocation.isPending}
+          onClick={() => deleteLocation.mutate(siteId, { onSuccess: onDeleted })}
+        >
+          {deleteLocation.isPending ? "Deleting..." : "Delete"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/app/(protected)/locations/_components/site-detail-edit.tsx

@@ -0,0 +1,68 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Box, Button, Stack } from "@mui/material";
+import {
+  locationSchema,
+  type LocationFormValues,
+} from "@/domain/locations/schemas/location-schema";
+import type { Location } from "@/domain/locations/types/location";
+import { useUpdateLocation } from "@/domain/locations/use-cases/use-update-location";
+import { SiteFormFields } from "./site-form-fields";
+import { toSiteFormValues } from "./site-form-values";
+
+interface SiteDetailEditProps {
+  siteId: string;
+  location: Location;
+  /** Back to view mode: after Cancel (no API call) or after a successful save. */
+  onDone: () => void;
+}
+
+/** Edit mode of the site panel; Site Code is read-only, Save needs a valid, changed form. */
+export function SiteDetailEdit({ siteId, location, onDone }: SiteDetailEditProps) {
+  const updateLocation = useUpdateLocation();
+  const form = useForm<LocationFormValues>({
+    resolver: zodResolver(locationSchema),
+    defaultValues: toSiteFormValues(location),
+    mode: "onChange",
+  });
+  const { isDirty, isValid } = form.formState;
+  const initialClient =
+    location.accountId != null && location.clientName
+      ? { id: location.accountId, name: location.clientName }
+      : undefined;
+
+  const onSubmit = (values: LocationFormValues) => {
+    updateLocation.mutate({ id: siteId, values }, { onSuccess: onDone });
+  };
+
+  return (
+    <Box
+      component="form"
+      noValidate
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="flex min-h-0 flex-1 flex-col"
+      aria-label="Edit site"
+    >
+      <Box className="min-h-0 flex-1 overflow-y-auto px-4 py-3">
+        <SiteFormFields form={form} siteCodeReadOnly initialClient={initialClient} />
+      </Box>
+      <Stack
+        direction="row"
+        spacing={1}
+        className="border-t px-4 py-3"
+        sx={{ justifyContent: "flex-end", borderColor: "divider" }}
+      >
+        <Button variant="text" onClick={onDone} disabled={updateLocation.isPending}>
+          Cancel
+        </Button>
+        <Button
+          type="submit"
+          variant="contained"
+          disabled={!isDirty || !isValid || updateLocation.isPending}
+        >
+          {updateLocation.isPending ? "Saving..." : "Save changes"}
+        </Button>
+      </Stack>
+    </Box>
+  );
+}

src/app/(protected)/locations/_components/site-detail-panel.tsx

@@ -0,0 +1,132 @@
+import { useContext, useEffect, useState } from "react";
+import { Alert, Box, Button, CircularProgress, Drawer, Stack, Typography } from "@mui/material";
+import { IconCloseButton } from "@/components/ui/icon-close-button";
+import type { Location } from "@/domain/locations/types/location";
+import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
+import { canDeleteSites } from "@/lib/auth/user-utils";
+import { AuthContext } from "@/providers/auth-context";
+import { SiteDeleteDialog } from "./site-delete-dialog";
+import { SiteDetailEdit } from "./site-detail-edit";
+import { SiteDetailView } from "./site-detail-view";
+
+export const SITE_PANEL_WIDTH = 420;
+
+interface SiteDetailPanelProps {
+  /** Selected site id; `null` closes the panel. */
+  siteId: string | null;
+  onClose: () => void;
+}
+
+function PanelHeader({ location, onClose }: { location?: Location; onClose: () => void }) {
+  return (
+    <Stack
+      direction="row"
+      className="border-b px-4 py-3"
+      sx={{ alignItems: "flex-start", justifyContent: "space-between", borderColor: "divider" }}
+    >
+      <Box>
+        <Typography variant="h6" component="h2">
+          {location?.name || "Site"}
+        </Typography>
+        <Typography variant="body2" sx={{ color: "text.secondary" }}>
+          {location?.clientName || " "}
+        </Typography>
+      </Box>
+      <IconCloseButton label="Close site details" onClick={onClose} />
+    </Stack>
+  );
+}
+
+function PanelBody({ siteId, onClose }: { siteId: string; onClose: () => void }) {
+  const [mode, setMode] = useState<"view" | "edit">("view");
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const canDelete = canDeleteSites(useContext(AuthContext)?.user?.userRoles);
+  const { data: location, isLoading, error } = useLocationDetail(siteId);
+
+  return (
+    <>
+      <PanelHeader location={location} onClose={onClose} />
+      {isLoading && (
+        <Box className="flex justify-center p-8">
+          <CircularProgress size={28} />
+        </Box>
+      )}
+      {Boolean(error) && (
+        <Alert severity="error" className="m-4">
+          {error instanceof Error ? error.message : "Failed to load site"}
+        </Alert>
+      )}
+      {location !== undefined && mode === "edit" && (
+        <SiteDetailEdit siteId={siteId} location={location} onDone={() => setMode("view")} />
+      )}
+      {location !== undefined && mode === "view" && (
+        <>
+          <Box className="min-h-0 flex-1 overflow-y-auto px-4 py-3">
+            <SiteDetailView location={location} />
+          </Box>
+          <Stack
+            direction="row"
+            spacing={1}
+            className="border-t px-4 py-3"
+            sx={{ justifyContent: "flex-end", borderColor: "divider" }}
+          >
+            {canDelete && (
+              <Button color="error" onClick={() => setIsDeleteOpen(true)} className="mr-auto">
+                Delete
+              </Button>
+            )}
+            <Button variant="contained" onClick={() => setMode("edit")}>
+              Edit
+            </Button>
+          </Stack>
+          <SiteDeleteDialog
+            open={isDeleteOpen}
+            siteId={siteId}
+            siteCode={location.name ?? ""}
+            onClose={() => setIsDeleteOpen(false)}
+            onDeleted={onClose}
+          />
+        </>
+      )}
+    </>
+  );
+}
+
+/**
+ * Non-modal site panel: the table stays interactive, so clicking another row swaps the
+ * content in place. Escape closes it unless a popup inside already handled the key.
+ */
+export function SiteDetailPanel({ siteId, onClose }: SiteDetailPanelProps) {
+  const open = siteId !== null;
+
+  useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && !event.defaultPrevented) {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+
+  return (
+    <Drawer
+      anchor="right"
+      variant="persistent"
+      open={open}
+      slotProps={{
+        paper: {
+          role: "region",
+          "aria-label": "Site details",
+          className: "flex h-full flex-col border-l shadow-lg",
+          sx: { width: SITE_PANEL_WIDTH, maxWidth: "100vw" },
+        },
+      }}
+    >
+      {siteId !== null && <PanelBody key={siteId} siteId={siteId} onClose={onClose} />}
+    </Drawer>
+  );
+}

src/app/(protected)/locations/_components/site-detail-view.tsx

@@ -0,0 +1,76 @@
+import type { ReactNode } from "react";
+import { Link, Stack, Typography } from "@mui/material";
+import { getAreaForState } from "@/data/areas";
+import type { Location } from "@/domain/locations/types/location";
+import { buildSiteMapsUrl } from "@/domain/locations/utils/site-maps";
+import { SiteMapPreview } from "./site-map-preview";
+
+function Field({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <Stack spacing={0.25}>
+      <Typography variant="caption" sx={{ color: "text.secondary" }}>
+        {label}
+      </Typography>
+      <Typography variant="body2" component="div">
+        {children}
+      </Typography>
+    </Stack>
+  );
+}
+
+function formatState(state?: string): string {
+  const area = getAreaForState(state);
+  const code = state?.trim() ?? "";
+  if (!code) {
+    return "—";
+  }
+  return area === null ? code : `${code} · Area: ${area}`;
+}
+
+/** Read-only site details, in the prototype order. */
+export function SiteDetailView({ location }: { location: Location }) {
+  const contacts = location.contacts ?? [];
+
+  return (
+    <Stack spacing={2}>
+      <Field label="Site Code">{location.name || "—"}</Field>
+      <Field label="Client">{location.clientName || "—"}</Field>
+      <Field label="Street Address">
+        {Boolean(location.address) && (
+          <Link
+            href={buildSiteMapsUrl(location)}
+            target="_blank"
+            rel="noopener noreferrer"
+            underline="hover"
+          >
+            {location.address}
+          </Link>
+        )}
+        {!location.address && "—"}
+      </Field>
+      <Stack direction="row" spacing={2}>
+        <Field label="City">{location.city || "—"}</Field>
+        <Field label="State">{formatState(location.state)}</Field>
+      </Stack>
+      <SiteMapPreview
+        address={location.address}
+        city={location.city}
+        state={location.state}
+        zipCode={location.zipCode}
+      />
+      <Field label="Site Phone">{location.sitePhone || "—"}</Field>
+      <Field label="Site Email">{location.contactEmail || "—"}</Field>
+      <Field label="Points of contact">
+        {contacts.length === 0 && "—"}
+        <Stack component="ul" spacing={0.5} className="m-0 list-none p-0">
+          {contacts.map((contact, index) => (
+            <li key={contact.id ?? `${contact.name}-${index}`}>
+              {index === 0 ? "Main" : `Contact ${index + 1}`}: {contact.name}
+              {Boolean(contact.phone) && ` · ${contact.phone}`}
+            </li>
+          ))}
+        </Stack>
+      </Field>
+    </Stack>
+  );
+}

src/app/(protected)/locations/_components/site-form-fields.tsx

@@ -0,0 +1,109 @@
+import { Controller, useController, useWatch, type UseFormReturn } from "react-hook-form";
+import { Stack, TextField } from "@mui/material";
+import { AddressAutocompleteField } from "@/components/common/address-autocomplete-field";
+import { normalizeStateCode } from "@/data/areas";
+import type { AccountListItem } from "@/domain/accounts/types/account";
+import type { LocationFormValues } from "@/domain/locations/schemas/location-schema";
+import { ClientSelect } from "./client-select";
+import { LocationContactsFieldArray } from "./location-contacts-field-array";
+import { SiteMapPreview } from "./site-map-preview";
+import { StateSelect } from "./state-select";
+
+interface SiteFormFieldsProps {
+  form: UseFormReturn<LocationFormValues>;
+  /** Edit mode: Site Code is immutable after creation. */
+  siteCodeReadOnly?: boolean;
+  initialClient?: Pick<AccountListItem, "id" | "name">;
+}
+
+/** Shared Add Site / edit-mode fields, in the prototype order. */
+export function SiteFormFields({
+  form,
+  siteCodeReadOnly = false,
+  initialClient,
+}: SiteFormFieldsProps) {
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = form;
+  const [address, city, state] = useWatch({ control, name: ["address", "city", "state"] });
+  const { field: addressField } = useController({ control, name: "address" });
+  const { field: cityField } = useController({ control, name: "city" });
+  const { field: stateField } = useController({ control, name: "state" });
+
+  return (
+    <Stack spacing={2}>
+      <Controller
+        name="name"
+        control={control}
+        render={({ field }) => (
+          <TextField
+            {...field}
+            onChange={(event) => field.onChange(event.target.value.toUpperCase())}
+            label="Site Code"
+            placeholder="e.g. AB12"
+            required={!siteCodeReadOnly}
+            disabled={siteCodeReadOnly}
+            error={Boolean(errors.name)}
+            helperText={
+              errors.name?.message ?? (siteCodeReadOnly ? "Site Code can't be changed" : undefined)
+            }
+            slotProps={{ htmlInput: { maxLength: 50, readOnly: siteCodeReadOnly } }}
+            fullWidth
+          />
+        )}
+      />
+      <ClientSelect control={control} error={errors.accountId} initialClient={initialClient} />
+      <AddressAutocompleteField
+        value={addressField.value}
+        onInputChange={addressField.onChange}
+        onSelect={(parts) => {
+          addressField.onChange(parts.street);
+          cityField.onChange(parts.city);
+          stateField.onChange(normalizeStateCode(parts.state) ?? "");
+        }}
+        label="Street Address"
+        required
+        requiredMarker
+        error={Boolean(errors.address)}
+        helperText={
+          errors.address?.message ?? "Pick a suggestion to auto-fill City/State, or type your own."
+        }
+      />
+      <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+        <TextField
+          {...cityField}
+          label="City"
+          required
+          error={Boolean(errors.city)}
+          helperText={errors.city?.message}
+          fullWidth
+        />
+        <StateSelect control={control} error={errors.state} />
+      </Stack>
+      <SiteMapPreview address={address} city={city} state={state} />
+      <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+        <TextField
+          {...register("sitePhone")}
+          label="Site Phone (optional)"
+          placeholder="(000) 000-0000"
+          error={Boolean(errors.sitePhone)}
+          helperText={errors.sitePhone?.message}
+          fullWidth
+          slotProps={{ htmlInput: { maxLength: 20 } }}
+        />
+        <TextField
+          {...register("contactEmail")}
+          label="Site Email (optional)"
+          placeholder="site@company.com"
+          type="email"
+          error={Boolean(errors.contactEmail)}
+          helperText={errors.contactEmail?.message}
+          fullWidth
+        />
+      </Stack>
+      <LocationContactsFieldArray control={control} errors={errors} register={register} />
+    </Stack>
+  );
+}

src/app/(protected)/locations/_components/site-form-values.ts

@@ -0,0 +1,24 @@
+import { normalizeStateCode } from "@/data/areas";
+import type { LocationFormValues } from "@/domain/locations/schemas/location-schema";
+import type { Location } from "@/domain/locations/types/location";
+
+/** Edit-mode defaults from a site; zip and title are carried so a save keeps them. */
+export function toSiteFormValues(location: Location): LocationFormValues {
+  const contacts =
+    location.contacts && location.contacts.length > 0
+      ? location.contacts
+      : [{ name: location.contact ?? "", phone: location.phone ?? "" }];
+
+  return {
+    name: location.name ?? "",
+    accountId: location.accountId != null ? String(location.accountId) : "",
+    address: location.address ?? "",
+    city: location.city ?? "",
+    state: normalizeStateCode(location.state) ?? "",
+    sitePhone: location.sitePhone ?? "",
+    contactEmail: location.contactEmail ?? "",
+    contacts,
+    zipCode: location.zipCode ?? "",
+    title: location.title ?? "",
+  };
+}

src/app/(protected)/locations/_components/site-map-preview.tsx

@@ -0,0 +1,39 @@
+import { Box, Typography } from "@mui/material";
+import type { Location } from "@/domain/locations/types/location";
+import { buildSiteMapEmbedUrl, hasCompleteSiteAddress } from "@/domain/locations/utils/site-maps";
+
+type SiteMapPreviewProps = Pick<Location, "address" | "city" | "state" | "zipCode">;
+
+/** Read-only key-less Google Maps embed; a placeholder until Street, City and State are set. */
+export function SiteMapPreview(props: SiteMapPreviewProps) {
+  const complete = hasCompleteSiteAddress(props);
+
+  return (
+    <Box>
+      <Typography variant="caption" sx={{ color: "text.secondary" }}>
+        Location preview
+      </Typography>
+      {complete && (
+        <Box
+          component="iframe"
+          title="Site location map"
+          src={buildSiteMapEmbedUrl(props)}
+          loading="lazy"
+          referrerPolicy="no-referrer-when-downgrade"
+          className="mt-1 block w-full rounded border-0"
+          sx={{ height: 140 }}
+        />
+      )}
+      {!complete && (
+        <Box
+          className="mt-1 flex items-center justify-center rounded border border-dashed"
+          sx={{ height: 140, borderColor: "divider" }}
+        >
+          <Typography variant="body2" sx={{ color: "text.secondary" }}>
+            Enter an address to preview the location
+          </Typography>
+        </Box>
+      )}
+    </Box>
+  );
+}

src/app/(protected)/locations/edit/[id].tsx

@@ -1 +0,0 @@
-export { default } from "../_components/location-form";

src/app/(protected)/locations/index.tsx

@@ -1,5 +1,4 @@
-import { useMemo, useState } from "react";
-import { useNavigate } from "react-router";
+import { useCallback, useMemo, useState } from "react";
 import {
   Alert,
   Box,
@@ -10,25 +9,24 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import type { LocationListItem } from "@/domain/locations/types/location";
-import { useDeleteLocation } from "@/domain/locations/use-cases/use-delete-location";
 import { useLocationsList } from "@/domain/locations/use-cases/use-locations-list";
 import { useDebounce } from "@/hooks/use-debounce";
 import { expandAreasToStateCodes, type AreaZone } from "@/data/areas";
+import { AddSiteDialog } from "./_components/add-site-dialog";
 import { AreaFacet } from "./_components/area-facet";
-import { LocationDeleteDialog } from "./_components/location-delete-dialog";
 import { LocationsTable } from "./_components/locations-table";
+import { SITE_PANEL_WIDTH, SiteDetailPanel } from "./_components/site-detail-panel";
 
 export default function LocationsListPage() {
-  const navigate = useNavigate();
   const [search, setSearch] = useState("");
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(12);
   const [selectedAreas, setSelectedAreas] = useState<AreaZone[]>([]);
-  const [deleteTarget, setDeleteTarget] = useState<LocationListItem | null>(null);
+  const [isAddOpen, setIsAddOpen] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
 
   const debouncedSearch = useDebounce(search, 300);
-  const deleteLocation = useDeleteLocation();
+  const closePanel = useCallback(() => setSelectedId(null), []);
 
   const stateCodes = useMemo(() => expandAreasToStateCodes(selectedAreas), [selectedAreas]);
 
@@ -47,18 +45,11 @@ export default function LocationsListPage() {
   const rows = data?.items ?? [];
   const totalCount = data?.totalCount ?? 0;
 
-  const handleDeleteConfirm = () => {
-    if (!deleteTarget) {
-      return;
-    }
-
-    deleteLocation.mutate(deleteTarget.id, {
-      onSuccess: () => setDeleteTarget(null),
-    });
-  };
-
   return (
-    <Box className="flex flex-col gap-4 p-4">
+    <Box
+      className="flex flex-col gap-4 p-4"
+      sx={{ pr: { md: selectedId === null ? 2 : `${SITE_PANEL_WIDTH + 16}px` } }}
+    >
       <Stack
         direction={{ xs: "column", md: "row" }}
         spacing={2}
@@ -67,34 +58,17 @@ export default function LocationsListPage() {
           justifyContent: "space-between",
         }}
       >
-        <Stack
-          direction="row"
-          spacing={2}
-          sx={{
-            alignItems: "baseline",
-          }}
-        >
+        <Stack direction="row" spacing={2} sx={{ alignItems: "baseline" }}>
           <Typography variant="h5" component="h1">
-            Locations
+            Sites
           </Typography>
-          <Typography
-            variant="body2"
-            sx={{
-              color: "text.secondary",
-            }}
-          >
+          <Typography variant="body2" sx={{ color: "text.secondary" }}>
             {totalCount} total
           </Typography>
           {isFetching && !isLoading && <CircularProgress size={16} />}
         </Stack>
 
-        <Stack
-          direction={{ xs: "column", sm: "row" }}
-          spacing={2}
-          sx={{
-            alignItems: "center",
-          }}
-        >
+        <Stack direction={{ xs: "column", sm: "row" }} spacing={2} sx={{ alignItems: "center" }}>
           <AreaFacet
             value={selectedAreas}
             onChange={(zones) => {
@@ -109,24 +83,24 @@ export default function LocationsListPage() {
               setSearch(event.target.value);
               setPage(0);
             }}
-            placeholder="Search locations..."
+            placeholder="Search sites..."
             className="min-w-[220px]"
           />
-          <Button variant="contained" onClick={() => navigate("/locations/new")}>
-            + New Location
+          <Button variant="contained" onClick={() => setIsAddOpen(true)}>
+            Add Site
           </Button>
         </Stack>
       </Stack>
       {Boolean(error) && (
         <Alert severity="error">
-          {error instanceof Error ? error.message : "Failed to load locations"}
+          {error instanceof Error ? error.message : "Failed to load sites"}
         </Alert>
       )}
       <LocationsTable
         isLoading={isLoading}
         rows={rows}
-        onEdit={(row) => navigate(`/locations/edit/${row.id}`)}
-        onDelete={setDeleteTarget}
+        selectedId={selectedId}
+        onOpen={(row) => setSelectedId(String(row.id))}
       />
       <TablePagination
         component="div"
@@ -140,12 +114,8 @@ export default function LocationsListPage() {
         }}
         rowsPerPageOptions={[12, 24, 48]}
       />
-      <LocationDeleteDialog
-        target={deleteTarget}
-        isPending={deleteLocation.isPending}
-        onClose={() => setDeleteTarget(null)}
-        onConfirm={handleDeleteConfirm}
-      />
+      <AddSiteDialog open={isAddOpen} onClose={() => setIsAddOpen(false)} />
+      <SiteDetailPanel siteId={selectedId} onClose={closePanel} />
     </Box>
   );
 }

src/app/(protected)/locations/new.tsx

@@ -1 +0,0 @@
-export { default } from "./_components/location-form";

src/app/(protected)/team-members/_components/resend-invite-button.tsx

@@ -0,0 +1,26 @@
+import { Mail } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import type { TeamMemberDetail } from "@/domain/team-members/types/team-member";
+import { useResendTeamMemberInvite } from "@/domain/team-members/use-cases/use-resend-team-member-invite";
+
+/** Re-sends the registration invite to an active member who has not registered yet. */
+export function ResendInviteButton({ member }: { member: TeamMemberDetail }) {
+  const resendInvite = useResendTeamMemberInvite();
+
+  if (!member.pendingRegistration || member.status !== "Active") {
+    return null;
+  }
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => resendInvite.mutate({ id: member.id, email: member.email })}
+      loading={resendInvite.isPending}
+      loadingText="Sending…"
+      startIcon={<Mail size={15} aria-hidden="true" />}
+    >
+      Resend invite
+    </Button>
+  );
+}

src/app/(protected)/team-members/_components/team-member-detail-drawer.tsx

@@ -37,6 +37,7 @@ import {
 import { getFormErrors } from "./team-member-permissions";
 import { TeamMemberFormFields, type TeamMemberForm } from "./add-team-member-dialog";
 import { canonicalRole, resolveFormColor } from "./team-member-form-options";
+import { ResendInviteButton } from "./resend-invite-button";
 import {
   useTeamMemberDetail,
   useUpdateTeamMember,
@@ -206,6 +207,7 @@ function MemberEditForm({
 }
 
 function DrawerFooter({
+  member,
   editing,
   form,
   setForm,
@@ -215,6 +217,7 @@ function DrawerFooter({
   onEdit,
   onSave,
 }: {
+  member: TeamMemberDetail;
   editing: boolean;
   form: TeamMemberForm;
   setForm: Dispatch<SetStateAction<TeamMemberForm>>;
@@ -257,7 +260,8 @@ function DrawerFooter({
           </Stack>
         </Stack>
       ) : (
-        <Stack direction="row" sx={{ justifyContent: "flex-end" }}>
+        <Stack direction="row" sx={{ justifyContent: "flex-end", gap: 1.5 }}>
+          <ResendInviteButton member={member} />
           <Button variant="contained" onClick={onEdit}>
             Edit
           </Button>
@@ -475,6 +479,7 @@ export function TeamMemberDetailDrawer({
 
         {currentMember !== undefined && (
           <DrawerFooter
+            member={currentMember}
             editing={editor.editing}
             form={editor.form}
             setForm={editor.setForm}

src/app/(protected)/team-members/_components/team-member-permissions.ts

@@ -47,6 +47,7 @@ export const PERMISSION_LABELS: Record<string, string> = {
 };
 
 export const ALL_PERMISSION_KEYS = PERMISSION_GROUPS.flatMap((group) => group.keys);
+export type PermissionKey = (typeof ALL_PERMISSION_KEYS)[number];
 const DISPATCHER_DEFAULTS = new Set([
   "createVendors",
   "editVendors",

src/app/(protected)/uplifts/_components/format-uplift-money.ts

@@ -4,3 +4,7 @@ export function formatUpliftMoney(value: number): string {
     maximumFractionDigits: 2,
   })}`;
 }
+
+export function isGrantedAmount(value: number | null): value is number {
+  return value != null && value > 0;
+}

src/app/(protected)/uplifts/_components/uplift-approval-tabs.ts

@@ -0,0 +1,50 @@
+export const UPLIFT_APPROVAL_TABS = ["pending", "approved", "rejected"] as const;
+export type UpliftApprovalTab = (typeof UPLIFT_APPROVAL_TABS)[number];
+
+export function isUpliftApprovalTab(value: string): value is UpliftApprovalTab {
+  return (UPLIFT_APPROVAL_TABS as readonly string[]).includes(value);
+}
+
+const PENDING_HEADER_CELLS = [
+  "Work Order",
+  "Service / Vendor",
+  "Amount",
+  "Approved on WO",
+  "Notes",
+  "Attachments",
+  "Requested By",
+  "Waiting",
+  "Actions",
+] as const;
+
+const APPROVED_HEADER_CELLS = [
+  "Work Order",
+  "Service / Vendor",
+  "Amount",
+  "Approved on WO",
+  "Notes",
+  "Attachments",
+  "Requested By",
+  "Approved By",
+  "Approved At",
+  "Actions",
+] as const;
+
+const REJECTED_HEADER_CELLS = [
+  "Work Order",
+  "Service / Vendor",
+  "Amount",
+  "Approved on WO",
+  "Notes",
+  "Attachments",
+  "Requested By",
+  "Rejected By",
+  "Rejected At",
+  "Rejection Reason",
+] as const;
+
+export const UPLIFT_APPROVAL_HEADER_CELLS: Record<UpliftApprovalTab, readonly string[]> = {
+  pending: PENDING_HEADER_CELLS,
+  approved: APPROVED_HEADER_CELLS,
+  rejected: REJECTED_HEADER_CELLS,
+};

src/app/(protected)/uplifts/_components/uplift-approvals-table.tsx

@@ -12,14 +12,24 @@ import {
   TableRow,
   Tooltip,
 } from "@mui/material";
-import { formatUpliftMoney } from "@/app/(protected)/uplifts/_components/format-uplift-money";
+import {
+  formatUpliftMoney,
+  isGrantedAmount,
+} from "@/app/(protected)/uplifts/_components/format-uplift-money";
+import {
+  UPLIFT_APPROVAL_HEADER_CELLS,
+  type UpliftApprovalTab,
+} from "@/app/(protected)/uplifts/_components/uplift-approval-tabs";
+import {
+  RejectedEmptyState,
+  RejectedRowCells,
+} from "@/app/(protected)/uplifts/_components/uplift-rejected-cells";
 import { Text } from "@/components/ui/text";
 import { useUpliftsCanApprove } from "@/domain/uplifts/use-cases/use-uplifts-can-approve";
+import { upliftAmount } from "@/domain/uplifts/utils/uplift-amount";
 import type { UpliftQueueItem } from "@/domain/uplifts/types/uplift";
 import { formatDateTime, getWaitTimeTextClass, timeSince, waitTimeColor } from "@/lib/time-utils";
 
-export type UpliftApprovalTab = "pending" | "approved";
-
 const CLOSED_WO_TOOLTIP = "This work order is closed. Uplifts can no longer be revoked.";
 const ADMIN_ONLY_REVOKE_TOOLTIP = "Only admins can revoke uplifts";
 
@@ -100,7 +110,7 @@ function PendingRowActions({
             disabled={!canDecide || isDecisionPending}
             onClick={() => onApprove(row)}
           >
-            Approve
+            Approve {formatUpliftMoney(upliftAmount(row))}
           </Button>
         </span>
       </Tooltip>
@@ -211,11 +221,11 @@ function UpliftApprovalRow({
       </TableCell>
       <TableCell>
         <Text variant="body" className="font-medium">
-          {formatUpliftMoney(row.requestedNTE)}
+          {formatUpliftMoney(upliftAmount(row))}
         </Text>
       </TableCell>
       <TableCell>
-        {row.approvedOnWoTotal != null ? (
+        {isGrantedAmount(row.approvedOnWoTotal) ? (
           <Text variant="body">{formatUpliftMoney(row.approvedOnWoTotal)}</Text>
         ) : (
           <Text variant="caption" tone="muted">
@@ -232,65 +242,82 @@ function UpliftApprovalRow({
         <AttachmentsCell row={row} onOpenAttachment={onOpenAttachment} />
       </TableCell>
       <TableCell>{row.requestedByVendorName || "—"}</TableCell>
-      {tab === "pending" ? (
-        <TableCell>
-          <WaitingCell row={row} />
-        </TableCell>
-      ) : (
+      {tab === "pending" && (
+        <>
+          <TableCell>
+            <WaitingCell row={row} />
+          </TableCell>
+          <TableCell>
+            <PendingRowActions
+              row={row}
+              onApprove={onApprove}
+              onReject={onReject}
+              isDecisionPending={isDecisionPending}
+            />
+          </TableCell>
+        </>
+      )}
+      {tab === "approved" && (
         <>
           <TableCell>{row.decidedByName || "—"}</TableCell>
           <TableCell>{row.decidedAt ? formatDateTime(row.decidedAt) : "—"}</TableCell>
+          <TableCell>
+            <ApprovedRowActions
+              row={row}
+              canRevoke={canRevoke}
+              onRevoke={onRevoke}
+              isDecisionPending={isDecisionPending}
+            />
+          </TableCell>
         </>
       )}
-      <TableCell>
-        {tab === "pending" ? (
-          <PendingRowActions
-            row={row}
-            onApprove={onApprove}
-            onReject={onReject}
-            isDecisionPending={isDecisionPending}
-          />
-        ) : (
-          <ApprovedRowActions
-            row={row}
-            canRevoke={canRevoke}
-            onRevoke={onRevoke}
-            isDecisionPending={isDecisionPending}
-          />
-        )}
+      {tab === "rejected" && <RejectedRowCells row={row} />}
+    </TableRow>
+  );
+}
+
+function UpliftApprovalsEmptyState({ tab }: { tab: UpliftApprovalTab }) {
+  if (tab === "rejected") return <RejectedEmptyState />;
+  if (tab === "approved") {
+    return (
+      <Box>
+        <Text variant="description">No approved uplifts yet</Text>
+        <Text variant="caption" tone="muted">
+          Uplifts you approve are archived here for reference.
+        </Text>
+      </Box>
+    );
+  }
+  return (
+    <Text variant="description" tone="muted">
+      No uplifts waiting for approval.
+    </Text>
+  );
+}
+
+function UpliftApprovalsEmptyRow({
+  tab,
+  colSpan,
+  hasError,
+}: {
+  tab: UpliftApprovalTab;
+  colSpan: number;
+  hasError: boolean;
+}) {
+  if (hasError) return null;
+  return (
+    <TableRow>
+      <TableCell colSpan={colSpan} align="center" className="py-10">
+        <UpliftApprovalsEmptyState tab={tab} />
       </TableCell>
     </TableRow>
   );
 }
 
-const PENDING_HEADER_CELLS = [
-  "Work Order",
-  "Service / Vendor",
-  "Amount",
-  "Approved on WO",
-  "Notes",
-  "Attachments",
-  "Requested By",
-  "Waiting",
-  "Actions",
-] as const;
-
-const APPROVED_HEADER_CELLS = [
-  "Work Order",
-  "Service / Vendor",
-  "Amount",
-  "Approved on WO",
-  "Notes",
-  "Attachments",
-  "Requested By",
-  "Approved By",
-  "Approved At",
-  "Actions",
-] as const;
-
 export function UpliftApprovalsTable({
   tab,
   isLoading,
+  hasError,
   rows,
   canRevoke,
   onOpenDetail,
@@ -302,6 +329,7 @@ export function UpliftApprovalsTable({
 }: {
   tab: UpliftApprovalTab;
   isLoading: boolean;
+  hasError: boolean;
   rows: UpliftQueueItem[];
   canRevoke: boolean;
   onOpenDetail: (row: UpliftQueueItem) => void;
@@ -311,7 +339,7 @@ export function UpliftApprovalsTable({
   onOpenAttachment: (row: UpliftQueueItem) => void;
   isDecisionPending: boolean;
 }) {
-  const headerCells = tab === "pending" ? PENDING_HEADER_CELLS : APPROVED_HEADER_CELLS;
+  const headerCells = UPLIFT_APPROVAL_HEADER_CELLS[tab];
   return (
     <TableContainer component={Paper} variant="outlined">
       <Table size="small" aria-label={`${tab} uplift requests`}>
@@ -332,22 +360,7 @@ export function UpliftApprovalsTable({
               </TableCell>
             </TableRow>
           ) : rows.length === 0 ? (
-            <TableRow>
-              <TableCell colSpan={headerCells.length} align="center" className="py-10">
-                {tab === "pending" ? (
-                  <Text variant="description" tone="muted">
-                    No uplifts waiting for approval.
-                  </Text>
-                ) : (
-                  <Box>
-                    <Text variant="description">No approved uplifts yet</Text>
-                    <Text variant="caption" tone="muted">
-                      Uplifts you approve are archived here for reference.
-                    </Text>
-                  </Box>
-                )}
-              </TableCell>
-            </TableRow>
+            <UpliftApprovalsEmptyRow tab={tab} colSpan={headerCells.length} hasError={hasError} />
           ) : (
             rows.map((row) => (
               <UpliftApprovalRow

src/app/(protected)/uplifts/_components/uplift-decision-dialogs.tsx

@@ -1,5 +1,6 @@
 import { RejectDialog } from "@/app/(protected)/uplifts/_components/reject-dialog";
 import { RevokeDialog } from "@/app/(protected)/uplifts/_components/revoke-dialog";
+import { upliftAmount } from "@/domain/uplifts/utils/uplift-amount";
 import type { useUpliftApprovalController } from "@/domain/uplifts/use-cases/use-uplift-approval-controller";
 
 export type UpliftApprovalController = ReturnType<typeof useUpliftApprovalController>;
@@ -23,7 +24,7 @@ export function UpliftDecisionDialogs({ controller }: { controller: UpliftApprov
     <>
       <RejectDialog
         open={rejectTarget != null}
-        amount={rejectTarget?.requestedNTE}
+        amount={rejectTarget ? upliftAmount(rejectTarget) : undefined}
         woNumber={woFallbackNumber(rejectTarget)}
         onClose={closeReject}
         onConfirm={handleRejectConfirm}
@@ -31,7 +32,7 @@ export function UpliftDecisionDialogs({ controller }: { controller: UpliftApprov
       />
       <RevokeDialog
         open={revokeTarget != null}
-        amount={revokeTarget?.requestedNTE}
+        amount={revokeTarget ? upliftAmount(revokeTarget) : undefined}
         woNumber={woFallbackNumber(revokeTarget)}
         onClose={closeRevoke}
         onConfirm={handleRevokeConfirm}

src/app/(protected)/uplifts/_components/uplift-detail-modal.tsx

@@ -16,10 +16,14 @@ import {
   formatUpliftCalendarDate,
   formatUpliftDateTime,
 } from "@/app/(protected)/uplifts/_components/format-uplift-dates";
-import { formatUpliftMoney } from "@/app/(protected)/uplifts/_components/format-uplift-money";
+import {
+  formatUpliftMoney,
+  isGrantedAmount,
+} from "@/app/(protected)/uplifts/_components/format-uplift-money";
 import { Text } from "@/components/ui/text";
 import { useWorkOrderUplifts } from "@/domain/work-orders/use-cases/use-work-order-uplifts";
 import { useUpliftsCanApprove } from "@/domain/uplifts/use-cases/use-uplifts-can-approve";
+import { upliftAmount } from "@/domain/uplifts/utils/uplift-amount";
 import type { UpliftQueueItem } from "@/domain/uplifts/types/uplift";
 
 const CLOSED_WO_TOOLTIP = "This work order is closed. Uplifts can no longer be revoked.";
@@ -142,6 +146,7 @@ function ApprovedOnWoBreakdown({
   breakdown: ExposureBreakdown;
   unavailable: boolean;
 }) {
+  const grantedTotal = isGrantedAmount(breakdown.total) ? breakdown.total : null;
   return (
     <Box sx={BORDERED_BLOCK_SX}>
       <BreakdownRow
@@ -156,7 +161,12 @@ function ApprovedOnWoBreakdown({
         strong={false}
         unavailable={unavailable}
       />
-      <BreakdownRow label="Total" value={breakdown.total} strong unavailable={unavailable} />
+      <BreakdownRow
+        label="Total"
+        value={grantedTotal}
+        strong
+        unavailable={unavailable && breakdown.total == null}
+      />
     </Box>
   );
 }
@@ -272,7 +282,7 @@ function PendingModalActions({
             disabled={!canDecide || approvePending}
             onClick={() => onApprove(item)}
           >
-            Approve
+            Approve {formatUpliftMoney(upliftAmount(item))}
           </Button>
         </span>
       </Tooltip>
@@ -385,7 +395,7 @@ function UpliftDetailContent({
             Amount
           </Text>
           <Text variant="heading" as="span" tone="warning">
-            {formatUpliftMoney(item.requestedNTE)}
+            {formatUpliftMoney(upliftAmount(item))}
           </Text>
         </Box>
         <WorkOrderSection item={item} />

src/app/(protected)/uplifts/_components/uplift-rejected-cells.tsx

@@ -0,0 +1,28 @@
+import HighlightOffOutlinedIcon from "@mui/icons-material/HighlightOffOutlined";
+import { Box, TableCell } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import type { UpliftQueueItem } from "@/domain/uplifts/types/uplift";
+import { formatDateTime } from "@/lib/time-utils";
+
+export function RejectedRowCells({ row }: { row: UpliftQueueItem }) {
+  return (
+    <>
+      <TableCell>{row.decidedByName || "—"}</TableCell>
+      <TableCell>{row.decidedAt ? formatDateTime(row.decidedAt) : "—"}</TableCell>
+      <TableCell sx={{ maxWidth: 260 }}>
+        <Text variant="caption" sx={{ whiteSpace: "pre-wrap" }}>
+          {row.decisionNote || "—"}
+        </Text>
+      </TableCell>
+    </>
+  );
+}
+
+export function RejectedEmptyState() {
+  return (
+    <Box className="flex flex-col items-center gap-2">
+      <HighlightOffOutlinedIcon color="disabled" aria-hidden />
+      <Text variant="description">No rejected uplifts.</Text>
+    </Box>
+  );
+}

src/app/(protected)/uplifts/index.tsx

@@ -1,9 +1,11 @@
 import { useState } from "react";
 import { Alert, Box, Chip, Stack, Tab, Tabs, TablePagination } from "@mui/material";
 import {
-  UpliftApprovalsTable,
+  UPLIFT_APPROVAL_TABS,
+  isUpliftApprovalTab,
   type UpliftApprovalTab,
-} from "@/app/(protected)/uplifts/_components/uplift-approvals-table";
+} from "@/app/(protected)/uplifts/_components/uplift-approval-tabs";
+import { UpliftApprovalsTable } from "@/app/(protected)/uplifts/_components/uplift-approvals-table";
 import { UpliftDecisionDialogs } from "@/app/(protected)/uplifts/_components/uplift-decision-dialogs";
 import { UpliftDetailModal } from "@/app/(protected)/uplifts/_components/uplift-detail-modal";
 import {
@@ -16,6 +18,7 @@ import { useAuthContext } from "@/providers/auth-context";
 import { useUpliftApprovalController } from "@/domain/uplifts/use-cases/use-uplift-approval-controller";
 import { useUpliftsQueue } from "@/domain/uplifts/use-cases/use-uplifts-queue";
 import { Text } from "@/components/ui/text";
+import type { UpliftsQueueResult } from "@/domain/uplifts/types/uplift";
 
 const PAGE_SIZE = 25;
 
@@ -39,58 +42,68 @@ function UpliftApprovalsHeader({ pendingExposureTotal }: { pendingExposureTotal:
   );
 }
 
+const TAB_LABELS: Record<UpliftApprovalTab, string> = {
+  pending: "Pending",
+  approved: "Approved",
+  rejected: "Rejected",
+};
+
+function knownTotal(query: { data?: UpliftsQueueResult | undefined }): number | null {
+  return query.data ? query.data.totalCount : null;
+}
+
+function TabCountPill({ tab, count }: { tab: UpliftApprovalTab; count: number | null }) {
+  return (
+    <Chip
+      size="small"
+      label={count ?? "—"}
+      aria-label={count == null ? `${tab} uplift count unavailable` : `${count} ${tab} uplifts`}
+    />
+  );
+}
+
 function UpliftApprovalsTabs({
   tab,
-  pendingCount,
+  counts,
   onChange,
 }: {
   tab: UpliftApprovalTab;
-  pendingCount: number;
+  counts: Record<UpliftApprovalTab, number | null>;
   onChange: (_event: unknown, value: string) => void;
 }) {
   return (
     <Tabs value={tab} onChange={onChange}>
-      <Tab
-        value="pending"
-        label={
-          <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
-            <span>Pending</span>
-            <Chip
-              size="small"
-              label={pendingCount}
-              aria-label={`${pendingCount} pending uplifts`}
-            />
-          </Stack>
-        }
-      />
-      <Tab value="approved" label="Approved" />
+      {UPLIFT_APPROVAL_TABS.map((value) => (
+        <Tab
+          key={value}
+          value={value}
+          label={
+            <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+              <span>{TAB_LABELS[value]}</span>
+              <TabCountPill tab={value} count={counts[value]} />
+            </Stack>
+          }
+        />
+      ))}
     </Tabs>
   );
 }
 
 function UpliftApprovalsPagination({
-  tab,
   count,
-  pendingPage,
-  approvedPage,
-  onPendingPageChange,
-  onApprovedPageChange,
+  page,
+  onPageChange,
 }: {
-  tab: UpliftApprovalTab;
   count: number;
-  pendingPage: number;
-  approvedPage: number;
-  onPendingPageChange: (page: number) => void;
-  onApprovedPageChange: (page: number) => void;
+  page: number;
+  onPageChange: (page: number) => void;
 }) {
   return (
     <TablePagination
       component="div"
       count={count}
-      page={tab === "pending" ? pendingPage : approvedPage}
-      onPageChange={(_event, nextPage) =>
-        tab === "pending" ? onPendingPageChange(nextPage) : onApprovedPageChange(nextPage)
-      }
+      page={page}
+      onPageChange={(_event, nextPage) => onPageChange(nextPage)}
       rowsPerPage={PAGE_SIZE}
       rowsPerPageOptions={[PAGE_SIZE]}
     />
@@ -108,22 +121,31 @@ function UpliftQueueError({ error }: { error: unknown }) {
 
 export default function UpliftQueuePage() {
   const [tab, setTab] = useState<UpliftApprovalTab>("pending");
-  const [pendingPage, setPendingPage] = useState(0);
-  const [approvedPage, setApprovedPage] = useState(0);
+  const [pages, setPages] = useState<Record<UpliftApprovalTab, number>>({
+    pending: 0,
+    approved: 0,
+    rejected: 0,
+  });
 
   const { user } = useAuthContext();
   const canRevokeUplifts = isAdminUser(user?.userRoles);
 
   const pendingQuery = useUpliftsQueue({
     status: "Pending",
-    page: pendingPage + 1,
+    page: pages.pending + 1,
     pageSize: PAGE_SIZE,
   });
   const approvedQuery = useUpliftsQueue({
     status: "Approved",
-    page: approvedPage + 1,
+    page: pages.approved + 1,
     pageSize: PAGE_SIZE,
   });
+  const rejectedQuery = useUpliftsQueue({
+    status: "Rejected",
+    page: pages.rejected + 1,
+    pageSize: PAGE_SIZE,
+  });
+  const queries = { pending: pendingQuery, approved: approvedQuery, rejected: rejectedQuery };
 
   const controller = useUpliftApprovalController();
   const {
@@ -138,13 +160,18 @@ export default function UpliftQueuePage() {
     openDetail,
   } = controller;
 
-  const activeQuery = tab === "pending" ? pendingQuery : approvedQuery;
+  const activeQuery = queries[tab];
   const rows = activeQuery.data?.items ?? [];
-  const pendingCount = pendingQuery.data?.totalCount ?? 0;
+  const counts = {
+    pending: knownTotal(pendingQuery),
+    approved: knownTotal(approvedQuery),
+    rejected: knownTotal(rejectedQuery),
+  };
+  const activeTotal = counts[tab];
   const pendingExposureTotal = pendingQuery.data?.pendingExposureTotal ?? null;
 
   const handleTabChange = (_event: unknown, value: string) => {
-    if (value === "pending" || value === "approved") {
+    if (isUpliftApprovalTab(value)) {
       setTab(value);
     }
   };
@@ -152,11 +179,12 @@ export default function UpliftQueuePage() {
   return (
     <Box className="flex flex-col gap-4 p-4">
       <UpliftApprovalsHeader pendingExposureTotal={pendingExposureTotal} />
-      <UpliftApprovalsTabs tab={tab} pendingCount={pendingCount} onChange={handleTabChange} />
+      <UpliftApprovalsTabs tab={tab} counts={counts} onChange={handleTabChange} />
       <UpliftQueueError error={activeQuery.error} />
       <UpliftApprovalsTable
         tab={tab}
         isLoading={activeQuery.isLoading}
+        hasError={Boolean(activeQuery.error)}
         rows={rows}
         canRevoke={canRevokeUplifts}
         onOpenDetail={openDetail}
@@ -166,14 +194,13 @@ export default function UpliftQueuePage() {
         onOpenAttachment={openUpliftEvidence}
         isDecisionPending={approvePending || rejectPending || revokePending}
       />
-      <UpliftApprovalsPagination
-        tab={tab}
-        count={activeQuery.data?.totalCount ?? 0}
-        pendingPage={pendingPage}
-        approvedPage={approvedPage}
-        onPendingPageChange={setPendingPage}
-        onApprovedPageChange={setApprovedPage}
-      />
+      {activeTotal != null && (
+        <UpliftApprovalsPagination
+          count={activeTotal}
+          page={pages[tab]}
+          onPageChange={(page) => setPages((current) => ({ ...current, [tab]: page }))}
+        />
+      )}
       {detailItem != null && (
         <UpliftDetailModal
           item={detailItem}

src/app/(protected)/workorders/_components/comp-doc/comp-doc-document-frame.tsx

@@ -0,0 +1,121 @@
+import type { ReactNode } from "react";
+import {
+  PAGE_BOTTOM_BAR_PX,
+  PAGE_BOTTOM_PADDING_PX,
+  PAGE_GAP_PX,
+  PAGE_TOP_BAR_PX,
+  type PagePosition,
+} from "@/domain/work-orders/utils/completion-doc-pagination";
+import { useCompDocPagination } from "./use-comp-doc-pagination";
+
+type CompDocDocumentFrameProps = {
+  /** Letterhead and opening content, printed once at the top of page 1. */
+  header: ReactNode;
+  /** Blocks (procedures, comments) laid out across pages; never split. */
+  sections: readonly ReactNode[];
+  /** Greyed-out pages, as for a document marked not required. */
+  dimmed?: boolean;
+  /** Stamped over the first sheet, outside the dimmed layer. */
+  overlay?: ReactNode;
+  /** Page being read and page count, updated on layout and on scroll. */
+  onPageChange?: (position: PagePosition) => void;
+};
+
+/** Contains child margins so a block's measured height is its full height. */
+const flowRoot = { display: "flow-root" } as const;
+
+/**
+ * The printed document: A4 sheets stacked in a scrollable column, the letterhead
+ * on the first sheet only and the brand bars at the top and bottom of every sheet.
+ */
+export function CompDocDocumentFrame({
+  header,
+  sections,
+  dimmed = false,
+  overlay,
+  onPageChange,
+}: CompDocDocumentFrameProps) {
+  const { pages, pageHeight, scrollerRef, sheetsRef, headerRef, blockRefs, pageRefs, onScroll } =
+    useCompDocPagination(sections.length, onPageChange);
+
+  return (
+    <div
+      ref={scrollerRef}
+      onScroll={onScroll}
+      className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto"
+      style={{ padding: "0 20px 20px", scrollbarGutter: "stable" }}
+      data-testid="comp-doc-document"
+    >
+      <div ref={sheetsRef} className="relative">
+        {pages.map((blockIndices, pageIndex) => (
+          <div
+            key={pageIndex}
+            ref={(el) => {
+              pageRefs.current[pageIndex] = el;
+            }}
+            data-testid="comp-doc-page"
+            className="relative flex flex-col break-words"
+            style={{
+              marginTop: pageIndex > 0 ? PAGE_GAP_PX : 0,
+              minHeight: pageHeight,
+              background: "#ffffff",
+              borderRadius: 8,
+              boxShadow: "0 1px 3px rgba(0,0,0,.08), 0 12px 32px -16px rgba(0,0,0,.25)",
+              overflow: "hidden",
+              fontFamily: "var(--font-sans)",
+              overflowWrap: "break-word",
+              wordBreak: "break-word",
+            }}
+          >
+            <div
+              className="flex flex-1 flex-col"
+              style={{
+                opacity: dimmed ? 0.5 : 1,
+                filter: dimmed ? "grayscale(0.4)" : "none",
+              }}
+            >
+              <div
+                data-testid="comp-doc-page-top-bar"
+                style={{
+                  height: PAGE_TOP_BAR_PX,
+                  flexShrink: 0,
+                  background: "linear-gradient(100deg,#27AAE1,#1C75BC)",
+                }}
+              />
+              <div style={{ padding: `0 28px ${PAGE_BOTTOM_PADDING_PX}px` }}>
+                {pageIndex === 0 && (
+                  <div ref={headerRef} style={flowRoot}>
+                    {header}
+                  </div>
+                )}
+                {blockIndices.map((blockIndex) => (
+                  <div
+                    key={blockIndex}
+                    ref={(el) => {
+                      blockRefs.current[blockIndex] = el;
+                    }}
+                    style={flowRoot}
+                  >
+                    {sections[blockIndex]}
+                  </div>
+                ))}
+              </div>
+              <div
+                data-testid="comp-doc-page-bottom-bar"
+                style={{
+                  height: PAGE_BOTTOM_BAR_PX,
+                  flexShrink: 0,
+                  marginTop: "auto",
+                  background: "linear-gradient(100deg,#1C75BC,#27AAE1)",
+                  clipPath: "polygon(0 45%,100% 0,100% 100%,0 100%)",
+                }}
+              />
+            </div>
+
+            {pageIndex === 0 && overlay}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-badge.tsx

@@ -1,10 +1,15 @@
 import { CheckCircle2, FileText } from "lucide-react";
+import {
+  pageIndicatorLabel,
+  type PagePosition,
+} from "@/domain/work-orders/utils/completion-doc-pagination";
 
 type CompDocPreviewBadgeProps = {
   isGenerated: boolean;
+  page: PagePosition;
 };
 
-export function CompDocPreviewBadge({ isGenerated }: CompDocPreviewBadgeProps) {
+export function CompDocPreviewBadge({ isGenerated, page }: CompDocPreviewBadgeProps) {
   return (
     <div className="flex shrink-0 items-center justify-center" style={{ padding: "12px 0" }}>
       <span
@@ -26,6 +31,7 @@ export function CompDocPreviewBadge({ isGenerated }: CompDocPreviewBadgeProps) {
           <FileText size={13} />
         )}
         {isGenerated ? "Generated document" : "Preview — not yet generated"}
+        {pageIndicatorLabel(page)}
       </span>
     </div>
   );

src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-procedure.tsx

@@ -1,46 +1,20 @@
 import { Text } from "@/components/ui/text";
 import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
-import { procedureFor, SAFETY_BULLETS } from "@/domain/work-orders/utils/completion-doc-procedures";
+import { procedureFor } from "@/domain/work-orders/utils/completion-doc-procedures";
+import { CompDocProcedureHeading } from "./comp-doc-procedure-heading";
 import { CompDocProcedureList } from "./comp-doc-procedure-list";
 
 type CompDocPreviewProcedureProps = {
   row: WorkOrderTableRow;
-  notes: string;
 };
 
-export function CompDocPreviewProcedure({ row, notes }: CompDocPreviewProcedureProps) {
+/** The work order's procedure: heading, intro and steps, kept together on one page. */
+export function CompDocPreviewProcedure({ row }: CompDocPreviewProcedureProps) {
   const proc = procedureFor(row.pm);
 
   return (
     <>
-      <ul style={{ listStyle: "disc", paddingLeft: 18, margin: "8px 0 0" }}>
-        {SAFETY_BULLETS.map((b, i) => (
-          <li
-            key={i}
-            style={{
-              fontSize: 12.5,
-              lineHeight: 1.5,
-              margin: "5px 0",
-              color: "#161E38",
-            }}
-          >
-            {b}
-          </li>
-        ))}
-      </ul>
-
-      <Text
-        as="h3"
-        variant="heading"
-        sx={{
-          fontSize: 13,
-          fontWeight: 700,
-          color: "#161E38",
-          margin: "16px 0 4px",
-        }}
-      >
-        {proc.heading}
-      </Text>
+      <CompDocProcedureHeading>{proc.heading}</CompDocProcedureHeading>
       <Text
         variant="body"
         sx={{
@@ -53,35 +27,27 @@ export function CompDocPreviewProcedure({ row, notes }: CompDocPreviewProcedureP
         {proc.intro}
       </Text>
       <CompDocProcedureList proc={proc} />
-
-      {notes.length > 0 && (
-        <>
-          <Text
-            as="h3"
-            variant="heading"
-            sx={{
-              fontSize: 13,
-              fontWeight: 700,
-              color: "#161E38",
-              margin: "16px 0 4px",
-            }}
-          >
-            PM Comments
-          </Text>
-          <Text
-            variant="body"
-            sx={{
-              fontSize: 12.5,
-              lineHeight: 1.5,
-              color: "#161E38",
-              margin: 0,
-              whiteSpace: "pre-wrap",
-            }}
-          >
-            {notes}
-          </Text>
-        </>
-      )}
+    </>
+  );
+}
+
+/** The PM's free-text comments printed after the procedure. */
+export function CompDocPreviewComments({ notes }: { notes: string }) {
+  return (
+    <>
+      <CompDocProcedureHeading>PM Comments</CompDocProcedureHeading>
+      <Text
+        variant="body"
+        sx={{
+          fontSize: 12.5,
+          lineHeight: 1.5,
+          color: "#161E38",
+          margin: 0,
+          whiteSpace: "pre-wrap",
+        }}
+      >
+        {notes}
+      </Text>
     </>
   );
 }

src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview.tsx

@@ -1,10 +1,14 @@
+import { useState } from "react";
 import type { CompDocSiteInfo } from "@/domain/work-orders/types/completion-doc";
 import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { PagePosition } from "@/domain/work-orders/utils/completion-doc-pagination";
+import { CompDocDocumentFrame } from "./comp-doc-document-frame";
 import { CompDocNotRequiredStamp } from "./comp-doc-not-required-stamp";
 import { CompDocPreviewBadge } from "./comp-doc-preview-badge";
 import { CompDocPreviewHeader } from "./comp-doc-preview-header";
-import { CompDocPreviewProcedure } from "./comp-doc-preview-procedure";
+import { CompDocPreviewComments, CompDocPreviewProcedure } from "./comp-doc-preview-procedure";
 import { CompDocPreviewSummary } from "./comp-doc-preview-summary";
+import { CompDocSafetyBullets } from "./comp-doc-safety-bullets";
 
 type CompDocPreviewProps = {
   row: WorkOrderTableRow;
@@ -23,6 +27,10 @@ export function CompDocPreview({
   isGenerated,
   isNotRequired,
 }: CompDocPreviewProps) {
+  const [page, setPage] = useState<PagePosition>({ current: 1, total: 1 });
+  const sections = [<CompDocPreviewProcedure key="procedure" row={row} />];
+  if (notes.length > 0) sections.push(<CompDocPreviewComments key="notes" notes={notes} />);
+
   return (
     <div
       className="flex min-h-0 flex-col"
@@ -32,58 +40,26 @@ export function CompDocPreview({
         background: "var(--color-bg-muted)",
       }}
     >
-      <CompDocPreviewBadge isGenerated={isGenerated} />
+      <CompDocPreviewBadge isGenerated={isGenerated} page={page} />
 
-      <div
-        className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto"
-        style={{ padding: "0 20px 20px" }}
-      >
-        <div
-          className="relative break-words"
-          style={{
-            background: "#ffffff",
-            borderRadius: 8,
-            boxShadow: "0 1px 3px rgba(0,0,0,.08), 0 12px 32px -16px rgba(0,0,0,.25)",
-            overflow: "hidden",
-            fontFamily: "var(--font-sans)",
-            overflowWrap: "break-word",
-            wordBreak: "break-word",
-          }}
-        >
-          <div
-            style={{
-              opacity: isNotRequired ? 0.5 : 1,
-              filter: isNotRequired ? "grayscale(0.4)" : "none",
-            }}
-          >
-            <div
-              style={{
-                height: 12,
-                background: "linear-gradient(100deg,#27AAE1,#1C75BC)",
-              }}
+      <CompDocDocumentFrame
+        dimmed={isNotRequired}
+        overlay={isNotRequired && <CompDocNotRequiredStamp />}
+        onPageChange={setPage}
+        header={
+          <>
+            <CompDocPreviewHeader />
+            <CompDocPreviewSummary
+              row={row}
+              site={site}
+              generatedAt={generatedAt}
+              isGenerated={isGenerated}
             />
-            <div style={{ padding: "0 28px 28px" }}>
-              <CompDocPreviewHeader />
-              <CompDocPreviewSummary
-                row={row}
-                site={site}
-                generatedAt={generatedAt}
-                isGenerated={isGenerated}
-              />
-              <CompDocPreviewProcedure row={row} notes={notes} />
-            </div>
-            <div
-              style={{
-                height: 24,
-                background: "linear-gradient(100deg,#1C75BC,#27AAE1)",
-                clipPath: "polygon(0 45%,100% 0,100% 100%,0 100%)",
-              }}
-            />
-          </div>
-
-          {isNotRequired && <CompDocNotRequiredStamp />}
-        </div>
-      </div>
+            <CompDocSafetyBullets />
+          </>
+        }
+        sections={sections}
+      />
     </div>
   );
 }

src/app/(protected)/workorders/_components/comp-doc/comp-doc-procedure-heading.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import { Text } from "@/components/ui/text";
+
+export function CompDocProcedureHeading({ children }: { children: ReactNode }) {
+  return (
+    <Text
+      as="h3"
+      variant="heading"
+      sx={{
+        fontSize: 13,
+        fontWeight: 700,
+        color: "#161E38",
+        margin: "16px 0 4px",
+      }}
+    >
+      {children}
+    </Text>
+  );
+}

src/app/(protected)/workorders/_components/comp-doc/comp-doc-safety-bullets.tsx

@@ -0,0 +1,27 @@
+import { SAFETY_BULLETS } from "@/domain/work-orders/utils/completion-doc-procedures";
+
+type CompDocSafetyBulletsProps = {
+  /** Template-specific notes printed after the standard bullets. */
+  extra?: readonly string[];
+};
+
+export function CompDocSafetyBullets({ extra = [] }: CompDocSafetyBulletsProps) {
+  return (
+    <ul style={{ listStyle: "disc", paddingLeft: 18, margin: "8px 0 0" }}>
+      {[...SAFETY_BULLETS, ...extra].map((b, i) => (
+        <li
+          key={i}
+          style={{
+            fontSize: 12.5,
+            lineHeight: 1.5,
+            margin: "5px 0",
+            color: "#161E38",
+            whiteSpace: i < SAFETY_BULLETS.length ? undefined : "pre-wrap",
+          }}
+        >
+          {b}
+        </li>
+      ))}
+    </ul>
+  );
+}

src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-pagination.ts

@@ -0,0 +1,109 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  a4PageHeight,
+  coverAllBlocks,
+  currentPageAt,
+  pageContentHeight,
+  paginateBlocks,
+  samePages,
+  type PagePosition,
+} from "@/domain/work-orders/utils/completion-doc-pagination";
+
+type PageLayout = {
+  pages: number[][];
+  /** Sheet height in px; undefined until the sheets have a measurable width. */
+  pageHeight: number | undefined;
+};
+
+const heightOf = (el: Element | null | undefined) => el?.getBoundingClientRect().height ?? 0;
+
+function allOnOnePage(count: number): number[][] {
+  return [Array.from({ length: count }, (_, i) => i)];
+}
+
+/**
+ * Measures the rendered letterhead and blocks and splits them into A4 sheets.
+ * Blocks are measured where they are rendered (every sheet has the same width),
+ * and re-measured after every render and whenever anything observed resizes.
+ */
+export function useCompDocPagination(
+  blockCount: number,
+  onPageChange?: (position: PagePosition) => void,
+) {
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const sheetsRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef<HTMLDivElement>(null);
+  const blockRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const pageRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const [layout, setLayout] = useState<PageLayout>({ pages: [[]], pageHeight: undefined });
+  const pages = coverAllBlocks(layout.pages, blockCount);
+
+  const measure = useCallback(() => {
+    const width = sheetsRef.current?.getBoundingClientRect().width ?? 0;
+    const next: PageLayout =
+      width > 0
+        ? {
+            pages: paginateBlocks({
+              headerHeight: heightOf(headerRef.current),
+              blockHeights: Array.from({ length: blockCount }, (_, i) =>
+                heightOf(blockRefs.current[i]),
+              ),
+              pageHeight: pageContentHeight(width),
+            }),
+            pageHeight: a4PageHeight(width),
+          }
+        : { pages: allOnOnePage(blockCount), pageHeight: undefined };
+    setLayout((prev) =>
+      samePages(prev.pages, next.pages) && prev.pageHeight === next.pageHeight ? prev : next,
+    );
+  }, [blockCount]);
+
+  useLayoutEffect(() => {
+    measure();
+  });
+
+  const onPageChangeRef = useRef(onPageChange);
+  const totalRef = useRef(pages.length);
+  const lastReported = useRef<PagePosition | null>(null);
+  useLayoutEffect(() => {
+    onPageChangeRef.current = onPageChange;
+    totalRef.current = pages.length;
+  });
+
+  const report = useCallback(() => {
+    const total = totalRef.current;
+    const tops = pageRefs.current.slice(0, total).map((el) => el?.offsetTop ?? 0);
+    const current = Math.min(currentPageAt(tops, scrollerRef.current?.scrollTop ?? 0), total);
+    const last = lastReported.current;
+    if (last?.current === current && last.total === total) return;
+    lastReported.current = { current, total };
+    onPageChangeRef.current?.({ current, total });
+  }, []);
+
+  useLayoutEffect(() => {
+    report();
+  });
+
+  const layoutKey = pages.map((page) => page.join(",")).join("|");
+  useEffect(() => {
+    const observer = new ResizeObserver(() => {
+      measure();
+      report();
+    });
+    [sheetsRef.current, headerRef.current, ...blockRefs.current.slice(0, blockCount)].forEach(
+      (el) => el && observer.observe(el),
+    );
+    return () => observer.disconnect();
+  }, [measure, report, blockCount, layoutKey]);
+
+  return {
+    pages,
+    pageHeight: layout.pageHeight,
+    scrollerRef,
+    sheetsRef,
+    headerRef,
+    blockRefs,
+    pageRefs,
+    onScroll: report,
+  };
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-media.tsx

@@ -5,10 +5,12 @@ import {
 } from "@/app/(protected)/workorders/_components/media/media-uploader";
 import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
 import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+import type { WorkOrderMediaKindCounts } from "@/domain/work-orders/utils/work-order-media-limits";
 
 type SlideOverCompletionMediaProps = {
   isReadOnly: boolean;
   media: MediaFile[];
+  mediaCounts?: WorkOrderMediaKindCounts;
   mediaPending: boolean;
   onUploadMedia?: (requests: MediaUploadRequest[]) => void;
   onCategorizeMedia?: (id: string, category: UploadableMediaCategory) => void;
@@ -20,6 +22,7 @@ type SlideOverCompletionMediaProps = {
 export function SlideOverCompletionMedia({
   isReadOnly,
   media,
+  mediaCounts,
   mediaPending,
   onUploadMedia,
   onCategorizeMedia,
@@ -38,6 +41,7 @@ export function SlideOverCompletionMedia({
       <div style={isReadOnly ? { opacity: 0.6, pointerEvents: "none" } : undefined}>
         <MediaUploader
           uploads={media}
+          mediaCounts={mediaCounts}
           onUpload={onUploadMedia}
           onCategorize={onCategorizeMedia}
           onRemove={onRemoveMedia}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-tab.tsx

@@ -12,6 +12,7 @@ import {
   formatMediaSizeLimit,
   isWorkOrderFileTooLarge,
   MAX_WORK_ORDER_COMPLETION_DOC_BYTES,
+  type WorkOrderMediaKindCounts,
 } from "@/domain/work-orders/utils/work-order-media-limits";
 import { SlideOverCompletionActions } from "./slide-over-completion-actions";
 import { SlideOverCompletionMedia } from "./slide-over-completion-media";
@@ -23,6 +24,7 @@ type SlideOverCompletionTabProps = {
   isReadOnly: boolean;
   completion?: WorkOrderBoardCompletion;
   media: MediaFile[];
+  mediaCounts?: WorkOrderMediaKindCounts;
   mediaPending?: boolean;
   completionPending?: boolean;
   onUploadMedia?: (requests: MediaUploadRequest[]) => void;
@@ -39,6 +41,7 @@ export function SlideOverCompletionTab({
   isReadOnly,
   completion,
   media,
+  mediaCounts,
   mediaPending = false,
   completionPending = false,
   onUploadMedia,
@@ -59,6 +62,7 @@ export function SlideOverCompletionTab({
       <SlideOverCompletionMedia
         isReadOnly={isReadOnly}
         media={media}
+        mediaCounts={mediaCounts}
         mediaPending={mediaPending}
         onUploadMedia={onUploadMedia}
         onCategorizeMedia={onCategorizeMedia}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import {
   File as FileIcon,
   FileText,
@@ -18,12 +18,16 @@ import {
   hasExplicitAvetaFile,
   resolveExtraDocCategory,
 } from "@/domain/work-orders/utils/extra-docs-aveta";
+import {
+  screenWorkOrderUploads,
+  type WorkOrderUploadScreenResult,
+} from "@/domain/work-orders/utils/screen-work-order-uploads";
 import {
   canDeleteWorkOrderMedia,
-  formatMediaSizeLimit,
+  countWorkOrderMediaKinds,
   isWorkOrderExtraDocTypeAllowed,
-  isWorkOrderFileTooLarge,
   workOrderExtraDocsAcceptAttribute,
+  type WorkOrderMediaKindCounts,
 } from "@/domain/work-orders/utils/work-order-media-limits";
 
 const FILETYPE_ICON: Record<FileCategory, typeof ImageIcon> = {
@@ -53,11 +57,16 @@ type SlideOverExtrasTabProps = {
   pending?: boolean;
   avetaRequired?: boolean;
   workOrderId?: string | number;
+  /** Photos/videos on the whole work order; Extra Docs shows only its own share. */
+  mediaCounts?: WorkOrderMediaKindCounts;
   onUpload: (files: File[]) => void;
   onRemove: (id: string) => void;
   onCategorize?: (id: string, category: UploadableMediaCategory) => void;
 };
 
+const UNSUPPORTED_TYPE_MESSAGE =
+  "Unsupported file type. Photos: JPG, PNG, HEIC. Videos: MP4, MOV. Documents: PDF, DOC.";
+
 async function openExtraDocContent(workOrderId: string | number, mediaId: string): Promise<void> {
   const tab = window.open("about:blank", "_blank");
   if (!tab) {
@@ -176,27 +185,35 @@ export function SlideOverExtrasTab({
   pending = false,
   avetaRequired = false,
   workOrderId,
+  mediaCounts,
   onUpload,
   onRemove,
   onCategorize,
 }: SlideOverExtrasTabProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const avetaAttached = hasExplicitAvetaFile(uploads);
+  const screeningRef = useRef(false);
+  const [screening, setScreening] = useState(false);
+  const busy = pending || screening;
 
-  const addFiles = (files: FileList | null) => {
-    if (isReadOnly || pending || !files || files.length === 0) return;
-    const accepted: File[] = [];
-    for (const file of Array.from(files)) {
-      if (!isWorkOrderExtraDocTypeAllowed(file)) {
-        toast.error(`"${file.name}" is not a supported type (JPG, PNG, MP4, MOV, PDF, DOC).`);
-        continue;
-      }
-      if (isWorkOrderFileTooLarge(file)) {
-        toast.error(`"${file.name}" exceeds the ${formatMediaSizeLimit()} limit.`);
-        continue;
-      }
-      accepted.push(file);
+  const addFiles = async (files: FileList | null) => {
+    if (isReadOnly || pending || screeningRef.current || !files || files.length === 0) return;
+    const selected = Array.from(files);
+    screeningRef.current = true;
+    setScreening(true);
+    let screened: WorkOrderUploadScreenResult;
+    try {
+      screened = await screenWorkOrderUploads(selected, {
+        existing: mediaCounts ?? countWorkOrderMediaKinds(uploads),
+        isTypeAllowed: isWorkOrderExtraDocTypeAllowed,
+        unsupportedTypeMessage: UNSUPPORTED_TYPE_MESSAGE,
+      });
+    } finally {
+      screeningRef.current = false;
+      setScreening(false);
     }
+    const { accepted, rejections } = screened;
+    for (const message of rejections) toast.error(message);
     if (accepted.length > 0) {
       onUpload(accepted);
     }
@@ -228,12 +245,12 @@ export function SlideOverExtrasTab({
         <>
           <button
             type="button"
-            disabled={pending}
+            disabled={busy}
             onClick={() => inputRef.current?.click()}
             onDragOver={(event) => event.preventDefault()}
             onDrop={(event) => {
               event.preventDefault();
-              addFiles(event.dataTransfer.files);
+              void addFiles(event.dataTransfer.files);
             }}
             className="flex w-full flex-col items-center justify-center gap-1.5 transition-colors hover:bg-(--color-bg-muted) disabled:opacity-60"
             style={{
@@ -245,13 +262,13 @@ export function SlideOverExtrasTab({
             <Upload size={20} style={{ color: "var(--color-text-muted)" }} />
             <span
               style={{ fontSize: 13, color: "var(--color-text-muted)" }}
-              aria-busy={pending || undefined}
+              aria-busy={busy || undefined}
             >
-              {pending ? "Uploading…" : "Upload documents, photos or videos"}
+              {busy ? "Uploading…" : "Upload documents, photos or videos"}
             </span>
             <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
-              Accepted: JPG, PNG, MP4, MOV, PDF, DOC · Max {formatMediaSizeLimit().replace(" ", "")}{" "}
-              per file
+              Accepted: JPG, PNG, HEIC, MP4, MOV, PDF, DOC · Photos up to 10 MB · Videos up to 100
+              MB and 90 s · Docs up to 50 MB
             </span>
           </button>
           <input
@@ -260,9 +277,9 @@ export function SlideOverExtrasTab({
             accept={workOrderExtraDocsAcceptAttribute()}
             multiple
             hidden
-            disabled={pending}
+            disabled={busy}
             onChange={(event) => {
-              addFiles(event.target.files);
+              void addFiles(event.target.files);
               event.target.value = "";
             }}
           />

src/app/(protected)/workorders/_components/detail/tabs/slide-over-uplifts-tab.tsx

@@ -22,6 +22,7 @@ import {
   isWorkOrderUpliftsReadOnly,
   upliftRevokeRequiresReason,
 } from "@/domain/work-orders/utils/uplift-display-utils";
+import { isAdminUser } from "@/lib/auth/user-utils";
 import { useAuthContext } from "@/providers/auth-context";
 
 type RevokeTarget = {
@@ -153,6 +154,7 @@ export function SlideOverUpliftsTab({
             uplift={uplift}
             readOnly={readOnly}
             currentUserId={user?.id}
+            currentUserIsAdmin={isAdminUser(user?.userRoles)}
             pendingAction={actionPending}
             onCancel={readOnly ? undefined : () => setCancelTargetId(uplift.id)}
             onRevoke={() =>

src/app/(protected)/workorders/_components/detail/use-slide-over-media-state.ts

@@ -17,6 +17,7 @@ import {
   isExtrasSurfaceMedia,
   type MediaSurfaceOwnership,
 } from "@/domain/work-orders/utils/partition-slide-over-media";
+import { countWorkOrderMediaKinds } from "@/domain/work-orders/utils/work-order-media-limits";
 
 type UseSlideOverMediaStateArgs = {
   detailForRow?: WorkOrderBoardDetail;
@@ -130,6 +131,8 @@ export function useSlideOverMediaState({
     [detailForRow?.media, ownership, completionHasGallery],
   );
 
+  const mediaCounts = useMemo(() => countWorkOrderMediaKinds(uploads), [uploads]);
+
   const hasLocalUploading = uploads.some((item) => item.uploadStatus === "uploading");
   const mediaPending =
     mediaBatchPending ||
@@ -196,6 +199,7 @@ export function useSlideOverMediaState({
   return {
     completionMedia,
     extrasUploads,
+    mediaCounts,
     mediaPending,
     uploadMediaRequests,
     uploadExtraFiles,

src/app/(protected)/workorders/_components/detail/use-work-order-slide-over.ts

@@ -118,6 +118,7 @@ export function useWorkOrderSlideOver({
   const {
     completionMedia,
     extrasUploads,
+    mediaCounts,
     mediaPending,
     uploadMediaRequests,
     uploadExtraFiles,
@@ -174,6 +175,7 @@ export function useWorkOrderSlideOver({
     ...readFlags,
     completionMedia,
     extrasUploads,
+    mediaCounts,
     mediaPending,
     completionPending,
     closeDisabled,

src/app/(protected)/workorders/_components/detail/work-order-slide-over-tabs.tsx

@@ -156,6 +156,7 @@ export function WorkOrderSlideOverTabs({
             isReadOnly={state.isDocumentsReadOnly}
             completion={state.detailForRow?.completion}
             media={state.completionMedia}
+            mediaCounts={state.mediaCounts}
             mediaPending={state.mediaPending}
             completionPending={state.completionPending}
             onUploadMedia={(requests) => {
@@ -191,6 +192,7 @@ export function WorkOrderSlideOverTabs({
         >
           <SlideOverExtrasTab
             uploads={state.extrasUploads}
+            mediaCounts={state.mediaCounts}
             workOrderId={infoSource?.id}
             avetaRequired={resolveSlideOverAvetaRequired(
               state.editing,

src/app/(protected)/workorders/_components/list/advanced-search/adv-date-range-section.tsx

@@ -27,7 +27,12 @@ export function AdvDateRangeSection({ draft, setDraft }: AdvDateRangeSectionProp
             key={option.key}
             label={option.label}
             selected={draft.dateRange === option.key}
-            onClick={() => setDraft((prev) => ({ ...prev, dateRange: option.key }))}
+            onClick={() =>
+              setDraft((prev) => ({
+                ...prev,
+                dateRange: prev.dateRange === option.key ? null : option.key,
+              }))
+            }
           />
         ))}
         <AdvFilterPill

src/app/(protected)/workorders/_components/list/advanced-search/adv-filter-sections.tsx

@@ -109,7 +109,11 @@ export function AdvancedSearchFilterSections({
         />
       </AdvSection>
 
-      <AdvSection icon={CheckCircle2} label="Status" count={draft.statuses.size}>
+      <AdvSection
+        icon={CheckCircle2}
+        label="Status"
+        count={draft.statuses.size + (draft.pastDue ? 1 : 0)}
+      >
         {selectAllRow("statuses", [...ALL_WIZARD_STATUSES], draft.statuses.size)}
         <div className="flex flex-wrap gap-1.5">
           {ALL_WIZARD_STATUSES.map((status) => (
@@ -122,6 +126,14 @@ export function AdvancedSearchFilterSections({
               onClick={() => toggleIn("statuses", status)}
             />
           ))}
+          <AdvStatusPill
+            label="Past Due"
+            dotColor="var(--status-pastdue-text)"
+            selected={draft.pastDue}
+            selectedBg="var(--status-pastdue-bg)"
+            selectedText="var(--status-pastdue-text)"
+            onClick={() => setDraft((prev) => ({ ...prev, pastDue: !prev.pastDue }))}
+          />
         </div>
       </AdvSection>
 

src/app/(protected)/workorders/_components/list/table/cells/site-dialog-helpers.ts

@@ -1,5 +1,5 @@
 import type { Location } from "@/domain/locations/types/location";
-import { formatLocationAddressPreview } from "@/domain/locations/mappers/location-mapper";
+import { buildSiteMapsUrl } from "@/domain/locations/utils/site-maps";
 import { resolveSiteCode } from "@/domain/work-orders/mappers/work-order-board-mapper";
 import type { LocationOption } from "@/domain/work-orders/types/work-order";
 
@@ -40,6 +40,5 @@ export function resolveLocationId(
 }
 
 export function buildMapsUrl(location: Location): string {
-  const query = formatLocationAddressPreview(location);
-  return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`;
+  return buildSiteMapsUrl(location);
 }

src/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells.tsx

@@ -114,6 +114,9 @@ export function WoTableRowServiceCells({
           value={row.completedDate}
           q={search}
           onSave={(date) => onPatchRow({ completedDate: date })}
+          onClear={
+            row.completedDate && !viewOnly ? () => onPatchRow({ completedDate: "" }) : undefined
+          }
         />
       </td>
       <td style={{ padding: "0 14px" }} onClick={(e) => e.stopPropagation()}>

src/app/(protected)/workorders/_components/media/media-uploader-dropzone.tsx

@@ -1,7 +1,11 @@
 import type { RefObject } from "react";
 import { Upload } from "lucide-react";
 import {
-  formatMediaSizeLimit,
+  MAX_PHOTOS_PER_WORK_ORDER,
+  MAX_VIDEOS_PER_WORK_ORDER,
+  MAX_VIDEO_DURATION_SECONDS,
+  MAX_WORK_ORDER_PHOTO_BYTES,
+  MAX_WORK_ORDER_VIDEO_BYTES,
   workOrderMediaAcceptAttribute,
 } from "@/domain/work-orders/utils/work-order-media-limits";
 
@@ -12,6 +16,12 @@ type MediaUploaderDropzoneProps = {
   onFilesSelected: (files: FileList | null) => void;
 };
 
+function mediaContractHint(): string {
+  const photoLimit = Math.round(MAX_WORK_ORDER_PHOTO_BYTES / 1_000_000);
+  const videoLimit = Math.round(MAX_WORK_ORDER_VIDEO_BYTES / 1_000_000);
+  return `Photos up to ${photoLimit} MB (max ${MAX_PHOTOS_PER_WORK_ORDER}) · Videos up to ${videoLimit} MB and ${MAX_VIDEO_DURATION_SECONDS} s (max ${MAX_VIDEOS_PER_WORK_ORDER})`;
+}
+
 export function MediaUploaderDropzone({
   inputRef,
   pending,
@@ -41,7 +51,7 @@ export function MediaUploaderDropzone({
           {pending ? "Uploading…" : "Drag files here or click to browse"}
         </span>
         <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
-          Accepted: JPG, PNG, MP4, MOV · Max {formatMediaSizeLimit().replace(" ", "")} per file
+          Accepted: JPG, PNG, HEIC, MP4, MOV · {mediaContractHint()}
           {categorizeAfterUpload ? " · categorize after upload" : ""}
         </span>
       </button>

src/app/(protected)/workorders/_components/media/media-uploader.tsx

@@ -1,14 +1,18 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { toast } from "react-toastify";
 import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
 import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
 import {
   canDeleteWorkOrderMedia,
-  formatMediaSizeLimit,
-  isWorkOrderFileTooLarge,
+  countWorkOrderMediaKinds,
   isWorkOrderMediaTypeAllowed,
+  type WorkOrderMediaKindCounts,
 } from "@/domain/work-orders/utils/work-order-media-limits";
 import { makeMediaFile } from "@/domain/work-orders/utils/work-order-media-utils";
+import {
+  screenWorkOrderUploads,
+  type WorkOrderUploadScreenResult,
+} from "@/domain/work-orders/utils/screen-work-order-uploads";
 import { MediaUploaderDropzone } from "./media-uploader-dropzone";
 import { MediaUploaderGrid } from "./media-uploader-grid";
 
@@ -30,8 +34,12 @@ type MediaUploaderProps = {
   onChange?: (next: MediaFile[]) => void;
   readOnly?: boolean;
   pending?: boolean;
+  /** Photos/videos on the whole work order when `uploads` is only one surface's share. */
+  mediaCounts?: WorkOrderMediaKindCounts;
 };
 
+const UNSUPPORTED_TYPE_MESSAGE = "Unsupported file type. Photos: JPG, PNG, HEIC. Videos: MP4, MOV.";
+
 export function MediaUploader({
   uploads,
   onUpload,
@@ -42,24 +50,31 @@ export function MediaUploader({
   onChange,
   readOnly = false,
   pending = false,
+  mediaCounts,
 }: MediaUploaderProps) {
   const inputRef = useRef<HTMLInputElement>(null);
+  const screeningRef = useRef(false);
+  const [screening, setScreening] = useState(false);
 
-  const addFiles = (files: FileList | null) => {
-    if (readOnly || pending || !files || files.length === 0) return;
+  const addFiles = async (files: FileList | null) => {
+    if (readOnly || pending || screeningRef.current || !files || files.length === 0) return;
 
-    const accepted: File[] = [];
-    for (const file of Array.from(files)) {
-      if (!isWorkOrderMediaTypeAllowed(file)) {
-        toast.error(`"${file.name}" is not a supported type (JPG, PNG, MP4, MOV).`);
-        continue;
-      }
-      if (isWorkOrderFileTooLarge(file)) {
-        toast.error(`"${file.name}" exceeds the ${formatMediaSizeLimit()} limit.`);
-        continue;
-      }
-      accepted.push(file);
+    const selected = Array.from(files);
+    screeningRef.current = true;
+    setScreening(true);
+    let screened: WorkOrderUploadScreenResult;
+    try {
+      screened = await screenWorkOrderUploads(selected, {
+        existing: mediaCounts ?? countWorkOrderMediaKinds(uploads),
+        isTypeAllowed: isWorkOrderMediaTypeAllowed,
+        unsupportedTypeMessage: UNSUPPORTED_TYPE_MESSAGE,
+      });
+    } finally {
+      screeningRef.current = false;
+      setScreening(false);
     }
+    const { accepted, rejections } = screened;
+    for (const message of rejections) toast.error(message);
     if (accepted.length === 0) return;
 
     if (onUpload) {
@@ -93,9 +108,9 @@ export function MediaUploader({
       {!readOnly && (
         <MediaUploaderDropzone
           inputRef={inputRef}
-          pending={pending}
+          pending={pending || screening}
           categorizeAfterUpload={Boolean(onCategorize)}
-          onFilesSelected={addFiles}
+          onFilesSelected={(files) => void addFiles(files)}
         />
       )}
       <MediaUploaderGrid

src/app/(protected)/workorders/_components/uplifts/work-order-uplift-list-item.tsx

@@ -41,6 +41,7 @@ type WorkOrderUpliftListItemProps = {
   uplift: WorkOrderUplift;
   readOnly: boolean;
   currentUserId: string | number | null | undefined;
+  currentUserIsAdmin: boolean;
   pendingAction?: boolean;
   onCancel?: () => void;
   onRevoke?: () => void;
@@ -147,13 +148,15 @@ function UpliftCardActions({
   uplift,
   readOnly,
   currentUserId,
+  currentUserIsAdmin,
   pendingAction,
   onCancel,
   onRevoke,
 }: WorkOrderUpliftListItemProps) {
   const nowMs = useUpliftClock();
   const showCancel = !readOnly && uplift.status === "pending" && Boolean(onCancel);
-  const showRevoke = canRevokeWorkOrderUplift(uplift, currentUserId) && Boolean(onRevoke);
+  const showRevoke =
+    canRevokeWorkOrderUplift(uplift, currentUserId, currentUserIsAdmin) && Boolean(onRevoke);
   const revokeBlocked = readOnly || pendingAction;
 
   return (

src/app/(protected)/workorders/_components/wizard/wizard-step-location-site-details.tsx

@@ -3,13 +3,9 @@ import { Text } from "@/components/ui/text";
 import type { LocationOption } from "@/domain/work-orders/types/work-order";
 import type { Location } from "@/domain/locations/types/location";
 import { formatLocationAddressPreview } from "@/domain/locations/mappers/location-mapper";
+import { buildSiteMapsUrl } from "@/domain/locations/utils/site-maps";
 import { Detail } from "@/app/(protected)/workorders/_components/wizard/wizard-labels";
 
-function buildMapsUrl(location: Location): string {
-  const query = formatLocationAddressPreview(location);
-  return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`;
-}
-
 type WizardStepLocationSiteDetailsProps = {
   selectedLoc: LocationOption | undefined;
   locationName: string;
@@ -58,7 +54,7 @@ export function WizardStepLocationSiteDetails({
           )}
           {Boolean(addressPreview) && (
             <a
-              href={buildMapsUrl(locationDetail)}
+              href={buildSiteMapsUrl(locationDetail)}
               target="_blank"
               rel="noreferrer"
               className="inline-flex items-center gap-1.5 text-[12px] hover:underline"

src/app/(protected)/workorders/_hooks/use-work-orders-list-filters.ts

@@ -6,9 +6,9 @@ import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
 import type { WorkOrderBoardQueryParams } from "@/domain/work-orders/types/work-order-board";
 import {
   clearAdvancedFilterGroup,
-  cloneAdvancedFilters,
   countAdvancedFilters,
   getInitialAdvancedFilters,
+  resolveAppliedAdvancedFilters,
 } from "@/domain/work-orders/utils/advanced-filters-utils";
 import { toBoardQueryParams } from "@/domain/work-orders/utils/board-query-params";
 import { asDayPageSize, DEFAULT_DAY_PAGE_SIZE } from "@/domain/work-orders/utils/day-pagination";
@@ -90,7 +90,7 @@ export function useWorkOrdersListFilters() {
   };
 
   const applyAdvancedFilters = (filters: WorkOrderAdvancedFilters) => {
-    setAdvApplied(cloneAdvancedFilters(filters));
+    setAdvApplied(resolveAppliedAdvancedFilters(filters));
     setPage(0);
   };
 

src/app/invite/_components/invite-code-step.tsx

@@ -0,0 +1,100 @@
+import { useForm, useWatch } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Box } from "@mui/material";
+
+import { Button } from "@/components/ui/button";
+import { FormField } from "@/components/ui/form-field";
+import { Text } from "@/components/ui/text";
+import { TextField } from "@/components/ui/text-field";
+import {
+  inviteCodeStepSchema,
+  type InviteCodeStepValues,
+} from "@/domain/team-member-invite/schemas/invite-registration-schema";
+
+import { InviteStepHeader } from "./invite-step-header";
+
+export type InviteCodeStepProps = {
+  email: string;
+  isVerifying: boolean;
+  isResending: boolean;
+  /** Why the entered code was refused; shown under the field. */
+  codeError: string | null;
+  /** Why a new code could not be sent. */
+  resendError: string | null;
+  onVerify: (code: string) => void;
+  onResend: () => void;
+  onCodeChange: () => void;
+};
+
+export function InviteCodeStep({
+  email,
+  isVerifying,
+  isResending,
+  codeError,
+  resendError,
+  onVerify,
+  onResend,
+  onCodeChange,
+}: InviteCodeStepProps) {
+  const { register, handleSubmit, control } = useForm<InviteCodeStepValues>({
+    resolver: zodResolver(inviteCodeStepSchema),
+    defaultValues: { code: "" },
+  });
+
+  const values = useWatch({ control });
+  const canContinue = inviteCodeStepSchema.safeParse(values).success;
+  const codeField = register("code", { onChange: onCodeChange });
+
+  return (
+    <Box
+      component="form"
+      aria-label="Confirm your email"
+      onSubmit={handleSubmit((form) => onVerify(form.code))}
+      className="flex flex-col gap-4"
+    >
+      <InviteStepHeader
+        step={2}
+        title="Confirm your email"
+        subtitle={`Enter the 6-digit code sent to ${email}`}
+      />
+
+      <FormField
+        label="Confirmation code"
+        htmlFor="invite-code"
+        required
+        appearance="auth"
+        error={codeError !== null}
+        helperText={codeError ?? undefined}
+      >
+        <TextField
+          {...codeField}
+          id="invite-code"
+          placeholder="123456"
+          autoComplete="one-time-code"
+          error={codeError !== null}
+          slotProps={{ htmlInput: { inputMode: "numeric", maxLength: 6 } }}
+        />
+      </FormField>
+
+      <div className="flex flex-col items-start gap-1">
+        <Button type="button" variant="link" onClick={onResend} disabled={isResending}>
+          Resend code
+        </Button>
+        <Text variant="error" when={resendError !== null}>
+          {resendError}
+        </Text>
+      </div>
+
+      <Button
+        type="submit"
+        fullWidth
+        size="lg"
+        disabled={!canContinue}
+        loading={isVerifying}
+        loadingText="Checking code…"
+      >
+        Continue
+      </Button>
+    </Box>
+  );
+}

src/app/invite/_components/invite-password-step.tsx

@@ -0,0 +1,101 @@
+import { useForm, useWatch } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Box } from "@mui/material";
+
+import { PasswordChecklist } from "@/components/auth/password-checklist";
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+import { FormField } from "@/components/ui/form-field";
+import { PasswordField } from "@/components/ui/password-field";
+import {
+  invitePasswordStepSchema,
+  type InvitePasswordStepValues,
+} from "@/domain/team-member-invite/schemas/invite-registration-schema";
+
+import { InviteStepHeader } from "./invite-step-header";
+
+export type InvitePasswordStepProps = {
+  name: string;
+  defaultPassword: string;
+  isSubmitting: boolean;
+  error: string | null;
+  onContinue: (password: string) => void;
+};
+
+export function InvitePasswordStep({
+  name,
+  defaultPassword,
+  isSubmitting,
+  error,
+  onContinue,
+}: InvitePasswordStepProps) {
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm<InvitePasswordStepValues>({
+    resolver: zodResolver(invitePasswordStepSchema),
+    defaultValues: { password: defaultPassword, confirmPassword: defaultPassword },
+    mode: "onTouched",
+  });
+
+  const values = useWatch({ control });
+  const canContinue = invitePasswordStepSchema.safeParse(values).success;
+
+  return (
+    <Box
+      component="form"
+      aria-label="Create your password"
+      onSubmit={handleSubmit((form) => onContinue(form.password))}
+      className="flex flex-col gap-4"
+    >
+      <InviteStepHeader
+        step={1}
+        title="Create your password"
+        subtitle={`Setting up the account for ${name}`}
+      />
+
+      <FormField label="Password" htmlFor="invite-password" required appearance="auth">
+        <PasswordField
+          {...register("password")}
+          id="invite-password"
+          autoComplete="new-password"
+          slotProps={{ htmlInput: { "aria-describedby": "invite-password-rules" } }}
+        />
+        <PasswordChecklist id="invite-password-rules" password={values.password ?? ""} />
+      </FormField>
+
+      <FormField
+        label="Confirm password"
+        htmlFor="invite-confirm-password"
+        required
+        appearance="auth"
+        error={Boolean(errors.confirmPassword)}
+        helperText={errors.confirmPassword?.message}
+      >
+        <PasswordField
+          {...register("confirmPassword")}
+          id="invite-confirm-password"
+          autoComplete="new-password"
+          error={Boolean(errors.confirmPassword)}
+        />
+      </FormField>
+
+      <Text variant="error" when={error !== null}>
+        {error}
+      </Text>
+
+      <Button
+        type="submit"
+        fullWidth
+        size="lg"
+        disabled={!canContinue}
+        loading={isSubmitting}
+        loadingText="Sending code…"
+      >
+        Continue
+      </Button>
+    </Box>
+  );
+}

src/app/invite/_components/invite-review-step.tsx

@@ -0,0 +1,100 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Box } from "@mui/material";
+import { CircleCheck } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { FormField } from "@/components/ui/form-field";
+import { Text } from "@/components/ui/text";
+import { TextField } from "@/components/ui/text-field";
+import {
+  inviteReviewStepSchema,
+  type InviteReviewStepValues,
+} from "@/domain/team-member-invite/schemas/invite-registration-schema";
+import type { TeamMemberInviteDetails } from "@/domain/team-member-invite/types/team-member-invite";
+
+import { InviteStepHeader } from "./invite-step-header";
+
+export type InviteReviewStepProps = {
+  details: TeamMemberInviteDetails;
+  isFinishing: boolean;
+  error: string | null;
+  onFinish: (phone: string) => void;
+};
+
+function ReadOnlyValue({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <Text variant="label" className="block">
+        {label}
+      </Text>
+      <Text variant="body" className="m-0 text-(length:--text-base-sm)">
+        {value}
+      </Text>
+    </div>
+  );
+}
+
+export function InviteReviewStep({ details, isFinishing, error, onFinish }: InviteReviewStepProps) {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<InviteReviewStepValues>({
+    resolver: zodResolver(inviteReviewStepSchema),
+    defaultValues: { phone: details.phone ?? "" },
+    mode: "onTouched",
+  });
+
+  return (
+    <Box
+      component="form"
+      aria-label="Review your info"
+      onSubmit={handleSubmit((form) => onFinish(form.phone))}
+      className="flex flex-col gap-4"
+    >
+      <InviteStepHeader
+        step={3}
+        title="Review your info"
+        subtitle="Name, role, and email are set by your admin — contact them to change these."
+      />
+
+      <div className="grid gap-3">
+        <ReadOnlyValue label="Name" value={details.name} />
+        <ReadOnlyValue label="Role" value={details.role} />
+        <ReadOnlyValue label="Email" value={details.email} />
+        <FormField
+          label="Phone"
+          htmlFor="invite-phone"
+          appearance="auth"
+          error={Boolean(errors.phone)}
+          helperText={errors.phone?.message}
+        >
+          <TextField
+            {...register("phone")}
+            id="invite-phone"
+            type="tel"
+            autoComplete="tel"
+            placeholder="(000) 000-0000"
+            error={Boolean(errors.phone)}
+          />
+        </FormField>
+      </div>
+
+      <Text variant="error" when={error !== null}>
+        {error}
+      </Text>
+
+      <Button
+        type="submit"
+        fullWidth
+        size="lg"
+        loading={isFinishing}
+        loadingText="Finishing…"
+        startIcon={<CircleCheck size={15} aria-hidden="true" />}
+      >
+        Finish registration
+      </Button>
+    </Box>
+  );
+}