From ebc2e9a1e56eb3686d3a526034231d9d88baf0a7 Mon Sep 17 00:00:00 2001
From: Arthur Bassi <201806768+bassi-arthurr@users.noreply.github.com>
Date: Mon, 10 Aug 2026 17:12:09 -0300
Subject: [PATCH 01/17] fix(work-orders): extract inline dialog state and
 enable Schedule On clear

[recover] remove malicious eslint payload (was 552c2daf)
---
 .../table/build-inline-draft-create-input.ts  |   7 +-
 .../list/table/cells/date-cell.tsx            |  18 +++
 .../list/table/cells/site-cell.tsx            |  14 +-
 .../table/cells/site-dialog-poc-fields.tsx    |  76 +++++++---
 .../list/table/cells/site-dialog.tsx          | 143 ++++++------------
 .../list/table/cells/use-site-dialog-state.ts | 136 +++++++++++++++++
 .../list/table/inline-create-field.tsx        |  32 ++++
 .../table/wo-table-inline-identity-cells.tsx  |  82 ++++++++++
 .../table/wo-table-inline-row-actions.tsx     |  11 +-
 .../list/table/wo-table-inline-row-cells.tsx  |  66 ++++----
 .../list/table/wo-table-inline-row.tsx        |  87 +++++++----
 .../_hooks/use-work-orders-table-ui-state.ts  |   8 +-
 .../mappers/assign-wizard-schedule-fields.ts  |   4 +-
 .../utils/get-inline-create-missing.ts        |  62 ++++++++
 .../build-inline-draft-create-input.test.ts   |  55 +++++++
 .../mappers/work-order-board-mapper.test.ts   |  15 ++
 .../utils/get-inline-create-missing.test.ts   |  82 ++++++++++
 17 files changed, 709 insertions(+), 189 deletions(-)
 create mode 100644 src/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state.ts
 create mode 100644 src/app/(protected)/workorders/_components/list/table/inline-create-field.tsx
 create mode 100644 src/app/(protected)/workorders/_components/list/table/wo-table-inline-identity-cells.tsx
 create mode 100644 src/domain/work-orders/utils/get-inline-create-missing.ts
 create mode 100644 src/test/app/(protected)/workorders/build-inline-draft-create-input.test.ts
 create mode 100644 src/test/domain/work-orders/utils/get-inline-create-missing.test.ts

diff --git a/src/app/(protected)/workorders/_components/list/table/build-inline-draft-create-input.ts b/src/app/(protected)/workorders/_components/list/table/build-inline-draft-create-input.ts
index 53c2f381..0edec077 100644
--- a/src/app/(protected)/workorders/_components/list/table/build-inline-draft-create-input.ts
+++ b/src/app/(protected)/workorders/_components/list/table/build-inline-draft-create-input.ts
@@ -12,12 +12,15 @@ export function buildInlineDraftCreateInput(
   const location = sites.find((s) => String(s.id) === String(draft.locationId));
   const locationName = draft.location || draft.site || location?.name || "";
 
+  const hasWeekTarget = Boolean(draft.targetWeek?.trim());
+  const scheduleWeekOnly = draft.scheduleWeekOnly && (hasWeekTarget || Boolean(draft.scheduledOn));
+
   return {
     locationId: String(draft.locationId || ""),
     locationName,
     siteCode: location ? resolveSiteCode(location) : resolveSiteCode({ name: locationName }),
     woNumber: draft.woNumber,
-    type: draft.type,
+    type: draft.type || "PM",
     assigneeId: draft.dispatcherId,
     assigneeName: assignee?.name ?? "",
     scheduledOn: draft.scheduledOn,
@@ -35,7 +38,7 @@ export function buildInlineDraftCreateInput(
     pocName: draft.pocName,
     pocPhone: draft.pocPhone,
     pocNotes: draft.pocNotes,
-    scheduleWeekOnly: draft.scheduleWeekOnly,
+    scheduleWeekOnly,
     targetWeek: draft.targetWeek || "",
   };
 }
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/date-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/date-cell.tsx
index 417ffe22..6d78143e 100644
--- a/src/app/(protected)/workorders/_components/list/table/cells/date-cell.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/cells/date-cell.tsx
@@ -15,6 +15,8 @@ type DateCellProps = {
   targetWeek?: string;
   onSaveWeek?: (weekStart: string) => void;
   defaultMode?: "week" | "date";
+  /** When set, shows Clear in the popover so schedule can be removed (e.g. day-group → Unscheduled). */
+  onClear?: () => void;
 };
 
 export function DateCell({
@@ -26,6 +28,7 @@ export function DateCell({
   targetWeek = "",
   onSaveWeek,
   defaultMode,
+  onClear,
 }: DateCellProps) {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [cellMode, setCellMode] = useState<"week" | "date">(
@@ -132,6 +135,21 @@ export function DateCell({
             }}
           />
         )}
+        {Boolean(onClear) && (
+          <div className="mt-2.5 flex justify-end border-t border-border pt-2">
+            <button
+              type="button"
+              onClick={() => {
+                onClear?.();
+                setAnchorEl(null);
+              }}
+              className="text-[11.5px] font-medium transition-colors"
+              style={{ color: "var(--color-text-muted)" }}
+            >
+              × Clear
+            </button>
+          </div>
+        )}
       </Popover>
     </>
   );
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/site-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/site-cell.tsx
index 939b4ce4..89a703f6 100644
--- a/src/app/(protected)/workorders/_components/list/table/cells/site-cell.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/cells/site-cell.tsx
@@ -17,6 +17,8 @@ type SiteCellProps = {
   pocNotes?: string;
   sites: LocationOption[];
   q?: string;
+  /** Inline create: editable POC + Site/POC required to confirm the modal. */
+  createMode?: boolean;
   onSave: (patch: SitePatch) => void;
 };
 
@@ -31,6 +33,7 @@ export function SiteCell({
   pocNotes,
   sites,
   q,
+  createMode = false,
   onSave,
 }: SiteCellProps) {
   const [open, setOpen] = useState(false);
@@ -70,7 +73,15 @@ export function SiteCell({
             )}
           </span>
         ) : (
-          <span className="text-[12.5px] text-[var(--color-text-muted)]">—</span>
+          <span className="text-[12.5px] text-[var(--color-text-muted)]">
+            {createMode ? (
+              <>
+                Site <span style={{ color: "var(--destructive)" }}>*</span>
+              </>
+            ) : (
+              "—"
+            )}
+          </span>
         )}
         <HoverChevron />
       </button>
@@ -83,6 +94,7 @@ export function SiteCell({
         pocPhone={pocPhone}
         pocNotes={pocNotes}
         sites={sites}
+        createMode={createMode}
         onSave={onSave}
       />
     </>
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-fields.tsx b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-fields.tsx
index 145250c2..61ca8f78 100644
--- a/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-fields.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-fields.tsx
@@ -9,37 +9,77 @@ type SiteDialogPocFieldsProps = {
   pocName: string;
   pocPhone: string;
   pocNotes: string;
+  editable?: boolean;
+  showErrors?: boolean;
+  onPocNameChange?: (value: string) => void;
+  onPocPhoneChange?: (value: string) => void;
+  onPocNotesChange?: (value: string) => void;
 };
 
-export function SiteDialogPocFields({ pocName, pocPhone, pocNotes }: SiteDialogPocFieldsProps) {
+export function SiteDialogPocFields({
+  pocName,
+  pocPhone,
+  pocNotes,
+  editable = false,
+  showErrors = false,
+  onPocNameChange,
+  onPocPhoneChange,
+  onPocNotesChange,
+}: SiteDialogPocFieldsProps) {
+  const nameMissing = showErrors && !pocName.trim();
+  const phoneMissing = showErrors && !pocPhone.trim();
+
   return (
     <div className="pt-1">
       <FieldLabel>Point of Contact</FieldLabel>
       <Text as="p" className="mb-2 text-[11px]" style={{ color: "var(--color-text-muted)" }}>
-        Shown from site/work order records. Board edit saves site code only.
+        {editable
+          ? "Auto-filled from records — edit if outdated"
+          : "Shown from site/work order records. Board edit saves site code only."}
       </Text>
       <div className="space-y-2">
-        <input
-          value={pocName}
-          readOnly
-          placeholder="POC name"
-          className={DLG_INPUT_CLS}
-          style={{ ...DLG_INPUT_STYLE, opacity: 0.85 }}
-        />
-        <input
-          value={pocPhone}
-          readOnly
-          placeholder="POC phone"
-          className={DLG_INPUT_CLS}
-          style={{ ...DLG_INPUT_STYLE, opacity: 0.85 }}
-        />
+        <div>
+          <input
+            value={pocName}
+            readOnly={!editable}
+            placeholder="POC name"
+            className={DLG_INPUT_CLS}
+            style={{
+              ...DLG_INPUT_STYLE,
+              opacity: editable ? 1 : 0.85,
+              borderColor: nameMissing ? "var(--destructive)" : undefined,
+            }}
+            onChange={(e) => onPocNameChange?.(e.target.value)}
+          />
+          <Text as="p" variant="error" when={nameMissing} className="mt-1 text-[11px]">
+            Contact name is required
+          </Text>
+        </div>
+        <div>
+          <input
+            value={pocPhone}
+            readOnly={!editable}
+            placeholder="POC phone"
+            className={DLG_INPUT_CLS}
+            style={{
+              ...DLG_INPUT_STYLE,
+              opacity: editable ? 1 : 0.85,
+              borderColor: phoneMissing ? "var(--destructive)" : undefined,
+            }}
+            onChange={(e) => onPocPhoneChange?.(e.target.value)}
+          />
+          <Text as="p" variant="error" when={phoneMissing} className="mt-1 text-[11px]">
+            Contact phone is required
+          </Text>
+        </div>
         <textarea
           value={pocNotes}
-          readOnly
+          readOnly={!editable}
           placeholder="Notes…"
           rows={2}
           className={`${DLG_INPUT_CLS} resize-none`}
-          style={{ ...DLG_INPUT_STYLE, fontFamily: "inherit", opacity: 0.85 }}
+          style={{ ...DLG_INPUT_STYLE, fontFamily: "inherit", opacity: editable ? 1 : 0.85 }}
+          onChange={(e) => onPocNotesChange?.(e.target.value)}
         />
       </div>
     </div>
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/site-dialog.tsx b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog.tsx
index ece94799..12c17523 100644
--- a/src/app/(protected)/workorders/_components/list/table/cells/site-dialog.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog.tsx
@@ -1,30 +1,20 @@
-import { useEffect, useState, type MouseEvent } from "react";
+import type { MouseEvent } from "react";
 import { MapPin } from "lucide-react";
 import { Dialog, DialogContent, DialogTitle } from "@mui/material";
 import { WizardFieldSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select";
 import { Button } from "@/components/ui/button";
 import { Text } from "@/components/ui/text";
 import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
-import { formatLocationAddressPreview } from "@/domain/locations/mappers/location-mapper";
-import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
-import { resolveSiteCode } from "@/domain/work-orders/mappers/work-order-board-mapper";
 import type { LocationOption } from "@/domain/work-orders/types/work-order";
 import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
-import {
-  extractLocationLabel,
-  resolveLocationId,
-} from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-helpers";
 import { SiteDialogDetailPanel } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-detail-panel";
 import { SiteDialogPocFields } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-fields";
+import {
+  useSiteDialogState,
+  type SitePatch,
+} from "@/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state";
 
-export type SitePatch = {
-  site: string;
-  location: string;
-  locationId: string | number;
-  pocName: string;
-  pocPhone: string;
-  pocNotes: string;
-};
+export type { SitePatch };
 
 type SiteDialogProps = {
   open: boolean;
@@ -35,6 +25,7 @@ type SiteDialogProps = {
   pocPhone?: string;
   pocNotes?: string;
   sites: LocationOption[];
+  createMode?: boolean;
   onSave: (patch: SitePatch) => void;
 };
 
@@ -47,62 +38,26 @@ export function SiteDialog({
   pocPhone = "",
   pocNotes = "",
   sites,
+  createMode = false,
   onSave,
 }: SiteDialogProps) {
-  const [code, setCode] = useState(value);
-  const [locId, setLocId] = useState(() => resolveLocationId(locationId, value, sites));
-  const [pn, setPn] = useState(pocName);
-  const [pp, setPp] = useState(pocPhone);
-  const [notes, setNotes] = useState(pocNotes);
-  const [pocFilledFor, setPocFilledFor] = useState("");
-
-  const {
-    data: locationDetail,
-    isLoading: locationDetailLoading,
-    isError: locationDetailError,
-  } = useLocationDetail(open && locId ? locId : undefined);
-
-  const selected = sites.find((s) => String(s.id) === locId);
-  const addressPreview = locationDetail ? formatLocationAddressPreview(locationDetail) : "";
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    const resolved = resolveLocationId(locationId, value, sites);
-    setCode(value);
-    setLocId(resolved);
-    setPn(pocName);
-    setPp(pocPhone);
-    setNotes(pocNotes);
-    // Preserve existing WO POC; allow one auto-fill from site detail when POC is empty.
-    setPocFilledFor(pocName.trim() || pocPhone.trim() ? resolved : "");
-  }, [open, value, locationId, pocName, pocPhone, pocNotes, sites]);
-
-  useEffect(() => {
-    if (!open || !locId || !locationDetail || pocFilledFor === locId) {
-      return;
-    }
-    setPn(locationDetail.contact ?? "");
-    setPp(locationDetail.phone ?? "");
-    setPocFilledFor(locId);
-  }, [open, locId, locationDetail, pocFilledFor]);
-
-  const handlePick = (id: string) => {
-    const next = sites.find((s) => String(s.id) === id);
-    setLocId(id);
-    if (next) {
-      setCode(resolveSiteCode(next));
-    }
-    if (id !== pocFilledFor) {
-      setPocFilledFor("");
-    }
-  };
+  const s = useSiteDialogState({
+    open,
+    onOpenChange,
+    value,
+    locationId,
+    pocName,
+    pocPhone,
+    pocNotes,
+    sites,
+    createMode,
+    onSave,
+  });
 
   return (
     <Dialog
       open={open}
-      onClose={() => onOpenChange(false)}
+      onClose={s.close}
       maxWidth={false}
       slotProps={{
         ...dialogBlurBackdropSlotProps,
@@ -125,7 +80,7 @@ export function SiteDialog({
           <div>
             <FieldLabel>Site</FieldLabel>
             <WizardFieldSelect
-              value={locId}
+              value={s.locId}
               placeholder="Select site …"
               icon={
                 <MapPin
@@ -139,45 +94,45 @@ export function SiteDialog({
                 key: String(site.id),
                 label: site.name,
               }))}
-              onPick={handlePick}
+              onPick={s.handlePick}
             />
+            <Text
+              as="p"
+              variant="error"
+              when={Boolean(createMode && s.showErrors && s.siteMissing)}
+              className="mt-1 text-[11px]"
+            >
+              Site is required
+            </Text>
           </div>
 
-          {Boolean(locId) && (
+          {Boolean(s.locId) && (
             <SiteDialogDetailPanel
-              locationDetail={locationDetail}
-              locationDetailLoading={locationDetailLoading}
-              locationDetailError={locationDetailError}
-              addressPreview={addressPreview}
-              fallbackLabel={selected?.name || code || "—"}
+              locationDetail={s.locationDetail}
+              locationDetailLoading={s.locationDetailLoading}
+              locationDetailError={s.locationDetailError}
+              addressPreview={s.addressPreview}
+              fallbackLabel={s.selected?.name || s.code || "—"}
             />
           )}
 
-          <SiteDialogPocFields pocName={pn} pocPhone={pp} pocNotes={notes} />
+          <SiteDialogPocFields
+            pocName={s.pn}
+            pocPhone={s.pp}
+            pocNotes={s.notes}
+            editable={createMode}
+            showErrors={createMode && s.showErrors}
+            onPocNameChange={s.setPn}
+            onPocPhoneChange={s.setPp}
+            onPocNotesChange={s.setNotes}
+          />
         </div>
 
         <div className="mt-4 flex items-center justify-end gap-2">
-          <Button
-            variant="ghost"
-            className="min-h-0 px-2 py-1 text-[12px]"
-            onClick={() => onOpenChange(false)}
-          >
+          <Button variant="ghost" className="min-h-0 px-2 py-1 text-[12px]" onClick={s.close}>
             Cancel
           </Button>
-          <Button
-            className="min-h-0 px-3 py-1 text-[12px]"
-            onClick={() => {
-              onSave({
-                site: code || (selected ? resolveSiteCode(selected) : ""),
-                location: selected ? extractLocationLabel(selected) : "",
-                locationId: locId,
-                pocName: pn,
-                pocPhone: pp,
-                pocNotes: notes,
-              });
-              onOpenChange(false);
-            }}
-          >
+          <Button className="min-h-0 px-3 py-1 text-[12px]" onClick={s.attemptSave}>
             Save
           </Button>
         </div>
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state.ts b/src/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state.ts
new file mode 100644
index 00000000..7b943aad
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state.ts
@@ -0,0 +1,136 @@
+import { useEffect, useState } from "react";
+import { formatLocationAddressPreview } from "@/domain/locations/mappers/location-mapper";
+import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
+import { resolveSiteCode } from "@/domain/work-orders/mappers/work-order-board-mapper";
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+import {
+  extractLocationLabel,
+  resolveLocationId,
+} from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-helpers";
+
+export type SitePatch = {
+  site: string;
+  location: string;
+  locationId: string | number;
+  pocName: string;
+  pocPhone: string;
+  pocNotes: string;
+};
+
+type UseSiteDialogStateArgs = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  value: string;
+  locationId: string | number;
+  pocName: string;
+  pocPhone: string;
+  pocNotes: string;
+  sites: LocationOption[];
+  createMode: boolean;
+  onSave: (patch: SitePatch) => void;
+};
+
+export function useSiteDialogState({
+  open,
+  onOpenChange,
+  value,
+  locationId,
+  pocName,
+  pocPhone,
+  pocNotes,
+  sites,
+  createMode,
+  onSave,
+}: UseSiteDialogStateArgs) {
+  const [code, setCode] = useState(value);
+  const [locId, setLocId] = useState(() => resolveLocationId(locationId, value, sites));
+  const [pn, setPn] = useState(pocName);
+  const [pp, setPp] = useState(pocPhone);
+  const [notes, setNotes] = useState(pocNotes);
+  const [pocFilledFor, setPocFilledFor] = useState("");
+  const [showErrors, setShowErrors] = useState(false);
+
+  const {
+    data: locationDetail,
+    isLoading: locationDetailLoading,
+    isError: locationDetailError,
+  } = useLocationDetail(open && locId ? locId : undefined);
+
+  const selected = sites.find((s) => String(s.id) === locId);
+  const addressPreview = locationDetail ? formatLocationAddressPreview(locationDetail) : "";
+  const siteMissing = !locId;
+  const pocMissing = !pn.trim() || !pp.trim();
+  const canConfirm = !siteMissing && (!createMode || !pocMissing);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const resolved = resolveLocationId(locationId, value, sites);
+    setCode(value);
+    setLocId(resolved);
+    setPn(pocName);
+    setPp(pocPhone);
+    setNotes(pocNotes);
+    setShowErrors(false);
+    setPocFilledFor(pocName.trim() || pocPhone.trim() ? resolved : "");
+  }, [open, value, locationId, pocName, pocPhone, pocNotes, sites]);
+
+  useEffect(() => {
+    if (!open || !locId || !locationDetail || pocFilledFor === locId) {
+      return;
+    }
+    setPn(locationDetail.contact ?? "");
+    setPp(locationDetail.phone ?? "");
+    setPocFilledFor(locId);
+  }, [open, locId, locationDetail, pocFilledFor]);
+
+  const handlePick = (id: string) => {
+    const next = sites.find((s) => String(s.id) === id);
+    setLocId(id);
+    if (next) {
+      setCode(resolveSiteCode(next));
+    }
+    if (id !== pocFilledFor) {
+      setPocFilledFor("");
+    }
+  };
+
+  const attemptSave = () => {
+    if (createMode && !canConfirm) {
+      setShowErrors(true);
+      return;
+    }
+    onSave({
+      site: code || (selected ? resolveSiteCode(selected) : ""),
+      location: selected ? extractLocationLabel(selected) : "",
+      locationId: locId,
+      pocName: pn,
+      pocPhone: pp,
+      pocNotes: notes,
+    });
+    onOpenChange(false);
+  };
+
+  return {
+    locId,
+    pn,
+    pp,
+    notes,
+    showErrors,
+    locationDetail,
+    locationDetailLoading,
+    locationDetailError,
+    selected,
+    addressPreview,
+    siteMissing,
+    canConfirm,
+    code,
+    handlePick,
+    attemptSave,
+    setPn,
+    setPp,
+    setNotes,
+    close: () => onOpenChange(false),
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/inline-create-field.tsx b/src/app/(protected)/workorders/_components/list/table/inline-create-field.tsx
new file mode 100644
index 00000000..f7f8ce8a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/inline-create-field.tsx
@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import { Text } from "@/components/ui/text";
+
+type InlineCreateFieldProps = {
+  showError?: boolean;
+  error?: string;
+  children: ReactNode;
+};
+
+/** Bordered create-cell wrapper; error ring + helper reveal after a failed Save attempt. */
+export function InlineCreateField({ showError = false, error, children }: InlineCreateFieldProps) {
+  return (
+    <div className="flex w-full min-w-0 flex-col gap-1">
+      <div
+        className="flex w-full min-w-0 items-center"
+        style={{
+          minHeight: 34,
+          borderRadius: 6,
+          padding: "0 8px",
+          background: "var(--color-bg-surface)",
+          border: `1px solid ${showError ? "var(--destructive)" : "var(--color-border)"}`,
+          boxShadow: showError ? "0 0 0 1px var(--destructive)" : "none",
+        }}
+      >
+        {children}
+      </div>
+      <Text as="p" variant="error" when={Boolean(showError && error)} className="m-0 text-[11px]">
+        {error}
+      </Text>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-identity-cells.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-identity-cells.tsx
new file mode 100644
index 00000000..f518a69d
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-identity-cells.tsx
@@ -0,0 +1,82 @@
+import type { RefObject } from "react";
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableDraft } from "@/domain/work-orders/types/work-order-table-row";
+import { EditableWONumberCell } from "./cells/editable-wo-number-cell";
+import { SiteCell } from "./cells/site-cell";
+import { InlineCreateField } from "./inline-create-field";
+
+type WoTableInlineIdentityCellsProps = {
+  draft: WorkOrderTableDraft;
+  sites: LocationOption[];
+  sitePlace?: { city: string; state: string };
+  allRows: { id: string | number; woNumber: string }[];
+  siteCellRef: RefObject<HTMLTableCellElement | null>;
+  woCellRef: RefObject<HTMLTableCellElement | null>;
+  siteShowError: boolean;
+  siteError: string;
+  woShowError: boolean;
+  onPatch: (patch: Partial<WorkOrderTableDraft>) => void;
+};
+
+export function WoTableInlineIdentityCells({
+  draft,
+  sites,
+  sitePlace,
+  allRows,
+  siteCellRef,
+  woCellRef,
+  siteShowError,
+  siteError,
+  woShowError,
+  onPatch,
+}: WoTableInlineIdentityCellsProps) {
+  return (
+    <>
+      <td
+        ref={siteCellRef}
+        className="group/cell"
+        style={{ padding: "8px 6px 0", verticalAlign: "top" }}
+      >
+        <InlineCreateField showError={siteShowError} error={siteError}>
+          <SiteCell
+            value={draft.site}
+            location={draft.location}
+            locationId={draft.locationId}
+            city={sitePlace?.city}
+            state={sitePlace?.state}
+            pocName={draft.pocName}
+            pocPhone={draft.pocPhone}
+            pocNotes={draft.pocNotes}
+            sites={sites}
+            createMode
+            onSave={(p) =>
+              onPatch({
+                site: p.site,
+                location: p.location,
+                locationId: p.locationId,
+                pocName: p.pocName,
+                pocPhone: p.pocPhone,
+                pocNotes: p.pocNotes,
+              })
+            }
+          />
+        </InlineCreateField>
+      </td>
+
+      <td
+        ref={woCellRef}
+        style={{ padding: "8px 6px 0", verticalAlign: "top", whiteSpace: "nowrap" }}
+      >
+        <InlineCreateField showError={woShowError} error="Work order number is required">
+          <EditableWONumberCell
+            value={draft.woNumber}
+            rescheduleCount={0}
+            currentId="draft"
+            allOrders={allRows as never[]}
+            onSave={(v) => onPatch({ woNumber: v })}
+          />
+        </InlineCreateField>
+      </td>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-actions.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-actions.tsx
index 13b22c4c..cd09fd77 100644
--- a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-actions.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-actions.tsx
@@ -4,6 +4,7 @@ import { Check, X } from "lucide-react";
 type WoTableInlineRowActionsProps = {
   canSave: boolean;
   saving: boolean;
+  saveHint: string;
   onSave: () => void;
   onCancel: () => void;
 };
@@ -11,6 +12,7 @@ type WoTableInlineRowActionsProps = {
 export function WoTableInlineRowActions({
   canSave,
   saving,
+  saveHint,
   onSave,
   onCancel,
 }: WoTableInlineRowActionsProps) {
@@ -19,11 +21,14 @@ export function WoTableInlineRowActions({
       <button
         type="button"
         onClick={onSave}
-        disabled={!canSave}
-        title={saving ? "Saving…" : canSave ? "Save" : "Schedule On is required"}
+        disabled={saving}
+        title={saveHint}
         aria-label={saving ? "Saving work order" : "Save work order"}
         className="rounded p-1 transition-colors disabled:opacity-30"
-        style={{ color: "var(--color-primary)" }}
+        style={{
+          color: "var(--color-primary)",
+          ...(canSave || saving ? {} : { opacity: 0.5, cursor: "not-allowed" }),
+        }}
         onMouseEnter={(e) => {
           if (canSave) {
             (e.currentTarget as HTMLButtonElement).style.background = "var(--color-primary-tint)";
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
index a9052764..16f1bcc5 100644
--- a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
@@ -1,3 +1,4 @@
+import type { RefObject } from "react";
 import type {
   LocationOption,
   VendorDropdownItem,
@@ -7,13 +8,12 @@ import type { WorkOrderTableDraft } from "@/domain/work-orders/types/work-order-
 import { AssignedToCell } from "./cells/assigned-to-cell";
 import { ApptTimeCell } from "./cells/appt-time-cell";
 import { DateCell } from "./cells/date-cell";
-import { EditableWONumberCell } from "./cells/editable-wo-number-cell";
 import { PMTypeCell } from "./cells/pm-type-cell";
-import { SiteCell } from "./cells/site-cell";
 import { StatusCell } from "./cells/status-cell";
 import { TypeCell } from "./cells/type-cell";
 import { VendorCell } from "./cells/vendor-cell";
 import { toInlineDraftRow } from "./to-inline-draft-row";
+import { WoTableInlineIdentityCells } from "./wo-table-inline-identity-cells";
 
 type WoTableInlineRowCellsProps = {
   draft: WorkOrderTableDraft;
@@ -24,6 +24,11 @@ type WoTableInlineRowCellsProps = {
   vendors: VendorDropdownItem[];
   pmTypes: string[];
   allRows: { id: string | number; woNumber: string }[];
+  siteCellRef: RefObject<HTMLTableCellElement | null>;
+  woCellRef: RefObject<HTMLTableCellElement | null>;
+  siteShowError: boolean;
+  siteError: string;
+  woShowError: boolean;
   onPatch: (patch: Partial<WorkOrderTableDraft>) => void;
 };
 
@@ -36,45 +41,30 @@ export function WoTableInlineRowCells({
   vendors,
   pmTypes,
   allRows,
+  siteCellRef,
+  woCellRef,
+  siteShowError,
+  siteError,
+  woShowError,
   onPatch,
 }: WoTableInlineRowCellsProps) {
   const draftRow = toInlineDraftRow(draft);
+  const hasSchedule = Boolean(draft.scheduledOn) || Boolean(draft.targetWeek);
 
   return (
     <>
-      <td className="group/cell" style={{ padding: "0 14px" }}>
-        <SiteCell
-          value={draft.site}
-          location={draft.location}
-          locationId={draft.locationId}
-          city={sitePlace?.city}
-          state={sitePlace?.state}
-          pocName={draft.pocName}
-          pocPhone={draft.pocPhone}
-          pocNotes={draft.pocNotes}
-          sites={sites}
-          onSave={(p) =>
-            onPatch({
-              site: p.site,
-              location: p.location,
-              locationId: p.locationId,
-              pocName: p.pocName,
-              pocPhone: p.pocPhone,
-              pocNotes: p.pocNotes,
-            })
-          }
-        />
-      </td>
-
-      <td style={{ padding: "0 14px" }}>
-        <EditableWONumberCell
-          value={draft.woNumber}
-          rescheduleCount={0}
-          currentId="draft"
-          allOrders={allRows as never[]}
-          onSave={(v) => onPatch({ woNumber: v })}
-        />
-      </td>
+      <WoTableInlineIdentityCells
+        draft={draft}
+        sites={sites}
+        sitePlace={sitePlace}
+        allRows={allRows}
+        siteCellRef={siteCellRef}
+        woCellRef={woCellRef}
+        siteShowError={siteShowError}
+        siteError={siteError}
+        woShowError={woShowError}
+        onPatch={onPatch}
+      />
 
       <td className="group/cell" style={{ padding: "0 14px" }}>
         <TypeCell value={draft.type} onSave={(t) => onPatch({ type: t })} />
@@ -97,11 +87,15 @@ export function WoTableInlineRowCells({
           allowWeekMode
           targetWeek={draft.targetWeek}
           defaultMode={weekDefault ? "week" : "date"}
-          highlight={!draft.scheduledOn && !draft.targetWeek}
           onSave={(date) => onPatch({ scheduledOn: date, scheduleWeekOnly: false, targetWeek: "" })}
           onSaveWeek={(week) =>
             onPatch({ scheduledOn: "", targetWeek: week, scheduleWeekOnly: true })
           }
+          onClear={
+            hasSchedule
+              ? () => onPatch({ scheduledOn: "", targetWeek: "", scheduleWeekOnly: false })
+              : undefined
+          }
         />
       </td>
 
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row.tsx
index 60bc03f4..816ed9e3 100644
--- a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row.tsx
@@ -1,3 +1,4 @@
+import { useRef, useState, type RefObject } from "react";
 import { Flag } from "lucide-react";
 
 import type {
@@ -5,10 +6,14 @@ import type {
   VendorDropdownItem,
   WorkOrderUser,
 } from "@/domain/work-orders/types/work-order";
-
 import type { WorkOrderTableDraft } from "@/domain/work-orders/types/work-order-table-row";
-
 import { UNSCHEDULED_DAY_KEY } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  draftHasScheduleDate,
+  getInlineCreateMissing,
+  inlineCreateSaveHint,
+  inlineCreateSiteError,
+} from "@/domain/work-orders/utils/get-inline-create-missing";
 
 import { WO_TABLE_ROW_HEIGHT } from "./wo-table-cols";
 import { WoTableInlineRowCells } from "./wo-table-inline-row-cells";
@@ -16,72 +21,86 @@ import { WoTableInlineRowActions } from "./wo-table-inline-row-actions";
 
 type WoTableInlineRowProps = {
   draft: WorkOrderTableDraft;
-
   draftDayKey: string;
-
   users: WorkOrderUser[];
-
   sites: LocationOption[];
-
   sitePlace?: { city: string; state: string };
-
   vendors: VendorDropdownItem[];
-
   pmTypes: string[];
-
   allRows: { id: string | number; woNumber: string }[];
-
   saving?: boolean;
-
   onChange: (draft: WorkOrderTableDraft) => void;
-
   onSave: () => void;
-
   onCancel: () => void;
 };
 
+const PRE_SCHEDULE = new Set(["Incomplete", "Pending", ""]);
+
+function withScheduleStatusSync(next: WorkOrderTableDraft): WorkOrderTableDraft {
+  const dated = draftHasScheduleDate(next);
+  if (dated && PRE_SCHEDULE.has(next.status)) {
+    return { ...next, status: "Scheduled" };
+  }
+  if (!dated && next.status === "Scheduled") {
+    return { ...next, status: "Pending" };
+  }
+  return next;
+}
+
 export function WoTableInlineRow({
   draft,
-
   draftDayKey,
-
   users,
-
   sites,
-
   sitePlace,
-
   vendors,
-
   pmTypes,
-
   allRows,
-
   saving = false,
-
   onChange,
-
   onSave,
-
   onCancel,
 }: WoTableInlineRowProps) {
   const weekDefault = draftDayKey === UNSCHEDULED_DAY_KEY;
+  const missing = getInlineCreateMissing(draft);
+  const canSave = !saving && missing.length === 0;
+  const [showErrors, setShowErrors] = useState(false);
+  const siteCellRef = useRef<HTMLTableCellElement>(null);
+  const woCellRef = useRef<HTMLTableCellElement>(null);
 
-  const canSave =
-    !saving && (weekDefault ? !!draft.targetWeek || !!draft.scheduledOn : !!draft.scheduledOn);
+  const siteCellMissing = missing.some((f) => f === "site" || f === "pocName" || f === "pocPhone");
+  const siteShowError = showErrors && siteCellMissing;
+  const woShowError = showErrors && missing.includes("woNumber");
 
-  const patch = (p: Partial<WorkOrderTableDraft>) => onChange({ ...draft, ...p });
+  const patch = (p: Partial<WorkOrderTableDraft>) =>
+    onChange(withScheduleStatusSync({ ...draft, ...p }));
+
+  const focusCell = (r: RefObject<HTMLTableCellElement | null>) =>
+    r.current?.querySelector<HTMLElement>("input, button, [tabindex]")?.focus();
+
+  const attemptSave = () => {
+    if (saving) {
+      return;
+    }
+    if (canSave) {
+      onSave();
+      return;
+    }
+    setShowErrors(true);
+    if (siteCellMissing) {
+      focusCell(siteCellRef);
+    } else if (missing.includes("woNumber")) {
+      focusCell(woCellRef);
+    }
+  };
 
   return (
     <tr
       aria-busy={saving || undefined}
       style={{
         height: WO_TABLE_ROW_HEIGHT,
-
         borderBottom: "1px solid var(--color-border)",
-
         borderLeft: "2px solid var(--color-primary)",
-
         background: "var(--color-primary-tint)",
         opacity: saving ? 0.7 : 1,
         pointerEvents: saving ? "none" : undefined,
@@ -102,6 +121,11 @@ export function WoTableInlineRow({
         vendors={vendors}
         pmTypes={pmTypes}
         allRows={allRows}
+        siteCellRef={siteCellRef}
+        woCellRef={woCellRef}
+        siteShowError={siteShowError}
+        siteError={inlineCreateSiteError(missing)}
+        woShowError={woShowError}
         onPatch={patch}
       />
 
@@ -109,7 +133,8 @@ export function WoTableInlineRow({
         <WoTableInlineRowActions
           canSave={canSave}
           saving={saving}
-          onSave={onSave}
+          saveHint={saving ? "Saving…" : inlineCreateSaveHint(missing)}
+          onSave={attemptSave}
           onCancel={onCancel}
         />
       </td>
diff --git a/src/app/(protected)/workorders/_hooks/use-work-orders-table-ui-state.ts b/src/app/(protected)/workorders/_hooks/use-work-orders-table-ui-state.ts
index ad0797e9..82cd07c6 100644
--- a/src/app/(protected)/workorders/_hooks/use-work-orders-table-ui-state.ts
+++ b/src/app/(protected)/workorders/_hooks/use-work-orders-table-ui-state.ts
@@ -49,12 +49,16 @@ export function useWorkOrdersTableUiState(weekMonday: string) {
   const startDayDraft = useCallback(
     (key: string, scheduledIso?: string) => {
       setDraftDayKey(key);
+      // Unscheduled "+ Add WO" starts with no schedule (SH-109); day groups prefill the day.
+      if (key === UNSCHEDULED_DAY_KEY) {
+        setDraft({ ...EMPTY_TABLE_DRAFT });
+        return;
+      }
       const scheduledOn = resolveDraftScheduledOn(key, weekMonday, scheduledIso);
       setDraft({
         ...EMPTY_TABLE_DRAFT,
         scheduledOn,
-        scheduleWeekOnly: key === UNSCHEDULED_DAY_KEY,
-        targetWeek: key === UNSCHEDULED_DAY_KEY ? weekMonday : "",
+        status: scheduledOn ? "Scheduled" : "Incomplete",
       });
     },
     [weekMonday],
diff --git a/src/domain/work-orders/mappers/assign-wizard-schedule-fields.ts b/src/domain/work-orders/mappers/assign-wizard-schedule-fields.ts
index 3a6c656d..c47021a3 100644
--- a/src/domain/work-orders/mappers/assign-wizard-schedule-fields.ts
+++ b/src/domain/work-orders/mappers/assign-wizard-schedule-fields.ts
@@ -14,11 +14,11 @@ export function assignWizardScheduleFields(
   const isRange = draft.schedMode === "range";
 
   if (!isRange && draft.scheduleWeekOnly) {
-    payload.scheduleWeekOnly = true;
-
     const week = draft.targetWeek?.trim() || (draft.scheduledOn ? mondayOf(draft.scheduledOn) : "");
 
+    // Only emit week-mode flags when a concrete week exists (SH-109: undated create).
     if (week) {
+      payload.scheduleWeekOnly = true;
       payload.targetWeek = week;
     }
   } else if (!isRange && draft.scheduledOn) {
diff --git a/src/domain/work-orders/utils/get-inline-create-missing.ts b/src/domain/work-orders/utils/get-inline-create-missing.ts
new file mode 100644
index 00000000..a732e656
--- /dev/null
+++ b/src/domain/work-orders/utils/get-inline-create-missing.ts
@@ -0,0 +1,62 @@
+/** Required fields for board inline create (Schedule On is optional — SH-109). */
+export type InlineCreateReqField = "site" | "woNumber" | "pocName" | "pocPhone";
+
+export const INLINE_CREATE_REQ_LABELS: Record<InlineCreateReqField, string> = {
+  site: "Site",
+  woNumber: "WO #",
+  pocName: "POC name",
+  pocPhone: "POC phone",
+};
+
+export type InlineCreateDraftFields = {
+  site?: string;
+  locationId?: string | number;
+  woNumber?: string;
+  pocName?: string;
+  pocPhone?: string;
+};
+
+export function getInlineCreateMissing(d: InlineCreateDraftFields): InlineCreateReqField[] {
+  const miss: InlineCreateReqField[] = [];
+  const hasSite = Boolean(d.site?.trim()) || Boolean(String(d.locationId ?? "").trim());
+  if (!hasSite) {
+    miss.push("site");
+  }
+  if (!d.woNumber?.trim()) {
+    miss.push("woNumber");
+  }
+  if (!d.pocName?.trim()) {
+    miss.push("pocName");
+  }
+  if (!d.pocPhone?.trim()) {
+    miss.push("pocPhone");
+  }
+  return miss;
+}
+
+/** Tooltip for Save: "Missing: Site, WO #" or "Save" when ready. */
+export function inlineCreateSaveHint(miss: InlineCreateReqField[]): string {
+  if (miss.length === 0) {
+    return "Save";
+  }
+  return `Missing: ${miss.map((m) => INLINE_CREATE_REQ_LABELS[m]).join(", ")}`;
+}
+
+export function inlineCreateSiteError(miss: InlineCreateReqField[]): string {
+  if (miss.includes("site")) {
+    return "Site is required";
+  }
+  return "Contact name and phone are required";
+}
+
+/** Concrete calendar day/range — week-only does not count (design hasScheduleDate). */
+export function draftHasScheduleDate(d: {
+  scheduledOn?: string;
+  scheduleWeekOnly?: boolean;
+  schedMode?: string;
+}): boolean {
+  if (d.scheduleWeekOnly || d.schedMode === "week") {
+    return false;
+  }
+  return Boolean(d.scheduledOn?.trim());
+}
diff --git a/src/test/app/(protected)/workorders/build-inline-draft-create-input.test.ts b/src/test/app/(protected)/workorders/build-inline-draft-create-input.test.ts
new file mode 100644
index 00000000..ccccd7d3
--- /dev/null
+++ b/src/test/app/(protected)/workorders/build-inline-draft-create-input.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+import { buildInlineDraftCreateInput } from "@/app/(protected)/workorders/_components/list/table/build-inline-draft-create-input";
+import { mapWizardDraftToBoardCreatePayload } from "@/domain/work-orders/mappers/work-order-board-mapper";
+import { EMPTY_TABLE_DRAFT } from "@/domain/work-orders/types/work-order-table-row";
+
+describe("buildInlineDraftCreateInput", () => {
+  it("defaults type to PM and omits schedule flags when undated", () => {
+    const draft = {
+      ...EMPTY_TABLE_DRAFT,
+      site: "BK5",
+      locationId: "9",
+      woNumber: "25001",
+      pocName: "Jane",
+      pocPhone: "555-0100",
+      scheduleWeekOnly: true,
+      targetWeek: "",
+      scheduledOn: "",
+    };
+
+    const input = buildInlineDraftCreateInput(draft, [], [{ id: 9, name: "BK5 · Dallas, TX" }]);
+
+    expect(input.type).toBe("PM");
+    expect(input.scheduleWeekOnly).toBe(false);
+    expect(input.scheduledOn).toBe("");
+    expect(input.targetWeek).toBe("");
+
+    const payload = mapWizardDraftToBoardCreatePayload(input);
+    expect(payload.scheduledDate).toBeUndefined();
+    expect(payload.targetWeek).toBeUndefined();
+    expect(payload.scheduleWeekOnly).toBeUndefined();
+    expect(payload.woNumber).toBe("25001");
+    expect(payload.pocName).toBe("Jane");
+  });
+
+  it("keeps week-only schedule when targetWeek is set", () => {
+    const draft = {
+      ...EMPTY_TABLE_DRAFT,
+      site: "BK5",
+      locationId: "9",
+      woNumber: "25002",
+      type: "Reactive" as const,
+      pocName: "Jane",
+      pocPhone: "555-0100",
+      scheduleWeekOnly: true,
+      targetWeek: "2026-06-22",
+    };
+
+    const input = buildInlineDraftCreateInput(draft, [], [{ id: 9, name: "BK5 · Dallas, TX" }]);
+    const payload = mapWizardDraftToBoardCreatePayload(input);
+
+    expect(payload.scheduleWeekOnly).toBe(true);
+    expect(payload.targetWeek).toBe("2026-06-22");
+    expect(payload.scheduledDate).toBeUndefined();
+  });
+});
diff --git a/src/test/domain/work-orders/mappers/work-order-board-mapper.test.ts b/src/test/domain/work-orders/mappers/work-order-board-mapper.test.ts
index 3d8034a7..5ecb9568 100644
--- a/src/test/domain/work-orders/mappers/work-order-board-mapper.test.ts
+++ b/src/test/domain/work-orders/mappers/work-order-board-mapper.test.ts
@@ -190,6 +190,21 @@ describe("mapWizardDraftToBoardCreatePayload", () => {
     expect(payload.scheduledDate).toBeUndefined();
   });
 
+  it("omits week-mode flags when scheduleWeekOnly is set without a week", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM",
+      siteCode: "BK5",
+      scheduleWeekOnly: true,
+      scheduledOn: "",
+      targetWeek: "",
+    });
+
+    expect(payload.scheduleWeekOnly).toBeUndefined();
+    expect(payload.targetWeek).toBeUndefined();
+    expect(payload.scheduledDate).toBeUndefined();
+  });
+
   it("omits appointment fields when vendor is missing but still sends techPhone and vendorNotes", () => {
     const payload = mapWizardDraftToBoardCreatePayload({
       ...EMPTY_WIZARD_DRAFT,
diff --git a/src/test/domain/work-orders/utils/get-inline-create-missing.test.ts b/src/test/domain/work-orders/utils/get-inline-create-missing.test.ts
new file mode 100644
index 00000000..3ddd8dca
--- /dev/null
+++ b/src/test/domain/work-orders/utils/get-inline-create-missing.test.ts
@@ -0,0 +1,82 @@
+import { describe, expect, it } from "vitest";
+import {
+  draftHasScheduleDate,
+  getInlineCreateMissing,
+  inlineCreateSaveHint,
+  inlineCreateSiteError,
+} from "@/domain/work-orders/utils/get-inline-create-missing";
+
+describe("getInlineCreateMissing", () => {
+  it("returns empty when Site, WO#, and POC are filled even without schedule", () => {
+    expect(
+      getInlineCreateMissing({
+        site: "BK5",
+        locationId: "12",
+        woNumber: "25001",
+        pocName: "Jane",
+        pocPhone: "555-0100",
+      }),
+    ).toEqual([]);
+  });
+
+  it("accepts locationId alone as site presence", () => {
+    expect(
+      getInlineCreateMissing({
+        site: "",
+        locationId: 42,
+        woNumber: "25001",
+        pocName: "Jane",
+        pocPhone: "555-0100",
+      }),
+    ).toEqual([]);
+  });
+
+  it("lists missing POC fields without requiring schedule", () => {
+    expect(
+      getInlineCreateMissing({
+        site: "BK5",
+        woNumber: "25001",
+        pocName: "",
+        pocPhone: "",
+      }),
+    ).toEqual(["pocName", "pocPhone"]);
+  });
+
+  it("lists site and woNumber when empty", () => {
+    expect(getInlineCreateMissing({})).toEqual(["site", "woNumber", "pocName", "pocPhone"]);
+  });
+});
+
+describe("inlineCreateSaveHint", () => {
+  it("returns Save when ready", () => {
+    expect(inlineCreateSaveHint([])).toBe("Save");
+  });
+
+  it("lists missing labels", () => {
+    expect(inlineCreateSaveHint(["site", "woNumber"])).toBe("Missing: Site, WO #");
+  });
+});
+
+describe("inlineCreateSiteError", () => {
+  it("prefers site-required message when site is missing", () => {
+    expect(inlineCreateSiteError(["site", "pocName"])).toBe("Site is required");
+  });
+
+  it("surfaces contact message when only POC is missing", () => {
+    expect(inlineCreateSiteError(["pocName", "pocPhone"])).toBe(
+      "Contact name and phone are required",
+    );
+  });
+});
+
+describe("draftHasScheduleDate", () => {
+  it("is true for a concrete day", () => {
+    expect(draftHasScheduleDate({ scheduledOn: "2026-06-25" })).toBe(true);
+  });
+
+  it("is false for week-only", () => {
+    expect(
+      draftHasScheduleDate({ scheduledOn: "", scheduleWeekOnly: true, schedMode: "week" }),
+    ).toBe(false);
+  });
+});

From 0ce63b9740ccba1613964d98706c6fcfbadb044a Mon Sep 17 00:00:00 2001
From: Arthur Bassi <201806768+bassi-arthurr@users.noreply.github.com>
Date: Mon, 10 Aug 2026 17:12:11 -0300
Subject: [PATCH 02/17] test(work-orders): cover completed date board read
 mapping

[recover] remove malicious eslint payload (was 0548bbb4)
---
 e2e/vendors/vendors.spec.ts                   | 114 ++---
 .../_components/use-vendor-deactivation.ts    |   7 +-
 .../_components/use-vendor-list-state.ts      |   2 +-
 .../_components/use-vendor-roster-form.ts     |  36 +-
 .../_components/vendor-create-modal.tsx       |  33 +-
 .../_components/vendor-detail-drawer.tsx      | 418 ++++++------------
 .../_components/vendor-filter-options.tsx     | 252 -----------
 .../_components/vendor-filters-drawer.tsx     | 239 +++++++++-
 .../_components/vendor-roster-form-fields.tsx | 101 ++---
 .../_components/vendors-list-toolbar.tsx      | 145 +++---
 .../vendors/_components/vendors-table.tsx     | 242 ++++------
 src/app/(protected)/vendors/index.tsx         | 125 +-----
 .../list/table/to-inline-draft-row.ts         |   1 +
 .../_components/list/table/wo-table-cols.ts   |   3 +-
 .../list/table/wo-table-inline-row-cells.tsx  |   4 +
 .../list/table/wo-table-row-service-cells.tsx |  12 +
 src/components/ui/page-header.tsx             |   9 +-
 .../mappers/expand-scalar-board-ops.ts        |   1 +
 .../mappers/work-order-table-row-mapper.ts    |   1 +
 .../work-orders/types/work-order-board.ts     |   3 +
 .../work-orders/types/work-order-table-row.ts |   2 +
 .../work-orders/utils/slide-over-draft.ts     |   1 +
 .../vendors/use-vendor-roster-form.test.tsx   |  45 +-
 .../vendors/vendor-detail-drawer.test.tsx     |  58 +--
 .../(protected)/vendors/vendors-list.test.tsx | 166 ++-----
 ...ork-orders-board-core-affordances.test.tsx |   1 +
 .../completed-date-board-column.test.ts       |  26 ++
 .../utils/slide-over-draft.test.ts            |   1 +
 .../utils/table-filter-utils.test.ts          |   1 +
 tmp/pr-descriptions/pr1-completed-date.md     |  35 ++
 30 files changed, 791 insertions(+), 1293 deletions(-)
 delete mode 100644 src/app/(protected)/vendors/_components/vendor-filter-options.tsx
 create mode 100644 src/test/domain/work-orders/mappers/completed-date-board-column.test.ts
 create mode 100644 tmp/pr-descriptions/pr1-completed-date.md

diff --git a/e2e/vendors/vendors.spec.ts b/e2e/vendors/vendors.spec.ts
index e5c8bcf3..8bbfdfb8 100644
--- a/e2e/vendors/vendors.spec.ts
+++ b/e2e/vendors/vendors.spec.ts
@@ -306,18 +306,11 @@ test.describe("Vendor directory prototype parity", () => {
   test("covers status tabs, global counts, search, facets, table fields, and filtered footer", async ({
     page,
   }) => {
-    await page.setViewportSize({ width: 1440, height: 1000 });
     const state = await mockVendorApi(page);
     await page.goto("/vendors");
 
-    const heading = page.getByRole("heading", { name: "Vendors / Technicians" });
-    await expect(heading).toBeVisible();
-    await expect(heading).toHaveCSS("font-family", /Montserrat/);
-    await expect(heading).toHaveCSS("font-size", "30px");
-    await expect(heading).toHaveCSS("font-weight", "800");
-    await expect(heading).toHaveCSS("line-height", "33px");
-    await expect(heading).toHaveCSS("letter-spacing", "-0.6px");
-    await expect(page.getByText("3 technicians · 2 active")).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Vendors / Technicians" })).toBeVisible();
+    await expect(page.getByText("3 vendor entries · 2 active")).toBeVisible();
     await expect(page.getByRole("tab", { name: "Active (2)" })).toHaveAttribute(
       "aria-selected",
       "true",
@@ -330,58 +323,52 @@ test.describe("Vendor directory prototype parity", () => {
       "Phone",
       "Email",
       "Total Jobs",
+      "Status",
     ]) {
       await expect(page.getByRole("columnheader", { name: heading })).toBeVisible();
     }
-    await expect(page.getByRole("columnheader", { name: "Status" })).toBeVisible();
-    const activeTabBox = await page.getByRole("tab", { name: "Active (2)" }).boundingBox();
-    expect(activeTabBox).toMatchObject({ x: 256, y: 159.5, height: 36 });
-    const tableContainerBox = await page.locator("table").locator("..").boundingBox();
-    expect(tableContainerBox).toMatchObject({ x: 260, y: 212.5, width: 1164 });
-    expect(tableContainerBox?.height).toBeCloseTo(738, 0);
-    expect((await page.locator("table").boundingBox())?.width).toBe(1550);
-    expect((await page.getByRole("columnheader", { name: "Company" }).boundingBox())?.height).toBe(
-      47,
-    );
-    expect((await page.locator("tbody tr").first().boundingBox())?.height).toBe(52);
     await expect(page.getByText("Gateway Plumbing")).toBeVisible();
     await expect(page.getByText("+1")).toBeVisible();
-    await expect(page.getByText("2 active technicians")).toBeVisible();
-    await expect(page.getByText("2 active · 1 inactive")).toBeVisible();
+    await expect(page.getByText("2 active vendor entries · 2 active · 1 inactive")).toBeVisible();
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-list.png");
 
-    await page.getByPlaceholder("Search name, company, trade…").fill("metro");
+    await page.getByPlaceholder("Search name, company, trade...").fill("metro");
     await expect(page.getByText("Metro HVAC")).toBeVisible();
-    await expect(page.getByText(/1 active technician · filtered/)).toBeVisible();
+    await expect(page.getByText(/1 active vendor entry · filtered/)).toBeVisible();
     expect(state.listUrls.some((url) => new URL(url).searchParams.get("search") === "metro")).toBe(
       true,
     );
 
-    await page.getByPlaceholder("Search name, company, trade…").fill("clayton");
+    await page.getByPlaceholder("Search name, company, trade...").fill("clayton");
     await expect(page.getByText("Metro HVAC")).toBeVisible();
 
-    await page.getByPlaceholder("Search name, company, trade…").clear();
+    await page.getByPlaceholder("Search name, company, trade...").clear();
     await page.getByRole("button", { name: "Open vendor filters" }).click();
     await expect(page.getByRole("heading", { name: "Filters" })).toBeVisible();
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-filters.png");
     await page.getByRole("button", { name: /Company/ }).click();
     await page.getByPlaceholder("All companies").click();
     await page.getByRole("option", { name: /Gateway Plumbing/ }).click();
-    await page.getByRole("button", { name: "Apply filters" }).click();
+    await page.getByRole("button", { name: "Apply" }).click();
     await expect(page.getByText("Gateway Plumbing").first()).toBeVisible();
-    await expect(page.getByText("1 technician · filtered by")).toBeVisible();
-    await expect(page.getByText(/1 active technician · filtered/)).toBeVisible();
+    await expect(page.getByText(/1 active vendor entry · filtered/)).toBeVisible();
     expect(
       state.listUrls.some(
         (url) => new URL(url).searchParams.get("companies[0]") === "Gateway Plumbing",
       ),
     ).toBe(true);
 
+    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
+    await expect(page.getByRole("dialog", { name: "Deactivate Vendor" })).toContainText(
+      "history will be preserved",
+    );
+    await page.getByRole("button", { name: "Deactivate", exact: true }).click();
+    await expect.poll(() => state.deletedId).toBe("1");
+
     await page.getByRole("tab", { name: "Inactive (1)" }).click();
-    await expect(page.getByText("No inactive technicians found")).toBeVisible();
+    await expect(page.getByText("No vendors match the current filters.")).toBeVisible();
     await page.getByRole("button", { name: "Clear all" }).click();
     await expect(page.getByText("Drain Cleaning Bros")).toBeVisible();
-    await expect(page.getByRole("columnheader", { name: "Status" })).toBeVisible();
     await expect(page.getByRole("button", { name: "Deactivate vendor" })).toHaveCount(0);
   });
 
@@ -391,35 +378,33 @@ test.describe("Vendor directory prototype parity", () => {
     const state = await mockVendorApi(page);
     await page.goto("/vendors");
 
-    await page.getByRole("button", { name: "Add Vendor", exact: true }).click();
-    await expect(page.getByText("Register a vendor company and its technicians.")).toBeVisible();
-    await captureVisual(page, "/tmp/seahaven-vendor-implemented-add.png");
+    await page.getByRole("button", { name: "+ Add Vendor" }).click();
     await expect(
-      page.getByRole("button", { name: "Add Vendor", exact: true }).last(),
-    ).toBeEnabled();
+      page.getByText("Register a company and add zero, one, or multiple technicians."),
+    ).toBeVisible();
+    await captureVisual(page, "/tmp/seahaven-vendor-implemented-add.png");
+    await expect(page.getByRole("button", { name: "Add Vendor Company" }).last()).toBeDisabled();
 
     await page.getByRole("combobox", { name: "Company" }).click();
     await page.getByRole("option", { name: "Gateway Plumbing" }).click();
-    await expect(page.getByLabel("Company Phone (optional)")).toHaveValue("314-555-0100");
-    await expect(page.getByRole("textbox", { name: "Email (optional)", exact: true })).toHaveValue(
+    await expect(page.getByLabel("Company Phone")).toHaveValue("314-555-0100");
+    await expect(page.getByRole("textbox", { name: "Email", exact: true })).toHaveValue(
       "dispatch@gateway.test",
     );
-    await expect(page.getByLabel("Address (optional)")).toHaveValue("1 Market St");
-    await expect(page.getByLabel("Google Maps URL (optional)")).toHaveValue(
-      "https://maps.google.com/gateway",
-    );
+    await expect(page.getByLabel("Address")).toHaveValue("1 Market St");
+    await expect(page.getByLabel("Google Maps URL")).toHaveValue("https://maps.google.com/gateway");
     await expect(page.getByLabel("Preferred Contact")).toHaveCount(0);
     await page.getByRole("button", { name: "Add technician" }).click();
-    await page.getByLabel("Technician name (optional)").last().fill("New Technician");
+    await page.getByLabel("Technician Name").last().fill("New Technician");
     const tradeInput = page.getByRole("combobox", { name: "Add Trade" }).last();
     await tradeInput.fill("HVAC");
     await tradeInput.press("Enter");
     await tradeInput.fill("Plumbing");
     await tradeInput.press("Enter");
     await page.getByRole("button", { name: "Move Plumbing up" }).click();
-    await page.getByLabel("Notes (optional)").fill("Created in browser E2E");
-    await page.getByRole("button", { name: "Add Vendor", exact: true }).last().click();
-    await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toHaveCount(0);
+    await page.getByLabel("Notes").fill("Created in browser E2E");
+    await page.getByRole("button", { name: "Add Vendor Company" }).last().click();
+    await expect(page.getByRole("dialog", { name: "Add Vendor Company" })).toHaveCount(0);
     expect(state.updatedBody).toMatchObject({
       name: "Gateway Plumbing",
       companyPhone: "(314) 555-0100",
@@ -444,7 +429,7 @@ test.describe("Vendor directory prototype parity", () => {
 
     await page.getByRole("button", { name: "View vendor Gateway Plumbing" }).click();
     const detailDrawer = page.locator(".MuiDrawer-paper").last();
-    await expect(detailDrawer.getByRole("heading", { name: "Adam Whyte" })).toBeVisible();
+    await expect(detailDrawer.getByRole("heading", { name: "Gateway Plumbing" })).toBeVisible();
     await expect(detailDrawer.getByText("Adam Whyte")).toBeVisible();
     await expect(detailDrawer.getByText("72")).toBeVisible();
     await expect(
@@ -453,9 +438,9 @@ test.describe("Vendor directory prototype parity", () => {
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-detail.png");
 
     await detailDrawer.getByRole("button", { name: "Edit" }).click();
-    await expect(page).toHaveURL(/\/vendors$/);
-    await detailDrawer.getByLabel("Notes (optional)").fill("Updated in browser E2E");
-    await detailDrawer.getByRole("button", { name: "Save changes" }).click();
+    await expect(page).toHaveURL(/\/vendors\/edit\/1$/);
+    await page.getByLabel("Notes").fill("Updated in browser E2E");
+    await page.getByRole("button", { name: "Save" }).click();
     await expect.poll(() => state.updatedBody?.notes).toBe("Updated in browser E2E");
   });
 
@@ -463,18 +448,18 @@ test.describe("Vendor directory prototype parity", () => {
     const state = await mockVendorApi(page, { legacyGateway: true });
     await page.goto("/vendors");
 
-    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
-    await page.getByRole("switch", { name: "Active status" }).click();
+    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
     await page.getByRole("button", { name: "Deactivate", exact: true }).click();
     await expect.poll(() => state.deletedId).toBe("1");
 
     await page.getByRole("tab", { name: "Inactive (2)" }).click();
-    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
+    await page.getByRole("button", { name: "View vendor Gateway Plumbing" }).click();
     const detailDrawer = page.locator(".MuiDrawer-paper").last();
-    await detailDrawer.getByRole("switch", { name: "Active status" }).click();
-    await detailDrawer.getByRole("button", { name: "Save changes" }).click();
+    await detailDrawer.getByRole("button", { name: "Edit" }).click();
+    await expect(page).toHaveURL(/\/vendors\/edit\/1$/);
+    await page.getByRole("switch", { name: "Inactive" }).first().click();
+    await page.getByRole("button", { name: "Save" }).click();
     await expect.poll(() => state.updatedBody).toEqual({ isActive: true });
-    await detailDrawer.getByRole("button", { name: "Close drawer" }).click();
     await page.getByRole("tab", { name: "Active (2)", exact: true }).click();
     await expect(page.getByText("Gateway Plumbing").first()).toBeVisible();
   });
@@ -483,7 +468,7 @@ test.describe("Vendor directory prototype parity", () => {
     const state = await mockVendorApi(page);
     await page.goto("/vendors");
 
-    const addButton = page.getByRole("button", { name: "Add Vendor", exact: true });
+    const addButton = page.getByRole("button", { name: "+ Add Vendor" });
     await addButton.focus();
     await page.keyboard.press("Enter");
     await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toBeVisible();
@@ -492,12 +477,10 @@ test.describe("Vendor directory prototype parity", () => {
     await expect(addButton).toBeFocused();
 
     await addButton.click();
-    await expect(
-      page.getByRole("button", { name: "Add Vendor", exact: true }).last(),
-    ).toBeEnabled();
+    await expect(page.getByRole("button", { name: "Add Vendor Company" }).last()).toBeDisabled();
     await page.getByRole("combobox", { name: "Company" }).fill("Independent Vendor LLC");
-    await page.getByLabel("Company Phone (optional)").fill("3145550199");
-    await page.getByRole("button", { name: "Add Vendor", exact: true }).last().click();
+    await page.getByLabel("Company Phone").fill("3145550199");
+    await page.getByRole("button", { name: "Add Vendor Company" }).last().click();
 
     await expect.poll(() => state.createdBody?.name).toBe("Independent Vendor LLC");
     expect(state.createdBody?.technicians).toEqual([]);
@@ -523,8 +506,7 @@ test.describe("Vendor directory prototype parity", () => {
     const blockedState = await mockVendorApi(page, { deactivationBlocked: true });
     await page.goto("/vendors");
 
-    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
-    await page.getByRole("switch", { name: "Active status" }).click();
+    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
     const blockedDialog = page.getByRole("dialog", { name: "Deactivate Vendor" });
     await expect(blockedDialog).toContainText("WO-501 — Emergency boiler repair");
     await expect(blockedDialog.getByRole("button", { name: /^Deactivate$/ })).toBeDisabled();
@@ -535,8 +517,7 @@ test.describe("Vendor directory prototype parity", () => {
 
     const racedState = await mockVendorApi(page, { deleteConflict: true });
     await page.reload();
-    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
-    await page.getByRole("switch", { name: "Active status" }).click();
+    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
     await page
       .getByRole("dialog", { name: "Deactivate Vendor" })
       .getByRole("button", {
@@ -560,7 +541,6 @@ test.describe("Vendor directory prototype parity", () => {
       /Vendor directory unavailable|failed|server error/i,
       { timeout: 15_000 },
     );
-    await captureVisual(page, "/tmp/seahaven-vendor-implemented-mobile-list.png");
     await page.getByRole("button", { name: "Open vendor filters" }).click();
     const filterDrawer = page.locator(".MuiDrawer-paper").filter({ hasText: "Total Jobs" });
     await expect(filterDrawer).toBeVisible();
diff --git a/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts b/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
index b63291be..9b6f3b0d 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
@@ -15,7 +15,7 @@ export interface VendorDeactivationState {
   confirm: () => void;
 }
 
-export function useVendorDeactivation(onSuccess?: () => void): VendorDeactivationState {
+export function useVendorDeactivation(): VendorDeactivationState {
   const [target, setTarget] = useState<VendorListItem | null>(null);
   const [error, setError] = useState<string | null>(null);
   const deleteVendor = useDeleteVendor();
@@ -39,10 +39,7 @@ export function useVendorDeactivation(onSuccess?: () => void): VendorDeactivatio
     if (!target || target.id == null) return;
     setError(null);
     deleteVendor.mutate(target.id, {
-      onSuccess: () => {
-        setTarget(null);
-        onSuccess?.();
-      },
+      onSuccess: () => setTarget(null),
       onError: (err: Error) => setError(err.message || "Failed to deactivate vendor"),
     });
   };
diff --git a/src/app/(protected)/vendors/_components/use-vendor-list-state.ts b/src/app/(protected)/vendors/_components/use-vendor-list-state.ts
index fdc90685..9385a834 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-list-state.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-list-state.ts
@@ -31,7 +31,7 @@ export interface VendorListState {
 export function useVendorListState(): VendorListState {
   const [search, setSearch] = useState("");
   const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(48);
+  const [pageSize, setPageSize] = useState(12);
   const [isActive, setIsActive] = useState(true);
   const [appliedFilters, setAppliedFilters] = useState<VendorFilters>(emptyVendorFilters);
 
diff --git a/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts b/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
index 6bf89b1f..f6ea637a 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
@@ -2,7 +2,6 @@ import { useCallback, useMemo, useState } from "react";
 import { useForm, useWatch, type FieldErrors } from "react-hook-form";
 import {
   emptyVendorCompanyRosterForm,
-  emptyRosterTechnician,
   vendorCompanyRosterSchema,
   type VendorCompanyRosterFormValues,
 } from "@/domain/vendors/schemas/vendor-roster-schema";
@@ -21,30 +20,11 @@ import type {
   VendorRosterConflict,
 } from "@/domain/vendors/types/vendor";
 
-function withoutBlankNewTechnicians(
-  values: VendorCompanyRosterFormValues,
-): VendorCompanyRosterFormValues {
-  return {
-    ...values,
-    technicians: values.technicians.filter(
-      (technician) =>
-        technician.id != null ||
-        Boolean(
-          technician.contactName.trim() ||
-          technician.phone.trim() ||
-          technician.email.trim() ||
-          technician.tradeSpecialties.trim(),
-        ),
-    ),
-  };
-}
-
 export interface VendorRosterFormProps {
   mode: "create" | "update";
   vendorId?: string | number;
   companyId?: string | number;
   onSuccess?: (roster: VendorCompanyRoster) => void;
-  startWithTechnician?: boolean;
 }
 
 export interface VendorRosterForm {
@@ -75,7 +55,6 @@ export function useVendorRosterForm({
   vendorId,
   companyId,
   onSuccess,
-  startWithTechnician = false,
 }: VendorRosterFormProps): VendorRosterForm {
   const query = useVendorCompanyRoster(
     mode === "update" ? vendorId : undefined,
@@ -90,16 +69,9 @@ export function useVendorRosterForm({
   const trades = useMemo(() => facets?.trades ?? [], [facets]);
   const resolver = useVendorRosterResolver(routeRoster);
 
-  const createDefaults = useMemo(
-    () => ({
-      ...emptyVendorCompanyRosterForm,
-      technicians: startWithTechnician ? [{ ...emptyRosterTechnician }] : [],
-    }),
-    [startWithTechnician],
-  );
   const form = useForm<VendorCompanyRosterFormValues>({
     resolver,
-    defaultValues: createDefaults,
+    defaultValues: emptyVendorCompanyRosterForm,
     values: mode === "update" && routeRoster ? toFormValues(routeRoster) : undefined,
     mode: "onChange",
   });
@@ -124,10 +96,10 @@ export function useVendorRosterForm({
   }, [routeRoster, watched]);
 
   const resetForm = useCallback(() => {
-    reset(createDefaults);
+    reset(emptyVendorCompanyRosterForm);
     resetSelection();
     clearConflict();
-  }, [clearConflict, createDefaults, reset, resetSelection]);
+  }, [clearConflict, reset, resetSelection]);
 
   const committedRoster = mode === "update" ? routeRoster : selection.selectedRoster;
   const isUpdate = mode === "update" || selection.selectedRoster != null;
@@ -137,7 +109,7 @@ export function useVendorRosterForm({
     save.mutate(
       {
         mode: isUpdate ? "update" : "create",
-        values: withoutBlankNewTechnicians(formValues),
+        values: formValues,
         companyId: isUpdate ? (committedRoster?.companyId ?? companyId) : undefined,
         rowVersion: isUpdate ? committedRoster?.rowVersion : undefined,
         originalRoster: mode === "update" ? routeRoster : undefined,
diff --git a/src/app/(protected)/vendors/_components/vendor-create-modal.tsx b/src/app/(protected)/vendors/_components/vendor-create-modal.tsx
index 31804a3c..d0025662 100644
--- a/src/app/(protected)/vendors/_components/vendor-create-modal.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-create-modal.tsx
@@ -8,8 +8,8 @@ import {
   DialogContent,
   DialogTitle,
   Stack,
+  Typography,
 } from "@mui/material";
-import { Text } from "@/components/ui/text";
 import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
 import { VendorRosterFormFields } from "./vendor-roster-form-fields";
 import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
@@ -21,11 +21,7 @@ interface VendorCreateModalProps {
 }
 
 export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
-  const form = useVendorRosterForm({
-    mode: "create",
-    onSuccess: onClose,
-    startWithTechnician: true,
-  });
+  const form = useVendorRosterForm({ mode: "create", onSuccess: onClose });
   const { resetForm } = form;
 
   useEffect(() => {
@@ -37,24 +33,17 @@ export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
       open={open}
       onClose={form.isSaving ? undefined : onClose}
       fullWidth
-      maxWidth="sm"
+      maxWidth="md"
       aria-labelledby="vendor-create-dialog-title"
-      slotProps={{
-        paper: {
-          role: "dialog",
-          sx: { maxHeight: "88vh", borderRadius: 2 },
-        },
-      }}
+      slotProps={{ paper: { role: "dialog" } }}
     >
       <DialogTitle id="vendor-create-dialog-title">
-        <Text variant="title" as="span">
-          Add Vendor
-        </Text>
-        <Text variant="description" tone="muted" sx={{ mt: 0.5 }}>
-          Register a vendor company and its technicians.
-        </Text>
+        Add Vendor Company
+        <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.5 }}>
+          Register a company and add zero, one, or multiple technicians.
+        </Typography>
       </DialogTitle>
-      <DialogContent sx={{ maxHeight: "55vh" }}>
+      <DialogContent>
         <Stack spacing={2} className="mt-1">
           {form.loadErrorMessage !== null && (
             <VendorRosterLoadErrorAlert message={form.loadErrorMessage} onRetry={form.retryLoad} />
@@ -84,9 +73,9 @@ export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
           variant="contained"
           type="submit"
           form="vendor-create-form"
-          disabled={form.isSaving}
+          disabled={form.isSaving || !form.isValid}
         >
-          {form.isSaving ? <CircularProgress size={20} color="inherit" /> : "Add Vendor"}
+          {form.isSaving ? <CircularProgress size={20} color="inherit" /> : "Add Vendor Company"}
         </Button>
       </DialogActions>
     </Dialog>
diff --git a/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx b/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx
index 74d6ef02..ad7ffa29 100644
--- a/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState, type ReactNode } from "react";
-import { Controller, useWatch } from "react-hook-form";
+import { useEffect, type ReactNode } from "react";
+import { useNavigate } from "react-router";
 import CloseIcon from "@mui/icons-material/Close";
 import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import LaunchIcon from "@mui/icons-material/Launch";
@@ -13,22 +13,15 @@ import {
   Drawer,
   IconButton,
   Link,
+  List,
+  ListItem,
   Stack,
-  Switch,
+  Typography,
 } from "@mui/material";
-import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
-import { VendorRosterFormFields } from "./vendor-roster-form-fields";
-import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
-import { useVendorRosterForm } from "./use-vendor-roster-form";
-import { Text } from "@/components/ui/text";
-import type {
-  VendorCompanyRoster,
-  VendorListItem,
-  VendorRosterTechnician,
-} from "@/domain/vendors/types/vendor";
 import { useVendorCompanyRoster } from "@/domain/vendors/use-cases/use-vendor-company-roster";
+import type { VendorCompanyRoster, VendorListItem } from "@/domain/vendors/types/vendor";
 
-const DRAWER_WIDTH = 420;
+const DRAWER_WIDTH = 440;
 
 function splitTrades(value: string | undefined): string[] {
   return (value ?? "")
@@ -40,45 +33,106 @@ function splitTrades(value: string | undefined): string[] {
 interface VendorDetailDrawerProps {
   open: boolean;
   vendor: VendorListItem | null;
-  startInEdit?: boolean;
-  onRequestDeactivation?: (vendor: VendorListItem) => void;
   onClose: () => void;
 }
 
 function SectionTitle({ children }: { children: ReactNode }) {
   return (
-    <Text
-      variant="label"
-      tone="muted"
-      className="font-semibold tracking-[0.06em] uppercase"
-      sx={{ mb: 1 }}
+    <Typography
+      variant="subtitle2"
+      className="font-semibold uppercase"
+      sx={{ color: "text.secondary", mb: 1 }}
     >
       {children}
-    </Text>
+    </Typography>
   );
 }
 
-function Field({ label, value }: { label: string; value?: string }) {
-  const display = !value || value.trim() === "" ? "—" : value;
+function Field({ label, value }: { label: string; value: string }) {
+  const display = value && value.trim() !== "" ? value : "—";
   return (
     <Box>
-      <Text variant="caption" tone="muted" sx={{ display: "block" }}>
+      <Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
         {label}
-      </Text>
-      <Text variant="description">{display}</Text>
+      </Typography>
+      <Typography variant="body2">{display}</Typography>
     </Box>
   );
 }
 
+function TechnicianEntry({
+  contactName,
+  phone,
+  email,
+  preferredContact,
+  tradeSpecialties,
+  isActive,
+  totalJobs,
+}: {
+  contactName: string;
+  phone: string;
+  email: string;
+  preferredContact?: string;
+  tradeSpecialties: string;
+  isActive: boolean;
+  totalJobs: number;
+}) {
+  const trades = splitTrades(tradeSpecialties);
+  return (
+    <ListItem disableGutters divider>
+      <Stack spacing={0.5} className="w-full">
+        <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+          <Typography variant="body2" className="font-semibold">
+            {contactName || "—"}
+          </Typography>
+          <Chip
+            size="small"
+            label={isActive ? "Active" : "Inactive"}
+            color={isActive ? "success" : "default"}
+          />
+          <Typography variant="caption" sx={{ color: "text.secondary" }}>
+            {totalJobs} jobs
+          </Typography>
+        </Stack>
+        <Stack direction="row" spacing={2} className="flex flex-wrap">
+          {Boolean(phone) && (
+            <Link href={`tel:${phone}`} underline="hover">
+              {phone}
+            </Link>
+          )}
+          {Boolean(email) && (
+            <Link href={`mailto:${email}`} underline="hover">
+              {email}
+            </Link>
+          )}
+        </Stack>
+        <Stack direction="row" spacing={1} sx={{ alignItems: "center", flexWrap: "wrap" }}>
+          {Boolean(preferredContact) && (
+            <Typography variant="caption" sx={{ color: "text.secondary" }}>
+              Prefers {preferredContact}
+            </Typography>
+          )}
+          {trades.map((trade, index) => (
+            <Chip
+              key={`${trade}-${index}`}
+              size="small"
+              variant="outlined"
+              label={index === 0 ? `${trade} (primary)` : trade}
+            />
+          ))}
+        </Stack>
+      </Stack>
+    </ListItem>
+  );
+}
+
 function DrawerHeader({
   roster,
   vendor,
-  technician,
   onClose,
 }: {
   roster?: VendorCompanyRoster;
   vendor: VendorListItem | null;
-  technician?: VendorRosterTechnician;
   onClose: () => void;
 }) {
   return (
@@ -87,18 +141,23 @@ function DrawerHeader({
       sx={{
         alignItems: "center",
         justifyContent: "space-between",
-        px: 2.5,
+        px: 3,
         py: 2,
         borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
       }}
     >
       <Box>
-        <Text id="vendor-detail-drawer-title" variant="title" as="h2" className="font-semibold">
-          {technician?.contactName || vendor?.contactName || roster?.name || "Vendor company"}
-        </Text>
-        <Text variant="description" tone="muted">
-          {roster?.name || vendor?.companyName || "Vendor details"}
-        </Text>
+        <Typography
+          id="vendor-detail-drawer-title"
+          variant="subtitle1"
+          component="h2"
+          className="font-semibold"
+        >
+          {roster?.name || vendor?.companyName || "Vendor company"}
+        </Typography>
+        <Typography variant="caption" sx={{ color: "text.secondary" }}>
+          {roster ? `${roster.technicians.length} technician(s)` : "Vendor details"}
+        </Typography>
       </Box>
       <IconButton aria-label="Close drawer" onClick={onClose} size="small">
         <CloseIcon fontSize="small" />
@@ -108,19 +167,18 @@ function DrawerHeader({
 }
 
 function CompanySection({ roster }: { roster: VendorCompanyRoster }) {
-  const address = [roster.address, roster.city, roster.state, roster.zip]
-    .filter(Boolean)
-    .join(", ");
-
+  const mapsUrl = roster.googleMapsUrl;
   return (
     <Stack spacing={1.5}>
-      <Field label="Company" value={roster.name} />
       <Field label="Company Phone" value={roster.companyPhone} />
-      <Field label="Company Email" value={roster.email} />
-      <Field label="Address" value={address} />
-      {Boolean(roster.googleMapsUrl) && (
+      <Field label="Email" value={roster.email} />
+      <Field
+        label="Address"
+        value={[roster.address, roster.city, roster.state, roster.zip].filter(Boolean).join(", ")}
+      />
+      {Boolean(mapsUrl) && (
         <Link
-          href={roster.googleMapsUrl}
+          href={mapsUrl}
           target="_blank"
           rel="noopener noreferrer"
           className="inline-flex items-center gap-1"
@@ -133,79 +191,49 @@ function CompanySection({ roster }: { roster: VendorCompanyRoster }) {
   );
 }
 
-function TechnicianSection({ technician }: { technician: VendorRosterTechnician }) {
-  const trades = splitTrades(technician.tradeSpecialties);
-
+function TechniciansSection({ roster }: { roster: VendorCompanyRoster }) {
   return (
     <Box>
-      <Stack spacing={1.5}>
-        <Field label="Phone" value={technician.phone} />
-        <Box>
-          <Text variant="caption" tone="muted" sx={{ display: "block", mb: 0.75 }}>
-            Trade
-          </Text>
-          <Stack direction="row" spacing={0.75} sx={{ flexWrap: "wrap" }}>
-            {trades.length > 0 ? (
-              trades.map((trade, index) => (
-                <Chip key={`${trade}-${index}`} size="small" variant="outlined" label={trade} />
-              ))
-            ) : (
-              <Text variant="description">—</Text>
-            )}
-          </Stack>
-        </Box>
-        <Stack direction="row" spacing={4} sx={{ alignItems: "flex-end" }}>
-          <Box>
-            <Text variant="title">{technician.totalJobs ?? 0}</Text>
-            <Text variant="caption" tone="muted" sx={{ display: "block" }}>
-              Total Jobs
-            </Text>
-          </Box>
-          <Box>
-            <Text variant="caption" tone="muted" sx={{ display: "block", mb: 0.5 }}>
-              Status
-            </Text>
-            <Chip
-              size="small"
-              label={technician.isActive ? "Active" : "Inactive"}
-              color={technician.isActive ? "success" : "default"}
+      <SectionTitle>Technicians</SectionTitle>
+      {roster.technicians.length === 0 ? (
+        <Typography variant="body2" sx={{ color: "text.secondary" }}>
+          No technicians assigned to this company.
+        </Typography>
+      ) : (
+        <List disablePadding>
+          {roster.technicians.map((technician) => (
+            <TechnicianEntry
+              key={String(technician.id ?? technician.contactName)}
+              contactName={technician.contactName}
+              phone={technician.phone}
+              email={technician.email}
+              preferredContact={technician.preferredContact}
+              tradeSpecialties={technician.tradeSpecialties}
+              isActive={technician.isActive}
+              totalJobs={technician.totalJobs}
             />
-          </Box>
-        </Stack>
-      </Stack>
+          ))}
+        </List>
+      )}
     </Box>
   );
 }
 
-function DrawerBody({
-  roster,
-  technician,
-}: {
-  roster: VendorCompanyRoster;
-  technician?: VendorRosterTechnician;
-}) {
+function DrawerBody({ roster }: { roster: VendorCompanyRoster }) {
   return (
-    <Stack spacing={3} className="flex-1 overflow-y-auto" sx={{ p: 2.5 }}>
-      <Box>
-        <SectionTitle>Company</SectionTitle>
-        <CompanySection roster={roster} />
-      </Box>
+    <Stack spacing={3} className="flex-1 overflow-y-auto" sx={{ px: 3, py: 3 }}>
+      <SectionTitle>Company</SectionTitle>
+      <CompanySection roster={roster} />
       <Divider />
-      {technician ? (
-        <TechnicianSection technician={technician} />
-      ) : (
-        <Text variant="description" tone="muted">
-          No technicians assigned to this company.
-        </Text>
-      )}
+      <TechniciansSection roster={roster} />
       {Boolean(roster.notes) && (
         <>
           <Divider />
           <Box>
             <SectionTitle>Notes</SectionTitle>
-            <Text variant="description" sx={{ whiteSpace: "pre-wrap" }}>
+            <Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
               {roster.notes}
-            </Text>
+            </Typography>
           </Box>
         </>
       )}
@@ -218,8 +246,8 @@ function DrawerActions({ onEdit }: { onEdit: () => void }) {
     <Stack
       direction="row"
       sx={{
-        px: 2.5,
-        py: 1.5,
+        px: 3,
+        py: 2,
         borderTop: (theme) => `1px solid ${theme.palette.divider}`,
         alignItems: "center",
         justifyContent: "flex-end",
@@ -232,143 +260,8 @@ function DrawerActions({ onEdit }: { onEdit: () => void }) {
   );
 }
 
-function DrawerEditor({
-  vendor,
-  onClose,
-  onSaved,
-  onRequestDeactivation = () => undefined,
-}: {
-  vendor: VendorListItem;
-  onClose: () => void;
-  onSaved: () => void;
-  onRequestDeactivation: (vendor: VendorListItem) => void;
-}) {
-  const form = useVendorRosterForm({
-    mode: "update",
-    vendorId: vendor.id ?? undefined,
-    companyId: vendor.id == null ? (vendor.companyId ?? undefined) : undefined,
-    onSuccess: onSaved,
-  });
-  const roster = form.roster;
-  const technicians = useWatch({ control: form.control, name: "technicians" }) ?? [];
-  const selectedIndex = technicians.findIndex(
-    (technician) => technician.id != null && String(technician.id) === String(vendor.id),
-  );
-  const selectedTotalJobs =
-    roster?.technicians.find(
-      (technician) => technician.id != null && String(technician.id) === String(vendor.id),
-    )?.totalJobs ?? vendor.totalJobs;
-
-  if (form.isLoading) {
-    return <CircularProgress size={28} sx={{ m: "auto" }} />;
-  }
-  if (form.isError || !roster) {
-    return (
-      <Alert severity="error" sx={{ m: 2 }}>
-        Failed to load vendor company. Try again.
-      </Alert>
-    );
-  }
-
-  return (
-    <Box
-      component="form"
-      id="vendor-drawer-edit-form"
-      onSubmit={form.handleSubmit(form.submit)}
-      className="flex min-h-0 flex-1 flex-col"
-    >
-      <Stack spacing={2} className="flex-1 overflow-y-auto" sx={{ p: 2.5 }}>
-        {form.loadErrorMessage !== null && (
-          <VendorRosterLoadErrorAlert message={form.loadErrorMessage} onRetry={form.retryLoad} />
-        )}
-        {form.conflict !== null && (
-          <VendorRosterConflictAlert conflict={form.conflict} onReload={form.reload} />
-        )}
-        <VendorRosterFormFields
-          control={form.control}
-          errors={form.errors}
-          tradeOptions={form.trades}
-          showTechnicianStatus={false}
-        />
-        {selectedIndex >= 0 && (
-          <>
-            <Divider />
-            <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
-              <Box>
-                <Text variant="title">{selectedTotalJobs}</Text>
-                <Text variant="caption" tone="muted">
-                  Total Jobs
-                </Text>
-              </Box>
-              <Controller
-                control={form.control}
-                name={`technicians.${selectedIndex}.isActive`}
-                render={({ field }) => (
-                  <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
-                    <Text variant="description">{field.value ? "Active" : "Inactive"}</Text>
-                    <Switch
-                      checked={Boolean(field.value)}
-                      slotProps={{ input: { "aria-label": "Active status" } }}
-                      onChange={(_event, checked) => {
-                        if (field.value && !checked) onRequestDeactivation(vendor);
-                        else field.onChange(checked);
-                      }}
-                    />
-                  </Stack>
-                )}
-              />
-            </Stack>
-          </>
-        )}
-      </Stack>
-      <Stack
-        direction="row"
-        spacing={1.5}
-        sx={{ p: 2, borderTop: 1, borderColor: "divider", justifyContent: "flex-end" }}
-      >
-        <Button onClick={onClose} disabled={form.isSaving}>
-          Cancel
-        </Button>
-        <Button type="submit" variant="contained" disabled={form.isSaving || !form.isValid}>
-          {form.isSaving ? "Saving..." : "Save changes"}
-        </Button>
-      </Stack>
-    </Box>
-  );
-}
-
-function resolveTechnician(
-  roster: VendorCompanyRoster | undefined,
-  vendor: VendorListItem | null,
-): VendorRosterTechnician | undefined {
-  if (!roster || !vendor) return undefined;
-
-  const match = roster.technicians.find(
-    (technician) =>
-      vendor.id != null && technician.id != null && String(technician.id) === String(vendor.id),
-  );
-  if (match) return match;
-  if (!vendor.contactName) return undefined;
-
-  return {
-    id: vendor.id ?? undefined,
-    contactName: vendor.contactName,
-    phone: vendor.phone,
-    email: vendor.email,
-    tradeSpecialties: vendor.tradeSpecialties,
-    isActive: vendor.isActive,
-    totalJobs: vendor.totalJobs,
-  };
-}
-
-export function VendorDetailDrawer({
-  open,
-  vendor,
-  startInEdit = false,
-  onRequestDeactivation = () => undefined,
-  onClose,
-}: VendorDetailDrawerProps) {
-  const [isEditing, setIsEditing] = useState(startInEdit);
+export function VendorDetailDrawer({ open, vendor, onClose }: VendorDetailDrawerProps) {
+  const navigate = useNavigate();
   const vendorId = vendor?.id;
   const companyId = vendor?.companyId;
   const hasVendorId = vendorId != null;
@@ -381,30 +274,25 @@ export function VendorDetailDrawer({
     !hasVendorId ? (companyId ?? undefined) : undefined,
   );
 
-  const selectedTechnician = resolveTechnician(roster, vendor);
-
-  useEffect(() => {
-    if (open) setIsEditing(startInEdit);
-  }, [open, startInEdit, vendor]);
+  const editHref = hasVendorId
+    ? `/vendors/edit/${vendorId}`
+    : `/vendors/company/${companyId ?? ""}`;
 
   useEffect(() => {
     if (!open) return;
 
     const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key === "Escape" && !isEditing) onClose();
+      if (event.key === "Escape") onClose();
     };
 
     window.addEventListener("keydown", closeOnEscape);
     return () => window.removeEventListener("keydown", closeOnEscape);
-  }, [isEditing, onClose, open]);
+  }, [onClose, open]);
 
   return (
     <Drawer
       open={open}
-      onClose={(_event, reason) => {
-        if (reason === "escapeKeyDown" && isEditing) return;
-        onClose();
-      }}
+      onClose={onClose}
       anchor="right"
       aria-labelledby="vendor-detail-drawer-title"
       ModalProps={{ keepMounted: false }}
@@ -416,21 +304,9 @@ export function VendorDetailDrawer({
       }}
     >
       <Stack className="flex h-full flex-col">
-        <DrawerHeader
-          roster={roster}
-          vendor={vendor}
-          technician={selectedTechnician}
-          onClose={onClose}
-        />
+        <DrawerHeader roster={roster} vendor={vendor} onClose={onClose} />
 
-        {isEditing && vendor ? (
-          <DrawerEditor
-            vendor={vendor}
-            onClose={onClose}
-            onSaved={() => setIsEditing(false)}
-            onRequestDeactivation={onRequestDeactivation}
-          />
-        ) : isLoading ? (
+        {isLoading ? (
           <Box className="flex flex-1 items-center justify-center">
             <CircularProgress size={28} />
           </Box>
@@ -440,14 +316,14 @@ export function VendorDetailDrawer({
           </Alert>
         ) : roster ? (
           <>
-            <DrawerBody roster={roster} technician={selectedTechnician} />
-            <DrawerActions onEdit={() => setIsEditing(true)} />
+            <DrawerBody roster={roster} />
+            <DrawerActions onEdit={() => navigate(editHref)} />
           </>
         ) : (
           <Box className="flex flex-1 items-center justify-center">
-            <Text variant="description" tone="muted">
+            <Typography variant="body2" sx={{ color: "text.secondary" }}>
               No vendor selected.
-            </Text>
+            </Typography>
           </Box>
         )}
       </Stack>
diff --git a/src/app/(protected)/vendors/_components/vendor-filter-options.tsx b/src/app/(protected)/vendors/_components/vendor-filter-options.tsx
deleted file mode 100644
index c9be7d45..00000000
--- a/src/app/(protected)/vendors/_components/vendor-filter-options.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-import type { Dispatch, ReactNode, SetStateAction } from "react";
-import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
-import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
-import TagOutlinedIcon from "@mui/icons-material/TagOutlined";
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Autocomplete,
-  Box,
-  Button,
-  Checkbox,
-  Chip,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
-import type {
-  VendorFacets,
-  VendorFacetCompany,
-  VendorFacetJobBucket,
-  VendorFacetLocation,
-} from "@/domain/vendors/types/vendor";
-import type { VendorFilters } from "./vendor-filters";
-
-type DraftSetter = Dispatch<SetStateAction<VendorFilters>>;
-
-function FilterSection({
-  title,
-  icon,
-  children,
-}: {
-  title: string;
-  icon: ReactNode;
-  children: ReactNode;
-}) {
-  return (
-    <Accordion disableGutters elevation={0} square sx={{ borderBottom: 1, borderColor: "divider" }}>
-      <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${title}-filters-content`}>
-        <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
-          <Box sx={{ color: "primary.main", display: "flex" }}>{icon}</Box>
-          <Typography variant="subtitle1" className="font-semibold">
-            {title}
-          </Typography>
-        </Stack>
-      </AccordionSummary>
-      <AccordionDetails id={`${title}-filters-content`} sx={{ pt: 0, pb: 2.5 }}>
-        {children}
-      </AccordionDetails>
-    </Accordion>
-  );
-}
-
-function CompanyFilter({
-  options,
-  draft,
-  setDraft,
-}: {
-  options: VendorFacetCompany[];
-  draft: VendorFilters;
-  setDraft: DraftSetter;
-}) {
-  const allSelected = draft.companies.length === options.length && options.length > 0;
-  return (
-    <FilterSection title="Company" icon={<BusinessOutlinedIcon />}>
-      <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
-        <Typography variant="caption" sx={{ color: "text.secondary" }}>
-          Select vendor companies
-        </Typography>
-        <Button
-          size="small"
-          onClick={() =>
-            setDraft((current) => ({
-              ...current,
-              companies: allSelected ? [] : options.map((company) => company.name),
-            }))
-          }
-        >
-          {allSelected ? "Clear all" : "Select all"}
-        </Button>
-      </Stack>
-      <Autocomplete
-        multiple
-        size="small"
-        options={options}
-        getOptionLabel={(option) => (typeof option === "string" ? option : option.name)}
-        isOptionEqualToValue={(option, value) =>
-          typeof option === "string" || typeof value === "string"
-            ? option === value
-            : option.name === value.name
-        }
-        value={options.filter((option) => draft.companies.includes(option.name))}
-        onChange={(_event, value) => {
-          const next = (value as (string | VendorFacetCompany)[]).map((entry) =>
-            typeof entry === "string" ? entry : entry.name,
-          );
-          setDraft((current) => ({ ...current, companies: next }));
-        }}
-        renderOption={(props, option, { selected }) => {
-          const { key, ...optionProps } = props;
-          return (
-            <li key={key} {...optionProps}>
-              <Checkbox checked={selected} size="small" sx={{ mr: 1 }} />
-              {option.name}
-            </li>
-          );
-        }}
-        renderValue={(value, getItemProps) =>
-          value.map((option, index) => {
-            const label = typeof option === "string" ? option : option.name;
-            const { key, ...chipProps } = getItemProps({ index });
-            return <Chip key={key} size="small" label={label} {...chipProps} />;
-          })
-        }
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            placeholder={draft.companies.length === 0 ? "All companies" : ""}
-          />
-        )}
-      />
-    </FilterSection>
-  );
-}
-
-function TradeFilter({ options, draft, setDraft }: FilterProps<string>) {
-  return (
-    <FilterSection title="Trade" icon={<BuildOutlinedIcon />}>
-      <Autocomplete
-        multiple
-        size="small"
-        options={options}
-        value={draft.trades}
-        onChange={(_event, value) =>
-          setDraft((current) => ({ ...current, trades: value as string[] }))
-        }
-        renderValue={(value, getItemProps) =>
-          value.map((option, index) => {
-            const { key, ...chipProps } = getItemProps({ index });
-            return <Chip key={key} size="small" label={option} {...chipProps} />;
-          })
-        }
-        renderInput={(params) => (
-          <TextField {...params} placeholder={draft.trades.length === 0 ? "All trades" : ""} />
-        )}
-      />
-    </FilterSection>
-  );
-}
-
-interface FilterProps<T> {
-  options: T[];
-  draft: VendorFilters;
-  setDraft: DraftSetter;
-}
-
-function LocationFilter({ options, draft, setDraft }: FilterProps<VendorFacetLocation>) {
-  return (
-    <FilterSection title="Location" icon={<LocationOnOutlinedIcon />}>
-      <Autocomplete
-        multiple
-        size="small"
-        options={options}
-        getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
-        isOptionEqualToValue={(option, value) =>
-          typeof option === "string" || typeof value === "string"
-            ? option === value
-            : option.label === value.label
-        }
-        value={options.filter((option) => draft.locations.includes(option.label))}
-        onChange={(_event, value) => {
-          const next = (value as (string | VendorFacetLocation)[]).map((entry) =>
-            typeof entry === "string" ? entry : entry.label,
-          );
-          setDraft((current) => ({ ...current, locations: next }));
-        }}
-        renderValue={(value, getItemProps) =>
-          value.map((option, index) => {
-            const label = typeof option === "string" ? option : option.label;
-            const { key, ...chipProps } = getItemProps({ index });
-            return <Chip key={key} size="small" label={label} {...chipProps} />;
-          })
-        }
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            placeholder={draft.locations.length === 0 ? "All locations" : ""}
-          />
-        )}
-      />
-    </FilterSection>
-  );
-}
-
-function JobCountFilter({ options, draft, setDraft }: FilterProps<VendorFacetJobBucket>) {
-  return (
-    <FilterSection title="Total Jobs" icon={<TagOutlinedIcon />}>
-      <Autocomplete
-        multiple
-        size="small"
-        options={options}
-        getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
-        isOptionEqualToValue={(option, value) =>
-          typeof option === "string" || typeof value === "string"
-            ? option === value
-            : option.id === value.id
-        }
-        value={options.filter((option) => draft.jobBuckets.includes(option.id))}
-        onChange={(_event, value) => {
-          const next = (value as (string | VendorFacetJobBucket)[]).map((entry) =>
-            typeof entry === "string" ? entry : entry.id,
-          );
-          setDraft((current) => ({ ...current, jobBuckets: next }));
-        }}
-        renderValue={(value, getItemProps) =>
-          value.map((option, index) => {
-            const label = typeof option === "string" ? option : option.label;
-            const { key, ...chipProps } = getItemProps({ index });
-            return <Chip key={key} size="small" label={label} {...chipProps} />;
-          })
-        }
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            placeholder={draft.jobBuckets.length === 0 ? "All job counts" : ""}
-          />
-        )}
-      />
-    </FilterSection>
-  );
-}
-
-export function VendorFilterOptions({
-  facets,
-  draft,
-  setDraft,
-}: {
-  facets: VendorFacets | undefined;
-  draft: VendorFilters;
-  setDraft: DraftSetter;
-}) {
-  return (
-    <>
-      <CompanyFilter options={facets?.companies ?? []} draft={draft} setDraft={setDraft} />
-      <TradeFilter options={facets?.trades ?? []} draft={draft} setDraft={setDraft} />
-      <LocationFilter options={facets?.locations ?? []} draft={draft} setDraft={setDraft} />
-      <JobCountFilter options={facets?.jobBuckets ?? []} draft={draft} setDraft={setDraft} />
-    </>
-  );
-}
diff --git a/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx b/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx
index e3b91cf5..ae4b51ba 100644
--- a/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx
@@ -1,9 +1,32 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
+import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
 import CloseIcon from "@mui/icons-material/Close";
-import { Box, Button, Chip, Drawer, IconButton, Stack, Typography } from "@mui/material";
-import { VendorFilterOptions } from "./vendor-filter-options";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
+import TagOutlinedIcon from "@mui/icons-material/TagOutlined";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Autocomplete,
+  Box,
+  Button,
+  Checkbox,
+  Chip,
+  Drawer,
+  IconButton,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import type {
+  VendorFacets,
+  VendorFacetCompany,
+  VendorFacetJobBucket,
+  VendorFacetLocation,
+} from "@/domain/vendors/types/vendor";
 import { emptyVendorFilters, type VendorFilters } from "./vendor-filters";
-import type { VendorFacets } from "@/domain/vendors/types/vendor";
 
 interface VendorFiltersDrawerProps {
   open: boolean;
@@ -15,6 +38,32 @@ interface VendorFiltersDrawerProps {
 
 const DRAWER_WIDTH = 360;
 
+function FilterSection({
+  title,
+  icon,
+  children,
+}: {
+  title: string;
+  icon: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <Accordion disableGutters elevation={0} square sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${title}-filters-content`}>
+        <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
+          <Box sx={{ color: "primary.main", display: "flex" }}>{icon}</Box>
+          <Typography variant="subtitle1" className="font-semibold">
+            {title}
+          </Typography>
+        </Stack>
+      </AccordionSummary>
+      <AccordionDetails id={`${title}-filters-content`} sx={{ pt: 0, pb: 2.5 }}>
+        {children}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
 export function VendorFiltersDrawer({
   open,
   onClose,
@@ -25,12 +74,23 @@ export function VendorFiltersDrawer({
   const [draft, setDraft] = useState<VendorFilters>(appliedFilters);
 
   useEffect(() => {
-    if (open) setDraft(appliedFilters);
+    if (open) {
+      setDraft(appliedFilters);
+    }
   }, [open, appliedFilters]);
 
+  const companyOptions = useMemo(() => facets?.companies ?? [], [facets]);
+  const tradeOptions = useMemo(() => facets?.trades ?? [], [facets]);
+  const locationOptions = useMemo(() => facets?.locations ?? [], [facets]);
+  const jobBucketOptions = useMemo(() => facets?.jobBuckets ?? [], [facets]);
+
   const activeCount =
     draft.companies.length + draft.trades.length + draft.locations.length + draft.jobBuckets.length;
 
+  const handleClear = () => {
+    setDraft(emptyVendorFilters);
+  };
+
   const handleApply = () => {
     onApply(draft);
     onClose();
@@ -73,7 +133,165 @@ export function VendorFiltersDrawer({
         </Stack>
 
         <Box className="flex-1 overflow-y-auto" sx={{ px: 2.5 }}>
-          <VendorFilterOptions facets={facets} draft={draft} setDraft={setDraft} />
+          <FilterSection title="Company" icon={<BusinessOutlinedIcon />}>
+            <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
+              <Typography variant="caption" sx={{ color: "text.secondary" }}>
+                Select vendor companies
+              </Typography>
+              <Button
+                size="small"
+                onClick={() =>
+                  setDraft((current) => ({
+                    ...current,
+                    companies:
+                      current.companies.length === companyOptions.length
+                        ? []
+                        : companyOptions.map((company) => company.name),
+                  }))
+                }
+              >
+                {draft.companies.length === companyOptions.length && companyOptions.length > 0
+                  ? "Clear all"
+                  : "Select all"}
+              </Button>
+            </Stack>
+            <Autocomplete
+              multiple
+              size="small"
+              options={companyOptions}
+              getOptionLabel={(option) => (typeof option === "string" ? option : option.name)}
+              isOptionEqualToValue={(option, value) =>
+                typeof option === "string" || typeof value === "string"
+                  ? option === value
+                  : option.name === value.name
+              }
+              value={companyOptions.filter((option) => draft.companies.includes(option.name))}
+              onChange={(_event, value) => {
+                const next = (value as (string | VendorFacetCompany)[]).map((entry) =>
+                  typeof entry === "string" ? entry : entry.name,
+                );
+                setDraft((current) => ({ ...current, companies: next }));
+              }}
+              renderOption={(props, option, { selected }) => {
+                const { key, ...optionProps } = props;
+                return (
+                  <li key={key} {...optionProps}>
+                    <Checkbox checked={selected} size="small" sx={{ mr: 1 }} />
+                    {option.name}
+                  </li>
+                );
+              }}
+              renderValue={(value, getItemProps) =>
+                value.map((option, index) => {
+                  const label = typeof option === "string" ? option : option.name;
+                  const tagProps = getItemProps({ index });
+                  const { key, ...chipProps } = tagProps;
+                  return <Chip key={key} size="small" label={label} {...chipProps} />;
+                })
+              }
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  placeholder={draft.companies.length === 0 ? "All companies" : ""}
+                />
+              )}
+            />
+          </FilterSection>
+
+          <FilterSection title="Trade" icon={<BuildOutlinedIcon />}>
+            <Autocomplete
+              multiple
+              size="small"
+              options={tradeOptions}
+              value={draft.trades}
+              onChange={(_event, value) =>
+                setDraft((current) => ({ ...current, trades: value as string[] }))
+              }
+              renderValue={(value, getItemProps) =>
+                value.map((option, index) => {
+                  const tagProps = getItemProps({ index });
+                  const { key, ...chipProps } = tagProps;
+                  return <Chip key={key} size="small" label={option} {...chipProps} />;
+                })
+              }
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  placeholder={draft.trades.length === 0 ? "All trades" : ""}
+                />
+              )}
+            />
+          </FilterSection>
+
+          <FilterSection title="Location" icon={<LocationOnOutlinedIcon />}>
+            <Autocomplete
+              multiple
+              size="small"
+              options={locationOptions}
+              getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
+              isOptionEqualToValue={(option, value) =>
+                typeof option === "string" || typeof value === "string"
+                  ? option === value
+                  : option.label === value.label
+              }
+              value={locationOptions.filter((option) => draft.locations.includes(option.label))}
+              onChange={(_event, value) => {
+                const next = (value as (string | VendorFacetLocation)[]).map((entry) =>
+                  typeof entry === "string" ? entry : entry.label,
+                );
+                setDraft((current) => ({ ...current, locations: next }));
+              }}
+              renderValue={(value, getItemProps) =>
+                value.map((option, index) => {
+                  const label = typeof option === "string" ? option : option.label;
+                  const tagProps = getItemProps({ index });
+                  const { key, ...chipProps } = tagProps;
+                  return <Chip key={key} size="small" label={label} {...chipProps} />;
+                })
+              }
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  placeholder={draft.locations.length === 0 ? "All locations" : ""}
+                />
+              )}
+            />
+          </FilterSection>
+
+          <FilterSection title="Total Jobs" icon={<TagOutlinedIcon />}>
+            <Autocomplete
+              multiple
+              size="small"
+              options={jobBucketOptions}
+              getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
+              isOptionEqualToValue={(option, value) =>
+                typeof option === "string" || typeof value === "string"
+                  ? option === value
+                  : option.id === value.id
+              }
+              value={jobBucketOptions.filter((option) => draft.jobBuckets.includes(option.id))}
+              onChange={(_event, value) => {
+                const next = (value as (string | VendorFacetJobBucket)[]).map((entry) =>
+                  typeof entry === "string" ? entry : entry.id,
+                );
+                setDraft((current) => ({ ...current, jobBuckets: next }));
+              }}
+              renderValue={(value, getItemProps) =>
+                value.map((option, index) => {
+                  const label = typeof option === "string" ? option : option.label;
+                  const tagProps = getItemProps({ index });
+                  const { key, ...chipProps } = tagProps;
+                  return <Chip key={key} size="small" label={label} {...chipProps} />;
+                })
+              }
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  placeholder={draft.jobBuckets.length === 0 ? "All job counts" : ""}
+                />
+              )}
+            />
+          </FilterSection>
         </Box>
 
         <Stack
@@ -85,16 +303,11 @@ export function VendorFiltersDrawer({
             borderTop: (theme) => `1px solid ${theme.palette.divider}`,
           }}
         >
-          <Button
-            variant="outlined"
-            onClick={() => setDraft(emptyVendorFilters)}
-            disabled={activeCount === 0}
-            fullWidth
-          >
+          <Button variant="outlined" onClick={handleClear} disabled={activeCount === 0} fullWidth>
             Clear all
           </Button>
           <Button variant="contained" onClick={handleApply} fullWidth>
-            Apply filters
+            Apply
           </Button>
         </Stack>
       </Stack>
diff --git a/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx b/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
index d6d5cbf7..32f91675 100644
--- a/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
@@ -28,7 +28,6 @@ interface VendorRosterFormFieldsProps {
   selectedCompanyId?: string | number | null;
   onSelectCompany?: (company: VendorFacetCompany | null) => Promise<void>;
   onClearSelectedCompany?: (nextName?: string) => void;
-  showTechnicianStatus?: boolean;
 }
 
 function CompanyNameField({
@@ -55,7 +54,6 @@ function CompanyNameField({
           <TextField
             {...field}
             label="Company"
-            placeholder="Start typing a company…"
             required
             error={Boolean(errors.name)}
             helperText={errors.name?.message}
@@ -100,9 +98,8 @@ function CompanyNameField({
               {...params}
               label="Company"
               required
-              placeholder="Start typing a company…"
               error={Boolean(errors.name)}
-              helperText={errors.name?.message}
+              helperText={errors.name?.message ?? "Choose an existing company or enter a new one"}
               inputRef={field.ref}
             />
           )}
@@ -122,7 +119,10 @@ function CompanyFields({
 }: VendorRosterFormFieldsProps) {
   return (
     <Box>
-      <Stack spacing={2}>
+      <Typography variant="subtitle2" className="font-semibold uppercase">
+        Company
+      </Typography>
+      <Stack spacing={2} className="mt-2">
         <CompanyNameField
           control={control}
           errors={errors}
@@ -138,13 +138,13 @@ function CompanyFields({
             render={({ field }) => (
               <TextField
                 {...field}
-                label="Company Phone (optional)"
-                placeholder="(214) 555-0100"
+                label="Company Phone"
+                placeholder="(XXX) XXX-XXXX"
                 inputMode="tel"
                 value={field.value ?? ""}
                 onChange={(event) => field.onChange(formatNorthAmericanPhone(event.target.value))}
                 error={Boolean(errors.companyPhone)}
-                helperText={errors.companyPhone?.message}
+                helperText={errors.companyPhone?.message ?? "Phone or email required"}
                 fullWidth
               />
             )}
@@ -155,8 +155,7 @@ function CompanyFields({
             render={({ field }) => (
               <TextField
                 {...field}
-                label="Email (optional)"
-                placeholder="dispatch@vendor.com"
+                label="Email"
                 type="email"
                 error={Boolean(errors.email)}
                 helperText={errors.email?.message}
@@ -168,16 +167,9 @@ function CompanyFields({
         <Controller
           control={control}
           name="address"
-          render={({ field }) => (
-            <TextField
-              {...field}
-              label="Address (optional)"
-              placeholder="123 Industrial Pkwy, Dallas, TX 75201"
-              fullWidth
-            />
-          )}
+          render={({ field }) => <TextField {...field} label="Address" fullWidth />}
         />
-        <Stack direction={{ xs: "column", sm: "row" }} spacing={2} sx={{ display: "none" }}>
+        <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
           <Controller
             control={control}
             name="city"
@@ -202,10 +194,10 @@ function CompanyFields({
           render={({ field }) => (
             <TextField
               {...field}
-              label="Google Maps URL (optional)"
-              placeholder="https://maps.google.com/…"
+              label="Google Maps URL"
+              placeholder="https://maps.google.com/..."
               error={Boolean(errors.googleMapsUrl)}
-              helperText={errors.googleMapsUrl?.message}
+              helperText={errors.googleMapsUrl?.message ?? "Must be an HTTPS link"}
               fullWidth
             />
           )}
@@ -214,14 +206,7 @@ function CompanyFields({
           control={control}
           name="notes"
           render={({ field }) => (
-            <TextField
-              {...field}
-              label="Notes (optional)"
-              placeholder="Internal notes, scheduling preferences, certifications…"
-              multiline
-              minRows={2}
-              fullWidth
-            />
+            <TextField {...field} label="Notes" multiline minRows={2} fullWidth />
           )}
         />
       </Stack>
@@ -236,7 +221,6 @@ interface TechnicianRowProps {
   onRemove: () => void;
   canRemove: boolean;
   tradeOptions: string[];
-  showStatus: boolean;
 }
 
 function TechnicianRow({
@@ -246,13 +230,12 @@ function TechnicianRow({
   onRemove,
   canRemove,
   tradeOptions,
-  showStatus,
 }: TechnicianRowProps) {
   return (
     <Stack spacing={2} className="rounded-md border border-solid border-gray-200 p-3">
       <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
         <Typography variant="subtitle2" className="font-semibold">
-          {index + 1} - TECHNICIAN
+          Technician {index + 1}
         </Typography>
         <Tooltip title="Remove technician">
           <span>
@@ -273,8 +256,7 @@ function TechnicianRow({
         render={({ field }) => (
           <TextField
             {...field}
-            label="Technician name (optional)"
-            placeholder="Technician name"
+            label="Technician Name"
             error={Boolean(error?.contactName)}
             helperText={error?.contactName?.message}
             fullWidth
@@ -288,8 +270,8 @@ function TechnicianRow({
           render={({ field }) => (
             <TextField
               {...field}
-              label="Technician phone (optional)"
-              placeholder="(000) 000-0000"
+              label="Technician Phone"
+              placeholder="(XXX) XXX-XXXX"
               inputMode="tel"
               value={field.value ?? ""}
               onChange={(event) => field.onChange(formatNorthAmericanPhone(event.target.value))}
@@ -310,29 +292,26 @@ function TechnicianRow({
               error={Boolean(error?.email)}
               helperText={error?.email?.message}
               fullWidth
-              sx={{ display: "none" }}
             />
           )}
         />
       </Stack>
       <VendorTradeSpecialtiesField control={control} index={index} tradeOptions={tradeOptions} />
-      {showStatus && (
-        <Controller
-          control={control}
-          name={`technicians.${index}.isActive`}
-          render={({ field }) => (
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={field.value}
-                  onChange={(_event, checked) => field.onChange(checked)}
-                />
-              }
-              label={field.value ? "Active" : "Inactive"}
-            />
-          )}
-        />
-      )}
+      <Controller
+        control={control}
+        name={`technicians.${index}.isActive`}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Switch
+                checked={field.value}
+                onChange={(_event, checked) => field.onChange(checked)}
+              />
+            }
+            label={field.value ? "Active" : "Inactive"}
+          />
+        )}
+      />
     </Stack>
   );
 }
@@ -341,12 +320,10 @@ function TechniciansFieldArray({
   control,
   errors,
   tradeOptions,
-  showStatus,
 }: {
   control: Control<VendorCompanyRosterFormValues>;
   errors: FieldErrors<VendorCompanyRosterFormValues>;
   tradeOptions: string[];
-  showStatus: boolean;
 }) {
   const { fields, append, remove } = useFieldArray({ control, name: "technicians" });
 
@@ -389,7 +366,6 @@ function TechniciansFieldArray({
               onRemove={() => remove(index)}
               canRemove
               tradeOptions={tradeOptions}
-              showStatus={showStatus}
             />
           ))
         )}
@@ -399,17 +375,12 @@ function TechniciansFieldArray({
 }
 
 export function VendorRosterFormFields(props: VendorRosterFormFieldsProps) {
-  const { control, errors, tradeOptions = [], showTechnicianStatus = true } = props;
+  const { control, errors, tradeOptions = [] } = props;
   return (
     <Stack spacing={3}>
       <CompanyFields {...props} />
       <Divider />
-      <TechniciansFieldArray
-        control={control}
-        errors={errors}
-        tradeOptions={tradeOptions}
-        showStatus={showTechnicianStatus}
-      />
+      <TechniciansFieldArray control={control} errors={errors} tradeOptions={tradeOptions} />
     </Stack>
   );
 }
diff --git a/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx b/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
index a8203ecb..e3e7cfa5 100644
--- a/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
+++ b/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
@@ -1,9 +1,13 @@
-import { Button, Chip, CircularProgress, Stack, TablePagination } from "@mui/material";
-import { Plus, SlidersHorizontal } from "lucide-react";
-import { PageHeader } from "@/components/ui/page-header";
-import { SearchInput } from "@/components/ui/search-input";
-import { Text } from "@/components/ui/text";
-import { ToolbarButton } from "@/components/ui/toolbar-button";
+import FilterListIcon from "@mui/icons-material/FilterList";
+import {
+  Button,
+  Chip,
+  CircularProgress,
+  Stack,
+  TablePagination,
+  TextField,
+  Typography,
+} from "@mui/material";
 
 interface VendorsListToolbarProps {
   globalCount: number;
@@ -29,44 +33,52 @@ export function VendorsListToolbar({
   onAddVendor,
 }: VendorsListToolbarProps) {
   return (
-    <PageHeader
-      surface
-      className="-mx-4 -mt-4"
-      title="Vendors / Technicians"
-      subtitle={`${globalCount} technicians · ${activeCount} active`}
-      actions={
-        <>
-          <SearchInput
-            value={search}
-            onChange={onSearchChange}
-            placeholder="Search name, company, trade…"
-            aria-label="Search vendors"
-            inputClassName="h-8 py-0 text-[13px]"
-          />
-          <ToolbarButton
-            variant="outline"
-            icon={<SlidersHorizontal size={16} />}
-            onClick={onOpenFilters}
-            aria-label="Open vendor filters"
-            badge={appliedFilterCount}
-            className="w-[88.609375px] text-[13px]"
-          >
-            Filters
-          </ToolbarButton>
-          <ToolbarButton
-            variant="primary"
-            icon={<Plus size={16} />}
-            onClick={onAddVendor}
-            className="w-[115.546875px] border-0 px-3 text-[13px]"
-          >
-            Add Vendor
-          </ToolbarButton>
-          {isFetching && !isLoading && (
-            <CircularProgress size={14} aria-label="Refreshing vendors" role="status" />
+    <Stack
+      direction={{ xs: "column", md: "row" }}
+      spacing={2}
+      sx={{
+        alignItems: { xs: "stretch", md: "center" },
+        justifyContent: "space-between",
+      }}
+    >
+      <Stack direction="row" spacing={2} sx={{ alignItems: "baseline" }}>
+        <Typography variant="h5" component="h1">
+          Vendors / Technicians
+        </Typography>
+        <Typography variant="body2" sx={{ color: "text.secondary" }}>
+          {globalCount} vendor entries · {activeCount} active
+        </Typography>
+        {isFetching && !isLoading && <CircularProgress size={16} />}
+      </Stack>
+
+      <Stack
+        direction={{ xs: "column", sm: "row" }}
+        spacing={2}
+        sx={{ alignItems: { xs: "stretch", sm: "center" } }}
+      >
+        <TextField
+          size="small"
+          value={search}
+          onChange={(e) => onSearchChange(e.target.value)}
+          placeholder="Search name, company, trade..."
+          className="min-w-[260px]"
+        />
+        <Button
+          variant="outlined"
+          onClick={onOpenFilters}
+          startIcon={<FilterListIcon />}
+          aria-label="Open vendor filters"
+        >
+          Filters
+          {appliedFilterCount > 0 && (
+            <Chip size="small" color="primary" label={appliedFilterCount} sx={{ ml: 1 }} />
           )}
-        </>
-      }
-    />
+        </Button>
+        <Button variant="contained" onClick={onAddVendor}>
+          + Add Vendor
+        </Button>
+      </Stack>
+    </Stack>
   );
 }
 
@@ -78,21 +90,16 @@ interface AppliedChipEntry {
 
 interface VendorAppliedFiltersBarProps {
   chips: AppliedChipEntry[];
-  resultCount: number;
   onClearAll: () => void;
 }
 
-export function VendorAppliedFiltersBar({
-  chips,
-  resultCount,
-  onClearAll,
-}: VendorAppliedFiltersBarProps) {
+export function VendorAppliedFiltersBar({ chips, onClearAll }: VendorAppliedFiltersBarProps) {
   if (chips.length === 0) return null;
   return (
     <Stack direction="row" spacing={1} className="flex flex-wrap items-center">
-      <Text variant="caption" tone="muted">
-        {resultCount} {resultCount === 1 ? "technician" : "technicians"} · filtered by
-      </Text>
+      <Typography variant="caption" sx={{ color: "text.secondary" }}>
+        Applied:
+      </Typography>
       {chips.map((chip) => (
         <Chip
           key={chip.key}
@@ -139,31 +146,23 @@ export function VendorsListFooter({
       sx={{
         alignItems: { xs: "stretch", sm: "center" },
         justifyContent: "space-between",
-        minHeight: 33.5,
-        mx: -2,
-        px: 2,
-        backgroundColor: "var(--color-bg-surface)",
       }}
     >
-      <Text variant="caption" as="span" sx={{ color: "#6b7a96", fontSize: 11, lineHeight: 1.5 }}>
+      <Typography variant="body2" sx={{ color: "text.secondary" }}>
         {totalCount} {isActive ? "active" : "inactive"}{" "}
-        {totalCount === 1 ? "technician" : "technicians"}
+        {totalCount === 1 ? "vendor entry" : "vendor entries"}
         {isFiltered && " · filtered"}
-      </Text>
-      <Text variant="caption" as="span" sx={{ color: "#6b7a96", fontSize: 11, lineHeight: 1.5 }}>
-        {activeCount} active · {inactiveCount} inactive
-      </Text>
-      {totalCount > pageSize && (
-        <TablePagination
-          component="div"
-          count={totalCount}
-          page={page}
-          onPageChange={(_e, nextPage) => onPageChange(nextPage)}
-          rowsPerPage={pageSize}
-          onRowsPerPageChange={(e) => onPageSizeChange(Number(e.target.value))}
-          rowsPerPageOptions={[24, 48, 96]}
-        />
-      )}
+        {` · ${activeCount} active · ${inactiveCount} inactive`}
+      </Typography>
+      <TablePagination
+        component="div"
+        count={totalCount}
+        page={page}
+        onPageChange={(_e, nextPage) => onPageChange(nextPage)}
+        rowsPerPage={pageSize}
+        onRowsPerPageChange={(e) => onPageSizeChange(Number(e.target.value))}
+        rowsPerPageOptions={[12, 24, 48]}
+      />
     </Stack>
   );
 }
diff --git a/src/app/(protected)/vendors/_components/vendors-table.tsx b/src/app/(protected)/vendors/_components/vendors-table.tsx
index db588cff..802fff8a 100644
--- a/src/app/(protected)/vendors/_components/vendors-table.tsx
+++ b/src/app/(protected)/vendors/_components/vendors-table.tsx
@@ -1,10 +1,11 @@
 import { type KeyboardEvent, type MouseEvent } from "react";
-import SearchOffOutlinedIcon from "@mui/icons-material/SearchOffOutlined";
+import { useNavigate } from "react-router";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
 import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
 import {
   Avatar,
-  Box,
+  Chip,
   CircularProgress,
   IconButton,
   Link,
@@ -17,8 +18,8 @@ import {
   TableHead,
   TableRow,
   Tooltip,
+  Typography,
 } from "@mui/material";
-import { Text } from "@/components/ui/text";
 import type { VendorListItem } from "@/domain/vendors/types/vendor";
 
 const TABLE_COLUMNS = [
@@ -29,6 +30,9 @@ const TABLE_COLUMNS = [
   "Phone",
   "Email",
   "Total Jobs",
+  "Status",
+  "View",
+  "Edit",
 ] as const;
 
 function getInitials(name: string): string {
@@ -50,34 +54,19 @@ function stopPropagation(event: MouseEvent): void {
   event.stopPropagation();
 }
 
-function VendorStatus({ isActive }: { isActive: boolean }) {
-  return (
-    <Stack direction="row" spacing={1} sx={{ alignItems: "center", pl: 1 }}>
-      <Box
-        component="span"
-        sx={{
-          width: 6,
-          height: 6,
-          borderRadius: "9999px",
-          backgroundColor: isActive ? "success.main" : "text.secondary",
-        }}
-      />
-      <Text variant="description">{isActive ? "Active" : "Inactive"}</Text>
-    </Stack>
-  );
-}
-
 interface VendorTableRowProps {
   row: VendorListItem;
   onOpenDetail: (row: VendorListItem) => void;
-  onOpenEdit: (row: VendorListItem) => void;
+  onOpenDeactivation: (row: VendorListItem) => void;
 }
 
-function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps) {
+function VendorTableRow({ row, onOpenDetail, onOpenDeactivation }: VendorTableRowProps) {
+  const navigate = useNavigate();
   const trades = splitTrades(row.tradeSpecialties);
   const primaryTrade = trades[0] ?? "—";
   const extraTrades = trades.length > 1 ? trades.length - 1 : 0;
   const locationText = [row.city, row.state].filter(Boolean).join(", ") || "—";
+  const hasVendorId = row.id != null;
   const rowKey = String(row.id ?? `company-${row.companyId ?? ""}`);
 
   const handleKeyDown = (event: KeyboardEvent) => {
@@ -99,62 +88,37 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
       onKeyDown={handleKeyDown}
     >
       <TableCell>
-        <Text variant="description" sx={{ color: "var(--color-foreground)" }}>
-          {row.companyName || "—"}
-        </Text>
+        <Typography className="font-semibold">{row.companyName || "—"}</Typography>
       </TableCell>
       <TableCell>
-        <Stack direction="row" spacing={1.25} sx={{ alignItems: "center" }}>
+        <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
           <Avatar
             sx={{
               width: 28,
               height: 28,
-              backgroundColor: "var(--color-bg-muted)",
-              color: "var(--color-primary)",
-              fontSize: 10.5,
-              fontWeight: 600,
+              fontSize: 12,
+              backgroundColor: "var(--accent, #1976d2)",
             }}
           >
             {getInitials(row.contactName)}
           </Avatar>
-          <Text variant="description" sx={{ color: "var(--color-foreground)" }}>
-            {row.contactName || "—"}
-          </Text>
+          <Typography variant="body2">{row.contactName || "—"}</Typography>
         </Stack>
       </TableCell>
-      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>{locationText}</TableCell>
-      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>
+      <TableCell>{locationText}</TableCell>
+      <TableCell>
         {primaryTrade === "—" ? (
           "—"
         ) : (
           <Stack direction="row" spacing={0.5} sx={{ alignItems: "center" }}>
             <span>{primaryTrade}</span>
-            {extraTrades > 0 && (
-              <Box
-                component="span"
-                sx={{
-                  borderRadius: "9999px",
-                  backgroundColor: "var(--color-bg-muted)",
-                  px: 0.75,
-                  py: 0.25,
-                  fontSize: 10.5,
-                  lineHeight: 1.2,
-                }}
-              >
-                +{extraTrades}
-              </Box>
-            )}
+            {extraTrades > 0 && <Chip size="small" label={`+${extraTrades}`} />}
           </Stack>
         )}
       </TableCell>
-      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>
+      <TableCell>
         {row.phone ? (
-          <Link
-            href={`tel:${row.phone}`}
-            underline="hover"
-            color="inherit"
-            onClick={stopPropagation}
-          >
+          <Link href={`tel:${row.phone}`} underline="hover" onClick={stopPropagation}>
             {row.phone}
           </Link>
         ) : (
@@ -163,53 +127,71 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
       </TableCell>
       <TableCell>
         {row.email ? (
-          <Link
-            href={`mailto:${row.email}`}
-            underline="hover"
-            sx={{ color: "#6b7a96" }}
-            onClick={stopPropagation}
-          >
+          <Link href={`mailto:${row.email}`} underline="hover" onClick={stopPropagation}>
             {row.email}
           </Link>
         ) : (
           "—"
         )}
       </TableCell>
-      <TableCell align="center">{row.totalJobs ?? 0}</TableCell>
+      <TableCell>{row.totalJobs ?? 0}</TableCell>
       <TableCell>
-        <VendorStatus isActive={row.isActive} />
+        <Chip
+          size="small"
+          label={row.isActive ? "Active" : "Inactive"}
+          color={row.isActive ? "success" : "default"}
+        />
       </TableCell>
-      <TableCell align="right">
+      <TableCell align="center">
+        <Tooltip title="View details">
+          <IconButton
+            size="small"
+            aria-label={`View vendor ${row.companyName}`}
+            onClick={(event) => {
+              event.stopPropagation();
+              onOpenDetail(row);
+            }}
+          >
+            <VisibilityOutlinedIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+      </TableCell>
+      <TableCell align="center">
         <Stack
           direction="row"
           spacing={0.5}
-          className="vendor-row-actions"
-          sx={{ alignItems: "center", justifyContent: "flex-end" }}
+          sx={{ alignItems: "center", justifyContent: "center" }}
         >
-          <Tooltip title="View details">
-            <IconButton
-              size="small"
-              aria-label={`View vendor ${row.companyName}`}
-              onClick={(event) => {
-                event.stopPropagation();
-                onOpenDetail(row);
-              }}
-            >
-              <VisibilityOutlinedIcon fontSize="small" />
-            </IconButton>
-          </Tooltip>
           <Tooltip title="Edit">
             <IconButton
               size="small"
               aria-label={`Edit vendor ${row.companyName}`}
               onClick={(event) => {
                 event.stopPropagation();
-                onOpenEdit(row);
+                navigate(
+                  row.id != null
+                    ? `/vendors/edit/${row.id}`
+                    : `/vendors/company/${row.companyId ?? ""}`,
+                );
               }}
             >
               <EditOutlinedIcon fontSize="small" />
             </IconButton>
           </Tooltip>
+          {hasVendorId && row.isActive && (
+            <Tooltip title="Deactivate">
+              <IconButton
+                size="small"
+                aria-label="Deactivate vendor"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onOpenDeactivation(row);
+                }}
+              >
+                <DeleteOutlineIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          )}
         </Stack>
       </TableCell>
     </TableRow>
@@ -218,118 +200,50 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
 
 interface VendorsTableProps {
   rows: VendorListItem[];
-  isActive: boolean;
-  isFiltered: boolean;
   isLoading: boolean;
   showError: boolean;
   onOpenDetail: (row: VendorListItem) => void;
-  onOpenEdit: (row: VendorListItem) => void;
+  onOpenDeactivation: (row: VendorListItem) => void;
 }
 
 export function VendorsTable({
   rows,
-  isActive,
-  isFiltered,
   isLoading,
   showError,
   onOpenDetail,
-  onOpenEdit,
+  onOpenDeactivation,
 }: VendorsTableProps) {
   const showEmptyRow = !isLoading && !showError && rows.length === 0;
-  const columnCount = TABLE_COLUMNS.length + 2;
 
   return (
-    <TableContainer
-      component={Paper}
-      variant="outlined"
-      sx={{
-        mt: 2,
-        mb: 2,
-        flex: "1 1 auto",
-        overflow: "auto",
-        borderRadius: 1.5,
-        fontSize: 13,
-      }}
-    >
-      <Table
-        size="small"
-        stickyHeader
-        sx={{
-          minWidth: 1550,
-          tableLayout: "fixed",
-          "& .MuiTableCell-head": {
-            backgroundColor: "var(--color-bg-muted)",
-            color: "var(--color-foreground)",
-            fontSize: 10.5,
-            fontWeight: 700,
-            letterSpacing: "0.06em",
-            lineHeight: "24px",
-            px: 1.75,
-            py: 1.375,
-            textTransform: "uppercase",
-            whiteSpace: "nowrap",
-          },
-          "& .MuiTableCell-body": {
-            fontSize: 13,
-            px: 1.5,
-            py: 1,
-            height: 52,
-            lineHeight: 1.43,
-            whiteSpace: "nowrap",
-          },
-          "& .vendor-row-actions": {
-            opacity: { xs: 1, md: 0 },
-            transition: "opacity 120ms ease",
-          },
-          "& .MuiTableRow-root:hover .vendor-row-actions, & .MuiTableRow-root:focus-within .vendor-row-actions":
-            {
-              opacity: 1,
-            },
-        }}
-      >
-        <colgroup>
-          <col style={{ width: 196.34375 }} />
-          <col style={{ width: 207.25 }} />
-          <col style={{ width: 152.703125 }} />
-          <col style={{ width: 218.15625 }} />
-          <col style={{ width: 152.703125 }} />
-          <col style={{ width: 251.90625 }} />
-          <col style={{ width: 109.078125 }} />
-          <col style={{ width: 119.984375 }} />
-          <col style={{ width: 141.875 }} />
-        </colgroup>
+    <TableContainer component={Paper} variant="outlined" sx={{ overflowX: "auto" }}>
+      <Table size="small" sx={{ minWidth: 960 }}>
         <TableHead>
           <TableRow>
             {TABLE_COLUMNS.map((column) => (
-              <TableCell key={column} align={column === "Total Jobs" ? "center" : "left"}>
+              <TableCell
+                key={column}
+                align={column === "View" || column === "Edit" ? "center" : "left"}
+                className="font-semibold"
+              >
                 {column}
               </TableCell>
             ))}
-            <TableCell>Status</TableCell>
-            <TableCell align="right" aria-label="Vendor actions" />
           </TableRow>
         </TableHead>
         <TableBody>
           {isLoading ? (
             <TableRow>
-              <TableCell colSpan={columnCount} align="center" className="py-10">
+              <TableCell colSpan={TABLE_COLUMNS.length} align="center" className="py-10">
                 <CircularProgress size={28} />
               </TableCell>
             </TableRow>
           ) : showEmptyRow ? (
             <TableRow>
-              <TableCell colSpan={columnCount} align="center" className="py-10">
-                <Stack spacing={1} sx={{ alignItems: "center" }}>
-                  <SearchOffOutlinedIcon sx={{ color: "text.secondary", fontSize: 32 }} />
-                  <Text variant="description" className="font-semibold">
-                    {`No ${isActive ? "active" : "inactive"} technicians found`}
-                  </Text>
-                  <Text variant="caption" tone="muted">
-                    {isFiltered
-                      ? "Try a different search, or add a new vendor."
-                      : "Add a vendor to get started."}
-                  </Text>
-                </Stack>
+              <TableCell colSpan={TABLE_COLUMNS.length} align="center" className="py-10">
+                <Typography sx={{ color: "text.secondary" }}>
+                  No vendors match the current filters.
+                </Typography>
               </TableCell>
             </TableRow>
           ) : (
@@ -338,7 +252,7 @@ export function VendorsTable({
                 key={String(row.id ?? `company-${row.companyId ?? ""}`)}
                 row={row}
                 onOpenDetail={onOpenDetail}
-                onOpenEdit={onOpenEdit}
+                onOpenDeactivation={onOpenDeactivation}
               />
             ))
           )}
diff --git a/src/app/(protected)/vendors/index.tsx b/src/app/(protected)/vendors/index.tsx
index 48447ad6..a084b59b 100644
--- a/src/app/(protected)/vendors/index.tsx
+++ b/src/app/(protected)/vendors/index.tsx
@@ -23,91 +23,16 @@ interface AppliedChip {
   label: string;
 }
 
-function statusTabLabel(label: string, count: number) {
-  return (
-    <Box className="flex items-center gap-2">
-      <Box component="span">{label}</Box>
-      <Box
-        component="span"
-        className="min-w-5 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none"
-        sx={{ backgroundColor: "action.hover", color: "text.secondary" }}
-      >
-        {count}
-      </Box>
-    </Box>
-  );
-}
-
-function VendorStatusTabs({
-  isActive,
-  activeCount,
-  inactiveCount,
-  onChange,
-}: {
-  isActive: boolean;
-  activeCount: number;
-  inactiveCount: number;
-  onChange: (isActive: boolean) => void;
-}) {
-  return (
-    <Tabs
-      value={isActive ? "active" : "inactive"}
-      onChange={(_event, value: "active" | "inactive") => onChange(value === "active")}
-      aria-label="Vendor status"
-      sx={{
-        minHeight: 36,
-        flexShrink: 0,
-        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
-        backgroundColor: "var(--color-bg-surface)",
-        mx: -2,
-        px: 1.5,
-        "& .MuiTab-root": {
-          minHeight: 36,
-          px: 2,
-          py: 0,
-          fontSize: 13,
-          fontWeight: 500,
-          textTransform: "none",
-        },
-        "& .MuiTab-root:first-of-type": { width: 102.84375 },
-        "& .Mui-selected": { fontWeight: 600 },
-        "& .MuiTabs-indicator": { height: 2 },
-      }}
-    >
-      <Tab
-        value="active"
-        label={statusTabLabel("Active", activeCount)}
-        aria-label={`Active (${activeCount})`}
-      />
-      <Tab
-        value="inactive"
-        label={statusTabLabel("Inactive", inactiveCount)}
-        aria-label={`Inactive (${inactiveCount})`}
-      />
-    </Tabs>
-  );
-}
-
 function describeChips(
   filters: VendorFilters,
   jobBucketLabels: Map<string, string>,
 ): AppliedChip[] {
   const chips: AppliedChip[] = [];
-  filters.companies.forEach((value) =>
-    chips.push({ category: "companies", value, label: `Company: ${value}` }),
-  );
-  filters.trades.forEach((value) =>
-    chips.push({ category: "trades", value, label: `Trade: ${value}` }),
-  );
-  filters.locations.forEach((value) =>
-    chips.push({ category: "locations", value, label: `Location: ${value}` }),
-  );
+  filters.companies.forEach((value) => chips.push({ category: "companies", value, label: value }));
+  filters.trades.forEach((value) => chips.push({ category: "trades", value, label: value }));
+  filters.locations.forEach((value) => chips.push({ category: "locations", value, label: value }));
   filters.jobBuckets.forEach((value) =>
-    chips.push({
-      category: "jobBuckets",
-      value,
-      label: `Total Jobs: ${jobBucketLabels.get(value) ?? value}`,
-    }),
+    chips.push({ category: "jobBuckets", value, label: jobBucketLabels.get(value) ?? value }),
   );
   return chips;
 }
@@ -117,12 +42,7 @@ export default function VendorsListPage() {
   const [filtersOpen, setFiltersOpen] = useState(false);
   const [createOpen, setCreateOpen] = useState(false);
   const [detailTarget, setDetailTarget] = useState<VendorListItem | null>(null);
-  const [detailStartsInEdit, setDetailStartsInEdit] = useState(false);
-  const closeDetail = () => {
-    setDetailTarget(null);
-    setDetailStartsInEdit(false);
-  };
-  const deactivation = useVendorDeactivation(closeDetail);
+  const deactivation = useVendorDeactivation();
 
   const { data: facets } = useVendorFacets(filters.isActive);
   const { data, isLoading, isFetching, error } = useVendorsList(filters.listParams);
@@ -141,7 +61,7 @@ export default function VendorsListPage() {
   const appliedChips = describeChips(filters.appliedFilters, jobBucketLabels);
 
   return (
-    <Box className="flex h-full flex-col overflow-hidden px-4 pt-4 pb-0">
+    <Box className="flex flex-col gap-4 p-4">
       <VendorsListToolbar
         globalCount={activeCount + inactiveCount}
         activeCount={activeCount}
@@ -154,15 +74,18 @@ export default function VendorsListPage() {
         onAddVendor={() => setCreateOpen(true)}
       />
 
-      <VendorStatusTabs
-        isActive={filters.isActive}
-        activeCount={activeCount}
-        inactiveCount={inactiveCount}
-        onChange={filters.setIsActiveWithReset}
-      />
+      <Tabs
+        value={filters.isActive ? "active" : "inactive"}
+        onChange={(_event, value: "active" | "inactive") =>
+          filters.setIsActiveWithReset(value === "active")
+        }
+        aria-label="Vendor status"
+      >
+        <Tab value="active" label={`Active (${activeCount})`} />
+        <Tab value="inactive" label={`Inactive (${inactiveCount})`} />
+      </Tabs>
 
       <VendorAppliedFiltersBar
-        resultCount={totalCount}
         chips={appliedChips.map((chip) => ({
           key: `${chip.category}-${chip.value}`,
           label: chip.label,
@@ -179,18 +102,10 @@ export default function VendorsListPage() {
 
       <VendorsTable
         rows={rows}
-        isActive={filters.isActive}
-        isFiltered={appliedChips.length > 0 || Boolean(filters.debouncedSearch)}
         isLoading={isLoading}
         showError={Boolean(error)}
-        onOpenDetail={(row) => {
-          setDetailStartsInEdit(false);
-          setDetailTarget(row);
-        }}
-        onOpenEdit={(row) => {
-          setDetailStartsInEdit(true);
-          setDetailTarget(row);
-        }}
+        onOpenDetail={setDetailTarget}
+        onOpenDeactivation={deactivation.open}
       />
 
       <VendorsListFooter
@@ -218,9 +133,7 @@ export default function VendorsListPage() {
       <VendorDetailDrawer
         open={Boolean(detailTarget)}
         vendor={detailTarget}
-        startInEdit={detailStartsInEdit}
-        onRequestDeactivation={deactivation.open}
-        onClose={closeDetail}
+        onClose={() => setDetailTarget(null)}
       />
 
       <VendorDeactivationDialog
diff --git a/src/app/(protected)/workorders/_components/list/table/to-inline-draft-row.ts b/src/app/(protected)/workorders/_components/list/table/to-inline-draft-row.ts
index 1ec7ee46..1c4952ad 100644
--- a/src/app/(protected)/workorders/_components/list/table/to-inline-draft-row.ts
+++ b/src/app/(protected)/workorders/_components/list/table/to-inline-draft-row.ts
@@ -16,6 +16,7 @@ export function toInlineDraftRow(draft: WorkOrderTableDraft) {
     location: draft.location,
     dispatcherId: draft.dispatcherId,
     scheduledOn: draft.scheduledOn,
+    completedDate: "",
     dueDate: draft.dueDate,
     pm: draft.pm,
     serviceNotes: draft.serviceNotes,
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-cols.ts b/src/app/(protected)/workorders/_components/list/table/wo-table-cols.ts
index 837c8622..e9c4f1ee 100644
--- a/src/app/(protected)/workorders/_components/list/table/wo-table-cols.ts
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-cols.ts
@@ -12,8 +12,9 @@ export const WO_TABLE_COLS = [
   { key: "appt", label: "APPT TIME", w: 128 },
   { key: "status", label: "STATUS", w: 148 },
   { key: "doc", label: "COMP DOC", w: 84 },
+  { key: "completed", label: "COMPLETED DATE", w: 130 },
   { key: "actions", label: "", w: 100 },
 ] as const;
 
-export const WO_TABLE_MIN_WIDTH = 1504;
+export const WO_TABLE_MIN_WIDTH = 1634;
 export const WO_TABLE_ROW_HEIGHT = 52;
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
index a9052764..47c1d035 100644
--- a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
@@ -167,6 +167,10 @@ export function WoTableInlineRowCells({
       <td style={{ padding: "0 14px" }}>
         <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>—</span>
       </td>
+
+      <td style={{ padding: "0 14px" }}>
+        <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>—</span>
+      </td>
     </>
   );
 }
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells.tsx
index 04c3a231..4dcfddfd 100644
--- a/src/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells.tsx
@@ -2,6 +2,7 @@ import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
 import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
 import { ApptTimeCell } from "./cells/appt-time-cell";
 import { CompDocCell } from "./cells/comp-doc-cell";
+import { DateCell } from "./cells/date-cell";
 import { PMTypeCell } from "./cells/pm-type-cell";
 import { StatusCell } from "./cells/status-cell";
 import { VendorCell } from "./cells/vendor-cell";
@@ -99,6 +100,17 @@ export function WoTableRowServiceCells({
           onOpenMedia={() => handlers.onOpenMedia(row)}
         />
       </td>
+      <td
+        className="group/cell"
+        style={{ padding: "0 14px", ...mutationCellStyle }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <DateCell
+          value={row.completedDate}
+          q={search}
+          onSave={(date) => onPatchRow({ completedDate: date })}
+        />
+      </td>
     </>
   );
 }
diff --git a/src/components/ui/page-header.tsx b/src/components/ui/page-header.tsx
index 23c273cc..566ae837 100644
--- a/src/components/ui/page-header.tsx
+++ b/src/components/ui/page-header.tsx
@@ -49,17 +49,10 @@ export function PageHeader({
             "m-0 font-display mt-1! text-[30px]! font-extrabold leading-[1.1] tracking-[-0.02em] text-foreground",
             eyebrow && "mt-1",
           )}
-          sx={{ fontSize: 30, fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em" }}
         >
           {title}
         </Text>
-        <Text
-          variant="description"
-          as="span"
-          tone="muted"
-          when={Boolean(subtitle)}
-          sx={{ mt: 0.75, fontWeight: 500 }}
-        >
+        <Text variant="description" tone="muted" when={Boolean(subtitle)}>
           {subtitle}
         </Text>
       </Stack>
diff --git a/src/domain/work-orders/mappers/expand-scalar-board-ops.ts b/src/domain/work-orders/mappers/expand-scalar-board-ops.ts
index 332c677d..2faa69f8 100644
--- a/src/domain/work-orders/mappers/expand-scalar-board-ops.ts
+++ b/src/domain/work-orders/mappers/expand-scalar-board-ops.ts
@@ -27,6 +27,7 @@ const SCALAR_BOARD_OP_RULES: ScalarBoardOpRule[] = [
   { key: "status", field: "lifecycleStatus", toValue: (value) => value as string },
   { key: "dispatcherId", field: "assignTo", toValue: (value) => value as string },
   { key: "dueDate", field: "dueDate", toValue: (value) => value as string },
+  { key: "completedDate", field: "completedDate", toValue: (value) => value as string },
   { key: "vendorId", field: "vendorId", toValue: (value) => String(value) },
   { key: "apptTime", field: "apptTime", toValue: (value) => value as string },
   { key: "docStatus", field: "docStatus", toValue: (value) => mapDocStatusToApi(value as string) },
diff --git a/src/domain/work-orders/mappers/work-order-table-row-mapper.ts b/src/domain/work-orders/mappers/work-order-table-row-mapper.ts
index a12162c2..af886e9b 100644
--- a/src/domain/work-orders/mappers/work-order-table-row-mapper.ts
+++ b/src/domain/work-orders/mappers/work-order-table-row-mapper.ts
@@ -237,6 +237,7 @@ export function mapWorkOrderTableRow(raw: unknown): WorkOrderTableRow {
     dispatcherId,
     dispatcherName,
     scheduledOn,
+    completedDate: toDateInputValue(readString(item, "completedDate", "CompletedDate")),
     targetWeek: toDateInputValue(readString(item, "targetWeek", "TargetWeek")),
     dayGroup,
     dayLabel,
diff --git a/src/domain/work-orders/types/work-order-board.ts b/src/domain/work-orders/types/work-order-board.ts
index 021fe1c0..64f5158e 100644
--- a/src/domain/work-orders/types/work-order-board.ts
+++ b/src/domain/work-orders/types/work-order-board.ts
@@ -116,6 +116,7 @@ export type WorkOrderBoardEditableField =
   | "apptDate"
   | "apptTime"
   | "docStatus"
+  | "completedDate"
   | "pm"
   | "serviceNotes"
   | "extraServices"
@@ -146,6 +147,8 @@ export interface WorkOrderBoardRowApi {
   flagColor?: string | null;
   dueDate?: string | null;
   scheduledDate?: string | null;
+  /** ISO date when work was completed; optional on list rows until BE confirms. */
+  completedDate?: string | null;
   targetWeek?: string | null;
   scheduleWeekOnly?: boolean | null;
   dayGroup?: string | null;
diff --git a/src/domain/work-orders/types/work-order-table-row.ts b/src/domain/work-orders/types/work-order-table-row.ts
index 4bcb4b60..ca435096 100644
--- a/src/domain/work-orders/types/work-order-table-row.ts
+++ b/src/domain/work-orders/types/work-order-table-row.ts
@@ -12,6 +12,8 @@ export interface WorkOrderTableRow {
   dispatcherId: string;
   dispatcherName: string;
   scheduledOn: string;
+  /** Work completed date (API CompletedDate); distinct from scheduledOn. */
+  completedDate: string;
   targetWeek: string;
   dayGroup: string;
   dayLabel: string;
diff --git a/src/domain/work-orders/utils/slide-over-draft.ts b/src/domain/work-orders/utils/slide-over-draft.ts
index 9c8d897d..269c14ef 100644
--- a/src/domain/work-orders/utils/slide-over-draft.ts
+++ b/src/domain/work-orders/utils/slide-over-draft.ts
@@ -18,6 +18,7 @@ export const SLIDE_OVER_EDIT_KEYS = [
   "targetWeek",
   "scheduleWeekOnly",
   "dueDate",
+  "completedDate",
   "apptTime",
   "pm",
   "serviceNotes",
diff --git a/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx b/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
index 2e9f8f1f..e083f352 100644
--- a/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
+++ b/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
@@ -5,7 +5,6 @@ import { useController } from "react-hook-form";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const rosterGet = vi.fn();
-const saveMutate = vi.fn();
 
 vi.mock("@/domain/vendors/api/vendor-company-roster-api", () => ({
   vendorCompanyRosterApi: { get: (...args: unknown[]) => rosterGet(...args) },
@@ -29,10 +28,7 @@ vi.mock("@/domain/vendors/use-cases/use-save-vendor-company-roster", async () =>
   const actual = await vi.importActual<
     typeof import("@/domain/vendors/use-cases/use-save-vendor-company-roster")
   >("@/domain/vendors/use-cases/use-save-vendor-company-roster");
-  return {
-    ...actual,
-    useSaveVendorCompanyRoster: () => ({ mutate: saveMutate, isPending: false }),
-  };
+  return { ...actual, useSaveVendorCompanyRoster: () => ({ mutate: vi.fn(), isPending: false }) };
 });
 
 import { useVendorRosterForm } from "@/app/(protected)/vendors/_components/use-vendor-roster-form";
@@ -105,7 +101,6 @@ function deferRoster(): {
 describe("useVendorRosterForm load-error handling", () => {
   beforeEach(() => {
     rosterGet.mockReset();
-    saveMutate.mockReset();
   });
 
   it("shows a safe retryable error when selecting an existing company fetch is rejected", async () => {
@@ -201,44 +196,6 @@ describe("useVendorRosterForm load-error handling", () => {
   });
 });
 
-describe("useVendorRosterForm prototype defaults", () => {
-  it("does not persist the prototype's untouched optional technician card", () => {
-    const { result } = renderHook(
-      () => useVendorRosterForm({ mode: "create", startWithTechnician: true }),
-      { wrapper: makeWrapper(createClient()) },
-    );
-
-    act(() => {
-      result.current.submit({
-        name: "Independent Vendor LLC",
-        companyPhone: "(314) 555-0199",
-        email: "",
-        address: "",
-        city: "",
-        state: "",
-        zip: "",
-        googleMapsUrl: "",
-        notes: "",
-        technicians: [
-          {
-            contactName: "",
-            phone: "",
-            email: "",
-            preferredContact: "Phone",
-            tradeSpecialties: "",
-            isActive: true,
-          },
-        ],
-      });
-    });
-
-    expect(saveMutate).toHaveBeenCalledWith(
-      expect.objectContaining({ values: expect.objectContaining({ technicians: [] }) }),
-      expect.any(Object),
-    );
-  });
-});
-
 describe("useVendorRosterForm stale-selection handling", () => {
   beforeEach(() => {
     rosterGet.mockReset();
diff --git a/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx b/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx
index df329a4a..a55ddaf0 100644
--- a/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx
+++ b/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx
@@ -49,11 +49,11 @@ function rosterWith(technicians: Array<Record<string, unknown>>) {
   };
 }
 
-describe("VendorDetailDrawer selected-technician display", () => {
+describe("VendorDetailDrawer preferred-contact display", () => {
   it("renders no preference label when preferredContact is absent", () => {
     useVendorCompanyRoster.mockReturnValue(
       rosterWith([
-        { id: 1, contactName: "Adam", phone: "314-555-0198", isActive: true, totalJobs: 5 },
+        { id: 7, contactName: "Adam", phone: "314-555-0198", isActive: true, totalJobs: 5 },
       ]),
     );
 
@@ -62,15 +62,15 @@ describe("VendorDetailDrawer selected-technician display", () => {
       withAuth: false,
     });
 
-    expect(screen.getByRole("heading", { level: 2, name: "Adam" })).toBeInTheDocument();
+    expect(screen.getByText("Adam")).toBeInTheDocument();
     expect(screen.queryByText(/^Prefers/)).not.toBeInTheDocument();
   });
 
-  it("keeps the retired preferred-contact value out of the detail view", () => {
+  it("renders the preference label when an explicit preferredContact is present", () => {
     useVendorCompanyRoster.mockReturnValue(
       rosterWith([
         {
-          id: 1,
+          id: 7,
           contactName: "Adam",
           phone: "314-555-0198",
           preferredContact: "Email",
@@ -85,52 +85,6 @@ describe("VendorDetailDrawer selected-technician display", () => {
       withAuth: false,
     });
 
-    expect(screen.getByRole("heading", { level: 2, name: "Adam" })).toBeInTheDocument();
-    expect(screen.queryByText(/^Prefers/)).not.toBeInTheDocument();
-  });
-
-  it("falls back to the clicked row when the roster has no matching stable id", () => {
-    useVendorCompanyRoster.mockReturnValue(
-      rosterWith([
-        {
-          id: 7,
-          contactName: "Adam Whyte",
-          phone: "999-999-9999",
-          isActive: true,
-          totalJobs: 99,
-        },
-      ]),
-    );
-
-    renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
-      route: "/vendors",
-      withAuth: false,
-    });
-
-    expect(screen.getByText("0")).toBeInTheDocument();
-    expect(screen.queryByText("999-999-9999")).not.toBeInTheDocument();
-  });
-
-  it("does not expose a status control for a different technician", () => {
-    useVendorCompanyRoster.mockReturnValue(
-      rosterWith([
-        {
-          id: 7,
-          contactName: "Different Technician",
-          phone: "314-555-0101",
-          email: "",
-          tradeSpecialties: "Plumbing",
-          isActive: true,
-          totalJobs: 10,
-        },
-      ]),
-    );
-
-    renderWithProviders(
-      <VendorDetailDrawer open={true} vendor={vendor} startInEdit={true} onClose={vi.fn()} />,
-      { route: "/vendors", withAuth: false },
-    );
-
-    expect(screen.queryByRole("switch", { name: "Active status" })).not.toBeInTheDocument();
+    expect(screen.getByText("Prefers Email")).toBeInTheDocument();
   });
 });
diff --git a/src/test/app/(protected)/vendors/vendors-list.test.tsx b/src/test/app/(protected)/vendors/vendors-list.test.tsx
index a5fd7a64..64c71c69 100644
--- a/src/test/app/(protected)/vendors/vendors-list.test.tsx
+++ b/src/test/app/(protected)/vendors/vendors-list.test.tsx
@@ -1,14 +1,21 @@
-import { screen, within } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import VendorsListPage from "@/app/(protected)/vendors/index";
-import type { VendorCompanyRoster, VendorListItem } from "@/domain/vendors/types/vendor";
+import type { VendorListItem } from "@/domain/vendors/types/vendor";
 import { renderWithProviders } from "@/test/test-utils";
 
 const useVendorsList = vi.fn();
 const useVendorCompanyRoster = vi.fn();
 const useVendorDeactivationImpact = vi.fn();
 const mutate = vi.fn();
+const navigate = vi.fn();
+
+vi.mock("react-router", async () => {
+  const actual = await vi.importActual("react-router");
+  return { ...actual, useNavigate: () => navigate };
+});
+
 vi.mock("@/domain/vendors/use-cases/use-vendors-list", () => ({
   useVendorsList: (...args: unknown[]) => useVendorsList(...args),
 }));
@@ -54,32 +61,6 @@ const inactiveVendor = {
   isActive: false,
 };
 
-const activeRoster: VendorCompanyRoster = {
-  companyId: "co-1",
-  rowVersion: "rv-1",
-  name: "Gateway Plumbing",
-  companyPhone: "(314) 555-0100",
-  email: "dispatch@gatewayplumbing.com",
-  address: "",
-  city: "St. Louis",
-  state: "MO",
-  zip: "",
-  googleMapsUrl: "",
-  notes: "",
-  technicians: [
-    {
-      id: 1,
-      contactName: "Adam Whyte",
-      phone: "(314) 555-0198",
-      email: "dispatch@gatewayplumbing.com",
-      preferredContact: "Email",
-      tradeSpecialties: "Backflow Preventers",
-      isActive: true,
-      totalJobs: 0,
-    },
-  ],
-};
-
 function result(items: VendorListItem[], totalCount: number) {
   return {
     data: { items, totalCount, page: 1, pageSize: 12 },
@@ -90,13 +71,7 @@ function result(items: VendorListItem[], totalCount: number) {
 }
 
 function setupDefaults() {
-  useVendorCompanyRoster.mockReturnValue({
-    data: undefined,
-    isLoading: false,
-    isError: false,
-    error: null,
-    refetch: vi.fn(),
-  });
+  useVendorCompanyRoster.mockReturnValue({ data: undefined, isLoading: false, error: null });
   useVendorDeactivationImpact.mockReturnValue({
     data: undefined,
     isLoading: false,
@@ -105,7 +80,7 @@ function setupDefaults() {
 }
 
 describe("VendorsListPage", () => {
-  it("renders prototype-aligned status and two row actions in both tabs", async () => {
+  it("renders prototype-aligned status tabs and location, then hides deactivation for inactive rows", async () => {
     setupDefaults();
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], params.isActive ? 1 : 1);
@@ -116,20 +91,11 @@ describe("VendorsListPage", () => {
 
     expect(screen.getByRole("heading", { name: "Vendors / Technicians" })).toBeInTheDocument();
     expect(screen.getByText("St. Louis, MO")).toBeInTheDocument();
-    expect(screen.getByRole("columnheader", { name: "Status" })).toBeInTheDocument();
-    expect(screen.getByRole("cell", { name: "Active" })).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: "View vendor Gateway Plumbing" }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }),
-    ).toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: "Deactivate vendor" })).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Deactivate vendor" })).toBeInTheDocument();
 
     await userEvent.click(screen.getByRole("tab", { name: "Inactive (1)" }));
 
     expect(screen.getByText("Drain Cleaning Bros")).toBeInTheDocument();
-    expect(screen.getByRole("cell", { name: "Inactive" })).toBeInTheDocument();
     expect(screen.queryByRole("button", { name: "Deactivate vendor" })).not.toBeInTheDocument();
   });
 
@@ -148,18 +114,39 @@ describe("VendorsListPage", () => {
 
     renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
 
-    expect(screen.getByText(/25 active technicians/)).toBeInTheDocument();
-    expect(screen.queryByText(/3 active technicians/)).not.toBeInTheDocument();
+    expect(screen.getByText(/25 active vendor entries/)).toBeInTheDocument();
+    expect(screen.queryByText(/3 active vendor entries/)).not.toBeInTheDocument();
   });
 
   it("opens the detail drawer when a row is clicked or activated by keyboard", async () => {
     setupDefaults();
     useVendorCompanyRoster.mockReturnValue({
-      data: activeRoster,
+      data: {
+        companyId: "co-1",
+        rowVersion: "rv-1",
+        name: "Gateway Plumbing",
+        companyPhone: "(314) 555-0198",
+        email: "dispatch@gatewayplumbing.com",
+        address: "",
+        city: "St. Louis",
+        state: "MO",
+        zip: "",
+        googleMapsUrl: "",
+        notes: "",
+        technicians: [
+          {
+            id: 1,
+            contactName: "Adam Whyte",
+            phone: "(314) 555-0198",
+            email: "dispatch@gatewayplumbing.com",
+            preferredContact: "Email",
+            tradeSpecialties: "Backflow Preventers",
+            isActive: true,
+          },
+        ],
+      },
       isLoading: false,
-      isError: false,
       error: null,
-      refetch: vi.fn(),
     });
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], 1);
@@ -174,18 +161,11 @@ describe("VendorsListPage", () => {
     row.focus();
     await userEvent.keyboard("{Enter}");
 
-    expect(screen.getByRole("heading", { level: 2, name: "Adam Whyte" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "Gateway Plumbing" })).toBeInTheDocument();
   });
 
   it("blocks deactivation when the preflight reports open work orders", async () => {
     setupDefaults();
-    useVendorCompanyRoster.mockReturnValue({
-      data: activeRoster,
-      isLoading: false,
-      isError: false,
-      error: null,
-      refetch: vi.fn(),
-    });
     useVendorDeactivationImpact.mockReturnValue({
       data: {
         vendorId: 1,
@@ -209,8 +189,7 @@ describe("VendorsListPage", () => {
 
     renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
 
-    await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
-    await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
+    await userEvent.click(screen.getByRole("button", { name: "Deactivate vendor" }));
 
     expect(
       screen.getByText(/cannot be deactivated because it still has open work orders/),
@@ -220,51 +199,9 @@ describe("VendorsListPage", () => {
     expect(mutate).not.toHaveBeenCalled();
   });
 
-  it("preserves inline edits when deactivation is cancelled", async () => {
+  it("navigates to the vendor edit route when the table Edit control is clicked", async () => {
     setupDefaults();
-    useVendorCompanyRoster.mockReturnValue({
-      data: activeRoster,
-      isLoading: false,
-      isError: false,
-      error: null,
-      refetch: vi.fn(),
-    });
-    useVendorDeactivationImpact.mockReturnValue({
-      data: { vendorId: 1, canDeactivate: true, openWorkOrders: [] },
-      isLoading: false,
-      error: null,
-    });
-    useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
-      if (params.pageSize === 1) return result([], 1);
-      return params.isActive ? result([activeVendor], 1) : result([], 0);
-    });
-
-    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
-
-    await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
-    const company = screen.getByRole("textbox", { name: "Company" });
-    await userEvent.clear(company);
-    await userEvent.type(company, "Draft Company Name");
-    await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
-    await userEvent.click(
-      within(screen.getByRole("dialog", { name: "Deactivate Vendor" })).getByRole("button", {
-        name: "Cancel",
-      }),
-    );
-
-    expect(company).toBeInTheDocument();
-    expect(company).toHaveValue("Draft Company Name");
-  });
-
-  it("opens inline edit when the table Edit control is clicked", async () => {
-    setupDefaults();
-    useVendorCompanyRoster.mockReturnValue({
-      data: activeRoster,
-      isLoading: false,
-      isError: false,
-      error: null,
-      refetch: vi.fn(),
-    });
+    navigate.mockClear();
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], 1);
       return params.isActive ? result([activeVendor], 1) : result([], 0);
@@ -274,20 +211,16 @@ describe("VendorsListPage", () => {
 
     await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
 
-    expect(screen.getByRole("button", { name: "Save changes" })).toBeInTheDocument();
-    expect(screen.getByRole("textbox", { name: "Company" })).toHaveValue("Gateway Plumbing");
+    expect(navigate).toHaveBeenCalledWith("/vendors/edit/1");
+    expect(
+      screen.queryByRole("heading", { level: 2, name: "Gateway Plumbing" }),
+    ).not.toBeInTheDocument();
   });
 
-  it("opens inline company edit when the row has no vendor id", async () => {
+  it("navigates to the company route when editing a vendor without a vendor id", async () => {
     setupDefaults();
+    navigate.mockClear();
     const companyOnlyVendor = { ...activeVendor, id: null, companyId: "co-9" };
-    useVendorCompanyRoster.mockReturnValue({
-      data: { ...activeRoster, companyId: "co-9", technicians: [] },
-      isLoading: false,
-      isError: false,
-      error: null,
-      refetch: vi.fn(),
-    });
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], 1);
       return params.isActive ? result([companyOnlyVendor], 1) : result([], 0);
@@ -297,7 +230,6 @@ describe("VendorsListPage", () => {
 
     await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
 
-    expect(screen.getByRole("button", { name: "Save changes" })).toBeInTheDocument();
-    expect(screen.getByRole("textbox", { name: "Company" })).toHaveValue("Gateway Plumbing");
+    expect(navigate).toHaveBeenCalledWith("/vendors/company/co-9");
   });
 });
diff --git a/src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx b/src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx
index 004e96d3..0d7ef46c 100644
--- a/src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx
+++ b/src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx
@@ -75,6 +75,7 @@ const canceledRow: WorkOrderTableRow = {
   dispatcherId: "u1",
   dispatcherName: "Test Dispatcher",
   scheduledOn: "2026-07-20",
+  completedDate: "",
   targetWeek: "2026-07-20",
   dayGroup: "2026-07-20",
   dayLabel: "Mon",
diff --git a/src/test/domain/work-orders/mappers/completed-date-board-column.test.ts b/src/test/domain/work-orders/mappers/completed-date-board-column.test.ts
new file mode 100644
index 00000000..9b74c71a
--- /dev/null
+++ b/src/test/domain/work-orders/mappers/completed-date-board-column.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { WO_TABLE_COLS } from "@/app/(protected)/workorders/_components/list/table/wo-table-cols";
+import { expandScalarBoardOps } from "@/domain/work-orders/mappers/expand-scalar-board-ops";
+import { mapWorkOrderTableRow } from "@/domain/work-orders/mappers/work-order-table-row-mapper";
+
+describe("COMPLETED DATE board column wiring", () => {
+  it("includes COMPLETED DATE column after COMP DOC", () => {
+    const keys = WO_TABLE_COLS.map((col) => col.key);
+    expect(keys).toContain("completed");
+    expect(keys.indexOf("completed")).toBeGreaterThan(keys.indexOf("doc"));
+  });
+
+  it("expands completedDate patch to board field op", () => {
+    const ops = expandScalarBoardOps({ completedDate: "2026-07-30" });
+    expect(ops).toEqual([{ field: "completedDate", value: "2026-07-30" }]);
+  });
+
+  it("maps completedDate returned by a board GET row", () => {
+    const row = mapWorkOrderTableRow({
+      id: 42,
+      completedDate: "2026-07-30T00:00:00Z",
+    });
+
+    expect(row.completedDate).toBe("2026-07-30");
+  });
+});
diff --git a/src/test/domain/work-orders/utils/slide-over-draft.test.ts b/src/test/domain/work-orders/utils/slide-over-draft.test.ts
index 25788b12..30f342b3 100644
--- a/src/test/domain/work-orders/utils/slide-over-draft.test.ts
+++ b/src/test/domain/work-orders/utils/slide-over-draft.test.ts
@@ -15,6 +15,7 @@ function baseRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow
     dispatcherId: "10",
     dispatcherName: "Alex",
     scheduledOn: "2026-07-16",
+    completedDate: "",
     targetWeek: "",
     dayGroup: "2026-07-16",
     dayLabel: "Thu",
diff --git a/src/test/domain/work-orders/utils/table-filter-utils.test.ts b/src/test/domain/work-orders/utils/table-filter-utils.test.ts
index 4667ee78..088e3bdb 100644
--- a/src/test/domain/work-orders/utils/table-filter-utils.test.ts
+++ b/src/test/domain/work-orders/utils/table-filter-utils.test.ts
@@ -19,6 +19,7 @@ function makeRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow
     dispatcherId: "u1",
     dispatcherName: "Alice",
     scheduledOn: "2026-06-23",
+    completedDate: "",
     targetWeek: "",
     dayGroup: "06/23",
     dayLabel: "TUE · 06/23",
diff --git a/tmp/pr-descriptions/pr1-completed-date.md b/tmp/pr-descriptions/pr1-completed-date.md
new file mode 100644
index 00000000..0091fbd5
--- /dev/null
+++ b/tmp/pr-descriptions/pr1-completed-date.md
@@ -0,0 +1,35 @@
+## Summary
+
+- Adds an editable COMPLETED DATE column to the Work Orders board table (after COMP DOC).
+- Wires `completedDate` through board row typing, table-row mapping, and PATCH `field: "completedDate"`.
+- Inline create keeps an empty placeholder (date is not set at creation).
+
+## Scope
+
+### In
+
+- `completedDate` on `WorkOrderBoardRowApi` / `WorkOrderTableRow`
+- Column + `DateCell` on board rows
+- Scalar board patch expansion for `completedDate`
+- Unit test for column order and patch op
+
+### Out (follow-up PRs)
+
+- Comp Doc dialog changes, closability gates, uplift, severity, filters, wizard
+
+## API / BE
+
+- Contract assumed: PATCH `/workorders/{id}/board` with `field: "completedDate"` already supported
+- Confirm GET `/board` and `/board/search` rows include `completedDate` (see `docs/work-orders/pending-be-contract.md`)
+- Blocked on BE: none for FE wiring (tolerates missing GET field as empty string)
+
+## Test plan
+
+- [ ] Board shows COMPLETED DATE column after COMP DOC
+- [ ] Editing the cell PATCHes `completedDate`
+- [ ] Inline create row shows placeholder for completed date
+- [ ] `npm run verify` green locally
+
+## Base
+
+- Base branch: `dev`

From d72be8c5051637139faca457e1ff5c5c844fd387 Mon Sep 17 00:00:00 2001
From: Arthur Bassi <201806768+bassi-arthurr@users.noreply.github.com>
Date: Mon, 10 Aug 2026 17:12:13 -0300
Subject: [PATCH 03/17] fix(work-orders): use local calendar day for slide-over
 completedDate

[recover] remove malicious eslint payload (was 6a278c01)
---
 docs/work-orders/pending-be-contract.md       |  58 ---
 e2e/vendors/vendors.spec.ts                   | 114 ++---
 .../_components/use-vendor-deactivation.ts    |   7 +-
 .../_components/use-vendor-list-state.ts      |   2 +-
 .../_components/use-vendor-roster-form.ts     |  36 +-
 .../_components/vendor-create-modal.tsx       |  33 +-
 .../_components/vendor-detail-drawer.tsx      | 418 ++++++------------
 .../_components/vendor-filter-options.tsx     | 252 -----------
 .../_components/vendor-filters-drawer.tsx     | 239 +++++++++-
 .../_components/vendor-roster-form-fields.tsx | 101 ++---
 .../_components/vendors-list-toolbar.tsx      | 145 +++---
 .../vendors/_components/vendors-table.tsx     | 242 ++++------
 src/app/(protected)/vendors/index.tsx         | 125 +-----
 .../_components/comp-doc/comp-doc-co-line.tsx |  19 +
 .../comp-doc/comp-doc-detail-row.tsx          |  39 ++
 .../comp-doc-dialog-footer-draft-actions.tsx  |  70 +++
 ...mp-doc-dialog-footer-generated-actions.tsx |  62 +++
 ...doc-dialog-footer-not-required-actions.tsx |  53 +++
 .../comp-doc/comp-doc-dialog-footer.tsx       |  94 ++++
 .../comp-doc/comp-doc-dialog-header.tsx       |  96 ++++
 .../comp-doc-dialog-resource-links.tsx        |  48 ++
 .../_components/comp-doc/comp-doc-dialog.tsx  | 132 ++++++
 .../comp-doc/comp-doc-edit-row.tsx            |  51 +++
 .../comp-doc/comp-doc-footer-button-sx.ts     |   8 +
 .../comp-doc-preview-company-header.tsx       |  36 ++
 .../comp-doc/comp-doc-preview-document.tsx    |  58 +++
 .../comp-doc-preview-not-required-stamp.tsx   |  25 ++
 .../comp-doc-preview-procedure-notes.tsx      |  68 +++
 .../comp-doc-preview-service-info.tsx         |  89 ++++
 .../comp-doc-preview-status-badge.tsx         |  32 ++
 .../comp-doc-preview-vendor-safety.tsx        |  35 ++
 .../_components/comp-doc/comp-doc-preview.tsx |  65 +++
 .../comp-doc/comp-doc-procedure-list.tsx      |  32 ++
 .../_components/comp-doc/comp-doc-sidebar.tsx | 174 ++++++++
 .../comp-doc/use-comp-doc-dialog-seed.ts      |  59 +++
 .../comp-doc/use-comp-doc-dialog.tsx          | 179 ++++++++
 .../use-comp-doc-not-required-actions.ts      |  58 +++
 .../comp-doc/use-comp-doc-pdf-actions.ts      |  98 ++++
 .../comp-doc/use-comp-doc-persist-flow.ts     |  84 ++++
 .../_components/detail/audit-timeline.tsx     |  67 +++
 .../detail/slide-over-audit-list.tsx          | 164 +++++++
 .../_components/detail/slide-over-footer.tsx  | 143 ++++++
 .../_components/detail/slide-over-header.tsx  | 106 +++++
 .../detail/slide-over-info-row.tsx            |  22 +
 .../detail/tabs/slide-over-audit-tab.tsx      |  11 +
 .../detail/tabs/slide-over-comments-tab.tsx   | 265 +++++++++++
 .../tabs/slide-over-completion-actions.tsx    |  92 ++++
 .../tabs/slide-over-completion-media.tsx      |  52 +++
 .../slide-over-completion-readonly-status.tsx |  45 ++
 .../tabs/slide-over-completion-signoffs.tsx   |  35 ++
 .../detail/tabs/slide-over-completion-tab.tsx | 143 ++++++
 .../detail/tabs/slide-over-doc-badge.tsx      |  44 ++
 .../detail/tabs/slide-over-extras-tab.tsx     | 163 +++++++
 .../slide-over-info-tab-assigned-field.tsx    |  28 ++
 .../tabs/slide-over-info-tab-display-view.tsx |  92 ++++
 .../tabs/slide-over-info-tab-edit-view.tsx    | 160 +++++++
 .../tabs/slide-over-info-tab-status-field.tsx |  26 ++
 .../tabs/slide-over-info-tab-vendor-field.tsx |  45 ++
 .../detail/tabs/slide-over-info-tab.tsx       |  64 +++
 .../detail/use-slide-over-edit-state.ts       | 162 +++++++
 .../detail/use-slide-over-media-state.ts      |  97 ++++
 .../detail/use-work-order-slide-over.ts       | 151 +++++++
 .../detail/work-order-activity-section.tsx    | 101 +++++
 .../detail/work-order-assignee-menu.tsx       |  56 +++
 .../work-order-description-accordion.tsx      |  20 +
 .../detail/work-order-detail-sections.tsx     |  49 ++
 .../detail/work-order-details-card.tsx        |  45 ++
 .../work-order-dispatches-accordion.tsx       |  85 ++++
 .../detail/work-order-simple-accordions.tsx   |  61 +++
 .../detail/work-order-slide-over-tab-nav.tsx  |  52 +++
 .../work-order-slide-over-tab-panel.tsx       |  33 ++
 .../detail/work-order-slide-over-tabs.tsx     | 156 +++++++
 .../detail/work-order-slide-over.tsx          | 108 +++++
 .../detail/work-order-status-menu.tsx         |  50 +++
 .../list/work-order-cancel-dialog.tsx         |  50 +++
 .../_components/media/media-upload-modal.tsx  |  69 ++-
 .../media/media-uploader-dropzone.tsx         |  60 +++
 .../media/media-uploader-grid-item-chrome.tsx | 113 +++++
 .../media/media-uploader-grid-item-meta.tsx   |  67 +++
 .../media-uploader-grid-item-preview.tsx      |  52 +++
 .../media/media-uploader-grid-item.tsx        |  46 ++
 .../_components/media/media-uploader-grid.tsx |  42 ++
 .../_components/media/media-uploader.tsx      | 206 ++++-----
 .../_hooks/use-media-upload-session.ts        | 199 +++++++++
 .../_hooks/use-work-orders-list-page.ts       | 131 ++++++
 src/app/(protected)/workorders/index.tsx      | 147 +++---
 src/components/ui/page-header.tsx             |   9 +-
 .../api/work-order-board-documents-api.ts     |  27 +-
 .../mappers/expand-scalar-board-ops.ts        |   1 +
 .../mappers/work-order-board-detail-mapper.ts |   8 +-
 .../mappers/work-order-table-row-mapper.ts    |   1 +
 .../work-orders/types/work-order-board.ts     |   1 +
 .../work-orders/types/work-order-media.ts     |   6 +
 .../work-orders/types/work-order-table-row.ts |   2 +
 .../use-cases/use-work-order-mutations.ts     |  34 +-
 .../use-work-order-table-mutations.ts         | 126 ++++--
 .../utils/run-sequential-uploads.ts           |  24 +
 .../work-orders/utils/slide-over-draft.ts     |   3 +-
 .../utils/work-order-media-limits.ts          |  17 +
 .../utils/work-order-patch-queue.ts           |  20 +
 .../vendors/use-vendor-roster-form.test.tsx   |  45 +-
 .../vendors/vendor-detail-drawer.test.tsx     |  58 +--
 .../(protected)/vendors/vendors-list.test.tsx | 166 ++-----
 ...mp-doc-dialog-completion-contract.test.tsx | 229 ++++++++++
 .../comp-doc-dialog-footer-exclusive.test.tsx |  53 +++
 .../media-upload-modal-api.test.tsx           | 114 +++++
 .../use-media-upload-session.test.tsx         | 206 +++++++++
 .../use-slide-over-media-state.test.tsx       | 142 ++++++
 ...work-order-slide-over-failed-save.test.tsx | 171 +++++++
 ...ork-orders-advanced-search-wiring.test.tsx |   7 +
 ...ork-orders-board-core-affordances.test.tsx |  15 +-
 .../work-orders/api/work-orders-api.test.ts   |   7 +
 .../work-order-board-detail-mapper.test.ts    |  27 ++
 ...der-table-mutations-completed-date.test.ts |  50 +++
 .../use-work-order-table-mutations.test.tsx   | 209 +++++++++
 .../utils/run-sequential-uploads.test.ts      |  65 +++
 .../utils/slide-over-draft.test.ts            |  15 +
 .../slide-over-failed-save-baseline.test.ts   |  99 +++++
 .../utils/slide-over-save-contract.test.ts    |  76 ++++
 .../utils/table-filter-utils.test.ts          |   1 +
 .../utils/wizard-date-utils.test.ts           |  28 +-
 .../utils/work-order-media-limits.test.ts     |  14 +
 .../utils/work-order-patch-queue.test.ts      |  62 +++
 123 files changed, 8230 insertions(+), 1619 deletions(-)
 delete mode 100644 docs/work-orders/pending-be-contract.md
 delete mode 100644 src/app/(protected)/vendors/_components/vendor-filter-options.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-co-line.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-detail-row.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-draft-actions.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-generated-actions.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-not-required-actions.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-header.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-resource-links.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-edit-row.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-footer-button-sx.ts
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-company-header.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-document.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-not-required-stamp.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-procedure-notes.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-service-info.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-status-badge.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-vendor-safety.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-procedure-list.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/comp-doc-sidebar.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog-seed.ts
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog.tsx
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-not-required-actions.ts
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-pdf-actions.ts
 create mode 100644 src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-persist-flow.ts
 create mode 100644 src/app/(protected)/workorders/_components/detail/audit-timeline.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/slide-over-audit-list.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/slide-over-footer.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/slide-over-header.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/slide-over-info-row.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/tabs/slide-over-audit-tab.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/tabs/slide-over-comments-tab.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-actions.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-media.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-readonly-status.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-signoffs.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-tab.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/tabs/slide-over-doc-badge.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-assigned-field.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-display-view.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-edit-view.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-status-field.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-vendor-field.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/use-slide-over-edit-state.ts
 create mode 100644 src/app/(protected)/workorders/_components/detail/use-slide-over-media-state.ts
 create mode 100644 src/app/(protected)/workorders/_components/detail/use-work-order-slide-over.ts
 create mode 100644 src/app/(protected)/workorders/_components/detail/work-order-activity-section.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/work-order-assignee-menu.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/work-order-description-accordion.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/work-order-detail-sections.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/work-order-details-card.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/work-order-dispatches-accordion.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/work-order-simple-accordions.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-nav.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-panel.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/work-order-slide-over-tabs.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/work-order-slide-over.tsx
 create mode 100644 src/app/(protected)/workorders/_components/detail/work-order-status-menu.tsx
 create mode 100644 src/app/(protected)/workorders/_components/list/work-order-cancel-dialog.tsx
 create mode 100644 src/app/(protected)/workorders/_components/media/media-uploader-dropzone.tsx
 create mode 100644 src/app/(protected)/workorders/_components/media/media-uploader-grid-item-chrome.tsx
 create mode 100644 src/app/(protected)/workorders/_components/media/media-uploader-grid-item-meta.tsx
 create mode 100644 src/app/(protected)/workorders/_components/media/media-uploader-grid-item-preview.tsx
 create mode 100644 src/app/(protected)/workorders/_components/media/media-uploader-grid-item.tsx
 create mode 100644 src/app/(protected)/workorders/_components/media/media-uploader-grid.tsx
 create mode 100644 src/app/(protected)/workorders/_hooks/use-media-upload-session.ts
 create mode 100644 src/app/(protected)/workorders/_hooks/use-work-orders-list-page.ts
 create mode 100644 src/domain/work-orders/utils/run-sequential-uploads.ts
 create mode 100644 src/domain/work-orders/utils/work-order-patch-queue.ts
 create mode 100644 src/test/app/(protected)/workorders/comp-doc-dialog-completion-contract.test.tsx
 create mode 100644 src/test/app/(protected)/workorders/comp-doc-dialog-footer-exclusive.test.tsx
 create mode 100644 src/test/app/(protected)/workorders/media-upload-modal-api.test.tsx
 create mode 100644 src/test/app/(protected)/workorders/use-media-upload-session.test.tsx
 create mode 100644 src/test/app/(protected)/workorders/use-slide-over-media-state.test.tsx
 create mode 100644 src/test/app/(protected)/workorders/work-order-slide-over-failed-save.test.tsx
 create mode 100644 src/test/domain/work-orders/use-cases/use-work-order-table-mutations-completed-date.test.ts
 create mode 100644 src/test/domain/work-orders/use-cases/use-work-order-table-mutations.test.tsx
 create mode 100644 src/test/domain/work-orders/utils/run-sequential-uploads.test.ts
 create mode 100644 src/test/domain/work-orders/utils/slide-over-failed-save-baseline.test.ts
 create mode 100644 src/test/domain/work-orders/utils/slide-over-save-contract.test.ts
 create mode 100644 src/test/domain/work-orders/utils/work-order-patch-queue.test.ts

diff --git a/docs/work-orders/pending-be-contract.md b/docs/work-orders/pending-be-contract.md
deleted file mode 100644
index a3a92f53..00000000
--- a/docs/work-orders/pending-be-contract.md
+++ /dev/null
@@ -1,58 +0,0 @@
-# Pending BE contract (WO design parity gaps)
-
-Local checklist for FE branches off `dev`. Confirm with backend before shipping PR3/PR5 to production. Until confirmed, FE may use typed clients + mocks.
-
-## Board row / PATCH
-
-| Field                                                    | Needed by     | Notes                                                                  |
-| -------------------------------------------------------- | ------------- | ---------------------------------------------------------------------- |
-| `completedDate` on GET `/board` and `/board/search` rows | PR1, PR4      | PATCH `field: "completedDate"` expected; confirm GET includes ISO date |
-| `severity` (`1`–`5` \| `null`) on row, create, PATCH     | PR2, PR5      | Required for Emergency/Reactive; PATCH `field: "severity"`             |
-| `upliftSummary` on row                                   | PR3, PR4, PR5 | `{ hasUplift, pendingCount, primaryStatus? }`                          |
-| `hasPendingUplift` on row/detail                         | PR4           | Prefer server 422 on Completed / completion-doc when pending           |
-| `additionalContacts[]`                                   | PR6           | `{ name, phone, notes? }[]` on create/detail/PATCH                     |
-| `isAddOn`                                                | PR5 (filter)  | Indicator, not a WO type (SH-126)                                      |
-
-## Proposed WO-scoped uplift endpoints (confirm vs NTE `uplifts` queue)
-
-| Method | Path                                        | Body                              |
-| ------ | ------------------------------------------- | --------------------------------- |
-| GET    | `workorders/{id}/uplifts`                   | —                                 |
-| POST   | `workorders/{id}/uplifts`                   | `{ amount, notes, attachments? }` |
-| POST   | `workorders/{id}/uplifts/{upliftId}/cancel` | —                                 |
-| POST   | `workorders/{id}/uplifts/{upliftId}/revoke` | `{ reason? }`                     |
-
-Statuses (design): `pending` \| `approved` \| `auto_approved` \| `rejected` \| `cancelled` \| `revoked`.
-
-## Search query params (`GET workorders/board/search`)
-
-| Param                          | Meaning                   |
-| ------------------------------ | ------------------------- |
-| `severities`                   | multi `1`–`5`             |
-| `rescheduled` / `carriedOver`  | boolean (≥2 counters)     |
-| `addOn`                        | boolean (`isAddOn`)       |
-| `flagColors`                   | multi `#RRGGBB`           |
-| `internalOnly`                 | WO# starts with `SH`      |
-| `avetaOnly`                    | if `avetaRequired` exists |
-| `hasUplift` + `upliftStatuses` | uplift filters            |
-
-Already documented in `board-search-api.md`: datePreset, sites, types, overdue, dispatchers, statuses, pmTypes, vendorIds, docStatuses.
-
-## Comments
-
-| Field                                    | Needed by |
-| ---------------------------------------- | --------- |
-| POST `{ text, mentions?: string[] }`     | PR9       |
-| Response includes mentions for highlight | PR9       |
-
-## Vendor
-
-| Item                                                           | Needed by |
-| -------------------------------------------------------------- | --------- |
-| Create technician under company (confirm existing vendors API) | PR7       |
-
-## Optional
-
-| Item                                | Needed by                        |
-| ----------------------------------- | -------------------------------- |
-| 422 on duplicate WO number (global) | PR8 (FE dialog works without it) |
diff --git a/e2e/vendors/vendors.spec.ts b/e2e/vendors/vendors.spec.ts
index e5c8bcf3..8bbfdfb8 100644
--- a/e2e/vendors/vendors.spec.ts
+++ b/e2e/vendors/vendors.spec.ts
@@ -306,18 +306,11 @@ test.describe("Vendor directory prototype parity", () => {
   test("covers status tabs, global counts, search, facets, table fields, and filtered footer", async ({
     page,
   }) => {
-    await page.setViewportSize({ width: 1440, height: 1000 });
     const state = await mockVendorApi(page);
     await page.goto("/vendors");
 
-    const heading = page.getByRole("heading", { name: "Vendors / Technicians" });
-    await expect(heading).toBeVisible();
-    await expect(heading).toHaveCSS("font-family", /Montserrat/);
-    await expect(heading).toHaveCSS("font-size", "30px");
-    await expect(heading).toHaveCSS("font-weight", "800");
-    await expect(heading).toHaveCSS("line-height", "33px");
-    await expect(heading).toHaveCSS("letter-spacing", "-0.6px");
-    await expect(page.getByText("3 technicians · 2 active")).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Vendors / Technicians" })).toBeVisible();
+    await expect(page.getByText("3 vendor entries · 2 active")).toBeVisible();
     await expect(page.getByRole("tab", { name: "Active (2)" })).toHaveAttribute(
       "aria-selected",
       "true",
@@ -330,58 +323,52 @@ test.describe("Vendor directory prototype parity", () => {
       "Phone",
       "Email",
       "Total Jobs",
+      "Status",
     ]) {
       await expect(page.getByRole("columnheader", { name: heading })).toBeVisible();
     }
-    await expect(page.getByRole("columnheader", { name: "Status" })).toBeVisible();
-    const activeTabBox = await page.getByRole("tab", { name: "Active (2)" }).boundingBox();
-    expect(activeTabBox).toMatchObject({ x: 256, y: 159.5, height: 36 });
-    const tableContainerBox = await page.locator("table").locator("..").boundingBox();
-    expect(tableContainerBox).toMatchObject({ x: 260, y: 212.5, width: 1164 });
-    expect(tableContainerBox?.height).toBeCloseTo(738, 0);
-    expect((await page.locator("table").boundingBox())?.width).toBe(1550);
-    expect((await page.getByRole("columnheader", { name: "Company" }).boundingBox())?.height).toBe(
-      47,
-    );
-    expect((await page.locator("tbody tr").first().boundingBox())?.height).toBe(52);
     await expect(page.getByText("Gateway Plumbing")).toBeVisible();
     await expect(page.getByText("+1")).toBeVisible();
-    await expect(page.getByText("2 active technicians")).toBeVisible();
-    await expect(page.getByText("2 active · 1 inactive")).toBeVisible();
+    await expect(page.getByText("2 active vendor entries · 2 active · 1 inactive")).toBeVisible();
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-list.png");
 
-    await page.getByPlaceholder("Search name, company, trade…").fill("metro");
+    await page.getByPlaceholder("Search name, company, trade...").fill("metro");
     await expect(page.getByText("Metro HVAC")).toBeVisible();
-    await expect(page.getByText(/1 active technician · filtered/)).toBeVisible();
+    await expect(page.getByText(/1 active vendor entry · filtered/)).toBeVisible();
     expect(state.listUrls.some((url) => new URL(url).searchParams.get("search") === "metro")).toBe(
       true,
     );
 
-    await page.getByPlaceholder("Search name, company, trade…").fill("clayton");
+    await page.getByPlaceholder("Search name, company, trade...").fill("clayton");
     await expect(page.getByText("Metro HVAC")).toBeVisible();
 
-    await page.getByPlaceholder("Search name, company, trade…").clear();
+    await page.getByPlaceholder("Search name, company, trade...").clear();
     await page.getByRole("button", { name: "Open vendor filters" }).click();
     await expect(page.getByRole("heading", { name: "Filters" })).toBeVisible();
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-filters.png");
     await page.getByRole("button", { name: /Company/ }).click();
     await page.getByPlaceholder("All companies").click();
     await page.getByRole("option", { name: /Gateway Plumbing/ }).click();
-    await page.getByRole("button", { name: "Apply filters" }).click();
+    await page.getByRole("button", { name: "Apply" }).click();
     await expect(page.getByText("Gateway Plumbing").first()).toBeVisible();
-    await expect(page.getByText("1 technician · filtered by")).toBeVisible();
-    await expect(page.getByText(/1 active technician · filtered/)).toBeVisible();
+    await expect(page.getByText(/1 active vendor entry · filtered/)).toBeVisible();
     expect(
       state.listUrls.some(
         (url) => new URL(url).searchParams.get("companies[0]") === "Gateway Plumbing",
       ),
     ).toBe(true);
 
+    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
+    await expect(page.getByRole("dialog", { name: "Deactivate Vendor" })).toContainText(
+      "history will be preserved",
+    );
+    await page.getByRole("button", { name: "Deactivate", exact: true }).click();
+    await expect.poll(() => state.deletedId).toBe("1");
+
     await page.getByRole("tab", { name: "Inactive (1)" }).click();
-    await expect(page.getByText("No inactive technicians found")).toBeVisible();
+    await expect(page.getByText("No vendors match the current filters.")).toBeVisible();
     await page.getByRole("button", { name: "Clear all" }).click();
     await expect(page.getByText("Drain Cleaning Bros")).toBeVisible();
-    await expect(page.getByRole("columnheader", { name: "Status" })).toBeVisible();
     await expect(page.getByRole("button", { name: "Deactivate vendor" })).toHaveCount(0);
   });
 
@@ -391,35 +378,33 @@ test.describe("Vendor directory prototype parity", () => {
     const state = await mockVendorApi(page);
     await page.goto("/vendors");
 
-    await page.getByRole("button", { name: "Add Vendor", exact: true }).click();
-    await expect(page.getByText("Register a vendor company and its technicians.")).toBeVisible();
-    await captureVisual(page, "/tmp/seahaven-vendor-implemented-add.png");
+    await page.getByRole("button", { name: "+ Add Vendor" }).click();
     await expect(
-      page.getByRole("button", { name: "Add Vendor", exact: true }).last(),
-    ).toBeEnabled();
+      page.getByText("Register a company and add zero, one, or multiple technicians."),
+    ).toBeVisible();
+    await captureVisual(page, "/tmp/seahaven-vendor-implemented-add.png");
+    await expect(page.getByRole("button", { name: "Add Vendor Company" }).last()).toBeDisabled();
 
     await page.getByRole("combobox", { name: "Company" }).click();
     await page.getByRole("option", { name: "Gateway Plumbing" }).click();
-    await expect(page.getByLabel("Company Phone (optional)")).toHaveValue("314-555-0100");
-    await expect(page.getByRole("textbox", { name: "Email (optional)", exact: true })).toHaveValue(
+    await expect(page.getByLabel("Company Phone")).toHaveValue("314-555-0100");
+    await expect(page.getByRole("textbox", { name: "Email", exact: true })).toHaveValue(
       "dispatch@gateway.test",
     );
-    await expect(page.getByLabel("Address (optional)")).toHaveValue("1 Market St");
-    await expect(page.getByLabel("Google Maps URL (optional)")).toHaveValue(
-      "https://maps.google.com/gateway",
-    );
+    await expect(page.getByLabel("Address")).toHaveValue("1 Market St");
+    await expect(page.getByLabel("Google Maps URL")).toHaveValue("https://maps.google.com/gateway");
     await expect(page.getByLabel("Preferred Contact")).toHaveCount(0);
     await page.getByRole("button", { name: "Add technician" }).click();
-    await page.getByLabel("Technician name (optional)").last().fill("New Technician");
+    await page.getByLabel("Technician Name").last().fill("New Technician");
     const tradeInput = page.getByRole("combobox", { name: "Add Trade" }).last();
     await tradeInput.fill("HVAC");
     await tradeInput.press("Enter");
     await tradeInput.fill("Plumbing");
     await tradeInput.press("Enter");
     await page.getByRole("button", { name: "Move Plumbing up" }).click();
-    await page.getByLabel("Notes (optional)").fill("Created in browser E2E");
-    await page.getByRole("button", { name: "Add Vendor", exact: true }).last().click();
-    await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toHaveCount(0);
+    await page.getByLabel("Notes").fill("Created in browser E2E");
+    await page.getByRole("button", { name: "Add Vendor Company" }).last().click();
+    await expect(page.getByRole("dialog", { name: "Add Vendor Company" })).toHaveCount(0);
     expect(state.updatedBody).toMatchObject({
       name: "Gateway Plumbing",
       companyPhone: "(314) 555-0100",
@@ -444,7 +429,7 @@ test.describe("Vendor directory prototype parity", () => {
 
     await page.getByRole("button", { name: "View vendor Gateway Plumbing" }).click();
     const detailDrawer = page.locator(".MuiDrawer-paper").last();
-    await expect(detailDrawer.getByRole("heading", { name: "Adam Whyte" })).toBeVisible();
+    await expect(detailDrawer.getByRole("heading", { name: "Gateway Plumbing" })).toBeVisible();
     await expect(detailDrawer.getByText("Adam Whyte")).toBeVisible();
     await expect(detailDrawer.getByText("72")).toBeVisible();
     await expect(
@@ -453,9 +438,9 @@ test.describe("Vendor directory prototype parity", () => {
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-detail.png");
 
     await detailDrawer.getByRole("button", { name: "Edit" }).click();
-    await expect(page).toHaveURL(/\/vendors$/);
-    await detailDrawer.getByLabel("Notes (optional)").fill("Updated in browser E2E");
-    await detailDrawer.getByRole("button", { name: "Save changes" }).click();
+    await expect(page).toHaveURL(/\/vendors\/edit\/1$/);
+    await page.getByLabel("Notes").fill("Updated in browser E2E");
+    await page.getByRole("button", { name: "Save" }).click();
     await expect.poll(() => state.updatedBody?.notes).toBe("Updated in browser E2E");
   });
 
@@ -463,18 +448,18 @@ test.describe("Vendor directory prototype parity", () => {
     const state = await mockVendorApi(page, { legacyGateway: true });
     await page.goto("/vendors");
 
-    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
-    await page.getByRole("switch", { name: "Active status" }).click();
+    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
     await page.getByRole("button", { name: "Deactivate", exact: true }).click();
     await expect.poll(() => state.deletedId).toBe("1");
 
     await page.getByRole("tab", { name: "Inactive (2)" }).click();
-    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
+    await page.getByRole("button", { name: "View vendor Gateway Plumbing" }).click();
     const detailDrawer = page.locator(".MuiDrawer-paper").last();
-    await detailDrawer.getByRole("switch", { name: "Active status" }).click();
-    await detailDrawer.getByRole("button", { name: "Save changes" }).click();
+    await detailDrawer.getByRole("button", { name: "Edit" }).click();
+    await expect(page).toHaveURL(/\/vendors\/edit\/1$/);
+    await page.getByRole("switch", { name: "Inactive" }).first().click();
+    await page.getByRole("button", { name: "Save" }).click();
     await expect.poll(() => state.updatedBody).toEqual({ isActive: true });
-    await detailDrawer.getByRole("button", { name: "Close drawer" }).click();
     await page.getByRole("tab", { name: "Active (2)", exact: true }).click();
     await expect(page.getByText("Gateway Plumbing").first()).toBeVisible();
   });
@@ -483,7 +468,7 @@ test.describe("Vendor directory prototype parity", () => {
     const state = await mockVendorApi(page);
     await page.goto("/vendors");
 
-    const addButton = page.getByRole("button", { name: "Add Vendor", exact: true });
+    const addButton = page.getByRole("button", { name: "+ Add Vendor" });
     await addButton.focus();
     await page.keyboard.press("Enter");
     await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toBeVisible();
@@ -492,12 +477,10 @@ test.describe("Vendor directory prototype parity", () => {
     await expect(addButton).toBeFocused();
 
     await addButton.click();
-    await expect(
-      page.getByRole("button", { name: "Add Vendor", exact: true }).last(),
-    ).toBeEnabled();
+    await expect(page.getByRole("button", { name: "Add Vendor Company" }).last()).toBeDisabled();
     await page.getByRole("combobox", { name: "Company" }).fill("Independent Vendor LLC");
-    await page.getByLabel("Company Phone (optional)").fill("3145550199");
-    await page.getByRole("button", { name: "Add Vendor", exact: true }).last().click();
+    await page.getByLabel("Company Phone").fill("3145550199");
+    await page.getByRole("button", { name: "Add Vendor Company" }).last().click();
 
     await expect.poll(() => state.createdBody?.name).toBe("Independent Vendor LLC");
     expect(state.createdBody?.technicians).toEqual([]);
@@ -523,8 +506,7 @@ test.describe("Vendor directory prototype parity", () => {
     const blockedState = await mockVendorApi(page, { deactivationBlocked: true });
     await page.goto("/vendors");
 
-    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
-    await page.getByRole("switch", { name: "Active status" }).click();
+    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
     const blockedDialog = page.getByRole("dialog", { name: "Deactivate Vendor" });
     await expect(blockedDialog).toContainText("WO-501 — Emergency boiler repair");
     await expect(blockedDialog.getByRole("button", { name: /^Deactivate$/ })).toBeDisabled();
@@ -535,8 +517,7 @@ test.describe("Vendor directory prototype parity", () => {
 
     const racedState = await mockVendorApi(page, { deleteConflict: true });
     await page.reload();
-    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
-    await page.getByRole("switch", { name: "Active status" }).click();
+    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
     await page
       .getByRole("dialog", { name: "Deactivate Vendor" })
       .getByRole("button", {
@@ -560,7 +541,6 @@ test.describe("Vendor directory prototype parity", () => {
       /Vendor directory unavailable|failed|server error/i,
       { timeout: 15_000 },
     );
-    await captureVisual(page, "/tmp/seahaven-vendor-implemented-mobile-list.png");
     await page.getByRole("button", { name: "Open vendor filters" }).click();
     const filterDrawer = page.locator(".MuiDrawer-paper").filter({ hasText: "Total Jobs" });
     await expect(filterDrawer).toBeVisible();
diff --git a/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts b/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
index b63291be..9b6f3b0d 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
@@ -15,7 +15,7 @@ export interface VendorDeactivationState {
   confirm: () => void;
 }
 
-export function useVendorDeactivation(onSuccess?: () => void): VendorDeactivationState {
+export function useVendorDeactivation(): VendorDeactivationState {
   const [target, setTarget] = useState<VendorListItem | null>(null);
   const [error, setError] = useState<string | null>(null);
   const deleteVendor = useDeleteVendor();
@@ -39,10 +39,7 @@ export function useVendorDeactivation(onSuccess?: () => void): VendorDeactivatio
     if (!target || target.id == null) return;
     setError(null);
     deleteVendor.mutate(target.id, {
-      onSuccess: () => {
-        setTarget(null);
-        onSuccess?.();
-      },
+      onSuccess: () => setTarget(null),
       onError: (err: Error) => setError(err.message || "Failed to deactivate vendor"),
     });
   };
diff --git a/src/app/(protected)/vendors/_components/use-vendor-list-state.ts b/src/app/(protected)/vendors/_components/use-vendor-list-state.ts
index fdc90685..9385a834 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-list-state.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-list-state.ts
@@ -31,7 +31,7 @@ export interface VendorListState {
 export function useVendorListState(): VendorListState {
   const [search, setSearch] = useState("");
   const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(48);
+  const [pageSize, setPageSize] = useState(12);
   const [isActive, setIsActive] = useState(true);
   const [appliedFilters, setAppliedFilters] = useState<VendorFilters>(emptyVendorFilters);
 
diff --git a/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts b/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
index 6bf89b1f..f6ea637a 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
@@ -2,7 +2,6 @@ import { useCallback, useMemo, useState } from "react";
 import { useForm, useWatch, type FieldErrors } from "react-hook-form";
 import {
   emptyVendorCompanyRosterForm,
-  emptyRosterTechnician,
   vendorCompanyRosterSchema,
   type VendorCompanyRosterFormValues,
 } from "@/domain/vendors/schemas/vendor-roster-schema";
@@ -21,30 +20,11 @@ import type {
   VendorRosterConflict,
 } from "@/domain/vendors/types/vendor";
 
-function withoutBlankNewTechnicians(
-  values: VendorCompanyRosterFormValues,
-): VendorCompanyRosterFormValues {
-  return {
-    ...values,
-    technicians: values.technicians.filter(
-      (technician) =>
-        technician.id != null ||
-        Boolean(
-          technician.contactName.trim() ||
-          technician.phone.trim() ||
-          technician.email.trim() ||
-          technician.tradeSpecialties.trim(),
-        ),
-    ),
-  };
-}
-
 export interface VendorRosterFormProps {
   mode: "create" | "update";
   vendorId?: string | number;
   companyId?: string | number;
   onSuccess?: (roster: VendorCompanyRoster) => void;
-  startWithTechnician?: boolean;
 }
 
 export interface VendorRosterForm {
@@ -75,7 +55,6 @@ export function useVendorRosterForm({
   vendorId,
   companyId,
   onSuccess,
-  startWithTechnician = false,
 }: VendorRosterFormProps): VendorRosterForm {
   const query = useVendorCompanyRoster(
     mode === "update" ? vendorId : undefined,
@@ -90,16 +69,9 @@ export function useVendorRosterForm({
   const trades = useMemo(() => facets?.trades ?? [], [facets]);
   const resolver = useVendorRosterResolver(routeRoster);
 
-  const createDefaults = useMemo(
-    () => ({
-      ...emptyVendorCompanyRosterForm,
-      technicians: startWithTechnician ? [{ ...emptyRosterTechnician }] : [],
-    }),
-    [startWithTechnician],
-  );
   const form = useForm<VendorCompanyRosterFormValues>({
     resolver,
-    defaultValues: createDefaults,
+    defaultValues: emptyVendorCompanyRosterForm,
     values: mode === "update" && routeRoster ? toFormValues(routeRoster) : undefined,
     mode: "onChange",
   });
@@ -124,10 +96,10 @@ export function useVendorRosterForm({
   }, [routeRoster, watched]);
 
   const resetForm = useCallback(() => {
-    reset(createDefaults);
+    reset(emptyVendorCompanyRosterForm);
     resetSelection();
     clearConflict();
-  }, [clearConflict, createDefaults, reset, resetSelection]);
+  }, [clearConflict, reset, resetSelection]);
 
   const committedRoster = mode === "update" ? routeRoster : selection.selectedRoster;
   const isUpdate = mode === "update" || selection.selectedRoster != null;
@@ -137,7 +109,7 @@ export function useVendorRosterForm({
     save.mutate(
       {
         mode: isUpdate ? "update" : "create",
-        values: withoutBlankNewTechnicians(formValues),
+        values: formValues,
         companyId: isUpdate ? (committedRoster?.companyId ?? companyId) : undefined,
         rowVersion: isUpdate ? committedRoster?.rowVersion : undefined,
         originalRoster: mode === "update" ? routeRoster : undefined,
diff --git a/src/app/(protected)/vendors/_components/vendor-create-modal.tsx b/src/app/(protected)/vendors/_components/vendor-create-modal.tsx
index 31804a3c..d0025662 100644
--- a/src/app/(protected)/vendors/_components/vendor-create-modal.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-create-modal.tsx
@@ -8,8 +8,8 @@ import {
   DialogContent,
   DialogTitle,
   Stack,
+  Typography,
 } from "@mui/material";
-import { Text } from "@/components/ui/text";
 import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
 import { VendorRosterFormFields } from "./vendor-roster-form-fields";
 import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
@@ -21,11 +21,7 @@ interface VendorCreateModalProps {
 }
 
 export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
-  const form = useVendorRosterForm({
-    mode: "create",
-    onSuccess: onClose,
-    startWithTechnician: true,
-  });
+  const form = useVendorRosterForm({ mode: "create", onSuccess: onClose });
   const { resetForm } = form;
 
   useEffect(() => {
@@ -37,24 +33,17 @@ export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
       open={open}
       onClose={form.isSaving ? undefined : onClose}
       fullWidth
-      maxWidth="sm"
+      maxWidth="md"
       aria-labelledby="vendor-create-dialog-title"
-      slotProps={{
-        paper: {
-          role: "dialog",
-          sx: { maxHeight: "88vh", borderRadius: 2 },
-        },
-      }}
+      slotProps={{ paper: { role: "dialog" } }}
     >
       <DialogTitle id="vendor-create-dialog-title">
-        <Text variant="title" as="span">
-          Add Vendor
-        </Text>
-        <Text variant="description" tone="muted" sx={{ mt: 0.5 }}>
-          Register a vendor company and its technicians.
-        </Text>
+        Add Vendor Company
+        <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.5 }}>
+          Register a company and add zero, one, or multiple technicians.
+        </Typography>
       </DialogTitle>
-      <DialogContent sx={{ maxHeight: "55vh" }}>
+      <DialogContent>
         <Stack spacing={2} className="mt-1">
           {form.loadErrorMessage !== null && (
             <VendorRosterLoadErrorAlert message={form.loadErrorMessage} onRetry={form.retryLoad} />
@@ -84,9 +73,9 @@ export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
           variant="contained"
           type="submit"
           form="vendor-create-form"
-          disabled={form.isSaving}
+          disabled={form.isSaving || !form.isValid}
         >
-          {form.isSaving ? <CircularProgress size={20} color="inherit" /> : "Add Vendor"}
+          {form.isSaving ? <CircularProgress size={20} color="inherit" /> : "Add Vendor Company"}
         </Button>
       </DialogActions>
     </Dialog>
diff --git a/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx b/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx
index 74d6ef02..ad7ffa29 100644
--- a/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState, type ReactNode } from "react";
-import { Controller, useWatch } from "react-hook-form";
+import { useEffect, type ReactNode } from "react";
+import { useNavigate } from "react-router";
 import CloseIcon from "@mui/icons-material/Close";
 import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import LaunchIcon from "@mui/icons-material/Launch";
@@ -13,22 +13,15 @@ import {
   Drawer,
   IconButton,
   Link,
+  List,
+  ListItem,
   Stack,
-  Switch,
+  Typography,
 } from "@mui/material";
-import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
-import { VendorRosterFormFields } from "./vendor-roster-form-fields";
-import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
-import { useVendorRosterForm } from "./use-vendor-roster-form";
-import { Text } from "@/components/ui/text";
-import type {
-  VendorCompanyRoster,
-  VendorListItem,
-  VendorRosterTechnician,
-} from "@/domain/vendors/types/vendor";
 import { useVendorCompanyRoster } from "@/domain/vendors/use-cases/use-vendor-company-roster";
+import type { VendorCompanyRoster, VendorListItem } from "@/domain/vendors/types/vendor";
 
-const DRAWER_WIDTH = 420;
+const DRAWER_WIDTH = 440;
 
 function splitTrades(value: string | undefined): string[] {
   return (value ?? "")
@@ -40,45 +33,106 @@ function splitTrades(value: string | undefined): string[] {
 interface VendorDetailDrawerProps {
   open: boolean;
   vendor: VendorListItem | null;
-  startInEdit?: boolean;
-  onRequestDeactivation?: (vendor: VendorListItem) => void;
   onClose: () => void;
 }
 
 function SectionTitle({ children }: { children: ReactNode }) {
   return (
-    <Text
-      variant="label"
-      tone="muted"
-      className="font-semibold tracking-[0.06em] uppercase"
-      sx={{ mb: 1 }}
+    <Typography
+      variant="subtitle2"
+      className="font-semibold uppercase"
+      sx={{ color: "text.secondary", mb: 1 }}
     >
       {children}
-    </Text>
+    </Typography>
   );
 }
 
-function Field({ label, value }: { label: string; value?: string }) {
-  const display = !value || value.trim() === "" ? "—" : value;
+function Field({ label, value }: { label: string; value: string }) {
+  const display = value && value.trim() !== "" ? value : "—";
   return (
     <Box>
-      <Text variant="caption" tone="muted" sx={{ display: "block" }}>
+      <Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
         {label}
-      </Text>
-      <Text variant="description">{display}</Text>
+      </Typography>
+      <Typography variant="body2">{display}</Typography>
     </Box>
   );
 }
 
+function TechnicianEntry({
+  contactName,
+  phone,
+  email,
+  preferredContact,
+  tradeSpecialties,
+  isActive,
+  totalJobs,
+}: {
+  contactName: string;
+  phone: string;
+  email: string;
+  preferredContact?: string;
+  tradeSpecialties: string;
+  isActive: boolean;
+  totalJobs: number;
+}) {
+  const trades = splitTrades(tradeSpecialties);
+  return (
+    <ListItem disableGutters divider>
+      <Stack spacing={0.5} className="w-full">
+        <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+          <Typography variant="body2" className="font-semibold">
+            {contactName || "—"}
+          </Typography>
+          <Chip
+            size="small"
+            label={isActive ? "Active" : "Inactive"}
+            color={isActive ? "success" : "default"}
+          />
+          <Typography variant="caption" sx={{ color: "text.secondary" }}>
+            {totalJobs} jobs
+          </Typography>
+        </Stack>
+        <Stack direction="row" spacing={2} className="flex flex-wrap">
+          {Boolean(phone) && (
+            <Link href={`tel:${phone}`} underline="hover">
+              {phone}
+            </Link>
+          )}
+          {Boolean(email) && (
+            <Link href={`mailto:${email}`} underline="hover">
+              {email}
+            </Link>
+          )}
+        </Stack>
+        <Stack direction="row" spacing={1} sx={{ alignItems: "center", flexWrap: "wrap" }}>
+          {Boolean(preferredContact) && (
+            <Typography variant="caption" sx={{ color: "text.secondary" }}>
+              Prefers {preferredContact}
+            </Typography>
+          )}
+          {trades.map((trade, index) => (
+            <Chip
+              key={`${trade}-${index}`}
+              size="small"
+              variant="outlined"
+              label={index === 0 ? `${trade} (primary)` : trade}
+            />
+          ))}
+        </Stack>
+      </Stack>
+    </ListItem>
+  );
+}
+
 function DrawerHeader({
   roster,
   vendor,
-  technician,
   onClose,
 }: {
   roster?: VendorCompanyRoster;
   vendor: VendorListItem | null;
-  technician?: VendorRosterTechnician;
   onClose: () => void;
 }) {
   return (
@@ -87,18 +141,23 @@ function DrawerHeader({
       sx={{
         alignItems: "center",
         justifyContent: "space-between",
-        px: 2.5,
+        px: 3,
         py: 2,
         borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
       }}
     >
       <Box>
-        <Text id="vendor-detail-drawer-title" variant="title" as="h2" className="font-semibold">
-          {technician?.contactName || vendor?.contactName || roster?.name || "Vendor company"}
-        </Text>
-        <Text variant="description" tone="muted">
-          {roster?.name || vendor?.companyName || "Vendor details"}
-        </Text>
+        <Typography
+          id="vendor-detail-drawer-title"
+          variant="subtitle1"
+          component="h2"
+          className="font-semibold"
+        >
+          {roster?.name || vendor?.companyName || "Vendor company"}
+        </Typography>
+        <Typography variant="caption" sx={{ color: "text.secondary" }}>
+          {roster ? `${roster.technicians.length} technician(s)` : "Vendor details"}
+        </Typography>
       </Box>
       <IconButton aria-label="Close drawer" onClick={onClose} size="small">
         <CloseIcon fontSize="small" />
@@ -108,19 +167,18 @@ function DrawerHeader({
 }
 
 function CompanySection({ roster }: { roster: VendorCompanyRoster }) {
-  const address = [roster.address, roster.city, roster.state, roster.zip]
-    .filter(Boolean)
-    .join(", ");
-
+  const mapsUrl = roster.googleMapsUrl;
   return (
     <Stack spacing={1.5}>
-      <Field label="Company" value={roster.name} />
       <Field label="Company Phone" value={roster.companyPhone} />
-      <Field label="Company Email" value={roster.email} />
-      <Field label="Address" value={address} />
-      {Boolean(roster.googleMapsUrl) && (
+      <Field label="Email" value={roster.email} />
+      <Field
+        label="Address"
+        value={[roster.address, roster.city, roster.state, roster.zip].filter(Boolean).join(", ")}
+      />
+      {Boolean(mapsUrl) && (
         <Link
-          href={roster.googleMapsUrl}
+          href={mapsUrl}
           target="_blank"
           rel="noopener noreferrer"
           className="inline-flex items-center gap-1"
@@ -133,79 +191,49 @@ function CompanySection({ roster }: { roster: VendorCompanyRoster }) {
   );
 }
 
-function TechnicianSection({ technician }: { technician: VendorRosterTechnician }) {
-  const trades = splitTrades(technician.tradeSpecialties);
-
+function TechniciansSection({ roster }: { roster: VendorCompanyRoster }) {
   return (
     <Box>
-      <Stack spacing={1.5}>
-        <Field label="Phone" value={technician.phone} />
-        <Box>
-          <Text variant="caption" tone="muted" sx={{ display: "block", mb: 0.75 }}>
-            Trade
-          </Text>
-          <Stack direction="row" spacing={0.75} sx={{ flexWrap: "wrap" }}>
-            {trades.length > 0 ? (
-              trades.map((trade, index) => (
-                <Chip key={`${trade}-${index}`} size="small" variant="outlined" label={trade} />
-              ))
-            ) : (
-              <Text variant="description">—</Text>
-            )}
-          </Stack>
-        </Box>
-        <Stack direction="row" spacing={4} sx={{ alignItems: "flex-end" }}>
-          <Box>
-            <Text variant="title">{technician.totalJobs ?? 0}</Text>
-            <Text variant="caption" tone="muted" sx={{ display: "block" }}>
-              Total Jobs
-            </Text>
-          </Box>
-          <Box>
-            <Text variant="caption" tone="muted" sx={{ display: "block", mb: 0.5 }}>
-              Status
-            </Text>
-            <Chip
-              size="small"
-              label={technician.isActive ? "Active" : "Inactive"}
-              color={technician.isActive ? "success" : "default"}
+      <SectionTitle>Technicians</SectionTitle>
+      {roster.technicians.length === 0 ? (
+        <Typography variant="body2" sx={{ color: "text.secondary" }}>
+          No technicians assigned to this company.
+        </Typography>
+      ) : (
+        <List disablePadding>
+          {roster.technicians.map((technician) => (
+            <TechnicianEntry
+              key={String(technician.id ?? technician.contactName)}
+              contactName={technician.contactName}
+              phone={technician.phone}
+              email={technician.email}
+              preferredContact={technician.preferredContact}
+              tradeSpecialties={technician.tradeSpecialties}
+              isActive={technician.isActive}
+              totalJobs={technician.totalJobs}
             />
-          </Box>
-        </Stack>
-      </Stack>
+          ))}
+        </List>
+      )}
     </Box>
   );
 }
 
-function DrawerBody({
-  roster,
-  technician,
-}: {
-  roster: VendorCompanyRoster;
-  technician?: VendorRosterTechnician;
-}) {
+function DrawerBody({ roster }: { roster: VendorCompanyRoster }) {
   return (
-    <Stack spacing={3} className="flex-1 overflow-y-auto" sx={{ p: 2.5 }}>
-      <Box>
-        <SectionTitle>Company</SectionTitle>
-        <CompanySection roster={roster} />
-      </Box>
+    <Stack spacing={3} className="flex-1 overflow-y-auto" sx={{ px: 3, py: 3 }}>
+      <SectionTitle>Company</SectionTitle>
+      <CompanySection roster={roster} />
       <Divider />
-      {technician ? (
-        <TechnicianSection technician={technician} />
-      ) : (
-        <Text variant="description" tone="muted">
-          No technicians assigned to this company.
-        </Text>
-      )}
+      <TechniciansSection roster={roster} />
       {Boolean(roster.notes) && (
         <>
           <Divider />
           <Box>
             <SectionTitle>Notes</SectionTitle>
-            <Text variant="description" sx={{ whiteSpace: "pre-wrap" }}>
+            <Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
               {roster.notes}
-            </Text>
+            </Typography>
           </Box>
         </>
       )}
@@ -218,8 +246,8 @@ function DrawerActions({ onEdit }: { onEdit: () => void }) {
     <Stack
       direction="row"
       sx={{
-        px: 2.5,
-        py: 1.5,
+        px: 3,
+        py: 2,
         borderTop: (theme) => `1px solid ${theme.palette.divider}`,
         alignItems: "center",
         justifyContent: "flex-end",
@@ -232,143 +260,8 @@ function DrawerActions({ onEdit }: { onEdit: () => void }) {
   );
 }
 
-function DrawerEditor({
-  vendor,
-  onClose,
-  onSaved,
-  onRequestDeactivation = () => undefined,
-}: {
-  vendor: VendorListItem;
-  onClose: () => void;
-  onSaved: () => void;
-  onRequestDeactivation: (vendor: VendorListItem) => void;
-}) {
-  const form = useVendorRosterForm({
-    mode: "update",
-    vendorId: vendor.id ?? undefined,
-    companyId: vendor.id == null ? (vendor.companyId ?? undefined) : undefined,
-    onSuccess: onSaved,
-  });
-  const roster = form.roster;
-  const technicians = useWatch({ control: form.control, name: "technicians" }) ?? [];
-  const selectedIndex = technicians.findIndex(
-    (technician) => technician.id != null && String(technician.id) === String(vendor.id),
-  );
-  const selectedTotalJobs =
-    roster?.technicians.find(
-      (technician) => technician.id != null && String(technician.id) === String(vendor.id),
-    )?.totalJobs ?? vendor.totalJobs;
-
-  if (form.isLoading) {
-    return <CircularProgress size={28} sx={{ m: "auto" }} />;
-  }
-  if (form.isError || !roster) {
-    return (
-      <Alert severity="error" sx={{ m: 2 }}>
-        Failed to load vendor company. Try again.
-      </Alert>
-    );
-  }
-
-  return (
-    <Box
-      component="form"
-      id="vendor-drawer-edit-form"
-      onSubmit={form.handleSubmit(form.submit)}
-      className="flex min-h-0 flex-1 flex-col"
-    >
-      <Stack spacing={2} className="flex-1 overflow-y-auto" sx={{ p: 2.5 }}>
-        {form.loadErrorMessage !== null && (
-          <VendorRosterLoadErrorAlert message={form.loadErrorMessage} onRetry={form.retryLoad} />
-        )}
-        {form.conflict !== null && (
-          <VendorRosterConflictAlert conflict={form.conflict} onReload={form.reload} />
-        )}
-        <VendorRosterFormFields
-          control={form.control}
-          errors={form.errors}
-          tradeOptions={form.trades}
-          showTechnicianStatus={false}
-        />
-        {selectedIndex >= 0 && (
-          <>
-            <Divider />
-            <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
-              <Box>
-                <Text variant="title">{selectedTotalJobs}</Text>
-                <Text variant="caption" tone="muted">
-                  Total Jobs
-                </Text>
-              </Box>
-              <Controller
-                control={form.control}
-                name={`technicians.${selectedIndex}.isActive`}
-                render={({ field }) => (
-                  <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
-                    <Text variant="description">{field.value ? "Active" : "Inactive"}</Text>
-                    <Switch
-                      checked={Boolean(field.value)}
-                      slotProps={{ input: { "aria-label": "Active status" } }}
-                      onChange={(_event, checked) => {
-                        if (field.value && !checked) onRequestDeactivation(vendor);
-                        else field.onChange(checked);
-                      }}
-                    />
-                  </Stack>
-                )}
-              />
-            </Stack>
-          </>
-        )}
-      </Stack>
-      <Stack
-        direction="row"
-        spacing={1.5}
-        sx={{ p: 2, borderTop: 1, borderColor: "divider", justifyContent: "flex-end" }}
-      >
-        <Button onClick={onClose} disabled={form.isSaving}>
-          Cancel
-        </Button>
-        <Button type="submit" variant="contained" disabled={form.isSaving || !form.isValid}>
-          {form.isSaving ? "Saving..." : "Save changes"}
-        </Button>
-      </Stack>
-    </Box>
-  );
-}
-
-function resolveTechnician(
-  roster: VendorCompanyRoster | undefined,
-  vendor: VendorListItem | null,
-): VendorRosterTechnician | undefined {
-  if (!roster || !vendor) return undefined;
-
-  const match = roster.technicians.find(
-    (technician) =>
-      vendor.id != null && technician.id != null && String(technician.id) === String(vendor.id),
-  );
-  if (match) return match;
-  if (!vendor.contactName) return undefined;
-
-  return {
-    id: vendor.id ?? undefined,
-    contactName: vendor.contactName,
-    phone: vendor.phone,
-    email: vendor.email,
-    tradeSpecialties: vendor.tradeSpecialties,
-    isActive: vendor.isActive,
-    totalJobs: vendor.totalJobs,
-  };
-}
-
-export function VendorDetailDrawer({
-  open,
-  vendor,
-  startInEdit = false,
-  onRequestDeactivation = () => undefined,
-  onClose,
-}: VendorDetailDrawerProps) {
-  const [isEditing, setIsEditing] = useState(startInEdit);
+export function VendorDetailDrawer({ open, vendor, onClose }: VendorDetailDrawerProps) {
+  const navigate = useNavigate();
   const vendorId = vendor?.id;
   const companyId = vendor?.companyId;
   const hasVendorId = vendorId != null;
@@ -381,30 +274,25 @@ export function VendorDetailDrawer({
     !hasVendorId ? (companyId ?? undefined) : undefined,
   );
 
-  const selectedTechnician = resolveTechnician(roster, vendor);
-
-  useEffect(() => {
-    if (open) setIsEditing(startInEdit);
-  }, [open, startInEdit, vendor]);
+  const editHref = hasVendorId
+    ? `/vendors/edit/${vendorId}`
+    : `/vendors/company/${companyId ?? ""}`;
 
   useEffect(() => {
     if (!open) return;
 
     const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key === "Escape" && !isEditing) onClose();
+      if (event.key === "Escape") onClose();
     };
 
     window.addEventListener("keydown", closeOnEscape);
     return () => window.removeEventListener("keydown", closeOnEscape);
-  }, [isEditing, onClose, open]);
+  }, [onClose, open]);
 
   return (
     <Drawer
       open={open}
-      onClose={(_event, reason) => {
-        if (reason === "escapeKeyDown" && isEditing) return;
-        onClose();
-      }}
+      onClose={onClose}
       anchor="right"
       aria-labelledby="vendor-detail-drawer-title"
       ModalProps={{ keepMounted: false }}
@@ -416,21 +304,9 @@ export function VendorDetailDrawer({
       }}
     >
       <Stack className="flex h-full flex-col">
-        <DrawerHeader
-          roster={roster}
-          vendor={vendor}
-          technician={selectedTechnician}
-          onClose={onClose}
-        />
+        <DrawerHeader roster={roster} vendor={vendor} onClose={onClose} />
 
-        {isEditing && vendor ? (
-          <DrawerEditor
-            vendor={vendor}
-            onClose={onClose}
-            onSaved={() => setIsEditing(false)}
-            onRequestDeactivation={onRequestDeactivation}
-          />
-        ) : isLoading ? (
+        {isLoading ? (
           <Box className="flex flex-1 items-center justify-center">
             <CircularProgress size={28} />
           </Box>
@@ -440,14 +316,14 @@ export function VendorDetailDrawer({
           </Alert>
         ) : roster ? (
           <>
-            <DrawerBody roster={roster} technician={selectedTechnician} />
-            <DrawerActions onEdit={() => setIsEditing(true)} />
+            <DrawerBody roster={roster} />
+            <DrawerActions onEdit={() => navigate(editHref)} />
           </>
         ) : (
           <Box className="flex flex-1 items-center justify-center">
-            <Text variant="description" tone="muted">
+            <Typography variant="body2" sx={{ color: "text.secondary" }}>
               No vendor selected.
-            </Text>
+            </Typography>
           </Box>
         )}
       </Stack>
diff --git a/src/app/(protected)/vendors/_components/vendor-filter-options.tsx b/src/app/(protected)/vendors/_components/vendor-filter-options.tsx
deleted file mode 100644
index c9be7d45..00000000
--- a/src/app/(protected)/vendors/_components/vendor-filter-options.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-import type { Dispatch, ReactNode, SetStateAction } from "react";
-import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
-import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
-import TagOutlinedIcon from "@mui/icons-material/TagOutlined";
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Autocomplete,
-  Box,
-  Button,
-  Checkbox,
-  Chip,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
-import type {
-  VendorFacets,
-  VendorFacetCompany,
-  VendorFacetJobBucket,
-  VendorFacetLocation,
-} from "@/domain/vendors/types/vendor";
-import type { VendorFilters } from "./vendor-filters";
-
-type DraftSetter = Dispatch<SetStateAction<VendorFilters>>;
-
-function FilterSection({
-  title,
-  icon,
-  children,
-}: {
-  title: string;
-  icon: ReactNode;
-  children: ReactNode;
-}) {
-  return (
-    <Accordion disableGutters elevation={0} square sx={{ borderBottom: 1, borderColor: "divider" }}>
-      <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${title}-filters-content`}>
-        <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
-          <Box sx={{ color: "primary.main", display: "flex" }}>{icon}</Box>
-          <Typography variant="subtitle1" className="font-semibold">
-            {title}
-          </Typography>
-        </Stack>
-      </AccordionSummary>
-      <AccordionDetails id={`${title}-filters-content`} sx={{ pt: 0, pb: 2.5 }}>
-        {children}
-      </AccordionDetails>
-    </Accordion>
-  );
-}
-
-function CompanyFilter({
-  options,
-  draft,
-  setDraft,
-}: {
-  options: VendorFacetCompany[];
-  draft: VendorFilters;
-  setDraft: DraftSetter;
-}) {
-  const allSelected = draft.companies.length === options.length && options.length > 0;
-  return (
-    <FilterSection title="Company" icon={<BusinessOutlinedIcon />}>
-      <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
-        <Typography variant="caption" sx={{ color: "text.secondary" }}>
-          Select vendor companies
-        </Typography>
-        <Button
-          size="small"
-          onClick={() =>
-            setDraft((current) => ({
-              ...current,
-              companies: allSelected ? [] : options.map((company) => company.name),
-            }))
-          }
-        >
-          {allSelected ? "Clear all" : "Select all"}
-        </Button>
-      </Stack>
-      <Autocomplete
-        multiple
-        size="small"
-        options={options}
-        getOptionLabel={(option) => (typeof option === "string" ? option : option.name)}
-        isOptionEqualToValue={(option, value) =>
-          typeof option === "string" || typeof value === "string"
-            ? option === value
-            : option.name === value.name
-        }
-        value={options.filter((option) => draft.companies.includes(option.name))}
-        onChange={(_event, value) => {
-          const next = (value as (string | VendorFacetCompany)[]).map((entry) =>
-            typeof entry === "string" ? entry : entry.name,
-          );
-          setDraft((current) => ({ ...current, companies: next }));
-        }}
-        renderOption={(props, option, { selected }) => {
-          const { key, ...optionProps } = props;
-          return (
-            <li key={key} {...optionProps}>
-              <Checkbox checked={selected} size="small" sx={{ mr: 1 }} />
-              {option.name}
-            </li>
-          );
-        }}
-        renderValue={(value, getItemProps) =>
-          value.map((option, index) => {
-            const label = typeof option === "string" ? option : option.name;
-            const { key, ...chipProps } = getItemProps({ index });
-            return <Chip key={key} size="small" label={label} {...chipProps} />;
-          })
-        }
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            placeholder={draft.companies.length === 0 ? "All companies" : ""}
-          />
-        )}
-      />
-    </FilterSection>
-  );
-}
-
-function TradeFilter({ options, draft, setDraft }: FilterProps<string>) {
-  return (
-    <FilterSection title="Trade" icon={<BuildOutlinedIcon />}>
-      <Autocomplete
-        multiple
-        size="small"
-        options={options}
-        value={draft.trades}
-        onChange={(_event, value) =>
-          setDraft((current) => ({ ...current, trades: value as string[] }))
-        }
-        renderValue={(value, getItemProps) =>
-          value.map((option, index) => {
-            const { key, ...chipProps } = getItemProps({ index });
-            return <Chip key={key} size="small" label={option} {...chipProps} />;
-          })
-        }
-        renderInput={(params) => (
-          <TextField {...params} placeholder={draft.trades.length === 0 ? "All trades" : ""} />
-        )}
-      />
-    </FilterSection>
-  );
-}
-
-interface FilterProps<T> {
-  options: T[];
-  draft: VendorFilters;
-  setDraft: DraftSetter;
-}
-
-function LocationFilter({ options, draft, setDraft }: FilterProps<VendorFacetLocation>) {
-  return (
-    <FilterSection title="Location" icon={<LocationOnOutlinedIcon />}>
-      <Autocomplete
-        multiple
-        size="small"
-        options={options}
-        getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
-        isOptionEqualToValue={(option, value) =>
-          typeof option === "string" || typeof value === "string"
-            ? option === value
-            : option.label === value.label
-        }
-        value={options.filter((option) => draft.locations.includes(option.label))}
-        onChange={(_event, value) => {
-          const next = (value as (string | VendorFacetLocation)[]).map((entry) =>
-            typeof entry === "string" ? entry : entry.label,
-          );
-          setDraft((current) => ({ ...current, locations: next }));
-        }}
-        renderValue={(value, getItemProps) =>
-          value.map((option, index) => {
-            const label = typeof option === "string" ? option : option.label;
-            const { key, ...chipProps } = getItemProps({ index });
-            return <Chip key={key} size="small" label={label} {...chipProps} />;
-          })
-        }
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            placeholder={draft.locations.length === 0 ? "All locations" : ""}
-          />
-        )}
-      />
-    </FilterSection>
-  );
-}
-
-function JobCountFilter({ options, draft, setDraft }: FilterProps<VendorFacetJobBucket>) {
-  return (
-    <FilterSection title="Total Jobs" icon={<TagOutlinedIcon />}>
-      <Autocomplete
-        multiple
-        size="small"
-        options={options}
-        getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
-        isOptionEqualToValue={(option, value) =>
-          typeof option === "string" || typeof value === "string"
-            ? option === value
-            : option.id === value.id
-        }
-        value={options.filter((option) => draft.jobBuckets.includes(option.id))}
-        onChange={(_event, value) => {
-          const next = (value as (string | VendorFacetJobBucket)[]).map((entry) =>
-            typeof entry === "string" ? entry : entry.id,
-          );
-          setDraft((current) => ({ ...current, jobBuckets: next }));
-        }}
-        renderValue={(value, getItemProps) =>
-          value.map((option, index) => {
-            const label = typeof option === "string" ? option : option.label;
-            const { key, ...chipProps } = getItemProps({ index });
-            return <Chip key={key} size="small" label={label} {...chipProps} />;
-          })
-        }
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            placeholder={draft.jobBuckets.length === 0 ? "All job counts" : ""}
-          />
-        )}
-      />
-    </FilterSection>
-  );
-}
-
-export function VendorFilterOptions({
-  facets,
-  draft,
-  setDraft,
-}: {
-  facets: VendorFacets | undefined;
-  draft: VendorFilters;
-  setDraft: DraftSetter;
-}) {
-  return (
-    <>
-      <CompanyFilter options={facets?.companies ?? []} draft={draft} setDraft={setDraft} />
-      <TradeFilter options={facets?.trades ?? []} draft={draft} setDraft={setDraft} />
-      <LocationFilter options={facets?.locations ?? []} draft={draft} setDraft={setDraft} />
-      <JobCountFilter options={facets?.jobBuckets ?? []} draft={draft} setDraft={setDraft} />
-    </>
-  );
-}
diff --git a/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx b/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx
index e3b91cf5..ae4b51ba 100644
--- a/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx
@@ -1,9 +1,32 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
+import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
 import CloseIcon from "@mui/icons-material/Close";
-import { Box, Button, Chip, Drawer, IconButton, Stack, Typography } from "@mui/material";
-import { VendorFilterOptions } from "./vendor-filter-options";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
+import TagOutlinedIcon from "@mui/icons-material/TagOutlined";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Autocomplete,
+  Box,
+  Button,
+  Checkbox,
+  Chip,
+  Drawer,
+  IconButton,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import type {
+  VendorFacets,
+  VendorFacetCompany,
+  VendorFacetJobBucket,
+  VendorFacetLocation,
+} from "@/domain/vendors/types/vendor";
 import { emptyVendorFilters, type VendorFilters } from "./vendor-filters";
-import type { VendorFacets } from "@/domain/vendors/types/vendor";
 
 interface VendorFiltersDrawerProps {
   open: boolean;
@@ -15,6 +38,32 @@ interface VendorFiltersDrawerProps {
 
 const DRAWER_WIDTH = 360;
 
+function FilterSection({
+  title,
+  icon,
+  children,
+}: {
+  title: string;
+  icon: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <Accordion disableGutters elevation={0} square sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${title}-filters-content`}>
+        <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
+          <Box sx={{ color: "primary.main", display: "flex" }}>{icon}</Box>
+          <Typography variant="subtitle1" className="font-semibold">
+            {title}
+          </Typography>
+        </Stack>
+      </AccordionSummary>
+      <AccordionDetails id={`${title}-filters-content`} sx={{ pt: 0, pb: 2.5 }}>
+        {children}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
 export function VendorFiltersDrawer({
   open,
   onClose,
@@ -25,12 +74,23 @@ export function VendorFiltersDrawer({
   const [draft, setDraft] = useState<VendorFilters>(appliedFilters);
 
   useEffect(() => {
-    if (open) setDraft(appliedFilters);
+    if (open) {
+      setDraft(appliedFilters);
+    }
   }, [open, appliedFilters]);
 
+  const companyOptions = useMemo(() => facets?.companies ?? [], [facets]);
+  const tradeOptions = useMemo(() => facets?.trades ?? [], [facets]);
+  const locationOptions = useMemo(() => facets?.locations ?? [], [facets]);
+  const jobBucketOptions = useMemo(() => facets?.jobBuckets ?? [], [facets]);
+
   const activeCount =
     draft.companies.length + draft.trades.length + draft.locations.length + draft.jobBuckets.length;
 
+  const handleClear = () => {
+    setDraft(emptyVendorFilters);
+  };
+
   const handleApply = () => {
     onApply(draft);
     onClose();
@@ -73,7 +133,165 @@ export function VendorFiltersDrawer({
         </Stack>
 
         <Box className="flex-1 overflow-y-auto" sx={{ px: 2.5 }}>
-          <VendorFilterOptions facets={facets} draft={draft} setDraft={setDraft} />
+          <FilterSection title="Company" icon={<BusinessOutlinedIcon />}>
+            <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
+              <Typography variant="caption" sx={{ color: "text.secondary" }}>
+                Select vendor companies
+              </Typography>
+              <Button
+                size="small"
+                onClick={() =>
+                  setDraft((current) => ({
+                    ...current,
+                    companies:
+                      current.companies.length === companyOptions.length
+                        ? []
+                        : companyOptions.map((company) => company.name),
+                  }))
+                }
+              >
+                {draft.companies.length === companyOptions.length && companyOptions.length > 0
+                  ? "Clear all"
+                  : "Select all"}
+              </Button>
+            </Stack>
+            <Autocomplete
+              multiple
+              size="small"
+              options={companyOptions}
+              getOptionLabel={(option) => (typeof option === "string" ? option : option.name)}
+              isOptionEqualToValue={(option, value) =>
+                typeof option === "string" || typeof value === "string"
+                  ? option === value
+                  : option.name === value.name
+              }
+              value={companyOptions.filter((option) => draft.companies.includes(option.name))}
+              onChange={(_event, value) => {
+                const next = (value as (string | VendorFacetCompany)[]).map((entry) =>
+                  typeof entry === "string" ? entry : entry.name,
+                );
+                setDraft((current) => ({ ...current, companies: next }));
+              }}
+              renderOption={(props, option, { selected }) => {
+                const { key, ...optionProps } = props;
+                return (
+                  <li key={key} {...optionProps}>
+                    <Checkbox checked={selected} size="small" sx={{ mr: 1 }} />
+                    {option.name}
+                  </li>
+                );
+              }}
+              renderValue={(value, getItemProps) =>
+                value.map((option, index) => {
+                  const label = typeof option === "string" ? option : option.name;
+                  const tagProps = getItemProps({ index });
+                  const { key, ...chipProps } = tagProps;
+                  return <Chip key={key} size="small" label={label} {...chipProps} />;
+                })
+              }
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  placeholder={draft.companies.length === 0 ? "All companies" : ""}
+                />
+              )}
+            />
+          </FilterSection>
+
+          <FilterSection title="Trade" icon={<BuildOutlinedIcon />}>
+            <Autocomplete
+              multiple
+              size="small"
+              options={tradeOptions}
+              value={draft.trades}
+              onChange={(_event, value) =>
+                setDraft((current) => ({ ...current, trades: value as string[] }))
+              }
+              renderValue={(value, getItemProps) =>
+                value.map((option, index) => {
+                  const tagProps = getItemProps({ index });
+                  const { key, ...chipProps } = tagProps;
+                  return <Chip key={key} size="small" label={option} {...chipProps} />;
+                })
+              }
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  placeholder={draft.trades.length === 0 ? "All trades" : ""}
+                />
+              )}
+            />
+          </FilterSection>
+
+          <FilterSection title="Location" icon={<LocationOnOutlinedIcon />}>
+            <Autocomplete
+              multiple
+              size="small"
+              options={locationOptions}
+              getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
+              isOptionEqualToValue={(option, value) =>
+                typeof option === "string" || typeof value === "string"
+                  ? option === value
+                  : option.label === value.label
+              }
+              value={locationOptions.filter((option) => draft.locations.includes(option.label))}
+              onChange={(_event, value) => {
+                const next = (value as (string | VendorFacetLocation)[]).map((entry) =>
+                  typeof entry === "string" ? entry : entry.label,
+                );
+                setDraft((current) => ({ ...current, locations: next }));
+              }}
+              renderValue={(value, getItemProps) =>
+                value.map((option, index) => {
+                  const label = typeof option === "string" ? option : option.label;
+                  const tagProps = getItemProps({ index });
+                  const { key, ...chipProps } = tagProps;
+                  return <Chip key={key} size="small" label={label} {...chipProps} />;
+                })
+              }
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  placeholder={draft.locations.length === 0 ? "All locations" : ""}
+                />
+              )}
+            />
+          </FilterSection>
+
+          <FilterSection title="Total Jobs" icon={<TagOutlinedIcon />}>
+            <Autocomplete
+              multiple
+              size="small"
+              options={jobBucketOptions}
+              getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
+              isOptionEqualToValue={(option, value) =>
+                typeof option === "string" || typeof value === "string"
+                  ? option === value
+                  : option.id === value.id
+              }
+              value={jobBucketOptions.filter((option) => draft.jobBuckets.includes(option.id))}
+              onChange={(_event, value) => {
+                const next = (value as (string | VendorFacetJobBucket)[]).map((entry) =>
+                  typeof entry === "string" ? entry : entry.id,
+                );
+                setDraft((current) => ({ ...current, jobBuckets: next }));
+              }}
+              renderValue={(value, getItemProps) =>
+                value.map((option, index) => {
+                  const label = typeof option === "string" ? option : option.label;
+                  const tagProps = getItemProps({ index });
+                  const { key, ...chipProps } = tagProps;
+                  return <Chip key={key} size="small" label={label} {...chipProps} />;
+                })
+              }
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  placeholder={draft.jobBuckets.length === 0 ? "All job counts" : ""}
+                />
+              )}
+            />
+          </FilterSection>
         </Box>
 
         <Stack
@@ -85,16 +303,11 @@ export function VendorFiltersDrawer({
             borderTop: (theme) => `1px solid ${theme.palette.divider}`,
           }}
         >
-          <Button
-            variant="outlined"
-            onClick={() => setDraft(emptyVendorFilters)}
-            disabled={activeCount === 0}
-            fullWidth
-          >
+          <Button variant="outlined" onClick={handleClear} disabled={activeCount === 0} fullWidth>
             Clear all
           </Button>
           <Button variant="contained" onClick={handleApply} fullWidth>
-            Apply filters
+            Apply
           </Button>
         </Stack>
       </Stack>
diff --git a/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx b/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
index d6d5cbf7..32f91675 100644
--- a/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
@@ -28,7 +28,6 @@ interface VendorRosterFormFieldsProps {
   selectedCompanyId?: string | number | null;
   onSelectCompany?: (company: VendorFacetCompany | null) => Promise<void>;
   onClearSelectedCompany?: (nextName?: string) => void;
-  showTechnicianStatus?: boolean;
 }
 
 function CompanyNameField({
@@ -55,7 +54,6 @@ function CompanyNameField({
           <TextField
             {...field}
             label="Company"
-            placeholder="Start typing a company…"
             required
             error={Boolean(errors.name)}
             helperText={errors.name?.message}
@@ -100,9 +98,8 @@ function CompanyNameField({
               {...params}
               label="Company"
               required
-              placeholder="Start typing a company…"
               error={Boolean(errors.name)}
-              helperText={errors.name?.message}
+              helperText={errors.name?.message ?? "Choose an existing company or enter a new one"}
               inputRef={field.ref}
             />
           )}
@@ -122,7 +119,10 @@ function CompanyFields({
 }: VendorRosterFormFieldsProps) {
   return (
     <Box>
-      <Stack spacing={2}>
+      <Typography variant="subtitle2" className="font-semibold uppercase">
+        Company
+      </Typography>
+      <Stack spacing={2} className="mt-2">
         <CompanyNameField
           control={control}
           errors={errors}
@@ -138,13 +138,13 @@ function CompanyFields({
             render={({ field }) => (
               <TextField
                 {...field}
-                label="Company Phone (optional)"
-                placeholder="(214) 555-0100"
+                label="Company Phone"
+                placeholder="(XXX) XXX-XXXX"
                 inputMode="tel"
                 value={field.value ?? ""}
                 onChange={(event) => field.onChange(formatNorthAmericanPhone(event.target.value))}
                 error={Boolean(errors.companyPhone)}
-                helperText={errors.companyPhone?.message}
+                helperText={errors.companyPhone?.message ?? "Phone or email required"}
                 fullWidth
               />
             )}
@@ -155,8 +155,7 @@ function CompanyFields({
             render={({ field }) => (
               <TextField
                 {...field}
-                label="Email (optional)"
-                placeholder="dispatch@vendor.com"
+                label="Email"
                 type="email"
                 error={Boolean(errors.email)}
                 helperText={errors.email?.message}
@@ -168,16 +167,9 @@ function CompanyFields({
         <Controller
           control={control}
           name="address"
-          render={({ field }) => (
-            <TextField
-              {...field}
-              label="Address (optional)"
-              placeholder="123 Industrial Pkwy, Dallas, TX 75201"
-              fullWidth
-            />
-          )}
+          render={({ field }) => <TextField {...field} label="Address" fullWidth />}
         />
-        <Stack direction={{ xs: "column", sm: "row" }} spacing={2} sx={{ display: "none" }}>
+        <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
           <Controller
             control={control}
             name="city"
@@ -202,10 +194,10 @@ function CompanyFields({
           render={({ field }) => (
             <TextField
               {...field}
-              label="Google Maps URL (optional)"
-              placeholder="https://maps.google.com/…"
+              label="Google Maps URL"
+              placeholder="https://maps.google.com/..."
               error={Boolean(errors.googleMapsUrl)}
-              helperText={errors.googleMapsUrl?.message}
+              helperText={errors.googleMapsUrl?.message ?? "Must be an HTTPS link"}
               fullWidth
             />
           )}
@@ -214,14 +206,7 @@ function CompanyFields({
           control={control}
           name="notes"
           render={({ field }) => (
-            <TextField
-              {...field}
-              label="Notes (optional)"
-              placeholder="Internal notes, scheduling preferences, certifications…"
-              multiline
-              minRows={2}
-              fullWidth
-            />
+            <TextField {...field} label="Notes" multiline minRows={2} fullWidth />
           )}
         />
       </Stack>
@@ -236,7 +221,6 @@ interface TechnicianRowProps {
   onRemove: () => void;
   canRemove: boolean;
   tradeOptions: string[];
-  showStatus: boolean;
 }
 
 function TechnicianRow({
@@ -246,13 +230,12 @@ function TechnicianRow({
   onRemove,
   canRemove,
   tradeOptions,
-  showStatus,
 }: TechnicianRowProps) {
   return (
     <Stack spacing={2} className="rounded-md border border-solid border-gray-200 p-3">
       <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
         <Typography variant="subtitle2" className="font-semibold">
-          {index + 1} - TECHNICIAN
+          Technician {index + 1}
         </Typography>
         <Tooltip title="Remove technician">
           <span>
@@ -273,8 +256,7 @@ function TechnicianRow({
         render={({ field }) => (
           <TextField
             {...field}
-            label="Technician name (optional)"
-            placeholder="Technician name"
+            label="Technician Name"
             error={Boolean(error?.contactName)}
             helperText={error?.contactName?.message}
             fullWidth
@@ -288,8 +270,8 @@ function TechnicianRow({
           render={({ field }) => (
             <TextField
               {...field}
-              label="Technician phone (optional)"
-              placeholder="(000) 000-0000"
+              label="Technician Phone"
+              placeholder="(XXX) XXX-XXXX"
               inputMode="tel"
               value={field.value ?? ""}
               onChange={(event) => field.onChange(formatNorthAmericanPhone(event.target.value))}
@@ -310,29 +292,26 @@ function TechnicianRow({
               error={Boolean(error?.email)}
               helperText={error?.email?.message}
               fullWidth
-              sx={{ display: "none" }}
             />
           )}
         />
       </Stack>
       <VendorTradeSpecialtiesField control={control} index={index} tradeOptions={tradeOptions} />
-      {showStatus && (
-        <Controller
-          control={control}
-          name={`technicians.${index}.isActive`}
-          render={({ field }) => (
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={field.value}
-                  onChange={(_event, checked) => field.onChange(checked)}
-                />
-              }
-              label={field.value ? "Active" : "Inactive"}
-            />
-          )}
-        />
-      )}
+      <Controller
+        control={control}
+        name={`technicians.${index}.isActive`}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Switch
+                checked={field.value}
+                onChange={(_event, checked) => field.onChange(checked)}
+              />
+            }
+            label={field.value ? "Active" : "Inactive"}
+          />
+        )}
+      />
     </Stack>
   );
 }
@@ -341,12 +320,10 @@ function TechniciansFieldArray({
   control,
   errors,
   tradeOptions,
-  showStatus,
 }: {
   control: Control<VendorCompanyRosterFormValues>;
   errors: FieldErrors<VendorCompanyRosterFormValues>;
   tradeOptions: string[];
-  showStatus: boolean;
 }) {
   const { fields, append, remove } = useFieldArray({ control, name: "technicians" });
 
@@ -389,7 +366,6 @@ function TechniciansFieldArray({
               onRemove={() => remove(index)}
               canRemove
               tradeOptions={tradeOptions}
-              showStatus={showStatus}
             />
           ))
         )}
@@ -399,17 +375,12 @@ function TechniciansFieldArray({
 }
 
 export function VendorRosterFormFields(props: VendorRosterFormFieldsProps) {
-  const { control, errors, tradeOptions = [], showTechnicianStatus = true } = props;
+  const { control, errors, tradeOptions = [] } = props;
   return (
     <Stack spacing={3}>
       <CompanyFields {...props} />
       <Divider />
-      <TechniciansFieldArray
-        control={control}
-        errors={errors}
-        tradeOptions={tradeOptions}
-        showStatus={showTechnicianStatus}
-      />
+      <TechniciansFieldArray control={control} errors={errors} tradeOptions={tradeOptions} />
     </Stack>
   );
 }
diff --git a/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx b/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
index a8203ecb..e3e7cfa5 100644
--- a/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
+++ b/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
@@ -1,9 +1,13 @@
-import { Button, Chip, CircularProgress, Stack, TablePagination } from "@mui/material";
-import { Plus, SlidersHorizontal } from "lucide-react";
-import { PageHeader } from "@/components/ui/page-header";
-import { SearchInput } from "@/components/ui/search-input";
-import { Text } from "@/components/ui/text";
-import { ToolbarButton } from "@/components/ui/toolbar-button";
+import FilterListIcon from "@mui/icons-material/FilterList";
+import {
+  Button,
+  Chip,
+  CircularProgress,
+  Stack,
+  TablePagination,
+  TextField,
+  Typography,
+} from "@mui/material";
 
 interface VendorsListToolbarProps {
   globalCount: number;
@@ -29,44 +33,52 @@ export function VendorsListToolbar({
   onAddVendor,
 }: VendorsListToolbarProps) {
   return (
-    <PageHeader
-      surface
-      className="-mx-4 -mt-4"
-      title="Vendors / Technicians"
-      subtitle={`${globalCount} technicians · ${activeCount} active`}
-      actions={
-        <>
-          <SearchInput
-            value={search}
-            onChange={onSearchChange}
-            placeholder="Search name, company, trade…"
-            aria-label="Search vendors"
-            inputClassName="h-8 py-0 text-[13px]"
-          />
-          <ToolbarButton
-            variant="outline"
-            icon={<SlidersHorizontal size={16} />}
-            onClick={onOpenFilters}
-            aria-label="Open vendor filters"
-            badge={appliedFilterCount}
-            className="w-[88.609375px] text-[13px]"
-          >
-            Filters
-          </ToolbarButton>
-          <ToolbarButton
-            variant="primary"
-            icon={<Plus size={16} />}
-            onClick={onAddVendor}
-            className="w-[115.546875px] border-0 px-3 text-[13px]"
-          >
-            Add Vendor
-          </ToolbarButton>
-          {isFetching && !isLoading && (
-            <CircularProgress size={14} aria-label="Refreshing vendors" role="status" />
+    <Stack
+      direction={{ xs: "column", md: "row" }}
+      spacing={2}
+      sx={{
+        alignItems: { xs: "stretch", md: "center" },
+        justifyContent: "space-between",
+      }}
+    >
+      <Stack direction="row" spacing={2} sx={{ alignItems: "baseline" }}>
+        <Typography variant="h5" component="h1">
+          Vendors / Technicians
+        </Typography>
+        <Typography variant="body2" sx={{ color: "text.secondary" }}>
+          {globalCount} vendor entries · {activeCount} active
+        </Typography>
+        {isFetching && !isLoading && <CircularProgress size={16} />}
+      </Stack>
+
+      <Stack
+        direction={{ xs: "column", sm: "row" }}
+        spacing={2}
+        sx={{ alignItems: { xs: "stretch", sm: "center" } }}
+      >
+        <TextField
+          size="small"
+          value={search}
+          onChange={(e) => onSearchChange(e.target.value)}
+          placeholder="Search name, company, trade..."
+          className="min-w-[260px]"
+        />
+        <Button
+          variant="outlined"
+          onClick={onOpenFilters}
+          startIcon={<FilterListIcon />}
+          aria-label="Open vendor filters"
+        >
+          Filters
+          {appliedFilterCount > 0 && (
+            <Chip size="small" color="primary" label={appliedFilterCount} sx={{ ml: 1 }} />
           )}
-        </>
-      }
-    />
+        </Button>
+        <Button variant="contained" onClick={onAddVendor}>
+          + Add Vendor
+        </Button>
+      </Stack>
+    </Stack>
   );
 }
 
@@ -78,21 +90,16 @@ interface AppliedChipEntry {
 
 interface VendorAppliedFiltersBarProps {
   chips: AppliedChipEntry[];
-  resultCount: number;
   onClearAll: () => void;
 }
 
-export function VendorAppliedFiltersBar({
-  chips,
-  resultCount,
-  onClearAll,
-}: VendorAppliedFiltersBarProps) {
+export function VendorAppliedFiltersBar({ chips, onClearAll }: VendorAppliedFiltersBarProps) {
   if (chips.length === 0) return null;
   return (
     <Stack direction="row" spacing={1} className="flex flex-wrap items-center">
-      <Text variant="caption" tone="muted">
-        {resultCount} {resultCount === 1 ? "technician" : "technicians"} · filtered by
-      </Text>
+      <Typography variant="caption" sx={{ color: "text.secondary" }}>
+        Applied:
+      </Typography>
       {chips.map((chip) => (
         <Chip
           key={chip.key}
@@ -139,31 +146,23 @@ export function VendorsListFooter({
       sx={{
         alignItems: { xs: "stretch", sm: "center" },
         justifyContent: "space-between",
-        minHeight: 33.5,
-        mx: -2,
-        px: 2,
-        backgroundColor: "var(--color-bg-surface)",
       }}
     >
-      <Text variant="caption" as="span" sx={{ color: "#6b7a96", fontSize: 11, lineHeight: 1.5 }}>
+      <Typography variant="body2" sx={{ color: "text.secondary" }}>
         {totalCount} {isActive ? "active" : "inactive"}{" "}
-        {totalCount === 1 ? "technician" : "technicians"}
+        {totalCount === 1 ? "vendor entry" : "vendor entries"}
         {isFiltered && " · filtered"}
-      </Text>
-      <Text variant="caption" as="span" sx={{ color: "#6b7a96", fontSize: 11, lineHeight: 1.5 }}>
-        {activeCount} active · {inactiveCount} inactive
-      </Text>
-      {totalCount > pageSize && (
-        <TablePagination
-          component="div"
-          count={totalCount}
-          page={page}
-          onPageChange={(_e, nextPage) => onPageChange(nextPage)}
-          rowsPerPage={pageSize}
-          onRowsPerPageChange={(e) => onPageSizeChange(Number(e.target.value))}
-          rowsPerPageOptions={[24, 48, 96]}
-        />
-      )}
+        {` · ${activeCount} active · ${inactiveCount} inactive`}
+      </Typography>
+      <TablePagination
+        component="div"
+        count={totalCount}
+        page={page}
+        onPageChange={(_e, nextPage) => onPageChange(nextPage)}
+        rowsPerPage={pageSize}
+        onRowsPerPageChange={(e) => onPageSizeChange(Number(e.target.value))}
+        rowsPerPageOptions={[12, 24, 48]}
+      />
     </Stack>
   );
 }
diff --git a/src/app/(protected)/vendors/_components/vendors-table.tsx b/src/app/(protected)/vendors/_components/vendors-table.tsx
index db588cff..802fff8a 100644
--- a/src/app/(protected)/vendors/_components/vendors-table.tsx
+++ b/src/app/(protected)/vendors/_components/vendors-table.tsx
@@ -1,10 +1,11 @@
 import { type KeyboardEvent, type MouseEvent } from "react";
-import SearchOffOutlinedIcon from "@mui/icons-material/SearchOffOutlined";
+import { useNavigate } from "react-router";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
 import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
 import {
   Avatar,
-  Box,
+  Chip,
   CircularProgress,
   IconButton,
   Link,
@@ -17,8 +18,8 @@ import {
   TableHead,
   TableRow,
   Tooltip,
+  Typography,
 } from "@mui/material";
-import { Text } from "@/components/ui/text";
 import type { VendorListItem } from "@/domain/vendors/types/vendor";
 
 const TABLE_COLUMNS = [
@@ -29,6 +30,9 @@ const TABLE_COLUMNS = [
   "Phone",
   "Email",
   "Total Jobs",
+  "Status",
+  "View",
+  "Edit",
 ] as const;
 
 function getInitials(name: string): string {
@@ -50,34 +54,19 @@ function stopPropagation(event: MouseEvent): void {
   event.stopPropagation();
 }
 
-function VendorStatus({ isActive }: { isActive: boolean }) {
-  return (
-    <Stack direction="row" spacing={1} sx={{ alignItems: "center", pl: 1 }}>
-      <Box
-        component="span"
-        sx={{
-          width: 6,
-          height: 6,
-          borderRadius: "9999px",
-          backgroundColor: isActive ? "success.main" : "text.secondary",
-        }}
-      />
-      <Text variant="description">{isActive ? "Active" : "Inactive"}</Text>
-    </Stack>
-  );
-}
-
 interface VendorTableRowProps {
   row: VendorListItem;
   onOpenDetail: (row: VendorListItem) => void;
-  onOpenEdit: (row: VendorListItem) => void;
+  onOpenDeactivation: (row: VendorListItem) => void;
 }
 
-function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps) {
+function VendorTableRow({ row, onOpenDetail, onOpenDeactivation }: VendorTableRowProps) {
+  const navigate = useNavigate();
   const trades = splitTrades(row.tradeSpecialties);
   const primaryTrade = trades[0] ?? "—";
   const extraTrades = trades.length > 1 ? trades.length - 1 : 0;
   const locationText = [row.city, row.state].filter(Boolean).join(", ") || "—";
+  const hasVendorId = row.id != null;
   const rowKey = String(row.id ?? `company-${row.companyId ?? ""}`);
 
   const handleKeyDown = (event: KeyboardEvent) => {
@@ -99,62 +88,37 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
       onKeyDown={handleKeyDown}
     >
       <TableCell>
-        <Text variant="description" sx={{ color: "var(--color-foreground)" }}>
-          {row.companyName || "—"}
-        </Text>
+        <Typography className="font-semibold">{row.companyName || "—"}</Typography>
       </TableCell>
       <TableCell>
-        <Stack direction="row" spacing={1.25} sx={{ alignItems: "center" }}>
+        <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
           <Avatar
             sx={{
               width: 28,
               height: 28,
-              backgroundColor: "var(--color-bg-muted)",
-              color: "var(--color-primary)",
-              fontSize: 10.5,
-              fontWeight: 600,
+              fontSize: 12,
+              backgroundColor: "var(--accent, #1976d2)",
             }}
           >
             {getInitials(row.contactName)}
           </Avatar>
-          <Text variant="description" sx={{ color: "var(--color-foreground)" }}>
-            {row.contactName || "—"}
-          </Text>
+          <Typography variant="body2">{row.contactName || "—"}</Typography>
         </Stack>
       </TableCell>
-      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>{locationText}</TableCell>
-      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>
+      <TableCell>{locationText}</TableCell>
+      <TableCell>
         {primaryTrade === "—" ? (
           "—"
         ) : (
           <Stack direction="row" spacing={0.5} sx={{ alignItems: "center" }}>
             <span>{primaryTrade}</span>
-            {extraTrades > 0 && (
-              <Box
-                component="span"
-                sx={{
-                  borderRadius: "9999px",
-                  backgroundColor: "var(--color-bg-muted)",
-                  px: 0.75,
-                  py: 0.25,
-                  fontSize: 10.5,
-                  lineHeight: 1.2,
-                }}
-              >
-                +{extraTrades}
-              </Box>
-            )}
+            {extraTrades > 0 && <Chip size="small" label={`+${extraTrades}`} />}
           </Stack>
         )}
       </TableCell>
-      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>
+      <TableCell>
         {row.phone ? (
-          <Link
-            href={`tel:${row.phone}`}
-            underline="hover"
-            color="inherit"
-            onClick={stopPropagation}
-          >
+          <Link href={`tel:${row.phone}`} underline="hover" onClick={stopPropagation}>
             {row.phone}
           </Link>
         ) : (
@@ -163,53 +127,71 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
       </TableCell>
       <TableCell>
         {row.email ? (
-          <Link
-            href={`mailto:${row.email}`}
-            underline="hover"
-            sx={{ color: "#6b7a96" }}
-            onClick={stopPropagation}
-          >
+          <Link href={`mailto:${row.email}`} underline="hover" onClick={stopPropagation}>
             {row.email}
           </Link>
         ) : (
           "—"
         )}
       </TableCell>
-      <TableCell align="center">{row.totalJobs ?? 0}</TableCell>
+      <TableCell>{row.totalJobs ?? 0}</TableCell>
       <TableCell>
-        <VendorStatus isActive={row.isActive} />
+        <Chip
+          size="small"
+          label={row.isActive ? "Active" : "Inactive"}
+          color={row.isActive ? "success" : "default"}
+        />
       </TableCell>
-      <TableCell align="right">
+      <TableCell align="center">
+        <Tooltip title="View details">
+          <IconButton
+            size="small"
+            aria-label={`View vendor ${row.companyName}`}
+            onClick={(event) => {
+              event.stopPropagation();
+              onOpenDetail(row);
+            }}
+          >
+            <VisibilityOutlinedIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+      </TableCell>
+      <TableCell align="center">
         <Stack
           direction="row"
           spacing={0.5}
-          className="vendor-row-actions"
-          sx={{ alignItems: "center", justifyContent: "flex-end" }}
+          sx={{ alignItems: "center", justifyContent: "center" }}
         >
-          <Tooltip title="View details">
-            <IconButton
-              size="small"
-              aria-label={`View vendor ${row.companyName}`}
-              onClick={(event) => {
-                event.stopPropagation();
-                onOpenDetail(row);
-              }}
-            >
-              <VisibilityOutlinedIcon fontSize="small" />
-            </IconButton>
-          </Tooltip>
           <Tooltip title="Edit">
             <IconButton
               size="small"
               aria-label={`Edit vendor ${row.companyName}`}
               onClick={(event) => {
                 event.stopPropagation();
-                onOpenEdit(row);
+                navigate(
+                  row.id != null
+                    ? `/vendors/edit/${row.id}`
+                    : `/vendors/company/${row.companyId ?? ""}`,
+                );
               }}
             >
               <EditOutlinedIcon fontSize="small" />
             </IconButton>
           </Tooltip>
+          {hasVendorId && row.isActive && (
+            <Tooltip title="Deactivate">
+              <IconButton
+                size="small"
+                aria-label="Deactivate vendor"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onOpenDeactivation(row);
+                }}
+              >
+                <DeleteOutlineIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          )}
         </Stack>
       </TableCell>
     </TableRow>
@@ -218,118 +200,50 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
 
 interface VendorsTableProps {
   rows: VendorListItem[];
-  isActive: boolean;
-  isFiltered: boolean;
   isLoading: boolean;
   showError: boolean;
   onOpenDetail: (row: VendorListItem) => void;
-  onOpenEdit: (row: VendorListItem) => void;
+  onOpenDeactivation: (row: VendorListItem) => void;
 }
 
 export function VendorsTable({
   rows,
-  isActive,
-  isFiltered,
   isLoading,
   showError,
   onOpenDetail,
-  onOpenEdit,
+  onOpenDeactivation,
 }: VendorsTableProps) {
   const showEmptyRow = !isLoading && !showError && rows.length === 0;
-  const columnCount = TABLE_COLUMNS.length + 2;
 
   return (
-    <TableContainer
-      component={Paper}
-      variant="outlined"
-      sx={{
-        mt: 2,
-        mb: 2,
-        flex: "1 1 auto",
-        overflow: "auto",
-        borderRadius: 1.5,
-        fontSize: 13,
-      }}
-    >
-      <Table
-        size="small"
-        stickyHeader
-        sx={{
-          minWidth: 1550,
-          tableLayout: "fixed",
-          "& .MuiTableCell-head": {
-            backgroundColor: "var(--color-bg-muted)",
-            color: "var(--color-foreground)",
-            fontSize: 10.5,
-            fontWeight: 700,
-            letterSpacing: "0.06em",
-            lineHeight: "24px",
-            px: 1.75,
-            py: 1.375,
-            textTransform: "uppercase",
-            whiteSpace: "nowrap",
-          },
-          "& .MuiTableCell-body": {
-            fontSize: 13,
-            px: 1.5,
-            py: 1,
-            height: 52,
-            lineHeight: 1.43,
-            whiteSpace: "nowrap",
-          },
-          "& .vendor-row-actions": {
-            opacity: { xs: 1, md: 0 },
-            transition: "opacity 120ms ease",
-          },
-          "& .MuiTableRow-root:hover .vendor-row-actions, & .MuiTableRow-root:focus-within .vendor-row-actions":
-            {
-              opacity: 1,
-            },
-        }}
-      >
-        <colgroup>
-          <col style={{ width: 196.34375 }} />
-          <col style={{ width: 207.25 }} />
-          <col style={{ width: 152.703125 }} />
-          <col style={{ width: 218.15625 }} />
-          <col style={{ width: 152.703125 }} />
-          <col style={{ width: 251.90625 }} />
-          <col style={{ width: 109.078125 }} />
-          <col style={{ width: 119.984375 }} />
-          <col style={{ width: 141.875 }} />
-        </colgroup>
+    <TableContainer component={Paper} variant="outlined" sx={{ overflowX: "auto" }}>
+      <Table size="small" sx={{ minWidth: 960 }}>
         <TableHead>
           <TableRow>
             {TABLE_COLUMNS.map((column) => (
-              <TableCell key={column} align={column === "Total Jobs" ? "center" : "left"}>
+              <TableCell
+                key={column}
+                align={column === "View" || column === "Edit" ? "center" : "left"}
+                className="font-semibold"
+              >
                 {column}
               </TableCell>
             ))}
-            <TableCell>Status</TableCell>
-            <TableCell align="right" aria-label="Vendor actions" />
           </TableRow>
         </TableHead>
         <TableBody>
           {isLoading ? (
             <TableRow>
-              <TableCell colSpan={columnCount} align="center" className="py-10">
+              <TableCell colSpan={TABLE_COLUMNS.length} align="center" className="py-10">
                 <CircularProgress size={28} />
               </TableCell>
             </TableRow>
           ) : showEmptyRow ? (
             <TableRow>
-              <TableCell colSpan={columnCount} align="center" className="py-10">
-                <Stack spacing={1} sx={{ alignItems: "center" }}>
-                  <SearchOffOutlinedIcon sx={{ color: "text.secondary", fontSize: 32 }} />
-                  <Text variant="description" className="font-semibold">
-                    {`No ${isActive ? "active" : "inactive"} technicians found`}
-                  </Text>
-                  <Text variant="caption" tone="muted">
-                    {isFiltered
-                      ? "Try a different search, or add a new vendor."
-                      : "Add a vendor to get started."}
-                  </Text>
-                </Stack>
+              <TableCell colSpan={TABLE_COLUMNS.length} align="center" className="py-10">
+                <Typography sx={{ color: "text.secondary" }}>
+                  No vendors match the current filters.
+                </Typography>
               </TableCell>
             </TableRow>
           ) : (
@@ -338,7 +252,7 @@ export function VendorsTable({
                 key={String(row.id ?? `company-${row.companyId ?? ""}`)}
                 row={row}
                 onOpenDetail={onOpenDetail}
-                onOpenEdit={onOpenEdit}
+                onOpenDeactivation={onOpenDeactivation}
               />
             ))
           )}
diff --git a/src/app/(protected)/vendors/index.tsx b/src/app/(protected)/vendors/index.tsx
index 48447ad6..a084b59b 100644
--- a/src/app/(protected)/vendors/index.tsx
+++ b/src/app/(protected)/vendors/index.tsx
@@ -23,91 +23,16 @@ interface AppliedChip {
   label: string;
 }
 
-function statusTabLabel(label: string, count: number) {
-  return (
-    <Box className="flex items-center gap-2">
-      <Box component="span">{label}</Box>
-      <Box
-        component="span"
-        className="min-w-5 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none"
-        sx={{ backgroundColor: "action.hover", color: "text.secondary" }}
-      >
-        {count}
-      </Box>
-    </Box>
-  );
-}
-
-function VendorStatusTabs({
-  isActive,
-  activeCount,
-  inactiveCount,
-  onChange,
-}: {
-  isActive: boolean;
-  activeCount: number;
-  inactiveCount: number;
-  onChange: (isActive: boolean) => void;
-}) {
-  return (
-    <Tabs
-      value={isActive ? "active" : "inactive"}
-      onChange={(_event, value: "active" | "inactive") => onChange(value === "active")}
-      aria-label="Vendor status"
-      sx={{
-        minHeight: 36,
-        flexShrink: 0,
-        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
-        backgroundColor: "var(--color-bg-surface)",
-        mx: -2,
-        px: 1.5,
-        "& .MuiTab-root": {
-          minHeight: 36,
-          px: 2,
-          py: 0,
-          fontSize: 13,
-          fontWeight: 500,
-          textTransform: "none",
-        },
-        "& .MuiTab-root:first-of-type": { width: 102.84375 },
-        "& .Mui-selected": { fontWeight: 600 },
-        "& .MuiTabs-indicator": { height: 2 },
-      }}
-    >
-      <Tab
-        value="active"
-        label={statusTabLabel("Active", activeCount)}
-        aria-label={`Active (${activeCount})`}
-      />
-      <Tab
-        value="inactive"
-        label={statusTabLabel("Inactive", inactiveCount)}
-        aria-label={`Inactive (${inactiveCount})`}
-      />
-    </Tabs>
-  );
-}
-
 function describeChips(
   filters: VendorFilters,
   jobBucketLabels: Map<string, string>,
 ): AppliedChip[] {
   const chips: AppliedChip[] = [];
-  filters.companies.forEach((value) =>
-    chips.push({ category: "companies", value, label: `Company: ${value}` }),
-  );
-  filters.trades.forEach((value) =>
-    chips.push({ category: "trades", value, label: `Trade: ${value}` }),
-  );
-  filters.locations.forEach((value) =>
-    chips.push({ category: "locations", value, label: `Location: ${value}` }),
-  );
+  filters.companies.forEach((value) => chips.push({ category: "companies", value, label: value }));
+  filters.trades.forEach((value) => chips.push({ category: "trades", value, label: value }));
+  filters.locations.forEach((value) => chips.push({ category: "locations", value, label: value }));
   filters.jobBuckets.forEach((value) =>
-    chips.push({
-      category: "jobBuckets",
-      value,
-      label: `Total Jobs: ${jobBucketLabels.get(value) ?? value}`,
-    }),
+    chips.push({ category: "jobBuckets", value, label: jobBucketLabels.get(value) ?? value }),
   );
   return chips;
 }
@@ -117,12 +42,7 @@ export default function VendorsListPage() {
   const [filtersOpen, setFiltersOpen] = useState(false);
   const [createOpen, setCreateOpen] = useState(false);
   const [detailTarget, setDetailTarget] = useState<VendorListItem | null>(null);
-  const [detailStartsInEdit, setDetailStartsInEdit] = useState(false);
-  const closeDetail = () => {
-    setDetailTarget(null);
-    setDetailStartsInEdit(false);
-  };
-  const deactivation = useVendorDeactivation(closeDetail);
+  const deactivation = useVendorDeactivation();
 
   const { data: facets } = useVendorFacets(filters.isActive);
   const { data, isLoading, isFetching, error } = useVendorsList(filters.listParams);
@@ -141,7 +61,7 @@ export default function VendorsListPage() {
   const appliedChips = describeChips(filters.appliedFilters, jobBucketLabels);
 
   return (
-    <Box className="flex h-full flex-col overflow-hidden px-4 pt-4 pb-0">
+    <Box className="flex flex-col gap-4 p-4">
       <VendorsListToolbar
         globalCount={activeCount + inactiveCount}
         activeCount={activeCount}
@@ -154,15 +74,18 @@ export default function VendorsListPage() {
         onAddVendor={() => setCreateOpen(true)}
       />
 
-      <VendorStatusTabs
-        isActive={filters.isActive}
-        activeCount={activeCount}
-        inactiveCount={inactiveCount}
-        onChange={filters.setIsActiveWithReset}
-      />
+      <Tabs
+        value={filters.isActive ? "active" : "inactive"}
+        onChange={(_event, value: "active" | "inactive") =>
+          filters.setIsActiveWithReset(value === "active")
+        }
+        aria-label="Vendor status"
+      >
+        <Tab value="active" label={`Active (${activeCount})`} />
+        <Tab value="inactive" label={`Inactive (${inactiveCount})`} />
+      </Tabs>
 
       <VendorAppliedFiltersBar
-        resultCount={totalCount}
         chips={appliedChips.map((chip) => ({
           key: `${chip.category}-${chip.value}`,
           label: chip.label,
@@ -179,18 +102,10 @@ export default function VendorsListPage() {
 
       <VendorsTable
         rows={rows}
-        isActive={filters.isActive}
-        isFiltered={appliedChips.length > 0 || Boolean(filters.debouncedSearch)}
         isLoading={isLoading}
         showError={Boolean(error)}
-        onOpenDetail={(row) => {
-          setDetailStartsInEdit(false);
-          setDetailTarget(row);
-        }}
-        onOpenEdit={(row) => {
-          setDetailStartsInEdit(true);
-          setDetailTarget(row);
-        }}
+        onOpenDetail={setDetailTarget}
+        onOpenDeactivation={deactivation.open}
       />
 
       <VendorsListFooter
@@ -218,9 +133,7 @@ export default function VendorsListPage() {
       <VendorDetailDrawer
         open={Boolean(detailTarget)}
         vendor={detailTarget}
-        startInEdit={detailStartsInEdit}
-        onRequestDeactivation={deactivation.open}
-        onClose={closeDetail}
+        onClose={() => setDetailTarget(null)}
       />
 
       <VendorDeactivationDialog
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-co-line.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-co-line.tsx
new file mode 100644
index 00000000..5d3804bb
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-co-line.tsx
@@ -0,0 +1,19 @@
+import type { ElementType } from "react";
+
+type CompDocCoLineProps = {
+  icon: ElementType;
+  text: string;
+  bold?: boolean;
+};
+
+export function CompDocCoLine({ icon: Icon, text, bold }: CompDocCoLineProps) {
+  return (
+    <div
+      className="flex items-center justify-end gap-1.5 break-words"
+      style={{ fontSize: 11, color: "#161E38", overflowWrap: "break-word" }}
+    >
+      <span style={{ fontWeight: bold ? 600 : 400 }}>{text}</span>
+      <Icon size={12} className="shrink-0" style={{ color: "#1C75BC" }} />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-detail-row.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-detail-row.tsx
new file mode 100644
index 00000000..c5f08558
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-detail-row.tsx
@@ -0,0 +1,39 @@
+import type { ElementType } from "react";
+
+type CompDocDetailRowProps = {
+  icon: ElementType;
+  label: string;
+  value: string;
+  last?: boolean;
+};
+
+export function CompDocDetailRow({ icon: Icon, label, value, last }: CompDocDetailRowProps) {
+  return (
+    <div
+      className="flex items-start gap-2.5"
+      style={{
+        padding: "10px 0",
+        borderBottom: last ? "none" : "1px solid var(--color-border)",
+      }}
+    >
+      <Icon
+        size={15}
+        className="shrink-0"
+        style={{ color: "var(--muted-foreground)", marginTop: 2 }}
+      />
+      <div className="min-w-0">
+        <div style={{ fontSize: 11.5, color: "var(--muted-foreground)" }}>{label}</div>
+        <div
+          style={{
+            fontSize: 13,
+            fontWeight: 500,
+            color: "var(--color-text-primary)",
+            marginTop: 1,
+          }}
+        >
+          {value}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-draft-actions.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-draft-actions.tsx
new file mode 100644
index 00000000..86749598
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-draft-actions.tsx
@@ -0,0 +1,70 @@
+import type { RefObject } from "react";
+import { Ban, Save, Sparkles, Upload } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { COMP_DOC_FOOTER_BTN_SX } from "./comp-doc-footer-button-sx";
+
+type CompDocDialogFooterDraftActionsProps = {
+  rowVersion?: string | number | null;
+  isUploading: boolean;
+  pdfInputRef: RefObject<HTMLInputElement | null>;
+  onMarkNotRequired: () => void;
+  onSaveDraft: () => void;
+  onGenerate: () => void;
+};
+
+export function CompDocDialogFooterDraftActions({
+  rowVersion,
+  isUploading,
+  pdfInputRef,
+  onMarkNotRequired,
+  onSaveDraft,
+  onGenerate,
+}: CompDocDialogFooterDraftActionsProps) {
+  return (
+    <>
+      <Button
+        variant="ghost"
+        size="default"
+        className="gap-1.5 whitespace-nowrap text-[12px]"
+        sx={COMP_DOC_FOOTER_BTN_SX}
+        style={{ color: "var(--muted-foreground)" }}
+        onClick={onMarkNotRequired}
+      >
+        <Ban size={14} /> Mark as not required
+      </Button>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button
+          variant="outline"
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          onClick={onSaveDraft}
+        >
+          <Save size={14} /> Save draft
+        </Button>
+        <Button
+          variant="outline"
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          disabled={!rowVersion}
+          loading={isUploading}
+          loadingText="Uploading…"
+          onClick={() => pdfInputRef.current?.click()}
+          startIcon={!isUploading ? <Upload size={14} /> : undefined}
+        >
+          Upload PDF
+        </Button>
+        <Button
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          style={{ background: "var(--color-primary)", color: "#fff" }}
+          onClick={onGenerate}
+        >
+          <Sparkles size={14} /> Generate
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-generated-actions.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-generated-actions.tsx
new file mode 100644
index 00000000..5c006a97
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-generated-actions.tsx
@@ -0,0 +1,62 @@
+import type { RefObject } from "react";
+import { CheckCircle2, Download, Upload } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { COMP_DOC_FOOTER_BTN_SX } from "./comp-doc-footer-button-sx";
+
+type CompDocDialogFooterGeneratedActionsProps = {
+  generatedAt: string;
+  signOffAttachment?: string | null;
+  isDocumentsReadOnly: boolean;
+  rowVersion?: string | number | null;
+  isUploading: boolean;
+  pdfInputRef: RefObject<HTMLInputElement | null>;
+  onDownloadPdf: () => void;
+};
+
+export function CompDocDialogFooterGeneratedActions({
+  generatedAt,
+  signOffAttachment,
+  isDocumentsReadOnly,
+  rowVersion,
+  isUploading,
+  pdfInputRef,
+  onDownloadPdf,
+}: CompDocDialogFooterGeneratedActionsProps) {
+  return (
+    <>
+      <span
+        className="inline-flex items-center gap-1.5 whitespace-nowrap"
+        style={{ fontSize: 12, color: "var(--color-success)" }}
+      >
+        <CheckCircle2 size={14} />{" "}
+        {signOffAttachment ? "Document on file" : `Generated ${generatedAt}`}
+      </span>
+      <div className="flex shrink-0 items-center gap-2">
+        {!isDocumentsReadOnly && (
+          <Button
+            variant="outline"
+            size="default"
+            className="gap-1.5 whitespace-nowrap text-[12px]"
+            sx={COMP_DOC_FOOTER_BTN_SX}
+            disabled={!rowVersion}
+            loading={isUploading}
+            loadingText="Uploading…"
+            onClick={() => pdfInputRef.current?.click()}
+            startIcon={!isUploading ? <Upload size={14} /> : undefined}
+          >
+            Replace PDF
+          </Button>
+        )}
+        <Button
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          style={{ background: "var(--color-primary)", color: "#fff" }}
+          onClick={onDownloadPdf}
+        >
+          <Download size={14} /> Download PDF
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-not-required-actions.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-not-required-actions.tsx
new file mode 100644
index 00000000..79d16bca
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-not-required-actions.tsx
@@ -0,0 +1,53 @@
+import { Ban, Sparkles, Undo2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { COMP_DOC_FOOTER_BTN_SX } from "./comp-doc-footer-button-sx";
+
+type CompDocDialogFooterNotRequiredActionsProps = {
+  isDocumentsReadOnly: boolean;
+  onUndo: () => void;
+};
+
+export function CompDocDialogFooterNotRequiredActions({
+  isDocumentsReadOnly,
+  onUndo,
+}: CompDocDialogFooterNotRequiredActionsProps) {
+  return (
+    <>
+      <span
+        className="inline-flex items-center gap-1.5 whitespace-nowrap"
+        style={{ fontSize: 12, color: "var(--muted-foreground)" }}
+      >
+        <Ban size={14} style={{ color: "var(--warning)" }} /> Marked{" "}
+        <b style={{ fontWeight: 600 }}>not required</b> for this work order
+      </span>
+      <div className="flex shrink-0 items-center gap-2">
+        {!isDocumentsReadOnly && (
+          <Button
+            variant="outline"
+            size="default"
+            className="gap-1.5 whitespace-nowrap text-[12px]"
+            sx={COMP_DOC_FOOTER_BTN_SX}
+            onClick={onUndo}
+          >
+            <Undo2 size={14} /> Undo
+          </Button>
+        )}
+        <Button
+          size="default"
+          disabled
+          title="Marked not required — undo to generate"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          style={{
+            background: "var(--color-primary)",
+            color: "#fff",
+            opacity: 0.5,
+            pointerEvents: "none",
+          }}
+        >
+          <Sparkles size={14} /> Generate
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer.tsx
new file mode 100644
index 00000000..b21cbd05
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer.tsx
@@ -0,0 +1,94 @@
+import type { RefObject } from "react";
+import type { DocState } from "@/domain/work-orders/types/completion-doc";
+import { CompDocDialogFooterDraftActions } from "./comp-doc-dialog-footer-draft-actions";
+import { CompDocDialogFooterGeneratedActions } from "./comp-doc-dialog-footer-generated-actions";
+import { CompDocDialogFooterNotRequiredActions } from "./comp-doc-dialog-footer-not-required-actions";
+
+type CompDocDialogFooterProps = {
+  docState: DocState;
+  isDocumentsReadOnly: boolean;
+  rowVersion?: string | number | null;
+  isUploading: boolean;
+  signOffAttachment?: string | null;
+  generatedAt: string;
+  pdfInputRef: RefObject<HTMLInputElement | null>;
+  onMarkNotRequired: () => void;
+  onSaveDraft: () => void;
+  onGenerate: () => void;
+  onUndo: () => void;
+  onDownloadPdf: () => void;
+  onUploadPdf: (files: FileList | null) => void;
+};
+
+export function CompDocDialogFooter({
+  docState,
+  isDocumentsReadOnly,
+  rowVersion,
+  isUploading,
+  signOffAttachment,
+  generatedAt,
+  pdfInputRef,
+  onMarkNotRequired,
+  onSaveDraft,
+  onGenerate,
+  onUndo,
+  onDownloadPdf,
+  onUploadPdf,
+}: CompDocDialogFooterProps) {
+  // Exclusive footer branches (prototype: one docState at a time). A signed PDF
+  // on file implies Generated even if local docState has not caught up yet — never
+  // render Draft actions alongside Generated.
+  const showNotRequired = docState === "not-required";
+  const showGenerated =
+    !showNotRequired && (docState === "generated" || Boolean(signOffAttachment));
+  const showDraft = !showNotRequired && !showGenerated && docState === "draft";
+
+  return (
+    <div
+      className="flex shrink-0 items-center justify-between gap-3"
+      style={{
+        padding: "14px 20px",
+        borderTop: "1px solid var(--color-border)",
+        background: "var(--color-bg-surface)",
+      }}
+    >
+      <input
+        ref={pdfInputRef}
+        type="file"
+        accept="application/pdf,.pdf"
+        hidden
+        onChange={(event) => {
+          onUploadPdf(event.target.files);
+          event.target.value = "";
+        }}
+      />
+      {Boolean(showDraft && !isDocumentsReadOnly) && (
+        <CompDocDialogFooterDraftActions
+          rowVersion={rowVersion}
+          isUploading={isUploading}
+          pdfInputRef={pdfInputRef}
+          onMarkNotRequired={onMarkNotRequired}
+          onSaveDraft={onSaveDraft}
+          onGenerate={onGenerate}
+        />
+      )}
+      {showGenerated && (
+        <CompDocDialogFooterGeneratedActions
+          generatedAt={generatedAt}
+          signOffAttachment={signOffAttachment}
+          isDocumentsReadOnly={isDocumentsReadOnly}
+          rowVersion={rowVersion}
+          isUploading={isUploading}
+          pdfInputRef={pdfInputRef}
+          onDownloadPdf={onDownloadPdf}
+        />
+      )}
+      {showNotRequired && (
+        <CompDocDialogFooterNotRequiredActions
+          isDocumentsReadOnly={isDocumentsReadOnly}
+          onUndo={onUndo}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-header.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-header.tsx
new file mode 100644
index 00000000..08a9cb20
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-header.tsx
@@ -0,0 +1,96 @@
+import { FileText, X } from "lucide-react";
+import type { CompletionDocStateConfig } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { serviceTitle } from "@/domain/work-orders/utils/completion-doc-service-title";
+
+type CompDocDialogHeaderProps = {
+  info: WorkOrderTableRow;
+  cfg: CompletionDocStateConfig;
+  isUploading: boolean;
+  onClose: () => void;
+};
+
+export function CompDocDialogHeader({ info, cfg, isUploading, onClose }: CompDocDialogHeaderProps) {
+  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">
+          <div
+            style={{
+              fontFamily: "var(--font-display)",
+              fontSize: 16,
+              fontWeight: 700,
+              color: "var(--color-text-primary)",
+              lineHeight: 1.1,
+            }}
+          >
+            Completion Document
+          </div>
+          <div
+            className="truncate"
+            style={{
+              fontSize: 13,
+              color: "var(--muted-foreground)",
+              marginTop: 2,
+            }}
+          >
+            WO{" "}
+            <span className="font-mono" style={{ color: "var(--color-primary)", fontWeight: 600 }}>
+              #{info.woNumber}
+            </span>
+            {" · "}
+            {serviceTitle(info)}
+          </div>
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <span
+          className="inline-flex items-center gap-1.5"
+          style={{
+            height: 26,
+            padding: "0 10px",
+            borderRadius: 9999,
+            background: cfg.pillBg,
+            color: cfg.pillText,
+            fontSize: 12,
+            fontWeight: 600,
+          }}
+        >
+          <span
+            style={{
+              width: 6,
+              height: 6,
+              borderRadius: 9999,
+              background: cfg.pillText,
+            }}
+          />
+          {cfg.pillLabel}
+        </span>
+        <button
+          type="button"
+          onClick={onClose}
+          disabled={isUploading}
+          aria-label="Close"
+          className="flex items-center justify-center rounded-md transition-colors hover:bg-[var(--color-bg-muted)] disabled:opacity-40"
+          style={{
+            width: 32,
+            height: 32,
+            border: "1px solid var(--color-border)",
+            color: "var(--color-text-muted)",
+          }}
+        >
+          <X size={16} />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-resource-links.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-resource-links.tsx
new file mode 100644
index 00000000..bb772f0b
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-resource-links.tsx
@@ -0,0 +1,48 @@
+import { Download, FileText } from "lucide-react";
+
+type CompDocDialogResourceLinksProps = {
+  templateUrl?: string | null;
+  signOffAttachment?: string | null;
+};
+
+export function CompDocDialogResourceLinks({
+  templateUrl,
+  signOffAttachment,
+}: CompDocDialogResourceLinksProps) {
+  if (!templateUrl && !signOffAttachment) return null;
+
+  return (
+    <div
+      className="flex shrink-0 flex-wrap items-center gap-3 px-5 py-2"
+      style={{
+        borderBottom: "1px solid var(--color-border)",
+        background: "var(--color-bg-muted)",
+      }}
+    >
+      {Boolean(templateUrl) && (
+        <a
+          href={templateUrl ?? undefined}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+          style={{ color: "var(--color-primary)" }}
+        >
+          <Download size={13} />
+          Download blank template
+        </a>
+      )}
+      {Boolean(signOffAttachment) && (
+        <a
+          href={signOffAttachment ?? undefined}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+          style={{ color: "var(--color-primary)" }}
+        >
+          <FileText size={13} />
+          Open uploaded PDF
+        </a>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog.tsx
new file mode 100644
index 00000000..f87fbb78
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog.tsx
@@ -0,0 +1,132 @@
+import type { MouseEvent } from "react";
+import { Dialog, DialogContent, DialogTitle } from "@mui/material";
+import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+import { Text } from "@/components/ui/text";
+import type { CompDocData, CompDocSaveStatus } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { CompDocDialogFooter } from "./comp-doc-dialog-footer";
+import { CompDocDialogHeader } from "./comp-doc-dialog-header";
+import { CompDocDialogResourceLinks } from "./comp-doc-dialog-resource-links";
+import { CompDocPreview } from "./comp-doc-preview";
+import { CompDocSidebar } from "./comp-doc-sidebar";
+import { useCompDocDialog } from "./use-comp-doc-dialog";
+
+type CompDocDialogProps = {
+  row: WorkOrderTableRow;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  data?: CompDocData;
+  onSave: (data: CompDocData, status: CompDocSaveStatus) => void | Promise<void>;
+  onDateCompletedChange?: (date: string) => void | Promise<void>;
+};
+
+export function CompDocDialog({
+  row,
+  open,
+  onOpenChange,
+  data,
+  onSave,
+  onDateCompletedChange,
+}: CompDocDialogProps) {
+  const dialog = useCompDocDialog({
+    row,
+    open,
+    data,
+    onSave,
+    onDateCompletedChange,
+  });
+  const handleClose = dialog.isUploading ? undefined : () => onOpenChange(false);
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      maxWidth={false}
+      slotProps={{
+        ...dialogBlurBackdropSlotProps,
+        paper: {
+          className: "flex h-[85vh] max-h-[85vh] flex-col overflow-hidden border border-border p-0",
+          style: {
+            borderRadius: 12,
+            width: "min(1024px, calc(100vw - 32px))",
+            maxWidth: "none",
+          },
+          onClick: (e: MouseEvent<HTMLDivElement>) => e.stopPropagation(),
+        },
+      }}
+    >
+      <DialogContent
+        dividers={false}
+        className="flex min-h-0 flex-1 flex-col gap-0 overflow-hidden p-0"
+        sx={{
+          p: 0,
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+        }}
+      >
+        <DialogTitle className="sr-only">
+          Completion Document — WO #{dialog.info.woNumber}
+        </DialogTitle>
+        <Text className="sr-only" variant="description">
+          Generate, save or mark not-required the completion document for this work order.
+        </Text>
+
+        <div className="flex min-h-0 flex-1 flex-col">
+          <CompDocDialogHeader
+            info={dialog.info}
+            cfg={dialog.cfg}
+            isUploading={dialog.isUploading}
+            onClose={() => handleClose?.()}
+          />
+
+          <CompDocDialogResourceLinks
+            templateUrl={dialog.templateUrl}
+            signOffAttachment={dialog.signOffAttachment}
+          />
+
+          <div className="flex min-h-0 flex-1 flex-row">
+            <CompDocPreview
+              row={dialog.info}
+              site={dialog.site}
+              notes={dialog.notes}
+              generatedAt={dialog.generatedAt}
+              isGenerated={dialog.isGenerated}
+              isNotRequired={dialog.isNotRequired}
+            />
+            <CompDocSidebar
+              row={dialog.info}
+              site={dialog.site}
+              docState={dialog.docState}
+              generatedAt={dialog.generatedAt}
+              notes={dialog.notes}
+              editDateCompleted={dialog.editDateCompleted}
+              amazonRep={dialog.amazonRep}
+              seaRep={dialog.seaRep}
+              isGenerated={dialog.isGenerated}
+              onNotesChange={dialog.setNotes}
+              onDateCompletedChange={dialog.setEditDateCompleted}
+            />
+          </div>
+
+          <CompDocDialogFooter
+            docState={dialog.docState}
+            isDocumentsReadOnly={dialog.isDocumentsReadOnly}
+            rowVersion={dialog.rowVersion}
+            isUploading={dialog.isUploading}
+            signOffAttachment={dialog.signOffAttachment}
+            generatedAt={dialog.generatedAt}
+            pdfInputRef={dialog.pdfInputRef}
+            onMarkNotRequired={dialog.handleMarkNotRequired}
+            onSaveDraft={dialog.handleSaveDraft}
+            onGenerate={dialog.handleGenerate}
+            onUndo={dialog.handleUndo}
+            onDownloadPdf={dialog.handleDownloadPdf}
+            onUploadPdf={dialog.handleUploadPdf}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-edit-row.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-edit-row.tsx
new file mode 100644
index 00000000..3823f39b
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-edit-row.tsx
@@ -0,0 +1,51 @@
+import type { CSSProperties } from "react";
+
+const COMP_DOC_INPUT_CLS = "w-full rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1";
+
+const COMP_DOC_INPUT_STYLE: CSSProperties = {
+  fontSize: 13,
+  border: "1px solid var(--color-border)",
+  color: "var(--color-text-primary)",
+  background: "var(--color-bg-surface)",
+};
+
+type CompDocEditRowProps = {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  type?: string;
+  readOnly?: boolean;
+};
+
+export function CompDocEditRow({
+  label,
+  value,
+  onChange,
+  type = "text",
+  readOnly = false,
+}: CompDocEditRowProps) {
+  return (
+    <div style={{ padding: "8px 0", borderBottom: "1px solid var(--color-border)" }}>
+      <div style={{ fontSize: 11.5, color: "var(--muted-foreground)", marginBottom: 4 }}>
+        {label}
+      </div>
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        readOnly={readOnly}
+        className={COMP_DOC_INPUT_CLS}
+        style={{
+          ...COMP_DOC_INPUT_STYLE,
+          ...(readOnly
+            ? {
+                opacity: 0.6,
+                cursor: "default",
+                pointerEvents: "none" as const,
+              }
+            : {}),
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-footer-button-sx.ts b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-footer-button-sx.ts
new file mode 100644
index 00000000..f5c0f2ba
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-footer-button-sx.ts
@@ -0,0 +1,8 @@
+export const COMP_DOC_FOOTER_BTN_SX = {
+  minHeight: 28,
+  height: 28,
+  fontSize: 12,
+  px: 1.25,
+  py: 0.5,
+  gap: 0.75,
+} as const;
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-company-header.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-company-header.tsx
new file mode 100644
index 00000000..0797a44d
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-company-header.tsx
@@ -0,0 +1,36 @@
+import { Building2, Mail, MapPin, Phone, Printer } from "lucide-react";
+import { SEAHAVEN_HEADER } from "@/domain/work-orders/utils/completion-doc-html";
+import { CompDocCoLine } from "./comp-doc-co-line";
+
+export function CompDocPreviewCompanyHeader() {
+  return (
+    <>
+      <div
+        className="flex flex-wrap items-start justify-between gap-y-3"
+        style={{ padding: "20px 0 12px" }}
+      >
+        <div className="flex items-center">
+          <img
+            src="/seahaven-logo.svg"
+            alt="Seahaven Industries"
+            style={{ height: 34, width: "auto", display: "block" }}
+          />
+        </div>
+        <div className="space-y-1">
+          <CompDocCoLine icon={Building2} text={SEAHAVEN_HEADER.name} bold />
+          <CompDocCoLine icon={MapPin} text={SEAHAVEN_HEADER.address} />
+          <CompDocCoLine icon={Phone} text={SEAHAVEN_HEADER.phone} />
+          <CompDocCoLine icon={Printer} text={SEAHAVEN_HEADER.fax} />
+          <CompDocCoLine icon={Mail} text={SEAHAVEN_HEADER.email} />
+        </div>
+      </div>
+      <div
+        style={{
+          height: 3,
+          borderRadius: 2,
+          background: "linear-gradient(90deg,#27AAE1,#1C75BC)",
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-document.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-document.tsx
new file mode 100644
index 00000000..4c8c7872
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-document.tsx
@@ -0,0 +1,58 @@
+import type { CompDocSiteInfo } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { CompDocPreviewCompanyHeader } from "./comp-doc-preview-company-header";
+import { CompDocPreviewProcedureNotes } from "./comp-doc-preview-procedure-notes";
+import { CompDocPreviewServiceInfo } from "./comp-doc-preview-service-info";
+import { CompDocPreviewVendorSafety } from "./comp-doc-preview-vendor-safety";
+
+type CompDocPreviewDocumentProps = {
+  row: WorkOrderTableRow;
+  site: CompDocSiteInfo;
+  notes: string;
+  generatedAt: string;
+  isGenerated: boolean;
+  isNotRequired: boolean;
+};
+
+export function CompDocPreviewDocument({
+  row,
+  site,
+  notes,
+  generatedAt,
+  isGenerated,
+  isNotRequired,
+}: CompDocPreviewDocumentProps) {
+  return (
+    <div
+      style={{
+        opacity: isNotRequired ? 0.5 : 1,
+        filter: isNotRequired ? "grayscale(0.4)" : "none",
+      }}
+    >
+      <div
+        style={{
+          height: 12,
+          background: "linear-gradient(100deg,#27AAE1,#1C75BC)",
+        }}
+      />
+      <div style={{ padding: "0 28px 28px" }}>
+        <CompDocPreviewCompanyHeader />
+        <CompDocPreviewServiceInfo
+          row={row}
+          site={site}
+          isGenerated={isGenerated}
+          generatedAt={generatedAt}
+        />
+        <CompDocPreviewVendorSafety row={row} />
+        <CompDocPreviewProcedureNotes pm={row.pm} notes={notes} />
+      </div>
+      <div
+        style={{
+          height: 24,
+          background: "linear-gradient(100deg,#1C75BC,#27AAE1)",
+          clipPath: "polygon(0 45%,100% 0,100% 100%,0 100%)",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-not-required-stamp.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-not-required-stamp.tsx
new file mode 100644
index 00000000..c3ed0ec2
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-not-required-stamp.tsx
@@ -0,0 +1,25 @@
+import { Ban } from "lucide-react";
+
+export function CompDocPreviewNotRequiredStamp() {
+  return (
+    <div className="pointer-events-none absolute inset-0 flex items-start justify-center">
+      <div
+        className="inline-flex items-center gap-2"
+        style={{
+          marginTop: "30%",
+          transform: "rotate(-15deg)",
+          border: "3px solid var(--warning)",
+          color: "var(--warning)",
+          borderRadius: 8,
+          padding: "8px 18px",
+          fontWeight: 800,
+          fontSize: 22,
+          letterSpacing: "0.06em",
+          background: "rgba(255,255,255,0.65)",
+        }}
+      >
+        <Ban size={20} /> NOT REQUIRED
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-procedure-notes.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-procedure-notes.tsx
new file mode 100644
index 00000000..e0c13e1a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-procedure-notes.tsx
@@ -0,0 +1,68 @@
+import { Text } from "@/components/ui/text";
+import { procedureFor } from "@/domain/work-orders/utils/completion-doc-procedures";
+import { CompDocProcedureList } from "./comp-doc-procedure-list";
+
+type CompDocPreviewProcedureNotesProps = {
+  pm: string;
+  notes: string;
+};
+
+export function CompDocPreviewProcedureNotes({ pm, notes }: CompDocPreviewProcedureNotesProps) {
+  const proc = procedureFor(pm);
+
+  return (
+    <>
+      <Text
+        as="h3"
+        style={{
+          fontSize: 13,
+          fontWeight: 700,
+          color: "#161E38",
+          margin: "16px 0 4px",
+        }}
+      >
+        {proc.heading}
+      </Text>
+      <Text
+        as="p"
+        style={{
+          fontSize: 12.5,
+          lineHeight: 1.5,
+          color: "#58595B",
+          margin: "0 0 8px",
+        }}
+      >
+        {proc.intro}
+      </Text>
+      <CompDocProcedureList proc={proc} />
+
+      {Boolean(notes) && (
+        <>
+          <Text
+            as="h3"
+            style={{
+              fontSize: 13,
+              fontWeight: 700,
+              color: "#161E38",
+              margin: "16px 0 4px",
+            }}
+          >
+            PM Comments
+          </Text>
+          <Text
+            as="p"
+            style={{
+              fontSize: 12.5,
+              lineHeight: 1.5,
+              color: "#161E38",
+              margin: 0,
+              whiteSpace: "pre-wrap",
+            }}
+          >
+            {notes}
+          </Text>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-service-info.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-service-info.tsx
new file mode 100644
index 00000000..8dd82d83
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-service-info.tsx
@@ -0,0 +1,89 @@
+import { CheckCircle2 } from "lucide-react";
+import { Text } from "@/components/ui/text";
+import type { CompDocSiteInfo } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { serviceTitle } from "@/domain/work-orders/utils/completion-doc-service-title";
+
+type CompDocPreviewServiceInfoProps = {
+  row: WorkOrderTableRow;
+  site: CompDocSiteInfo;
+  isGenerated: boolean;
+  generatedAt: string;
+};
+
+export function CompDocPreviewServiceInfo({
+  row,
+  site,
+  isGenerated,
+  generatedAt,
+}: CompDocPreviewServiceInfoProps) {
+  return (
+    <>
+      {isGenerated && (
+        <div
+          className="inline-flex items-center gap-1.5"
+          style={{
+            marginTop: 16,
+            padding: "4px 10px",
+            borderRadius: 9999,
+            background: "var(--doc-yes-bg)",
+            color: "var(--color-success)",
+            fontSize: 11.5,
+            fontWeight: 600,
+          }}
+        >
+          <CheckCircle2 size={13} /> Generated · {generatedAt} · v1
+        </div>
+      )}
+
+      <Text
+        as="h2"
+        style={{
+          fontFamily: "var(--font-sans)",
+          fontSize: 13,
+          fontWeight: 700,
+          letterSpacing: "0.02em",
+          color: "#161E38",
+          margin: "16px 0 4px",
+        }}
+      >
+        {serviceTitle(row).toUpperCase()}
+      </Text>
+      <Text
+        as="p"
+        className="font-mono"
+        style={{
+          fontSize: 12.5,
+          fontWeight: 600,
+          color: "#1C75BC",
+          margin: "2px 0",
+        }}
+      >
+        WO# {row.woNumber}
+      </Text>
+
+      <div style={{ marginTop: 14 }}>
+        <Text
+          as="p"
+          style={{
+            fontSize: 13,
+            fontWeight: 600,
+            color: "#161E38",
+            margin: "2px 0",
+          }}
+        >
+          Site ID — {row.site}
+        </Text>
+        <Text as="p" style={{ fontSize: 13, color: "#161E38", margin: "2px 0" }}>
+          Amazon.com Services LLC {row.site}
+        </Text>
+        <Text as="p" style={{ fontSize: 13, color: "#58595B", margin: "2px 0" }}>
+          {site.street},
+        </Text>
+        <Text as="p" style={{ fontSize: 13, color: "#58595B", margin: "2px 0" }}>
+          {site.label}
+        </Text>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-status-badge.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-status-badge.tsx
new file mode 100644
index 00000000..5cf12ae6
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-status-badge.tsx
@@ -0,0 +1,32 @@
+import { CheckCircle2, FileText } from "lucide-react";
+
+type CompDocPreviewStatusBadgeProps = {
+  isGenerated: boolean;
+};
+
+export function CompDocPreviewStatusBadge({ isGenerated }: CompDocPreviewStatusBadgeProps) {
+  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)",
+        }}
+      >
+        {isGenerated ? (
+          <CheckCircle2 size={13} style={{ color: "var(--color-success)" }} />
+        ) : (
+          <FileText size={13} />
+        )}
+        {isGenerated ? "Generated document" : "Preview — not yet generated"}
+      </span>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-vendor-safety.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-vendor-safety.tsx
new file mode 100644
index 00000000..807eca19
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-vendor-safety.tsx
@@ -0,0 +1,35 @@
+import { Text } from "@/components/ui/text";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { SAFETY_BULLETS } from "@/domain/work-orders/utils/completion-doc-procedures";
+
+type CompDocPreviewVendorSafetyProps = {
+  row: WorkOrderTableRow;
+};
+
+export function CompDocPreviewVendorSafety({ row }: CompDocPreviewVendorSafetyProps) {
+  return (
+    <>
+      <Text as="p" style={{ fontSize: 13, color: "#161E38", margin: "14px 0 6px" }}>
+        <span style={{ fontWeight: 700 }}>Vendor / Technician:&nbsp;</span>
+        {row.tech || "—"}
+        {row.company ? ` · ${row.company}` : ""}
+      </Text>
+
+      <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>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview.tsx
new file mode 100644
index 00000000..df26f1a8
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview.tsx
@@ -0,0 +1,65 @@
+import type { CompDocSiteInfo } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { CompDocPreviewDocument } from "./comp-doc-preview-document";
+import { CompDocPreviewNotRequiredStamp } from "./comp-doc-preview-not-required-stamp";
+import { CompDocPreviewStatusBadge } from "./comp-doc-preview-status-badge";
+
+type CompDocPreviewProps = {
+  row: WorkOrderTableRow;
+  site: CompDocSiteInfo;
+  notes: string;
+  generatedAt: string;
+  isGenerated: boolean;
+  isNotRequired: boolean;
+};
+
+export function CompDocPreview({
+  row,
+  site,
+  notes,
+  generatedAt,
+  isGenerated,
+  isNotRequired,
+}: CompDocPreviewProps) {
+  return (
+    <div
+      className="flex min-h-0 flex-col"
+      style={{
+        width: "58%",
+        borderRight: "1px solid var(--color-border)",
+        background: "var(--color-bg-muted)",
+      }}
+    >
+      <CompDocPreviewStatusBadge isGenerated={isGenerated} />
+
+      <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",
+          }}
+        >
+          <CompDocPreviewDocument
+            row={row}
+            site={site}
+            notes={notes}
+            generatedAt={generatedAt}
+            isGenerated={isGenerated}
+            isNotRequired={isNotRequired}
+          />
+
+          {isNotRequired && <CompDocPreviewNotRequiredStamp />}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-procedure-list.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-procedure-list.tsx
new file mode 100644
index 00000000..5d9de8b9
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-procedure-list.tsx
@@ -0,0 +1,32 @@
+import type { Procedure } from "@/domain/work-orders/utils/completion-doc-procedures";
+
+type CompDocProcedureListProps = {
+  proc: Procedure;
+};
+
+export function CompDocProcedureList({ proc }: CompDocProcedureListProps) {
+  return (
+    <ol style={{ listStyle: "decimal", paddingLeft: 22, margin: 0 }}>
+      {proc.steps.map((st, i) => (
+        <li key={i} style={{ margin: "6px 0", fontSize: 13, lineHeight: 1.5 }}>
+          {st.text}
+          {st.sub != null && (
+            <ol
+              style={{
+                listStyle: "lower-alpha",
+                paddingLeft: 22,
+                margin: "4px 0 0",
+              }}
+            >
+              {st.sub.map((x, j) => (
+                <li key={j} style={{ margin: "2px 0" }}>
+                  {x}
+                </li>
+              ))}
+            </ol>
+          )}
+        </li>
+      ))}
+    </ol>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-sidebar.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-sidebar.tsx
new file mode 100644
index 00000000..02035224
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-sidebar.tsx
@@ -0,0 +1,174 @@
+import { Building2, MapPin, Users, Wrench } from "lucide-react";
+import type { CompDocSiteInfo, DocState } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  DOC_STATE_CFG,
+  docStatusCardDescription,
+} from "@/domain/work-orders/utils/completion-doc-state";
+import { CompDocDetailRow } from "./comp-doc-detail-row";
+import { CompDocEditRow } from "./comp-doc-edit-row";
+
+type CompDocSidebarProps = {
+  row: WorkOrderTableRow;
+  site: CompDocSiteInfo;
+  docState: DocState;
+  generatedAt: string;
+  notes: string;
+  editDateCompleted: string;
+  amazonRep: string;
+  seaRep: string;
+  isGenerated: boolean;
+  onNotesChange: (value: string) => void;
+  onDateCompletedChange: (value: string) => void;
+};
+
+export function CompDocSidebar({
+  row,
+  site,
+  docState,
+  generatedAt,
+  notes,
+  editDateCompleted,
+  amazonRep,
+  seaRep,
+  isGenerated,
+  onNotesChange,
+  onDateCompletedChange,
+}: CompDocSidebarProps) {
+  const displayState: DocState =
+    isGenerated && docState !== "not-required" ? "generated" : docState;
+  const cfg = DOC_STATE_CFG[displayState];
+  const StateIcon = cfg.icon;
+
+  return (
+    <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 }}>
+        <div
+          className="flex items-start gap-3"
+          style={{
+            padding: 14,
+            borderRadius: 10,
+            background: cfg.cardBg,
+            border: `1px solid ${cfg.cardBorder}`,
+          }}
+        >
+          <div
+            className="flex shrink-0 items-center justify-center"
+            style={{
+              width: 34,
+              height: 34,
+              borderRadius: 8,
+              background: cfg.cardIconBg,
+              border: `1px solid ${cfg.cardBorder}`,
+            }}
+          >
+            <StateIcon size={17} style={{ color: cfg.iconColor }} />
+          </div>
+          <div className="min-w-0">
+            <div
+              style={{
+                fontSize: 13.5,
+                fontWeight: 600,
+                color: "var(--color-text-primary)",
+              }}
+            >
+              {cfg.cardTitle}
+            </div>
+            <div
+              style={{
+                fontSize: 12.5,
+                lineHeight: 1.45,
+                color: "var(--muted-foreground)",
+                marginTop: 3,
+              }}
+            >
+              {docStatusCardDescription(displayState, generatedAt)}
+            </div>
+          </div>
+        </div>
+
+        <div style={{ marginTop: 20 }}>
+          <div
+            style={{
+              fontFamily: "var(--font-mono)",
+              fontSize: 10,
+              fontWeight: 600,
+              letterSpacing: "0.1em",
+              textTransform: "uppercase",
+              color: "var(--muted-foreground)",
+            }}
+          >
+            Work Order Details
+          </div>
+          <div style={{ marginTop: 6 }}>
+            <CompDocDetailRow icon={Building2} label="WO #" value={`#${row.woNumber}`} />
+            <CompDocDetailRow
+              icon={MapPin}
+              label="Site Code"
+              value={`${row.site} · Amazon.com Services LLC`}
+            />
+            <CompDocDetailRow icon={MapPin} label="Address" value={site.fullAddress} />
+            <CompDocEditRow
+              label="Date Work Completed"
+              value={editDateCompleted}
+              onChange={onDateCompletedChange}
+              type="date"
+              readOnly={isGenerated}
+            />
+            <CompDocDetailRow icon={Users} label="Amazon Representative" value={amazonRep || "—"} />
+            <CompDocDetailRow
+              icon={Wrench}
+              label="Seahaven Representative"
+              value={seaRep || "—"}
+              last
+            />
+          </div>
+        </div>
+
+        <div style={{ marginTop: 18 }}>
+          <label
+            style={{
+              fontSize: 13,
+              fontWeight: 600,
+              color: "var(--color-text-primary)",
+            }}
+          >
+            PM Comments{" "}
+            <span style={{ fontWeight: 400, color: "var(--muted-foreground)" }}>
+              — optional, included in the document
+            </span>
+          </label>
+          <textarea
+            value={notes}
+            onChange={(e) => onNotesChange(e.target.value)}
+            readOnly={isGenerated}
+            rows={3}
+            placeholder="Add findings, parts used, access notes, or anything the site POC should see…"
+            className="mt-2 w-full resize-none"
+            style={{
+              fontSize: 13,
+              fontFamily: "var(--font-sans)",
+              color: "var(--color-text-primary)",
+              background: "var(--color-bg-surface)",
+              border: "1px solid var(--color-border)",
+              borderRadius: 8,
+              padding: "10px 12px",
+              lineHeight: 1.5,
+              outline: "none",
+              ...(isGenerated
+                ? {
+                    opacity: 0.6,
+                    cursor: "default",
+                    pointerEvents: "none" as const,
+                  }
+                : {}),
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog-seed.ts b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog-seed.ts
new file mode 100644
index 00000000..d189971f
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog-seed.ts
@@ -0,0 +1,59 @@
+import { useEffect, useRef, type Dispatch, type SetStateAction } from "react";
+import type { CompDocData, DocState } from "@/domain/work-orders/types/completion-doc";
+import type { CompletionDocStatus } from "@/domain/work-orders/types/work-order-table-row";
+import { docStateOf } from "@/domain/work-orders/utils/completion-doc-state";
+
+type UseCompDocDialogSeedArgs = {
+  open: boolean;
+  infoId: string | number;
+  infoDocStatus: CompletionDocStatus;
+  infoCompletedDate?: string | null;
+  completionDocStatus?: CompletionDocStatus | null;
+  data?: CompDocData;
+  setNotes: Dispatch<SetStateAction<string>>;
+  setDocState: Dispatch<SetStateAction<DocState>>;
+  setGeneratedAt: Dispatch<SetStateAction<string>>;
+  setEditDateCompleted: Dispatch<SetStateAction<string>>;
+};
+
+/** Prototype seeds once per open/WO session; detail refetches must not wipe edits. */
+export function useCompDocDialogSeed({
+  open,
+  infoId,
+  infoDocStatus,
+  infoCompletedDate,
+  completionDocStatus,
+  data,
+  setNotes,
+  setDocState,
+  setGeneratedAt,
+  setEditDateCompleted,
+}: UseCompDocDialogSeedArgs) {
+  const seedKeyRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!open) {
+      seedKeyRef.current = null;
+      return;
+    }
+    const key = String(infoId);
+    if (seedKeyRef.current === key) return;
+    seedKeyRef.current = key;
+    setNotes(data?.notes ?? "");
+    setDocState(docStateOf(completionDocStatus || infoDocStatus));
+    setGeneratedAt(data?.generatedAt ?? "");
+    setEditDateCompleted(infoCompletedDate || "");
+  }, [
+    open,
+    infoId,
+    infoDocStatus,
+    infoCompletedDate,
+    completionDocStatus,
+    data?.notes,
+    data?.generatedAt,
+    setNotes,
+    setDocState,
+    setGeneratedAt,
+    setEditDateCompleted,
+  ]);
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog.tsx b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog.tsx
new file mode 100644
index 00000000..365cf856
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog.tsx
@@ -0,0 +1,179 @@
+import { useMemo, useRef, useState } from "react";
+import { toast } from "react-toastify";
+import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
+import type {
+  CompDocData,
+  CompDocSaveStatus,
+  DocFields,
+  DocState,
+} from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { useWorkOrderBoardDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
+import { useUploadCompletionDoc } from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { resolveCompDocSite } from "@/domain/work-orders/utils/completion-doc-site";
+import { DOC_STATE_CFG } from "@/domain/work-orders/utils/completion-doc-state";
+import { isWorkOrderDocumentsReadOnly } from "@/domain/work-orders/utils/work-order-media-limits";
+import { useCompDocDialogSeed } from "./use-comp-doc-dialog-seed";
+import { useCompDocNotRequiredActions } from "./use-comp-doc-not-required-actions";
+import { useCompDocPdfActions } from "./use-comp-doc-pdf-actions";
+import { useCompDocPersistFlow } from "./use-comp-doc-persist-flow";
+
+type UseCompDocDialogArgs = {
+  row: WorkOrderTableRow;
+  open: boolean;
+  data?: CompDocData;
+  onSave: (data: CompDocData, status: CompDocSaveStatus) => void | Promise<void>;
+  onDateCompletedChange?: (date: string) => void | Promise<void>;
+};
+
+function notifyDraftSaved() {
+  toast(
+    <div
+      className="flex items-center gap-2"
+      style={{
+        background: "var(--foreground)",
+        color: "#fff",
+        padding: "10px 18px",
+        borderRadius: 9999,
+        fontSize: 13,
+        fontWeight: 600,
+        boxShadow: "0 10px 30px -10px rgba(0,0,0,.45)",
+      }}
+    >
+      Draft saved
+    </div>,
+    {
+      position: "bottom-center",
+      autoClose: 3000,
+      hideProgressBar: true,
+      closeButton: false,
+      icon: false,
+      className: "!min-h-0 !bg-transparent !p-0 !shadow-none",
+    },
+  );
+}
+
+export function useCompDocDialog({
+  row,
+  open,
+  data,
+  onSave,
+  onDateCompletedChange,
+}: UseCompDocDialogArgs) {
+  const locId = String(row.locationId || "");
+  const { data: locationDetail } = useLocationDetail(locId || undefined);
+  const { data: boardDetail } = useWorkOrderBoardDetail(row.id, open);
+  const uploadCompletionMutation = useUploadCompletionDoc(row.id);
+  const pdfInputRef = useRef<HTMLInputElement>(null);
+  const [isFinalizing, setIsFinalizing] = useState(false);
+
+  const info = boardDetail?.info ?? row;
+  const completion = boardDetail?.completion;
+  const templateUrl = completion?.template?.templateUrl;
+  const signOffAttachment = completion?.signOffAttachment;
+  const rowVersion = info.rowVersion || row.rowVersion;
+  const isDocumentsReadOnly = isWorkOrderDocumentsReadOnly(info.status);
+  const site = useMemo(() => resolveCompDocSite(info, locationDetail), [info, locationDetail]);
+
+  const [notes, setNotes] = useState("");
+  const [docState, setDocState] = useState<DocState>("draft");
+  const [generatedAt, setGeneratedAt] = useState("");
+  const [editDateCompleted, setEditDateCompleted] = useState("");
+
+  useCompDocDialogSeed({
+    open,
+    infoId: info.id,
+    infoDocStatus: info.docStatus,
+    infoCompletedDate: info.completedDate,
+    completionDocStatus: completion?.docStatus,
+    data,
+    setNotes,
+    setDocState,
+    setGeneratedAt,
+    setEditDateCompleted,
+  });
+
+  const amazonRep = info.pocName || "";
+  const seaRep = info.tech || "";
+  const cfg = DOC_STATE_CFG[docState];
+  const isNotRequired = docState === "not-required";
+  const isGenerated = docState === "generated" || Boolean(signOffAttachment);
+
+  const docFields: DocFields = {
+    street: site.street,
+    city: site.city,
+    state: site.state,
+    zip: site.zip,
+    dateCompleted: editDateCompleted,
+    amazonRep,
+    seaRep,
+  };
+
+  const { persist, syncDateIfChanged, refreshAuthoritativeState, handleSaveDraft, handleGenerate } =
+    useCompDocPersistFlow({
+      workOrderId: row.id,
+      notes,
+      generatedAt,
+      editDateCompleted,
+      currentCompletedDate: info.completedDate || "",
+      onSave,
+      onDateCompletedChange,
+      onGenerated: (ts) => {
+        setGeneratedAt(ts);
+        setDocState("generated");
+      },
+      onDraftSaved: notifyDraftSaved,
+    });
+
+  const { handleMarkNotRequired, handleUndo } = useCompDocNotRequiredActions({
+    docState,
+    setDocState,
+    persist,
+    refreshAuthoritativeState,
+    setIsFinalizing,
+  });
+
+  const { handleDownloadPdf, handleUploadPdf } = useCompDocPdfActions({
+    info,
+    signOffAttachment,
+    rowVersion,
+    notes,
+    generatedAt,
+    docFields,
+    uploadCompletionMutation,
+    persist,
+    syncDateIfChanged,
+    setGeneratedAt,
+    markGenerated: () => setDocState("generated"),
+    onPersistFailure: refreshAuthoritativeState,
+    onFinalizingChange: setIsFinalizing,
+  });
+
+  return {
+    info,
+    templateUrl,
+    signOffAttachment,
+    rowVersion,
+    isDocumentsReadOnly,
+    site,
+    notes,
+    setNotes,
+    docState,
+    generatedAt,
+    editDateCompleted,
+    setEditDateCompleted,
+    amazonRep,
+    seaRep,
+    cfg,
+    isNotRequired,
+    isGenerated,
+    isUploading: uploadCompletionMutation.isPending || isFinalizing,
+    pdfInputRef,
+    handleMarkNotRequired,
+    handleUndo,
+    handleSaveDraft,
+    handleGenerate,
+    handleDownloadPdf,
+    handleUploadPdf,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-not-required-actions.ts b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-not-required-actions.ts
new file mode 100644
index 00000000..4159b926
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-not-required-actions.ts
@@ -0,0 +1,58 @@
+import { toast } from "react-toastify";
+import type {
+  CompDocData,
+  CompDocSaveStatus,
+  DocState,
+} from "@/domain/work-orders/types/completion-doc";
+
+type PersistFn = (data: Partial<CompDocData>, status: CompDocSaveStatus) => void | Promise<void>;
+
+type UseCompDocNotRequiredActionsArgs = {
+  docState: DocState;
+  setDocState: (state: DocState) => void;
+  persist: PersistFn;
+  refreshAuthoritativeState: () => void;
+  setIsFinalizing: (value: boolean) => void;
+};
+
+export function useCompDocNotRequiredActions({
+  docState,
+  setDocState,
+  persist,
+  refreshAuthoritativeState,
+  setIsFinalizing,
+}: UseCompDocNotRequiredActionsArgs) {
+  async function handleMarkNotRequired() {
+    const previous = docState;
+    setDocState("not-required");
+    setIsFinalizing(true);
+    try {
+      await persist({}, "NN");
+    } catch (error) {
+      setDocState(previous);
+      refreshAuthoritativeState();
+      toast.error(
+        error instanceof Error ? error.message : "Failed to mark document as not required",
+      );
+    } finally {
+      setIsFinalizing(false);
+    }
+  }
+
+  async function handleUndo() {
+    const previous = docState;
+    setDocState("draft");
+    setIsFinalizing(true);
+    try {
+      await persist({}, "No");
+    } catch (error) {
+      setDocState(previous);
+      refreshAuthoritativeState();
+      toast.error(error instanceof Error ? error.message : "Failed to undo not-required");
+    } finally {
+      setIsFinalizing(false);
+    }
+  }
+
+  return { handleMarkNotRequired, handleUndo };
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-pdf-actions.ts b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-pdf-actions.ts
new file mode 100644
index 00000000..5d3b6475
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-pdf-actions.ts
@@ -0,0 +1,98 @@
+import { toast } from "react-toastify";
+import type {
+  CompDocData,
+  CompDocSaveStatus,
+  DocFields,
+} from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { useUploadCompletionDoc } from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { buildDocHtml, printDoc } from "@/domain/work-orders/utils/completion-doc-html";
+import { fmtDocNow } from "@/domain/work-orders/utils/completion-doc-state";
+import {
+  formatMediaSizeLimit,
+  isWorkOrderFileTooLarge,
+} from "@/domain/work-orders/utils/work-order-media-limits";
+
+type UseCompDocPdfActionsArgs = {
+  info: WorkOrderTableRow;
+  signOffAttachment?: string | null;
+  rowVersion?: string;
+  notes: string;
+  generatedAt: string;
+  docFields: DocFields;
+  uploadCompletionMutation: ReturnType<typeof useUploadCompletionDoc>;
+  persist: (extra: Partial<CompDocData>, status: CompDocSaveStatus) => Promise<void>;
+  syncDateIfChanged: () => Promise<void>;
+  setGeneratedAt: (value: string) => void;
+  markGenerated: () => void;
+  onPersistFailure?: () => void;
+  onFinalizingChange?: (finalizing: boolean) => void;
+};
+
+export function useCompDocPdfActions({
+  info,
+  signOffAttachment,
+  rowVersion,
+  notes,
+  generatedAt,
+  docFields,
+  uploadCompletionMutation,
+  persist,
+  syncDateIfChanged,
+  setGeneratedAt,
+  markGenerated,
+  onPersistFailure,
+  onFinalizingChange,
+}: UseCompDocPdfActionsArgs) {
+  function handleDownloadPdf() {
+    if (signOffAttachment) {
+      window.open(signOffAttachment, "_blank", "noopener,noreferrer");
+      return;
+    }
+    printDoc(buildDocHtml(info, { notes, generatedAt }, docFields));
+  }
+
+  function handleUploadPdf(files: FileList | null) {
+    const file = files?.[0];
+    if (!file) return;
+    if (isWorkOrderFileTooLarge(file)) {
+      toast.error(`File exceeds the ${formatMediaSizeLimit()} limit.`);
+      return;
+    }
+    if (file.type !== "application/pdf" && !file.name.toLowerCase().endsWith(".pdf")) {
+      toast.error("Please upload a PDF file.");
+      return;
+    }
+    if (!rowVersion) {
+      toast.error("Missing work order version. Refresh and try again.");
+      return;
+    }
+    uploadCompletionMutation.mutate(
+      { file, workOrderVersion: rowVersion },
+      {
+        onSuccess: () => {
+          // Keep close disabled across the gap between upload settle and docStatus persist.
+          onFinalizingChange?.(true);
+          void (async () => {
+            const ts = fmtDocNow();
+            try {
+              await syncDateIfChanged();
+              await persist({ generatedAt: ts }, "Yes");
+              setGeneratedAt(ts);
+              markGenerated();
+            } catch (error) {
+              onPersistFailure?.();
+              toast.error(
+                error instanceof Error ? error.message : "Failed to finalize completion document",
+              );
+            } finally {
+              onFinalizingChange?.(false);
+            }
+          })();
+        },
+      },
+    );
+  }
+
+  return { handleDownloadPdf, handleUploadPdf };
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-persist-flow.ts b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-persist-flow.ts
new file mode 100644
index 00000000..57a89c17
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-persist-flow.ts
@@ -0,0 +1,84 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import type { CompDocData, CompDocSaveStatus } from "@/domain/work-orders/types/completion-doc";
+import { fmtDocNow } from "@/domain/work-orders/utils/completion-doc-state";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+type UseCompDocPersistFlowArgs = {
+  workOrderId: string | number;
+  notes: string;
+  generatedAt: string;
+  editDateCompleted: string;
+  currentCompletedDate: string;
+  onSave: (data: CompDocData, status: CompDocSaveStatus) => void | Promise<void>;
+  onDateCompletedChange?: (date: string) => void | Promise<void>;
+  onGenerated: (generatedAt: string) => void;
+  onDraftSaved: () => void;
+};
+
+export function useCompDocPersistFlow({
+  workOrderId,
+  notes,
+  generatedAt,
+  editDateCompleted,
+  currentCompletedDate,
+  onSave,
+  onDateCompletedChange,
+  onGenerated,
+  onDraftSaved,
+}: UseCompDocPersistFlowArgs) {
+  const queryClient = useQueryClient();
+
+  const refreshAuthoritativeState = () => {
+    void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });
+    void queryClient.invalidateQueries({
+      queryKey: queryKeys.workOrders.boardDetail(workOrderId),
+    });
+    void queryClient.invalidateQueries({
+      queryKey: queryKeys.workOrders.detail(workOrderId),
+    });
+  };
+
+  const persist = async (extra: Partial<CompDocData>, status: CompDocSaveStatus) => {
+    await onSave({ notes, generatedAt, ...extra }, status);
+  };
+
+  const syncDateIfChanged = async () => {
+    if (editDateCompleted !== currentCompletedDate) {
+      await onDateCompletedChange?.(editDateCompleted);
+    }
+  };
+
+  async function handleSaveDraft() {
+    try {
+      // Prerequisites first; docStatus last.
+      await syncDateIfChanged();
+      await persist({}, "No");
+      onDraftSaved();
+    } catch (error) {
+      refreshAuthoritativeState();
+      toast.error(error instanceof Error ? error.message : "Failed to save draft");
+    }
+  }
+
+  async function handleGenerate() {
+    const ts = fmtDocNow();
+    try {
+      // Prerequisites first; only mark Generated after completedDate persists.
+      await syncDateIfChanged();
+      await persist({ generatedAt: ts }, "Yes");
+      onGenerated(ts);
+    } catch (error) {
+      refreshAuthoritativeState();
+      toast.error(error instanceof Error ? error.message : "Failed to generate document");
+    }
+  }
+
+  return {
+    persist,
+    syncDateIfChanged,
+    refreshAuthoritativeState,
+    handleSaveDraft,
+    handleGenerate,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/detail/audit-timeline.tsx b/src/app/(protected)/workorders/_components/detail/audit-timeline.tsx
new file mode 100644
index 00000000..2e646ab5
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/audit-timeline.tsx
@@ -0,0 +1,67 @@
+import { useMemo } from "react";
+import { Box, Typography } from "@mui/material";
+import type { WorkOrderAuditEntry } from "@/domain/work-orders/types/work-order";
+import { formatDateTime } from "@/lib/time-utils";
+
+type AuditTimelineProps = {
+  entries: WorkOrderAuditEntry[];
+  emptyMessage?: string;
+  maxHeightClass?: string;
+};
+
+export function AuditTimeline({
+  entries,
+  emptyMessage = "No changes recorded.",
+  maxHeightClass = "max-h-72",
+}: AuditTimelineProps) {
+  const sorted = useMemo(
+    () =>
+      [...entries].sort(
+        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+      ),
+    [entries],
+  );
+
+  if (!sorted.length) {
+    return <Typography color="text.secondary">{emptyMessage}</Typography>;
+  }
+
+  return (
+    <Box className={`${maxHeightClass} space-y-3 overflow-y-auto`}>
+      {sorted.map((entry) => (
+        <Box key={String(entry.id)} className="rounded border border-border p-3">
+          <Box className="mb-1 flex justify-between gap-2">
+            <Typography variant="caption" className="font-semibold">
+              {entry.userName || "System"}
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+              {entry.createdAt ? formatDateTime(entry.createdAt) : ""}
+            </Typography>
+          </Box>
+          <Typography variant="body2">
+            {entry.action ? (
+              entry.action
+            ) : (
+              <>
+                <strong>{entry.fieldName}</strong> {entry.oldValue} → {entry.newValue}
+              </>
+            )}
+          </Typography>
+          {Boolean(entry.action && entry.fieldName) && (
+            <Typography
+              variant="caption"
+              color="text.secondary"
+              className="mt-1"
+              sx={{ display: "block" }}
+            >
+              {entry.fieldName}
+              {entry.oldValue || entry.newValue
+                ? `: ${entry.oldValue || "—"} → ${entry.newValue || "—"}`
+                : ""}
+            </Typography>
+          )}
+        </Box>
+      ))}
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/slide-over-audit-list.tsx b/src/app/(protected)/workorders/_components/detail/slide-over-audit-list.tsx
new file mode 100644
index 00000000..57c72270
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/slide-over-audit-list.tsx
@@ -0,0 +1,164 @@
+import { Settings } from "lucide-react";
+import { Text } from "@/components/ui/text";
+import type { WorkOrderAuditEntry, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import {
+  getAvatarColorFromName,
+  getDispatcherAvatarColor,
+  getInitialsFromName,
+} from "@/domain/work-orders/utils/dispatcher-avatar-color";
+import { formatBoardAuditAction } from "@/domain/work-orders/utils/format-board-audit-action";
+
+function isSystemEntry(entry: WorkOrderAuditEntry): boolean {
+  if (entry.type === "system") return true;
+  if (entry.type === "manual") return false;
+  const name = entry.userName?.trim();
+  return !name || name.toLowerCase() === "system";
+}
+
+function formatClock(date: Date): string {
+  return date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+/**
+ * Manual (image): `· 9:48 AM`
+ * System (image): `05/13 · 8:00 AM`
+ * Prefer API display strings that already include · / AM|PM.
+ */
+function formatAuditTime(value: string, isSystem: boolean): string {
+  if (!value) return "";
+  if (/[·•]/.test(value) || /\b(AM|PM)\b/i.test(value)) return value;
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+
+  const timePart = formatClock(date);
+  if (isSystem) {
+    const datePart = date.toLocaleDateString("en-US", {
+      month: "2-digit",
+      day: "2-digit",
+    });
+    return `${datePart} · ${timePart}`;
+  }
+  return `· ${timePart}`;
+}
+
+type SlideOverAuditListProps = {
+  entries: WorkOrderAuditEntry[];
+  users?: WorkOrderUser[];
+};
+
+export function SlideOverAuditList({ entries, users = [] }: SlideOverAuditListProps) {
+  return (
+    <div>
+      <Text
+        as="p"
+        className="mb-3 text-[10px] font-medium uppercase"
+        style={{ letterSpacing: "0.06em", color: "var(--color-text-muted)" }}
+      >
+        Audit Log
+      </Text>
+      <div className="space-y-2.5">
+        {entries.length === 0 ? (
+          <Text
+            as="p"
+            className="py-4 text-center text-[12px]"
+            style={{ color: "var(--muted-foreground)" }}
+          >
+            No changes recorded
+          </Text>
+        ) : (
+          entries.map((entry, index) => {
+            const isSys = isSystemEntry(entry);
+            const dispatcher = users.find(
+              (user) =>
+                entry.dispatcherId != null && String(user.id) === String(entry.dispatcherId),
+            );
+            const name =
+              dispatcher?.name ||
+              entry.userName?.trim() ||
+              (entry.dispatcherId ? String(entry.dispatcherId) : "Unknown");
+            const color = dispatcher
+              ? getDispatcherAvatarColor(dispatcher)
+              : getAvatarColorFromName(name);
+            const initials = dispatcher
+              ? getInitialsFromName(dispatcher.name)
+              : getInitialsFromName(name);
+            const action = formatBoardAuditAction(entry);
+
+            return (
+              <div
+                key={String(entry.id) || index}
+                className="flex items-start gap-2.5"
+                style={
+                  isSys
+                    ? {
+                        background: "#F8FAFC",
+                        borderRadius: 6,
+                        padding: "10px",
+                      }
+                    : {
+                        background: "transparent",
+                        padding: "10px 0",
+                      }
+                }
+              >
+                {isSys ? (
+                  <div
+                    className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded"
+                    style={{ background: "#E2E8F0" }}
+                  >
+                    <Settings size={10} style={{ color: "#64748B" }} />
+                  </div>
+                ) : (
+                  <div
+                    className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[8px] font-bold"
+                    style={
+                      dispatcher || name !== "Unknown"
+                        ? { background: `${color}25`, color }
+                        : {
+                            background: "var(--color-bg-muted)",
+                            color: "var(--color-text-muted)",
+                          }
+                    }
+                  >
+                    {initials}
+                  </div>
+                )}
+                <div className="min-w-0 flex-1">
+                  {isSys ? (
+                    <Text as="p" className="text-[12px] leading-snug" style={{ color: "#374151" }}>
+                      <span style={{ fontStyle: "italic", color: "#6B7280" }}>System</span>
+                      <span style={{ color: "#6B7280" }}> — </span>
+                      {action}
+                    </Text>
+                  ) : (
+                    <Text as="p" className="text-[12px] leading-snug">
+                      <span className="font-semibold" style={{ color: "#1E293B" }}>
+                        {name}
+                      </span>
+                      <span style={{ color: "#D1D5DB" }}> · </span>
+                      <span style={{ color: "#374151" }}>{action}</span>
+                    </Text>
+                  )}
+                  <Text
+                    as="p"
+                    className="mt-0.5 text-[10px]"
+                    style={{
+                      fontFamily: "var(--font-mono)",
+                      color: "#9CA3AF",
+                    }}
+                  >
+                    {formatAuditTime(entry.createdAt, isSys)}
+                  </Text>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/slide-over-footer.tsx b/src/app/(protected)/workorders/_components/detail/slide-over-footer.tsx
new file mode 100644
index 00000000..82b03b26
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/slide-over-footer.tsx
@@ -0,0 +1,143 @@
+import { AlertTriangle, Ban, Check, Pencil } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+
+type SlideOverFooterProps = {
+  isCancelled: boolean;
+  editing: boolean;
+  isDirty: boolean;
+  showUnsaved: boolean;
+  saving?: boolean;
+  onCancelWO: () => void;
+  onCancelEdit: () => void;
+  onClose: () => void;
+  onEdit: () => void;
+  onSave: () => void;
+  onDiscard: () => void;
+  onKeepEditing: () => void;
+};
+
+export function SlideOverFooter({
+  isCancelled,
+  editing,
+  isDirty,
+  showUnsaved,
+  saving,
+  onCancelWO,
+  onCancelEdit,
+  onClose,
+  onEdit,
+  onSave,
+  onDiscard,
+  onKeepEditing,
+}: SlideOverFooterProps) {
+  if (showUnsaved) {
+    return (
+      <div
+        className="flex shrink-0 items-center justify-between gap-2 px-5 py-3"
+        style={{
+          borderTop: "1px solid var(--color-border)",
+          background: "var(--color-bg-surface)",
+        }}
+      >
+        <span
+          className="flex items-center gap-1.5 text-[12px]"
+          style={{ color: "var(--color-warning)" }}
+        >
+          <AlertTriangle size={13} />
+          You have unsaved changes.
+        </span>
+        <div className="flex gap-2">
+          <Button variant="ghost" className="text-[12px]" onClick={onDiscard}>
+            Discard
+          </Button>
+          <Button
+            variant="default"
+            className="gap-1.5 text-[12px]"
+            onClick={onSave}
+            loading={saving}
+          >
+            <Check size={13} />
+            Save
+          </Button>
+          <Button variant="ghost" className="text-[12px]" onClick={onKeepEditing}>
+            Keep editing
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (isCancelled) {
+    return (
+      <div
+        className="flex shrink-0 items-center gap-2 px-4 py-2.5"
+        style={{
+          background: "var(--color-bg-muted)",
+          borderTop: "1px solid var(--color-border)",
+        }}
+      >
+        <Ban size={14} style={{ color: "var(--muted-foreground)" }} />
+        <Text as="p" className="text-[12px]" style={{ color: "var(--muted-foreground)" }}>
+          This work order has been cancelled and is read-only.
+        </Text>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex shrink-0 items-center justify-between gap-3 px-5 py-3"
+      style={{
+        borderTop: "1px solid var(--color-border)",
+        background: "var(--color-bg-surface)",
+      }}
+    >
+      <button
+        type="button"
+        onClick={onCancelWO}
+        className="flex items-center gap-1.5 text-[12px] font-medium transition-opacity hover:opacity-80"
+        style={{ color: "var(--destructive)" }}
+      >
+        <AlertTriangle size={13} />
+        Cancel WO
+      </button>
+
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={editing ? onCancelEdit : onClose}
+          disabled={saving}
+          className="text-[12px] transition-colors"
+          style={{ color: "var(--color-text-muted)" }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = "var(--color-text-primary)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = "var(--color-text-muted)";
+          }}
+        >
+          Cancel
+        </button>
+
+        {editing ? (
+          <Button
+            variant="default"
+            className="gap-1.5 text-[12px]"
+            onClick={onSave}
+            disabled={!isDirty}
+            loading={saving}
+          >
+            <Check size={13} />
+            Save
+          </Button>
+        ) : (
+          <Button variant="default" className="gap-1.5 text-[12px]" onClick={onEdit}>
+            <Pencil size={13} />
+            Edit WO
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/slide-over-header.tsx b/src/app/(protected)/workorders/_components/detail/slide-over-header.tsx
new file mode 100644
index 00000000..0302625e
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/slide-over-header.tsx
@@ -0,0 +1,106 @@
+import { CircularProgress } from "@mui/material";
+import { X } from "lucide-react";
+import { WoTableStatusLabel } from "@/app/(protected)/workorders/_components/list/table/cells/wo-table-status-label";
+import { WoTableTypeLabel } from "@/app/(protected)/workorders/_components/list/table/cells/wo-table-type-label";
+import { Text } from "@/components/ui/text";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+type SlideOverHeaderProps = {
+  row: WorkOrderTableRow;
+  isCancelled: boolean;
+  isFetching?: boolean;
+  closeDisabled?: boolean;
+  onClose: () => void;
+};
+
+export function SlideOverHeader({
+  row,
+  isCancelled,
+  isFetching = false,
+  closeDisabled = false,
+  onClose,
+}: SlideOverHeaderProps) {
+  return (
+    <div
+      className="flex shrink-0 items-center justify-between gap-3 px-5 py-3.5"
+      style={{ borderBottom: "1px solid var(--color-border)" }}
+    >
+      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+        <Text
+          as="h2"
+          className="text-[15px] font-semibold leading-none"
+          style={{ color: "var(--color-text-primary)" }}
+        >
+          #{row.woNumber || "—"}
+        </Text>
+
+        {isCancelled && (
+          <span
+            className="rounded-full px-2 py-0.5 text-[12px] font-medium"
+            style={{
+              background: "var(--color-bg-muted)",
+              color: "var(--muted-foreground)",
+              border: "1px solid var(--color-border)",
+            }}
+          >
+            Cancelled
+          </span>
+        )}
+
+        {Boolean(row.site) && (
+          <span
+            className="rounded px-1.5 py-0.5 font-mono text-[11px]"
+            style={{
+              background: "var(--color-bg-muted)",
+              color: "var(--color-text-secondary)",
+            }}
+          >
+            {row.site}
+          </span>
+        )}
+
+        {row.isPastDue ? (
+          <span
+            className="inline-flex items-center gap-1.5 text-[11px] font-medium leading-none"
+            style={{
+              background: "var(--status-pastdue-bg)",
+              color: "var(--status-pastdue-text)",
+              borderRadius: 4,
+              padding: "3px 8px",
+            }}
+          >
+            <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-[#BE123C]" />
+            Past Due
+          </span>
+        ) : row.status ? (
+          <WoTableStatusLabel status={row.status} />
+        ) : null}
+
+        {Boolean(row.type) && <WoTableTypeLabel type={row.type as WOType} />}
+      </div>
+
+      <div className="flex shrink-0 items-center gap-1">
+        {isFetching && <CircularProgress size={14} aria-label="Refreshing details" />}
+        <button
+          type="button"
+          aria-label="Close"
+          onClick={onClose}
+          disabled={closeDisabled}
+          className="shrink-0 rounded p-1.5 transition-colors disabled:opacity-40"
+          style={{ color: "var(--color-text-muted)" }}
+          onMouseEnter={(e) => {
+            if (!closeDisabled) {
+              e.currentTarget.style.background = "var(--color-bg-muted)";
+            }
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = "transparent";
+          }}
+        >
+          <X size={15} />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/slide-over-info-row.tsx b/src/app/(protected)/workorders/_components/detail/slide-over-info-row.tsx
new file mode 100644
index 00000000..38942db6
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/slide-over-info-row.tsx
@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+type SlideOverInfoRowProps = {
+  label: string;
+  children: ReactNode;
+};
+
+export function SlideOverInfoRow({ label, children }: SlideOverInfoRowProps) {
+  return (
+    <div
+      className="flex items-center gap-2 py-1.5"
+      style={{ borderBottom: "1px solid var(--color-bg-muted)" }}
+    >
+      <span className="w-28 shrink-0 text-[13px]" style={{ color: "var(--color-text-muted)" }}>
+        {label}
+      </span>
+      <div className="min-w-0 flex-1 text-[12.5px]" style={{ color: "var(--color-text-primary)" }}>
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-audit-tab.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-audit-tab.tsx
new file mode 100644
index 00000000..1b8200e0
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-audit-tab.tsx
@@ -0,0 +1,11 @@
+import { SlideOverAuditList } from "@/app/(protected)/workorders/_components/detail/slide-over-audit-list";
+import type { WorkOrderAuditEntry, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+
+type SlideOverAuditTabProps = {
+  entries: WorkOrderAuditEntry[];
+  users?: WorkOrderUser[];
+};
+
+export function SlideOverAuditTab({ entries, users }: SlideOverAuditTabProps) {
+  return <SlideOverAuditList entries={entries} users={users} />;
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-comments-tab.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-comments-tab.tsx
new file mode 100644
index 00000000..1d13f890
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-comments-tab.tsx
@@ -0,0 +1,265 @@
+import { useState } from "react";
+import { Pencil } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+import type { WorkOrderComment } from "@/domain/work-orders/types/work-order";
+import { isOwnWorkOrderComment } from "@/domain/work-orders/utils/comment-ownership";
+import {
+  getAvatarColorFromName,
+  getInitialsFromName,
+} from "@/domain/work-orders/utils/dispatcher-avatar-color";
+
+function formatCommentTime(value: string): string {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+const textareaStyle = {
+  border: "1px solid var(--color-border)",
+  color: "var(--color-text-primary)",
+  background: "var(--color-bg-surface)",
+} as const;
+
+type SlideOverCommentItemProps = {
+  comment: WorkOrderComment;
+  canEdit: boolean;
+  isEditing: boolean;
+  draftText: string;
+  isUpdatePending: boolean;
+  onStartEdit: () => void;
+  onDraftChange: (value: string) => void;
+  onCancelEdit: () => void;
+  onSaveEdit: () => void;
+};
+
+function SlideOverCommentItem({
+  comment,
+  canEdit,
+  isEditing,
+  draftText,
+  isUpdatePending,
+  onStartEdit,
+  onDraftChange,
+  onCancelEdit,
+  onSaveEdit,
+}: SlideOverCommentItemProps) {
+  const author = comment.userName || comment.commenter || "Unknown";
+  const color = getAvatarColorFromName(author);
+  const initials = getInitialsFromName(author);
+
+  return (
+    <div className="flex items-start gap-2.5 py-2.5">
+      <span
+        className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[9px] font-semibold"
+        style={{ background: `${color}25`, color }}
+      >
+        {initials}
+      </span>
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center justify-between gap-1.5">
+          <div className="flex min-w-0 items-center gap-1.5">
+            <span
+              className="truncate text-[12px] font-semibold"
+              style={{ color: "var(--color-text-primary)" }}
+            >
+              {author}
+            </span>
+            <span className="shrink-0 text-[10px]" style={{ color: "var(--color-text-muted)" }}>
+              {formatCommentTime(comment.createdDate)}
+            </span>
+          </div>
+          {canEdit && !isEditing && (
+            <button
+              type="button"
+              title="Edit comment"
+              aria-label="Edit comment"
+              onClick={onStartEdit}
+              className="shrink-0 rounded p-0.5 transition-opacity hover:opacity-70"
+              style={{ color: "var(--color-text-muted)" }}
+            >
+              <Pencil size={12} />
+            </button>
+          )}
+        </div>
+
+        {isEditing ? (
+          <div className="mt-1.5 space-y-2">
+            <textarea
+              value={draftText}
+              onChange={(event) => onDraftChange(event.target.value)}
+              rows={3}
+              disabled={isUpdatePending}
+              className="w-full resize-none rounded-lg px-3 py-2 text-[12px] focus:outline-none focus:ring-1"
+              style={textareaStyle}
+            />
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="ghost"
+                size="default"
+                className="h-8 text-[12px]"
+                disabled={isUpdatePending}
+                onClick={onCancelEdit}
+                style={{ color: "var(--color-text-muted)" }}
+              >
+                Cancel
+              </Button>
+              <Button
+                size="default"
+                className="h-8 text-[12px]"
+                disabled={!draftText.trim() || isUpdatePending}
+                loading={isUpdatePending}
+                onClick={onSaveEdit}
+              >
+                Save
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Text
+            as="p"
+            className="mt-0.5 text-[12px] leading-snug"
+            style={{ color: "var(--color-text-secondary)" }}
+          >
+            {comment.commenttext}
+          </Text>
+        )}
+      </div>
+    </div>
+  );
+}
+
+type SlideOverCommentsTabProps = {
+  comments: WorkOrderComment[];
+  isReadOnly: boolean;
+  isPending: boolean;
+  currentUserId?: string | number;
+  isUpdatePending?: boolean;
+  onSubmit: (text: string, options?: { onSuccess?: () => void }) => void;
+  onUpdateComment?: (
+    commentId: string | number,
+    text: string,
+    options?: { onSuccess?: () => void },
+  ) => void;
+};
+
+export function SlideOverCommentsTab({
+  comments,
+  isReadOnly,
+  isPending,
+  currentUserId,
+  isUpdatePending = false,
+  onSubmit,
+  onUpdateComment,
+}: SlideOverCommentsTabProps) {
+  const [commentText, setCommentText] = useState("");
+  const [editingCommentId, setEditingCommentId] = useState<string | number | null>(null);
+  const [draftText, setDraftText] = useState("");
+
+  const handlePost = () => {
+    const text = commentText.trim();
+    if (!text || isReadOnly || isPending) return;
+    onSubmit(text, { onSuccess: () => setCommentText("") });
+  };
+
+  const startEdit = (comment: WorkOrderComment) => {
+    setEditingCommentId(comment.id);
+    setDraftText(comment.commenttext);
+  };
+
+  const cancelEdit = () => {
+    setEditingCommentId(null);
+    setDraftText("");
+  };
+
+  const saveEdit = () => {
+    if (editingCommentId == null || !onUpdateComment) return;
+    const text = draftText.trim();
+    if (!text || isUpdatePending) return;
+    onUpdateComment(editingCommentId, text, {
+      onSuccess: () => {
+        setEditingCommentId(null);
+        setDraftText("");
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-3">
+      {!isReadOnly && (
+        <>
+          <textarea
+            value={commentText}
+            onChange={(event) => setCommentText(event.target.value)}
+            placeholder="Add comment…"
+            rows={3}
+            disabled={isPending}
+            className="w-full resize-none rounded-lg px-3 py-2 text-[12px] focus:outline-none focus:ring-1"
+            style={textareaStyle}
+          />
+          <div className="flex justify-end">
+            <Button
+              size="default"
+              className="h-8 text-[12px]"
+              disabled={!commentText.trim() || isPending}
+              onClick={handlePost}
+              loading={isPending}
+            >
+              Post
+            </Button>
+          </div>
+        </>
+      )}
+
+      <div
+        style={{
+          borderTop: "1px solid var(--color-bg-muted)",
+          pointerEvents: isReadOnly ? "none" : undefined,
+        }}
+      >
+        {comments.length === 0 ? (
+          <Text
+            as="p"
+            className="py-6 text-center text-[12px]"
+            style={{ color: "var(--muted-foreground)" }}
+          >
+            No comments yet
+          </Text>
+        ) : (
+          comments.map((comment) => {
+            const canEdit =
+              !isReadOnly &&
+              Boolean(onUpdateComment) &&
+              isOwnWorkOrderComment(comment, currentUserId);
+            const isEditing = editingCommentId === comment.id;
+
+            return (
+              <div
+                key={String(comment.id)}
+                style={{ borderBottom: "1px solid var(--color-bg-muted)" }}
+              >
+                <SlideOverCommentItem
+                  comment={comment}
+                  canEdit={canEdit}
+                  isEditing={isEditing}
+                  draftText={isEditing ? draftText : comment.commenttext}
+                  isUpdatePending={isUpdatePending && isEditing}
+                  onStartEdit={() => startEdit(comment)}
+                  onDraftChange={setDraftText}
+                  onCancelEdit={cancelEdit}
+                  onSaveEdit={saveEdit}
+                />
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-actions.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-actions.tsx
new file mode 100644
index 00000000..51c262be
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-actions.tsx
@@ -0,0 +1,92 @@
+import type { RefObject } from "react";
+import { Ban, CheckCircle2, FileText, Upload } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+import type { CompletionDocStatus } from "@/domain/work-orders/types/work-order-table-row";
+
+type SlideOverCompletionActionsProps = {
+  docStatus: CompletionDocStatus;
+  rowVersion?: string | number | null;
+  completionPending: boolean;
+  hasUploadHandler: boolean;
+  pdfInputRef: RefObject<HTMLInputElement | null>;
+  onPdfSelected: (files: FileList | null) => void;
+  onOpenCompletionDoc: () => void;
+};
+
+function DocStatusButtonContent({ docStatus }: { docStatus: CompletionDocStatus }) {
+  if (docStatus === "Yes") {
+    return (
+      <>
+        <CheckCircle2 size={13} />
+        View / Edit Document
+      </>
+    );
+  }
+  if (docStatus === "NN") {
+    return (
+      <>
+        <Ban size={13} />
+        Document Not Required — Review
+      </>
+    );
+  }
+  return (
+    <>
+      <FileText size={13} />
+      Open completion document
+    </>
+  );
+}
+
+export function SlideOverCompletionActions({
+  docStatus,
+  rowVersion,
+  completionPending,
+  hasUploadHandler,
+  pdfInputRef,
+  onPdfSelected,
+  onOpenCompletionDoc,
+}: SlideOverCompletionActionsProps) {
+  return (
+    <div className="space-y-2">
+      {hasUploadHandler && (
+        <>
+          <Button
+            variant="outline"
+            className="w-full gap-1.5 text-[12px]"
+            disabled={!rowVersion}
+            loading={completionPending}
+            loadingText="Uploading…"
+            onClick={() => pdfInputRef.current?.click()}
+            startIcon={!completionPending ? <Upload size={13} /> : undefined}
+          >
+            Upload signed PDF
+          </Button>
+          <input
+            ref={pdfInputRef}
+            type="file"
+            accept="application/pdf,.pdf"
+            hidden
+            onChange={(event) => {
+              onPdfSelected(event.target.files);
+              event.target.value = "";
+            }}
+          />
+          {!rowVersion && (
+            <Text as="p" style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+              Waiting for work order version before upload is available.
+            </Text>
+          )}
+        </>
+      )}
+      <Button
+        variant="outline"
+        className="w-full gap-1.5 text-[12px]"
+        onClick={onOpenCompletionDoc}
+      >
+        <DocStatusButtonContent docStatus={docStatus} />
+      </Button>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-media.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-media.tsx
new file mode 100644
index 00000000..24e468d1
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-media.tsx
@@ -0,0 +1,52 @@
+import { Image as ImageIcon } from "lucide-react";
+import {
+  MediaUploader,
+  type MediaUploadRequest,
+} 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";
+
+type SlideOverCompletionMediaProps = {
+  isReadOnly: boolean;
+  media: MediaFile[];
+  mediaPending: boolean;
+  onUploadMedia?: (requests: MediaUploadRequest[]) => void;
+  onCategorizeMedia?: (id: string, category: UploadableMediaCategory) => void;
+  onRemoveMedia?: (id: string) => void;
+  onRetryMedia?: (localId: string) => void;
+  onCancelMedia?: (localId: string) => void;
+};
+
+export function SlideOverCompletionMedia({
+  isReadOnly,
+  media,
+  mediaPending,
+  onUploadMedia,
+  onCategorizeMedia,
+  onRemoveMedia,
+  onRetryMedia,
+  onCancelMedia,
+}: SlideOverCompletionMediaProps) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-1.5">
+        <ImageIcon size={14} style={{ color: "var(--foreground)" }} />
+        <span style={{ fontSize: 12, fontWeight: 600, color: "var(--foreground)" }}>
+          Photos &amp; Videos
+        </span>
+      </div>
+      <div style={isReadOnly ? { opacity: 0.6, pointerEvents: "none" } : undefined}>
+        <MediaUploader
+          uploads={media}
+          onUpload={onUploadMedia}
+          onCategorize={onCategorizeMedia}
+          onRemove={onRemoveMedia}
+          onRetry={onRetryMedia}
+          onCancel={onCancelMedia}
+          readOnly={isReadOnly}
+          pending={mediaPending}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-readonly-status.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-readonly-status.tsx
new file mode 100644
index 00000000..e9310484
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-readonly-status.tsx
@@ -0,0 +1,45 @@
+import { CheckCircle2, FileText } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { CompletionDocStatus } from "@/domain/work-orders/types/work-order-table-row";
+
+type SlideOverCompletionReadonlyStatusProps = {
+  docStatus: CompletionDocStatus;
+  onOpenCompletionDoc: () => void;
+};
+
+export function SlideOverCompletionReadonlyStatus({
+  docStatus,
+  onOpenCompletionDoc,
+}: SlideOverCompletionReadonlyStatusProps) {
+  if (docStatus === "Yes") {
+    return (
+      <Button
+        variant="outline"
+        className="w-full gap-1.5 text-[12px]"
+        onClick={onOpenCompletionDoc}
+      >
+        <CheckCircle2 size={13} />
+        View Document
+      </Button>
+    );
+  }
+
+  return (
+    <div
+      className="flex items-center gap-2"
+      style={{
+        padding: "10px 12px",
+        borderRadius: 8,
+        background: "var(--color-bg-muted)",
+        border: "1px solid var(--color-border)",
+      }}
+    >
+      <FileText size={14} className="shrink-0" style={{ color: "var(--color-text-muted)" }} />
+      <span style={{ fontSize: 12, color: "var(--muted-foreground)" }}>
+        {docStatus === "NN"
+          ? "No completion document was required for this work order."
+          : "No completion document was generated."}
+      </span>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-signoffs.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-signoffs.tsx
new file mode 100644
index 00000000..a0e51bf5
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-signoffs.tsx
@@ -0,0 +1,35 @@
+import type { WorkOrderBoardCompletion } from "@/domain/work-orders/types/work-order-board-detail";
+
+type SlideOverCompletionSignoffsProps = {
+  completion?: WorkOrderBoardCompletion;
+};
+
+export function SlideOverCompletionSignoffs({ completion }: SlideOverCompletionSignoffsProps) {
+  if (!completion || completion.dispatchSignoffs.length === 0) return null;
+
+  return (
+    <div className="space-y-1 pt-2">
+      <span
+        style={{
+          fontSize: 10,
+          fontWeight: 700,
+          letterSpacing: "0.06em",
+          textTransform: "uppercase",
+          color: "var(--color-text-muted)",
+        }}
+      >
+        Dispatch sign-offs
+      </span>
+      {completion.dispatchSignoffs.map((signoff, index) => (
+        <div
+          key={`${signoff.dispatchId ?? "d"}-${index}`}
+          style={{ fontSize: 12, color: "var(--color-text-secondary)" }}
+        >
+          {signoff.signoffType || "Sign-off"}
+          {signoff.name ? ` — ${signoff.name}` : ""}
+          {signoff.signedAt ? ` · ${signoff.signedAt}` : ""}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-tab.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-tab.tsx
new file mode 100644
index 00000000..290ec603
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-tab.tsx
@@ -0,0 +1,143 @@
+import { useRef } from "react";
+import { Download, FileText } from "lucide-react";
+import { toast } from "react-toastify";
+import type { MediaUploadRequest } from "@/app/(protected)/workorders/_components/media/media-uploader";
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { WorkOrderBoardCompletion } from "@/domain/work-orders/types/work-order-board-detail";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import {
+  formatMediaSizeLimit,
+  isWorkOrderFileTooLarge,
+} from "@/domain/work-orders/utils/work-order-media-limits";
+import { SlideOverCompletionActions } from "./slide-over-completion-actions";
+import { SlideOverCompletionMedia } from "./slide-over-completion-media";
+import { SlideOverCompletionReadonlyStatus } from "./slide-over-completion-readonly-status";
+import { SlideOverCompletionSignoffs } from "./slide-over-completion-signoffs";
+
+function isMediaWO(type: WOType | ""): boolean {
+  return type === "Emergency" || type === "Reactive";
+}
+
+type SlideOverCompletionTabProps = {
+  row: WorkOrderTableRow;
+  isReadOnly: boolean;
+  completion?: WorkOrderBoardCompletion;
+  media: MediaFile[];
+  mediaPending?: boolean;
+  completionPending?: boolean;
+  onUploadMedia?: (requests: MediaUploadRequest[]) => void;
+  onCategorizeMedia?: (id: string, category: UploadableMediaCategory) => void;
+  onRemoveMedia?: (id: string) => void;
+  onRetryMedia?: (localId: string) => void;
+  onCancelMedia?: (localId: string) => void;
+  onUploadCompletionPdf?: (file: File) => void;
+  onOpenCompletionDoc: () => void;
+};
+
+export function SlideOverCompletionTab({
+  row,
+  isReadOnly,
+  completion,
+  media,
+  mediaPending = false,
+  completionPending = false,
+  onUploadMedia,
+  onCategorizeMedia,
+  onRemoveMedia,
+  onRetryMedia,
+  onCancelMedia,
+  onUploadCompletionPdf,
+  onOpenCompletionDoc,
+}: SlideOverCompletionTabProps) {
+  const pdfInputRef = useRef<HTMLInputElement>(null);
+  const docStatus = completion?.docStatus || row.docStatus;
+  const templateUrl = completion?.template?.templateUrl;
+  const signOffAttachment = completion?.signOffAttachment;
+
+  if (isMediaWO(row.type)) {
+    return (
+      <SlideOverCompletionMedia
+        isReadOnly={isReadOnly}
+        media={media}
+        mediaPending={mediaPending}
+        onUploadMedia={onUploadMedia}
+        onCategorizeMedia={onCategorizeMedia}
+        onRemoveMedia={onRemoveMedia}
+        onRetryMedia={onRetryMedia}
+        onCancelMedia={onCancelMedia}
+      />
+    );
+  }
+
+  const handlePdfSelected = (files: FileList | null) => {
+    const file = files?.[0];
+    if (!file || !onUploadCompletionPdf) return;
+    if (isWorkOrderFileTooLarge(file)) {
+      toast.error(`File exceeds the ${formatMediaSizeLimit()} limit.`);
+      return;
+    }
+    if (file.type !== "application/pdf" && !file.name.toLowerCase().endsWith(".pdf")) {
+      toast.error("Please upload a PDF file.");
+      return;
+    }
+    onUploadCompletionPdf(file);
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-1.5">
+        <FileText size={14} style={{ color: "var(--foreground)" }} />
+        <span style={{ fontSize: 12, fontWeight: 600, color: "var(--foreground)" }}>
+          Completion Document
+        </span>
+      </div>
+
+      {Boolean(templateUrl) && (
+        <a
+          href={templateUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+          style={{ color: "var(--color-primary)" }}
+        >
+          <Download size={13} />
+          Download blank template
+        </a>
+      )}
+
+      {Boolean(signOffAttachment) && (
+        <a
+          href={signOffAttachment}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+          style={{ color: "var(--color-primary)" }}
+        >
+          <FileText size={13} />
+          View uploaded document
+        </a>
+      )}
+
+      {isReadOnly ? (
+        <SlideOverCompletionReadonlyStatus
+          docStatus={docStatus}
+          onOpenCompletionDoc={onOpenCompletionDoc}
+        />
+      ) : (
+        <SlideOverCompletionActions
+          docStatus={docStatus}
+          rowVersion={row.rowVersion}
+          completionPending={completionPending}
+          hasUploadHandler={Boolean(onUploadCompletionPdf)}
+          pdfInputRef={pdfInputRef}
+          onPdfSelected={handlePdfSelected}
+          onOpenCompletionDoc={onOpenCompletionDoc}
+        />
+      )}
+
+      <SlideOverCompletionSignoffs completion={completion} />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-doc-badge.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-doc-badge.tsx
new file mode 100644
index 00000000..5282cda2
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-doc-badge.tsx
@@ -0,0 +1,44 @@
+import { Image as ImageIcon } from "lucide-react";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+function isMediaWO(type: WOType | ""): boolean {
+  return type === "Emergency" || type === "Reactive";
+}
+
+const DOC_BADGE_STYLE: Record<"Yes" | "No" | "NN", { bg: string; text: string }> = {
+  Yes: { bg: "#F0FDF4", text: "#166534" },
+  No: { bg: "#FFF1F2", text: "#BE123C" },
+  NN: { bg: "#F3F4F6", text: "#6B7280" },
+};
+
+export function DocBadge({ row }: { row: WorkOrderTableRow }) {
+  if (isMediaWO(row.type)) {
+    return (
+      <span
+        className="inline-flex items-center gap-1.5 text-[12.5px] font-semibold"
+        style={{ color: "var(--color-primary)" }}
+      >
+        <ImageIcon size={14} />
+        {row.mediaCount > 0 ? `${row.mediaCount} file${row.mediaCount !== 1 ? "s" : ""}` : "Media"}
+      </span>
+    );
+  }
+
+  const key = row.docStatus === "Yes" ? "Yes" : row.docStatus === "NN" ? "NN" : "No";
+  const style = DOC_BADGE_STYLE[key];
+  const label = key === "NN" ? "NN" : key;
+
+  return (
+    <span
+      className="inline-flex items-center px-1.5 py-0.5 text-[11px] font-medium leading-none"
+      style={{
+        background: style.bg,
+        color: style.text,
+        borderRadius: 4,
+      }}
+    >
+      {label}
+    </span>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx
new file mode 100644
index 00000000..b4c93318
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx
@@ -0,0 +1,163 @@
+import { useRef } from "react";
+import {
+  File as FileIcon,
+  FileText,
+  Film,
+  Image as ImageIcon,
+  Paperclip,
+  Upload,
+  X,
+} from "lucide-react";
+import { toast } from "react-toastify";
+import { Text } from "@/components/ui/text";
+import type { FileCategory, MediaFile } from "@/domain/work-orders/types/work-order-media";
+import {
+  canDeleteWorkOrderMedia,
+  formatMediaSizeLimit,
+  isWorkOrderFileTooLarge,
+  isWorkOrderMediaTypeAllowed,
+  workOrderMediaAcceptAttribute,
+} from "@/domain/work-orders/utils/work-order-media-limits";
+
+const FILETYPE_ICON: Record<FileCategory, typeof ImageIcon> = {
+  image: ImageIcon,
+  video: Film,
+  pdf: FileText,
+  doc: FileIcon,
+  other: Paperclip,
+};
+
+type SlideOverExtrasTabProps = {
+  uploads: MediaFile[];
+  isReadOnly: boolean;
+  pending?: boolean;
+  onUpload: (files: File[]) => void;
+  onRemove: (id: string) => void;
+};
+
+export function SlideOverExtrasTab({
+  uploads,
+  isReadOnly,
+  pending = false,
+  onUpload,
+  onRemove,
+}: SlideOverExtrasTabProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const addFiles = (files: FileList | null) => {
+    if (isReadOnly || pending || !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);
+    }
+    if (accepted.length > 0) {
+      onUpload(accepted);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-1.5">
+        <ImageIcon size={14} style={{ color: "var(--foreground)" }} />
+        <span style={{ fontSize: 12, fontWeight: 600, color: "var(--foreground)" }}>
+          Extra Documents
+        </span>
+      </div>
+
+      {!isReadOnly && (
+        <>
+          <button
+            type="button"
+            disabled={pending}
+            onClick={() => inputRef.current?.click()}
+            onDragOver={(event) => event.preventDefault()}
+            onDrop={(event) => {
+              event.preventDefault();
+              addFiles(event.dataTransfer.files);
+            }}
+            className="flex w-full flex-col items-center justify-center gap-1.5 transition-colors hover:bg-[var(--color-bg-muted)] disabled:opacity-60"
+            style={{
+              minHeight: 100,
+              border: "1px dashed var(--color-border)",
+              borderRadius: 8,
+            }}
+          >
+            <Upload size={20} style={{ color: "var(--color-text-muted)" }} />
+            <span
+              style={{ fontSize: 13, color: "var(--color-text-muted)" }}
+              aria-busy={pending || undefined}
+            >
+              {pending ? "Uploading…" : "Upload documents, photos or videos"}
+            </span>
+            <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+              Accepted: JPG, PNG, MP4, MOV · Max {formatMediaSizeLimit()} per file
+            </span>
+          </button>
+          <input
+            ref={inputRef}
+            type="file"
+            accept={workOrderMediaAcceptAttribute()}
+            multiple
+            hidden
+            disabled={pending}
+            onChange={(event) => {
+              addFiles(event.target.files);
+              event.target.value = "";
+            }}
+          />
+        </>
+      )}
+
+      {uploads.length === 0 ? (
+        <Text as="p" style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+          No extra documents yet.
+        </Text>
+      ) : (
+        <div className="space-y-1">
+          {uploads.map((file) => {
+            const ItemIcon = FILETYPE_ICON[file.fileType];
+            const showDelete = !isReadOnly && canDeleteWorkOrderMedia(file);
+            return (
+              <div key={file.id} className="flex items-center gap-2 py-1">
+                <ItemIcon
+                  size={12}
+                  className="shrink-0"
+                  style={{ color: "var(--color-text-muted)" }}
+                />
+                <a
+                  href={file.url}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="min-w-0 flex-1 truncate hover:underline"
+                  style={{ fontSize: 12, color: "var(--foreground)" }}
+                >
+                  {file.name}
+                </a>
+                {showDelete && (
+                  <button
+                    type="button"
+                    title="Remove"
+                    disabled={pending}
+                    onClick={() => onRemove(file.id)}
+                    className="rounded p-0.5 transition-opacity hover:opacity-70 disabled:opacity-50"
+                    style={{ color: "var(--color-text-muted)" }}
+                  >
+                    <X size={12} />
+                  </button>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-assigned-field.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-assigned-field.tsx
new file mode 100644
index 00000000..8d7bc8ba
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-assigned-field.tsx
@@ -0,0 +1,28 @@
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { getDispatcherAvatarColor } from "@/domain/work-orders/utils/dispatcher-avatar-color";
+
+type SlideOverInfoTabAssignedFieldProps = {
+  dispatcher?: WorkOrderUser;
+  dispatcherName?: string;
+};
+
+export function SlideOverInfoTabAssignedField({
+  dispatcher,
+  dispatcherName,
+}: SlideOverInfoTabAssignedFieldProps) {
+  if (!dispatcher && !dispatcherName) {
+    return <span style={{ color: "var(--color-text-muted)" }}>—</span>;
+  }
+
+  return (
+    <span className="inline-flex items-center gap-1.5 text-[12.5px]">
+      {dispatcher != null && (
+        <span
+          className="h-2 w-2 shrink-0 rounded-full"
+          style={{ background: getDispatcherAvatarColor(dispatcher) }}
+        />
+      )}
+      {dispatcher?.name || dispatcherName}
+    </span>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-display-view.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-display-view.tsx
new file mode 100644
index 00000000..ec9c3479
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-display-view.tsx
@@ -0,0 +1,92 @@
+import { SlideOverInfoRow } from "@/app/(protected)/workorders/_components/detail/slide-over-info-row";
+import { PmTypeIcon } from "@/app/(protected)/workorders/_components/list/table/pm-type-icons";
+import { WoTableTypeLabel } from "@/app/(protected)/workorders/_components/list/table/cells/wo-table-type-label";
+import type { VendorDropdownItem, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import { formatApptRange, parseApptTime } from "@/domain/work-orders/utils/wizard-date-utils";
+import { DocBadge } from "./slide-over-doc-badge";
+import { SlideOverInfoTabAssignedField } from "./slide-over-info-tab-assigned-field";
+import { SlideOverInfoTabStatusField } from "./slide-over-info-tab-status-field";
+import { SlideOverInfoTabVendorField } from "./slide-over-info-tab-vendor-field";
+
+type SlideOverInfoTabDisplayViewProps = {
+  source: WorkOrderTableRow;
+  isCancelled: boolean;
+  dispatcher?: WorkOrderUser;
+  vendors: VendorDropdownItem[];
+};
+
+export function SlideOverInfoTabDisplayView({
+  source,
+  isCancelled,
+  dispatcher,
+  vendors,
+}: SlideOverInfoTabDisplayViewProps) {
+  const appt = parseApptTime(source.apptTime);
+  const apptDisplay = appt.start ? formatApptRange(appt.start, appt.end) : source.apptTime || "—";
+
+  return (
+    <div style={isCancelled ? { opacity: 0.6, pointerEvents: "none" } : undefined}>
+      <SlideOverInfoRow label="WO #">
+        <span className="font-mono text-[12.5px] font-semibold">{source.woNumber || "—"}</span>
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Site">
+        <span className="font-mono text-[12.5px] font-bold" style={{ color: "var(--foreground)" }}>
+          {source.site || "—"}
+        </span>
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Type of WO">
+        {source.type ? (
+          <WoTableTypeLabel type={source.type as WOType} />
+        ) : (
+          <span style={{ color: "var(--color-text-muted)" }}>—</span>
+        )}
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Assigned To">
+        <SlideOverInfoTabAssignedField
+          dispatcher={dispatcher}
+          dispatcherName={source.dispatcherName}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Schedule On">
+        <span className="text-[12.5px]">
+          {source.scheduleWeekOnly && source.targetWeek
+            ? `Week of ${source.targetWeek}`
+            : source.scheduledOn || "—"}
+        </span>
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Due Date">
+        <span className="text-[12.5px]">{source.dueDate || "—"}</span>
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Appt Time">
+        <span className="text-[12.5px]">{apptDisplay}</span>
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Service">
+        {source.pm ? (
+          <span className="inline-flex items-center gap-1.5 text-[12.5px]">
+            <PmTypeIcon pmType={source.pm} size={14} />
+            {source.pm}
+          </span>
+        ) : (
+          <span style={{ color: "var(--color-text-muted)" }}>—</span>
+        )}
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Vendor">
+        <SlideOverInfoTabVendorField source={source} vendors={vendors} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Status">
+        <SlideOverInfoTabStatusField source={source} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Comp Doc">
+        <DocBadge row={source} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="POC">
+        <span className="text-[12.5px]" style={{ color: "var(--color-text-secondary)" }}>
+          {source.pocName || "—"}
+          {source.pocPhone ? ` · ${source.pocPhone}` : ""}
+        </span>
+      </SlideOverInfoRow>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-edit-view.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-edit-view.tsx
new file mode 100644
index 00000000..7eaf94f3
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-edit-view.tsx
@@ -0,0 +1,160 @@
+import { AssignedToCell } from "@/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell";
+import { ApptTimeCell } from "@/app/(protected)/workorders/_components/list/table/cells/appt-time-cell";
+import { DateCell } from "@/app/(protected)/workorders/_components/list/table/cells/date-cell";
+import { EditableWONumberCell } from "@/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell";
+import { PMTypeCell } from "@/app/(protected)/workorders/_components/list/table/cells/pm-type-cell";
+import { SiteCell } from "@/app/(protected)/workorders/_components/list/table/cells/site-cell";
+import { StatusCell } from "@/app/(protected)/workorders/_components/list/table/cells/status-cell";
+import { TypeCell } from "@/app/(protected)/workorders/_components/list/table/cells/type-cell";
+import { VendorCell } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-cell";
+import { SlideOverInfoRow } from "@/app/(protected)/workorders/_components/detail/slide-over-info-row";
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WizardWOStatus } from "@/domain/work-orders/types/work-order-wizard";
+import { DocBadge } from "./slide-over-doc-badge";
+
+type SlideOverInfoTabEditViewProps = {
+  draft: WorkOrderTableRow;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  allOrders: WorkOrderTableRow[];
+  onDraftChange: (patch: Partial<WorkOrderTableRow>) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+};
+
+export function SlideOverInfoTabEditView({
+  draft,
+  users,
+  sites,
+  vendors,
+  pmTypes,
+  allOrders,
+  onDraftChange,
+  onDuplicateFound,
+}: SlideOverInfoTabEditViewProps) {
+  return (
+    <div>
+      <SlideOverInfoRow label="WO #">
+        <EditableWONumberCell
+          value={draft.woNumber}
+          rescheduleCount={draft.rescheduleCount}
+          carriedOver={draft.carriedOver}
+          currentId={draft.id}
+          allOrders={allOrders}
+          onSave={(woNumber) => onDraftChange({ woNumber })}
+          onDuplicateFound={onDuplicateFound}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Site">
+        <SiteCell
+          value={draft.site}
+          location={draft.location}
+          locationId={draft.locationId}
+          pocName={draft.pocName}
+          pocPhone={draft.pocPhone}
+          pocNotes={draft.pocNotes}
+          sites={sites}
+          onSave={(patch) =>
+            onDraftChange({
+              site: patch.site,
+              location: patch.location,
+              locationId: patch.locationId,
+            })
+          }
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Type of WO">
+        <TypeCell value={draft.type} onSave={(type) => onDraftChange({ type })} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Assigned To">
+        <AssignedToCell
+          dispatcherId={draft.dispatcherId}
+          users={users}
+          onSave={(id, name) => onDraftChange({ dispatcherId: id, dispatcherName: name })}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Schedule On">
+        <DateCell
+          value={draft.scheduledOn}
+          allowWeekMode
+          targetWeek={draft.targetWeek}
+          defaultMode={draft.scheduleWeekOnly ? "week" : "date"}
+          onSave={(scheduledOn) =>
+            onDraftChange({ scheduledOn, scheduleWeekOnly: false, isPastDue: false })
+          }
+          onSaveWeek={(weekStart) =>
+            onDraftChange({
+              scheduledOn: "",
+              targetWeek: weekStart,
+              scheduleWeekOnly: true,
+              isPastDue: false,
+            })
+          }
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Due Date">
+        <DateCell value={draft.dueDate} onSave={(dueDate) => onDraftChange({ dueDate })} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Appt Time">
+        <ApptTimeCell
+          apptTime={draft.apptTime}
+          onSave={(apptTime) => onDraftChange({ apptTime })}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Service">
+        <PMTypeCell
+          value={draft.pm}
+          pmTypes={pmTypes}
+          serviceNotes={draft.serviceNotes}
+          extraServices={draft.extraServices}
+          woNumber={draft.woNumber}
+          onSave={(pm) => onDraftChange({ pm })}
+          onSaveDetails={(details) =>
+            onDraftChange({
+              serviceNotes: details.serviceNotes,
+              extraServices: details.extraServices,
+            })
+          }
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Vendor">
+        <VendorCell
+          company={draft.company}
+          tech={draft.tech}
+          techPhone={draft.techPhone}
+          vendors={vendors}
+          onSave={(patch) =>
+            onDraftChange({
+              vendorId: patch.vendorId,
+              company: patch.company,
+              tech: patch.tech,
+              techPhone: patch.techPhone,
+            })
+          }
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Status">
+        <StatusCell
+          wo={draft}
+          onChangeStatus={(status: WizardWOStatus) => onDraftChange({ status })}
+          onOpenSlideOver={() => {}}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Comp Doc">
+        <DocBadge row={draft} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="POC">
+        <span className="text-[13px]" style={{ color: "var(--color-text-secondary)" }}>
+          {draft.pocName || "—"}
+          {draft.pocPhone ? ` · ${draft.pocPhone}` : ""}
+        </span>
+      </SlideOverInfoRow>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-status-field.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-status-field.tsx
new file mode 100644
index 00000000..a01d741d
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-status-field.tsx
@@ -0,0 +1,26 @@
+import { WoTableStatusLabel } from "@/app/(protected)/workorders/_components/list/table/cells/wo-table-status-label";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type SlideOverInfoTabStatusFieldProps = {
+  source: WorkOrderTableRow;
+};
+
+export function SlideOverInfoTabStatusField({ source }: SlideOverInfoTabStatusFieldProps) {
+  if (source.isPastDue) {
+    return (
+      <span
+        className="inline-flex items-center gap-1.5 text-[12.5px] font-semibold"
+        style={{ color: "var(--status-pastdue-text)" }}
+      >
+        <span className="h-2 w-2 shrink-0 rounded-full bg-[#BE123C]" />
+        Past Due
+      </span>
+    );
+  }
+
+  if (source.status) {
+    return <WoTableStatusLabel status={source.status} />;
+  }
+
+  return <span style={{ color: "var(--color-text-muted)" }}>—</span>;
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-vendor-field.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-vendor-field.tsx
new file mode 100644
index 00000000..389ff87e
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-vendor-field.tsx
@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { VendorDialog } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type SlideOverInfoTabVendorFieldProps = {
+  source: WorkOrderTableRow;
+  vendors: VendorDropdownItem[];
+};
+
+export function SlideOverInfoTabVendorField({ source, vendors }: SlideOverInfoTabVendorFieldProps) {
+  const [vendorDlg, setVendorDlg] = useState(false);
+
+  if (!source.tech && !source.company) {
+    return <span style={{ color: "var(--color-text-muted)" }}>—</span>;
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setVendorDlg(true)}
+        className="text-left transition-opacity hover:opacity-80"
+      >
+        <div className="text-[13px] font-semibold" style={{ color: "var(--foreground)" }}>
+          {source.tech || source.company}
+        </div>
+        {Boolean(source.tech && source.company) && (
+          <div className="text-[11px] font-normal" style={{ color: "var(--muted-foreground)" }}>
+            {source.company}
+          </div>
+        )}
+      </button>
+      <VendorDialog
+        open={vendorDlg}
+        onOpenChange={setVendorDlg}
+        company={source.company}
+        tech={source.tech}
+        techPhone={source.techPhone}
+        vendors={vendors}
+        onSave={() => setVendorDlg(false)}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab.tsx
new file mode 100644
index 00000000..c8d9e09b
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab.tsx
@@ -0,0 +1,64 @@
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { SlideOverInfoTabDisplayView } from "./slide-over-info-tab-display-view";
+import { SlideOverInfoTabEditView } from "./slide-over-info-tab-edit-view";
+
+type SlideOverInfoTabProps = {
+  row: WorkOrderTableRow;
+  draft: WorkOrderTableRow;
+  editing: boolean;
+  isCancelled: boolean;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  allOrders: WorkOrderTableRow[];
+  onDraftChange: (patch: Partial<WorkOrderTableRow>) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+};
+
+export function SlideOverInfoTab({
+  row,
+  draft,
+  editing,
+  isCancelled,
+  users,
+  sites,
+  vendors,
+  pmTypes,
+  allOrders,
+  onDraftChange,
+  onDuplicateFound,
+}: SlideOverInfoTabProps) {
+  const isEditing = editing && !isCancelled;
+  const source = isEditing ? draft : row;
+  const dispatcher = users.find((u) => String(u.id) === source.dispatcherId);
+
+  if (isEditing) {
+    return (
+      <SlideOverInfoTabEditView
+        draft={draft}
+        users={users}
+        sites={sites}
+        vendors={vendors}
+        pmTypes={pmTypes}
+        allOrders={allOrders}
+        onDraftChange={onDraftChange}
+        onDuplicateFound={onDuplicateFound}
+      />
+    );
+  }
+
+  return (
+    <SlideOverInfoTabDisplayView
+      source={source}
+      isCancelled={isCancelled}
+      dispatcher={dispatcher}
+      vendors={vendors}
+    />
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/use-slide-over-edit-state.ts b/src/app/(protected)/workorders/_components/detail/use-slide-over-edit-state.ts
new file mode 100644
index 00000000..ec74d498
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/use-slide-over-edit-state.ts
@@ -0,0 +1,162 @@
+import { useEffect, useMemo, useState } from "react";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import {
+  buildSlideOverPatch,
+  isSlideOverDraftDirty,
+} from "@/domain/work-orders/utils/slide-over-draft";
+import type { SlideOverSaveOptions } from "./work-order-slide-over";
+import type { SlideOverTab } from "./use-work-order-slide-over";
+
+type UseSlideOverEditStateArgs = {
+  row: WorkOrderTableRow | null;
+  editMode: boolean;
+  infoSource: WorkOrderTableRow | null | undefined;
+  onSave: (id: string | number, patch: WorkOrderTablePatch, options?: SlideOverSaveOptions) => void;
+  onClose: () => void;
+  closeDisabled: boolean;
+  setTab: (tab: SlideOverTab) => void;
+};
+
+export function useSlideOverEditState({
+  row,
+  editMode,
+  infoSource,
+  onSave,
+  onClose,
+  closeDisabled,
+  setTab,
+}: UseSlideOverEditStateArgs) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState<WorkOrderTableRow | null>(null);
+  /** Last confirmed baseline for dirty/patch — not overwritten by optimistic parent row. */
+  const [baseline, setBaseline] = useState<WorkOrderTableRow | null>(null);
+  const [showUnsaved, setShowUnsaved] = useState(false);
+  const [unsavedIntent, setUnsavedIntent] = useState<"close" | "cancel-edit" | null>(null);
+
+  // Reset draft/baseline only when the opened WO identity or editMode intent changes —
+  // not on every optimistic parent-row field update during a failed/in-flight save.
+  useEffect(() => {
+    if (!row) {
+      setDraft(null);
+      setBaseline(null);
+      setEditing(false);
+      setShowUnsaved(false);
+      setUnsavedIntent(null);
+      return;
+    }
+    setDraft(row);
+    setBaseline(row);
+    setEditing(editMode && (row.status as string) !== "Canceled");
+    setTab("info");
+    setShowUnsaved(false);
+    setUnsavedIntent(null);
+    // Intentionally identity-only: depending on `row` would absorb optimistic patches.
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- row.id / editMode gate
+  }, [row?.id, editMode]);
+
+  useEffect(() => {
+    if (!infoSource) return;
+    if (!editing) {
+      setDraft(infoSource);
+      setBaseline(infoSource);
+      return;
+    }
+    // While editing, freeze baseline so optimistic parent-row patches cannot clear dirty.
+    setDraft((prev) => {
+      if (prev && baseline && isSlideOverDraftDirty(prev, baseline)) return prev;
+      return infoSource;
+    });
+  }, [infoSource, editing, baseline]);
+
+  const activeDraft = draft ?? infoSource;
+  const dirtyBaseline = baseline ?? infoSource;
+  const isDirty = useMemo(() => {
+    if (!dirtyBaseline || !activeDraft || !editing) return false;
+    return isSlideOverDraftDirty(activeDraft, dirtyBaseline);
+  }, [activeDraft, dirtyBaseline, editing]);
+
+  const handleDraftChange = (patch: Partial<WorkOrderTableRow>) => {
+    setDraft((prev) => (prev ? { ...prev, ...patch } : prev));
+  };
+
+  const commit = () => {
+    if (!row || !activeDraft || !dirtyBaseline) return;
+    const patch = buildSlideOverPatch(activeDraft, dirtyBaseline);
+    if (Object.keys(patch).length === 0) {
+      setEditing(false);
+      setShowUnsaved(false);
+      return;
+    }
+    onSave(row.id, patch, {
+      onSuccess: () => {
+        setBaseline(activeDraft);
+        setEditing(false);
+        setShowUnsaved(false);
+      },
+    });
+  };
+
+  const discard = () => {
+    if (!dirtyBaseline) return;
+    setDraft(dirtyBaseline);
+    setEditing(false);
+    setShowUnsaved(false);
+  };
+
+  const requestClose = () => {
+    if (closeDisabled) return;
+    if (editing && isDirty) {
+      setUnsavedIntent("close");
+      setShowUnsaved(true);
+      return;
+    }
+    onClose();
+  };
+
+  const handleCancelEdit = () => {
+    if (isDirty) {
+      setUnsavedIntent("cancel-edit");
+      setShowUnsaved(true);
+      return;
+    }
+    if (dirtyBaseline) setDraft(dirtyBaseline);
+    setEditing(false);
+  };
+
+  const handleDiscard = () => {
+    const intent = unsavedIntent;
+    discard();
+    setUnsavedIntent(null);
+    // Close only when Discard was opened from panel close — never from cancel-edit.
+    // Skip when uploads block close (closeDisabled).
+    if (intent === "close" && !closeDisabled) {
+      onClose();
+    }
+  };
+
+  const startEditing = () => {
+    if (!infoSource) return;
+    setDraft(infoSource);
+    setBaseline(infoSource);
+    setEditing(true);
+    setTab("info");
+  };
+
+  return {
+    editing,
+    activeDraft,
+    isDirty,
+    showUnsaved,
+    setShowUnsaved,
+    handleDraftChange,
+    commit,
+    discard,
+    handleDiscard,
+    requestClose,
+    handleCancelEdit,
+    startEditing,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/detail/use-slide-over-media-state.ts b/src/app/(protected)/workorders/_components/detail/use-slide-over-media-state.ts
new file mode 100644
index 00000000..e0d8ed5a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/use-slide-over-media-state.ts
@@ -0,0 +1,97 @@
+import { useMemo, useState } from "react";
+import type { MediaUploadRequest } from "@/app/(protected)/workorders/_components/media/media-uploader";
+import { useMediaUploadSession } from "@/app/(protected)/workorders/_hooks/use-media-upload-session";
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import { boardMediaItemsToMediaFiles } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { WorkOrderBoardDetail } from "@/domain/work-orders/types/work-order-board-detail";
+import type {
+  useDeleteWorkOrderMedia,
+  useUpdateWorkOrderMediaCategory,
+  useUploadWorkOrderMedia,
+} from "@/domain/work-orders/use-cases/use-work-order-mutations";
+
+const COMPLETION_MEDIA_PURPOSES = new Set(["Before", "After", "Completion"]);
+
+type UseSlideOverMediaStateArgs = {
+  detailForRow?: WorkOrderBoardDetail;
+  uploadMediaMutation: ReturnType<typeof useUploadWorkOrderMedia>;
+  deleteMediaMutation: ReturnType<typeof useDeleteWorkOrderMedia>;
+  categorizeMediaMutation: ReturnType<typeof useUpdateWorkOrderMediaCategory>;
+};
+
+export function useSlideOverMediaState({
+  detailForRow,
+  uploadMediaMutation,
+  deleteMediaMutation,
+  categorizeMediaMutation,
+}: UseSlideOverMediaStateArgs) {
+  const [mediaBatchPending, setMediaBatchPending] = useState(false);
+  const { uploads, startUploads, retryUpload, cancelUpload, removeLocal, isLocal } =
+    useMediaUploadSession(detailForRow, (input) => uploadMediaMutation.mutateAsync(input));
+
+  const completionMedia = useMemo(
+    () =>
+      uploads.filter(
+        (item) =>
+          COMPLETION_MEDIA_PURPOSES.has(item.purpose ?? "") ||
+          item.uploadStatus === "uploading" ||
+          item.uploadStatus === "failed",
+      ),
+    [uploads],
+  );
+
+  const extrasUploads = useMemo(
+    () =>
+      boardMediaItemsToMediaFiles(
+        (detailForRow?.media ?? []).filter((item) => item.category === "Extra"),
+      ),
+    [detailForRow?.media],
+  );
+
+  const hasLocalUploading = uploads.some((item) => item.uploadStatus === "uploading");
+  const mediaPending =
+    mediaBatchPending ||
+    hasLocalUploading ||
+    uploadMediaMutation.isPending ||
+    deleteMediaMutation.isPending ||
+    categorizeMediaMutation.isPending;
+
+  const uploadMediaRequests = (requests: MediaUploadRequest[]) => {
+    startUploads(requests);
+  };
+
+  const uploadExtraFiles = async (files: File[]) => {
+    setMediaBatchPending(true);
+    try {
+      for (const file of files) {
+        await uploadMediaMutation.mutateAsync({ file, category: "Extra" });
+      }
+    } finally {
+      setMediaBatchPending(false);
+    }
+  };
+
+  const categorizeMedia = (mediaId: string, category: UploadableMediaCategory) => {
+    categorizeMediaMutation.mutate({ mediaId, category });
+  };
+
+  const removeMedia = (id: string) => {
+    if (isLocal(id)) {
+      removeLocal(id);
+      return;
+    }
+    deleteMediaMutation.mutate(id);
+  };
+
+  return {
+    completionMedia,
+    extrasUploads,
+    mediaPending,
+    uploadMediaRequests,
+    uploadExtraFiles,
+    categorizeMedia,
+    retryUpload,
+    cancelUpload,
+    removeMedia,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/detail/use-work-order-slide-over.ts b/src/app/(protected)/workorders/_components/detail/use-work-order-slide-over.ts
new file mode 100644
index 00000000..d0c85a7a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/use-work-order-slide-over.ts
@@ -0,0 +1,151 @@
+import { useState } from "react";
+import { toast } from "react-toastify";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { useWorkOrderBoardDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
+import {
+  useAddWorkOrderComment,
+  useDeleteWorkOrderMedia,
+  useUpdateWorkOrderComment,
+  useUpdateWorkOrderMediaCategory,
+  useUploadCompletionDoc,
+  useUploadWorkOrderMedia,
+} from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { isWorkOrderDocumentsReadOnly } from "@/domain/work-orders/utils/work-order-media-limits";
+import { todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+import { useAuthContext } from "@/providers/auth-context";
+import { useSlideOverEditState } from "./use-slide-over-edit-state";
+import { useSlideOverMediaState } from "./use-slide-over-media-state";
+import type { SlideOverSaveOptions } from "./work-order-slide-over";
+
+export type SlideOverTab = "info" | "comments" | "audit" | "completion" | "extras";
+
+type UseWorkOrderSlideOverArgs = {
+  row: WorkOrderTableRow | null;
+  editMode: boolean;
+  onSave: (id: string | number, patch: WorkOrderTablePatch, options?: SlideOverSaveOptions) => void;
+  onClose: () => void;
+  saving?: boolean;
+};
+
+export function useWorkOrderSlideOver({
+  row,
+  editMode,
+  onSave,
+  onClose,
+  saving,
+}: UseWorkOrderSlideOverArgs) {
+  const { user } = useAuthContext();
+  const workOrderId = row?.id;
+  const {
+    data: detail,
+    isLoading,
+    isFetching,
+    error,
+    refetch,
+  } = useWorkOrderBoardDetail(workOrderId, Boolean(row));
+  const commentMutation = useAddWorkOrderComment(workOrderId ?? "");
+  const updateCommentMutation = useUpdateWorkOrderComment(workOrderId ?? "");
+  const uploadMediaMutation = useUploadWorkOrderMedia(workOrderId ?? "");
+  const categorizeMediaMutation = useUpdateWorkOrderMediaCategory(workOrderId ?? "");
+  const deleteMediaMutation = useDeleteWorkOrderMedia(workOrderId ?? "");
+  const uploadCompletionMutation = useUploadCompletionDoc(workOrderId ?? "");
+
+  const [tab, setTab] = useState<SlideOverTab>("info");
+
+  // Prefer row until detail for this id arrives — avoids cross-WO bleed while loading.
+  const detailForRow =
+    detail && row && String(detail.info.id) === String(row.id) ? detail : undefined;
+  const infoSource = detailForRow?.info ?? row;
+  const isCancelled = (infoSource?.status as string) === "Canceled";
+  const isDocumentsReadOnly = isWorkOrderDocumentsReadOnly(infoSource?.status);
+
+  const {
+    completionMedia,
+    extrasUploads,
+    mediaPending,
+    uploadMediaRequests,
+    uploadExtraFiles,
+    categorizeMedia,
+    retryUpload,
+    cancelUpload,
+    removeMedia,
+  } = useSlideOverMediaState({
+    detailForRow,
+    uploadMediaMutation,
+    deleteMediaMutation,
+    categorizeMediaMutation,
+  });
+  const completionPending = uploadCompletionMutation.isPending;
+  const closeDisabled = Boolean(saving || mediaPending || completionPending);
+
+  const editState = useSlideOverEditState({
+    row,
+    editMode,
+    infoSource,
+    onSave,
+    onClose,
+    closeDisabled,
+    setTab,
+  });
+
+  const uploadCompletionPdf = (file: File) => {
+    const version = infoSource?.rowVersion;
+    if (!version || !row || !infoSource) {
+      toast.error("Missing work order version. Refresh and try again.");
+      return;
+    }
+    uploadCompletionMutation.mutate(
+      { file, workOrderVersion: version },
+      {
+        onSuccess: () => {
+          // Mirror CompDoc finalize: ensure completedDate then mark docStatus Yes.
+          const patch: WorkOrderTablePatch = { docStatus: "Yes" };
+          if (!infoSource.completedDate) {
+            patch.completedDate = todayIso();
+          }
+          onSave(row.id, patch);
+        },
+      },
+    );
+  };
+
+  const showDetailSkeleton = isLoading && !detailForRow;
+  const errorMessage =
+    error instanceof Error ? error.message : "Failed to load work order details.";
+
+  return {
+    user,
+    detail,
+    isLoading,
+    isFetching,
+    error,
+    refetch,
+    commentMutation,
+    updateCommentMutation,
+    tab,
+    setTab,
+    detailForRow,
+    infoSource,
+    isCancelled,
+    isDocumentsReadOnly,
+    completionMedia,
+    extrasUploads,
+    mediaPending,
+    completionPending,
+    closeDisabled,
+    uploadMediaRequests,
+    uploadExtraFiles,
+    categorizeMedia,
+    retryUpload,
+    cancelUpload,
+    removeMedia,
+    deleteMediaMutation,
+    uploadCompletionPdf,
+    showDetailSkeleton,
+    errorMessage,
+    ...editState,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-activity-section.tsx b/src/app/(protected)/workorders/_components/detail/work-order-activity-section.tsx
new file mode 100644
index 00000000..7b72c393
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-activity-section.tsx
@@ -0,0 +1,101 @@
+import { useMemo, useState } from "react";
+import { Box, Paper, Tab, Tabs, TextField, Typography } from "@mui/material";
+import { CommentTimeline } from "@/components/common/comment-timeline";
+import { mapWorkOrderCommentsToTimeline } from "@/components/common/comment-timeline-mappers";
+import { Button } from "@/components/ui/button";
+import { AuditTimeline } from "./audit-timeline";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order";
+
+type ActivityTab = "customer" | "internal" | "audit";
+
+type WorkOrderActivitySectionProps = {
+  wo: WorkOrderDetail;
+  onCommentSubmit: (
+    text: string,
+    commentType: "customer" | "internal",
+    options?: { onSuccess?: () => void },
+  ) => void;
+  isCommentPending: boolean;
+};
+
+export function WorkOrderActivitySection({
+  wo,
+  onCommentSubmit,
+  isCommentPending,
+}: WorkOrderActivitySectionProps) {
+  const [activeTab, setActiveTab] = useState<ActivityTab>("customer");
+  const [commentText, setCommentText] = useState("");
+
+  const customerComments = useMemo(
+    () => (wo.comments ?? []).filter((comment) => comment.commentType === "customer"),
+    [wo.comments],
+  );
+  const internalComments = useMemo(
+    () => (wo.comments ?? []).filter((comment) => comment.commentType === "internal"),
+    [wo.comments],
+  );
+  const auditLog = wo.auditLog ?? [];
+
+  const handleCommentSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!commentText.trim()) {
+      return;
+    }
+    onCommentSubmit(commentText.trim(), activeTab === "customer" ? "customer" : "internal", {
+      onSuccess: () => setCommentText(""),
+    });
+  };
+
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Typography variant="subtitle1" className="mb-3 font-semibold">
+        Activity
+      </Typography>
+      <Tabs
+        value={activeTab}
+        onChange={(_event, value: ActivityTab) => setActiveTab(value)}
+        className="mb-3"
+      >
+        <Tab value="customer" label={`Customer (${customerComments.length})`} />
+        <Tab value="internal" label={`Internal (${internalComments.length})`} />
+        <Tab value="audit" label={`Audit Log (${auditLog.length})`} />
+      </Tabs>
+
+      {activeTab === "customer" && (
+        <CommentTimeline
+          items={mapWorkOrderCommentsToTimeline(customerComments)}
+          emptyMessage="No comments yet."
+        />
+      )}
+      {activeTab === "internal" && (
+        <CommentTimeline
+          items={mapWorkOrderCommentsToTimeline(internalComments)}
+          emptyMessage="No comments yet."
+        />
+      )}
+      {activeTab === "audit" && <AuditTimeline entries={auditLog} />}
+
+      {activeTab === "internal" && (
+        <Box component="form" onSubmit={handleCommentSubmit} className="mt-4 flex flex-col gap-2">
+          <TextField
+            multiline
+            rows={2}
+            value={commentText}
+            onChange={(event) => setCommentText(event.target.value)}
+            placeholder="Type a comment..."
+            disabled={isCommentPending}
+          />
+          <Button
+            type="submit"
+            className="self-end"
+            disabled={!commentText.trim()}
+            loading={isCommentPending}
+            loadingText="Sending…"
+          >
+            Send
+          </Button>
+        </Box>
+      )}
+    </Paper>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-assignee-menu.tsx b/src/app/(protected)/workorders/_components/detail/work-order-assignee-menu.tsx
new file mode 100644
index 00000000..fed7b761
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-assignee-menu.tsx
@@ -0,0 +1,56 @@
+import { Button, Menu, MenuItem } from "@mui/material";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { useMenuAnchor } from "@/hooks/use-menu-anchor";
+
+type WorkOrderAssigneeMenuProps = {
+  assignedTo: string;
+  users: WorkOrderUser[];
+  disabled?: boolean;
+  onAssign: (userId: string | number, userName: string) => void;
+};
+
+export function WorkOrderAssigneeMenu({
+  assignedTo,
+  users,
+  disabled = false,
+  onAssign,
+}: WorkOrderAssigneeMenuProps) {
+  const { anchorEl, open, setAnchor, close } = useMenuAnchor();
+
+  return (
+    <>
+      <Button
+        size="small"
+        disabled={disabled}
+        aria-busy={disabled || undefined}
+        onClick={(event) => setAnchor(event.currentTarget)}
+      >
+        {disabled ? "Updating…" : assignedTo || "Unassigned"}
+      </Button>
+      <Menu anchorEl={anchorEl} open={open} onClose={close}>
+        <MenuItem
+          disabled={disabled}
+          onClick={() => {
+            close();
+            onAssign("", "");
+          }}
+        >
+          Unassigned
+        </MenuItem>
+        {users.map((user) => (
+          <MenuItem
+            key={String(user.id)}
+            selected={assignedTo === user.name}
+            disabled={disabled}
+            onClick={() => {
+              close();
+              onAssign(user.id, user.name);
+            }}
+          >
+            {user.name}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-description-accordion.tsx b/src/app/(protected)/workorders/_components/detail/work-order-description-accordion.tsx
new file mode 100644
index 00000000..ec67beae
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-description-accordion.tsx
@@ -0,0 +1,20 @@
+import { Accordion, AccordionDetails, AccordionSummary, Typography } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order";
+
+type WorkOrderDescriptionAccordionProps = {
+  wo: WorkOrderDetail;
+};
+
+export function WorkOrderDescriptionAccordion({ wo }: WorkOrderDescriptionAccordionProps) {
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography sx={{ fontWeight: 600 }}>Description</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography>{wo.description || "No description provided."}</Typography>
+      </AccordionDetails>
+    </Accordion>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-detail-sections.tsx b/src/app/(protected)/workorders/_components/detail/work-order-detail-sections.tsx
new file mode 100644
index 00000000..d1ba2d09
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-detail-sections.tsx
@@ -0,0 +1,49 @@
+import type { WorkOrderDetail, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { WorkOrderActivitySection } from "./work-order-activity-section";
+import { WorkOrderDescriptionAccordion } from "./work-order-description-accordion";
+import { WorkOrderDetailsCard } from "./work-order-details-card";
+import { WorkOrderDispatchesAccordion } from "./work-order-dispatches-accordion";
+import { WorkOrderSimpleAccordions } from "./work-order-simple-accordions";
+
+type WorkOrderDetailsSectionProps = {
+  wo: WorkOrderDetail;
+  users: WorkOrderUser[];
+  onAssign: (userId: string | number, userName: string) => void;
+  isAssignPending?: boolean;
+  onDispatchClick: (dispatchId: string | number) => void;
+  onCommentSubmit: (
+    text: string,
+    commentType: "customer" | "internal",
+    options?: { onSuccess?: () => void },
+  ) => void;
+  isCommentPending: boolean;
+};
+
+export function WorkOrderDetailsSection({
+  wo,
+  users,
+  onAssign,
+  isAssignPending = false,
+  onDispatchClick,
+  onCommentSubmit,
+  isCommentPending,
+}: WorkOrderDetailsSectionProps) {
+  return (
+    <>
+      <WorkOrderDetailsCard
+        wo={wo}
+        users={users}
+        onAssign={onAssign}
+        isAssignPending={isAssignPending}
+      />
+      <WorkOrderSimpleAccordions wo={wo} />
+      <WorkOrderDispatchesAccordion wo={wo} onDispatchClick={onDispatchClick} />
+      <WorkOrderDescriptionAccordion wo={wo} />
+      <WorkOrderActivitySection
+        wo={wo}
+        onCommentSubmit={onCommentSubmit}
+        isCommentPending={isCommentPending}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-details-card.tsx b/src/app/(protected)/workorders/_components/detail/work-order-details-card.tsx
new file mode 100644
index 00000000..fb332ce1
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-details-card.tsx
@@ -0,0 +1,45 @@
+import { Box, Paper, Typography } from "@mui/material";
+import { DetailField, DetailFieldGrid } from "@/components/common/detail-field";
+import { WorkOrderAssigneeMenu } from "./work-order-assignee-menu";
+import type { WorkOrderDetail, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+
+type WorkOrderDetailsCardProps = {
+  wo: WorkOrderDetail;
+  users: WorkOrderUser[];
+  onAssign: (userId: string | number, userName: string) => void;
+  isAssignPending?: boolean;
+};
+
+export function WorkOrderDetailsCard({
+  wo,
+  users,
+  onAssign,
+  isAssignPending = false,
+}: WorkOrderDetailsCardProps) {
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Typography variant="subtitle1" className="mb-3 font-semibold">
+        Details
+      </Typography>
+      <DetailFieldGrid>
+        <DetailField label="Internal WO" value={wo.internalWONumber} />
+        <DetailField label="Customer WO" value={wo.workOrderNumber || "—"} />
+        <DetailField label="Priority" value={wo.priority || "—"} />
+        <DetailField label="Location" value={wo.location || "—"} />
+        <Box>
+          <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
+            Assigned To
+          </Typography>
+          <WorkOrderAssigneeMenu
+            assignedTo={wo.assignedTo}
+            users={users}
+            disabled={isAssignPending}
+            onAssign={onAssign}
+          />
+        </Box>
+        <DetailField label="Source" value={wo.source || "—"} />
+        <DetailField label="TT" value={wo.tt || "—"} />
+      </DetailFieldGrid>
+    </Paper>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-dispatches-accordion.tsx b/src/app/(protected)/workorders/_components/detail/work-order-dispatches-accordion.tsx
new file mode 100644
index 00000000..30de5b9e
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-dispatches-accordion.tsx
@@ -0,0 +1,85 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order";
+import { formatDateTime, getWaitTimeTextClass, timeSince, waitTimeColor } from "@/lib/time-utils";
+
+type WorkOrderDispatchesAccordionProps = {
+  wo: WorkOrderDetail;
+  onDispatchClick: (dispatchId: string | number) => void;
+};
+
+export function WorkOrderDispatchesAccordion({
+  wo,
+  onDispatchClick,
+}: WorkOrderDispatchesAccordionProps) {
+  return (
+    <Accordion defaultExpanded={Boolean(wo.dispatches.length)}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography sx={{ fontWeight: 600 }}>Dispatches ({wo.dispatches.length})</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        {wo.dispatches.length ? (
+          <TableContainer>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell>Dispatch #</TableCell>
+                  <TableCell>Vendor</TableCell>
+                  <TableCell>NTE</TableCell>
+                  <TableCell>Status</TableCell>
+                  <TableCell>Date</TableCell>
+                  <TableCell>Wait</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {wo.dispatches.map((dispatch) => {
+                  const color = waitTimeColor(dispatch.dispatchedAt);
+                  return (
+                    <TableRow
+                      key={String(dispatch.id)}
+                      hover
+                      className="cursor-pointer"
+                      onClick={() => onDispatchClick(dispatch.id)}
+                    >
+                      <TableCell>{dispatch.dispatchNumber || dispatch.poNumber}</TableCell>
+                      <TableCell>{dispatch.vendorName}</TableCell>
+                      <TableCell>
+                        {dispatch.nteAmount != null ? `$${dispatch.nteAmount.toFixed(2)}` : "—"}
+                      </TableCell>
+                      <TableCell>{dispatch.status}</TableCell>
+                      <TableCell>
+                        {dispatch.dispatchedAt ? formatDateTime(dispatch.dispatchedAt) : "—"}
+                      </TableCell>
+                      <TableCell>
+                        {dispatch.status === "Sent" ? (
+                          <Typography variant="caption" className={getWaitTimeTextClass(color)}>
+                            {timeSince(dispatch.dispatchedAt)}
+                          </Typography>
+                        ) : (
+                          "—"
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        ) : (
+          <Typography color="text.secondary">No dispatches yet.</Typography>
+        )}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-simple-accordions.tsx b/src/app/(protected)/workorders/_components/detail/work-order-simple-accordions.tsx
new file mode 100644
index 00000000..9c8b4214
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-simple-accordions.tsx
@@ -0,0 +1,61 @@
+import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { DetailField, DetailFieldGrid } from "@/components/common/detail-field";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order";
+import { formatDateTime } from "@/lib/time-utils";
+
+type WorkOrderSimpleAccordionsProps = {
+  wo: WorkOrderDetail;
+};
+
+export function WorkOrderSimpleAccordions({ wo }: WorkOrderSimpleAccordionsProps) {
+  return (
+    <>
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Classification</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <DetailFieldGrid>
+            <DetailField label="Problem" value={wo.problem || "—"} />
+            <DetailField label="Trade" value={wo.trade || "—"} />
+            <DetailField label="Sub-Trade" value={wo.subTrade || "—"} />
+          </DetailFieldGrid>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Schedule</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <DetailField
+              label="Created"
+              value={wo.createdDateFull ? formatDateTime(wo.createdDateFull) : "—"}
+            />
+            <DetailField label="Due Date" value={wo.dueDate || "—"} />
+            <DetailField label="Scheduled" value={wo.scheduledDate || "—"} />
+            <DetailField label="Completed" value={wo.completedDate || "—"} />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Financial</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <DetailField
+              label="Vendor NTE"
+              value={wo.vendorNTE ? `$${parseFloat(wo.vendorNTE).toFixed(2)}` : "—"}
+            />
+            <DetailField label="Customer PO" value={wo.po || "—"} />
+            <DetailField label="Customer NTE" value="Not connected" />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-nav.tsx b/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-nav.tsx
new file mode 100644
index 00000000..2efcac54
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-nav.tsx
@@ -0,0 +1,52 @@
+import type { SlideOverTab } from "./use-work-order-slide-over";
+
+const SLIDE_OVER_TABS: { id: SlideOverTab; label: string }[] = [
+  { id: "info", label: "Info" },
+  { id: "comments", label: "Comments" },
+  { id: "audit", label: "Audit Log" },
+  { id: "completion", label: "Completion Doc" },
+  { id: "extras", label: "Extra Docs" },
+];
+
+type WorkOrderSlideOverTabNavProps = {
+  tab: SlideOverTab;
+  saving?: boolean;
+  onTabChange: (tab: SlideOverTab) => void;
+};
+
+export function WorkOrderSlideOverTabNav({
+  tab,
+  saving,
+  onTabChange,
+}: WorkOrderSlideOverTabNavProps) {
+  return (
+    <div
+      className="mt-2 flex shrink-0 gap-4 overflow-x-auto px-4"
+      style={{ borderBottom: "1px solid var(--color-border)" }}
+      role="tablist"
+      aria-label="Work order sections"
+    >
+      {SLIDE_OVER_TABS.map((item) => {
+        const active = tab === item.id;
+        return (
+          <button
+            key={item.id}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            disabled={Boolean(saving)}
+            onClick={() => onTabChange(item.id)}
+            className="shrink-0 border-b-2 pb-2.5 text-[12px] transition-colors disabled:opacity-50"
+            style={{
+              borderBottomColor: active ? "var(--color-primary)" : "transparent",
+              color: active ? "var(--color-primary)" : "var(--color-text-muted)",
+              fontWeight: active ? 500 : 400,
+            }}
+          >
+            {item.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-panel.tsx b/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-panel.tsx
new file mode 100644
index 00000000..9f682b89
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-panel.tsx
@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { QueryErrorPanel } from "@/components/ui/query-error-panel";
+import { SlideOverTabSkeleton } from "@/app/(protected)/workorders/_components/loading/slide-over-tab-skeleton";
+
+type SlideOverTabSkeletonVariant = "comments" | "audit" | "completion" | "extras";
+
+type WorkOrderSlideOverTabPanelProps = {
+  variant: SlideOverTabSkeletonVariant;
+  showSkeleton: boolean;
+  hasError: boolean;
+  errorMessage: string;
+  onRetry: () => void;
+  showContent: boolean;
+  children: ReactNode;
+};
+
+export function WorkOrderSlideOverTabPanel({
+  variant,
+  showSkeleton,
+  hasError,
+  errorMessage,
+  onRetry,
+  showContent,
+  children,
+}: WorkOrderSlideOverTabPanelProps) {
+  return (
+    <>
+      {showSkeleton && <SlideOverTabSkeleton variant={variant} />}
+      {hasError && <QueryErrorPanel compact message={errorMessage} onRetry={onRetry} />}
+      {showContent && children}
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tabs.tsx b/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tabs.tsx
new file mode 100644
index 00000000..6d69148a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tabs.tsx
@@ -0,0 +1,156 @@
+import { Box } from "@mui/material";
+import { SlideOverAuditTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-audit-tab";
+import { SlideOverCommentsTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-comments-tab";
+import { SlideOverCompletionTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-tab";
+import { SlideOverExtrasTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab";
+import { SlideOverInfoTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab";
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { useWorkOrderSlideOver, SlideOverTab } from "./use-work-order-slide-over";
+import { WorkOrderSlideOverTabPanel } from "./work-order-slide-over-tab-panel";
+
+type SlideOverState = ReturnType<typeof useWorkOrderSlideOver>;
+
+type WorkOrderSlideOverTabsProps = {
+  tab: SlideOverTab;
+  state: SlideOverState;
+  saving?: boolean;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  allOrders: WorkOrderTableRow[];
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+  onOpenCompletionDoc: () => void;
+};
+
+export function WorkOrderSlideOverTabs({
+  tab,
+  state,
+  saving,
+  users,
+  sites,
+  vendors,
+  pmTypes,
+  allOrders,
+  onDuplicateFound,
+  onOpenCompletionDoc,
+}: WorkOrderSlideOverTabsProps) {
+  const hasError = Boolean(state.error) && !state.detailForRow;
+  const showContent = Boolean(state.detailForRow || !state.isLoading);
+  const { infoSource, activeDraft } = state;
+
+  return (
+    <Box className="flex-1 overflow-y-auto p-5">
+      {tab === "info" && infoSource != null && activeDraft != null && (
+        <SlideOverInfoTab
+          row={infoSource}
+          draft={activeDraft}
+          editing={state.editing && !saving}
+          isCancelled={state.isCancelled}
+          users={users}
+          sites={sites}
+          vendors={vendors}
+          pmTypes={pmTypes}
+          allOrders={allOrders}
+          onDraftChange={state.handleDraftChange}
+          onDuplicateFound={onDuplicateFound}
+        />
+      )}
+
+      {tab === "comments" && (
+        <WorkOrderSlideOverTabPanel
+          variant="comments"
+          showSkeleton={state.showDetailSkeleton}
+          hasError={hasError}
+          errorMessage={state.errorMessage}
+          onRetry={() => void state.refetch()}
+          showContent={state.detailForRow != null}
+        >
+          {state.detailForRow != null && (
+            <SlideOverCommentsTab
+              comments={state.detailForRow.comments}
+              isReadOnly={state.isDocumentsReadOnly}
+              isPending={state.commentMutation.isPending}
+              currentUserId={state.user?.id}
+              isUpdatePending={state.updateCommentMutation.isPending}
+              onSubmit={(text, options) => state.commentMutation.mutate({ text }, options)}
+              onUpdateComment={(commentId, text, options) =>
+                state.updateCommentMutation.mutate({ commentId, text }, options)
+              }
+            />
+          )}
+        </WorkOrderSlideOverTabPanel>
+      )}
+
+      {tab === "audit" && (
+        <WorkOrderSlideOverTabPanel
+          variant="audit"
+          showSkeleton={state.showDetailSkeleton}
+          hasError={hasError}
+          errorMessage={state.errorMessage}
+          onRetry={() => void state.refetch()}
+          showContent={state.detailForRow != null}
+        >
+          {state.detailForRow != null && (
+            <SlideOverAuditTab entries={state.detailForRow.audit} users={users} />
+          )}
+        </WorkOrderSlideOverTabPanel>
+      )}
+
+      {tab === "completion" && state.infoSource != null && (
+        <WorkOrderSlideOverTabPanel
+          variant="completion"
+          showSkeleton={state.showDetailSkeleton}
+          hasError={hasError}
+          errorMessage={state.errorMessage}
+          onRetry={() => void state.refetch()}
+          showContent={showContent}
+        >
+          <SlideOverCompletionTab
+            row={state.infoSource}
+            isReadOnly={state.isDocumentsReadOnly}
+            completion={state.detailForRow?.completion}
+            media={state.completionMedia}
+            mediaPending={state.mediaPending}
+            completionPending={state.completionPending}
+            onUploadMedia={(requests) => {
+              state.uploadMediaRequests(requests);
+            }}
+            onCategorizeMedia={state.categorizeMedia}
+            onRemoveMedia={state.removeMedia}
+            onRetryMedia={state.retryUpload}
+            onCancelMedia={state.cancelUpload}
+            onUploadCompletionPdf={state.uploadCompletionPdf}
+            onOpenCompletionDoc={onOpenCompletionDoc}
+          />
+        </WorkOrderSlideOverTabPanel>
+      )}
+
+      {tab === "extras" && (
+        <WorkOrderSlideOverTabPanel
+          variant="extras"
+          showSkeleton={state.showDetailSkeleton}
+          hasError={hasError}
+          errorMessage={state.errorMessage}
+          onRetry={() => void state.refetch()}
+          showContent={showContent}
+        >
+          <SlideOverExtrasTab
+            uploads={state.extrasUploads}
+            isReadOnly={state.isDocumentsReadOnly}
+            pending={state.mediaPending}
+            onUpload={(files) => {
+              void state.uploadExtraFiles(files);
+            }}
+            onRemove={(id) => state.deleteMediaMutation.mutate(id)}
+          />
+        </WorkOrderSlideOverTabPanel>
+      )}
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-slide-over.tsx b/src/app/(protected)/workorders/_components/detail/work-order-slide-over.tsx
new file mode 100644
index 00000000..64d2e8f9
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-slide-over.tsx
@@ -0,0 +1,108 @@
+import { Box } from "@mui/material";
+import { SideSheet } from "@/components/ui/side-sheet";
+import { SlideOverHeader } from "@/app/(protected)/workorders/_components/detail/slide-over-header";
+import { SlideOverFooter } from "@/app/(protected)/workorders/_components/detail/slide-over-footer";
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { useWorkOrderSlideOver } from "./use-work-order-slide-over";
+import { WorkOrderSlideOverTabNav } from "./work-order-slide-over-tab-nav";
+import { WorkOrderSlideOverTabs } from "./work-order-slide-over-tabs";
+
+export type SlideOverSaveOptions = {
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+};
+
+type WorkOrderSlideOverProps = {
+  row: WorkOrderTableRow | null;
+  editMode: boolean;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  allOrders: WorkOrderTableRow[];
+  onSave: (id: string | number, patch: WorkOrderTablePatch, options?: SlideOverSaveOptions) => void;
+  onOpenCompletionDoc: (row: WorkOrderTableRow) => void;
+  onCancelWO: (row: WorkOrderTableRow) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+  onClose: () => void;
+  saving?: boolean;
+};
+
+export function WorkOrderSlideOver({
+  row,
+  editMode,
+  users,
+  sites,
+  vendors,
+  pmTypes,
+  allOrders,
+  onSave,
+  onOpenCompletionDoc,
+  onCancelWO,
+  onDuplicateFound,
+  onClose,
+  saving,
+}: WorkOrderSlideOverProps) {
+  const state = useWorkOrderSlideOver({ row, editMode, onSave, onClose, saving });
+  const { infoSource, activeDraft } = state;
+
+  return (
+    <SideSheet
+      open={Boolean(row)}
+      onClose={state.requestClose}
+      closeDisabled={state.closeDisabled}
+      widthClass="w-[480px] max-w-[480px]"
+      aria-label="Work order details"
+    >
+      {row != null && infoSource != null && activeDraft != null && (
+        <Box className="flex h-full flex-col overflow-hidden">
+          <SlideOverHeader
+            row={infoSource}
+            isCancelled={state.isCancelled}
+            isFetching={state.isFetching && !state.isLoading}
+            closeDisabled={state.closeDisabled}
+            onClose={state.requestClose}
+          />
+
+          <WorkOrderSlideOverTabNav tab={state.tab} saving={saving} onTabChange={state.setTab} />
+
+          <WorkOrderSlideOverTabs
+            tab={state.tab}
+            state={state}
+            saving={saving}
+            users={users}
+            sites={sites}
+            vendors={vendors}
+            pmTypes={pmTypes}
+            allOrders={allOrders}
+            onDuplicateFound={onDuplicateFound}
+            onOpenCompletionDoc={() => onOpenCompletionDoc(infoSource)}
+          />
+
+          <SlideOverFooter
+            isCancelled={state.isCancelled}
+            editing={state.editing}
+            isDirty={state.isDirty}
+            showUnsaved={state.showUnsaved}
+            saving={saving}
+            onCancelWO={() => onCancelWO(infoSource)}
+            onCancelEdit={state.handleCancelEdit}
+            onClose={state.requestClose}
+            onEdit={state.startEditing}
+            onSave={state.commit}
+            onDiscard={state.handleDiscard}
+            onKeepEditing={() => state.setShowUnsaved(false)}
+          />
+        </Box>
+      )}
+    </SideSheet>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-status-menu.tsx b/src/app/(protected)/workorders/_components/detail/work-order-status-menu.tsx
new file mode 100644
index 00000000..15945501
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-status-menu.tsx
@@ -0,0 +1,50 @@
+import { Menu, MenuItem } from "@mui/material";
+import { WorkOrderStatusBadge } from "@/components/domain/status-badge";
+import { MenuAnchorButton } from "@/components/ui/menu-anchor-button";
+import { WORK_ORDER_STATUS_OPTIONS } from "@/domain/work-orders/types/work-order";
+import { useMenuAnchor } from "@/hooks/use-menu-anchor";
+
+type WorkOrderStatusMenuProps = {
+  status: string;
+  disabled?: boolean;
+  onStatusChange: (status: string) => void;
+};
+
+export function WorkOrderStatusMenu({
+  status,
+  disabled = false,
+  onStatusChange,
+}: WorkOrderStatusMenuProps) {
+  const { anchorEl, open, setAnchor, close } = useMenuAnchor();
+
+  return (
+    <>
+      <MenuAnchorButton
+        onAnchor={setAnchor}
+        open={open}
+        disabled={disabled}
+        aria-label="Change status"
+        aria-busy={disabled || undefined}
+      >
+        <WorkOrderStatusBadge status={status} />
+      </MenuAnchorButton>
+      <Menu anchorEl={anchorEl} open={open} onClose={close}>
+        {WORK_ORDER_STATUS_OPTIONS.map((option) => (
+          <MenuItem
+            key={option}
+            selected={option === status}
+            disabled={disabled}
+            onClick={() => {
+              close();
+              if (option !== status) {
+                onStatusChange(option);
+              }
+            }}
+          >
+            {option}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/work-order-cancel-dialog.tsx b/src/app/(protected)/workorders/_components/list/work-order-cancel-dialog.tsx
new file mode 100644
index 00000000..e17a262a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/work-order-cancel-dialog.tsx
@@ -0,0 +1,50 @@
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import { Button } from "@/components/ui/button";
+import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type WorkOrderCancelDialogProps = {
+  row: WorkOrderTableRow | null;
+  isPending: boolean;
+  onDialogClose: (() => void) | undefined;
+  onKeepWO: () => void;
+  onConfirm: () => void;
+};
+
+export function WorkOrderCancelDialog({
+  row,
+  isPending,
+  onDialogClose,
+  onKeepWO,
+  onConfirm,
+}: WorkOrderCancelDialogProps) {
+  return (
+    <Dialog open={Boolean(row)} onClose={onDialogClose} slotProps={dialogBlurBackdropSlotProps}>
+      <DialogTitle>Cancel work order?</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          Cancel WO #{row?.woNumber}? The record will be kept with status Canceled.
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button variant="outline" onClick={onKeepWO} disabled={isPending}>
+          Keep WO
+        </Button>
+        <Button
+          variant="destructive"
+          onClick={onConfirm}
+          loading={isPending}
+          loadingText="Canceling…"
+        >
+          Cancel WO
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-upload-modal.tsx b/src/app/(protected)/workorders/_components/media/media-upload-modal.tsx
index 779bdb28..ee60f414 100644
--- a/src/app/(protected)/workorders/_components/media/media-upload-modal.tsx
+++ b/src/app/(protected)/workorders/_components/media/media-upload-modal.tsx
@@ -1,32 +1,45 @@
 import { type MouseEvent } from "react";
-import { Dialog, DialogContent, DialogTitle } from "@mui/material";
+import { Dialog, DialogContent, DialogTitle, Skeleton, Stack } from "@mui/material";
 import { Image as ImageIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+import { LoadingRegion } from "@/components/ui/loading-region";
 import { Text } from "@/components/ui/text";
-import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+import { MediaUploader } from "@/app/(protected)/workorders/_components/media/media-uploader";
+import { useMediaUploadSession } from "@/app/(protected)/workorders/_hooks/use-media-upload-session";
 import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
-import { MediaUploader } from "./media-uploader";
+import { useWorkOrderBoardDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
+import {
+  useDeleteWorkOrderMedia,
+  useUpdateWorkOrderMediaCategory,
+  useUploadWorkOrderMedia,
+} from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { isWorkOrderDocumentsReadOnly } from "@/domain/work-orders/utils/work-order-media-limits";
+import { guardDialogClose } from "@/lib/dialog-guard";
 
 type MediaUploadModalProps = {
   row: WorkOrderTableRow;
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  uploads: MediaFile[];
-  onChange: (next: MediaFile[]) => void;
 };
 
-export function MediaUploadModal({
-  row,
-  open,
-  onOpenChange,
-  uploads,
-  onChange,
-}: MediaUploadModalProps) {
+export function MediaUploadModal({ row, open, onOpenChange }: MediaUploadModalProps) {
+  const { data: detail, isLoading } = useWorkOrderBoardDetail(row.id, open);
+  const uploadMutation = useUploadWorkOrderMedia(row.id);
+  const categorizeMutation = useUpdateWorkOrderMediaCategory(row.id);
+  const deleteMutation = useDeleteWorkOrderMedia(row.id);
+  const isReadOnly = isWorkOrderDocumentsReadOnly(detail?.info.status ?? row.status);
+  const { uploads, startUploads, retryUpload, cancelUpload, removeLocal, isLocal } =
+    useMediaUploadSession(detail, (input) => uploadMutation.mutateAsync(input));
+
+  const pending =
+    uploadMutation.isPending || deleteMutation.isPending || categorizeMutation.isPending;
+  const handleClose = guardDialogClose(pending, () => onOpenChange(false));
+
   return (
     <Dialog
       open={open}
-      onClose={() => onOpenChange(false)}
+      onClose={handleClose}
       maxWidth={false}
       slotProps={{
         ...dialogBlurBackdropSlotProps,
@@ -45,11 +58,36 @@ export function MediaUploadModal({
           <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>#{row.woNumber}</span>
         </div>
         <Text className="sr-only" variant="description">
-          Upload photos and videos for this work order.
+          Upload photos and videos for this work order, then assign Before, After, or Extra.
         </Text>
 
         <div className="mt-4">
-          <MediaUploader uploads={uploads} onChange={onChange} />
+          {isLoading && !detail ? (
+            <LoadingRegion label="Loading media">
+              <Stack spacing={1.5}>
+                <Skeleton variant="rounded" height={100} animation="wave" />
+                <Skeleton variant="rounded" height={40} animation="wave" />
+                <Skeleton variant="rounded" height={40} animation="wave" />
+              </Stack>
+            </LoadingRegion>
+          ) : (
+            <MediaUploader
+              uploads={uploads}
+              onUpload={startUploads}
+              onRemove={(id) => {
+                if (isLocal(id)) {
+                  removeLocal(id);
+                  return;
+                }
+                deleteMutation.mutate(id);
+              }}
+              onCategorize={(id, category) => categorizeMutation.mutate({ mediaId: id, category })}
+              onRetry={retryUpload}
+              onCancel={cancelUpload}
+              readOnly={isReadOnly}
+              pending={pending}
+            />
+          )}
         </div>
 
         <div className="mt-2 flex justify-end">
@@ -57,6 +95,7 @@ export function MediaUploadModal({
             variant="outline"
             size="default"
             className="text-[12px]"
+            disabled={pending}
             onClick={() => onOpenChange(false)}
           >
             Close
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader-dropzone.tsx b/src/app/(protected)/workorders/_components/media/media-uploader-dropzone.tsx
new file mode 100644
index 00000000..e6b3aa19
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-uploader-dropzone.tsx
@@ -0,0 +1,60 @@
+import type { RefObject } from "react";
+import { Upload } from "lucide-react";
+import {
+  formatMediaSizeLimit,
+  workOrderMediaAcceptAttribute,
+} from "@/domain/work-orders/utils/work-order-media-limits";
+
+type MediaUploaderDropzoneProps = {
+  inputRef: RefObject<HTMLInputElement | null>;
+  pending: boolean;
+  onFilesSelected: (files: FileList | null) => void;
+};
+
+export function MediaUploaderDropzone({
+  inputRef,
+  pending,
+  onFilesSelected,
+}: MediaUploaderDropzoneProps) {
+  return (
+    <>
+      <button
+        type="button"
+        disabled={pending}
+        onClick={() => inputRef.current?.click()}
+        onDragOver={(e) => e.preventDefault()}
+        onDrop={(e) => {
+          e.preventDefault();
+          onFilesSelected(e.dataTransfer.files);
+        }}
+        className="flex w-full flex-col items-center justify-center gap-1.5 transition-colors hover:bg-[var(--color-bg-muted)] disabled:opacity-60"
+        style={{
+          minHeight: 120,
+          border: "1px dashed var(--color-border)",
+          borderRadius: 8,
+        }}
+      >
+        <Upload size={20} style={{ color: "var(--color-text-muted)" }} />
+        <span style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
+          {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()} per file · categorize after
+          upload
+        </span>
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={workOrderMediaAcceptAttribute()}
+        multiple
+        hidden
+        disabled={pending}
+        onChange={(e) => {
+          onFilesSelected(e.target.files);
+          e.target.value = "";
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-chrome.tsx b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-chrome.tsx
new file mode 100644
index 00000000..1399c90a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-chrome.tsx
@@ -0,0 +1,113 @@
+import { RotateCcw, X } from "lucide-react";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+import { canDeleteWorkOrderMedia } from "@/domain/work-orders/utils/work-order-media-limits";
+import { MediaUploaderGridItemPreview } from "./media-uploader-grid-item-preview";
+
+type MediaUploaderGridItemChromeProps = {
+  file: MediaFile;
+  readOnly: boolean;
+  pending: boolean;
+  onRemove: (id: string) => void;
+  onRetry?: (id: string) => void;
+  onCancel?: (id: string) => void;
+};
+
+export function MediaUploaderGridItemChrome({
+  file,
+  readOnly,
+  pending,
+  onRemove,
+  onRetry,
+  onCancel,
+}: MediaUploaderGridItemChromeProps) {
+  const uploading = file.uploadStatus === "uploading";
+  const failed = file.uploadStatus === "failed";
+  const showDelete = !readOnly && canDeleteWorkOrderMedia(file);
+
+  return (
+    <div
+      className="relative"
+      style={{
+        aspectRatio: "1 / 1",
+        background: "var(--color-bg-muted)",
+      }}
+    >
+      <MediaUploaderGridItemPreview file={file} />
+      {Boolean(uploading) && (
+        <div
+          className="absolute inset-x-0 bottom-0"
+          style={{ height: 4, background: "rgba(0,0,0,0.25)" }}
+        >
+          <div
+            style={{
+              height: "100%",
+              width: `${file.progress ?? 0}%`,
+              background: "var(--color-brand-primary, #2563eb)",
+            }}
+          />
+        </div>
+      )}
+      {Boolean(uploading && onCancel) && (
+        <button
+          type="button"
+          onClick={() => onCancel?.(file.id)}
+          title="Cancel upload"
+          className="absolute flex items-center justify-center"
+          style={{
+            top: 4,
+            right: 4,
+            width: 18,
+            height: 18,
+            borderRadius: 4,
+            background: "var(--color-bg-surface)",
+            border: "1px solid var(--color-border)",
+            color: "var(--color-text-muted)",
+          }}
+        >
+          <X size={11} />
+        </button>
+      )}
+      {Boolean(failed && onRetry) && (
+        <button
+          type="button"
+          onClick={() => onRetry?.(file.id)}
+          title="Retry upload"
+          className="absolute flex items-center justify-center"
+          style={{
+            top: 4,
+            left: 4,
+            width: 18,
+            height: 18,
+            borderRadius: 4,
+            background: "var(--color-bg-surface)",
+            border: "1px solid var(--color-border)",
+            color: "var(--color-text-muted)",
+          }}
+        >
+          <RotateCcw size={11} />
+        </button>
+      )}
+      {Boolean(showDelete && !uploading) && (
+        <button
+          type="button"
+          onClick={() => onRemove(file.id)}
+          title="Remove"
+          disabled={pending}
+          className="absolute flex items-center justify-center transition-opacity hover:opacity-80 disabled:opacity-50"
+          style={{
+            top: 4,
+            right: 4,
+            width: 18,
+            height: 18,
+            borderRadius: 4,
+            background: "var(--color-bg-surface)",
+            border: "1px solid var(--color-border)",
+            color: "var(--color-text-muted)",
+          }}
+        >
+          <X size={11} />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-meta.tsx b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-meta.tsx
new file mode 100644
index 00000000..8b42c0f4
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-meta.tsx
@@ -0,0 +1,67 @@
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+
+const PURPOSE_OPTIONS: UploadableMediaCategory[] = ["Before", "After", "Extra"];
+
+type MediaUploaderGridItemMetaProps = {
+  file: MediaFile;
+  readOnly: boolean;
+  pending: boolean;
+  onCategorize?: (id: string, category: UploadableMediaCategory) => void;
+};
+
+export function MediaUploaderGridItemMeta({
+  file,
+  readOnly,
+  pending,
+  onCategorize,
+}: MediaUploaderGridItemMetaProps) {
+  const failed = file.uploadStatus === "failed";
+  const needsCategory =
+    !readOnly &&
+    !file.isLegacy &&
+    file.uploadStatus !== "uploading" &&
+    file.uploadStatus !== "failed" &&
+    Boolean(onCategorize);
+
+  return (
+    <div className="space-y-1 px-1 py-1">
+      <div className="truncate" style={{ fontSize: 10, color: "var(--color-text-muted)" }}>
+        {file.name}
+      </div>
+      {Boolean(failed) && (
+        <div style={{ fontSize: 10, color: "var(--color-danger, #b91c1c)" }}>
+          {file.errorMessage || "Upload failed"}
+        </div>
+      )}
+      {needsCategory ? (
+        <select
+          aria-label={`Category for ${file.name}`}
+          value={file.purpose ?? ""}
+          disabled={pending}
+          onChange={(event) => {
+            const value = event.target.value as UploadableMediaCategory;
+            if (value) onCategorize?.(file.id, value);
+          }}
+          className="w-full rounded border px-1 py-0.5 text-[10px]"
+          style={{
+            borderColor: "var(--color-border)",
+            color: "var(--color-text-primary)",
+            background: "var(--color-bg-surface)",
+          }}
+        >
+          <option value="">Assign purpose…</option>
+          {PURPOSE_OPTIONS.map((value) => (
+            <option key={value} value={value}>
+              {value}
+            </option>
+          ))}
+        </select>
+      ) : (
+        <div style={{ fontSize: 10, color: "var(--color-text-muted)" }}>
+          {file.purpose || (file.isLegacy ? "Legacy" : "")}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-preview.tsx b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-preview.tsx
new file mode 100644
index 00000000..3634fc1f
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-preview.tsx
@@ -0,0 +1,52 @@
+import {
+  File as FileIcon,
+  FileText,
+  Film,
+  Image as ImageIcon,
+  Paperclip,
+  Play,
+} from "lucide-react";
+import type { FileCategory, MediaFile } from "@/domain/work-orders/types/work-order-media";
+
+const FILETYPE_ICON: Record<FileCategory, typeof ImageIcon> = {
+  image: ImageIcon,
+  video: Film,
+  pdf: FileText,
+  doc: FileIcon,
+  other: Paperclip,
+};
+
+type MediaUploaderGridItemPreviewProps = {
+  file: MediaFile;
+};
+
+export function MediaUploaderGridItemPreview({ file }: MediaUploaderGridItemPreviewProps) {
+  const TypeIcon = FILETYPE_ICON[file.fileType];
+
+  if (file.fileType === "image") {
+    return (
+      <img
+        src={file.url}
+        alt={file.name}
+        style={{ width: "100%", height: "100%", objectFit: "cover" }}
+      />
+    );
+  }
+
+  if (file.fileType === "video") {
+    return (
+      <>
+        <video src={file.url} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+        <span className="absolute inset-0 flex items-center justify-center">
+          <Play size={18} style={{ color: "#fff" }} />
+        </span>
+      </>
+    );
+  }
+
+  return (
+    <span className="absolute inset-0 flex items-center justify-center">
+      <TypeIcon size={18} style={{ color: "var(--color-text-muted)" }} />
+    </span>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader-grid-item.tsx b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item.tsx
new file mode 100644
index 00000000..81943b68
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item.tsx
@@ -0,0 +1,46 @@
+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 { MediaUploaderGridItemChrome } from "./media-uploader-grid-item-chrome";
+import { MediaUploaderGridItemMeta } from "./media-uploader-grid-item-meta";
+
+type MediaUploaderGridItemProps = {
+  file: MediaFile;
+  readOnly: boolean;
+  pending: boolean;
+  onRemove: (id: string) => void;
+  onCategorize?: (id: string, category: UploadableMediaCategory) => void;
+  onRetry?: (id: string) => void;
+  onCancel?: (id: string) => void;
+};
+
+export function MediaUploaderGridItem({
+  file,
+  readOnly,
+  pending,
+  onRemove,
+  onCategorize,
+  onRetry,
+  onCancel,
+}: MediaUploaderGridItemProps) {
+  return (
+    <div
+      className="overflow-hidden rounded-lg border"
+      style={{ borderColor: "var(--color-border)" }}
+    >
+      <MediaUploaderGridItemChrome
+        file={file}
+        readOnly={readOnly}
+        pending={pending}
+        onRemove={onRemove}
+        onRetry={onRetry}
+        onCancel={onCancel}
+      />
+      <MediaUploaderGridItemMeta
+        file={file}
+        readOnly={readOnly}
+        pending={pending}
+        onCategorize={onCategorize}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader-grid.tsx b/src/app/(protected)/workorders/_components/media/media-uploader-grid.tsx
new file mode 100644
index 00000000..052bd161
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-uploader-grid.tsx
@@ -0,0 +1,42 @@
+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 { MediaUploaderGridItem } from "./media-uploader-grid-item";
+
+type MediaUploaderGridProps = {
+  uploads: MediaFile[];
+  readOnly: boolean;
+  pending: boolean;
+  onRemove: (id: string) => void;
+  onCategorize?: (id: string, category: UploadableMediaCategory) => void;
+  onRetry?: (id: string) => void;
+  onCancel?: (id: string) => void;
+};
+
+export function MediaUploaderGrid({
+  uploads,
+  readOnly,
+  pending,
+  onRemove,
+  onCategorize,
+  onRetry,
+  onCancel,
+}: MediaUploaderGridProps) {
+  if (uploads.length === 0) return null;
+
+  return (
+    <div className="mt-3 grid grid-cols-3 gap-2">
+      {uploads.map((file) => (
+        <MediaUploaderGridItem
+          key={file.id}
+          file={file}
+          readOnly={readOnly}
+          pending={pending}
+          onRemove={onRemove}
+          onCategorize={onCategorize}
+          onRetry={onRetry}
+          onCancel={onCancel}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader.tsx b/src/app/(protected)/workorders/_components/media/media-uploader.tsx
index bd7fcc9a..69f4c364 100644
--- a/src/app/(protected)/workorders/_components/media/media-uploader.tsx
+++ b/src/app/(protected)/workorders/_components/media/media-uploader.tsx
@@ -1,143 +1,107 @@
 import { useRef } 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 {
-  File as FileIcon,
-  FileText,
-  Film,
-  Image as ImageIcon,
-  Paperclip,
-  Play,
-  Upload,
-  X,
-} from "lucide-react";
-import type { FileCategory, MediaFile } from "@/domain/work-orders/types/work-order-media";
+  canDeleteWorkOrderMedia,
+  formatMediaSizeLimit,
+  isWorkOrderFileTooLarge,
+  isWorkOrderMediaTypeAllowed,
+} from "@/domain/work-orders/utils/work-order-media-limits";
 import { makeMediaFile } from "@/domain/work-orders/utils/work-order-media-utils";
+import { MediaUploaderDropzone } from "./media-uploader-dropzone";
+import { MediaUploaderGrid } from "./media-uploader-grid";
 
-const FILETYPE_ICON: Record<FileCategory, typeof ImageIcon> = {
-  image: ImageIcon,
-  video: Film,
-  pdf: FileText,
-  doc: FileIcon,
-  other: Paperclip,
+export type MediaUploadRequest = {
+  localId: string;
+  file: File;
+  onProgress: (percent: number) => void;
 };
 
 type MediaUploaderProps = {
   uploads: MediaFile[];
-  onChange: (next: MediaFile[]) => void;
+  /** Upload-then-categorize: files only — category assigned after persist. */
+  onUpload?: (requests: MediaUploadRequest[]) => void;
+  onRemove?: (id: string) => void;
+  onCategorize?: (id: string, category: UploadableMediaCategory) => void;
+  onRetry?: (localId: string) => void;
+  onCancel?: (localId: string) => void;
+  /** Legacy local-only mode (table modal fallback). */
+  onChange?: (next: MediaFile[]) => void;
+  readOnly?: boolean;
+  pending?: boolean;
 };
 
-export function MediaUploader({ uploads, onChange }: MediaUploaderProps) {
+export function MediaUploader({
+  uploads,
+  onUpload,
+  onRemove,
+  onCategorize,
+  onRetry,
+  onCancel,
+  onChange,
+  readOnly = false,
+  pending = false,
+}: MediaUploaderProps) {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const addFiles = (files: FileList | null) => {
-    if (!files || files.length === 0) return;
-    onChange([...uploads, ...Array.from(files).map(makeMediaFile)]);
+    if (readOnly || pending || !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);
+    }
+    if (accepted.length === 0) return;
+
+    if (onUpload) {
+      const requests: MediaUploadRequest[] = accepted.map((file) => ({
+        localId: `local-${crypto.randomUUID()}`,
+        file,
+        onProgress: () => undefined,
+      }));
+      onUpload(requests);
+      return;
+    }
+
+    if (onChange) {
+      onChange([...uploads, ...accepted.map(makeMediaFile)]);
+    }
   };
 
-  const remove = (id: string) => onChange(uploads.filter((u) => u.id !== id));
+  const remove = (id: string) => {
+    if (readOnly || pending) return;
+    const target = uploads.find((u) => u.id === id);
+    if (target && !canDeleteWorkOrderMedia(target) && target.uploadStatus !== "failed") return;
+    if (onRemove) {
+      onRemove(id);
+      return;
+    }
+    onChange?.(uploads.filter((u) => u.id !== id));
+  };
 
   return (
     <div>
-      <button
-        type="button"
-        onClick={() => inputRef.current?.click()}
-        onDragOver={(e) => e.preventDefault()}
-        onDrop={(e) => {
-          e.preventDefault();
-          addFiles(e.dataTransfer.files);
-        }}
-        className="flex w-full flex-col items-center justify-center gap-1.5 transition-colors hover:bg-[var(--color-bg-muted)]"
-        style={{
-          minHeight: 120,
-          border: "1px dashed var(--color-border)",
-          borderRadius: 8,
-        }}
-      >
-        <Upload size={20} style={{ color: "var(--color-text-muted)" }} />
-        <span style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
-          Drag files here or click to browse
-        </span>
-        <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
-          Accepted: JPG, PNG, MP4, MOV · Max 50MB per file
-        </span>
-      </button>
-      <input
-        ref={inputRef}
-        type="file"
-        accept="image/*,video/*"
-        multiple
-        hidden
-        onChange={(e) => addFiles(e.target.files)}
-      />
-      {uploads.length > 0 && (
-        <div className="mt-3 grid grid-cols-3 gap-2">
-          {uploads.map((u) => {
-            const TypeIcon = FILETYPE_ICON[u.fileType];
-            return (
-              <div
-                key={u.id}
-                className="overflow-hidden rounded-lg border"
-                style={{ borderColor: "var(--color-border)" }}
-              >
-                <div
-                  className="relative"
-                  style={{
-                    aspectRatio: "1 / 1",
-                    background: "var(--color-bg-muted)",
-                  }}
-                >
-                  {u.fileType === "image" ? (
-                    <img
-                      src={u.url}
-                      alt={u.name}
-                      style={{ width: "100%", height: "100%", objectFit: "cover" }}
-                    />
-                  ) : u.fileType === "video" ? (
-                    <>
-                      <video
-                        src={u.url}
-                        style={{ width: "100%", height: "100%", objectFit: "cover" }}
-                      />
-                      <span className="absolute inset-0 flex items-center justify-center">
-                        <Play size={18} style={{ color: "#fff" }} />
-                      </span>
-                    </>
-                  ) : (
-                    <span className="absolute inset-0 flex items-center justify-center">
-                      <TypeIcon size={18} style={{ color: "var(--color-text-muted)" }} />
-                    </span>
-                  )}
-                  <button
-                    type="button"
-                    onClick={() => remove(u.id)}
-                    title="Remove"
-                    className="absolute flex items-center justify-center transition-opacity hover:opacity-80"
-                    style={{
-                      top: 4,
-                      right: 4,
-                      width: 18,
-                      height: 18,
-                      borderRadius: 4,
-                      background: "var(--color-bg-surface)",
-                      border: "1px solid var(--color-border)",
-                      color: "var(--color-text-muted)",
-                    }}
-                  >
-                    <X size={11} />
-                  </button>
-                </div>
-                <div className="px-1 py-1">
-                  <div
-                    className="truncate"
-                    style={{ fontSize: 10, color: "var(--color-text-muted)" }}
-                  >
-                    {u.name}
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
+      {!readOnly && (
+        <MediaUploaderDropzone inputRef={inputRef} pending={pending} onFilesSelected={addFiles} />
       )}
+      <MediaUploaderGrid
+        uploads={uploads}
+        readOnly={readOnly}
+        pending={pending}
+        onRemove={remove}
+        onCategorize={onCategorize}
+        onRetry={onRetry}
+        onCancel={onCancel}
+      />
     </div>
   );
 }
diff --git a/src/app/(protected)/workorders/_hooks/use-media-upload-session.ts b/src/app/(protected)/workorders/_hooks/use-media-upload-session.ts
new file mode 100644
index 00000000..305c4f7b
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-media-upload-session.ts
@@ -0,0 +1,199 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { MediaUploadRequest } from "@/app/(protected)/workorders/_components/media/media-uploader";
+import { boardMediaItemsToMediaFiles } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+import type { WorkOrderBoardDetail } from "@/domain/work-orders/types/work-order-board-detail";
+import { classifyUpload } from "@/domain/work-orders/utils/work-order-media-utils";
+
+type LocalUpload = MediaFile & { sourceFile?: File; signal?: AbortSignal };
+
+type UploadMutate = (input: {
+  file: File;
+  signal?: AbortSignal;
+  onProgress?: (percent: number) => void;
+}) => Promise<unknown>;
+
+type SessionUploadRequest = {
+  localId: string;
+  file: File;
+  signal: AbortSignal;
+};
+
+function toLocalUpload(request: SessionUploadRequest): LocalUpload {
+  const classified = classifyUpload(request.file);
+  return {
+    id: request.localId,
+    name: request.file.name,
+    fileType: classified.fileType,
+    url: URL.createObjectURL(request.file),
+    category: classified.category,
+    purpose: null,
+    progress: 0,
+    uploadStatus: "uploading" as const,
+    sourceFile: request.file,
+    signal: request.signal,
+  };
+}
+
+function isSameAttempt(item: LocalUpload, request: SessionUploadRequest) {
+  return item.id === request.localId && item.signal === request.signal;
+}
+
+function revokeBlobUrl(url: string) {
+  if (url.startsWith("blob:")) {
+    URL.revokeObjectURL(url);
+  }
+}
+
+export function useMediaUploadSession(
+  detail: WorkOrderBoardDetail | undefined,
+  uploadMutateAsync: UploadMutate,
+) {
+  const [localUploads, setLocalUploads] = useState<LocalUpload[]>([]);
+  const controllersRef = useRef(new Map<string, AbortController>());
+  const workOrderId = detail?.info.id;
+  const previousWorkOrderIdRef = useRef(workOrderId);
+
+  // Drop local tiles and abort in-flight uploads when the bound WO changes.
+  // Skip the first bind (undefined → id) so an early upload is not cleared.
+  useEffect(() => {
+    if (previousWorkOrderIdRef.current === workOrderId) return;
+    const hadPrevious = previousWorkOrderIdRef.current != null;
+    previousWorkOrderIdRef.current = workOrderId;
+    if (!hadPrevious) return;
+
+    for (const controller of controllersRef.current.values()) {
+      controller.abort();
+    }
+    controllersRef.current.clear();
+    setLocalUploads((prev) => {
+      for (const item of prev) {
+        revokeBlobUrl(item.url);
+      }
+      return [];
+    });
+  }, [workOrderId]);
+
+  const serverUploads = useMemo(
+    () => boardMediaItemsToMediaFiles(detail?.media ?? []),
+    [detail?.media],
+  );
+
+  const uploads = useMemo(() => {
+    const serverIds = new Set(serverUploads.map((item) => item.id));
+    const pendingLocals = localUploads.filter(
+      (item) => item.uploadStatus === "uploading" || item.uploadStatus === "failed",
+    );
+    return [...serverUploads, ...pendingLocals.filter((item) => !serverIds.has(item.id))];
+  }, [serverUploads, localUploads]);
+
+  function clearController(localId: string) {
+    controllersRef.current.delete(localId);
+  }
+
+  function replaceController(localId: string): AbortController {
+    controllersRef.current.get(localId)?.abort();
+    const controller = new AbortController();
+    controllersRef.current.set(localId, controller);
+    return controller;
+  }
+
+  function startUploads(requests: MediaUploadRequest[]) {
+    const sessionRequests: SessionUploadRequest[] = requests.map((request) => ({
+      localId: request.localId,
+      file: request.file,
+      signal: replaceController(request.localId).signal,
+    }));
+
+    setLocalUploads((prev) => {
+      const next = [...prev];
+      for (const request of sessionRequests) {
+        const entry = toLocalUpload(request);
+        const index = next.findIndex((item) => item.id === request.localId);
+        if (index >= 0) {
+          const previous = next[index];
+          if (previous) {
+            revokeBlobUrl(previous.url);
+          }
+          next[index] = entry;
+        } else {
+          next.push(entry);
+        }
+      }
+      return next;
+    });
+
+    for (const request of sessionRequests) {
+      void uploadMutateAsync({
+        file: request.file,
+        signal: request.signal,
+        onProgress: (percent) => {
+          setLocalUploads((prev) =>
+            prev.map((item) =>
+              isSameAttempt(item, request) ? { ...item, progress: percent } : item,
+            ),
+          );
+        },
+      })
+        .then(() => {
+          clearController(request.localId);
+          setLocalUploads((prev) => prev.filter((item) => !isSameAttempt(item, request)));
+        })
+        .catch((error: Error) => {
+          if (error.name === "AbortError") {
+            clearController(request.localId);
+            setLocalUploads((prev) => prev.filter((item) => !isSameAttempt(item, request)));
+            return;
+          }
+          // Keep controller entry only while retryable; replaceController on retry.
+          setLocalUploads((prev) =>
+            prev.map((item) =>
+              isSameAttempt(item, request)
+                ? {
+                    ...item,
+                    uploadStatus: "failed",
+                    errorMessage: error.message || "Upload failed",
+                    progress: undefined,
+                  }
+                : item,
+            ),
+          );
+        });
+    }
+  }
+
+  function retryUpload(localId: string) {
+    const target = localUploads.find((item) => item.id === localId);
+    if (!target?.sourceFile) return;
+    startUploads([
+      {
+        localId,
+        file: target.sourceFile,
+        onProgress: () => undefined,
+      },
+    ]);
+  }
+
+  function cancelUpload(localId: string) {
+    controllersRef.current.get(localId)?.abort();
+    clearController(localId);
+    setLocalUploads((prev) => {
+      const target = prev.find((item) => item.id === localId);
+      if (target) {
+        revokeBlobUrl(target.url);
+      }
+      return prev.filter((item) => item.id !== localId);
+    });
+  }
+
+  function removeLocal(id: string) {
+    clearController(id);
+    setLocalUploads((prev) => prev.filter((item) => item.id !== id));
+  }
+
+  function isLocal(id: string) {
+    return localUploads.some((item) => item.id === id);
+  }
+
+  return { uploads, startUploads, retryUpload, cancelUpload, removeLocal, isLocal };
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-work-orders-list-page.ts b/src/app/(protected)/workorders/_hooks/use-work-orders-list-page.ts
new file mode 100644
index 00000000..b2963c11
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-work-orders-list-page.ts
@@ -0,0 +1,131 @@
+import { useMemo, useState } from "react";
+import { useDropdownOptionsByCategory } from "@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category";
+import type { CompDocData, CompDocSaveStatus } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  useWorkOrderLocations,
+  useWorkOrderVendors,
+} from "@/domain/work-orders/use-cases/use-work-order-detail";
+import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
+import { useWorkOrderTableMutations } from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+import { guardDialogClose } from "@/lib/dialog-guard";
+import { useWorkOrdersListFilters } from "./use-work-orders-list-filters";
+import { useWorkOrdersTableData } from "./use-work-orders-table-data";
+
+export function useWorkOrdersListPage() {
+  const [wizardOpen, setWizardOpen] = useState(false);
+  const [slideOverRow, setSlideOverRow] = useState<WorkOrderTableRow | null>(null);
+  const [slideOverEdit, setSlideOverEdit] = useState(false);
+  const [confirmCancel, setConfirmCancel] = useState<WorkOrderTableRow | null>(null);
+  const [docRow, setDocRow] = useState<WorkOrderTableRow | null>(null);
+  const [mediaRow, setMediaRow] = useState<WorkOrderTableRow | null>(null);
+  const [completionDocs, setCompletionDocs] = useState<Record<string, CompDocData>>({});
+  const filters = useWorkOrdersListFilters();
+  const tableData = useWorkOrdersTableData(filters);
+  const {
+    patchField,
+    patchFieldAsync,
+    isPending: isPatchPending,
+  } = useWorkOrderTableMutations({
+    onPatch: tableData.patchRow,
+    clearPatch: tableData.clearRowPatch,
+    getRow: (id) => tableData.rows.find((row) => String(row.id) === String(id)),
+  });
+
+  const { data: users = [], isLoading: usersLoading } = useWorkOrderUsers();
+  const { data: locations = [] } = useWorkOrderLocations();
+  const { data: vendors = [] } = useWorkOrderVendors();
+  const { data: problemOptions = [] } = useDropdownOptionsByCategory("Problem");
+
+  const pmTypes = useMemo(
+    () => problemOptions.map((option) => option.value).filter(Boolean),
+    [problemOptions],
+  );
+
+  const vendorTechs = useMemo(
+    () => [...new Set(vendors.map((vendor) => vendor.companyName).filter(Boolean))],
+    [vendors],
+  );
+
+  const activeSlideOverRow = useMemo(() => {
+    if (!slideOverRow) return null;
+    return tableData.rows.find((row) => row.id === slideOverRow.id) ?? slideOverRow;
+  }, [slideOverRow, tableData.rows]);
+
+  const activeDocRow = useMemo(() => {
+    if (!docRow) return null;
+    return tableData.rows.find((row) => row.id === docRow.id) ?? docRow;
+  }, [docRow, tableData.rows]);
+
+  const activeMediaRow = useMemo(() => {
+    if (!mediaRow) return null;
+    return tableData.rows.find((row) => row.id === mediaRow.id) ?? mediaRow;
+  }, [mediaRow, tableData.rows]);
+
+  const handleOpenSlideOver = (row: WorkOrderTableRow, edit = false) => {
+    setSlideOverRow(row);
+    setSlideOverEdit(edit);
+  };
+
+  const handleCloseSlideOver = () => {
+    setSlideOverRow(null);
+    setSlideOverEdit(false);
+    tableData.setSelectedId(null);
+  };
+
+  const handleConfirmCancel = () => {
+    if (!confirmCancel) return;
+    patchField(confirmCancel.id, { status: "Canceled" });
+    setConfirmCancel(null);
+    handleCloseSlideOver();
+  };
+
+  const cancelDialogClose = guardDialogClose(isPatchPending, () => setConfirmCancel(null));
+
+  const saveCompletionDoc = async (
+    row: WorkOrderTableRow,
+    data: CompDocData,
+    status: CompDocSaveStatus,
+  ) => {
+    // Persist PM comments + generatedAt in session state (no dedicated BE field yet)
+    // before patching board docStatus — Save draft / Generate / NN all share this path.
+    const nextData: CompDocData = {
+      notes: data.notes,
+      generatedAt: data.generatedAt,
+    };
+    setCompletionDocs((prev) => ({ ...prev, [String(row.id)]: nextData }));
+    await patchFieldAsync(row.id, { docStatus: status });
+  };
+
+  return {
+    wizardOpen,
+    setWizardOpen,
+    slideOverEdit,
+    confirmCancel,
+    setConfirmCancel,
+    docRow,
+    setDocRow,
+    mediaRow,
+    setMediaRow,
+    completionDocs,
+    filters,
+    tableData,
+    patchField,
+    patchFieldAsync,
+    isPatchPending,
+    users,
+    usersLoading,
+    locations,
+    vendors,
+    pmTypes,
+    vendorTechs,
+    activeSlideOverRow,
+    activeDocRow,
+    activeMediaRow,
+    handleOpenSlideOver,
+    handleCloseSlideOver,
+    handleConfirmCancel,
+    cancelDialogClose,
+    saveCompletionDoc,
+  };
+}
diff --git a/src/app/(protected)/workorders/index.tsx b/src/app/(protected)/workorders/index.tsx
index 8e0173e6..cd2943cc 100644
--- a/src/app/(protected)/workorders/index.tsx
+++ b/src/app/(protected)/workorders/index.tsx
@@ -1,64 +1,23 @@
-import { useMemo, useState } from "react";
 import { Box } from "@mui/material";
-import { useNavigate } from "react-router";
 import { PageHeader } from "@/components/ui/page-header";
 import { QueryErrorPanel } from "@/components/ui/query-error-panel";
+import { CompDocDialog } from "@/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog";
+import { WorkOrderSlideOver } from "@/app/(protected)/workorders/_components/detail/work-order-slide-over";
 import { MediaUploadModal } from "@/app/(protected)/workorders/_components/media/media-upload-modal";
 import { WorkOrdersAdvancedSearchSheet } from "@/app/(protected)/workorders/_components/list/advanced-search/work-orders-advanced-search-sheet";
 import { WorkOrdersAdvancedFiltersBanner } from "@/app/(protected)/workorders/_components/list/work-orders-advanced-filters-banner";
 import { WorkOrdersFilterBar } from "@/app/(protected)/workorders/_components/list/filter-bar/work-orders-filter-bar";
 import { WorkOrdersListHeader } from "@/app/(protected)/workorders/_components/list/work-orders-list-header";
+import { WorkOrderCancelDialog } from "@/app/(protected)/workorders/_components/list/work-order-cancel-dialog";
 import { WoTable } from "@/app/(protected)/workorders/_components/list/table/wo-table";
 import { NewWoWizard } from "@/app/(protected)/workorders/_components/wizard/new-wo-wizard";
-import { useWorkOrdersListFilters } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-filters";
-import { useWorkOrdersTableData } from "@/app/(protected)/workorders/_hooks/use-work-orders-table-data";
-import { useDropdownOptionsByCategory } from "@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category";
-import {
-  useWorkOrderLocations,
-  useWorkOrderVendors,
-} from "@/domain/work-orders/use-cases/use-work-order-detail";
-import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
-import { EMPTY_MEDIA, type MediaFile } from "@/domain/work-orders/types/work-order-media";
-import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
-import { useWorkOrderTableMutations } from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+import { useWorkOrdersListPage } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-page";
 import { useAuthContext } from "@/providers/auth-context";
 
 export default function WorkOrdersListPage() {
-  const navigate = useNavigate();
   const { user } = useAuthContext();
-  const [wizardOpen, setWizardOpen] = useState(false);
-  const [mediaRow, setMediaRow] = useState<WorkOrderTableRow | null>(null);
-  const [mediaFiles, setMediaFiles] = useState<Record<string, MediaFile[]>>({});
-  const filters = useWorkOrdersListFilters();
-  const tableData = useWorkOrdersTableData(filters);
-  const { patchField } = useWorkOrderTableMutations({
-    onPatch: tableData.patchRow,
-    clearPatch: tableData.clearRowPatch,
-    getRow: (id) => tableData.rows.find((row) => String(row.id) === String(id)),
-  });
-
-  const { data: users = [], isLoading: usersLoading } = useWorkOrderUsers();
-  const { data: locations = [] } = useWorkOrderLocations();
-  const { data: vendors = [] } = useWorkOrderVendors();
-  const { data: problemOptions = [] } = useDropdownOptionsByCategory("Problem");
-
-  const pmTypes = useMemo(
-    () => problemOptions.map((option) => option.value).filter(Boolean),
-    [problemOptions],
-  );
-
-  const vendorTechs = useMemo(
-    () => [...new Set(vendors.map((vendor) => vendor.companyName).filter(Boolean))],
-    [vendors],
-  );
-
-  const totalCount = tableData.totalCount;
-  const scopeTotalCount = tableData.scopeTotalCount;
-
-  const activeMediaRow = useMemo(() => {
-    if (!mediaRow) return null;
-    return tableData.rows.find((row) => row.id === mediaRow.id) ?? mediaRow;
-  }, [mediaRow, tableData.rows]);
+  const page = useWorkOrdersListPage();
+  const { filters, tableData, activeDocRow } = page;
 
   return (
     <Box className="flex h-full flex-col overflow-hidden p-2.5">
@@ -71,7 +30,7 @@ export default function WorkOrdersListPage() {
             search={filters.search}
             onSearchChange={filters.handleSearchChange}
             onOpenAdvancedFilters={() => filters.setAdvOpen(true)}
-            onNewWorkOrder={() => setWizardOpen(true)}
+            onNewWorkOrder={() => page.setWizardOpen(true)}
             activeFilterCount={filters.activeFilterCount}
             isFetching={tableData.isFetching && !tableData.isLoading}
           />
@@ -85,19 +44,19 @@ export default function WorkOrdersListPage() {
         onDispatcherChange={filters.setDispatcherIds}
         typeFilter={filters.typeFilter}
         onTypeChange={filters.setTypeFilter}
-        users={users}
-        usersLoading={usersLoading}
+        users={page.users}
+        usersLoading={page.usersLoading}
         currentUserId={user?.id}
-        filteredCount={totalCount}
-        scopeTotalCount={scopeTotalCount}
+        filteredCount={tableData.totalCount}
+        scopeTotalCount={tableData.scopeTotalCount}
       />
 
       {filters.advApplied != null && (
         <WorkOrdersAdvancedFiltersBanner
           applied={filters.advApplied}
-          totalCount={totalCount}
-          sites={locations}
-          users={users}
+          totalCount={tableData.totalCount}
+          sites={page.locations}
+          users={page.users}
           onClearChip={filters.clearAdvancedFilterChip}
           onClearAll={filters.clearAdvancedFilters}
         />
@@ -118,47 +77,79 @@ export default function WorkOrdersListPage() {
 
       <WoTable
         tableData={tableData}
-        users={users}
-        sites={locations}
-        vendors={vendors}
-        pmTypes={pmTypes}
+        users={page.users}
+        sites={page.locations}
+        vendors={page.vendors}
+        pmTypes={page.pmTypes}
         weekMonday={filters.weekMonday}
         onWeekChange={filters.setWeekMonday}
-        onOpenSlideOver={(row, edit) => {
-          tableData.setSelectedId(row.id);
-          navigate(edit ? `/workorders/edit/${row.id}` : `/workorders/${row.id}`);
-        }}
-        onOpenMedia={setMediaRow}
+        onOpenSlideOver={page.handleOpenSlideOver}
+        onOpenCompDoc={page.setDocRow}
+        onOpenMedia={page.setMediaRow}
         onClearSearch={() => filters.handleSearchChange("")}
         onOpenAdvancedFilters={() => filters.setAdvOpen(true)}
-        onPatch={patchField}
+        onPatch={page.patchField}
       />
 
+      <NewWoWizard open={page.wizardOpen} onOpenChange={page.setWizardOpen} users={page.users} />
+
       <WorkOrdersAdvancedSearchSheet
         open={filters.advOpen}
         onOpenChange={filters.setAdvOpen}
         initial={filters.advInitial}
         onApply={filters.applyAdvancedFilters}
         onClearAll={filters.clearAdvancedFilters}
-        sites={locations}
-        users={users}
-        pmTypes={pmTypes}
-        vendorTechs={vendorTechs}
+        sites={page.locations}
+        users={page.users}
+        pmTypes={page.pmTypes}
+        vendorTechs={page.vendorTechs}
       />
 
-      <NewWoWizard open={wizardOpen} onOpenChange={setWizardOpen} users={users} />
+      <WorkOrderSlideOver
+        row={page.activeSlideOverRow}
+        editMode={page.slideOverEdit}
+        users={page.users}
+        sites={page.locations}
+        vendors={page.vendors}
+        pmTypes={page.pmTypes}
+        allOrders={tableData.rows}
+        onSave={(id, patch, options) => page.patchField(id, patch, options)}
+        onOpenCompletionDoc={page.setDocRow}
+        onCancelWO={page.setConfirmCancel}
+        onDuplicateFound={(existing) => page.handleOpenSlideOver(existing, false)}
+        saving={page.isPatchPending}
+        onClose={page.handleCloseSlideOver}
+      />
 
-      {activeMediaRow != null && (
+      <WorkOrderCancelDialog
+        row={page.confirmCancel}
+        isPending={page.isPatchPending}
+        onDialogClose={page.cancelDialogClose}
+        onKeepWO={() => page.setConfirmCancel(null)}
+        onConfirm={page.handleConfirmCancel}
+      />
+
+      {page.activeMediaRow != null && (
         <MediaUploadModal
-          row={activeMediaRow}
-          open={!!activeMediaRow}
+          row={page.activeMediaRow}
+          open={!!page.activeMediaRow}
           onOpenChange={(open) => {
-            if (!open) setMediaRow(null);
+            if (!open) page.setMediaRow(null);
           }}
-          uploads={mediaFiles[String(activeMediaRow.id)] ?? EMPTY_MEDIA}
-          onChange={(files) => {
-            setMediaFiles((prev) => ({ ...prev, [String(activeMediaRow.id)]: files }));
-            patchField(activeMediaRow.id, { mediaCount: files.length });
+        />
+      )}
+
+      {activeDocRow != null && (
+        <CompDocDialog
+          row={activeDocRow}
+          open={!!activeDocRow}
+          onOpenChange={(open) => {
+            if (!open) page.setDocRow(null);
+          }}
+          data={page.completionDocs[String(activeDocRow.id)]}
+          onSave={(data, status) => page.saveCompletionDoc(activeDocRow, data, status)}
+          onDateCompletedChange={async (date) => {
+            await page.patchFieldAsync(activeDocRow.id, { completedDate: date });
           }}
         />
       )}
diff --git a/src/components/ui/page-header.tsx b/src/components/ui/page-header.tsx
index 23c273cc..566ae837 100644
--- a/src/components/ui/page-header.tsx
+++ b/src/components/ui/page-header.tsx
@@ -49,17 +49,10 @@ export function PageHeader({
             "m-0 font-display mt-1! text-[30px]! font-extrabold leading-[1.1] tracking-[-0.02em] text-foreground",
             eyebrow && "mt-1",
           )}
-          sx={{ fontSize: 30, fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em" }}
         >
           {title}
         </Text>
-        <Text
-          variant="description"
-          as="span"
-          tone="muted"
-          when={Boolean(subtitle)}
-          sx={{ mt: 0.75, fontWeight: 500 }}
-        >
+        <Text variant="description" tone="muted" when={Boolean(subtitle)}>
           {subtitle}
         </Text>
       </Stack>
diff --git a/src/domain/work-orders/api/work-order-board-documents-api.ts b/src/domain/work-orders/api/work-order-board-documents-api.ts
index 5532459f..85cf8e7c 100644
--- a/src/domain/work-orders/api/work-order-board-documents-api.ts
+++ b/src/domain/work-orders/api/work-order-board-documents-api.ts
@@ -101,12 +101,37 @@ export const workOrderBoardDocumentsApi = {
   uploadMedia: async (
     workOrderId: string | number,
     file: File,
-    category: UploadableMediaCategory,
+    category?: UploadableMediaCategory,
+    options?: { signal?: AbortSignal; onProgress?: (percent: number) => void },
   ): Promise<WorkOrderBoardMediaItem> => {
     const formData = buildMediaFormData(file, category);
     const response = await api.post(API_PATHS.workOrder.media(workOrderId), {
       body: formData,
       throwHttpErrors: false,
+      signal: options?.signal,
+      onUploadProgress: options?.onProgress
+        ? (progress) => {
+            options.onProgress?.(Math.round(progress.percent * 100));
+          }
+        : undefined,
+    });
+    const data = await readResponseJson(response);
+    if (response.ok) {
+      return mapBoardDetailMediaItem(handleApiResponse(data) ?? data);
+    }
+    throwDocumentHttpError(response, data);
+  },
+
+  updateMediaCategory: async (
+    workOrderId: string | number,
+    mediaId: string | number,
+    category: UploadableMediaCategory,
+  ): Promise<WorkOrderBoardMediaItem> => {
+    const formData = new FormData();
+    formData.append("category", category);
+    const response = await api.patch(API_PATHS.workOrder.mediaItem(workOrderId, mediaId), {
+      body: formData,
+      throwHttpErrors: false,
     });
     const data = await readResponseJson(response);
     if (response.ok) {
diff --git a/src/domain/work-orders/mappers/expand-scalar-board-ops.ts b/src/domain/work-orders/mappers/expand-scalar-board-ops.ts
index 332c677d..fa3d05af 100644
--- a/src/domain/work-orders/mappers/expand-scalar-board-ops.ts
+++ b/src/domain/work-orders/mappers/expand-scalar-board-ops.ts
@@ -30,6 +30,7 @@ const SCALAR_BOARD_OP_RULES: ScalarBoardOpRule[] = [
   { key: "vendorId", field: "vendorId", toValue: (value) => String(value) },
   { key: "apptTime", field: "apptTime", toValue: (value) => value as string },
   { key: "docStatus", field: "docStatus", toValue: (value) => mapDocStatusToApi(value as string) },
+  { key: "completedDate", field: "completedDate", toValue: (value) => value as string },
   { key: "pm", field: "pm", toValue: (value) => value as string },
   { key: "extraServices", field: "extraServices", toValue: (value) => JSON.stringify(value) },
   { key: "serviceNotes", field: "serviceNotes", toValue: (value) => value as string },
diff --git a/src/domain/work-orders/mappers/work-order-board-detail-mapper.ts b/src/domain/work-orders/mappers/work-order-board-detail-mapper.ts
index fffd515b..97128ef3 100644
--- a/src/domain/work-orders/mappers/work-order-board-detail-mapper.ts
+++ b/src/domain/work-orders/mappers/work-order-board-detail-mapper.ts
@@ -119,9 +119,11 @@ export function mapBoardDetailAuditEntry(raw: unknown, index: number): WorkOrder
 
 export type UploadableMediaCategory = "Before" | "After" | "Extra";
 
-export function buildMediaFormData(file: File, category: UploadableMediaCategory): FormData {
+export function buildMediaFormData(file: File, category?: UploadableMediaCategory): FormData {
   const form = new FormData();
-  form.append("category", category);
+  if (category) {
+    form.append("category", category);
+  }
   form.append("file", file);
   return form;
 }
@@ -229,7 +231,9 @@ export function boardMediaItemsToMediaFiles(items: WorkOrderBoardMediaItem[]): M
     fileType: classifyFileName(item.fileName, item.url),
     url: item.url,
     category: boardCategoryToMediaCategory(item.category),
+    purpose: item.category,
     isLegacy: item.isLegacy || Number(item.id) <= 0,
+    uploadStatus: "done" as const,
   }));
 }
 
diff --git a/src/domain/work-orders/mappers/work-order-table-row-mapper.ts b/src/domain/work-orders/mappers/work-order-table-row-mapper.ts
index a12162c2..af886e9b 100644
--- a/src/domain/work-orders/mappers/work-order-table-row-mapper.ts
+++ b/src/domain/work-orders/mappers/work-order-table-row-mapper.ts
@@ -237,6 +237,7 @@ export function mapWorkOrderTableRow(raw: unknown): WorkOrderTableRow {
     dispatcherId,
     dispatcherName,
     scheduledOn,
+    completedDate: toDateInputValue(readString(item, "completedDate", "CompletedDate")),
     targetWeek: toDateInputValue(readString(item, "targetWeek", "TargetWeek")),
     dayGroup,
     dayLabel,
diff --git a/src/domain/work-orders/types/work-order-board.ts b/src/domain/work-orders/types/work-order-board.ts
index 021fe1c0..22c9c043 100644
--- a/src/domain/work-orders/types/work-order-board.ts
+++ b/src/domain/work-orders/types/work-order-board.ts
@@ -116,6 +116,7 @@ export type WorkOrderBoardEditableField =
   | "apptDate"
   | "apptTime"
   | "docStatus"
+  | "completedDate"
   | "pm"
   | "serviceNotes"
   | "extraServices"
diff --git a/src/domain/work-orders/types/work-order-media.ts b/src/domain/work-orders/types/work-order-media.ts
index 68fd8faf..a5909850 100644
--- a/src/domain/work-orders/types/work-order-media.ts
+++ b/src/domain/work-orders/types/work-order-media.ts
@@ -9,8 +9,14 @@ export interface MediaFile {
   fileType: FileCategory;
   url: string;
   category: MediaCategory;
+  /** Board purpose label (Before/After/Extra/Completion). Null/undefined = needs categorization. */
+  purpose?: "Before" | "After" | "Extra" | "Completion" | null;
   /** True when media is a legacy Before/After/Completion column (not deletable). */
   isLegacy?: boolean;
+  /** 0–100 while uploading; undefined when idle/complete. */
+  progress?: number;
+  uploadStatus?: "uploading" | "failed" | "done";
+  errorMessage?: string;
 }
 
 export const MEDIA_CATEGORIES: MediaCategory[] = [
diff --git a/src/domain/work-orders/types/work-order-table-row.ts b/src/domain/work-orders/types/work-order-table-row.ts
index 4bcb4b60..ca435096 100644
--- a/src/domain/work-orders/types/work-order-table-row.ts
+++ b/src/domain/work-orders/types/work-order-table-row.ts
@@ -12,6 +12,8 @@ export interface WorkOrderTableRow {
   dispatcherId: string;
   dispatcherName: string;
   scheduledOn: string;
+  /** Work completed date (API CompletedDate); distinct from scheduledOn. */
+  completedDate: string;
   targetWeek: string;
   dayGroup: string;
   dayLabel: string;
diff --git a/src/domain/work-orders/use-cases/use-work-order-mutations.ts b/src/domain/work-orders/use-cases/use-work-order-mutations.ts
index 82667f19..58ae0685 100644
--- a/src/domain/work-orders/use-cases/use-work-order-mutations.ts
+++ b/src/domain/work-orders/use-cases/use-work-order-mutations.ts
@@ -38,7 +38,7 @@ function invalidateBoardDetail(
   void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.detail(workOrderId) });
 }
 
-interface AddWorkOrderCommentInput {
+export interface AddWorkOrderCommentInput {
   text: string;
   commentType?: "customer" | "internal";
 }
@@ -50,6 +50,13 @@ export interface UpdateWorkOrderCommentInput {
 
 export interface UploadWorkOrderMediaInput {
   file: File;
+  category?: UploadableMediaCategory;
+  signal?: AbortSignal;
+  onProgress?: (percent: number) => void;
+}
+
+export interface UpdateWorkOrderMediaCategoryInput {
+  mediaId: string | number;
   category: UploadableMediaCategory;
 }
 
@@ -191,12 +198,12 @@ export function useUploadWorkOrderMedia(
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: ({ file, category }: UploadWorkOrderMediaInput) =>
-      workOrdersApi.uploadMedia(workOrderId, file, category),
+    mutationFn: ({ file, category, signal, onProgress }: UploadWorkOrderMediaInput) =>
+      workOrdersApi.uploadMedia(workOrderId, file, category, { signal, onProgress }),
     onSuccess: () => {
       invalidateBoardDetail(queryClient, workOrderId);
       invalidateWorkOrders(queryClient);
-      toast.success("File uploaded");
+      toast.success("File uploaded — assign a category");
     },
     onError: (error: Error) => {
       toast.error(error.message || "Failed to upload file");
@@ -204,6 +211,25 @@ export function useUploadWorkOrderMedia(
   });
 }
 
+export function useUpdateWorkOrderMediaCategory(
+  workOrderId: string | number,
+): UseMutationResult<WorkOrderBoardMediaItem, Error, UpdateWorkOrderMediaCategoryInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ mediaId, category }: UpdateWorkOrderMediaCategoryInput) =>
+      workOrdersApi.updateMediaCategory(workOrderId, mediaId, category),
+    onSuccess: () => {
+      invalidateBoardDetail(queryClient, workOrderId);
+      invalidateWorkOrders(queryClient);
+      toast.success("Category saved");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update category");
+    },
+  });
+}
+
 export function useDeleteWorkOrderMedia(
   workOrderId: string | number,
 ): UseMutationResult<void, Error, string | number> {
diff --git a/src/domain/work-orders/use-cases/use-work-order-table-mutations.ts b/src/domain/work-orders/use-cases/use-work-order-table-mutations.ts
index e0026c86..c915a569 100644
--- a/src/domain/work-orders/use-cases/use-work-order-table-mutations.ts
+++ b/src/domain/work-orders/use-cases/use-work-order-table-mutations.ts
@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { toast } from "react-toastify";
 import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
@@ -18,6 +19,7 @@ import type {
 } from "@/domain/work-orders/types/work-order-table-row";
 import { deriveDayFields } from "@/domain/work-orders/utils/table-day-utils";
 import { enrichTableRow } from "@/domain/work-orders/utils/table-filter-utils";
+import { createWorkOrderPatchQueue } from "@/domain/work-orders/utils/work-order-patch-queue";
 import { queryKeys } from "@/infra/query-key/query-key";
 
 export type { WorkOrderTablePatch };
@@ -28,6 +30,65 @@ export type WorkOrderTablePatchHandlers = {
   getRow?: (id: string | number) => WorkOrderTableRow | undefined;
 };
 
+type PatchResult =
+  { kind: "local"; patch: WorkOrderTablePatch } | { kind: "board"; row: WorkOrderTableRow };
+
+async function applyBoardFieldOps(
+  id: string | number,
+  patch: WorkOrderTablePatch,
+  getRow: ((id: string | number) => WorkOrderTableRow | undefined) | undefined,
+): Promise<WorkOrderTableRow> {
+  const ops = expandTablePatchToBoardFieldOps(patch);
+  if (ops.length === 0) {
+    throw new BoardPatchValidationError(
+      "NoPersistableFields",
+      "These changes cannot be saved on the board. Refresh and edit a supported field.",
+    );
+  }
+
+  const current = getRow?.(id);
+  if (!current?.rowVersion) {
+    throw new Error("Missing work order version for board patch. Refresh and retry.");
+  }
+
+  let latest = current;
+  let completedOps = 0;
+  for (const op of ops) {
+    try {
+      latest = await workOrdersApi.patchBoardField(id, buildBoardPatchPayload(op, latest));
+      completedOps += 1;
+    } catch (error) {
+      if (completedOps > 0) {
+        const field = op.field;
+        const partial = new Error(
+          `Schedule update partially saved (${completedOps}/${ops.length} fields). Failed on "${field}": ${
+            error instanceof Error ? error.message : "Unknown error"
+          }`,
+        );
+        (partial as Error & { partialRow?: WorkOrderTableRow }).partialRow = latest;
+        throw partial;
+      }
+      throw error;
+    }
+  }
+
+  return latest;
+}
+
+/** Board fields (including completedDate) use PATCH …/board — never legacy EditWorkorder. */
+export async function runWorkOrderTablePatch(
+  id: string | number,
+  patch: WorkOrderTablePatch,
+  getRow: ((id: string | number) => WorkOrderTableRow | undefined) | undefined,
+): Promise<PatchResult> {
+  if (isLocalOnlyTablePatch(patch)) {
+    return { kind: "local", patch };
+  }
+
+  const boardRow = await applyBoardFieldOps(id, patch, getRow);
+  return { kind: "board", row: boardRow };
+}
+
 export function useWorkOrderTableMutations(
   onPatchOrHandlers:
     ((id: string | number, patch: WorkOrderTablePatch) => void) | WorkOrderTablePatchHandlers,
@@ -44,53 +105,15 @@ export function useWorkOrderTableMutations(
 
   const { onPatch, clearPatch, getRow } = handlers;
   const queryClient = useQueryClient();
+  const enqueuePatch = useMemo(() => createWorkOrderPatchQueue(), []);
 
   const invalidate = () => {
     void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });
   };
 
   const patchMutation = useMutation({
-    mutationFn: async ({ id, patch }: { id: string | number; patch: WorkOrderTablePatch }) => {
-      if (isLocalOnlyTablePatch(patch)) {
-        return { kind: "local" as const, patch };
-      }
-
-      const ops = expandTablePatchToBoardFieldOps(patch);
-      if (ops.length === 0) {
-        throw new BoardPatchValidationError(
-          "NoPersistableFields",
-          "These changes cannot be saved on the board. Refresh and edit a supported field.",
-        );
-      }
-
-      const current = getRow?.(id);
-      if (!current?.rowVersion) {
-        throw new Error("Missing work order version for board patch. Refresh and retry.");
-      }
-
-      let latest = current;
-      let completedOps = 0;
-      for (const op of ops) {
-        try {
-          latest = await workOrdersApi.patchBoardField(id, buildBoardPatchPayload(op, latest));
-          completedOps += 1;
-        } catch (error) {
-          if (completedOps > 0) {
-            const field = op.field;
-            const partial = new Error(
-              `Schedule update partially saved (${completedOps}/${ops.length} fields). Failed on "${field}": ${
-                error instanceof Error ? error.message : "Unknown error"
-              }`,
-            );
-            (partial as Error & { partialRow?: WorkOrderTableRow }).partialRow = latest;
-            throw partial;
-          }
-          throw error;
-        }
-      }
-
-      return { kind: "board" as const, row: latest };
-    },
+    mutationFn: ({ id, patch }: { id: string | number; patch: WorkOrderTablePatch }) =>
+      enqueuePatch(id, () => runWorkOrderTablePatch(id, patch, getRow)),
     onMutate: async ({ id, patch }) => {
       onPatch(id, patch);
     },
@@ -123,12 +146,29 @@ export function useWorkOrderTableMutations(
     },
   });
 
-  const patchField = (id: string | number, patch: WorkOrderTablePatch) => {
-    patchMutation.mutate({ id, patch });
+  const patchField = (
+    id: string | number,
+    patch: WorkOrderTablePatch,
+    options?: {
+      onSuccess?: () => void;
+      onError?: (error: Error) => void;
+    },
+  ) => {
+    patchMutation.mutate(
+      { id, patch },
+      {
+        onSuccess: () => options?.onSuccess?.(),
+        onError: (error) => options?.onError?.(error),
+      },
+    );
   };
 
+  const patchFieldAsync = (id: string | number, patch: WorkOrderTablePatch) =>
+    patchMutation.mutateAsync({ id, patch });
+
   return {
     patchField,
+    patchFieldAsync,
     isPending: patchMutation.isPending,
   };
 }
diff --git a/src/domain/work-orders/utils/run-sequential-uploads.ts b/src/domain/work-orders/utils/run-sequential-uploads.ts
new file mode 100644
index 00000000..e641a944
--- /dev/null
+++ b/src/domain/work-orders/utils/run-sequential-uploads.ts
@@ -0,0 +1,24 @@
+/**
+ * Runs file uploads one-by-one while holding an aggregate pending flag true
+ * until every file has settled (success or failure). Avoids relying on a single
+ * TanStack Mutation `isPending`, which can flip false when a later small file
+ * finishes before an earlier large one.
+ */
+export async function runSequentialUploads<TFile>(
+  files: readonly TFile[],
+  upload: (file: TFile) => Promise<unknown>,
+  setPending: (pending: boolean) => void,
+): Promise<void> {
+  if (files.length === 0) {
+    return;
+  }
+
+  setPending(true);
+  try {
+    for (const file of files) {
+      await upload(file);
+    }
+  } finally {
+    setPending(false);
+  }
+}
diff --git a/src/domain/work-orders/utils/slide-over-draft.ts b/src/domain/work-orders/utils/slide-over-draft.ts
index 9c8d897d..4bc824e3 100644
--- a/src/domain/work-orders/utils/slide-over-draft.ts
+++ b/src/domain/work-orders/utils/slide-over-draft.ts
@@ -23,8 +23,7 @@ export const SLIDE_OVER_EDIT_KEYS = [
   "serviceNotes",
   "extraServices",
   "vendorId",
-  "company",
-  "tech",
+  // company/tech are display companions; board persists vendor via vendorId only
   "status",
 ] as const satisfies ReadonlyArray<keyof WorkOrderTableRow>;
 
diff --git a/src/domain/work-orders/utils/work-order-media-limits.ts b/src/domain/work-orders/utils/work-order-media-limits.ts
index 4c513763..d79f45be 100644
--- a/src/domain/work-orders/utils/work-order-media-limits.ts
+++ b/src/domain/work-orders/utils/work-order-media-limits.ts
@@ -1,6 +1,10 @@
 /** Backend RequestSizeLimit for media and completion-doc uploads. */
 export const MAX_WORK_ORDER_MEDIA_BYTES = 30 * 1024 * 1024;
 
+const ALLOWED_MIME_TYPES = new Set(["image/jpeg", "image/png", "video/mp4", "video/quicktime"]);
+
+const ALLOWED_EXTENSIONS = new Set([".jpg", ".jpeg", ".png", ".mp4", ".mov"]);
+
 export function isWorkOrderFileTooLarge(
   file: File,
   maxBytes = MAX_WORK_ORDER_MEDIA_BYTES,
@@ -8,6 +12,19 @@ export function isWorkOrderFileTooLarge(
   return file.size > maxBytes;
 }
 
+export function isWorkOrderMediaTypeAllowed(file: File): boolean {
+  const mimeOk = Boolean(file.type) && ALLOWED_MIME_TYPES.has(file.type.toLowerCase());
+  const name = file.name.toLowerCase();
+  const dot = name.lastIndexOf(".");
+  const ext = dot >= 0 ? name.slice(dot) : "";
+  const extOk = ALLOWED_EXTENSIONS.has(ext);
+  return mimeOk || extOk;
+}
+
+export function workOrderMediaAcceptAttribute(): string {
+  return "image/jpeg,image/png,video/mp4,video/quicktime,.jpg,.jpeg,.png,.mp4,.mov";
+}
+
 export function formatMediaSizeLimit(maxBytes = MAX_WORK_ORDER_MEDIA_BYTES): string {
   return `${Math.round(maxBytes / (1024 * 1024))} MB`;
 }
diff --git a/src/domain/work-orders/utils/work-order-patch-queue.ts b/src/domain/work-orders/utils/work-order-patch-queue.ts
new file mode 100644
index 00000000..caf2e217
--- /dev/null
+++ b/src/domain/work-orders/utils/work-order-patch-queue.ts
@@ -0,0 +1,20 @@
+/**
+ * Serializes async work per work-order id so concurrent patches (e.g. a completion-doc
+ * status save firing alongside a completed-date save) never race two overlapping
+ * get-then-update round trips against the same record. Each call for a given id waits
+ * for the previous one to settle before starting its own fetch-and-update cycle.
+ */
+export function createWorkOrderPatchQueue() {
+  const chains = new Map<string, Promise<unknown>>();
+
+  return function enqueue<T>(id: string | number, run: () => Promise<T>): Promise<T> {
+    const key = String(id);
+    const previous = chains.get(key) ?? Promise.resolve();
+    const settled = previous.catch(() => undefined).then(run);
+    chains.set(
+      key,
+      settled.catch(() => undefined),
+    );
+    return settled;
+  };
+}
diff --git a/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx b/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
index 2e9f8f1f..e083f352 100644
--- a/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
+++ b/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
@@ -5,7 +5,6 @@ import { useController } from "react-hook-form";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const rosterGet = vi.fn();
-const saveMutate = vi.fn();
 
 vi.mock("@/domain/vendors/api/vendor-company-roster-api", () => ({
   vendorCompanyRosterApi: { get: (...args: unknown[]) => rosterGet(...args) },
@@ -29,10 +28,7 @@ vi.mock("@/domain/vendors/use-cases/use-save-vendor-company-roster", async () =>
   const actual = await vi.importActual<
     typeof import("@/domain/vendors/use-cases/use-save-vendor-company-roster")
   >("@/domain/vendors/use-cases/use-save-vendor-company-roster");
-  return {
-    ...actual,
-    useSaveVendorCompanyRoster: () => ({ mutate: saveMutate, isPending: false }),
-  };
+  return { ...actual, useSaveVendorCompanyRoster: () => ({ mutate: vi.fn(), isPending: false }) };
 });
 
 import { useVendorRosterForm } from "@/app/(protected)/vendors/_components/use-vendor-roster-form";
@@ -105,7 +101,6 @@ function deferRoster(): {
 describe("useVendorRosterForm load-error handling", () => {
   beforeEach(() => {
     rosterGet.mockReset();
-    saveMutate.mockReset();
   });
 
   it("shows a safe retryable error when selecting an existing company fetch is rejected", async () => {
@@ -201,44 +196,6 @@ describe("useVendorRosterForm load-error handling", () => {
   });
 });
 
-describe("useVendorRosterForm prototype defaults", () => {
-  it("does not persist the prototype's untouched optional technician card", () => {
-    const { result } = renderHook(
-      () => useVendorRosterForm({ mode: "create", startWithTechnician: true }),
-      { wrapper: makeWrapper(createClient()) },
-    );
-
-    act(() => {
-      result.current.submit({
-        name: "Independent Vendor LLC",
-        companyPhone: "(314) 555-0199",
-        email: "",
-        address: "",
-        city: "",
-        state: "",
-        zip: "",
-        googleMapsUrl: "",
-        notes: "",
-        technicians: [
-          {
-            contactName: "",
-            phone: "",
-            email: "",
-            preferredContact: "Phone",
-            tradeSpecialties: "",
-            isActive: true,
-          },
-        ],
-      });
-    });
-
-    expect(saveMutate).toHaveBeenCalledWith(
-      expect.objectContaining({ values: expect.objectContaining({ technicians: [] }) }),
-      expect.any(Object),
-    );
-  });
-});
-
 describe("useVendorRosterForm stale-selection handling", () => {
   beforeEach(() => {
     rosterGet.mockReset();
diff --git a/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx b/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx
index df329a4a..a55ddaf0 100644
--- a/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx
+++ b/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx
@@ -49,11 +49,11 @@ function rosterWith(technicians: Array<Record<string, unknown>>) {
   };
 }
 
-describe("VendorDetailDrawer selected-technician display", () => {
+describe("VendorDetailDrawer preferred-contact display", () => {
   it("renders no preference label when preferredContact is absent", () => {
     useVendorCompanyRoster.mockReturnValue(
       rosterWith([
-        { id: 1, contactName: "Adam", phone: "314-555-0198", isActive: true, totalJobs: 5 },
+        { id: 7, contactName: "Adam", phone: "314-555-0198", isActive: true, totalJobs: 5 },
       ]),
     );
 
@@ -62,15 +62,15 @@ describe("VendorDetailDrawer selected-technician display", () => {
       withAuth: false,
     });
 
-    expect(screen.getByRole("heading", { level: 2, name: "Adam" })).toBeInTheDocument();
+    expect(screen.getByText("Adam")).toBeInTheDocument();
     expect(screen.queryByText(/^Prefers/)).not.toBeInTheDocument();
   });
 
-  it("keeps the retired preferred-contact value out of the detail view", () => {
+  it("renders the preference label when an explicit preferredContact is present", () => {
     useVendorCompanyRoster.mockReturnValue(
       rosterWith([
         {
-          id: 1,
+          id: 7,
           contactName: "Adam",
           phone: "314-555-0198",
           preferredContact: "Email",
@@ -85,52 +85,6 @@ describe("VendorDetailDrawer selected-technician display", () => {
       withAuth: false,
     });
 
-    expect(screen.getByRole("heading", { level: 2, name: "Adam" })).toBeInTheDocument();
-    expect(screen.queryByText(/^Prefers/)).not.toBeInTheDocument();
-  });
-
-  it("falls back to the clicked row when the roster has no matching stable id", () => {
-    useVendorCompanyRoster.mockReturnValue(
-      rosterWith([
-        {
-          id: 7,
-          contactName: "Adam Whyte",
-          phone: "999-999-9999",
-          isActive: true,
-          totalJobs: 99,
-        },
-      ]),
-    );
-
-    renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
-      route: "/vendors",
-      withAuth: false,
-    });
-
-    expect(screen.getByText("0")).toBeInTheDocument();
-    expect(screen.queryByText("999-999-9999")).not.toBeInTheDocument();
-  });
-
-  it("does not expose a status control for a different technician", () => {
-    useVendorCompanyRoster.mockReturnValue(
-      rosterWith([
-        {
-          id: 7,
-          contactName: "Different Technician",
-          phone: "314-555-0101",
-          email: "",
-          tradeSpecialties: "Plumbing",
-          isActive: true,
-          totalJobs: 10,
-        },
-      ]),
-    );
-
-    renderWithProviders(
-      <VendorDetailDrawer open={true} vendor={vendor} startInEdit={true} onClose={vi.fn()} />,
-      { route: "/vendors", withAuth: false },
-    );
-
-    expect(screen.queryByRole("switch", { name: "Active status" })).not.toBeInTheDocument();
+    expect(screen.getByText("Prefers Email")).toBeInTheDocument();
   });
 });
diff --git a/src/test/app/(protected)/vendors/vendors-list.test.tsx b/src/test/app/(protected)/vendors/vendors-list.test.tsx
index a5fd7a64..64c71c69 100644
--- a/src/test/app/(protected)/vendors/vendors-list.test.tsx
+++ b/src/test/app/(protected)/vendors/vendors-list.test.tsx
@@ -1,14 +1,21 @@
-import { screen, within } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import VendorsListPage from "@/app/(protected)/vendors/index";
-import type { VendorCompanyRoster, VendorListItem } from "@/domain/vendors/types/vendor";
+import type { VendorListItem } from "@/domain/vendors/types/vendor";
 import { renderWithProviders } from "@/test/test-utils";
 
 const useVendorsList = vi.fn();
 const useVendorCompanyRoster = vi.fn();
 const useVendorDeactivationImpact = vi.fn();
 const mutate = vi.fn();
+const navigate = vi.fn();
+
+vi.mock("react-router", async () => {
+  const actual = await vi.importActual("react-router");
+  return { ...actual, useNavigate: () => navigate };
+});
+
 vi.mock("@/domain/vendors/use-cases/use-vendors-list", () => ({
   useVendorsList: (...args: unknown[]) => useVendorsList(...args),
 }));
@@ -54,32 +61,6 @@ const inactiveVendor = {
   isActive: false,
 };
 
-const activeRoster: VendorCompanyRoster = {
-  companyId: "co-1",
-  rowVersion: "rv-1",
-  name: "Gateway Plumbing",
-  companyPhone: "(314) 555-0100",
-  email: "dispatch@gatewayplumbing.com",
-  address: "",
-  city: "St. Louis",
-  state: "MO",
-  zip: "",
-  googleMapsUrl: "",
-  notes: "",
-  technicians: [
-    {
-      id: 1,
-      contactName: "Adam Whyte",
-      phone: "(314) 555-0198",
-      email: "dispatch@gatewayplumbing.com",
-      preferredContact: "Email",
-      tradeSpecialties: "Backflow Preventers",
-      isActive: true,
-      totalJobs: 0,
-    },
-  ],
-};
-
 function result(items: VendorListItem[], totalCount: number) {
   return {
     data: { items, totalCount, page: 1, pageSize: 12 },
@@ -90,13 +71,7 @@ function result(items: VendorListItem[], totalCount: number) {
 }
 
 function setupDefaults() {
-  useVendorCompanyRoster.mockReturnValue({
-    data: undefined,
-    isLoading: false,
-    isError: false,
-    error: null,
-    refetch: vi.fn(),
-  });
+  useVendorCompanyRoster.mockReturnValue({ data: undefined, isLoading: false, error: null });
   useVendorDeactivationImpact.mockReturnValue({
     data: undefined,
     isLoading: false,
@@ -105,7 +80,7 @@ function setupDefaults() {
 }
 
 describe("VendorsListPage", () => {
-  it("renders prototype-aligned status and two row actions in both tabs", async () => {
+  it("renders prototype-aligned status tabs and location, then hides deactivation for inactive rows", async () => {
     setupDefaults();
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], params.isActive ? 1 : 1);
@@ -116,20 +91,11 @@ describe("VendorsListPage", () => {
 
     expect(screen.getByRole("heading", { name: "Vendors / Technicians" })).toBeInTheDocument();
     expect(screen.getByText("St. Louis, MO")).toBeInTheDocument();
-    expect(screen.getByRole("columnheader", { name: "Status" })).toBeInTheDocument();
-    expect(screen.getByRole("cell", { name: "Active" })).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: "View vendor Gateway Plumbing" }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }),
-    ).toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: "Deactivate vendor" })).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Deactivate vendor" })).toBeInTheDocument();
 
     await userEvent.click(screen.getByRole("tab", { name: "Inactive (1)" }));
 
     expect(screen.getByText("Drain Cleaning Bros")).toBeInTheDocument();
-    expect(screen.getByRole("cell", { name: "Inactive" })).toBeInTheDocument();
     expect(screen.queryByRole("button", { name: "Deactivate vendor" })).not.toBeInTheDocument();
   });
 
@@ -148,18 +114,39 @@ describe("VendorsListPage", () => {
 
     renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
 
-    expect(screen.getByText(/25 active technicians/)).toBeInTheDocument();
-    expect(screen.queryByText(/3 active technicians/)).not.toBeInTheDocument();
+    expect(screen.getByText(/25 active vendor entries/)).toBeInTheDocument();
+    expect(screen.queryByText(/3 active vendor entries/)).not.toBeInTheDocument();
   });
 
   it("opens the detail drawer when a row is clicked or activated by keyboard", async () => {
     setupDefaults();
     useVendorCompanyRoster.mockReturnValue({
-      data: activeRoster,
+      data: {
+        companyId: "co-1",
+        rowVersion: "rv-1",
+        name: "Gateway Plumbing",
+        companyPhone: "(314) 555-0198",
+        email: "dispatch@gatewayplumbing.com",
+        address: "",
+        city: "St. Louis",
+        state: "MO",
+        zip: "",
+        googleMapsUrl: "",
+        notes: "",
+        technicians: [
+          {
+            id: 1,
+            contactName: "Adam Whyte",
+            phone: "(314) 555-0198",
+            email: "dispatch@gatewayplumbing.com",
+            preferredContact: "Email",
+            tradeSpecialties: "Backflow Preventers",
+            isActive: true,
+          },
+        ],
+      },
       isLoading: false,
-      isError: false,
       error: null,
-      refetch: vi.fn(),
     });
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], 1);
@@ -174,18 +161,11 @@ describe("VendorsListPage", () => {
     row.focus();
     await userEvent.keyboard("{Enter}");
 
-    expect(screen.getByRole("heading", { level: 2, name: "Adam Whyte" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "Gateway Plumbing" })).toBeInTheDocument();
   });
 
   it("blocks deactivation when the preflight reports open work orders", async () => {
     setupDefaults();
-    useVendorCompanyRoster.mockReturnValue({
-      data: activeRoster,
-      isLoading: false,
-      isError: false,
-      error: null,
-      refetch: vi.fn(),
-    });
     useVendorDeactivationImpact.mockReturnValue({
       data: {
         vendorId: 1,
@@ -209,8 +189,7 @@ describe("VendorsListPage", () => {
 
     renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
 
-    await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
-    await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
+    await userEvent.click(screen.getByRole("button", { name: "Deactivate vendor" }));
 
     expect(
       screen.getByText(/cannot be deactivated because it still has open work orders/),
@@ -220,51 +199,9 @@ describe("VendorsListPage", () => {
     expect(mutate).not.toHaveBeenCalled();
   });
 
-  it("preserves inline edits when deactivation is cancelled", async () => {
+  it("navigates to the vendor edit route when the table Edit control is clicked", async () => {
     setupDefaults();
-    useVendorCompanyRoster.mockReturnValue({
-      data: activeRoster,
-      isLoading: false,
-      isError: false,
-      error: null,
-      refetch: vi.fn(),
-    });
-    useVendorDeactivationImpact.mockReturnValue({
-      data: { vendorId: 1, canDeactivate: true, openWorkOrders: [] },
-      isLoading: false,
-      error: null,
-    });
-    useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
-      if (params.pageSize === 1) return result([], 1);
-      return params.isActive ? result([activeVendor], 1) : result([], 0);
-    });
-
-    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
-
-    await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
-    const company = screen.getByRole("textbox", { name: "Company" });
-    await userEvent.clear(company);
-    await userEvent.type(company, "Draft Company Name");
-    await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
-    await userEvent.click(
-      within(screen.getByRole("dialog", { name: "Deactivate Vendor" })).getByRole("button", {
-        name: "Cancel",
-      }),
-    );
-
-    expect(company).toBeInTheDocument();
-    expect(company).toHaveValue("Draft Company Name");
-  });
-
-  it("opens inline edit when the table Edit control is clicked", async () => {
-    setupDefaults();
-    useVendorCompanyRoster.mockReturnValue({
-      data: activeRoster,
-      isLoading: false,
-      isError: false,
-      error: null,
-      refetch: vi.fn(),
-    });
+    navigate.mockClear();
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], 1);
       return params.isActive ? result([activeVendor], 1) : result([], 0);
@@ -274,20 +211,16 @@ describe("VendorsListPage", () => {
 
     await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
 
-    expect(screen.getByRole("button", { name: "Save changes" })).toBeInTheDocument();
-    expect(screen.getByRole("textbox", { name: "Company" })).toHaveValue("Gateway Plumbing");
+    expect(navigate).toHaveBeenCalledWith("/vendors/edit/1");
+    expect(
+      screen.queryByRole("heading", { level: 2, name: "Gateway Plumbing" }),
+    ).not.toBeInTheDocument();
   });
 
-  it("opens inline company edit when the row has no vendor id", async () => {
+  it("navigates to the company route when editing a vendor without a vendor id", async () => {
     setupDefaults();
+    navigate.mockClear();
     const companyOnlyVendor = { ...activeVendor, id: null, companyId: "co-9" };
-    useVendorCompanyRoster.mockReturnValue({
-      data: { ...activeRoster, companyId: "co-9", technicians: [] },
-      isLoading: false,
-      isError: false,
-      error: null,
-      refetch: vi.fn(),
-    });
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], 1);
       return params.isActive ? result([companyOnlyVendor], 1) : result([], 0);
@@ -297,7 +230,6 @@ describe("VendorsListPage", () => {
 
     await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
 
-    expect(screen.getByRole("button", { name: "Save changes" })).toBeInTheDocument();
-    expect(screen.getByRole("textbox", { name: "Company" })).toHaveValue("Gateway Plumbing");
+    expect(navigate).toHaveBeenCalledWith("/vendors/company/co-9");
   });
 });
diff --git a/src/test/app/(protected)/workorders/comp-doc-dialog-completion-contract.test.tsx b/src/test/app/(protected)/workorders/comp-doc-dialog-completion-contract.test.tsx
new file mode 100644
index 00000000..ff9d6ef2
--- /dev/null
+++ b/src/test/app/(protected)/workorders/comp-doc-dialog-completion-contract.test.tsx
@@ -0,0 +1,229 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { CompDocDialog } from "@/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+vi.mock("@/domain/locations/use-cases/use-location-detail", () => ({
+  useLocationDetail: () => ({ data: undefined }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderBoardDetail: () => ({ data: undefined, isLoading: false }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-mutations", () => ({
+  useUploadCompletionDoc: () => ({ mutate: vi.fn(), isPending: false }),
+}));
+
+vi.mock("react-toastify", () => ({
+  toast: { error: vi.fn(), success: vi.fn() },
+}));
+
+vi.mock("@/app/(protected)/workorders/_components/comp-doc/comp-doc-draft-toast", () => ({
+  showCompDocDraftSavedToast: vi.fn(),
+}));
+
+const SCHEDULED_ON = "2026-06-01";
+
+function baseRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 42,
+    woNumber: "WO-42",
+    site: "SEA1",
+    type: "PM",
+    dispatcherId: "u1",
+    dispatcherName: "Dispatcher",
+    scheduledOn: SCHEDULED_ON,
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "",
+    dayLabel: "",
+    location: "Seattle",
+    locationId: "mock-loc-1",
+    pm: "HVAC",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "",
+    company: "Vendor Co",
+    tech: "Tech One",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Scheduled",
+    docStatus: "No",
+    pocName: "Amazon Rep",
+    pocPhone: "",
+    pocNotes: "",
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "PM — SEA1",
+    priority: "Sev 3",
+    primaryDispatchId: null,
+    rowVersion: "",
+    dispatchRowVersion: "",
+    flagColor: null,
+    ...overrides,
+  };
+}
+
+describe("CompDocDialog Save Draft / Generate completion contract", () => {
+  const onSave = vi.fn();
+  const onDateCompletedChange = vi.fn();
+
+  beforeEach(() => {
+    onSave.mockReset();
+    onDateCompletedChange.mockReset();
+  });
+
+  function renderDialog(row: WorkOrderTableRow) {
+    // Mirrors board wiring: only completedDate / docStatus — never scheduledOn or lifecycle.
+    const patches: Array<Partial<WorkOrderTableRow>> = [];
+    const client = new QueryClient({
+      defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+    });
+
+    render(
+      <QueryClientProvider client={client}>
+        <CompDocDialog
+          row={row}
+          open
+          onOpenChange={vi.fn()}
+          onSave={async (data, status) => {
+            await onSave(data, status);
+            patches.push({ docStatus: status });
+          }}
+          onDateCompletedChange={async (date) => {
+            await onDateCompletedChange(date);
+            patches.push({ completedDate: date });
+          }}
+        />
+      </QueryClientProvider>,
+    );
+
+    return { patches };
+  }
+
+  function changeDateCompleted(value: string) {
+    const dateInput = document.querySelector('input[type="date"]');
+    expect(dateInput).not.toBeNull();
+    fireEvent.change(dateInput!, { target: { value } });
+  }
+
+  it("Save draft emits completedDate without writing scheduledOn or lifecycle Completed", async () => {
+    const row = baseRow();
+    const { patches } = renderDialog(row);
+
+    changeDateCompleted("2026-07-15");
+    fireEvent.click(screen.getByRole("button", { name: /save draft/i }));
+
+    await waitFor(() => {
+      expect(onDateCompletedChange).toHaveBeenCalledWith("2026-07-15");
+    });
+    expect(onSave).toHaveBeenCalledWith(expect.any(Object), "No");
+    expect(patches).toEqual([{ completedDate: "2026-07-15" }, { docStatus: "No" }]);
+    expect(patches.some((patch) => "scheduledOn" in patch)).toBe(false);
+    expect(patches.some((patch) => patch.status === "Completed")).toBe(false);
+    expect(row.scheduledOn).toBe(SCHEDULED_ON);
+    expect(row.status).toBe("Scheduled");
+  });
+
+  it("Generate emits completedDate and doc Yes without auto-setting lifecycle Completed", async () => {
+    const row = baseRow({ completedDate: "2026-07-01" });
+    const { patches } = renderDialog(row);
+
+    changeDateCompleted("2026-07-20");
+    fireEvent.click(screen.getByRole("button", { name: /^generate$/i }));
+
+    await waitFor(() => {
+      expect(onDateCompletedChange).toHaveBeenCalledWith("2026-07-20");
+    });
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({ generatedAt: expect.any(String) }),
+      "Yes",
+    );
+    expect(patches).toEqual([{ completedDate: "2026-07-20" }, { docStatus: "Yes" }]);
+    expect(patches.some((patch) => "scheduledOn" in patch)).toBe(false);
+    expect(patches.some((patch) => patch.status === "Completed")).toBe(false);
+    expect(row.scheduledOn).toBe(SCHEDULED_ON);
+    expect(row.status).toBe("Scheduled");
+  });
+
+  it("Generate keeps Draft and skips docStatus Yes when completedDate patch fails", async () => {
+    onDateCompletedChange.mockRejectedValueOnce(new Error("conflict"));
+    const row = baseRow({ completedDate: "2026-07-01" });
+    renderDialog(row);
+
+    changeDateCompleted("2026-07-20");
+    fireEvent.click(screen.getByRole("button", { name: /^generate$/i }));
+
+    await waitFor(() => {
+      expect(onDateCompletedChange).toHaveBeenCalledWith("2026-07-20");
+    });
+    expect(onSave).not.toHaveBeenCalled();
+    expect(screen.getByRole("button", { name: /^generate$/i })).toBeInTheDocument();
+  });
+
+  it("Generate never writes docStatus Yes after a successful status-capable save when date fails first", async () => {
+    // Regression for the prior order (status then date): if date fails, Yes must not have been sent.
+    // With prerequisites-first ordering, date failure short-circuits before onSave("Yes").
+    const callOrder: string[] = [];
+    onDateCompletedChange.mockImplementation(async () => {
+      callOrder.push("date");
+      throw new Error("completedDate conflict");
+    });
+    onSave.mockImplementation(async () => {
+      callOrder.push("status");
+    });
+
+    const row = baseRow({ completedDate: "2026-07-01" });
+    renderDialog(row);
+    changeDateCompleted("2026-07-20");
+    fireEvent.click(screen.getByRole("button", { name: /^generate$/i }));
+
+    await waitFor(() => {
+      expect(onDateCompletedChange).toHaveBeenCalled();
+    });
+    expect(callOrder).toEqual(["date"]);
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it("Save draft persists PM comments notes through onSave", async () => {
+    const row = baseRow();
+    renderDialog(row);
+
+    const notes = screen.getByPlaceholderText(/add findings/i);
+    fireEvent.change(notes, { target: { value: "No issues noted" } });
+    fireEvent.click(screen.getByRole("button", { name: /save draft/i }));
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({ notes: "No issues noted" }),
+        "No",
+      );
+    });
+  });
+
+  it("Mark as not required rolls back UI when persist fails", async () => {
+    onSave.mockRejectedValueOnce(new Error("persist failed"));
+    const row = baseRow();
+    renderDialog(row);
+
+    fireEvent.click(screen.getByRole("button", { name: /mark as not required/i }));
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith(expect.any(Object), "NN");
+    });
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: /mark as not required/i })).toBeInTheDocument();
+    });
+    expect(screen.queryByRole("button", { name: /^undo$/i })).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/comp-doc-dialog-footer-exclusive.test.tsx b/src/test/app/(protected)/workorders/comp-doc-dialog-footer-exclusive.test.tsx
new file mode 100644
index 00000000..49ced8be
--- /dev/null
+++ b/src/test/app/(protected)/workorders/comp-doc-dialog-footer-exclusive.test.tsx
@@ -0,0 +1,53 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { CompDocDialogFooter } from "@/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer";
+
+describe("CompDocDialogFooter exclusive states", () => {
+  const pdfInputRef = createRef<HTMLInputElement | null>();
+  const handlers = {
+    onMarkNotRequired: vi.fn(),
+    onSaveDraft: vi.fn(),
+    onGenerate: vi.fn(),
+    onUndo: vi.fn(),
+    onDownloadPdf: vi.fn(),
+    onUploadPdf: vi.fn(),
+  };
+
+  it("does not render draft actions when a signed PDF is on file while docState is still draft", () => {
+    render(
+      <CompDocDialogFooter
+        docState="draft"
+        isDocumentsReadOnly={false}
+        rowVersion="1"
+        isUploading={false}
+        signOffAttachment="https://example.com/doc.pdf"
+        generatedAt=""
+        pdfInputRef={pdfInputRef}
+        {...handlers}
+      />,
+    );
+
+    expect(screen.queryByRole("button", { name: /save draft/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /mark as not required/i })).not.toBeInTheDocument();
+    expect(screen.getByText(/document on file/i)).toBeInTheDocument();
+  });
+
+  it("renders only draft actions for a clean draft without attachment", () => {
+    render(
+      <CompDocDialogFooter
+        docState="draft"
+        isDocumentsReadOnly={false}
+        rowVersion="1"
+        isUploading={false}
+        signOffAttachment={null}
+        generatedAt=""
+        pdfInputRef={pdfInputRef}
+        {...handlers}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: /save draft/i })).toBeInTheDocument();
+    expect(screen.queryByText(/document on file/i)).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/media-upload-modal-api.test.tsx b/src/test/app/(protected)/workorders/media-upload-modal-api.test.tsx
new file mode 100644
index 00000000..402afa30
--- /dev/null
+++ b/src/test/app/(protected)/workorders/media-upload-modal-api.test.tsx
@@ -0,0 +1,114 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MediaUploadModal } from "@/app/(protected)/workorders/_components/media/media-upload-modal";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+const uploadMutateAsync = vi.fn();
+const deleteMutate = vi.fn();
+const categorizeMutate = vi.fn();
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderBoardDetail: () => ({
+    data: {
+      info: { status: "Scheduled" },
+      media: [
+        {
+          id: "11",
+          fileName: "before.jpg",
+          url: "https://example.com/before.jpg",
+          category: "Before",
+          isLegacy: false,
+        },
+      ],
+      comments: [],
+      audit: [],
+      completion: {},
+    },
+    isLoading: false,
+  }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-mutations", () => ({
+  useUploadWorkOrderMedia: () => ({
+    mutate: vi.fn(),
+    mutateAsync: uploadMutateAsync,
+    isPending: false,
+  }),
+  useUpdateWorkOrderMediaCategory: () => ({ mutate: categorizeMutate, isPending: false }),
+  useDeleteWorkOrderMedia: () => ({ mutate: deleteMutate, isPending: false }),
+}));
+
+function baseRow(): WorkOrderTableRow {
+  return {
+    id: 7,
+    woNumber: "WO-7",
+    site: "SEA1",
+    type: "Emergency",
+    dispatcherId: "u1",
+    dispatcherName: "Dispatcher",
+    scheduledOn: "2026-06-01",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "",
+    dayLabel: "",
+    location: "Seattle",
+    locationId: "loc-1",
+    pm: "",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "",
+    company: "",
+    tech: "",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Scheduled",
+    docStatus: "",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 1,
+    title: "Emergency",
+    priority: "Sev 1",
+    primaryDispatchId: null,
+    rowVersion: "",
+    dispatchRowVersion: "",
+    flagColor: null,
+  };
+}
+
+describe("MediaUploadModal API wiring", () => {
+  beforeEach(() => {
+    uploadMutateAsync.mockReset();
+    deleteMutate.mockReset();
+    categorizeMutate.mockReset();
+  });
+
+  it("renders persisted media from board detail (refresh-safe)", async () => {
+    const client = new QueryClient({
+      defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+    });
+
+    render(
+      <QueryClientProvider client={client}>
+        <MediaUploadModal row={baseRow()} open onOpenChange={vi.fn()} />
+      </QueryClientProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("before.jpg")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Photos & Videos")).toBeInTheDocument();
+    expect(screen.getByText(/categorize after upload/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/category for before\.jpg/i)).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-media-upload-session.test.tsx b/src/test/app/(protected)/workorders/use-media-upload-session.test.tsx
new file mode 100644
index 00000000..4ac689fc
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-media-upload-session.test.tsx
@@ -0,0 +1,206 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useMediaUploadSession } from "@/app/(protected)/workorders/_hooks/use-media-upload-session";
+
+function makeFile(name = "photo.jpg") {
+  return new File(["bytes"], name, { type: "image/jpeg" });
+}
+
+describe("useMediaUploadSession retry / cancel", () => {
+  it("retry upserts the same localId instead of appending a duplicate", async () => {
+    let rejectFirst!: (error: Error) => void;
+    const uploadMutateAsync = vi
+      .fn()
+      .mockImplementationOnce(
+        () =>
+          new Promise((_resolve, reject) => {
+            rejectFirst = reject;
+          }),
+      )
+      .mockImplementation(() => new Promise(() => undefined));
+
+    const { result } = renderHook(() => useMediaUploadSession(undefined, uploadMutateAsync));
+    const localId = "local-1";
+    const file = makeFile();
+
+    act(() => {
+      result.current.startUploads([
+        {
+          localId,
+          file,
+          onProgress: () => undefined,
+        },
+      ]);
+    });
+
+    await waitFor(() => {
+      expect(result.current.uploads).toHaveLength(1);
+    });
+
+    const firstSignal = uploadMutateAsync.mock.calls[0]?.[0]?.signal as AbortSignal;
+
+    act(() => {
+      rejectFirst(new Error("network"));
+    });
+
+    await waitFor(() => {
+      expect(result.current.uploads[0]?.uploadStatus).toBe("failed");
+    });
+
+    act(() => {
+      result.current.retryUpload(localId);
+    });
+
+    await waitFor(() => {
+      expect(result.current.uploads).toHaveLength(1);
+      expect(result.current.uploads[0]?.id).toBe(localId);
+      expect(result.current.uploads[0]?.uploadStatus).toBe("uploading");
+    });
+    expect(uploadMutateAsync).toHaveBeenCalledTimes(2);
+    const retrySignal = uploadMutateAsync.mock.calls[1]?.[0]?.signal as AbortSignal;
+    expect(retrySignal).toBeInstanceOf(AbortSignal);
+    expect(retrySignal).not.toBe(firstSignal);
+    expect(retrySignal.aborted).toBe(false);
+  });
+
+  it("fail → retry → cancel aborts the replacement upload and records no success", async () => {
+    let rejectFirst!: (error: Error) => void;
+    let resolveRetry!: (value: unknown) => void;
+    const uploadMutateAsync = vi
+      .fn()
+      .mockImplementationOnce(
+        () =>
+          new Promise((_resolve, reject) => {
+            rejectFirst = reject;
+          }),
+      )
+      .mockImplementation(
+        ({ signal }: { signal?: AbortSignal }) =>
+          new Promise((resolve, reject) => {
+            resolveRetry = resolve;
+            signal?.addEventListener("abort", () => {
+              const error = new Error("aborted");
+              error.name = "AbortError";
+              reject(error);
+            });
+          }),
+      );
+
+    const { result } = renderHook(() => useMediaUploadSession(undefined, uploadMutateAsync));
+    const localId = "local-retry";
+    const file = makeFile("retry.jpg");
+
+    act(() => {
+      result.current.startUploads([
+        {
+          localId,
+          file,
+          onProgress: () => undefined,
+        },
+      ]);
+    });
+
+    act(() => {
+      rejectFirst(new Error("upload failed"));
+    });
+
+    await waitFor(() => {
+      expect(result.current.uploads[0]?.uploadStatus).toBe("failed");
+    });
+
+    act(() => {
+      result.current.retryUpload(localId);
+    });
+
+    await waitFor(() => {
+      expect(result.current.uploads[0]?.uploadStatus).toBe("uploading");
+    });
+
+    const retrySignal = uploadMutateAsync.mock.calls[1]?.[0]?.signal as AbortSignal;
+
+    act(() => {
+      result.current.cancelUpload(localId);
+    });
+
+    await waitFor(() => {
+      expect(result.current.uploads).toHaveLength(0);
+    });
+    expect(retrySignal.aborted).toBe(true);
+    // Cancelling must not leave a successful settle path.
+    expect(() => resolveRetry({})).not.toThrow();
+    await waitFor(() => {
+      expect(result.current.uploads).toHaveLength(0);
+    });
+  });
+
+  it("clears local uploads and aborts in-flight work when the bound WO changes", async () => {
+    const uploadMutateAsync = vi.fn().mockImplementation(
+      ({ signal }: { signal?: AbortSignal }) =>
+        new Promise((_resolve, reject) => {
+          signal?.addEventListener("abort", () => {
+            const error = new Error("aborted");
+            error.name = "AbortError";
+            reject(error);
+          });
+        }),
+    );
+
+    const detailA = {
+      info: { id: 1 },
+      media: [],
+      comments: [],
+      audit: [],
+      completion: {
+        docStatus: "",
+        template: null,
+        signOffName: "",
+        signOffAttachment: "",
+        signOffSignature: "",
+        dispatchSignoffs: [],
+      },
+    } as unknown as Parameters<typeof useMediaUploadSession>[0];
+
+    const detailB = {
+      info: { id: 2 },
+      media: [],
+      comments: [],
+      audit: [],
+      completion: {
+        docStatus: "",
+        template: null,
+        signOffName: "",
+        signOffAttachment: "",
+        signOffSignature: "",
+        dispatchSignoffs: [],
+      },
+    } as unknown as Parameters<typeof useMediaUploadSession>[0];
+
+    const { result, rerender } = renderHook(
+      ({ detail }) => useMediaUploadSession(detail, uploadMutateAsync),
+      { initialProps: { detail: detailA } },
+    );
+
+    act(() => {
+      result.current.startUploads([
+        {
+          localId: "local-wo-a",
+          file: makeFile("a.jpg"),
+          onProgress: () => undefined,
+        },
+      ]);
+    });
+
+    await waitFor(() => {
+      expect(result.current.uploads).toHaveLength(1);
+    });
+
+    const firstSignal = uploadMutateAsync.mock.calls[0]?.[0]?.signal as AbortSignal;
+
+    rerender({ detail: detailB });
+
+    await waitFor(() => {
+      expect(result.current.uploads).toHaveLength(0);
+    });
+    expect(firstSignal.aborted).toBe(true);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-slide-over-media-state.test.tsx b/src/test/app/(protected)/workorders/use-slide-over-media-state.test.tsx
new file mode 100644
index 00000000..c5c03f6c
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-slide-over-media-state.test.tsx
@@ -0,0 +1,142 @@
+import { renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useSlideOverMediaState } from "@/app/(protected)/workorders/_components/detail/use-slide-over-media-state";
+import type { WorkOrderBoardDetail } from "@/domain/work-orders/types/work-order-board-detail";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+function baseInfo(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 100,
+    woNumber: "100",
+    site: "SITE",
+    type: "Emergency",
+    dispatcherId: "d1",
+    dispatcherName: "Alex",
+    scheduledOn: "2026-07-16",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "2026-07-16",
+    dayLabel: "Thu",
+    location: "Main",
+    locationId: 5,
+    pm: "",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "v1",
+    company: "Acme",
+    tech: "Sam",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Incomplete",
+    docStatus: "",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    primaryDispatchId: null,
+    rowVersion: "1",
+    dispatchRowVersion: "",
+    flagColor: null,
+    ...overrides,
+  };
+}
+
+function detailWithMedia(
+  media: WorkOrderBoardDetail["media"],
+  infoOverrides: Partial<WorkOrderTableRow> = {},
+): WorkOrderBoardDetail {
+  return {
+    info: baseInfo(infoOverrides),
+    completion: {
+      docStatus: "",
+      template: null,
+      signOffName: "",
+      signOffAttachment: "",
+      signOffSignature: "",
+      dispatchSignoffs: [],
+    },
+    comments: [],
+    audit: [],
+    media,
+  };
+}
+
+function idleMutation() {
+  return {
+    mutate: vi.fn(),
+    mutateAsync: vi.fn().mockResolvedValue({}),
+    isPending: false,
+  } as never;
+}
+
+describe("useSlideOverMediaState completion filter", () => {
+  it("keeps Before/After/Completion after refetch mapped purpose (not file category)", () => {
+    const detail = detailWithMedia([
+      {
+        id: "1",
+        category: "Before",
+        url: "https://cdn.example.com/before.jpg",
+        fileName: "before.jpg",
+        uploadedAt: "2026-07-15T18:00:00.0000000Z",
+        isLegacy: false,
+      },
+      {
+        id: "2",
+        category: "After",
+        url: "https://cdn.example.com/after.jpg",
+        fileName: "after.jpg",
+        uploadedAt: "2026-07-15T18:00:00.0000000Z",
+        isLegacy: false,
+      },
+      {
+        id: "3",
+        category: "Completion",
+        url: "https://cdn.example.com/completion.pdf",
+        fileName: "completion.pdf",
+        uploadedAt: "2026-07-15T18:00:00.0000000Z",
+        isLegacy: false,
+      },
+      {
+        id: "4",
+        category: "Extra",
+        url: "https://cdn.example.com/extra.pdf",
+        fileName: "extra.pdf",
+        uploadedAt: "2026-07-15T18:00:00.0000000Z",
+        isLegacy: false,
+      },
+    ]);
+
+    const { result } = renderHook(() =>
+      useSlideOverMediaState({
+        detailForRow: detail,
+        uploadMediaMutation: idleMutation(),
+        deleteMediaMutation: idleMutation(),
+        categorizeMediaMutation: idleMutation(),
+      }),
+    );
+
+    expect(result.current.completionMedia.map((item) => item.purpose)).toEqual([
+      "Before",
+      "After",
+      "Completion",
+    ]);
+    expect(
+      result.current.completionMedia.every((item) =>
+        ["Photo", "Video", "Report", "Other"].includes(item.category),
+      ),
+    ).toBe(true);
+    expect(result.current.extrasUploads).toHaveLength(1);
+    expect(result.current.extrasUploads[0]?.purpose).toBe("Extra");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/work-order-slide-over-failed-save.test.tsx b/src/test/app/(protected)/workorders/work-order-slide-over-failed-save.test.tsx
new file mode 100644
index 00000000..de960548
--- /dev/null
+++ b/src/test/app/(protected)/workorders/work-order-slide-over-failed-save.test.tsx
@@ -0,0 +1,171 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { WorkOrderSlideOver } from "@/app/(protected)/workorders/_components/detail/work-order-slide-over";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+vi.mock("@/providers/auth-context", () => ({
+  useAuthContext: () => ({ user: { id: "u1" } }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderBoardDetail: () => ({
+    data: undefined,
+    isLoading: true,
+    isFetching: true,
+    error: null,
+    refetch: vi.fn(),
+  }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-mutations", () => ({
+  useAddWorkOrderComment: () => ({ mutate: vi.fn(), isPending: false }),
+  useUpdateWorkOrderComment: () => ({ mutate: vi.fn(), isPending: false }),
+  useUploadWorkOrderMedia: () => ({ mutate: vi.fn(), mutateAsync: vi.fn(), isPending: false }),
+  useUpdateWorkOrderMediaCategory: () => ({ mutate: vi.fn(), isPending: false }),
+  useDeleteWorkOrderMedia: () => ({ mutate: vi.fn(), isPending: false }),
+  useUploadCompletionDoc: () => ({ mutate: vi.fn(), isPending: false }),
+}));
+
+vi.mock("@/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab", () => ({
+  SlideOverInfoTab: ({
+    draft,
+    onDraftChange,
+  }: {
+    draft: WorkOrderTableRow;
+    onDraftChange: (patch: Partial<WorkOrderTableRow>) => void;
+  }) => (
+    <label>
+      WO number
+      <input
+        aria-label="WO number"
+        value={draft.woNumber}
+        onChange={(event) => onDraftChange({ woNumber: event.target.value })}
+      />
+    </label>
+  ),
+}));
+
+vi.mock("react-toastify", () => ({ toast: { error: vi.fn(), success: vi.fn() } }));
+
+function baseRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 42,
+    woNumber: "WO-42",
+    site: "SEA1",
+    type: "PM",
+    dispatcherId: "u1",
+    dispatcherName: "Dispatcher",
+    scheduledOn: "2026-07-20",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "07/20",
+    dayLabel: "Mon",
+    location: "Seattle",
+    locationId: "loc-1",
+    pm: "HVAC",
+    serviceNotes: "",
+    extraServices: [],
+    company: "Vendor Co",
+    tech: "Tech",
+    techPhone: "",
+    vendorId: "v1",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Scheduled",
+    docStatus: "No",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "PM — SEA1",
+    priority: "Sev 3",
+    primaryDispatchId: null,
+    rowVersion: "v1",
+    dispatchRowVersion: "",
+    flagColor: null,
+    ...overrides,
+  };
+}
+
+describe("WorkOrderSlideOver failed-save retry (no detail yet)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("keeps draft dirty and Save enabled after optimistic parent row + failed save", async () => {
+    const initial = baseRow();
+    let currentRow = initial;
+    const onSave = vi.fn(
+      (
+        _id: string | number,
+        patch: Partial<WorkOrderTableRow>,
+        options?: { onSuccess?: () => void; onError?: (error: Error) => void },
+      ) => {
+        currentRow = { ...currentRow, ...patch };
+        rerenderWithRow(currentRow);
+        currentRow = initial;
+        rerenderWithRow(currentRow);
+        options?.onError?.(new Error("save failed"));
+      },
+    );
+
+    let rerenderWithRow = (_row: WorkOrderTableRow) => {
+      /* assigned after first render */
+    };
+
+    const view = render(
+      <WorkOrderSlideOver
+        row={currentRow}
+        editMode
+        users={[{ id: "u1", name: "Dispatcher" }]}
+        sites={[{ id: "loc-1", name: "Seattle" }]}
+        vendors={[]}
+        pmTypes={["HVAC"]}
+        allOrders={[currentRow]}
+        onSave={onSave}
+        onOpenCompletionDoc={vi.fn()}
+        onCancelWO={vi.fn()}
+        onClose={vi.fn()}
+      />,
+    );
+
+    rerenderWithRow = (row) => {
+      view.rerender(
+        <WorkOrderSlideOver
+          row={row}
+          editMode
+          users={[{ id: "u1", name: "Dispatcher" }]}
+          sites={[{ id: "loc-1", name: "Seattle" }]}
+          vendors={[]}
+          pmTypes={["HVAC"]}
+          allOrders={[row]}
+          onSave={onSave}
+          onOpenCompletionDoc={vi.fn()}
+          onCancelWO={vi.fn()}
+          onClose={vi.fn()}
+        />,
+      );
+    };
+
+    fireEvent.change(screen.getByLabelText("WO number"), { target: { value: "WO-99" } });
+    expect(screen.getByDisplayValue("WO-99")).toBeInTheDocument();
+
+    const saveButton = screen.getByRole("button", { name: /^save$/i });
+    expect(saveButton).not.toBeDisabled();
+    fireEvent.click(saveButton);
+
+    expect(onSave).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(screen.getByDisplayValue("WO-99")).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: /^save$/i })).not.toBeDisabled();
+    });
+  });
+});
diff --git a/src/test/app/(protected)/workorders/work-orders-advanced-search-wiring.test.tsx b/src/test/app/(protected)/workorders/work-orders-advanced-search-wiring.test.tsx
index ab94481a..a67b9833 100644
--- a/src/test/app/(protected)/workorders/work-orders-advanced-search-wiring.test.tsx
+++ b/src/test/app/(protected)/workorders/work-orders-advanced-search-wiring.test.tsx
@@ -81,6 +81,13 @@ vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
   useWorkOrderVendors: () => ({
     data: [{ companyName: "Vendor Co", email: "real@vendor.com" }],
   }),
+  useWorkOrderBoardDetail: () => ({
+    data: undefined,
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    refetch: vi.fn(),
+  }),
 }));
 
 vi.mock("@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category", () => ({
diff --git a/src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx b/src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx
index 004e96d3..3b96668f 100644
--- a/src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx
+++ b/src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx
@@ -75,6 +75,7 @@ const canceledRow: WorkOrderTableRow = {
   dispatcherId: "u1",
   dispatcherName: "Test Dispatcher",
   scheduledOn: "2026-07-20",
+  completedDate: "",
   targetWeek: "2026-07-20",
   dayGroup: "2026-07-20",
   dayLabel: "Mon",
@@ -134,6 +135,13 @@ vi.mock("@/domain/work-orders/use-cases/use-work-orders-list", () => ({
 vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
   useWorkOrderLocations: () => ({ data: [] }),
   useWorkOrderVendors: () => ({ data: [] }),
+  useWorkOrderBoardDetail: () => ({
+    data: undefined,
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    refetch: vi.fn(),
+  }),
 }));
 
 vi.mock("@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category", () => ({
@@ -197,7 +205,7 @@ describe("WorkOrdersListHeader slice affordances", () => {
 });
 
 describe("WorkOrdersListPage board-core public interface", () => {
-  it("opens New WO wizard on click, enforces step validation, closes, and View navigates to detail", async () => {
+  it("opens New WO wizard on click, enforces step validation, closes, and View opens the slide-over", async () => {
     navigate.mockReset();
 
     renderWithProviders(<WorkOrdersListPage />, { route: "/workorders", withAuth: false });
@@ -216,7 +224,10 @@ describe("WorkOrdersListPage board-core public interface", () => {
     await waitForElementToBeRemoved(() => screen.queryByRole("dialog"));
 
     fireEvent.click(screen.getByRole("button", { name: /view canceled row/i }));
-    expect(navigate).toHaveBeenCalledWith("/workorders/77");
+
+    expect(await screen.findByLabelText("Work order details")).toBeInTheDocument();
+    expect(screen.getAllByText(/WO-77/i).length).toBeGreaterThan(0);
+    expect(navigate).not.toHaveBeenCalled();
   });
 });
 
diff --git a/src/test/domain/work-orders/api/work-orders-api.test.ts b/src/test/domain/work-orders/api/work-orders-api.test.ts
index 9466e814..3df69544 100644
--- a/src/test/domain/work-orders/api/work-orders-api.test.ts
+++ b/src/test/domain/work-orders/api/work-orders-api.test.ts
@@ -164,6 +164,13 @@ describe("workOrdersApi.update", () => {
   });
 });
 
+describe("workOrdersApi completedDate board contract", () => {
+  it("does not expose updateCompletedDate — completedDate uses board PATCH", () => {
+    expect("updateCompletedDate" in workOrdersApi).toBe(false);
+    expect(API_PATHS.workOrder.boardPatch(55)).toBe("workorders/55/board");
+  });
+});
+
 describe("workOrdersApi.fetchDispatchers", () => {
   beforeEach(() => {
     apiGet.mockReset();
diff --git a/src/test/domain/work-orders/mappers/work-order-board-detail-mapper.test.ts b/src/test/domain/work-orders/mappers/work-order-board-detail-mapper.test.ts
index 350df95f..3973cdc5 100644
--- a/src/test/domain/work-orders/mappers/work-order-board-detail-mapper.test.ts
+++ b/src/test/domain/work-orders/mappers/work-order-board-detail-mapper.test.ts
@@ -170,13 +170,40 @@ describe("mapWorkOrderBoardDetail", () => {
       name: "before.jpg",
       url: "https://cdn.example.com/before.jpg",
       category: "Photo",
+      purpose: "Before",
       fileType: "image",
       isLegacy: false,
     });
     expect(files[1]?.category).toBe("Other");
+    expect(files[1]?.purpose).toBe("Extra");
     expect(files[1]?.fileType).toBe("pdf");
   });
 
+  it("maps After and Completion board categories to purpose for completion UI", () => {
+    const after = mapBoardDetailMediaItem({
+      id: 20,
+      category: 2,
+      url: "https://cdn.example.com/after.jpg",
+      fileName: "after.jpg",
+    });
+    const completion = mapBoardDetailMediaItem({
+      id: 21,
+      category: 4,
+      url: "https://cdn.example.com/completion.pdf",
+      fileName: "completion.pdf",
+    });
+    const files = boardMediaItemsToMediaFiles([after, completion]);
+    expect(files[0]).toMatchObject({
+      category: "Photo",
+      purpose: "After",
+    });
+    expect(files[1]).toMatchObject({
+      category: "Report",
+      purpose: "Completion",
+      fileType: "pdf",
+    });
+  });
+
   it("maps numeric category and marks negative ids as legacy", () => {
     const legacy = mapBoardDetailMediaItem({
       id: -1,
diff --git a/src/test/domain/work-orders/use-cases/use-work-order-table-mutations-completed-date.test.ts b/src/test/domain/work-orders/use-cases/use-work-order-table-mutations-completed-date.test.ts
new file mode 100644
index 00000000..b9951795
--- /dev/null
+++ b/src/test/domain/work-orders/use-cases/use-work-order-table-mutations-completed-date.test.ts
@@ -0,0 +1,50 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+const patchBoardField = vi.fn();
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: {
+    getById: vi.fn(),
+    update: vi.fn(),
+    patchBoardField: (...args: unknown[]) => patchBoardField(...args),
+  },
+}));
+
+import { runWorkOrderTablePatch } from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+
+const BASE_ROW = {
+  id: 99,
+  rowVersion: "AAAAAAA=",
+  completedDate: "",
+} as WorkOrderTableRow;
+
+describe("runWorkOrderTablePatch completedDate", () => {
+  beforeEach(() => {
+    patchBoardField.mockReset();
+    patchBoardField.mockResolvedValue({
+      ...BASE_ROW,
+      completedDate: "2026-07-30",
+      rowVersion: "BBBBBBB=",
+    });
+  });
+
+  it("persists completedDate via board PATCH (not EditWorkorder)", async () => {
+    const result = await runWorkOrderTablePatch(
+      99,
+      { completedDate: "2026-07-30" },
+      () => BASE_ROW,
+    );
+
+    expect(patchBoardField).toHaveBeenCalledTimes(1);
+    expect(patchBoardField).toHaveBeenCalledWith(99, {
+      field: "completedDate",
+      value: "2026-07-30",
+      workOrderVersion: "AAAAAAA=",
+    });
+    expect(result).toEqual({
+      kind: "board",
+      row: expect.objectContaining({ completedDate: "2026-07-30" }),
+    });
+  });
+});
diff --git a/src/test/domain/work-orders/use-cases/use-work-order-table-mutations.test.tsx b/src/test/domain/work-orders/use-cases/use-work-order-table-mutations.test.tsx
new file mode 100644
index 00000000..1b992108
--- /dev/null
+++ b/src/test/domain/work-orders/use-cases/use-work-order-table-mutations.test.tsx
@@ -0,0 +1,209 @@
+import type { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type {
+  CompletionDocStatus,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+
+const getById = vi.fn();
+const update = vi.fn();
+const patchBoardField = vi.fn();
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: {
+    getById: (...args: unknown[]) => getById(...args),
+    update: (...args: unknown[]) => update(...args),
+    patchBoardField: (...args: unknown[]) => patchBoardField(...args),
+  },
+}));
+
+vi.mock("react-toastify", () => ({ toast: { error: vi.fn() } }));
+
+import { useWorkOrderTableMutations } from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+
+function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function makeWrapper() {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+  };
+}
+
+type ServerState = {
+  status: string;
+  scheduledDate: string;
+  completedDate: string;
+  docStatus: CompletionDocStatus;
+};
+
+const BASE_SERVER: ServerState = {
+  status: "Open",
+  scheduledDate: "2026-06-01",
+  completedDate: "",
+  docStatus: "No",
+};
+
+const BASE_ROW = {
+  id: 42,
+  woNumber: "WO-42",
+  site: "SEA1",
+  type: "PM",
+  dispatcherId: "d1",
+  dispatcherName: "Dispatcher",
+  scheduledOn: "2026-06-01",
+  completedDate: "",
+  targetWeek: "",
+  dayGroup: "",
+  dayLabel: "",
+  location: "Seattle",
+  locationId: "loc-1",
+  pm: "HVAC",
+  serviceNotes: "",
+  extraServices: [],
+  vendorId: "",
+  company: "",
+  tech: "",
+  techPhone: "",
+  apptStart: "",
+  apptEnd: "",
+  apptTime: "",
+  status: "Incomplete",
+  docStatus: "No",
+  pocName: "",
+  pocPhone: "",
+  pocNotes: "",
+  dueDate: "",
+  rescheduleCount: 0,
+  carriedOver: 0,
+  originalWeek: "",
+  originalDate: "",
+  isPastDue: false,
+  scheduleWeekOnly: false,
+  mediaCount: 0,
+  title: "PM — SEA1",
+  priority: "Sev 3",
+  primaryDispatchId: null,
+  rowVersion: "AAAAAAA=",
+  dispatchRowVersion: "",
+  flagColor: null,
+} as WorkOrderTableRow;
+
+describe("useWorkOrderTableMutations completion-doc persistence", () => {
+  let serverState: ServerState;
+  let events: string[];
+  let rowState: WorkOrderTableRow;
+
+  beforeEach(() => {
+    getById.mockReset();
+    update.mockReset();
+    patchBoardField.mockReset();
+    serverState = { ...BASE_SERVER };
+    rowState = { ...BASE_ROW };
+    events = [];
+
+    patchBoardField.mockImplementation(
+      async (
+        _id: unknown,
+        payload: { field: string; value?: string | null; workOrderVersion: string },
+      ) => {
+        events.push(`boardPatch:${payload.field}:start`);
+        await delay(5);
+        if (payload.field === "docStatus" && typeof payload.value === "string") {
+          const docStatus =
+            payload.value === "NotNeeded" ? "NN" : (payload.value as CompletionDocStatus);
+          serverState = { ...serverState, docStatus };
+          rowState = {
+            ...rowState,
+            docStatus,
+            rowVersion: `${payload.workOrderVersion}-next`,
+          };
+        }
+        if (payload.field === "completedDate" && typeof payload.value === "string") {
+          serverState = { ...serverState, completedDate: payload.value };
+          rowState = {
+            ...rowState,
+            completedDate: payload.value,
+            rowVersion: `${payload.workOrderVersion}-date`,
+          };
+        }
+        events.push(`boardPatch:${payload.field}:end`);
+        return { ...rowState };
+      },
+    );
+  });
+
+  it("persists docStatus via board PATCH with NotNeeded for UI NN", async () => {
+    const onPatch = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch,
+          clearPatch: () => undefined,
+          getRow: () => rowState,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(42, { docStatus: "NN" });
+    });
+
+    await waitFor(() => expect(events).toContain("boardPatch:docStatus:end"));
+
+    expect(patchBoardField).toHaveBeenCalledWith(42, {
+      field: "docStatus",
+      value: "NotNeeded",
+      workOrderVersion: "AAAAAAA=",
+    });
+    expect(update).not.toHaveBeenCalled();
+    expect(getById).not.toHaveBeenCalled();
+    expect(serverState.docStatus).toBe("NN");
+  });
+
+  it("serializes board docStatus and completedDate via PATCH without racing or EditWorkorder", async () => {
+    const onPatch = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch,
+          clearPatch: () => undefined,
+          getRow: () => rowState,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(42, { docStatus: "Yes" });
+      result.current.patchField(42, { completedDate: "2026-07-20" });
+    });
+
+    await waitFor(() => expect(events).toContain("boardPatch:completedDate:end"));
+    await waitFor(() => expect(events).toContain("boardPatch:docStatus:end"));
+
+    expect(events).toEqual([
+      "boardPatch:docStatus:start",
+      "boardPatch:docStatus:end",
+      "boardPatch:completedDate:start",
+      "boardPatch:completedDate:end",
+    ]);
+
+    expect(getById).not.toHaveBeenCalled();
+    expect(update).not.toHaveBeenCalled();
+    expect(patchBoardField).toHaveBeenCalledWith(
+      42,
+      expect.objectContaining({ field: "completedDate", value: "2026-07-20" }),
+    );
+
+    expect(serverState.docStatus).toBe("Yes");
+    expect(serverState.completedDate).toBe("2026-07-20");
+    expect(serverState.scheduledDate).toBe(BASE_SERVER.scheduledDate);
+    expect(serverState.status).toBe(BASE_SERVER.status);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/run-sequential-uploads.test.ts b/src/test/domain/work-orders/utils/run-sequential-uploads.test.ts
new file mode 100644
index 00000000..92bd2d01
--- /dev/null
+++ b/src/test/domain/work-orders/utils/run-sequential-uploads.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it, vi } from "vitest";
+import { runSequentialUploads } from "@/domain/work-orders/utils/run-sequential-uploads";
+
+describe("runSequentialUploads", () => {
+  it("keeps pending true across the full batch; second upload starts only after the first settles", async () => {
+    const pendingLog: boolean[] = [];
+    const setPending = (pending: boolean) => {
+      pendingLog.push(pending);
+    };
+
+    let resolveFirst: (() => void) | undefined;
+    let resolveSecond: (() => void) | undefined;
+
+    const first = new Promise<void>((resolve) => {
+      resolveFirst = resolve;
+    });
+    const second = new Promise<void>((resolve) => {
+      resolveSecond = resolve;
+    });
+
+    const upload = vi
+      .fn()
+      .mockImplementationOnce(() => first)
+      .mockImplementationOnce(() => second);
+
+    const done = runSequentialUploads(["large.bin", "small.bin"], upload, setPending);
+
+    expect(pendingLog).toEqual([true]);
+    expect(upload).toHaveBeenCalledTimes(1);
+    expect(upload).toHaveBeenCalledWith("large.bin");
+
+    // First file still in flight — pending must stay true.
+    await Promise.resolve();
+    expect(pendingLog).toEqual([true]);
+    expect(upload).toHaveBeenCalledTimes(1);
+
+    resolveFirst?.();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(upload).toHaveBeenCalledTimes(2);
+    expect(upload).toHaveBeenNthCalledWith(2, "small.bin");
+    expect(pendingLog).toEqual([true]);
+
+    resolveSecond?.();
+    await done;
+
+    expect(pendingLog).toEqual([true, false]);
+  });
+
+  it("clears pending when a middle upload rejects", async () => {
+    const setPending = vi.fn();
+    const upload = vi
+      .fn()
+      .mockResolvedValueOnce(undefined)
+      .mockRejectedValueOnce(new Error("upload failed"));
+
+    await expect(runSequentialUploads(["a", "b", "c"], upload, setPending)).rejects.toThrow(
+      "upload failed",
+    );
+
+    expect(setPending.mock.calls.map((call) => call[0])).toEqual([true, false]);
+    expect(upload).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/slide-over-draft.test.ts b/src/test/domain/work-orders/utils/slide-over-draft.test.ts
index 25788b12..bc7ad080 100644
--- a/src/test/domain/work-orders/utils/slide-over-draft.test.ts
+++ b/src/test/domain/work-orders/utils/slide-over-draft.test.ts
@@ -15,6 +15,7 @@ function baseRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow
     dispatcherId: "10",
     dispatcherName: "Alex",
     scheduledOn: "2026-07-16",
+    completedDate: "",
     targetWeek: "",
     dayGroup: "2026-07-16",
     dayLabel: "Thu",
@@ -57,9 +58,23 @@ describe("slide-over-draft", () => {
   it("exposes only board-persistable edit keys", () => {
     expect(SLIDE_OVER_EDIT_KEYS).toContain("woNumber");
     expect(SLIDE_OVER_EDIT_KEYS).toContain("status");
+    expect(SLIDE_OVER_EDIT_KEYS).toContain("vendorId");
     expect(SLIDE_OVER_EDIT_KEYS).not.toContain("pocName");
     expect(SLIDE_OVER_EDIT_KEYS).not.toContain("locationId");
     expect(SLIDE_OVER_EDIT_KEYS).not.toContain("techPhone");
+    expect(SLIDE_OVER_EDIT_KEYS).not.toContain("company");
+    expect(SLIDE_OVER_EDIT_KEYS).not.toContain("tech");
+  });
+
+  it("tracks vendor via vendorId only (company/tech are display companions)", () => {
+    const row = baseRow();
+    const draft = baseRow({ company: "Other Co", tech: "Pat" });
+    expect(isSlideOverDraftDirty(draft, row)).toBe(false);
+    expect(buildSlideOverPatch(draft, row)).toEqual({});
+
+    const vendorDraft = baseRow({ vendorId: "v2", company: "Other Co", tech: "Pat" });
+    expect(isSlideOverDraftDirty(vendorDraft, row)).toBe(true);
+    expect(buildSlideOverPatch(vendorDraft, row)).toEqual({ vendorId: "v2" });
   });
 
   it("ignores POC-only edits for dirty state", () => {
diff --git a/src/test/domain/work-orders/utils/slide-over-failed-save-baseline.test.ts b/src/test/domain/work-orders/utils/slide-over-failed-save-baseline.test.ts
new file mode 100644
index 00000000..8543f18c
--- /dev/null
+++ b/src/test/domain/work-orders/utils/slide-over-failed-save-baseline.test.ts
@@ -0,0 +1,99 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildSlideOverPatch,
+  isSlideOverDraftDirty,
+} from "@/domain/work-orders/utils/slide-over-draft";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+/**
+ * Mirrors the failed-save path: optimistic parent row absorbs the patch, then
+ * rolls back, while draft is compared against a frozen pre-save baseline.
+ */
+function afterFailedOptimisticSave(input: {
+  baseline: WorkOrderTableRow;
+  draft: WorkOrderTableRow;
+  optimisticParent: WorkOrderTableRow;
+  rolledBackParent: WorkOrderTableRow;
+}) {
+  const dirtyAgainstOptimistic = isSlideOverDraftDirty(input.draft, input.optimisticParent);
+  const dirtyAgainstBaseline = isSlideOverDraftDirty(input.draft, input.baseline);
+  const dirtyAgainstRolledBack = isSlideOverDraftDirty(input.draft, input.rolledBackParent);
+  const retryPatch = buildSlideOverPatch(input.draft, input.baseline);
+  return {
+    dirtyAgainstOptimistic,
+    dirtyAgainstBaseline,
+    dirtyAgainstRolledBack,
+    retryPatch,
+    canRetry: dirtyAgainstBaseline && Object.keys(retryPatch).length > 0,
+  };
+}
+
+function row(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 1,
+    woNumber: "1001",
+    site: "SITE-A",
+    type: "PM",
+    dispatcherId: "10",
+    dispatcherName: "Alex",
+    scheduledOn: "2026-07-16",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "2026-07-16",
+    dayLabel: "Thu",
+    location: "Main",
+    locationId: 5,
+    pm: "Plumbing",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "v1",
+    company: "Acme",
+    tech: "Sam",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "09:00",
+    status: "Incomplete",
+    docStatus: "",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    dueDate: "2026-07-20",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    primaryDispatchId: null,
+    rowVersion: "rv1",
+    dispatchRowVersion: "",
+    flagColor: null,
+    ...overrides,
+  };
+}
+
+describe("slide-over failed-save baseline contract", () => {
+  it("stays dirty vs frozen baseline after optimistic parent absorbs the edit", () => {
+    const baseline = row({ woNumber: "1001" });
+    const draft = row({ woNumber: "2002" });
+    const optimisticParent = row({ woNumber: "2002" });
+
+    const result = afterFailedOptimisticSave({
+      baseline,
+      draft,
+      optimisticParent,
+      rolledBackParent: baseline,
+    });
+
+    // Bug the review caught: comparing against optimistic parent clears dirty.
+    expect(result.dirtyAgainstOptimistic).toBe(false);
+    expect(result.dirtyAgainstBaseline).toBe(true);
+    expect(result.dirtyAgainstRolledBack).toBe(true);
+    expect(result.canRetry).toBe(true);
+    expect(result.retryPatch).toEqual({ woNumber: "2002" });
+  });
+});
diff --git a/src/test/domain/work-orders/utils/slide-over-save-contract.test.ts b/src/test/domain/work-orders/utils/slide-over-save-contract.test.ts
new file mode 100644
index 00000000..31828684
--- /dev/null
+++ b/src/test/domain/work-orders/utils/slide-over-save-contract.test.ts
@@ -0,0 +1,76 @@
+import { describe, expect, it, vi } from "vitest";
+
+/**
+ * Mirrors WorkOrderSlideOver commit: exit edit mode only after a successful save
+ * (or when there is nothing to persist).
+ */
+function commitSlideOverEdit(input: {
+  patchKeys: number;
+  onSave: (options: { onSuccess?: () => void }) => void;
+  exitEdit: () => void;
+  clearUnsaved: () => void;
+}) {
+  if (input.patchKeys === 0) {
+    input.exitEdit();
+    input.clearUnsaved();
+    return;
+  }
+
+  input.onSave({
+    onSuccess: () => {
+      input.exitEdit();
+      input.clearUnsaved();
+    },
+  });
+}
+
+describe("slide-over commit save contract", () => {
+  it("exits edit mode immediately when there is no patch", () => {
+    const exitEdit = vi.fn();
+    const clearUnsaved = vi.fn();
+    const onSave = vi.fn();
+
+    commitSlideOverEdit({ patchKeys: 0, onSave, exitEdit, clearUnsaved });
+
+    expect(onSave).not.toHaveBeenCalled();
+    expect(exitEdit).toHaveBeenCalledOnce();
+    expect(clearUnsaved).toHaveBeenCalledOnce();
+  });
+
+  it("keeps edit mode when save fails (onSuccess never runs)", () => {
+    const exitEdit = vi.fn();
+    const clearUnsaved = vi.fn();
+
+    commitSlideOverEdit({
+      patchKeys: 1,
+      onSave: () => {
+        /* rejected — do not call onSuccess */
+      },
+      exitEdit,
+      clearUnsaved,
+    });
+
+    expect(exitEdit).not.toHaveBeenCalled();
+    expect(clearUnsaved).not.toHaveBeenCalled();
+  });
+
+  it("exits edit mode only from onSuccess after a rejected-then-retry path would not", () => {
+    const exitEdit = vi.fn();
+    const clearUnsaved = vi.fn();
+    let success: (() => void) | undefined;
+
+    commitSlideOverEdit({
+      patchKeys: 2,
+      onSave: (options) => {
+        success = options.onSuccess;
+      },
+      exitEdit,
+      clearUnsaved,
+    });
+
+    expect(exitEdit).not.toHaveBeenCalled();
+    success?.();
+    expect(exitEdit).toHaveBeenCalledOnce();
+    expect(clearUnsaved).toHaveBeenCalledOnce();
+  });
+});
diff --git a/src/test/domain/work-orders/utils/table-filter-utils.test.ts b/src/test/domain/work-orders/utils/table-filter-utils.test.ts
index 4667ee78..088e3bdb 100644
--- a/src/test/domain/work-orders/utils/table-filter-utils.test.ts
+++ b/src/test/domain/work-orders/utils/table-filter-utils.test.ts
@@ -19,6 +19,7 @@ function makeRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow
     dispatcherId: "u1",
     dispatcherName: "Alice",
     scheduledOn: "2026-06-23",
+    completedDate: "",
     targetWeek: "",
     dayGroup: "06/23",
     dayLabel: "TUE · 06/23",
diff --git a/src/test/domain/work-orders/utils/wizard-date-utils.test.ts b/src/test/domain/work-orders/utils/wizard-date-utils.test.ts
index 3ee9c66a..8f63bbbf 100644
--- a/src/test/domain/work-orders/utils/wizard-date-utils.test.ts
+++ b/src/test/domain/work-orders/utils/wizard-date-utils.test.ts
@@ -1,8 +1,10 @@
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import {
   fmtDateRange,
   fmtShortDate,
+  pad2,
   rangeDayCount,
+  todayIso,
 } from "@/domain/work-orders/utils/wizard-date-utils";
 
 describe("fmtShortDate", () => {
@@ -29,3 +31,27 @@ describe("rangeDayCount", () => {
     expect(rangeDayCount("2026-06-08", "2026-06-08")).toBe(1);
   });
 });
+
+describe("todayIso", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("uses local calendar day, not UTC ISO date, near midnight", () => {
+    // 02:30 UTC is still the previous local evening in Americas (UTC−N).
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-08-11T02:30:00.000Z"));
+
+    const now = new Date();
+    const expectedLocal = `${now.getFullYear()}-${pad2(now.getMonth() + 1)}-${pad2(now.getDate())}`;
+    const utcSlice = now.toISOString().slice(0, 10);
+
+    expect(todayIso()).toBe(expectedLocal);
+    expect(utcSlice).toBe("2026-08-11");
+
+    if (now.getTimezoneOffset() > 0) {
+      expect(todayIso()).toBe("2026-08-10");
+      expect(todayIso()).not.toBe(utcSlice);
+    }
+  });
+});
diff --git a/src/test/domain/work-orders/utils/work-order-media-limits.test.ts b/src/test/domain/work-orders/utils/work-order-media-limits.test.ts
index 932e74e4..2ae1f827 100644
--- a/src/test/domain/work-orders/utils/work-order-media-limits.test.ts
+++ b/src/test/domain/work-orders/utils/work-order-media-limits.test.ts
@@ -3,6 +3,7 @@ import {
   canDeleteWorkOrderMedia,
   isWorkOrderDocumentsReadOnly,
   isWorkOrderFileTooLarge,
+  isWorkOrderMediaTypeAllowed,
   MAX_WORK_ORDER_MEDIA_BYTES,
 } from "@/domain/work-orders/utils/work-order-media-limits";
 
@@ -23,4 +24,17 @@ describe("work-order-media-limits", () => {
     expect(isWorkOrderFileTooLarge({ size: MAX_WORK_ORDER_MEDIA_BYTES + 1 } as File)).toBe(true);
     expect(isWorkOrderFileTooLarge({ size: 10 } as File)).toBe(false);
   });
+
+  it("allows only JPG PNG MP4 MOV by MIME or extension", () => {
+    expect(isWorkOrderMediaTypeAllowed({ name: "a.jpg", type: "image/jpeg" } as File)).toBe(true);
+    expect(isWorkOrderMediaTypeAllowed({ name: "a.png", type: "image/png" } as File)).toBe(true);
+    expect(isWorkOrderMediaTypeAllowed({ name: "a.mp4", type: "video/mp4" } as File)).toBe(true);
+    expect(isWorkOrderMediaTypeAllowed({ name: "a.mov", type: "video/quicktime" } as File)).toBe(
+      true,
+    );
+    expect(isWorkOrderMediaTypeAllowed({ name: "a.gif", type: "image/gif" } as File)).toBe(false);
+    expect(isWorkOrderMediaTypeAllowed({ name: "a.pdf", type: "application/pdf" } as File)).toBe(
+      false,
+    );
+  });
 });
diff --git a/src/test/domain/work-orders/utils/work-order-patch-queue.test.ts b/src/test/domain/work-orders/utils/work-order-patch-queue.test.ts
new file mode 100644
index 00000000..c088e3c1
--- /dev/null
+++ b/src/test/domain/work-orders/utils/work-order-patch-queue.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+import { createWorkOrderPatchQueue } from "@/domain/work-orders/utils/work-order-patch-queue";
+
+function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+describe("createWorkOrderPatchQueue", () => {
+  it("serializes calls for the same id so the second never starts before the first settles", async () => {
+    const enqueue = createWorkOrderPatchQueue();
+    const events: string[] = [];
+
+    const first = enqueue(1, async () => {
+      events.push("first:start");
+      await delay(20);
+      events.push("first:end");
+      return "first";
+    });
+    const second = enqueue(1, async () => {
+      events.push("second:start");
+      await delay(1);
+      events.push("second:end");
+      return "second";
+    });
+
+    await Promise.all([first, second]);
+
+    expect(events).toEqual(["first:start", "first:end", "second:start", "second:end"]);
+  });
+
+  it("does not block work queued for a different id", async () => {
+    const enqueue = createWorkOrderPatchQueue();
+    const events: string[] = [];
+
+    const slow = enqueue(1, async () => {
+      events.push("slow:start");
+      await delay(20);
+      events.push("slow:end");
+    });
+    const fast = enqueue(2, async () => {
+      events.push("fast:start");
+      await delay(1);
+      events.push("fast:end");
+    });
+
+    await Promise.all([slow, fast]);
+
+    expect(events.indexOf("fast:end")).toBeLessThan(events.indexOf("slow:end"));
+  });
+
+  it("still runs the next task after a prior task rejects", async () => {
+    const enqueue = createWorkOrderPatchQueue();
+
+    await expect(
+      enqueue(1, async () => {
+        throw new Error("boom");
+      }),
+    ).rejects.toThrow("boom");
+
+    await expect(enqueue(1, async () => "recovered")).resolves.toBe("recovered");
+  });
+});

From a05e768115cb3fd6dd6ab769ace6f4994c01cd2a Mon Sep 17 00:00:00 2001
From: "arthur.bassi" <arthur.bassi@luby.com.br>
Date: Mon, 10 Aug 2026 18:35:28 -0300
Subject: [PATCH 04/17] fix(work-orders): address Bugbot findings on slide-over
 and vendor roster

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../_components/use-vendor-deactivation.ts    |   9 +-
 .../_components/use-vendor-roster-form.ts     |  20 +++-
 .../_components/vendor-roster-form-fields.tsx |  33 +++++-
 .../_components/vendor-roster-page.tsx        |  47 ++++++++
 .../detail/use-work-order-slide-over.ts       |  13 ++-
 .../use-save-vendor-company-roster.ts         |   5 +
 .../vendors/use-vendor-roster-form.test.tsx   | 103 +++++++++++++++++-
 .../use-save-vendor-company-roster.test.ts    |  75 ++++++++++++-
 8 files changed, 293 insertions(+), 12 deletions(-)

diff --git a/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts b/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
index 9b6f3b0d..2409814f 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
@@ -15,7 +15,9 @@ export interface VendorDeactivationState {
   confirm: () => void;
 }
 
-export function useVendorDeactivation(): VendorDeactivationState {
+export function useVendorDeactivation(options?: {
+  onSuccess?: () => void;
+}): VendorDeactivationState {
   const [target, setTarget] = useState<VendorListItem | null>(null);
   const [error, setError] = useState<string | null>(null);
   const deleteVendor = useDeleteVendor();
@@ -39,7 +41,10 @@ export function useVendorDeactivation(): VendorDeactivationState {
     if (!target || target.id == null) return;
     setError(null);
     deleteVendor.mutate(target.id, {
-      onSuccess: () => setTarget(null),
+      onSuccess: () => {
+        setTarget(null);
+        options?.onSuccess?.();
+      },
       onError: (err: Error) => setError(err.message || "Failed to deactivate vendor"),
     });
   };
diff --git a/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts b/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
index f6ea637a..b4c3a51f 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
@@ -20,6 +20,24 @@ import type {
   VendorRosterConflict,
 } from "@/domain/vendors/types/vendor";
 
+function withoutBlankNewTechnicians(
+  values: VendorCompanyRosterFormValues,
+): VendorCompanyRosterFormValues {
+  return {
+    ...values,
+    technicians: values.technicians.filter(
+      (technician) =>
+        technician.id != null ||
+        Boolean(
+          technician.contactName.trim() ||
+          technician.phone.trim() ||
+          technician.email.trim() ||
+          technician.tradeSpecialties.trim(),
+        ),
+    ),
+  };
+}
+
 export interface VendorRosterFormProps {
   mode: "create" | "update";
   vendorId?: string | number;
@@ -109,7 +127,7 @@ export function useVendorRosterForm({
     save.mutate(
       {
         mode: isUpdate ? "update" : "create",
-        values: formValues,
+        values: withoutBlankNewTechnicians(formValues),
         companyId: isUpdate ? (committedRoster?.companyId ?? companyId) : undefined,
         rowVersion: isUpdate ? committedRoster?.rowVersion : undefined,
         originalRoster: mode === "update" ? routeRoster : undefined,
diff --git a/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx b/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
index 32f91675..d54c3016 100644
--- a/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
@@ -1,4 +1,10 @@
-import { Controller, useFieldArray, type Control, type FieldErrors } from "react-hook-form";
+import {
+  Controller,
+  useFieldArray,
+  useWatch,
+  type Control,
+  type FieldErrors,
+} from "react-hook-form";
 import AddIcon from "@mui/icons-material/Add";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
 import {
@@ -28,6 +34,7 @@ interface VendorRosterFormFieldsProps {
   selectedCompanyId?: string | number | null;
   onSelectCompany?: (company: VendorFacetCompany | null) => Promise<void>;
   onClearSelectedCompany?: (nextName?: string) => void;
+  onRequestDeactivate?: (technician: RosterTechnicianValues) => void;
 }
 
 function CompanyNameField({
@@ -221,6 +228,7 @@ interface TechnicianRowProps {
   onRemove: () => void;
   canRemove: boolean;
   tradeOptions: string[];
+  onRequestDeactivate?: (technician: RosterTechnicianValues) => void;
 }
 
 function TechnicianRow({
@@ -230,7 +238,10 @@ function TechnicianRow({
   onRemove,
   canRemove,
   tradeOptions,
+  onRequestDeactivate,
 }: TechnicianRowProps) {
+  const technician = useWatch({ control, name: `technicians.${index}` });
+
   return (
     <Stack spacing={2} className="rounded-md border border-solid border-gray-200 p-3">
       <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
@@ -305,7 +316,13 @@ function TechnicianRow({
             control={
               <Switch
                 checked={field.value}
-                onChange={(_event, checked) => field.onChange(checked)}
+                onChange={(_event, checked) => {
+                  if (!checked && technician?.id != null && onRequestDeactivate != null) {
+                    onRequestDeactivate(technician);
+                    return;
+                  }
+                  field.onChange(checked);
+                }}
               />
             }
             label={field.value ? "Active" : "Inactive"}
@@ -320,10 +337,12 @@ function TechniciansFieldArray({
   control,
   errors,
   tradeOptions,
+  onRequestDeactivate,
 }: {
   control: Control<VendorCompanyRosterFormValues>;
   errors: FieldErrors<VendorCompanyRosterFormValues>;
   tradeOptions: string[];
+  onRequestDeactivate?: (technician: RosterTechnicianValues) => void;
 }) {
   const { fields, append, remove } = useFieldArray({ control, name: "technicians" });
 
@@ -366,6 +385,7 @@ function TechniciansFieldArray({
               onRemove={() => remove(index)}
               canRemove
               tradeOptions={tradeOptions}
+              onRequestDeactivate={onRequestDeactivate}
             />
           ))
         )}
@@ -375,12 +395,17 @@ function TechniciansFieldArray({
 }
 
 export function VendorRosterFormFields(props: VendorRosterFormFieldsProps) {
-  const { control, errors, tradeOptions = [] } = props;
+  const { control, errors, tradeOptions = [], onRequestDeactivate } = props;
   return (
     <Stack spacing={3}>
       <CompanyFields {...props} />
       <Divider />
-      <TechniciansFieldArray control={control} errors={errors} tradeOptions={tradeOptions} />
+      <TechniciansFieldArray
+        control={control}
+        errors={errors}
+        tradeOptions={tradeOptions}
+        onRequestDeactivate={onRequestDeactivate}
+      />
     </Stack>
   );
 }
diff --git a/src/app/(protected)/vendors/_components/vendor-roster-page.tsx b/src/app/(protected)/vendors/_components/vendor-roster-page.tsx
index 15f8ff9a..cf4e6daf 100644
--- a/src/app/(protected)/vendors/_components/vendor-roster-page.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-roster-page.tsx
@@ -1,17 +1,44 @@
 import type { ReactNode } from "react";
 import { useNavigate } from "react-router";
 import { Alert, Box, Button, CircularProgress, Paper, Stack, Typography } from "@mui/material";
+import { VendorDeactivationDialog } from "./vendor-deactivation-dialog";
 import { VendorPortalTokenPanel } from "./vendor-portal-token-panel";
 import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
 import { VendorRosterFormFields } from "./vendor-roster-form-fields";
 import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
+import { useVendorDeactivation } from "./use-vendor-deactivation";
 import { useVendorRosterForm } from "./use-vendor-roster-form";
+import type { RosterTechnicianValues } from "@/domain/vendors/schemas/vendor-roster-schema";
+import type { VendorCompanyRoster, VendorListItem } from "@/domain/vendors/types/vendor";
 
 interface VendorRosterPageProps {
   vendorId?: string;
   companyId?: string;
 }
 
+function toDeactivationListItem(
+  roster: VendorCompanyRoster,
+  technician: RosterTechnicianValues,
+): VendorListItem {
+  return {
+    id: technician.id ?? null,
+    companyId: roster.companyId,
+    companyName: roster.name,
+    contactName: technician.contactName,
+    email: technician.email,
+    phone: technician.phone,
+    companyPhone: roster.companyPhone,
+    googleMapsUrl: roster.googleMapsUrl,
+    notes: roster.notes,
+    totalJobs: 0,
+    city: roster.city,
+    state: roster.state,
+    tradeSpecialties: technician.tradeSpecialties,
+    isActive: technician.isActive,
+    preferredContact: technician.preferredContact ?? "Phone",
+  };
+}
+
 function PageShell({
   title,
   subtitle,
@@ -43,6 +70,9 @@ function PageShell({
 export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPageProps) {
   const navigate = useNavigate();
   const isEdit = vendorId !== undefined || companyId !== undefined;
+  const deactivation = useVendorDeactivation({
+    onSuccess: () => navigate("/vendors"),
+  });
   const form = useVendorRosterForm({
     mode: isEdit ? "update" : "create",
     vendorId,
@@ -50,6 +80,11 @@ export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPa
     onSuccess: () => navigate("/vendors"),
   });
 
+  const handleRequestDeactivate = (technician: RosterTechnicianValues) => {
+    if (!form.roster || technician.id == null) return;
+    deactivation.open(toDeactivationListItem(form.roster, technician));
+  };
+
   if (isEdit && form.isLoading) {
     return (
       <Box className="flex justify-center p-10">
@@ -104,6 +139,7 @@ export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPa
             control={form.control}
             errors={form.errors}
             tradeOptions={form.trades}
+            onRequestDeactivate={isEdit ? handleRequestDeactivate : undefined}
             {...companySelectionProps}
           />
 
@@ -125,6 +161,17 @@ export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPa
           </Stack>
         </Stack>
       </Box>
+
+      <VendorDeactivationDialog
+        target={deactivation.target}
+        isLoading={deactivation.isLoading}
+        isSaving={deactivation.isSaving}
+        error={deactivation.error}
+        impact={deactivation.impact}
+        impactError={deactivation.impactError}
+        onClose={deactivation.close}
+        onConfirm={deactivation.confirm}
+      />
     </PageShell>
   );
 }
diff --git a/src/app/(protected)/workorders/_components/detail/use-work-order-slide-over.ts b/src/app/(protected)/workorders/_components/detail/use-work-order-slide-over.ts
index d0c85a7a..9120bb5f 100644
--- a/src/app/(protected)/workorders/_components/detail/use-work-order-slide-over.ts
+++ b/src/app/(protected)/workorders/_components/detail/use-work-order-slide-over.ts
@@ -100,13 +100,22 @@ export function useWorkOrderSlideOver({
     uploadCompletionMutation.mutate(
       { file, workOrderVersion: version },
       {
-        onSuccess: () => {
+        onSuccess: async () => {
           // Mirror CompDoc finalize: ensure completedDate then mark docStatus Yes.
           const patch: WorkOrderTablePatch = { docStatus: "Yes" };
           if (!infoSource.completedDate) {
             patch.completedDate = todayIso();
           }
-          onSave(row.id, patch);
+          try {
+            await new Promise<void>((resolve, reject) => {
+              onSave(row.id, patch, {
+                onSuccess: () => resolve(),
+                onError: (error) => reject(error),
+              });
+            });
+          } catch {
+            toast.error("Uploaded PDF but failed to update document status. Refresh and retry.");
+          }
         },
       },
     );
diff --git a/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts b/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts
index 37532220..cdc4b010 100644
--- a/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts
+++ b/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts
@@ -91,6 +91,11 @@ export function useSaveVendorCompanyRoster(): UseMutationResult<
           ? getSingleStatusOnlyChange(originalRoster, values)
           : null;
         if (statusChange) {
+          if (statusChange.isActive === false) {
+            throw new Error(
+              "Use Deactivate to check open work orders before inactivating a technician.",
+            );
+          }
           const baseRoster = originalRoster as VendorCompanyRoster;
           await vendorsApi.update(statusChange.id, { isActive: statusChange.isActive });
           return {
diff --git a/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx b/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
index e083f352..c460388d 100644
--- a/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
+++ b/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
@@ -24,11 +24,16 @@ vi.mock("@/domain/vendors/use-cases/use-vendor-facets", () => ({
   useVendorFacets: () => ({ data: { companies: [], trades: [] } }),
 }));
 
+const saveMutate = vi.fn();
+
 vi.mock("@/domain/vendors/use-cases/use-save-vendor-company-roster", async () => {
   const actual = await vi.importActual<
     typeof import("@/domain/vendors/use-cases/use-save-vendor-company-roster")
   >("@/domain/vendors/use-cases/use-save-vendor-company-roster");
-  return { ...actual, useSaveVendorCompanyRoster: () => ({ mutate: vi.fn(), isPending: false }) };
+  return {
+    ...actual,
+    useSaveVendorCompanyRoster: () => ({ mutate: saveMutate, isPending: false }),
+  };
 });
 
 import { useVendorRosterForm } from "@/app/(protected)/vendors/_components/use-vendor-roster-form";
@@ -101,6 +106,7 @@ function deferRoster(): {
 describe("useVendorRosterForm load-error handling", () => {
   beforeEach(() => {
     rosterGet.mockReset();
+    saveMutate.mockReset();
   });
 
   it("shows a safe retryable error when selecting an existing company fetch is rejected", async () => {
@@ -199,6 +205,7 @@ describe("useVendorRosterForm load-error handling", () => {
 describe("useVendorRosterForm stale-selection handling", () => {
   beforeEach(() => {
     rosterGet.mockReset();
+    saveMutate.mockReset();
   });
 
   it("keeps the newest company roster when two lookups resolve out of order", async () => {
@@ -273,3 +280,97 @@ describe("useVendorRosterForm stale-selection handling", () => {
     expect(result.current.name.field.value).toBe("Draft Vendor");
   });
 });
+
+describe("useVendorRosterForm blank technician filtering", () => {
+  beforeEach(() => {
+    rosterGet.mockReset();
+    saveMutate.mockReset();
+  });
+
+  it("omits blank new technician rows from the save payload", () => {
+    const { result } = renderHook(() => useVendorRosterForm({ mode: "create" }), {
+      wrapper: makeWrapper(createClient()),
+    });
+
+    act(() => {
+      result.current.submit({
+        name: "Gateway Plumbing",
+        companyPhone: "(314) 555-0100",
+        email: "dispatch@gateway.test",
+        address: "",
+        city: "",
+        state: "",
+        zip: "",
+        googleMapsUrl: "",
+        notes: "",
+        technicians: [
+          {
+            contactName: "Taylor",
+            phone: "(314) 555-0199",
+            email: "taylor@gateway.test",
+            tradeSpecialties: "Plumbing",
+            isActive: true,
+          },
+          {
+            contactName: "",
+            phone: "",
+            email: "",
+            tradeSpecialties: "",
+            isActive: true,
+          },
+        ],
+      });
+    });
+
+    expect(saveMutate).toHaveBeenCalledTimes(1);
+    const payload = saveMutate.mock.calls[0]?.[0] as {
+      values: { technicians: Array<{ contactName: string }> };
+    };
+    expect(payload.values.technicians).toHaveLength(1);
+    expect(payload.values.technicians[0]?.contactName).toBe("Taylor");
+  });
+
+  it("keeps existing technicians with an id even when contact fields are blank", () => {
+    const { result } = renderHook(() => useVendorRosterForm({ mode: "create" }), {
+      wrapper: makeWrapper(createClient()),
+    });
+
+    act(() => {
+      result.current.submit({
+        name: "Gateway Plumbing",
+        companyPhone: "(314) 555-0100",
+        email: "dispatch@gateway.test",
+        address: "",
+        city: "",
+        state: "",
+        zip: "",
+        googleMapsUrl: "",
+        notes: "",
+        technicians: [
+          {
+            id: 9,
+            contactName: "",
+            phone: "",
+            email: "",
+            tradeSpecialties: "",
+            isActive: true,
+          },
+        ],
+      });
+    });
+
+    const payload = saveMutate.mock.calls[0]?.[0] as {
+      values: { technicians: Array<{ id?: number }> };
+    };
+    expect(payload.values.technicians).toEqual([
+      {
+        id: 9,
+        contactName: "",
+        phone: "",
+        email: "",
+        tradeSpecialties: "",
+        isActive: true,
+      },
+    ]);
+  });
+});
diff --git a/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts b/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts
index f0547378..9c61e64f 100644
--- a/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts
+++ b/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts
@@ -1,7 +1,32 @@
-import { describe, expect, it } from "vitest";
-import { getSingleStatusOnlyChange } from "@/domain/vendors/use-cases/use-save-vendor-company-roster";
+import { createElement, type ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  getSingleStatusOnlyChange,
+  useSaveVendorCompanyRoster,
+} from "@/domain/vendors/use-cases/use-save-vendor-company-roster";
 import type { VendorCompanyRoster } from "@/domain/vendors/types/vendor";
 
+const updateVendor = vi.fn();
+
+vi.mock("@/domain/vendors/api/vendors-api", () => ({
+  vendorsApi: {
+    update: (...args: unknown[]) => updateVendor(...args),
+  },
+}));
+
+vi.mock("@/domain/vendors/api/vendor-company-roster-api", () => ({
+  vendorCompanyRosterApi: {
+    update: vi.fn(),
+    create: vi.fn(),
+  },
+}));
+
+vi.mock("react-toastify", () => ({
+  toast: { success: vi.fn(), error: vi.fn() },
+}));
+
 const roster: VendorCompanyRoster = {
   companyId: 10,
   rowVersion: "rv-1",
@@ -69,3 +94,49 @@ describe("getSingleStatusOnlyChange", () => {
     ).toBeNull();
   });
 });
+
+describe("useSaveVendorCompanyRoster status-only deactivation gate", () => {
+  beforeEach(() => {
+    updateVendor.mockReset();
+    updateVendor.mockResolvedValue(undefined);
+  });
+
+  it("rejects sparse Active→Inactive updates and still allows reactivation", async () => {
+    const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    const wrapper = ({ children }: { children: ReactNode }) =>
+      createElement(QueryClientProvider, { client }, children);
+
+    const { result } = renderHook(() => useSaveVendorCompanyRoster(), { wrapper });
+
+    const activeRoster: VendorCompanyRoster = {
+      ...roster,
+      technicians: [{ ...roster.technicians[0], isActive: true }],
+    };
+
+    await expect(
+      result.current.mutateAsync({
+        mode: "update",
+        values: {
+          ...values,
+          technicians: [{ ...values.technicians[0], isActive: false }],
+        },
+        companyId: 10,
+        rowVersion: "rv-1",
+        originalRoster: activeRoster,
+      }),
+    ).rejects.toThrow("Use Deactivate to check open work orders before inactivating a technician.");
+    expect(updateVendor).not.toHaveBeenCalled();
+
+    await result.current.mutateAsync({
+      mode: "update",
+      values: {
+        ...values,
+        technicians: [{ ...values.technicians[0], isActive: true }],
+      },
+      companyId: 10,
+      rowVersion: "rv-1",
+      originalRoster: roster,
+    });
+    expect(updateVendor).toHaveBeenCalledWith(7, { isActive: true });
+  });
+});

From d52df52de674b66ff9fb7696be7c42e7c3698436 Mon Sep 17 00:00:00 2001
From: "arthur.bassi" <arthur.bassi@luby.com.br>
Date: Mon, 10 Aug 2026 19:08:01 -0300
Subject: [PATCH 05/17] fix(vendors): restore blank-tech filter and
 deactivation gate

Omit empty new technician rows on save and route Active to Inactive through VendorDeactivationDialog, blocking sparse isActive:false updates.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../_components/use-vendor-deactivation.ts    |   9 +-
 .../_components/use-vendor-roster-form.ts     |  20 +++-
 .../_components/vendor-roster-form-fields.tsx |  33 +++++-
 .../_components/vendor-roster-page.tsx        |  47 ++++++++
 .../use-save-vendor-company-roster.ts         |   5 +
 .../vendors/use-vendor-roster-form.test.tsx   | 101 +++++++++++++++++-
 .../use-save-vendor-company-roster.test.ts    |  75 ++++++++++++-
 7 files changed, 280 insertions(+), 10 deletions(-)

diff --git a/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts b/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
index 9b6f3b0d..2409814f 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
@@ -15,7 +15,9 @@ export interface VendorDeactivationState {
   confirm: () => void;
 }
 
-export function useVendorDeactivation(): VendorDeactivationState {
+export function useVendorDeactivation(options?: {
+  onSuccess?: () => void;
+}): VendorDeactivationState {
   const [target, setTarget] = useState<VendorListItem | null>(null);
   const [error, setError] = useState<string | null>(null);
   const deleteVendor = useDeleteVendor();
@@ -39,7 +41,10 @@ export function useVendorDeactivation(): VendorDeactivationState {
     if (!target || target.id == null) return;
     setError(null);
     deleteVendor.mutate(target.id, {
-      onSuccess: () => setTarget(null),
+      onSuccess: () => {
+        setTarget(null);
+        options?.onSuccess?.();
+      },
       onError: (err: Error) => setError(err.message || "Failed to deactivate vendor"),
     });
   };
diff --git a/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts b/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
index f6ea637a..b4c3a51f 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
@@ -20,6 +20,24 @@ import type {
   VendorRosterConflict,
 } from "@/domain/vendors/types/vendor";
 
+function withoutBlankNewTechnicians(
+  values: VendorCompanyRosterFormValues,
+): VendorCompanyRosterFormValues {
+  return {
+    ...values,
+    technicians: values.technicians.filter(
+      (technician) =>
+        technician.id != null ||
+        Boolean(
+          technician.contactName.trim() ||
+          technician.phone.trim() ||
+          technician.email.trim() ||
+          technician.tradeSpecialties.trim(),
+        ),
+    ),
+  };
+}
+
 export interface VendorRosterFormProps {
   mode: "create" | "update";
   vendorId?: string | number;
@@ -109,7 +127,7 @@ export function useVendorRosterForm({
     save.mutate(
       {
         mode: isUpdate ? "update" : "create",
-        values: formValues,
+        values: withoutBlankNewTechnicians(formValues),
         companyId: isUpdate ? (committedRoster?.companyId ?? companyId) : undefined,
         rowVersion: isUpdate ? committedRoster?.rowVersion : undefined,
         originalRoster: mode === "update" ? routeRoster : undefined,
diff --git a/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx b/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
index 32f91675..d54c3016 100644
--- a/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
@@ -1,4 +1,10 @@
-import { Controller, useFieldArray, type Control, type FieldErrors } from "react-hook-form";
+import {
+  Controller,
+  useFieldArray,
+  useWatch,
+  type Control,
+  type FieldErrors,
+} from "react-hook-form";
 import AddIcon from "@mui/icons-material/Add";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
 import {
@@ -28,6 +34,7 @@ interface VendorRosterFormFieldsProps {
   selectedCompanyId?: string | number | null;
   onSelectCompany?: (company: VendorFacetCompany | null) => Promise<void>;
   onClearSelectedCompany?: (nextName?: string) => void;
+  onRequestDeactivate?: (technician: RosterTechnicianValues) => void;
 }
 
 function CompanyNameField({
@@ -221,6 +228,7 @@ interface TechnicianRowProps {
   onRemove: () => void;
   canRemove: boolean;
   tradeOptions: string[];
+  onRequestDeactivate?: (technician: RosterTechnicianValues) => void;
 }
 
 function TechnicianRow({
@@ -230,7 +238,10 @@ function TechnicianRow({
   onRemove,
   canRemove,
   tradeOptions,
+  onRequestDeactivate,
 }: TechnicianRowProps) {
+  const technician = useWatch({ control, name: `technicians.${index}` });
+
   return (
     <Stack spacing={2} className="rounded-md border border-solid border-gray-200 p-3">
       <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
@@ -305,7 +316,13 @@ function TechnicianRow({
             control={
               <Switch
                 checked={field.value}
-                onChange={(_event, checked) => field.onChange(checked)}
+                onChange={(_event, checked) => {
+                  if (!checked && technician?.id != null && onRequestDeactivate != null) {
+                    onRequestDeactivate(technician);
+                    return;
+                  }
+                  field.onChange(checked);
+                }}
               />
             }
             label={field.value ? "Active" : "Inactive"}
@@ -320,10 +337,12 @@ function TechniciansFieldArray({
   control,
   errors,
   tradeOptions,
+  onRequestDeactivate,
 }: {
   control: Control<VendorCompanyRosterFormValues>;
   errors: FieldErrors<VendorCompanyRosterFormValues>;
   tradeOptions: string[];
+  onRequestDeactivate?: (technician: RosterTechnicianValues) => void;
 }) {
   const { fields, append, remove } = useFieldArray({ control, name: "technicians" });
 
@@ -366,6 +385,7 @@ function TechniciansFieldArray({
               onRemove={() => remove(index)}
               canRemove
               tradeOptions={tradeOptions}
+              onRequestDeactivate={onRequestDeactivate}
             />
           ))
         )}
@@ -375,12 +395,17 @@ function TechniciansFieldArray({
 }
 
 export function VendorRosterFormFields(props: VendorRosterFormFieldsProps) {
-  const { control, errors, tradeOptions = [] } = props;
+  const { control, errors, tradeOptions = [], onRequestDeactivate } = props;
   return (
     <Stack spacing={3}>
       <CompanyFields {...props} />
       <Divider />
-      <TechniciansFieldArray control={control} errors={errors} tradeOptions={tradeOptions} />
+      <TechniciansFieldArray
+        control={control}
+        errors={errors}
+        tradeOptions={tradeOptions}
+        onRequestDeactivate={onRequestDeactivate}
+      />
     </Stack>
   );
 }
diff --git a/src/app/(protected)/vendors/_components/vendor-roster-page.tsx b/src/app/(protected)/vendors/_components/vendor-roster-page.tsx
index 15f8ff9a..cf4e6daf 100644
--- a/src/app/(protected)/vendors/_components/vendor-roster-page.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-roster-page.tsx
@@ -1,17 +1,44 @@
 import type { ReactNode } from "react";
 import { useNavigate } from "react-router";
 import { Alert, Box, Button, CircularProgress, Paper, Stack, Typography } from "@mui/material";
+import { VendorDeactivationDialog } from "./vendor-deactivation-dialog";
 import { VendorPortalTokenPanel } from "./vendor-portal-token-panel";
 import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
 import { VendorRosterFormFields } from "./vendor-roster-form-fields";
 import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
+import { useVendorDeactivation } from "./use-vendor-deactivation";
 import { useVendorRosterForm } from "./use-vendor-roster-form";
+import type { RosterTechnicianValues } from "@/domain/vendors/schemas/vendor-roster-schema";
+import type { VendorCompanyRoster, VendorListItem } from "@/domain/vendors/types/vendor";
 
 interface VendorRosterPageProps {
   vendorId?: string;
   companyId?: string;
 }
 
+function toDeactivationListItem(
+  roster: VendorCompanyRoster,
+  technician: RosterTechnicianValues,
+): VendorListItem {
+  return {
+    id: technician.id ?? null,
+    companyId: roster.companyId,
+    companyName: roster.name,
+    contactName: technician.contactName,
+    email: technician.email,
+    phone: technician.phone,
+    companyPhone: roster.companyPhone,
+    googleMapsUrl: roster.googleMapsUrl,
+    notes: roster.notes,
+    totalJobs: 0,
+    city: roster.city,
+    state: roster.state,
+    tradeSpecialties: technician.tradeSpecialties,
+    isActive: technician.isActive,
+    preferredContact: technician.preferredContact ?? "Phone",
+  };
+}
+
 function PageShell({
   title,
   subtitle,
@@ -43,6 +70,9 @@ function PageShell({
 export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPageProps) {
   const navigate = useNavigate();
   const isEdit = vendorId !== undefined || companyId !== undefined;
+  const deactivation = useVendorDeactivation({
+    onSuccess: () => navigate("/vendors"),
+  });
   const form = useVendorRosterForm({
     mode: isEdit ? "update" : "create",
     vendorId,
@@ -50,6 +80,11 @@ export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPa
     onSuccess: () => navigate("/vendors"),
   });
 
+  const handleRequestDeactivate = (technician: RosterTechnicianValues) => {
+    if (!form.roster || technician.id == null) return;
+    deactivation.open(toDeactivationListItem(form.roster, technician));
+  };
+
   if (isEdit && form.isLoading) {
     return (
       <Box className="flex justify-center p-10">
@@ -104,6 +139,7 @@ export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPa
             control={form.control}
             errors={form.errors}
             tradeOptions={form.trades}
+            onRequestDeactivate={isEdit ? handleRequestDeactivate : undefined}
             {...companySelectionProps}
           />
 
@@ -125,6 +161,17 @@ export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPa
           </Stack>
         </Stack>
       </Box>
+
+      <VendorDeactivationDialog
+        target={deactivation.target}
+        isLoading={deactivation.isLoading}
+        isSaving={deactivation.isSaving}
+        error={deactivation.error}
+        impact={deactivation.impact}
+        impactError={deactivation.impactError}
+        onClose={deactivation.close}
+        onConfirm={deactivation.confirm}
+      />
     </PageShell>
   );
 }
diff --git a/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts b/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts
index 37532220..cdc4b010 100644
--- a/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts
+++ b/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts
@@ -91,6 +91,11 @@ export function useSaveVendorCompanyRoster(): UseMutationResult<
           ? getSingleStatusOnlyChange(originalRoster, values)
           : null;
         if (statusChange) {
+          if (statusChange.isActive === false) {
+            throw new Error(
+              "Use Deactivate to check open work orders before inactivating a technician.",
+            );
+          }
           const baseRoster = originalRoster as VendorCompanyRoster;
           await vendorsApi.update(statusChange.id, { isActive: statusChange.isActive });
           return {
diff --git a/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx b/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
index e083f352..d2e8433b 100644
--- a/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
+++ b/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
@@ -24,11 +24,16 @@ vi.mock("@/domain/vendors/use-cases/use-vendor-facets", () => ({
   useVendorFacets: () => ({ data: { companies: [], trades: [] } }),
 }));
 
+const saveMutate = vi.fn();
+
 vi.mock("@/domain/vendors/use-cases/use-save-vendor-company-roster", async () => {
   const actual = await vi.importActual<
     typeof import("@/domain/vendors/use-cases/use-save-vendor-company-roster")
   >("@/domain/vendors/use-cases/use-save-vendor-company-roster");
-  return { ...actual, useSaveVendorCompanyRoster: () => ({ mutate: vi.fn(), isPending: false }) };
+  return {
+    ...actual,
+    useSaveVendorCompanyRoster: () => ({ mutate: saveMutate, isPending: false }),
+  };
 });
 
 import { useVendorRosterForm } from "@/app/(protected)/vendors/_components/use-vendor-roster-form";
@@ -273,3 +278,97 @@ describe("useVendorRosterForm stale-selection handling", () => {
     expect(result.current.name.field.value).toBe("Draft Vendor");
   });
 });
+
+describe("useVendorRosterForm blank technician filtering", () => {
+  beforeEach(() => {
+    rosterGet.mockReset();
+    saveMutate.mockReset();
+  });
+
+  it("omits blank new technician rows from the save payload", () => {
+    const { result } = renderHook(() => useVendorRosterForm({ mode: "create" }), {
+      wrapper: makeWrapper(createClient()),
+    });
+
+    act(() => {
+      result.current.submit({
+        name: "Gateway Plumbing",
+        companyPhone: "(314) 555-0100",
+        email: "dispatch@gateway.test",
+        address: "",
+        city: "",
+        state: "",
+        zip: "",
+        googleMapsUrl: "",
+        notes: "",
+        technicians: [
+          {
+            contactName: "Taylor",
+            phone: "(314) 555-0199",
+            email: "taylor@gateway.test",
+            tradeSpecialties: "Plumbing",
+            isActive: true,
+          },
+          {
+            contactName: "",
+            phone: "",
+            email: "",
+            tradeSpecialties: "",
+            isActive: true,
+          },
+        ],
+      });
+    });
+
+    expect(saveMutate).toHaveBeenCalledTimes(1);
+    const payload = saveMutate.mock.calls[0]?.[0] as {
+      values: { technicians: Array<{ contactName: string }> };
+    };
+    expect(payload.values.technicians).toHaveLength(1);
+    expect(payload.values.technicians[0]?.contactName).toBe("Taylor");
+  });
+
+  it("keeps existing technicians with an id even when contact fields are blank", () => {
+    const { result } = renderHook(() => useVendorRosterForm({ mode: "create" }), {
+      wrapper: makeWrapper(createClient()),
+    });
+
+    act(() => {
+      result.current.submit({
+        name: "Gateway Plumbing",
+        companyPhone: "(314) 555-0100",
+        email: "dispatch@gateway.test",
+        address: "",
+        city: "",
+        state: "",
+        zip: "",
+        googleMapsUrl: "",
+        notes: "",
+        technicians: [
+          {
+            id: 9,
+            contactName: "",
+            phone: "",
+            email: "",
+            tradeSpecialties: "",
+            isActive: true,
+          },
+        ],
+      });
+    });
+
+    const payload = saveMutate.mock.calls[0]?.[0] as {
+      values: { technicians: Array<{ id?: number }> };
+    };
+    expect(payload.values.technicians).toEqual([
+      {
+        id: 9,
+        contactName: "",
+        phone: "",
+        email: "",
+        tradeSpecialties: "",
+        isActive: true,
+      },
+    ]);
+  });
+});
diff --git a/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts b/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts
index f0547378..9c61e64f 100644
--- a/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts
+++ b/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts
@@ -1,7 +1,32 @@
-import { describe, expect, it } from "vitest";
-import { getSingleStatusOnlyChange } from "@/domain/vendors/use-cases/use-save-vendor-company-roster";
+import { createElement, type ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  getSingleStatusOnlyChange,
+  useSaveVendorCompanyRoster,
+} from "@/domain/vendors/use-cases/use-save-vendor-company-roster";
 import type { VendorCompanyRoster } from "@/domain/vendors/types/vendor";
 
+const updateVendor = vi.fn();
+
+vi.mock("@/domain/vendors/api/vendors-api", () => ({
+  vendorsApi: {
+    update: (...args: unknown[]) => updateVendor(...args),
+  },
+}));
+
+vi.mock("@/domain/vendors/api/vendor-company-roster-api", () => ({
+  vendorCompanyRosterApi: {
+    update: vi.fn(),
+    create: vi.fn(),
+  },
+}));
+
+vi.mock("react-toastify", () => ({
+  toast: { success: vi.fn(), error: vi.fn() },
+}));
+
 const roster: VendorCompanyRoster = {
   companyId: 10,
   rowVersion: "rv-1",
@@ -69,3 +94,49 @@ describe("getSingleStatusOnlyChange", () => {
     ).toBeNull();
   });
 });
+
+describe("useSaveVendorCompanyRoster status-only deactivation gate", () => {
+  beforeEach(() => {
+    updateVendor.mockReset();
+    updateVendor.mockResolvedValue(undefined);
+  });
+
+  it("rejects sparse Active→Inactive updates and still allows reactivation", async () => {
+    const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    const wrapper = ({ children }: { children: ReactNode }) =>
+      createElement(QueryClientProvider, { client }, children);
+
+    const { result } = renderHook(() => useSaveVendorCompanyRoster(), { wrapper });
+
+    const activeRoster: VendorCompanyRoster = {
+      ...roster,
+      technicians: [{ ...roster.technicians[0], isActive: true }],
+    };
+
+    await expect(
+      result.current.mutateAsync({
+        mode: "update",
+        values: {
+          ...values,
+          technicians: [{ ...values.technicians[0], isActive: false }],
+        },
+        companyId: 10,
+        rowVersion: "rv-1",
+        originalRoster: activeRoster,
+      }),
+    ).rejects.toThrow("Use Deactivate to check open work orders before inactivating a technician.");
+    expect(updateVendor).not.toHaveBeenCalled();
+
+    await result.current.mutateAsync({
+      mode: "update",
+      values: {
+        ...values,
+        technicians: [{ ...values.technicians[0], isActive: true }],
+      },
+      companyId: 10,
+      rowVersion: "rv-1",
+      originalRoster: roster,
+    });
+    expect(updateVendor).toHaveBeenCalledWith(7, { isActive: true });
+  });
+});

From 5108f0e816e7550766957878e3a748dd61e4e025 Mon Sep 17 00:00:00 2001
From: "arthur.bassi" <arthur.bassi@luby.com.br>
Date: Mon, 10 Aug 2026 19:09:22 -0300
Subject: [PATCH 06/17] fix(work-orders): preserve dirty POC fields during site
 autofill

Only autofill empty POC name/phone when location detail resolves so createMode edits typed before the request finishes are not overwritten.
---
 .../list/table/cells/use-site-dialog-state.ts        | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state.ts b/src/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state.ts
index 7b943aad..17d44464 100644
--- a/src/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state.ts
+++ b/src/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state.ts
@@ -80,18 +80,24 @@ export function useSiteDialogState({
     if (!open || !locId || !locationDetail || pocFilledFor === locId) {
       return;
     }
-    setPn(locationDetail.contact ?? "");
-    setPp(locationDetail.phone ?? "");
+    // Only autofill empty fields so typed createMode POC edits are not overwritten.
+    setPn((prev) => (prev.trim() ? prev : (locationDetail.contact ?? "")));
+    setPp((prev) => (prev.trim() ? prev : (locationDetail.phone ?? "")));
     setPocFilledFor(locId);
   }, [open, locId, locationDetail, pocFilledFor]);
 
   const handlePick = (id: string) => {
     const next = sites.find((s) => String(s.id) === id);
+    const siteChanged = id !== locId;
     setLocId(id);
     if (next) {
       setCode(resolveSiteCode(next));
     }
-    if (id !== pocFilledFor) {
+    if (siteChanged) {
+      setPn("");
+      setPp("");
+      setPocFilledFor("");
+    } else if (id !== pocFilledFor) {
       setPocFilledFor("");
     }
   };

From 251edd9c61d2189ecf4ec3c3dd815173c0872452 Mon Sep 17 00:00:00 2001
From: "arthur.bassi" <arthur.bassi@luby.com.br>
Date: Tue, 11 Aug 2026 13:54:31 -0300
Subject: [PATCH 07/17] fix(work-orders): drop vendor collateral from
 slide-over PR

Restore vendors and page-header to origin/dev so this PR stays the WO
slide-over/media slice only. Remove stale godfile baseline entries now
under the 500-line cap.
---
 e2e/vendors/vendors.spec.ts                   | 147 ++++--
 e2e/vendors/vendors.visual.spec.ts            | 261 +++++++++++
 scripts/governance-baseline.json              |  13 +-
 .../_components/use-vendor-deactivation.ts    |   6 +-
 .../_components/use-vendor-list-state.ts      |   2 +-
 .../_components/use-vendor-roster-form.ts     |  16 +-
 .../_components/vendor-create-modal.tsx       |  33 +-
 .../_components/vendor-detail-drawer.tsx      | 418 ++++++++++++------
 .../_components/vendor-filter-options.tsx     | 252 +++++++++++
 .../_components/vendor-filters-drawer.tsx     | 239 +---------
 .../_components/vendor-roster-form-fields.tsx | 118 ++---
 .../_components/vendor-roster-page.tsx        |  47 --
 .../_components/vendors-list-toolbar.tsx      | 147 +++---
 .../vendors/_components/vendors-table.tsx     | 242 ++++++----
 src/app/(protected)/vendors/index.tsx         | 125 +++++-
 src/components/ui/page-header.tsx             |  25 +-
 .../use-save-vendor-company-roster.ts         |   5 -
 .../vendors/use-vendor-roster-form.test.tsx   | 136 ++----
 .../vendors/vendor-detail-drawer.test.tsx     |  58 ++-
 .../(protected)/vendors/vendors-list.test.tsx | 166 +++++--
 .../use-save-vendor-company-roster.test.ts    |  75 +---
 21 files changed, 1573 insertions(+), 958 deletions(-)
 create mode 100644 e2e/vendors/vendors.visual.spec.ts
 create mode 100644 src/app/(protected)/vendors/_components/vendor-filter-options.tsx

diff --git a/e2e/vendors/vendors.spec.ts b/e2e/vendors/vendors.spec.ts
index 8bbfdfb8..ad1a89e8 100644
--- a/e2e/vendors/vendors.spec.ts
+++ b/e2e/vendors/vendors.spec.ts
@@ -306,11 +306,18 @@ test.describe("Vendor directory prototype parity", () => {
   test("covers status tabs, global counts, search, facets, table fields, and filtered footer", async ({
     page,
   }) => {
+    await page.setViewportSize({ width: 1440, height: 1000 });
     const state = await mockVendorApi(page);
     await page.goto("/vendors");
 
-    await expect(page.getByRole("heading", { name: "Vendors / Technicians" })).toBeVisible();
-    await expect(page.getByText("3 vendor entries · 2 active")).toBeVisible();
+    const heading = page.getByRole("heading", { name: "Vendors / Technicians" });
+    await expect(heading).toBeVisible();
+    await expect(heading).toHaveCSS("font-family", /Montserrat/);
+    await expect(heading).toHaveCSS("font-size", "30px");
+    await expect(heading).toHaveCSS("font-weight", "800");
+    await expect(heading).toHaveCSS("line-height", "33px");
+    await expect(heading).toHaveCSS("letter-spacing", "-0.6px");
+    await expect(page.getByText("3 technicians · 2 active")).toBeVisible();
     await expect(page.getByRole("tab", { name: "Active (2)" })).toHaveAttribute(
       "aria-selected",
       "true",
@@ -323,52 +330,58 @@ test.describe("Vendor directory prototype parity", () => {
       "Phone",
       "Email",
       "Total Jobs",
-      "Status",
     ]) {
       await expect(page.getByRole("columnheader", { name: heading })).toBeVisible();
     }
+    await expect(page.getByRole("columnheader", { name: "Status" })).toBeVisible();
+    const activeTabBox = await page.getByRole("tab", { name: "Active (2)" }).boundingBox();
+    expect(activeTabBox).toMatchObject({ x: 256, y: 159.5, height: 36 });
+    const tableContainerBox = await page.locator("table").locator("..").boundingBox();
+    expect(tableContainerBox).toMatchObject({ x: 260, y: 212.5, width: 1164 });
+    expect(tableContainerBox?.height).toBeCloseTo(738, 0);
+    expect((await page.locator("table").boundingBox())?.width).toBe(1550);
+    expect((await page.getByRole("columnheader", { name: "Company" }).boundingBox())?.height).toBe(
+      47,
+    );
+    expect((await page.locator("tbody tr").first().boundingBox())?.height).toBe(52);
     await expect(page.getByText("Gateway Plumbing")).toBeVisible();
     await expect(page.getByText("+1")).toBeVisible();
-    await expect(page.getByText("2 active vendor entries · 2 active · 1 inactive")).toBeVisible();
+    await expect(page.getByText("2 active technicians")).toBeVisible();
+    await expect(page.getByText("2 active · 1 inactive")).toBeVisible();
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-list.png");
 
-    await page.getByPlaceholder("Search name, company, trade...").fill("metro");
+    await page.getByPlaceholder("Search name, company, trade…").fill("metro");
     await expect(page.getByText("Metro HVAC")).toBeVisible();
-    await expect(page.getByText(/1 active vendor entry · filtered/)).toBeVisible();
+    await expect(page.getByText(/1 active technician · filtered/)).toBeVisible();
     expect(state.listUrls.some((url) => new URL(url).searchParams.get("search") === "metro")).toBe(
       true,
     );
 
-    await page.getByPlaceholder("Search name, company, trade...").fill("clayton");
+    await page.getByPlaceholder("Search name, company, trade…").fill("clayton");
     await expect(page.getByText("Metro HVAC")).toBeVisible();
 
-    await page.getByPlaceholder("Search name, company, trade...").clear();
+    await page.getByPlaceholder("Search name, company, trade…").clear();
     await page.getByRole("button", { name: "Open vendor filters" }).click();
     await expect(page.getByRole("heading", { name: "Filters" })).toBeVisible();
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-filters.png");
     await page.getByRole("button", { name: /Company/ }).click();
     await page.getByPlaceholder("All companies").click();
     await page.getByRole("option", { name: /Gateway Plumbing/ }).click();
-    await page.getByRole("button", { name: "Apply" }).click();
+    await page.getByRole("button", { name: "Apply filters" }).click();
     await expect(page.getByText("Gateway Plumbing").first()).toBeVisible();
-    await expect(page.getByText(/1 active vendor entry · filtered/)).toBeVisible();
+    await expect(page.getByText("1 technician · filtered by")).toBeVisible();
+    await expect(page.getByText(/1 active technician · filtered/)).toBeVisible();
     expect(
       state.listUrls.some(
         (url) => new URL(url).searchParams.get("companies[0]") === "Gateway Plumbing",
       ),
     ).toBe(true);
 
-    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
-    await expect(page.getByRole("dialog", { name: "Deactivate Vendor" })).toContainText(
-      "history will be preserved",
-    );
-    await page.getByRole("button", { name: "Deactivate", exact: true }).click();
-    await expect.poll(() => state.deletedId).toBe("1");
-
     await page.getByRole("tab", { name: "Inactive (1)" }).click();
-    await expect(page.getByText("No vendors match the current filters.")).toBeVisible();
+    await expect(page.getByText("No inactive technicians found")).toBeVisible();
     await page.getByRole("button", { name: "Clear all" }).click();
     await expect(page.getByText("Drain Cleaning Bros")).toBeVisible();
+    await expect(page.getByRole("columnheader", { name: "Status" })).toBeVisible();
     await expect(page.getByRole("button", { name: "Deactivate vendor" })).toHaveCount(0);
   });
 
@@ -378,33 +391,35 @@ test.describe("Vendor directory prototype parity", () => {
     const state = await mockVendorApi(page);
     await page.goto("/vendors");
 
-    await page.getByRole("button", { name: "+ Add Vendor" }).click();
-    await expect(
-      page.getByText("Register a company and add zero, one, or multiple technicians."),
-    ).toBeVisible();
+    await page.getByRole("button", { name: "Add Vendor", exact: true }).click();
+    await expect(page.getByText("Register a vendor company and its technicians.")).toBeVisible();
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-add.png");
-    await expect(page.getByRole("button", { name: "Add Vendor Company" }).last()).toBeDisabled();
+    await expect(
+      page.getByRole("button", { name: "Add Vendor", exact: true }).last(),
+    ).toBeEnabled();
 
     await page.getByRole("combobox", { name: "Company" }).click();
     await page.getByRole("option", { name: "Gateway Plumbing" }).click();
-    await expect(page.getByLabel("Company Phone")).toHaveValue("314-555-0100");
-    await expect(page.getByRole("textbox", { name: "Email", exact: true })).toHaveValue(
+    await expect(page.getByLabel("Company Phone (optional)")).toHaveValue("314-555-0100");
+    await expect(page.getByRole("textbox", { name: "Email (optional)", exact: true })).toHaveValue(
       "dispatch@gateway.test",
     );
-    await expect(page.getByLabel("Address")).toHaveValue("1 Market St");
-    await expect(page.getByLabel("Google Maps URL")).toHaveValue("https://maps.google.com/gateway");
+    await expect(page.getByLabel("Address (optional)")).toHaveValue("1 Market St");
+    await expect(page.getByLabel("Google Maps URL (optional)")).toHaveValue(
+      "https://maps.google.com/gateway",
+    );
     await expect(page.getByLabel("Preferred Contact")).toHaveCount(0);
     await page.getByRole("button", { name: "Add technician" }).click();
-    await page.getByLabel("Technician Name").last().fill("New Technician");
+    await page.getByLabel("Technician name (optional)").last().fill("New Technician");
     const tradeInput = page.getByRole("combobox", { name: "Add Trade" }).last();
     await tradeInput.fill("HVAC");
     await tradeInput.press("Enter");
     await tradeInput.fill("Plumbing");
     await tradeInput.press("Enter");
     await page.getByRole("button", { name: "Move Plumbing up" }).click();
-    await page.getByLabel("Notes").fill("Created in browser E2E");
-    await page.getByRole("button", { name: "Add Vendor Company" }).last().click();
-    await expect(page.getByRole("dialog", { name: "Add Vendor Company" })).toHaveCount(0);
+    await page.getByLabel("Notes (optional)").fill("Created in browser E2E");
+    await page.getByRole("button", { name: "Add Vendor", exact: true }).last().click();
+    await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toHaveCount(0);
     expect(state.updatedBody).toMatchObject({
       name: "Gateway Plumbing",
       companyPhone: "(314) 555-0100",
@@ -429,7 +444,7 @@ test.describe("Vendor directory prototype parity", () => {
 
     await page.getByRole("button", { name: "View vendor Gateway Plumbing" }).click();
     const detailDrawer = page.locator(".MuiDrawer-paper").last();
-    await expect(detailDrawer.getByRole("heading", { name: "Gateway Plumbing" })).toBeVisible();
+    await expect(detailDrawer.getByRole("heading", { name: "Adam Whyte" })).toBeVisible();
     await expect(detailDrawer.getByText("Adam Whyte")).toBeVisible();
     await expect(detailDrawer.getByText("72")).toBeVisible();
     await expect(
@@ -438,9 +453,9 @@ test.describe("Vendor directory prototype parity", () => {
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-detail.png");
 
     await detailDrawer.getByRole("button", { name: "Edit" }).click();
-    await expect(page).toHaveURL(/\/vendors\/edit\/1$/);
-    await page.getByLabel("Notes").fill("Updated in browser E2E");
-    await page.getByRole("button", { name: "Save" }).click();
+    await expect(page).toHaveURL(/\/vendors$/);
+    await detailDrawer.getByLabel("Notes (optional)").fill("Updated in browser E2E");
+    await detailDrawer.getByRole("button", { name: "Save changes" }).click();
     await expect.poll(() => state.updatedBody?.notes).toBe("Updated in browser E2E");
   });
 
@@ -448,18 +463,18 @@ test.describe("Vendor directory prototype parity", () => {
     const state = await mockVendorApi(page, { legacyGateway: true });
     await page.goto("/vendors");
 
-    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
+    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
+    await page.getByRole("switch", { name: "Active status" }).click();
     await page.getByRole("button", { name: "Deactivate", exact: true }).click();
     await expect.poll(() => state.deletedId).toBe("1");
 
     await page.getByRole("tab", { name: "Inactive (2)" }).click();
-    await page.getByRole("button", { name: "View vendor Gateway Plumbing" }).click();
+    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
     const detailDrawer = page.locator(".MuiDrawer-paper").last();
-    await detailDrawer.getByRole("button", { name: "Edit" }).click();
-    await expect(page).toHaveURL(/\/vendors\/edit\/1$/);
-    await page.getByRole("switch", { name: "Inactive" }).first().click();
-    await page.getByRole("button", { name: "Save" }).click();
+    await detailDrawer.getByRole("switch", { name: "Active status" }).click();
+    await detailDrawer.getByRole("button", { name: "Save changes" }).click();
     await expect.poll(() => state.updatedBody).toEqual({ isActive: true });
+    await detailDrawer.getByRole("button", { name: "Close drawer" }).click();
     await page.getByRole("tab", { name: "Active (2)", exact: true }).click();
     await expect(page.getByText("Gateway Plumbing").first()).toBeVisible();
   });
@@ -468,7 +483,7 @@ test.describe("Vendor directory prototype parity", () => {
     const state = await mockVendorApi(page);
     await page.goto("/vendors");
 
-    const addButton = page.getByRole("button", { name: "+ Add Vendor" });
+    const addButton = page.getByRole("button", { name: "Add Vendor", exact: true });
     await addButton.focus();
     await page.keyboard.press("Enter");
     await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toBeVisible();
@@ -477,10 +492,12 @@ test.describe("Vendor directory prototype parity", () => {
     await expect(addButton).toBeFocused();
 
     await addButton.click();
-    await expect(page.getByRole("button", { name: "Add Vendor Company" }).last()).toBeDisabled();
+    await expect(
+      page.getByRole("button", { name: "Add Vendor", exact: true }).last(),
+    ).toBeEnabled();
     await page.getByRole("combobox", { name: "Company" }).fill("Independent Vendor LLC");
-    await page.getByLabel("Company Phone").fill("3145550199");
-    await page.getByRole("button", { name: "Add Vendor Company" }).last().click();
+    await page.getByLabel("Company Phone (optional)").fill("3145550199");
+    await page.getByRole("button", { name: "Add Vendor", exact: true }).last().click();
 
     await expect.poll(() => state.createdBody?.name).toBe("Independent Vendor LLC");
     expect(state.createdBody?.technicians).toEqual([]);
@@ -506,7 +523,8 @@ test.describe("Vendor directory prototype parity", () => {
     const blockedState = await mockVendorApi(page, { deactivationBlocked: true });
     await page.goto("/vendors");
 
-    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
+    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
+    await page.getByRole("switch", { name: "Active status" }).click();
     const blockedDialog = page.getByRole("dialog", { name: "Deactivate Vendor" });
     await expect(blockedDialog).toContainText("WO-501 — Emergency boiler repair");
     await expect(blockedDialog.getByRole("button", { name: /^Deactivate$/ })).toBeDisabled();
@@ -517,7 +535,8 @@ test.describe("Vendor directory prototype parity", () => {
 
     const racedState = await mockVendorApi(page, { deleteConflict: true });
     await page.reload();
-    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
+    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
+    await page.getByRole("switch", { name: "Active status" }).click();
     await page
       .getByRole("dialog", { name: "Deactivate Vendor" })
       .getByRole("button", {
@@ -537,10 +556,25 @@ test.describe("Vendor directory prototype parity", () => {
     await mockVendorApi(page, { listError: true });
     await page.goto("/vendors");
 
+    const mainBox = await page.getByRole("main").boundingBox();
+    expect(mainBox).toMatchObject({ x: 0, width: 390 });
+    const navigation = page.getByRole("navigation", { name: "Primary navigation" });
+    await expect(navigation).not.toBeVisible();
+
+    const openNavigation = page.getByRole("button", { name: "Toggle navigation" });
+    await openNavigation.focus();
+    await page.keyboard.press("Enter");
+    await expect(navigation).toBeVisible();
+    await expect(page.getByRole("link", { name: "Sites" })).toBeVisible();
+    await page.keyboard.press("Escape");
+    await expect(navigation).not.toBeVisible();
+    await expect(openNavigation).toBeFocused();
+
     await expect(page.getByRole("main").getByRole("alert")).toContainText(
       /Vendor directory unavailable|failed|server error/i,
       { timeout: 15_000 },
     );
+    await captureVisual(page, "/tmp/seahaven-vendor-implemented-mobile-list.png");
     await page.getByRole("button", { name: "Open vendor filters" }).click();
     const filterDrawer = page.locator(".MuiDrawer-paper").filter({ hasText: "Total Jobs" });
     await expect(filterDrawer).toBeVisible();
@@ -549,4 +583,23 @@ test.describe("Vendor directory prototype parity", () => {
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-mobile.png");
     await page.getByRole("button", { name: "Close filters" }).click();
   });
+
+  test("keeps protected shell destinations available and marks their selected state", async ({
+    page,
+  }) => {
+    await mockVendorApi(page);
+
+    for (const destination of [
+      { path: "/workorders", label: "Work Orders" },
+      { path: "/accounts", label: "Accounts" },
+      { path: "/locations", label: "Sites" },
+      { path: "/notifications", label: "Notifications" },
+    ]) {
+      await page.goto(destination.path);
+      await expect(page.getByRole("link", { name: destination.label })).toHaveAttribute(
+        "aria-current",
+        "page",
+      );
+    }
+  });
 });
diff --git a/e2e/vendors/vendors.visual.spec.ts b/e2e/vendors/vendors.visual.spec.ts
new file mode 100644
index 00000000..705c4f4e
--- /dev/null
+++ b/e2e/vendors/vendors.visual.spec.ts
@@ -0,0 +1,261 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+const TEST_USER = {
+  token: "vendor-visual-token",
+  expiration: "2030-01-01T00:00:00.000Z",
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Vendor Visual Admin",
+  id: "1",
+};
+
+const activeVendors = [
+  {
+    Id: 1,
+    CompanyId: 101,
+    CompanyName: "Gateway Plumbing",
+    ContactName: "Adam Whyte",
+    Email: "dispatch@gateway.test",
+    Phone: "314-555-0198",
+    CompanyPhone: "314-555-0100",
+    Address: "1 Market St",
+    City: "St. Louis",
+    State: "MO",
+    Zip: "63101",
+    TradeSpecialties: "Plumbing, Backflow Preventers",
+    GoogleMapsUrl: "https://maps.google.com/gateway",
+    Notes: "Preferred after-hours vendor",
+    TotalJobs: 72,
+    IsActive: true,
+    PreferredContact: "Email",
+  },
+  {
+    Id: 2,
+    CompanyId: 102,
+    CompanyName: "Metro HVAC",
+    ContactName: "Maya Chen",
+    Email: "maya@metro.test",
+    Phone: "314-555-0112",
+    CompanyPhone: "314-555-0110",
+    Address: "2 Pine St",
+    City: "Clayton",
+    State: "MO",
+    Zip: "63105",
+    TradeSpecialties: "HVAC",
+    GoogleMapsUrl: "",
+    Notes: "",
+    TotalJobs: 18,
+    IsActive: true,
+  },
+];
+
+const inactiveVendors = [
+  {
+    ...activeVendors[0],
+    Id: 3,
+    CompanyId: 103,
+    CompanyName: "Drain Cleaning Bros",
+    ContactName: "Drew Banks",
+    TotalJobs: 151,
+    IsActive: false,
+  },
+];
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+async function mockVendorApi(page: Page, mode: "default" | "empty" | "error" = "default") {
+  await page.clock.setFixedTime(new Date("2026-08-10T12:00:00.000Z"));
+  await page.addInitScript((user) => localStorage.setItem("auth", JSON.stringify(user)), TEST_USER);
+
+  await page.route("**/api/**", async (route) => {
+    const request = route.request();
+    const url = new URL(request.url());
+
+    if (!url.pathname.startsWith("/api/")) {
+      await route.continue();
+      return;
+    }
+
+    if (url.pathname.includes("/DropdownOptions/ByCategory/Trade")) {
+      await fulfillJson(route, {
+        data: [
+          { id: 1, value: "Plumbing" },
+          { id: 2, value: "HVAC" },
+        ],
+      });
+      return;
+    }
+
+    if (url.pathname.endsWith("/api/Vendor/facets")) {
+      await fulfillJson(route, {
+        data: {
+          companies: activeVendors.map((vendor) => ({
+            companyId: vendor.CompanyId,
+            name: vendor.CompanyName,
+          })),
+          trades: ["Plumbing", "Backflow Preventers", "HVAC"],
+          locations: [
+            { city: "St. Louis", state: "MO", label: "St. Louis, MO" },
+            { city: "Clayton", state: "MO", label: "Clayton, MO" },
+          ],
+          jobBuckets: [
+            { id: "under-50", label: "Under 50" },
+            { id: "50-99", label: "50–99" },
+            { id: "100-149", label: "100–149" },
+            { id: "150-plus", label: "150+" },
+          ],
+        },
+      });
+      return;
+    }
+
+    if (url.pathname.endsWith("/api/Vendor/GetVendorList")) {
+      const isCount = url.searchParams.get("pageSize") === "1";
+      if (mode === "error" && !isCount) {
+        await fulfillJson(route, { message: "Vendor directory unavailable" }, 500);
+        return;
+      }
+      const source =
+        mode === "empty"
+          ? []
+          : url.searchParams.get("isActive") === "false"
+            ? inactiveVendors
+            : activeVendors;
+      await fulfillJson(route, {
+        Data: isCount ? source.slice(0, 1) : source,
+        TotalCount: source.length,
+        PageNumber: 1,
+        PageSize: Number(url.searchParams.get("pageSize") ?? 12),
+      });
+      return;
+    }
+
+    if (url.pathname.startsWith("/api/vendor-company-roster")) {
+      await fulfillJson(route, {
+        companyId: 101,
+        rowVersion: "rv-visual",
+        name: "Gateway Plumbing",
+        companyPhone: "314-555-0100",
+        email: "dispatch@gateway.test",
+        address: "1 Market St",
+        city: "St. Louis",
+        state: "MO",
+        zip: "63101",
+        googleMapsUrl: "https://maps.google.com/gateway",
+        notes: "Preferred after-hours vendor",
+        technicians: [
+          {
+            id: 1,
+            contactName: "Adam Whyte",
+            phone: "314-555-0198",
+            email: "dispatch@gateway.test",
+            preferredContact: "Email",
+            tradeSpecialties: "Plumbing, Backflow Preventers",
+            isActive: true,
+            totalJobs: 72,
+          },
+        ],
+      });
+      return;
+    }
+
+    await fulfillJson(route, { data: {} });
+  });
+}
+
+async function openVendorPage(page: Page, mode: "default" | "empty" | "error" = "default") {
+  await mockVendorApi(page, mode);
+  await page.goto("/vendors");
+  await page.evaluate(() => document.fonts.ready);
+  await page.addStyleTag({
+    content: `
+      *, *::before, *::after { transition: none !important; animation: none !important; }
+      .MuiDrawer-paper { transform: none !important; }
+      .Toastify__toast-container { display: none !important; }
+      .tsqd-parent-container { display: none !important; }
+    `,
+  });
+}
+
+async function expectStableScreenshot(page: Page, name: string) {
+  await page.waitForTimeout(250);
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve) =>
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+      ),
+  );
+  await page.screenshot({ animations: "disabled", caret: "hide" });
+  await expect(page).toHaveScreenshot(name);
+}
+
+test.describe("Vendor deterministic pixel regression", () => {
+  test("list", async ({ page }) => {
+    await openVendorPage(page);
+    await expect(page.getByText("Gateway Plumbing")).toBeVisible();
+    await expectStableScreenshot(page, "vendor-list.png");
+  });
+
+  test("filter", async ({ page }) => {
+    await openVendorPage(page);
+    await page.getByRole("button", { name: "Open vendor filters" }).click();
+    await expect(page.getByRole("heading", { name: "Filters" })).toBeVisible();
+    await expectStableScreenshot(page, "vendor-filter.png");
+  });
+
+  test("add", async ({ page }) => {
+    await openVendorPage(page);
+    await page.getByRole("button", { name: "Add Vendor", exact: true }).click();
+    await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toBeVisible();
+    await expectStableScreenshot(page, "vendor-add.png");
+  });
+
+  test("detail", async ({ page }) => {
+    await openVendorPage(page);
+    await page.getByRole("button", { name: "View vendor Gateway Plumbing" }).click();
+    await expect(page.getByRole("button", { name: "Close drawer" })).toBeVisible();
+    await expectStableScreenshot(page, "vendor-detail.png");
+  });
+
+  test("edit", async ({ page }) => {
+    await openVendorPage(page);
+    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
+    await expect(page.getByRole("button", { name: "Save changes" })).toBeVisible();
+    await expectStableScreenshot(page, "vendor-edit.png");
+  });
+
+  test("inactive", async ({ page }) => {
+    await openVendorPage(page);
+    await page.getByRole("tab", { name: "Inactive (1)" }).click();
+    await expect(page.getByText("Drain Cleaning Bros")).toBeVisible();
+    await expectStableScreenshot(page, "vendor-inactive.png");
+  });
+
+  test("empty", async ({ page }) => {
+    await openVendorPage(page, "empty");
+    await expect(page.getByText("No active technicians found")).toBeVisible();
+    await expectStableScreenshot(page, "vendor-empty.png");
+  });
+
+  test("error", async ({ page }) => {
+    await openVendorPage(page, "error");
+    await expect(page.getByRole("main").getByRole("alert")).toContainText(
+      /server error|vendor directory unavailable/i,
+    );
+    await expectStableScreenshot(page, "vendor-error.png");
+  });
+
+  test("mobile", async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await openVendorPage(page);
+    await expect(page.getByText("Gateway Plumbing")).toBeVisible();
+    await expectStableScreenshot(page, "vendor-mobile.png");
+
+    await page.getByRole("button", { name: "Toggle navigation" }).click();
+    await expect(page.getByRole("navigation", { name: "Primary navigation" })).toBeVisible();
+    await expectStableScreenshot(page, "vendor-mobile-navigation.png");
+  });
+});
diff --git a/scripts/governance-baseline.json b/scripts/governance-baseline.json
index 401e1e70..3862e898 100644
--- a/scripts/governance-baseline.json
+++ b/scripts/governance-baseline.json
@@ -2,16 +2,5 @@
   "version": 1,
   "purpose": "Frozen grandfathered debt inventory for the frontend governance checks. New entries and cap increases fail the governance comparison. Existing caps may only decrease and entries must be removed when compliant.",
   "maxFileLines": 500,
-  "godfileDebt": [
-    {
-      "path": "src/app/(protected)/workorders/[id].tsx",
-      "maxLines": 797,
-      "reason": "Work-order detail route page; legacy godfile targeted for decomposition into focused state components."
-    },
-    {
-      "path": "src/app/(protected)/vendors/index.tsx",
-      "maxLines": 612,
-      "reason": "Vendors list route; legacy page with mixed query/filter/table state pending extraction."
-    }
-  ]
+  "godfileDebt": []
 }
diff --git a/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts b/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
index 2409814f..b63291be 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
@@ -15,9 +15,7 @@ export interface VendorDeactivationState {
   confirm: () => void;
 }
 
-export function useVendorDeactivation(options?: {
-  onSuccess?: () => void;
-}): VendorDeactivationState {
+export function useVendorDeactivation(onSuccess?: () => void): VendorDeactivationState {
   const [target, setTarget] = useState<VendorListItem | null>(null);
   const [error, setError] = useState<string | null>(null);
   const deleteVendor = useDeleteVendor();
@@ -43,7 +41,7 @@ export function useVendorDeactivation(options?: {
     deleteVendor.mutate(target.id, {
       onSuccess: () => {
         setTarget(null);
-        options?.onSuccess?.();
+        onSuccess?.();
       },
       onError: (err: Error) => setError(err.message || "Failed to deactivate vendor"),
     });
diff --git a/src/app/(protected)/vendors/_components/use-vendor-list-state.ts b/src/app/(protected)/vendors/_components/use-vendor-list-state.ts
index 9385a834..fdc90685 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-list-state.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-list-state.ts
@@ -31,7 +31,7 @@ export interface VendorListState {
 export function useVendorListState(): VendorListState {
   const [search, setSearch] = useState("");
   const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = useState(48);
   const [isActive, setIsActive] = useState(true);
   const [appliedFilters, setAppliedFilters] = useState<VendorFilters>(emptyVendorFilters);
 
diff --git a/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts b/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
index b4c3a51f..6bf89b1f 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from "react";
 import { useForm, useWatch, type FieldErrors } from "react-hook-form";
 import {
   emptyVendorCompanyRosterForm,
+  emptyRosterTechnician,
   vendorCompanyRosterSchema,
   type VendorCompanyRosterFormValues,
 } from "@/domain/vendors/schemas/vendor-roster-schema";
@@ -43,6 +44,7 @@ export interface VendorRosterFormProps {
   vendorId?: string | number;
   companyId?: string | number;
   onSuccess?: (roster: VendorCompanyRoster) => void;
+  startWithTechnician?: boolean;
 }
 
 export interface VendorRosterForm {
@@ -73,6 +75,7 @@ export function useVendorRosterForm({
   vendorId,
   companyId,
   onSuccess,
+  startWithTechnician = false,
 }: VendorRosterFormProps): VendorRosterForm {
   const query = useVendorCompanyRoster(
     mode === "update" ? vendorId : undefined,
@@ -87,9 +90,16 @@ export function useVendorRosterForm({
   const trades = useMemo(() => facets?.trades ?? [], [facets]);
   const resolver = useVendorRosterResolver(routeRoster);
 
+  const createDefaults = useMemo(
+    () => ({
+      ...emptyVendorCompanyRosterForm,
+      technicians: startWithTechnician ? [{ ...emptyRosterTechnician }] : [],
+    }),
+    [startWithTechnician],
+  );
   const form = useForm<VendorCompanyRosterFormValues>({
     resolver,
-    defaultValues: emptyVendorCompanyRosterForm,
+    defaultValues: createDefaults,
     values: mode === "update" && routeRoster ? toFormValues(routeRoster) : undefined,
     mode: "onChange",
   });
@@ -114,10 +124,10 @@ export function useVendorRosterForm({
   }, [routeRoster, watched]);
 
   const resetForm = useCallback(() => {
-    reset(emptyVendorCompanyRosterForm);
+    reset(createDefaults);
     resetSelection();
     clearConflict();
-  }, [clearConflict, reset, resetSelection]);
+  }, [clearConflict, createDefaults, reset, resetSelection]);
 
   const committedRoster = mode === "update" ? routeRoster : selection.selectedRoster;
   const isUpdate = mode === "update" || selection.selectedRoster != null;
diff --git a/src/app/(protected)/vendors/_components/vendor-create-modal.tsx b/src/app/(protected)/vendors/_components/vendor-create-modal.tsx
index d0025662..31804a3c 100644
--- a/src/app/(protected)/vendors/_components/vendor-create-modal.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-create-modal.tsx
@@ -8,8 +8,8 @@ import {
   DialogContent,
   DialogTitle,
   Stack,
-  Typography,
 } from "@mui/material";
+import { Text } from "@/components/ui/text";
 import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
 import { VendorRosterFormFields } from "./vendor-roster-form-fields";
 import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
@@ -21,7 +21,11 @@ interface VendorCreateModalProps {
 }
 
 export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
-  const form = useVendorRosterForm({ mode: "create", onSuccess: onClose });
+  const form = useVendorRosterForm({
+    mode: "create",
+    onSuccess: onClose,
+    startWithTechnician: true,
+  });
   const { resetForm } = form;
 
   useEffect(() => {
@@ -33,17 +37,24 @@ export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
       open={open}
       onClose={form.isSaving ? undefined : onClose}
       fullWidth
-      maxWidth="md"
+      maxWidth="sm"
       aria-labelledby="vendor-create-dialog-title"
-      slotProps={{ paper: { role: "dialog" } }}
+      slotProps={{
+        paper: {
+          role: "dialog",
+          sx: { maxHeight: "88vh", borderRadius: 2 },
+        },
+      }}
     >
       <DialogTitle id="vendor-create-dialog-title">
-        Add Vendor Company
-        <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.5 }}>
-          Register a company and add zero, one, or multiple technicians.
-        </Typography>
+        <Text variant="title" as="span">
+          Add Vendor
+        </Text>
+        <Text variant="description" tone="muted" sx={{ mt: 0.5 }}>
+          Register a vendor company and its technicians.
+        </Text>
       </DialogTitle>
-      <DialogContent>
+      <DialogContent sx={{ maxHeight: "55vh" }}>
         <Stack spacing={2} className="mt-1">
           {form.loadErrorMessage !== null && (
             <VendorRosterLoadErrorAlert message={form.loadErrorMessage} onRetry={form.retryLoad} />
@@ -73,9 +84,9 @@ export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
           variant="contained"
           type="submit"
           form="vendor-create-form"
-          disabled={form.isSaving || !form.isValid}
+          disabled={form.isSaving}
         >
-          {form.isSaving ? <CircularProgress size={20} color="inherit" /> : "Add Vendor Company"}
+          {form.isSaving ? <CircularProgress size={20} color="inherit" /> : "Add Vendor"}
         </Button>
       </DialogActions>
     </Dialog>
diff --git a/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx b/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx
index ad7ffa29..74d6ef02 100644
--- a/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx
@@ -1,5 +1,5 @@
-import { useEffect, type ReactNode } from "react";
-import { useNavigate } from "react-router";
+import { useEffect, useState, type ReactNode } from "react";
+import { Controller, useWatch } from "react-hook-form";
 import CloseIcon from "@mui/icons-material/Close";
 import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import LaunchIcon from "@mui/icons-material/Launch";
@@ -13,15 +13,22 @@ import {
   Drawer,
   IconButton,
   Link,
-  List,
-  ListItem,
   Stack,
-  Typography,
+  Switch,
 } from "@mui/material";
+import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
+import { VendorRosterFormFields } from "./vendor-roster-form-fields";
+import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
+import { useVendorRosterForm } from "./use-vendor-roster-form";
+import { Text } from "@/components/ui/text";
+import type {
+  VendorCompanyRoster,
+  VendorListItem,
+  VendorRosterTechnician,
+} from "@/domain/vendors/types/vendor";
 import { useVendorCompanyRoster } from "@/domain/vendors/use-cases/use-vendor-company-roster";
-import type { VendorCompanyRoster, VendorListItem } from "@/domain/vendors/types/vendor";
 
-const DRAWER_WIDTH = 440;
+const DRAWER_WIDTH = 420;
 
 function splitTrades(value: string | undefined): string[] {
   return (value ?? "")
@@ -33,106 +40,45 @@ function splitTrades(value: string | undefined): string[] {
 interface VendorDetailDrawerProps {
   open: boolean;
   vendor: VendorListItem | null;
+  startInEdit?: boolean;
+  onRequestDeactivation?: (vendor: VendorListItem) => void;
   onClose: () => void;
 }
 
 function SectionTitle({ children }: { children: ReactNode }) {
   return (
-    <Typography
-      variant="subtitle2"
-      className="font-semibold uppercase"
-      sx={{ color: "text.secondary", mb: 1 }}
+    <Text
+      variant="label"
+      tone="muted"
+      className="font-semibold tracking-[0.06em] uppercase"
+      sx={{ mb: 1 }}
     >
       {children}
-    </Typography>
+    </Text>
   );
 }
 
-function Field({ label, value }: { label: string; value: string }) {
-  const display = value && value.trim() !== "" ? value : "—";
+function Field({ label, value }: { label: string; value?: string }) {
+  const display = !value || value.trim() === "" ? "—" : value;
   return (
     <Box>
-      <Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
+      <Text variant="caption" tone="muted" sx={{ display: "block" }}>
         {label}
-      </Typography>
-      <Typography variant="body2">{display}</Typography>
+      </Text>
+      <Text variant="description">{display}</Text>
     </Box>
   );
 }
 
-function TechnicianEntry({
-  contactName,
-  phone,
-  email,
-  preferredContact,
-  tradeSpecialties,
-  isActive,
-  totalJobs,
-}: {
-  contactName: string;
-  phone: string;
-  email: string;
-  preferredContact?: string;
-  tradeSpecialties: string;
-  isActive: boolean;
-  totalJobs: number;
-}) {
-  const trades = splitTrades(tradeSpecialties);
-  return (
-    <ListItem disableGutters divider>
-      <Stack spacing={0.5} className="w-full">
-        <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
-          <Typography variant="body2" className="font-semibold">
-            {contactName || "—"}
-          </Typography>
-          <Chip
-            size="small"
-            label={isActive ? "Active" : "Inactive"}
-            color={isActive ? "success" : "default"}
-          />
-          <Typography variant="caption" sx={{ color: "text.secondary" }}>
-            {totalJobs} jobs
-          </Typography>
-        </Stack>
-        <Stack direction="row" spacing={2} className="flex flex-wrap">
-          {Boolean(phone) && (
-            <Link href={`tel:${phone}`} underline="hover">
-              {phone}
-            </Link>
-          )}
-          {Boolean(email) && (
-            <Link href={`mailto:${email}`} underline="hover">
-              {email}
-            </Link>
-          )}
-        </Stack>
-        <Stack direction="row" spacing={1} sx={{ alignItems: "center", flexWrap: "wrap" }}>
-          {Boolean(preferredContact) && (
-            <Typography variant="caption" sx={{ color: "text.secondary" }}>
-              Prefers {preferredContact}
-            </Typography>
-          )}
-          {trades.map((trade, index) => (
-            <Chip
-              key={`${trade}-${index}`}
-              size="small"
-              variant="outlined"
-              label={index === 0 ? `${trade} (primary)` : trade}
-            />
-          ))}
-        </Stack>
-      </Stack>
-    </ListItem>
-  );
-}
-
 function DrawerHeader({
   roster,
   vendor,
+  technician,
   onClose,
 }: {
   roster?: VendorCompanyRoster;
   vendor: VendorListItem | null;
+  technician?: VendorRosterTechnician;
   onClose: () => void;
 }) {
   return (
@@ -141,23 +87,18 @@ function DrawerHeader({
       sx={{
         alignItems: "center",
         justifyContent: "space-between",
-        px: 3,
+        px: 2.5,
         py: 2,
         borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
       }}
     >
       <Box>
-        <Typography
-          id="vendor-detail-drawer-title"
-          variant="subtitle1"
-          component="h2"
-          className="font-semibold"
-        >
-          {roster?.name || vendor?.companyName || "Vendor company"}
-        </Typography>
-        <Typography variant="caption" sx={{ color: "text.secondary" }}>
-          {roster ? `${roster.technicians.length} technician(s)` : "Vendor details"}
-        </Typography>
+        <Text id="vendor-detail-drawer-title" variant="title" as="h2" className="font-semibold">
+          {technician?.contactName || vendor?.contactName || roster?.name || "Vendor company"}
+        </Text>
+        <Text variant="description" tone="muted">
+          {roster?.name || vendor?.companyName || "Vendor details"}
+        </Text>
       </Box>
       <IconButton aria-label="Close drawer" onClick={onClose} size="small">
         <CloseIcon fontSize="small" />
@@ -167,18 +108,19 @@ function DrawerHeader({
 }
 
 function CompanySection({ roster }: { roster: VendorCompanyRoster }) {
-  const mapsUrl = roster.googleMapsUrl;
+  const address = [roster.address, roster.city, roster.state, roster.zip]
+    .filter(Boolean)
+    .join(", ");
+
   return (
     <Stack spacing={1.5}>
+      <Field label="Company" value={roster.name} />
       <Field label="Company Phone" value={roster.companyPhone} />
-      <Field label="Email" value={roster.email} />
-      <Field
-        label="Address"
-        value={[roster.address, roster.city, roster.state, roster.zip].filter(Boolean).join(", ")}
-      />
-      {Boolean(mapsUrl) && (
+      <Field label="Company Email" value={roster.email} />
+      <Field label="Address" value={address} />
+      {Boolean(roster.googleMapsUrl) && (
         <Link
-          href={mapsUrl}
+          href={roster.googleMapsUrl}
           target="_blank"
           rel="noopener noreferrer"
           className="inline-flex items-center gap-1"
@@ -191,49 +133,79 @@ function CompanySection({ roster }: { roster: VendorCompanyRoster }) {
   );
 }
 
-function TechniciansSection({ roster }: { roster: VendorCompanyRoster }) {
+function TechnicianSection({ technician }: { technician: VendorRosterTechnician }) {
+  const trades = splitTrades(technician.tradeSpecialties);
+
   return (
     <Box>
-      <SectionTitle>Technicians</SectionTitle>
-      {roster.technicians.length === 0 ? (
-        <Typography variant="body2" sx={{ color: "text.secondary" }}>
-          No technicians assigned to this company.
-        </Typography>
-      ) : (
-        <List disablePadding>
-          {roster.technicians.map((technician) => (
-            <TechnicianEntry
-              key={String(technician.id ?? technician.contactName)}
-              contactName={technician.contactName}
-              phone={technician.phone}
-              email={technician.email}
-              preferredContact={technician.preferredContact}
-              tradeSpecialties={technician.tradeSpecialties}
-              isActive={technician.isActive}
-              totalJobs={technician.totalJobs}
+      <Stack spacing={1.5}>
+        <Field label="Phone" value={technician.phone} />
+        <Box>
+          <Text variant="caption" tone="muted" sx={{ display: "block", mb: 0.75 }}>
+            Trade
+          </Text>
+          <Stack direction="row" spacing={0.75} sx={{ flexWrap: "wrap" }}>
+            {trades.length > 0 ? (
+              trades.map((trade, index) => (
+                <Chip key={`${trade}-${index}`} size="small" variant="outlined" label={trade} />
+              ))
+            ) : (
+              <Text variant="description">—</Text>
+            )}
+          </Stack>
+        </Box>
+        <Stack direction="row" spacing={4} sx={{ alignItems: "flex-end" }}>
+          <Box>
+            <Text variant="title">{technician.totalJobs ?? 0}</Text>
+            <Text variant="caption" tone="muted" sx={{ display: "block" }}>
+              Total Jobs
+            </Text>
+          </Box>
+          <Box>
+            <Text variant="caption" tone="muted" sx={{ display: "block", mb: 0.5 }}>
+              Status
+            </Text>
+            <Chip
+              size="small"
+              label={technician.isActive ? "Active" : "Inactive"}
+              color={technician.isActive ? "success" : "default"}
             />
-          ))}
-        </List>
-      )}
+          </Box>
+        </Stack>
+      </Stack>
     </Box>
   );
 }
 
-function DrawerBody({ roster }: { roster: VendorCompanyRoster }) {
+function DrawerBody({
+  roster,
+  technician,
+}: {
+  roster: VendorCompanyRoster;
+  technician?: VendorRosterTechnician;
+}) {
   return (
-    <Stack spacing={3} className="flex-1 overflow-y-auto" sx={{ px: 3, py: 3 }}>
-      <SectionTitle>Company</SectionTitle>
-      <CompanySection roster={roster} />
+    <Stack spacing={3} className="flex-1 overflow-y-auto" sx={{ p: 2.5 }}>
+      <Box>
+        <SectionTitle>Company</SectionTitle>
+        <CompanySection roster={roster} />
+      </Box>
       <Divider />
-      <TechniciansSection roster={roster} />
+      {technician ? (
+        <TechnicianSection technician={technician} />
+      ) : (
+        <Text variant="description" tone="muted">
+          No technicians assigned to this company.
+        </Text>
+      )}
       {Boolean(roster.notes) && (
         <>
           <Divider />
           <Box>
             <SectionTitle>Notes</SectionTitle>
-            <Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
+            <Text variant="description" sx={{ whiteSpace: "pre-wrap" }}>
               {roster.notes}
-            </Typography>
+            </Text>
           </Box>
         </>
       )}
@@ -246,8 +218,8 @@ function DrawerActions({ onEdit }: { onEdit: () => void }) {
     <Stack
       direction="row"
       sx={{
-        px: 3,
-        py: 2,
+        px: 2.5,
+        py: 1.5,
         borderTop: (theme) => `1px solid ${theme.palette.divider}`,
         alignItems: "center",
         justifyContent: "flex-end",
@@ -260,8 +232,143 @@ function DrawerActions({ onEdit }: { onEdit: () => void }) {
   );
 }
 
-export function VendorDetailDrawer({ open, vendor, onClose }: VendorDetailDrawerProps) {
-  const navigate = useNavigate();
+function DrawerEditor({
+  vendor,
+  onClose,
+  onSaved,
+  onRequestDeactivation = () => undefined,
+}: {
+  vendor: VendorListItem;
+  onClose: () => void;
+  onSaved: () => void;
+  onRequestDeactivation: (vendor: VendorListItem) => void;
+}) {
+  const form = useVendorRosterForm({
+    mode: "update",
+    vendorId: vendor.id ?? undefined,
+    companyId: vendor.id == null ? (vendor.companyId ?? undefined) : undefined,
+    onSuccess: onSaved,
+  });
+  const roster = form.roster;
+  const technicians = useWatch({ control: form.control, name: "technicians" }) ?? [];
+  const selectedIndex = technicians.findIndex(
+    (technician) => technician.id != null && String(technician.id) === String(vendor.id),
+  );
+  const selectedTotalJobs =
+    roster?.technicians.find(
+      (technician) => technician.id != null && String(technician.id) === String(vendor.id),
+    )?.totalJobs ?? vendor.totalJobs;
+
+  if (form.isLoading) {
+    return <CircularProgress size={28} sx={{ m: "auto" }} />;
+  }
+  if (form.isError || !roster) {
+    return (
+      <Alert severity="error" sx={{ m: 2 }}>
+        Failed to load vendor company. Try again.
+      </Alert>
+    );
+  }
+
+  return (
+    <Box
+      component="form"
+      id="vendor-drawer-edit-form"
+      onSubmit={form.handleSubmit(form.submit)}
+      className="flex min-h-0 flex-1 flex-col"
+    >
+      <Stack spacing={2} className="flex-1 overflow-y-auto" sx={{ p: 2.5 }}>
+        {form.loadErrorMessage !== null && (
+          <VendorRosterLoadErrorAlert message={form.loadErrorMessage} onRetry={form.retryLoad} />
+        )}
+        {form.conflict !== null && (
+          <VendorRosterConflictAlert conflict={form.conflict} onReload={form.reload} />
+        )}
+        <VendorRosterFormFields
+          control={form.control}
+          errors={form.errors}
+          tradeOptions={form.trades}
+          showTechnicianStatus={false}
+        />
+        {selectedIndex >= 0 && (
+          <>
+            <Divider />
+            <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
+              <Box>
+                <Text variant="title">{selectedTotalJobs}</Text>
+                <Text variant="caption" tone="muted">
+                  Total Jobs
+                </Text>
+              </Box>
+              <Controller
+                control={form.control}
+                name={`technicians.${selectedIndex}.isActive`}
+                render={({ field }) => (
+                  <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+                    <Text variant="description">{field.value ? "Active" : "Inactive"}</Text>
+                    <Switch
+                      checked={Boolean(field.value)}
+                      slotProps={{ input: { "aria-label": "Active status" } }}
+                      onChange={(_event, checked) => {
+                        if (field.value && !checked) onRequestDeactivation(vendor);
+                        else field.onChange(checked);
+                      }}
+                    />
+                  </Stack>
+                )}
+              />
+            </Stack>
+          </>
+        )}
+      </Stack>
+      <Stack
+        direction="row"
+        spacing={1.5}
+        sx={{ p: 2, borderTop: 1, borderColor: "divider", justifyContent: "flex-end" }}
+      >
+        <Button onClick={onClose} disabled={form.isSaving}>
+          Cancel
+        </Button>
+        <Button type="submit" variant="contained" disabled={form.isSaving || !form.isValid}>
+          {form.isSaving ? "Saving..." : "Save changes"}
+        </Button>
+      </Stack>
+    </Box>
+  );
+}
+
+function resolveTechnician(
+  roster: VendorCompanyRoster | undefined,
+  vendor: VendorListItem | null,
+): VendorRosterTechnician | undefined {
+  if (!roster || !vendor) return undefined;
+
+  const match = roster.technicians.find(
+    (technician) =>
+      vendor.id != null && technician.id != null && String(technician.id) === String(vendor.id),
+  );
+  if (match) return match;
+  if (!vendor.contactName) return undefined;
+
+  return {
+    id: vendor.id ?? undefined,
+    contactName: vendor.contactName,
+    phone: vendor.phone,
+    email: vendor.email,
+    tradeSpecialties: vendor.tradeSpecialties,
+    isActive: vendor.isActive,
+    totalJobs: vendor.totalJobs,
+  };
+}
+
+export function VendorDetailDrawer({
+  open,
+  vendor,
+  startInEdit = false,
+  onRequestDeactivation = () => undefined,
+  onClose,
+}: VendorDetailDrawerProps) {
+  const [isEditing, setIsEditing] = useState(startInEdit);
   const vendorId = vendor?.id;
   const companyId = vendor?.companyId;
   const hasVendorId = vendorId != null;
@@ -274,25 +381,30 @@ export function VendorDetailDrawer({ open, vendor, onClose }: VendorDetailDrawer
     !hasVendorId ? (companyId ?? undefined) : undefined,
   );
 
-  const editHref = hasVendorId
-    ? `/vendors/edit/${vendorId}`
-    : `/vendors/company/${companyId ?? ""}`;
+  const selectedTechnician = resolveTechnician(roster, vendor);
+
+  useEffect(() => {
+    if (open) setIsEditing(startInEdit);
+  }, [open, startInEdit, vendor]);
 
   useEffect(() => {
     if (!open) return;
 
     const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key === "Escape") onClose();
+      if (event.key === "Escape" && !isEditing) onClose();
     };
 
     window.addEventListener("keydown", closeOnEscape);
     return () => window.removeEventListener("keydown", closeOnEscape);
-  }, [onClose, open]);
+  }, [isEditing, onClose, open]);
 
   return (
     <Drawer
       open={open}
-      onClose={onClose}
+      onClose={(_event, reason) => {
+        if (reason === "escapeKeyDown" && isEditing) return;
+        onClose();
+      }}
       anchor="right"
       aria-labelledby="vendor-detail-drawer-title"
       ModalProps={{ keepMounted: false }}
@@ -304,9 +416,21 @@ export function VendorDetailDrawer({ open, vendor, onClose }: VendorDetailDrawer
       }}
     >
       <Stack className="flex h-full flex-col">
-        <DrawerHeader roster={roster} vendor={vendor} onClose={onClose} />
+        <DrawerHeader
+          roster={roster}
+          vendor={vendor}
+          technician={selectedTechnician}
+          onClose={onClose}
+        />
 
-        {isLoading ? (
+        {isEditing && vendor ? (
+          <DrawerEditor
+            vendor={vendor}
+            onClose={onClose}
+            onSaved={() => setIsEditing(false)}
+            onRequestDeactivation={onRequestDeactivation}
+          />
+        ) : isLoading ? (
           <Box className="flex flex-1 items-center justify-center">
             <CircularProgress size={28} />
           </Box>
@@ -316,14 +440,14 @@ export function VendorDetailDrawer({ open, vendor, onClose }: VendorDetailDrawer
           </Alert>
         ) : roster ? (
           <>
-            <DrawerBody roster={roster} />
-            <DrawerActions onEdit={() => navigate(editHref)} />
+            <DrawerBody roster={roster} technician={selectedTechnician} />
+            <DrawerActions onEdit={() => setIsEditing(true)} />
           </>
         ) : (
           <Box className="flex flex-1 items-center justify-center">
-            <Typography variant="body2" sx={{ color: "text.secondary" }}>
+            <Text variant="description" tone="muted">
               No vendor selected.
-            </Typography>
+            </Text>
           </Box>
         )}
       </Stack>
diff --git a/src/app/(protected)/vendors/_components/vendor-filter-options.tsx b/src/app/(protected)/vendors/_components/vendor-filter-options.tsx
new file mode 100644
index 00000000..c9be7d45
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-filter-options.tsx
@@ -0,0 +1,252 @@
+import type { Dispatch, ReactNode, SetStateAction } from "react";
+import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
+import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
+import TagOutlinedIcon from "@mui/icons-material/TagOutlined";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Autocomplete,
+  Box,
+  Button,
+  Checkbox,
+  Chip,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import type {
+  VendorFacets,
+  VendorFacetCompany,
+  VendorFacetJobBucket,
+  VendorFacetLocation,
+} from "@/domain/vendors/types/vendor";
+import type { VendorFilters } from "./vendor-filters";
+
+type DraftSetter = Dispatch<SetStateAction<VendorFilters>>;
+
+function FilterSection({
+  title,
+  icon,
+  children,
+}: {
+  title: string;
+  icon: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <Accordion disableGutters elevation={0} square sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${title}-filters-content`}>
+        <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
+          <Box sx={{ color: "primary.main", display: "flex" }}>{icon}</Box>
+          <Typography variant="subtitle1" className="font-semibold">
+            {title}
+          </Typography>
+        </Stack>
+      </AccordionSummary>
+      <AccordionDetails id={`${title}-filters-content`} sx={{ pt: 0, pb: 2.5 }}>
+        {children}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+function CompanyFilter({
+  options,
+  draft,
+  setDraft,
+}: {
+  options: VendorFacetCompany[];
+  draft: VendorFilters;
+  setDraft: DraftSetter;
+}) {
+  const allSelected = draft.companies.length === options.length && options.length > 0;
+  return (
+    <FilterSection title="Company" icon={<BusinessOutlinedIcon />}>
+      <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
+        <Typography variant="caption" sx={{ color: "text.secondary" }}>
+          Select vendor companies
+        </Typography>
+        <Button
+          size="small"
+          onClick={() =>
+            setDraft((current) => ({
+              ...current,
+              companies: allSelected ? [] : options.map((company) => company.name),
+            }))
+          }
+        >
+          {allSelected ? "Clear all" : "Select all"}
+        </Button>
+      </Stack>
+      <Autocomplete
+        multiple
+        size="small"
+        options={options}
+        getOptionLabel={(option) => (typeof option === "string" ? option : option.name)}
+        isOptionEqualToValue={(option, value) =>
+          typeof option === "string" || typeof value === "string"
+            ? option === value
+            : option.name === value.name
+        }
+        value={options.filter((option) => draft.companies.includes(option.name))}
+        onChange={(_event, value) => {
+          const next = (value as (string | VendorFacetCompany)[]).map((entry) =>
+            typeof entry === "string" ? entry : entry.name,
+          );
+          setDraft((current) => ({ ...current, companies: next }));
+        }}
+        renderOption={(props, option, { selected }) => {
+          const { key, ...optionProps } = props;
+          return (
+            <li key={key} {...optionProps}>
+              <Checkbox checked={selected} size="small" sx={{ mr: 1 }} />
+              {option.name}
+            </li>
+          );
+        }}
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const label = typeof option === "string" ? option : option.name;
+            const { key, ...chipProps } = getItemProps({ index });
+            return <Chip key={key} size="small" label={label} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            placeholder={draft.companies.length === 0 ? "All companies" : ""}
+          />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+function TradeFilter({ options, draft, setDraft }: FilterProps<string>) {
+  return (
+    <FilterSection title="Trade" icon={<BuildOutlinedIcon />}>
+      <Autocomplete
+        multiple
+        size="small"
+        options={options}
+        value={draft.trades}
+        onChange={(_event, value) =>
+          setDraft((current) => ({ ...current, trades: value as string[] }))
+        }
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const { key, ...chipProps } = getItemProps({ index });
+            return <Chip key={key} size="small" label={option} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField {...params} placeholder={draft.trades.length === 0 ? "All trades" : ""} />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+interface FilterProps<T> {
+  options: T[];
+  draft: VendorFilters;
+  setDraft: DraftSetter;
+}
+
+function LocationFilter({ options, draft, setDraft }: FilterProps<VendorFacetLocation>) {
+  return (
+    <FilterSection title="Location" icon={<LocationOnOutlinedIcon />}>
+      <Autocomplete
+        multiple
+        size="small"
+        options={options}
+        getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
+        isOptionEqualToValue={(option, value) =>
+          typeof option === "string" || typeof value === "string"
+            ? option === value
+            : option.label === value.label
+        }
+        value={options.filter((option) => draft.locations.includes(option.label))}
+        onChange={(_event, value) => {
+          const next = (value as (string | VendorFacetLocation)[]).map((entry) =>
+            typeof entry === "string" ? entry : entry.label,
+          );
+          setDraft((current) => ({ ...current, locations: next }));
+        }}
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const label = typeof option === "string" ? option : option.label;
+            const { key, ...chipProps } = getItemProps({ index });
+            return <Chip key={key} size="small" label={label} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            placeholder={draft.locations.length === 0 ? "All locations" : ""}
+          />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+function JobCountFilter({ options, draft, setDraft }: FilterProps<VendorFacetJobBucket>) {
+  return (
+    <FilterSection title="Total Jobs" icon={<TagOutlinedIcon />}>
+      <Autocomplete
+        multiple
+        size="small"
+        options={options}
+        getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
+        isOptionEqualToValue={(option, value) =>
+          typeof option === "string" || typeof value === "string"
+            ? option === value
+            : option.id === value.id
+        }
+        value={options.filter((option) => draft.jobBuckets.includes(option.id))}
+        onChange={(_event, value) => {
+          const next = (value as (string | VendorFacetJobBucket)[]).map((entry) =>
+            typeof entry === "string" ? entry : entry.id,
+          );
+          setDraft((current) => ({ ...current, jobBuckets: next }));
+        }}
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const label = typeof option === "string" ? option : option.label;
+            const { key, ...chipProps } = getItemProps({ index });
+            return <Chip key={key} size="small" label={label} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            placeholder={draft.jobBuckets.length === 0 ? "All job counts" : ""}
+          />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+export function VendorFilterOptions({
+  facets,
+  draft,
+  setDraft,
+}: {
+  facets: VendorFacets | undefined;
+  draft: VendorFilters;
+  setDraft: DraftSetter;
+}) {
+  return (
+    <>
+      <CompanyFilter options={facets?.companies ?? []} draft={draft} setDraft={setDraft} />
+      <TradeFilter options={facets?.trades ?? []} draft={draft} setDraft={setDraft} />
+      <LocationFilter options={facets?.locations ?? []} draft={draft} setDraft={setDraft} />
+      <JobCountFilter options={facets?.jobBuckets ?? []} draft={draft} setDraft={setDraft} />
+    </>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx b/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx
index ae4b51ba..e3b91cf5 100644
--- a/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx
@@ -1,32 +1,9 @@
-import { useEffect, useMemo, useState, type ReactNode } from "react";
-import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
-import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
+import { useEffect, useState } from "react";
 import CloseIcon from "@mui/icons-material/Close";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
-import TagOutlinedIcon from "@mui/icons-material/TagOutlined";
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Autocomplete,
-  Box,
-  Button,
-  Checkbox,
-  Chip,
-  Drawer,
-  IconButton,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
-import type {
-  VendorFacets,
-  VendorFacetCompany,
-  VendorFacetJobBucket,
-  VendorFacetLocation,
-} from "@/domain/vendors/types/vendor";
+import { Box, Button, Chip, Drawer, IconButton, Stack, Typography } from "@mui/material";
+import { VendorFilterOptions } from "./vendor-filter-options";
 import { emptyVendorFilters, type VendorFilters } from "./vendor-filters";
+import type { VendorFacets } from "@/domain/vendors/types/vendor";
 
 interface VendorFiltersDrawerProps {
   open: boolean;
@@ -38,32 +15,6 @@ interface VendorFiltersDrawerProps {
 
 const DRAWER_WIDTH = 360;
 
-function FilterSection({
-  title,
-  icon,
-  children,
-}: {
-  title: string;
-  icon: ReactNode;
-  children: ReactNode;
-}) {
-  return (
-    <Accordion disableGutters elevation={0} square sx={{ borderBottom: 1, borderColor: "divider" }}>
-      <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${title}-filters-content`}>
-        <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
-          <Box sx={{ color: "primary.main", display: "flex" }}>{icon}</Box>
-          <Typography variant="subtitle1" className="font-semibold">
-            {title}
-          </Typography>
-        </Stack>
-      </AccordionSummary>
-      <AccordionDetails id={`${title}-filters-content`} sx={{ pt: 0, pb: 2.5 }}>
-        {children}
-      </AccordionDetails>
-    </Accordion>
-  );
-}
-
 export function VendorFiltersDrawer({
   open,
   onClose,
@@ -74,23 +25,12 @@ export function VendorFiltersDrawer({
   const [draft, setDraft] = useState<VendorFilters>(appliedFilters);
 
   useEffect(() => {
-    if (open) {
-      setDraft(appliedFilters);
-    }
+    if (open) setDraft(appliedFilters);
   }, [open, appliedFilters]);
 
-  const companyOptions = useMemo(() => facets?.companies ?? [], [facets]);
-  const tradeOptions = useMemo(() => facets?.trades ?? [], [facets]);
-  const locationOptions = useMemo(() => facets?.locations ?? [], [facets]);
-  const jobBucketOptions = useMemo(() => facets?.jobBuckets ?? [], [facets]);
-
   const activeCount =
     draft.companies.length + draft.trades.length + draft.locations.length + draft.jobBuckets.length;
 
-  const handleClear = () => {
-    setDraft(emptyVendorFilters);
-  };
-
   const handleApply = () => {
     onApply(draft);
     onClose();
@@ -133,165 +73,7 @@ export function VendorFiltersDrawer({
         </Stack>
 
         <Box className="flex-1 overflow-y-auto" sx={{ px: 2.5 }}>
-          <FilterSection title="Company" icon={<BusinessOutlinedIcon />}>
-            <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
-              <Typography variant="caption" sx={{ color: "text.secondary" }}>
-                Select vendor companies
-              </Typography>
-              <Button
-                size="small"
-                onClick={() =>
-                  setDraft((current) => ({
-                    ...current,
-                    companies:
-                      current.companies.length === companyOptions.length
-                        ? []
-                        : companyOptions.map((company) => company.name),
-                  }))
-                }
-              >
-                {draft.companies.length === companyOptions.length && companyOptions.length > 0
-                  ? "Clear all"
-                  : "Select all"}
-              </Button>
-            </Stack>
-            <Autocomplete
-              multiple
-              size="small"
-              options={companyOptions}
-              getOptionLabel={(option) => (typeof option === "string" ? option : option.name)}
-              isOptionEqualToValue={(option, value) =>
-                typeof option === "string" || typeof value === "string"
-                  ? option === value
-                  : option.name === value.name
-              }
-              value={companyOptions.filter((option) => draft.companies.includes(option.name))}
-              onChange={(_event, value) => {
-                const next = (value as (string | VendorFacetCompany)[]).map((entry) =>
-                  typeof entry === "string" ? entry : entry.name,
-                );
-                setDraft((current) => ({ ...current, companies: next }));
-              }}
-              renderOption={(props, option, { selected }) => {
-                const { key, ...optionProps } = props;
-                return (
-                  <li key={key} {...optionProps}>
-                    <Checkbox checked={selected} size="small" sx={{ mr: 1 }} />
-                    {option.name}
-                  </li>
-                );
-              }}
-              renderValue={(value, getItemProps) =>
-                value.map((option, index) => {
-                  const label = typeof option === "string" ? option : option.name;
-                  const tagProps = getItemProps({ index });
-                  const { key, ...chipProps } = tagProps;
-                  return <Chip key={key} size="small" label={label} {...chipProps} />;
-                })
-              }
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  placeholder={draft.companies.length === 0 ? "All companies" : ""}
-                />
-              )}
-            />
-          </FilterSection>
-
-          <FilterSection title="Trade" icon={<BuildOutlinedIcon />}>
-            <Autocomplete
-              multiple
-              size="small"
-              options={tradeOptions}
-              value={draft.trades}
-              onChange={(_event, value) =>
-                setDraft((current) => ({ ...current, trades: value as string[] }))
-              }
-              renderValue={(value, getItemProps) =>
-                value.map((option, index) => {
-                  const tagProps = getItemProps({ index });
-                  const { key, ...chipProps } = tagProps;
-                  return <Chip key={key} size="small" label={option} {...chipProps} />;
-                })
-              }
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  placeholder={draft.trades.length === 0 ? "All trades" : ""}
-                />
-              )}
-            />
-          </FilterSection>
-
-          <FilterSection title="Location" icon={<LocationOnOutlinedIcon />}>
-            <Autocomplete
-              multiple
-              size="small"
-              options={locationOptions}
-              getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
-              isOptionEqualToValue={(option, value) =>
-                typeof option === "string" || typeof value === "string"
-                  ? option === value
-                  : option.label === value.label
-              }
-              value={locationOptions.filter((option) => draft.locations.includes(option.label))}
-              onChange={(_event, value) => {
-                const next = (value as (string | VendorFacetLocation)[]).map((entry) =>
-                  typeof entry === "string" ? entry : entry.label,
-                );
-                setDraft((current) => ({ ...current, locations: next }));
-              }}
-              renderValue={(value, getItemProps) =>
-                value.map((option, index) => {
-                  const label = typeof option === "string" ? option : option.label;
-                  const tagProps = getItemProps({ index });
-                  const { key, ...chipProps } = tagProps;
-                  return <Chip key={key} size="small" label={label} {...chipProps} />;
-                })
-              }
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  placeholder={draft.locations.length === 0 ? "All locations" : ""}
-                />
-              )}
-            />
-          </FilterSection>
-
-          <FilterSection title="Total Jobs" icon={<TagOutlinedIcon />}>
-            <Autocomplete
-              multiple
-              size="small"
-              options={jobBucketOptions}
-              getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
-              isOptionEqualToValue={(option, value) =>
-                typeof option === "string" || typeof value === "string"
-                  ? option === value
-                  : option.id === value.id
-              }
-              value={jobBucketOptions.filter((option) => draft.jobBuckets.includes(option.id))}
-              onChange={(_event, value) => {
-                const next = (value as (string | VendorFacetJobBucket)[]).map((entry) =>
-                  typeof entry === "string" ? entry : entry.id,
-                );
-                setDraft((current) => ({ ...current, jobBuckets: next }));
-              }}
-              renderValue={(value, getItemProps) =>
-                value.map((option, index) => {
-                  const label = typeof option === "string" ? option : option.label;
-                  const tagProps = getItemProps({ index });
-                  const { key, ...chipProps } = tagProps;
-                  return <Chip key={key} size="small" label={label} {...chipProps} />;
-                })
-              }
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  placeholder={draft.jobBuckets.length === 0 ? "All job counts" : ""}
-                />
-              )}
-            />
-          </FilterSection>
+          <VendorFilterOptions facets={facets} draft={draft} setDraft={setDraft} />
         </Box>
 
         <Stack
@@ -303,11 +85,16 @@ export function VendorFiltersDrawer({
             borderTop: (theme) => `1px solid ${theme.palette.divider}`,
           }}
         >
-          <Button variant="outlined" onClick={handleClear} disabled={activeCount === 0} fullWidth>
+          <Button
+            variant="outlined"
+            onClick={() => setDraft(emptyVendorFilters)}
+            disabled={activeCount === 0}
+            fullWidth
+          >
             Clear all
           </Button>
           <Button variant="contained" onClick={handleApply} fullWidth>
-            Apply
+            Apply filters
           </Button>
         </Stack>
       </Stack>
diff --git a/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx b/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
index d54c3016..d6d5cbf7 100644
--- a/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
@@ -1,10 +1,4 @@
-import {
-  Controller,
-  useFieldArray,
-  useWatch,
-  type Control,
-  type FieldErrors,
-} from "react-hook-form";
+import { Controller, useFieldArray, type Control, type FieldErrors } from "react-hook-form";
 import AddIcon from "@mui/icons-material/Add";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
 import {
@@ -34,7 +28,7 @@ interface VendorRosterFormFieldsProps {
   selectedCompanyId?: string | number | null;
   onSelectCompany?: (company: VendorFacetCompany | null) => Promise<void>;
   onClearSelectedCompany?: (nextName?: string) => void;
-  onRequestDeactivate?: (technician: RosterTechnicianValues) => void;
+  showTechnicianStatus?: boolean;
 }
 
 function CompanyNameField({
@@ -61,6 +55,7 @@ function CompanyNameField({
           <TextField
             {...field}
             label="Company"
+            placeholder="Start typing a company…"
             required
             error={Boolean(errors.name)}
             helperText={errors.name?.message}
@@ -105,8 +100,9 @@ function CompanyNameField({
               {...params}
               label="Company"
               required
+              placeholder="Start typing a company…"
               error={Boolean(errors.name)}
-              helperText={errors.name?.message ?? "Choose an existing company or enter a new one"}
+              helperText={errors.name?.message}
               inputRef={field.ref}
             />
           )}
@@ -126,10 +122,7 @@ function CompanyFields({
 }: VendorRosterFormFieldsProps) {
   return (
     <Box>
-      <Typography variant="subtitle2" className="font-semibold uppercase">
-        Company
-      </Typography>
-      <Stack spacing={2} className="mt-2">
+      <Stack spacing={2}>
         <CompanyNameField
           control={control}
           errors={errors}
@@ -145,13 +138,13 @@ function CompanyFields({
             render={({ field }) => (
               <TextField
                 {...field}
-                label="Company Phone"
-                placeholder="(XXX) XXX-XXXX"
+                label="Company Phone (optional)"
+                placeholder="(214) 555-0100"
                 inputMode="tel"
                 value={field.value ?? ""}
                 onChange={(event) => field.onChange(formatNorthAmericanPhone(event.target.value))}
                 error={Boolean(errors.companyPhone)}
-                helperText={errors.companyPhone?.message ?? "Phone or email required"}
+                helperText={errors.companyPhone?.message}
                 fullWidth
               />
             )}
@@ -162,7 +155,8 @@ function CompanyFields({
             render={({ field }) => (
               <TextField
                 {...field}
-                label="Email"
+                label="Email (optional)"
+                placeholder="dispatch@vendor.com"
                 type="email"
                 error={Boolean(errors.email)}
                 helperText={errors.email?.message}
@@ -174,9 +168,16 @@ function CompanyFields({
         <Controller
           control={control}
           name="address"
-          render={({ field }) => <TextField {...field} label="Address" fullWidth />}
+          render={({ field }) => (
+            <TextField
+              {...field}
+              label="Address (optional)"
+              placeholder="123 Industrial Pkwy, Dallas, TX 75201"
+              fullWidth
+            />
+          )}
         />
-        <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+        <Stack direction={{ xs: "column", sm: "row" }} spacing={2} sx={{ display: "none" }}>
           <Controller
             control={control}
             name="city"
@@ -201,10 +202,10 @@ function CompanyFields({
           render={({ field }) => (
             <TextField
               {...field}
-              label="Google Maps URL"
-              placeholder="https://maps.google.com/..."
+              label="Google Maps URL (optional)"
+              placeholder="https://maps.google.com/…"
               error={Boolean(errors.googleMapsUrl)}
-              helperText={errors.googleMapsUrl?.message ?? "Must be an HTTPS link"}
+              helperText={errors.googleMapsUrl?.message}
               fullWidth
             />
           )}
@@ -213,7 +214,14 @@ function CompanyFields({
           control={control}
           name="notes"
           render={({ field }) => (
-            <TextField {...field} label="Notes" multiline minRows={2} fullWidth />
+            <TextField
+              {...field}
+              label="Notes (optional)"
+              placeholder="Internal notes, scheduling preferences, certifications…"
+              multiline
+              minRows={2}
+              fullWidth
+            />
           )}
         />
       </Stack>
@@ -228,7 +236,7 @@ interface TechnicianRowProps {
   onRemove: () => void;
   canRemove: boolean;
   tradeOptions: string[];
-  onRequestDeactivate?: (technician: RosterTechnicianValues) => void;
+  showStatus: boolean;
 }
 
 function TechnicianRow({
@@ -238,15 +246,13 @@ function TechnicianRow({
   onRemove,
   canRemove,
   tradeOptions,
-  onRequestDeactivate,
+  showStatus,
 }: TechnicianRowProps) {
-  const technician = useWatch({ control, name: `technicians.${index}` });
-
   return (
     <Stack spacing={2} className="rounded-md border border-solid border-gray-200 p-3">
       <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
         <Typography variant="subtitle2" className="font-semibold">
-          Technician {index + 1}
+          {index + 1} - TECHNICIAN
         </Typography>
         <Tooltip title="Remove technician">
           <span>
@@ -267,7 +273,8 @@ function TechnicianRow({
         render={({ field }) => (
           <TextField
             {...field}
-            label="Technician Name"
+            label="Technician name (optional)"
+            placeholder="Technician name"
             error={Boolean(error?.contactName)}
             helperText={error?.contactName?.message}
             fullWidth
@@ -281,8 +288,8 @@ function TechnicianRow({
           render={({ field }) => (
             <TextField
               {...field}
-              label="Technician Phone"
-              placeholder="(XXX) XXX-XXXX"
+              label="Technician phone (optional)"
+              placeholder="(000) 000-0000"
               inputMode="tel"
               value={field.value ?? ""}
               onChange={(event) => field.onChange(formatNorthAmericanPhone(event.target.value))}
@@ -303,32 +310,29 @@ function TechnicianRow({
               error={Boolean(error?.email)}
               helperText={error?.email?.message}
               fullWidth
+              sx={{ display: "none" }}
             />
           )}
         />
       </Stack>
       <VendorTradeSpecialtiesField control={control} index={index} tradeOptions={tradeOptions} />
-      <Controller
-        control={control}
-        name={`technicians.${index}.isActive`}
-        render={({ field }) => (
-          <FormControlLabel
-            control={
-              <Switch
-                checked={field.value}
-                onChange={(_event, checked) => {
-                  if (!checked && technician?.id != null && onRequestDeactivate != null) {
-                    onRequestDeactivate(technician);
-                    return;
-                  }
-                  field.onChange(checked);
-                }}
-              />
-            }
-            label={field.value ? "Active" : "Inactive"}
-          />
-        )}
-      />
+      {showStatus && (
+        <Controller
+          control={control}
+          name={`technicians.${index}.isActive`}
+          render={({ field }) => (
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={field.value}
+                  onChange={(_event, checked) => field.onChange(checked)}
+                />
+              }
+              label={field.value ? "Active" : "Inactive"}
+            />
+          )}
+        />
+      )}
     </Stack>
   );
 }
@@ -337,12 +341,12 @@ function TechniciansFieldArray({
   control,
   errors,
   tradeOptions,
-  onRequestDeactivate,
+  showStatus,
 }: {
   control: Control<VendorCompanyRosterFormValues>;
   errors: FieldErrors<VendorCompanyRosterFormValues>;
   tradeOptions: string[];
-  onRequestDeactivate?: (technician: RosterTechnicianValues) => void;
+  showStatus: boolean;
 }) {
   const { fields, append, remove } = useFieldArray({ control, name: "technicians" });
 
@@ -385,7 +389,7 @@ function TechniciansFieldArray({
               onRemove={() => remove(index)}
               canRemove
               tradeOptions={tradeOptions}
-              onRequestDeactivate={onRequestDeactivate}
+              showStatus={showStatus}
             />
           ))
         )}
@@ -395,7 +399,7 @@ function TechniciansFieldArray({
 }
 
 export function VendorRosterFormFields(props: VendorRosterFormFieldsProps) {
-  const { control, errors, tradeOptions = [], onRequestDeactivate } = props;
+  const { control, errors, tradeOptions = [], showTechnicianStatus = true } = props;
   return (
     <Stack spacing={3}>
       <CompanyFields {...props} />
@@ -404,7 +408,7 @@ export function VendorRosterFormFields(props: VendorRosterFormFieldsProps) {
         control={control}
         errors={errors}
         tradeOptions={tradeOptions}
-        onRequestDeactivate={onRequestDeactivate}
+        showStatus={showTechnicianStatus}
       />
     </Stack>
   );
diff --git a/src/app/(protected)/vendors/_components/vendor-roster-page.tsx b/src/app/(protected)/vendors/_components/vendor-roster-page.tsx
index cf4e6daf..15f8ff9a 100644
--- a/src/app/(protected)/vendors/_components/vendor-roster-page.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-roster-page.tsx
@@ -1,44 +1,17 @@
 import type { ReactNode } from "react";
 import { useNavigate } from "react-router";
 import { Alert, Box, Button, CircularProgress, Paper, Stack, Typography } from "@mui/material";
-import { VendorDeactivationDialog } from "./vendor-deactivation-dialog";
 import { VendorPortalTokenPanel } from "./vendor-portal-token-panel";
 import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
 import { VendorRosterFormFields } from "./vendor-roster-form-fields";
 import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
-import { useVendorDeactivation } from "./use-vendor-deactivation";
 import { useVendorRosterForm } from "./use-vendor-roster-form";
-import type { RosterTechnicianValues } from "@/domain/vendors/schemas/vendor-roster-schema";
-import type { VendorCompanyRoster, VendorListItem } from "@/domain/vendors/types/vendor";
 
 interface VendorRosterPageProps {
   vendorId?: string;
   companyId?: string;
 }
 
-function toDeactivationListItem(
-  roster: VendorCompanyRoster,
-  technician: RosterTechnicianValues,
-): VendorListItem {
-  return {
-    id: technician.id ?? null,
-    companyId: roster.companyId,
-    companyName: roster.name,
-    contactName: technician.contactName,
-    email: technician.email,
-    phone: technician.phone,
-    companyPhone: roster.companyPhone,
-    googleMapsUrl: roster.googleMapsUrl,
-    notes: roster.notes,
-    totalJobs: 0,
-    city: roster.city,
-    state: roster.state,
-    tradeSpecialties: technician.tradeSpecialties,
-    isActive: technician.isActive,
-    preferredContact: technician.preferredContact ?? "Phone",
-  };
-}
-
 function PageShell({
   title,
   subtitle,
@@ -70,9 +43,6 @@ function PageShell({
 export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPageProps) {
   const navigate = useNavigate();
   const isEdit = vendorId !== undefined || companyId !== undefined;
-  const deactivation = useVendorDeactivation({
-    onSuccess: () => navigate("/vendors"),
-  });
   const form = useVendorRosterForm({
     mode: isEdit ? "update" : "create",
     vendorId,
@@ -80,11 +50,6 @@ export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPa
     onSuccess: () => navigate("/vendors"),
   });
 
-  const handleRequestDeactivate = (technician: RosterTechnicianValues) => {
-    if (!form.roster || technician.id == null) return;
-    deactivation.open(toDeactivationListItem(form.roster, technician));
-  };
-
   if (isEdit && form.isLoading) {
     return (
       <Box className="flex justify-center p-10">
@@ -139,7 +104,6 @@ export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPa
             control={form.control}
             errors={form.errors}
             tradeOptions={form.trades}
-            onRequestDeactivate={isEdit ? handleRequestDeactivate : undefined}
             {...companySelectionProps}
           />
 
@@ -161,17 +125,6 @@ export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPa
           </Stack>
         </Stack>
       </Box>
-
-      <VendorDeactivationDialog
-        target={deactivation.target}
-        isLoading={deactivation.isLoading}
-        isSaving={deactivation.isSaving}
-        error={deactivation.error}
-        impact={deactivation.impact}
-        impactError={deactivation.impactError}
-        onClose={deactivation.close}
-        onConfirm={deactivation.confirm}
-      />
     </PageShell>
   );
 }
diff --git a/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx b/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
index e3e7cfa5..b8ad2a9c 100644
--- a/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
+++ b/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
@@ -1,13 +1,9 @@
-import FilterListIcon from "@mui/icons-material/FilterList";
-import {
-  Button,
-  Chip,
-  CircularProgress,
-  Stack,
-  TablePagination,
-  TextField,
-  Typography,
-} from "@mui/material";
+import { Button, Chip, CircularProgress, Stack, TablePagination } from "@mui/material";
+import { Plus, SlidersHorizontal } from "lucide-react";
+import { PageHeader } from "@/components/ui/page-header";
+import { SearchInput } from "@/components/ui/search-input";
+import { Text } from "@/components/ui/text";
+import { ToolbarButton } from "@/components/ui/toolbar-button";
 
 interface VendorsListToolbarProps {
   globalCount: number;
@@ -33,52 +29,46 @@ export function VendorsListToolbar({
   onAddVendor,
 }: VendorsListToolbarProps) {
   return (
-    <Stack
-      direction={{ xs: "column", md: "row" }}
-      spacing={2}
-      sx={{
-        alignItems: { xs: "stretch", md: "center" },
-        justifyContent: "space-between",
-      }}
-    >
-      <Stack direction="row" spacing={2} sx={{ alignItems: "baseline" }}>
-        <Typography variant="h5" component="h1">
-          Vendors / Technicians
-        </Typography>
-        <Typography variant="body2" sx={{ color: "text.secondary" }}>
-          {globalCount} vendor entries · {activeCount} active
-        </Typography>
-        {isFetching && !isLoading && <CircularProgress size={16} />}
-      </Stack>
-
-      <Stack
-        direction={{ xs: "column", sm: "row" }}
-        spacing={2}
-        sx={{ alignItems: { xs: "stretch", sm: "center" } }}
-      >
-        <TextField
-          size="small"
-          value={search}
-          onChange={(e) => onSearchChange(e.target.value)}
-          placeholder="Search name, company, trade..."
-          className="min-w-[260px]"
-        />
-        <Button
-          variant="outlined"
-          onClick={onOpenFilters}
-          startIcon={<FilterListIcon />}
-          aria-label="Open vendor filters"
-        >
-          Filters
-          {appliedFilterCount > 0 && (
-            <Chip size="small" color="primary" label={appliedFilterCount} sx={{ ml: 1 }} />
+    <PageHeader
+      surface
+      className="-mx-4 -mt-4"
+      title="Vendors / Technicians"
+      subtitle={`${globalCount} technicians · ${activeCount} active`}
+      actions={
+        <>
+          <SearchInput
+            value={search}
+            onChange={onSearchChange}
+            placeholder="Search name, company, trade…"
+            aria-label="Search vendors"
+            fullWidth
+            className="w-full md:w-56"
+            inputClassName="h-8 py-0 text-[13px]"
+          />
+          <ToolbarButton
+            variant="outline"
+            icon={<SlidersHorizontal size={16} />}
+            onClick={onOpenFilters}
+            aria-label="Open vendor filters"
+            badge={appliedFilterCount}
+            className="min-w-[88.609375px] flex-1 text-[13px] md:w-[88.609375px] md:flex-none"
+          >
+            Filters
+          </ToolbarButton>
+          <ToolbarButton
+            variant="primary"
+            icon={<Plus size={16} />}
+            onClick={onAddVendor}
+            className="min-w-[115.546875px] flex-1 border-0 px-3 text-[13px] md:w-[115.546875px] md:flex-none"
+          >
+            Add Vendor
+          </ToolbarButton>
+          {isFetching && !isLoading && (
+            <CircularProgress size={14} aria-label="Refreshing vendors" role="status" />
           )}
-        </Button>
-        <Button variant="contained" onClick={onAddVendor}>
-          + Add Vendor
-        </Button>
-      </Stack>
-    </Stack>
+        </>
+      }
+    />
   );
 }
 
@@ -90,16 +80,21 @@ interface AppliedChipEntry {
 
 interface VendorAppliedFiltersBarProps {
   chips: AppliedChipEntry[];
+  resultCount: number;
   onClearAll: () => void;
 }
 
-export function VendorAppliedFiltersBar({ chips, onClearAll }: VendorAppliedFiltersBarProps) {
+export function VendorAppliedFiltersBar({
+  chips,
+  resultCount,
+  onClearAll,
+}: VendorAppliedFiltersBarProps) {
   if (chips.length === 0) return null;
   return (
     <Stack direction="row" spacing={1} className="flex flex-wrap items-center">
-      <Typography variant="caption" sx={{ color: "text.secondary" }}>
-        Applied:
-      </Typography>
+      <Text variant="caption" tone="muted">
+        {resultCount} {resultCount === 1 ? "technician" : "technicians"} · filtered by
+      </Text>
       {chips.map((chip) => (
         <Chip
           key={chip.key}
@@ -146,23 +141,31 @@ export function VendorsListFooter({
       sx={{
         alignItems: { xs: "stretch", sm: "center" },
         justifyContent: "space-between",
+        minHeight: 33.5,
+        mx: -2,
+        px: 2,
+        backgroundColor: "var(--color-bg-surface)",
       }}
     >
-      <Typography variant="body2" sx={{ color: "text.secondary" }}>
+      <Text variant="caption" as="span" sx={{ color: "#6b7a96", fontSize: 11, lineHeight: 1.5 }}>
         {totalCount} {isActive ? "active" : "inactive"}{" "}
-        {totalCount === 1 ? "vendor entry" : "vendor entries"}
+        {totalCount === 1 ? "technician" : "technicians"}
         {isFiltered && " · filtered"}
-        {` · ${activeCount} active · ${inactiveCount} inactive`}
-      </Typography>
-      <TablePagination
-        component="div"
-        count={totalCount}
-        page={page}
-        onPageChange={(_e, nextPage) => onPageChange(nextPage)}
-        rowsPerPage={pageSize}
-        onRowsPerPageChange={(e) => onPageSizeChange(Number(e.target.value))}
-        rowsPerPageOptions={[12, 24, 48]}
-      />
+      </Text>
+      <Text variant="caption" as="span" sx={{ color: "#6b7a96", fontSize: 11, lineHeight: 1.5 }}>
+        {activeCount} active · {inactiveCount} inactive
+      </Text>
+      {totalCount > pageSize && (
+        <TablePagination
+          component="div"
+          count={totalCount}
+          page={page}
+          onPageChange={(_e, nextPage) => onPageChange(nextPage)}
+          rowsPerPage={pageSize}
+          onRowsPerPageChange={(e) => onPageSizeChange(Number(e.target.value))}
+          rowsPerPageOptions={[24, 48, 96]}
+        />
+      )}
     </Stack>
   );
 }
diff --git a/src/app/(protected)/vendors/_components/vendors-table.tsx b/src/app/(protected)/vendors/_components/vendors-table.tsx
index 802fff8a..db588cff 100644
--- a/src/app/(protected)/vendors/_components/vendors-table.tsx
+++ b/src/app/(protected)/vendors/_components/vendors-table.tsx
@@ -1,11 +1,10 @@
 import { type KeyboardEvent, type MouseEvent } from "react";
-import { useNavigate } from "react-router";
-import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
+import SearchOffOutlinedIcon from "@mui/icons-material/SearchOffOutlined";
 import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
 import {
   Avatar,
-  Chip,
+  Box,
   CircularProgress,
   IconButton,
   Link,
@@ -18,8 +17,8 @@ import {
   TableHead,
   TableRow,
   Tooltip,
-  Typography,
 } from "@mui/material";
+import { Text } from "@/components/ui/text";
 import type { VendorListItem } from "@/domain/vendors/types/vendor";
 
 const TABLE_COLUMNS = [
@@ -30,9 +29,6 @@ const TABLE_COLUMNS = [
   "Phone",
   "Email",
   "Total Jobs",
-  "Status",
-  "View",
-  "Edit",
 ] as const;
 
 function getInitials(name: string): string {
@@ -54,19 +50,34 @@ function stopPropagation(event: MouseEvent): void {
   event.stopPropagation();
 }
 
+function VendorStatus({ isActive }: { isActive: boolean }) {
+  return (
+    <Stack direction="row" spacing={1} sx={{ alignItems: "center", pl: 1 }}>
+      <Box
+        component="span"
+        sx={{
+          width: 6,
+          height: 6,
+          borderRadius: "9999px",
+          backgroundColor: isActive ? "success.main" : "text.secondary",
+        }}
+      />
+      <Text variant="description">{isActive ? "Active" : "Inactive"}</Text>
+    </Stack>
+  );
+}
+
 interface VendorTableRowProps {
   row: VendorListItem;
   onOpenDetail: (row: VendorListItem) => void;
-  onOpenDeactivation: (row: VendorListItem) => void;
+  onOpenEdit: (row: VendorListItem) => void;
 }
 
-function VendorTableRow({ row, onOpenDetail, onOpenDeactivation }: VendorTableRowProps) {
-  const navigate = useNavigate();
+function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps) {
   const trades = splitTrades(row.tradeSpecialties);
   const primaryTrade = trades[0] ?? "—";
   const extraTrades = trades.length > 1 ? trades.length - 1 : 0;
   const locationText = [row.city, row.state].filter(Boolean).join(", ") || "—";
-  const hasVendorId = row.id != null;
   const rowKey = String(row.id ?? `company-${row.companyId ?? ""}`);
 
   const handleKeyDown = (event: KeyboardEvent) => {
@@ -88,37 +99,62 @@ function VendorTableRow({ row, onOpenDetail, onOpenDeactivation }: VendorTableRo
       onKeyDown={handleKeyDown}
     >
       <TableCell>
-        <Typography className="font-semibold">{row.companyName || "—"}</Typography>
+        <Text variant="description" sx={{ color: "var(--color-foreground)" }}>
+          {row.companyName || "—"}
+        </Text>
       </TableCell>
       <TableCell>
-        <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
+        <Stack direction="row" spacing={1.25} sx={{ alignItems: "center" }}>
           <Avatar
             sx={{
               width: 28,
               height: 28,
-              fontSize: 12,
-              backgroundColor: "var(--accent, #1976d2)",
+              backgroundColor: "var(--color-bg-muted)",
+              color: "var(--color-primary)",
+              fontSize: 10.5,
+              fontWeight: 600,
             }}
           >
             {getInitials(row.contactName)}
           </Avatar>
-          <Typography variant="body2">{row.contactName || "—"}</Typography>
+          <Text variant="description" sx={{ color: "var(--color-foreground)" }}>
+            {row.contactName || "—"}
+          </Text>
         </Stack>
       </TableCell>
-      <TableCell>{locationText}</TableCell>
-      <TableCell>
+      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>{locationText}</TableCell>
+      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>
         {primaryTrade === "—" ? (
           "—"
         ) : (
           <Stack direction="row" spacing={0.5} sx={{ alignItems: "center" }}>
             <span>{primaryTrade}</span>
-            {extraTrades > 0 && <Chip size="small" label={`+${extraTrades}`} />}
+            {extraTrades > 0 && (
+              <Box
+                component="span"
+                sx={{
+                  borderRadius: "9999px",
+                  backgroundColor: "var(--color-bg-muted)",
+                  px: 0.75,
+                  py: 0.25,
+                  fontSize: 10.5,
+                  lineHeight: 1.2,
+                }}
+              >
+                +{extraTrades}
+              </Box>
+            )}
           </Stack>
         )}
       </TableCell>
-      <TableCell>
+      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>
         {row.phone ? (
-          <Link href={`tel:${row.phone}`} underline="hover" onClick={stopPropagation}>
+          <Link
+            href={`tel:${row.phone}`}
+            underline="hover"
+            color="inherit"
+            onClick={stopPropagation}
+          >
             {row.phone}
           </Link>
         ) : (
@@ -127,71 +163,53 @@ function VendorTableRow({ row, onOpenDetail, onOpenDeactivation }: VendorTableRo
       </TableCell>
       <TableCell>
         {row.email ? (
-          <Link href={`mailto:${row.email}`} underline="hover" onClick={stopPropagation}>
+          <Link
+            href={`mailto:${row.email}`}
+            underline="hover"
+            sx={{ color: "#6b7a96" }}
+            onClick={stopPropagation}
+          >
             {row.email}
           </Link>
         ) : (
           "—"
         )}
       </TableCell>
-      <TableCell>{row.totalJobs ?? 0}</TableCell>
+      <TableCell align="center">{row.totalJobs ?? 0}</TableCell>
       <TableCell>
-        <Chip
-          size="small"
-          label={row.isActive ? "Active" : "Inactive"}
-          color={row.isActive ? "success" : "default"}
-        />
+        <VendorStatus isActive={row.isActive} />
       </TableCell>
-      <TableCell align="center">
-        <Tooltip title="View details">
-          <IconButton
-            size="small"
-            aria-label={`View vendor ${row.companyName}`}
-            onClick={(event) => {
-              event.stopPropagation();
-              onOpenDetail(row);
-            }}
-          >
-            <VisibilityOutlinedIcon fontSize="small" />
-          </IconButton>
-        </Tooltip>
-      </TableCell>
-      <TableCell align="center">
+      <TableCell align="right">
         <Stack
           direction="row"
           spacing={0.5}
-          sx={{ alignItems: "center", justifyContent: "center" }}
+          className="vendor-row-actions"
+          sx={{ alignItems: "center", justifyContent: "flex-end" }}
         >
+          <Tooltip title="View details">
+            <IconButton
+              size="small"
+              aria-label={`View vendor ${row.companyName}`}
+              onClick={(event) => {
+                event.stopPropagation();
+                onOpenDetail(row);
+              }}
+            >
+              <VisibilityOutlinedIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
           <Tooltip title="Edit">
             <IconButton
               size="small"
               aria-label={`Edit vendor ${row.companyName}`}
               onClick={(event) => {
                 event.stopPropagation();
-                navigate(
-                  row.id != null
-                    ? `/vendors/edit/${row.id}`
-                    : `/vendors/company/${row.companyId ?? ""}`,
-                );
+                onOpenEdit(row);
               }}
             >
               <EditOutlinedIcon fontSize="small" />
             </IconButton>
           </Tooltip>
-          {hasVendorId && row.isActive && (
-            <Tooltip title="Deactivate">
-              <IconButton
-                size="small"
-                aria-label="Deactivate vendor"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  onOpenDeactivation(row);
-                }}
-              >
-                <DeleteOutlineIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-          )}
         </Stack>
       </TableCell>
     </TableRow>
@@ -200,50 +218,118 @@ function VendorTableRow({ row, onOpenDetail, onOpenDeactivation }: VendorTableRo
 
 interface VendorsTableProps {
   rows: VendorListItem[];
+  isActive: boolean;
+  isFiltered: boolean;
   isLoading: boolean;
   showError: boolean;
   onOpenDetail: (row: VendorListItem) => void;
-  onOpenDeactivation: (row: VendorListItem) => void;
+  onOpenEdit: (row: VendorListItem) => void;
 }
 
 export function VendorsTable({
   rows,
+  isActive,
+  isFiltered,
   isLoading,
   showError,
   onOpenDetail,
-  onOpenDeactivation,
+  onOpenEdit,
 }: VendorsTableProps) {
   const showEmptyRow = !isLoading && !showError && rows.length === 0;
+  const columnCount = TABLE_COLUMNS.length + 2;
 
   return (
-    <TableContainer component={Paper} variant="outlined" sx={{ overflowX: "auto" }}>
-      <Table size="small" sx={{ minWidth: 960 }}>
+    <TableContainer
+      component={Paper}
+      variant="outlined"
+      sx={{
+        mt: 2,
+        mb: 2,
+        flex: "1 1 auto",
+        overflow: "auto",
+        borderRadius: 1.5,
+        fontSize: 13,
+      }}
+    >
+      <Table
+        size="small"
+        stickyHeader
+        sx={{
+          minWidth: 1550,
+          tableLayout: "fixed",
+          "& .MuiTableCell-head": {
+            backgroundColor: "var(--color-bg-muted)",
+            color: "var(--color-foreground)",
+            fontSize: 10.5,
+            fontWeight: 700,
+            letterSpacing: "0.06em",
+            lineHeight: "24px",
+            px: 1.75,
+            py: 1.375,
+            textTransform: "uppercase",
+            whiteSpace: "nowrap",
+          },
+          "& .MuiTableCell-body": {
+            fontSize: 13,
+            px: 1.5,
+            py: 1,
+            height: 52,
+            lineHeight: 1.43,
+            whiteSpace: "nowrap",
+          },
+          "& .vendor-row-actions": {
+            opacity: { xs: 1, md: 0 },
+            transition: "opacity 120ms ease",
+          },
+          "& .MuiTableRow-root:hover .vendor-row-actions, & .MuiTableRow-root:focus-within .vendor-row-actions":
+            {
+              opacity: 1,
+            },
+        }}
+      >
+        <colgroup>
+          <col style={{ width: 196.34375 }} />
+          <col style={{ width: 207.25 }} />
+          <col style={{ width: 152.703125 }} />
+          <col style={{ width: 218.15625 }} />
+          <col style={{ width: 152.703125 }} />
+          <col style={{ width: 251.90625 }} />
+          <col style={{ width: 109.078125 }} />
+          <col style={{ width: 119.984375 }} />
+          <col style={{ width: 141.875 }} />
+        </colgroup>
         <TableHead>
           <TableRow>
             {TABLE_COLUMNS.map((column) => (
-              <TableCell
-                key={column}
-                align={column === "View" || column === "Edit" ? "center" : "left"}
-                className="font-semibold"
-              >
+              <TableCell key={column} align={column === "Total Jobs" ? "center" : "left"}>
                 {column}
               </TableCell>
             ))}
+            <TableCell>Status</TableCell>
+            <TableCell align="right" aria-label="Vendor actions" />
           </TableRow>
         </TableHead>
         <TableBody>
           {isLoading ? (
             <TableRow>
-              <TableCell colSpan={TABLE_COLUMNS.length} align="center" className="py-10">
+              <TableCell colSpan={columnCount} align="center" className="py-10">
                 <CircularProgress size={28} />
               </TableCell>
             </TableRow>
           ) : showEmptyRow ? (
             <TableRow>
-              <TableCell colSpan={TABLE_COLUMNS.length} align="center" className="py-10">
-                <Typography sx={{ color: "text.secondary" }}>
-                  No vendors match the current filters.
-                </Typography>
+              <TableCell colSpan={columnCount} align="center" className="py-10">
+                <Stack spacing={1} sx={{ alignItems: "center" }}>
+                  <SearchOffOutlinedIcon sx={{ color: "text.secondary", fontSize: 32 }} />
+                  <Text variant="description" className="font-semibold">
+                    {`No ${isActive ? "active" : "inactive"} technicians found`}
+                  </Text>
+                  <Text variant="caption" tone="muted">
+                    {isFiltered
+                      ? "Try a different search, or add a new vendor."
+                      : "Add a vendor to get started."}
+                  </Text>
+                </Stack>
               </TableCell>
             </TableRow>
           ) : (
@@ -252,7 +338,7 @@ export function VendorsTable({
                 key={String(row.id ?? `company-${row.companyId ?? ""}`)}
                 row={row}
                 onOpenDetail={onOpenDetail}
-                onOpenDeactivation={onOpenDeactivation}
+                onOpenEdit={onOpenEdit}
               />
             ))
           )}
diff --git a/src/app/(protected)/vendors/index.tsx b/src/app/(protected)/vendors/index.tsx
index a084b59b..48447ad6 100644
--- a/src/app/(protected)/vendors/index.tsx
+++ b/src/app/(protected)/vendors/index.tsx
@@ -23,16 +23,91 @@ interface AppliedChip {
   label: string;
 }
 
+function statusTabLabel(label: string, count: number) {
+  return (
+    <Box className="flex items-center gap-2">
+      <Box component="span">{label}</Box>
+      <Box
+        component="span"
+        className="min-w-5 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none"
+        sx={{ backgroundColor: "action.hover", color: "text.secondary" }}
+      >
+        {count}
+      </Box>
+    </Box>
+  );
+}
+
+function VendorStatusTabs({
+  isActive,
+  activeCount,
+  inactiveCount,
+  onChange,
+}: {
+  isActive: boolean;
+  activeCount: number;
+  inactiveCount: number;
+  onChange: (isActive: boolean) => void;
+}) {
+  return (
+    <Tabs
+      value={isActive ? "active" : "inactive"}
+      onChange={(_event, value: "active" | "inactive") => onChange(value === "active")}
+      aria-label="Vendor status"
+      sx={{
+        minHeight: 36,
+        flexShrink: 0,
+        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+        backgroundColor: "var(--color-bg-surface)",
+        mx: -2,
+        px: 1.5,
+        "& .MuiTab-root": {
+          minHeight: 36,
+          px: 2,
+          py: 0,
+          fontSize: 13,
+          fontWeight: 500,
+          textTransform: "none",
+        },
+        "& .MuiTab-root:first-of-type": { width: 102.84375 },
+        "& .Mui-selected": { fontWeight: 600 },
+        "& .MuiTabs-indicator": { height: 2 },
+      }}
+    >
+      <Tab
+        value="active"
+        label={statusTabLabel("Active", activeCount)}
+        aria-label={`Active (${activeCount})`}
+      />
+      <Tab
+        value="inactive"
+        label={statusTabLabel("Inactive", inactiveCount)}
+        aria-label={`Inactive (${inactiveCount})`}
+      />
+    </Tabs>
+  );
+}
+
 function describeChips(
   filters: VendorFilters,
   jobBucketLabels: Map<string, string>,
 ): AppliedChip[] {
   const chips: AppliedChip[] = [];
-  filters.companies.forEach((value) => chips.push({ category: "companies", value, label: value }));
-  filters.trades.forEach((value) => chips.push({ category: "trades", value, label: value }));
-  filters.locations.forEach((value) => chips.push({ category: "locations", value, label: value }));
+  filters.companies.forEach((value) =>
+    chips.push({ category: "companies", value, label: `Company: ${value}` }),
+  );
+  filters.trades.forEach((value) =>
+    chips.push({ category: "trades", value, label: `Trade: ${value}` }),
+  );
+  filters.locations.forEach((value) =>
+    chips.push({ category: "locations", value, label: `Location: ${value}` }),
+  );
   filters.jobBuckets.forEach((value) =>
-    chips.push({ category: "jobBuckets", value, label: jobBucketLabels.get(value) ?? value }),
+    chips.push({
+      category: "jobBuckets",
+      value,
+      label: `Total Jobs: ${jobBucketLabels.get(value) ?? value}`,
+    }),
   );
   return chips;
 }
@@ -42,7 +117,12 @@ export default function VendorsListPage() {
   const [filtersOpen, setFiltersOpen] = useState(false);
   const [createOpen, setCreateOpen] = useState(false);
   const [detailTarget, setDetailTarget] = useState<VendorListItem | null>(null);
-  const deactivation = useVendorDeactivation();
+  const [detailStartsInEdit, setDetailStartsInEdit] = useState(false);
+  const closeDetail = () => {
+    setDetailTarget(null);
+    setDetailStartsInEdit(false);
+  };
+  const deactivation = useVendorDeactivation(closeDetail);
 
   const { data: facets } = useVendorFacets(filters.isActive);
   const { data, isLoading, isFetching, error } = useVendorsList(filters.listParams);
@@ -61,7 +141,7 @@ export default function VendorsListPage() {
   const appliedChips = describeChips(filters.appliedFilters, jobBucketLabels);
 
   return (
-    <Box className="flex flex-col gap-4 p-4">
+    <Box className="flex h-full flex-col overflow-hidden px-4 pt-4 pb-0">
       <VendorsListToolbar
         globalCount={activeCount + inactiveCount}
         activeCount={activeCount}
@@ -74,18 +154,15 @@ export default function VendorsListPage() {
         onAddVendor={() => setCreateOpen(true)}
       />
 
-      <Tabs
-        value={filters.isActive ? "active" : "inactive"}
-        onChange={(_event, value: "active" | "inactive") =>
-          filters.setIsActiveWithReset(value === "active")
-        }
-        aria-label="Vendor status"
-      >
-        <Tab value="active" label={`Active (${activeCount})`} />
-        <Tab value="inactive" label={`Inactive (${inactiveCount})`} />
-      </Tabs>
+      <VendorStatusTabs
+        isActive={filters.isActive}
+        activeCount={activeCount}
+        inactiveCount={inactiveCount}
+        onChange={filters.setIsActiveWithReset}
+      />
 
       <VendorAppliedFiltersBar
+        resultCount={totalCount}
         chips={appliedChips.map((chip) => ({
           key: `${chip.category}-${chip.value}`,
           label: chip.label,
@@ -102,10 +179,18 @@ export default function VendorsListPage() {
 
       <VendorsTable
         rows={rows}
+        isActive={filters.isActive}
+        isFiltered={appliedChips.length > 0 || Boolean(filters.debouncedSearch)}
         isLoading={isLoading}
         showError={Boolean(error)}
-        onOpenDetail={setDetailTarget}
-        onOpenDeactivation={deactivation.open}
+        onOpenDetail={(row) => {
+          setDetailStartsInEdit(false);
+          setDetailTarget(row);
+        }}
+        onOpenEdit={(row) => {
+          setDetailStartsInEdit(true);
+          setDetailTarget(row);
+        }}
       />
 
       <VendorsListFooter
@@ -133,7 +218,9 @@ export default function VendorsListPage() {
       <VendorDetailDrawer
         open={Boolean(detailTarget)}
         vendor={detailTarget}
-        onClose={() => setDetailTarget(null)}
+        startInEdit={detailStartsInEdit}
+        onRequestDeactivation={deactivation.open}
+        onClose={closeDetail}
       />
 
       <VendorDeactivationDialog
diff --git a/src/components/ui/page-header.tsx b/src/components/ui/page-header.tsx
index 566ae837..a826b90a 100644
--- a/src/components/ui/page-header.tsx
+++ b/src/components/ui/page-header.tsx
@@ -24,15 +24,16 @@ export function PageHeader({
 }: PageHeaderProps) {
   return (
     <Stack
-      direction="row"
+      direction={{ xs: "column", md: "row" }}
       className={cn(
         surface &&
           "-mx-2.5 -mt-2.5 shrink-0 border-b border-(--color-border) bg-(--color-bg-surface) px-5 py-4",
         className,
       )}
       sx={{
-        alignItems: "center",
+        alignItems: { xs: "stretch", md: "center" },
         justifyContent: "space-between",
+        gap: { xs: 2, md: 0 },
       }}
     >
       <Stack spacing={0}>
@@ -49,15 +50,31 @@ export function PageHeader({
             "m-0 font-display mt-1! text-[30px]! font-extrabold leading-[1.1] tracking-[-0.02em] text-foreground",
             eyebrow && "mt-1",
           )}
+          sx={{ fontSize: 30, fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em" }}
         >
           {title}
         </Text>
-        <Text variant="description" tone="muted" when={Boolean(subtitle)}>
+        <Text
+          variant="description"
+          as="span"
+          tone="muted"
+          when={Boolean(subtitle)}
+          sx={{ mt: 0.75, fontWeight: 500 }}
+        >
           {subtitle}
         </Text>
       </Stack>
       {Boolean(actions) && (
-        <Stack direction="row" spacing={1} sx={{ alignItems: "center", flexWrap: "nowrap" }}>
+        <Stack
+          direction="row"
+          spacing={1}
+          useFlexGap
+          sx={{
+            alignItems: "center",
+            flexWrap: { xs: "wrap", md: "nowrap" },
+            width: { xs: "100%", md: "auto" },
+          }}
+        >
           {actions}
         </Stack>
       )}
diff --git a/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts b/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts
index cdc4b010..37532220 100644
--- a/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts
+++ b/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts
@@ -91,11 +91,6 @@ export function useSaveVendorCompanyRoster(): UseMutationResult<
           ? getSingleStatusOnlyChange(originalRoster, values)
           : null;
         if (statusChange) {
-          if (statusChange.isActive === false) {
-            throw new Error(
-              "Use Deactivate to check open work orders before inactivating a technician.",
-            );
-          }
           const baseRoster = originalRoster as VendorCompanyRoster;
           await vendorsApi.update(statusChange.id, { isActive: statusChange.isActive });
           return {
diff --git a/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx b/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
index c460388d..2e9f8f1f 100644
--- a/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
+++ b/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
@@ -5,6 +5,7 @@ import { useController } from "react-hook-form";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const rosterGet = vi.fn();
+const saveMutate = vi.fn();
 
 vi.mock("@/domain/vendors/api/vendor-company-roster-api", () => ({
   vendorCompanyRosterApi: { get: (...args: unknown[]) => rosterGet(...args) },
@@ -24,8 +25,6 @@ vi.mock("@/domain/vendors/use-cases/use-vendor-facets", () => ({
   useVendorFacets: () => ({ data: { companies: [], trades: [] } }),
 }));
 
-const saveMutate = vi.fn();
-
 vi.mock("@/domain/vendors/use-cases/use-save-vendor-company-roster", async () => {
   const actual = await vi.importActual<
     typeof import("@/domain/vendors/use-cases/use-save-vendor-company-roster")
@@ -202,10 +201,47 @@ describe("useVendorRosterForm load-error handling", () => {
   });
 });
 
+describe("useVendorRosterForm prototype defaults", () => {
+  it("does not persist the prototype's untouched optional technician card", () => {
+    const { result } = renderHook(
+      () => useVendorRosterForm({ mode: "create", startWithTechnician: true }),
+      { wrapper: makeWrapper(createClient()) },
+    );
+
+    act(() => {
+      result.current.submit({
+        name: "Independent Vendor LLC",
+        companyPhone: "(314) 555-0199",
+        email: "",
+        address: "",
+        city: "",
+        state: "",
+        zip: "",
+        googleMapsUrl: "",
+        notes: "",
+        technicians: [
+          {
+            contactName: "",
+            phone: "",
+            email: "",
+            preferredContact: "Phone",
+            tradeSpecialties: "",
+            isActive: true,
+          },
+        ],
+      });
+    });
+
+    expect(saveMutate).toHaveBeenCalledWith(
+      expect.objectContaining({ values: expect.objectContaining({ technicians: [] }) }),
+      expect.any(Object),
+    );
+  });
+});
+
 describe("useVendorRosterForm stale-selection handling", () => {
   beforeEach(() => {
     rosterGet.mockReset();
-    saveMutate.mockReset();
   });
 
   it("keeps the newest company roster when two lookups resolve out of order", async () => {
@@ -280,97 +316,3 @@ describe("useVendorRosterForm stale-selection handling", () => {
     expect(result.current.name.field.value).toBe("Draft Vendor");
   });
 });
-
-describe("useVendorRosterForm blank technician filtering", () => {
-  beforeEach(() => {
-    rosterGet.mockReset();
-    saveMutate.mockReset();
-  });
-
-  it("omits blank new technician rows from the save payload", () => {
-    const { result } = renderHook(() => useVendorRosterForm({ mode: "create" }), {
-      wrapper: makeWrapper(createClient()),
-    });
-
-    act(() => {
-      result.current.submit({
-        name: "Gateway Plumbing",
-        companyPhone: "(314) 555-0100",
-        email: "dispatch@gateway.test",
-        address: "",
-        city: "",
-        state: "",
-        zip: "",
-        googleMapsUrl: "",
-        notes: "",
-        technicians: [
-          {
-            contactName: "Taylor",
-            phone: "(314) 555-0199",
-            email: "taylor@gateway.test",
-            tradeSpecialties: "Plumbing",
-            isActive: true,
-          },
-          {
-            contactName: "",
-            phone: "",
-            email: "",
-            tradeSpecialties: "",
-            isActive: true,
-          },
-        ],
-      });
-    });
-
-    expect(saveMutate).toHaveBeenCalledTimes(1);
-    const payload = saveMutate.mock.calls[0]?.[0] as {
-      values: { technicians: Array<{ contactName: string }> };
-    };
-    expect(payload.values.technicians).toHaveLength(1);
-    expect(payload.values.technicians[0]?.contactName).toBe("Taylor");
-  });
-
-  it("keeps existing technicians with an id even when contact fields are blank", () => {
-    const { result } = renderHook(() => useVendorRosterForm({ mode: "create" }), {
-      wrapper: makeWrapper(createClient()),
-    });
-
-    act(() => {
-      result.current.submit({
-        name: "Gateway Plumbing",
-        companyPhone: "(314) 555-0100",
-        email: "dispatch@gateway.test",
-        address: "",
-        city: "",
-        state: "",
-        zip: "",
-        googleMapsUrl: "",
-        notes: "",
-        technicians: [
-          {
-            id: 9,
-            contactName: "",
-            phone: "",
-            email: "",
-            tradeSpecialties: "",
-            isActive: true,
-          },
-        ],
-      });
-    });
-
-    const payload = saveMutate.mock.calls[0]?.[0] as {
-      values: { technicians: Array<{ id?: number }> };
-    };
-    expect(payload.values.technicians).toEqual([
-      {
-        id: 9,
-        contactName: "",
-        phone: "",
-        email: "",
-        tradeSpecialties: "",
-        isActive: true,
-      },
-    ]);
-  });
-});
diff --git a/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx b/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx
index a55ddaf0..df329a4a 100644
--- a/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx
+++ b/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx
@@ -49,11 +49,11 @@ function rosterWith(technicians: Array<Record<string, unknown>>) {
   };
 }
 
-describe("VendorDetailDrawer preferred-contact display", () => {
+describe("VendorDetailDrawer selected-technician display", () => {
   it("renders no preference label when preferredContact is absent", () => {
     useVendorCompanyRoster.mockReturnValue(
       rosterWith([
-        { id: 7, contactName: "Adam", phone: "314-555-0198", isActive: true, totalJobs: 5 },
+        { id: 1, contactName: "Adam", phone: "314-555-0198", isActive: true, totalJobs: 5 },
       ]),
     );
 
@@ -62,15 +62,15 @@ describe("VendorDetailDrawer preferred-contact display", () => {
       withAuth: false,
     });
 
-    expect(screen.getByText("Adam")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "Adam" })).toBeInTheDocument();
     expect(screen.queryByText(/^Prefers/)).not.toBeInTheDocument();
   });
 
-  it("renders the preference label when an explicit preferredContact is present", () => {
+  it("keeps the retired preferred-contact value out of the detail view", () => {
     useVendorCompanyRoster.mockReturnValue(
       rosterWith([
         {
-          id: 7,
+          id: 1,
           contactName: "Adam",
           phone: "314-555-0198",
           preferredContact: "Email",
@@ -85,6 +85,52 @@ describe("VendorDetailDrawer preferred-contact display", () => {
       withAuth: false,
     });
 
-    expect(screen.getByText("Prefers Email")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "Adam" })).toBeInTheDocument();
+    expect(screen.queryByText(/^Prefers/)).not.toBeInTheDocument();
+  });
+
+  it("falls back to the clicked row when the roster has no matching stable id", () => {
+    useVendorCompanyRoster.mockReturnValue(
+      rosterWith([
+        {
+          id: 7,
+          contactName: "Adam Whyte",
+          phone: "999-999-9999",
+          isActive: true,
+          totalJobs: 99,
+        },
+      ]),
+    );
+
+    renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
+      route: "/vendors",
+      withAuth: false,
+    });
+
+    expect(screen.getByText("0")).toBeInTheDocument();
+    expect(screen.queryByText("999-999-9999")).not.toBeInTheDocument();
+  });
+
+  it("does not expose a status control for a different technician", () => {
+    useVendorCompanyRoster.mockReturnValue(
+      rosterWith([
+        {
+          id: 7,
+          contactName: "Different Technician",
+          phone: "314-555-0101",
+          email: "",
+          tradeSpecialties: "Plumbing",
+          isActive: true,
+          totalJobs: 10,
+        },
+      ]),
+    );
+
+    renderWithProviders(
+      <VendorDetailDrawer open={true} vendor={vendor} startInEdit={true} onClose={vi.fn()} />,
+      { route: "/vendors", withAuth: false },
+    );
+
+    expect(screen.queryByRole("switch", { name: "Active status" })).not.toBeInTheDocument();
   });
 });
diff --git a/src/test/app/(protected)/vendors/vendors-list.test.tsx b/src/test/app/(protected)/vendors/vendors-list.test.tsx
index 64c71c69..a5fd7a64 100644
--- a/src/test/app/(protected)/vendors/vendors-list.test.tsx
+++ b/src/test/app/(protected)/vendors/vendors-list.test.tsx
@@ -1,21 +1,14 @@
-import { screen } from "@testing-library/react";
+import { screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import VendorsListPage from "@/app/(protected)/vendors/index";
-import type { VendorListItem } from "@/domain/vendors/types/vendor";
+import type { VendorCompanyRoster, VendorListItem } from "@/domain/vendors/types/vendor";
 import { renderWithProviders } from "@/test/test-utils";
 
 const useVendorsList = vi.fn();
 const useVendorCompanyRoster = vi.fn();
 const useVendorDeactivationImpact = vi.fn();
 const mutate = vi.fn();
-const navigate = vi.fn();
-
-vi.mock("react-router", async () => {
-  const actual = await vi.importActual("react-router");
-  return { ...actual, useNavigate: () => navigate };
-});
-
 vi.mock("@/domain/vendors/use-cases/use-vendors-list", () => ({
   useVendorsList: (...args: unknown[]) => useVendorsList(...args),
 }));
@@ -61,6 +54,32 @@ const inactiveVendor = {
   isActive: false,
 };
 
+const activeRoster: VendorCompanyRoster = {
+  companyId: "co-1",
+  rowVersion: "rv-1",
+  name: "Gateway Plumbing",
+  companyPhone: "(314) 555-0100",
+  email: "dispatch@gatewayplumbing.com",
+  address: "",
+  city: "St. Louis",
+  state: "MO",
+  zip: "",
+  googleMapsUrl: "",
+  notes: "",
+  technicians: [
+    {
+      id: 1,
+      contactName: "Adam Whyte",
+      phone: "(314) 555-0198",
+      email: "dispatch@gatewayplumbing.com",
+      preferredContact: "Email",
+      tradeSpecialties: "Backflow Preventers",
+      isActive: true,
+      totalJobs: 0,
+    },
+  ],
+};
+
 function result(items: VendorListItem[], totalCount: number) {
   return {
     data: { items, totalCount, page: 1, pageSize: 12 },
@@ -71,7 +90,13 @@ function result(items: VendorListItem[], totalCount: number) {
 }
 
 function setupDefaults() {
-  useVendorCompanyRoster.mockReturnValue({ data: undefined, isLoading: false, error: null });
+  useVendorCompanyRoster.mockReturnValue({
+    data: undefined,
+    isLoading: false,
+    isError: false,
+    error: null,
+    refetch: vi.fn(),
+  });
   useVendorDeactivationImpact.mockReturnValue({
     data: undefined,
     isLoading: false,
@@ -80,7 +105,7 @@ function setupDefaults() {
 }
 
 describe("VendorsListPage", () => {
-  it("renders prototype-aligned status tabs and location, then hides deactivation for inactive rows", async () => {
+  it("renders prototype-aligned status and two row actions in both tabs", async () => {
     setupDefaults();
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], params.isActive ? 1 : 1);
@@ -91,11 +116,20 @@ describe("VendorsListPage", () => {
 
     expect(screen.getByRole("heading", { name: "Vendors / Technicians" })).toBeInTheDocument();
     expect(screen.getByText("St. Louis, MO")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Deactivate vendor" })).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "Status" })).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: "Active" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "View vendor Gateway Plumbing" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Deactivate vendor" })).not.toBeInTheDocument();
 
     await userEvent.click(screen.getByRole("tab", { name: "Inactive (1)" }));
 
     expect(screen.getByText("Drain Cleaning Bros")).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: "Inactive" })).toBeInTheDocument();
     expect(screen.queryByRole("button", { name: "Deactivate vendor" })).not.toBeInTheDocument();
   });
 
@@ -114,39 +148,18 @@ describe("VendorsListPage", () => {
 
     renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
 
-    expect(screen.getByText(/25 active vendor entries/)).toBeInTheDocument();
-    expect(screen.queryByText(/3 active vendor entries/)).not.toBeInTheDocument();
+    expect(screen.getByText(/25 active technicians/)).toBeInTheDocument();
+    expect(screen.queryByText(/3 active technicians/)).not.toBeInTheDocument();
   });
 
   it("opens the detail drawer when a row is clicked or activated by keyboard", async () => {
     setupDefaults();
     useVendorCompanyRoster.mockReturnValue({
-      data: {
-        companyId: "co-1",
-        rowVersion: "rv-1",
-        name: "Gateway Plumbing",
-        companyPhone: "(314) 555-0198",
-        email: "dispatch@gatewayplumbing.com",
-        address: "",
-        city: "St. Louis",
-        state: "MO",
-        zip: "",
-        googleMapsUrl: "",
-        notes: "",
-        technicians: [
-          {
-            id: 1,
-            contactName: "Adam Whyte",
-            phone: "(314) 555-0198",
-            email: "dispatch@gatewayplumbing.com",
-            preferredContact: "Email",
-            tradeSpecialties: "Backflow Preventers",
-            isActive: true,
-          },
-        ],
-      },
+      data: activeRoster,
       isLoading: false,
+      isError: false,
       error: null,
+      refetch: vi.fn(),
     });
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], 1);
@@ -161,11 +174,18 @@ describe("VendorsListPage", () => {
     row.focus();
     await userEvent.keyboard("{Enter}");
 
-    expect(screen.getByRole("heading", { level: 2, name: "Gateway Plumbing" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "Adam Whyte" })).toBeInTheDocument();
   });
 
   it("blocks deactivation when the preflight reports open work orders", async () => {
     setupDefaults();
+    useVendorCompanyRoster.mockReturnValue({
+      data: activeRoster,
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
     useVendorDeactivationImpact.mockReturnValue({
       data: {
         vendorId: 1,
@@ -189,7 +209,8 @@ describe("VendorsListPage", () => {
 
     renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
 
-    await userEvent.click(screen.getByRole("button", { name: "Deactivate vendor" }));
+    await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
+    await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
 
     expect(
       screen.getByText(/cannot be deactivated because it still has open work orders/),
@@ -199,9 +220,51 @@ describe("VendorsListPage", () => {
     expect(mutate).not.toHaveBeenCalled();
   });
 
-  it("navigates to the vendor edit route when the table Edit control is clicked", async () => {
+  it("preserves inline edits when deactivation is cancelled", async () => {
     setupDefaults();
-    navigate.mockClear();
+    useVendorCompanyRoster.mockReturnValue({
+      data: activeRoster,
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    useVendorDeactivationImpact.mockReturnValue({
+      data: { vendorId: 1, canDeactivate: true, openWorkOrders: [] },
+      isLoading: false,
+      error: null,
+    });
+    useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
+      if (params.pageSize === 1) return result([], 1);
+      return params.isActive ? result([activeVendor], 1) : result([], 0);
+    });
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
+    const company = screen.getByRole("textbox", { name: "Company" });
+    await userEvent.clear(company);
+    await userEvent.type(company, "Draft Company Name");
+    await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
+    await userEvent.click(
+      within(screen.getByRole("dialog", { name: "Deactivate Vendor" })).getByRole("button", {
+        name: "Cancel",
+      }),
+    );
+
+    expect(company).toBeInTheDocument();
+    expect(company).toHaveValue("Draft Company Name");
+  });
+
+  it("opens inline edit when the table Edit control is clicked", async () => {
+    setupDefaults();
+    useVendorCompanyRoster.mockReturnValue({
+      data: activeRoster,
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], 1);
       return params.isActive ? result([activeVendor], 1) : result([], 0);
@@ -211,16 +274,20 @@ describe("VendorsListPage", () => {
 
     await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
 
-    expect(navigate).toHaveBeenCalledWith("/vendors/edit/1");
-    expect(
-      screen.queryByRole("heading", { level: 2, name: "Gateway Plumbing" }),
-    ).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Save changes" })).toBeInTheDocument();
+    expect(screen.getByRole("textbox", { name: "Company" })).toHaveValue("Gateway Plumbing");
   });
 
-  it("navigates to the company route when editing a vendor without a vendor id", async () => {
+  it("opens inline company edit when the row has no vendor id", async () => {
     setupDefaults();
-    navigate.mockClear();
     const companyOnlyVendor = { ...activeVendor, id: null, companyId: "co-9" };
+    useVendorCompanyRoster.mockReturnValue({
+      data: { ...activeRoster, companyId: "co-9", technicians: [] },
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], 1);
       return params.isActive ? result([companyOnlyVendor], 1) : result([], 0);
@@ -230,6 +297,7 @@ describe("VendorsListPage", () => {
 
     await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
 
-    expect(navigate).toHaveBeenCalledWith("/vendors/company/co-9");
+    expect(screen.getByRole("button", { name: "Save changes" })).toBeInTheDocument();
+    expect(screen.getByRole("textbox", { name: "Company" })).toHaveValue("Gateway Plumbing");
   });
 });
diff --git a/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts b/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts
index 9c61e64f..f0547378 100644
--- a/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts
+++ b/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts
@@ -1,32 +1,7 @@
-import { createElement, type ReactNode } from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { renderHook } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import {
-  getSingleStatusOnlyChange,
-  useSaveVendorCompanyRoster,
-} from "@/domain/vendors/use-cases/use-save-vendor-company-roster";
+import { describe, expect, it } from "vitest";
+import { getSingleStatusOnlyChange } from "@/domain/vendors/use-cases/use-save-vendor-company-roster";
 import type { VendorCompanyRoster } from "@/domain/vendors/types/vendor";
 
-const updateVendor = vi.fn();
-
-vi.mock("@/domain/vendors/api/vendors-api", () => ({
-  vendorsApi: {
-    update: (...args: unknown[]) => updateVendor(...args),
-  },
-}));
-
-vi.mock("@/domain/vendors/api/vendor-company-roster-api", () => ({
-  vendorCompanyRosterApi: {
-    update: vi.fn(),
-    create: vi.fn(),
-  },
-}));
-
-vi.mock("react-toastify", () => ({
-  toast: { success: vi.fn(), error: vi.fn() },
-}));
-
 const roster: VendorCompanyRoster = {
   companyId: 10,
   rowVersion: "rv-1",
@@ -94,49 +69,3 @@ describe("getSingleStatusOnlyChange", () => {
     ).toBeNull();
   });
 });
-
-describe("useSaveVendorCompanyRoster status-only deactivation gate", () => {
-  beforeEach(() => {
-    updateVendor.mockReset();
-    updateVendor.mockResolvedValue(undefined);
-  });
-
-  it("rejects sparse Active→Inactive updates and still allows reactivation", async () => {
-    const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-    const wrapper = ({ children }: { children: ReactNode }) =>
-      createElement(QueryClientProvider, { client }, children);
-
-    const { result } = renderHook(() => useSaveVendorCompanyRoster(), { wrapper });
-
-    const activeRoster: VendorCompanyRoster = {
-      ...roster,
-      technicians: [{ ...roster.technicians[0], isActive: true }],
-    };
-
-    await expect(
-      result.current.mutateAsync({
-        mode: "update",
-        values: {
-          ...values,
-          technicians: [{ ...values.technicians[0], isActive: false }],
-        },
-        companyId: 10,
-        rowVersion: "rv-1",
-        originalRoster: activeRoster,
-      }),
-    ).rejects.toThrow("Use Deactivate to check open work orders before inactivating a technician.");
-    expect(updateVendor).not.toHaveBeenCalled();
-
-    await result.current.mutateAsync({
-      mode: "update",
-      values: {
-        ...values,
-        technicians: [{ ...values.technicians[0], isActive: true }],
-      },
-      companyId: 10,
-      rowVersion: "rv-1",
-      originalRoster: roster,
-    });
-    expect(updateVendor).toHaveBeenCalledWith(7, { isActive: true });
-  });
-});

From f666ee215d8ee9a1a0cfaff7d3c43622f962a404 Mon Sep 17 00:00:00 2001
From: Arthur Bassi <arthur.bassi@luby.com.br>
Date: Tue, 11 Aug 2026 15:15:02 -0300
Subject: [PATCH 08/17] test(work-orders): cover site dialog POC autofill races

---
 .../workorders/use-site-dialog-state.test.tsx | 112 ++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 src/test/app/(protected)/workorders/use-site-dialog-state.test.tsx

diff --git a/src/test/app/(protected)/workorders/use-site-dialog-state.test.tsx b/src/test/app/(protected)/workorders/use-site-dialog-state.test.tsx
new file mode 100644
index 00000000..dc0adb78
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-site-dialog-state.test.tsx
@@ -0,0 +1,112 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useSiteDialogState } from "@/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state";
+import type { Location } from "@/domain/locations/types/location";
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+
+const detailById = new Map<string, Location>();
+
+vi.mock("@/domain/locations/use-cases/use-location-detail", () => ({
+  useLocationDetail: (id: string | undefined) => ({
+    data: id && detailById.has(id) ? detailById.get(id) : undefined,
+    isLoading: Boolean(id && !detailById.has(id)),
+    isError: false,
+  }),
+}));
+
+const SITES: LocationOption[] = [
+  { id: "loc-1", name: "BK5 · Dallas", siteCode: "BK5", city: "Dallas", state: "TX" },
+  { id: "loc-2", name: "SEA1 · Seattle", siteCode: "SEA1", city: "Seattle", state: "WA" },
+];
+
+function locationDetail(id: string, contact: string, phone: string): Location {
+  return {
+    id,
+    name: id,
+    contact,
+    phone,
+    address: "100 Main St",
+    city: "Dallas",
+    state: "TX",
+    zipCode: "75001",
+  };
+}
+
+function renderSiteDialogState() {
+  return renderHook(() =>
+    useSiteDialogState({
+      open: true,
+      onOpenChange: vi.fn(),
+      value: "",
+      locationId: "",
+      pocName: "",
+      pocPhone: "",
+      pocNotes: "",
+      sites: SITES,
+      createMode: true,
+      onSave: vi.fn(),
+    }),
+  );
+}
+
+describe("useSiteDialogState POC autofill", () => {
+  beforeEach(() => {
+    detailById.clear();
+  });
+
+  it("preserves POC typed before deferred location detail resolves", () => {
+    const { result, rerender } = renderSiteDialogState();
+
+    act(() => {
+      result.current.handlePick("loc-1");
+    });
+
+    act(() => {
+      result.current.setPn("Dispatcher Typed");
+      result.current.setPp("999-000-1111");
+    });
+
+    expect(result.current.pn).toBe("Dispatcher Typed");
+    expect(result.current.pp).toBe("999-000-1111");
+
+    detailById.set("loc-1", locationDetail("loc-1", "Site Contact", "214-555-0111"));
+    act(() => {
+      rerender();
+    });
+
+    expect(result.current.pn).toBe("Dispatcher Typed");
+    expect(result.current.pp).toBe("999-000-1111");
+  });
+
+  it("clears prior POC on site switch then autofills from the new site detail", () => {
+    const { result, rerender } = renderSiteDialogState();
+
+    act(() => {
+      result.current.handlePick("loc-1");
+    });
+
+    detailById.set("loc-1", locationDetail("loc-1", "Contact A", "111-111-1111"));
+    act(() => {
+      rerender();
+    });
+
+    expect(result.current.pn).toBe("Contact A");
+    expect(result.current.pp).toBe("111-111-1111");
+
+    act(() => {
+      result.current.handlePick("loc-2");
+    });
+
+    expect(result.current.locId).toBe("loc-2");
+    expect(result.current.pn).toBe("");
+    expect(result.current.pp).toBe("");
+
+    detailById.set("loc-2", locationDetail("loc-2", "Contact B", "222-222-2222"));
+    act(() => {
+      rerender();
+    });
+
+    expect(result.current.pn).toBe("Contact B");
+    expect(result.current.pp).toBe("222-222-2222");
+  });
+});

From c9637afbd8d8a3cb39cc91bf79250a2b27d184fd Mon Sep 17 00:00:00 2001
From: "arthur.bassi" <arthur.bassi@luby.com.br>
Date: Tue, 11 Aug 2026 15:29:44 -0300
Subject: [PATCH 09/17] fix(work-orders): drop unrelated vendor changes from
 completedDate PR

Keep SH-216 scoped to the completedDate board column only.
---
 e2e/vendors/vendors.spec.ts                   | 147 ++++--
 .../_components/use-vendor-deactivation.ts    |   6 +-
 .../_components/use-vendor-list-state.ts      |   2 +-
 .../_components/use-vendor-roster-form.ts     |  16 +-
 .../_components/vendor-create-modal.tsx       |  33 +-
 .../_components/vendor-detail-drawer.tsx      | 418 ++++++++++++------
 .../_components/vendor-filter-options.tsx     | 252 +++++++++++
 .../_components/vendor-filters-drawer.tsx     | 239 +---------
 .../_components/vendor-roster-form-fields.tsx | 118 ++---
 .../_components/vendor-roster-page.tsx        |  47 --
 .../_components/vendors-list-toolbar.tsx      | 147 +++---
 .../vendors/_components/vendors-table.tsx     | 242 ++++++----
 src/app/(protected)/vendors/index.tsx         | 125 +++++-
 src/components/ui/page-header.tsx             |  25 +-
 .../use-save-vendor-company-roster.ts         |   5 -
 .../vendors/use-vendor-roster-form.test.tsx   | 136 ++----
 .../vendors/vendor-detail-drawer.test.tsx     |  58 ++-
 .../(protected)/vendors/vendors-list.test.tsx | 166 +++++--
 .../use-save-vendor-company-roster.test.ts    |  75 +---
 tmp/pr-descriptions/pr1-completed-date.md     |  35 --
 20 files changed, 1312 insertions(+), 980 deletions(-)
 create mode 100644 src/app/(protected)/vendors/_components/vendor-filter-options.tsx
 delete mode 100644 tmp/pr-descriptions/pr1-completed-date.md

diff --git a/e2e/vendors/vendors.spec.ts b/e2e/vendors/vendors.spec.ts
index 8bbfdfb8..ad1a89e8 100644
--- a/e2e/vendors/vendors.spec.ts
+++ b/e2e/vendors/vendors.spec.ts
@@ -306,11 +306,18 @@ test.describe("Vendor directory prototype parity", () => {
   test("covers status tabs, global counts, search, facets, table fields, and filtered footer", async ({
     page,
   }) => {
+    await page.setViewportSize({ width: 1440, height: 1000 });
     const state = await mockVendorApi(page);
     await page.goto("/vendors");
 
-    await expect(page.getByRole("heading", { name: "Vendors / Technicians" })).toBeVisible();
-    await expect(page.getByText("3 vendor entries · 2 active")).toBeVisible();
+    const heading = page.getByRole("heading", { name: "Vendors / Technicians" });
+    await expect(heading).toBeVisible();
+    await expect(heading).toHaveCSS("font-family", /Montserrat/);
+    await expect(heading).toHaveCSS("font-size", "30px");
+    await expect(heading).toHaveCSS("font-weight", "800");
+    await expect(heading).toHaveCSS("line-height", "33px");
+    await expect(heading).toHaveCSS("letter-spacing", "-0.6px");
+    await expect(page.getByText("3 technicians · 2 active")).toBeVisible();
     await expect(page.getByRole("tab", { name: "Active (2)" })).toHaveAttribute(
       "aria-selected",
       "true",
@@ -323,52 +330,58 @@ test.describe("Vendor directory prototype parity", () => {
       "Phone",
       "Email",
       "Total Jobs",
-      "Status",
     ]) {
       await expect(page.getByRole("columnheader", { name: heading })).toBeVisible();
     }
+    await expect(page.getByRole("columnheader", { name: "Status" })).toBeVisible();
+    const activeTabBox = await page.getByRole("tab", { name: "Active (2)" }).boundingBox();
+    expect(activeTabBox).toMatchObject({ x: 256, y: 159.5, height: 36 });
+    const tableContainerBox = await page.locator("table").locator("..").boundingBox();
+    expect(tableContainerBox).toMatchObject({ x: 260, y: 212.5, width: 1164 });
+    expect(tableContainerBox?.height).toBeCloseTo(738, 0);
+    expect((await page.locator("table").boundingBox())?.width).toBe(1550);
+    expect((await page.getByRole("columnheader", { name: "Company" }).boundingBox())?.height).toBe(
+      47,
+    );
+    expect((await page.locator("tbody tr").first().boundingBox())?.height).toBe(52);
     await expect(page.getByText("Gateway Plumbing")).toBeVisible();
     await expect(page.getByText("+1")).toBeVisible();
-    await expect(page.getByText("2 active vendor entries · 2 active · 1 inactive")).toBeVisible();
+    await expect(page.getByText("2 active technicians")).toBeVisible();
+    await expect(page.getByText("2 active · 1 inactive")).toBeVisible();
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-list.png");
 
-    await page.getByPlaceholder("Search name, company, trade...").fill("metro");
+    await page.getByPlaceholder("Search name, company, trade…").fill("metro");
     await expect(page.getByText("Metro HVAC")).toBeVisible();
-    await expect(page.getByText(/1 active vendor entry · filtered/)).toBeVisible();
+    await expect(page.getByText(/1 active technician · filtered/)).toBeVisible();
     expect(state.listUrls.some((url) => new URL(url).searchParams.get("search") === "metro")).toBe(
       true,
     );
 
-    await page.getByPlaceholder("Search name, company, trade...").fill("clayton");
+    await page.getByPlaceholder("Search name, company, trade…").fill("clayton");
     await expect(page.getByText("Metro HVAC")).toBeVisible();
 
-    await page.getByPlaceholder("Search name, company, trade...").clear();
+    await page.getByPlaceholder("Search name, company, trade…").clear();
     await page.getByRole("button", { name: "Open vendor filters" }).click();
     await expect(page.getByRole("heading", { name: "Filters" })).toBeVisible();
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-filters.png");
     await page.getByRole("button", { name: /Company/ }).click();
     await page.getByPlaceholder("All companies").click();
     await page.getByRole("option", { name: /Gateway Plumbing/ }).click();
-    await page.getByRole("button", { name: "Apply" }).click();
+    await page.getByRole("button", { name: "Apply filters" }).click();
     await expect(page.getByText("Gateway Plumbing").first()).toBeVisible();
-    await expect(page.getByText(/1 active vendor entry · filtered/)).toBeVisible();
+    await expect(page.getByText("1 technician · filtered by")).toBeVisible();
+    await expect(page.getByText(/1 active technician · filtered/)).toBeVisible();
     expect(
       state.listUrls.some(
         (url) => new URL(url).searchParams.get("companies[0]") === "Gateway Plumbing",
       ),
     ).toBe(true);
 
-    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
-    await expect(page.getByRole("dialog", { name: "Deactivate Vendor" })).toContainText(
-      "history will be preserved",
-    );
-    await page.getByRole("button", { name: "Deactivate", exact: true }).click();
-    await expect.poll(() => state.deletedId).toBe("1");
-
     await page.getByRole("tab", { name: "Inactive (1)" }).click();
-    await expect(page.getByText("No vendors match the current filters.")).toBeVisible();
+    await expect(page.getByText("No inactive technicians found")).toBeVisible();
     await page.getByRole("button", { name: "Clear all" }).click();
     await expect(page.getByText("Drain Cleaning Bros")).toBeVisible();
+    await expect(page.getByRole("columnheader", { name: "Status" })).toBeVisible();
     await expect(page.getByRole("button", { name: "Deactivate vendor" })).toHaveCount(0);
   });
 
@@ -378,33 +391,35 @@ test.describe("Vendor directory prototype parity", () => {
     const state = await mockVendorApi(page);
     await page.goto("/vendors");
 
-    await page.getByRole("button", { name: "+ Add Vendor" }).click();
-    await expect(
-      page.getByText("Register a company and add zero, one, or multiple technicians."),
-    ).toBeVisible();
+    await page.getByRole("button", { name: "Add Vendor", exact: true }).click();
+    await expect(page.getByText("Register a vendor company and its technicians.")).toBeVisible();
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-add.png");
-    await expect(page.getByRole("button", { name: "Add Vendor Company" }).last()).toBeDisabled();
+    await expect(
+      page.getByRole("button", { name: "Add Vendor", exact: true }).last(),
+    ).toBeEnabled();
 
     await page.getByRole("combobox", { name: "Company" }).click();
     await page.getByRole("option", { name: "Gateway Plumbing" }).click();
-    await expect(page.getByLabel("Company Phone")).toHaveValue("314-555-0100");
-    await expect(page.getByRole("textbox", { name: "Email", exact: true })).toHaveValue(
+    await expect(page.getByLabel("Company Phone (optional)")).toHaveValue("314-555-0100");
+    await expect(page.getByRole("textbox", { name: "Email (optional)", exact: true })).toHaveValue(
       "dispatch@gateway.test",
     );
-    await expect(page.getByLabel("Address")).toHaveValue("1 Market St");
-    await expect(page.getByLabel("Google Maps URL")).toHaveValue("https://maps.google.com/gateway");
+    await expect(page.getByLabel("Address (optional)")).toHaveValue("1 Market St");
+    await expect(page.getByLabel("Google Maps URL (optional)")).toHaveValue(
+      "https://maps.google.com/gateway",
+    );
     await expect(page.getByLabel("Preferred Contact")).toHaveCount(0);
     await page.getByRole("button", { name: "Add technician" }).click();
-    await page.getByLabel("Technician Name").last().fill("New Technician");
+    await page.getByLabel("Technician name (optional)").last().fill("New Technician");
     const tradeInput = page.getByRole("combobox", { name: "Add Trade" }).last();
     await tradeInput.fill("HVAC");
     await tradeInput.press("Enter");
     await tradeInput.fill("Plumbing");
     await tradeInput.press("Enter");
     await page.getByRole("button", { name: "Move Plumbing up" }).click();
-    await page.getByLabel("Notes").fill("Created in browser E2E");
-    await page.getByRole("button", { name: "Add Vendor Company" }).last().click();
-    await expect(page.getByRole("dialog", { name: "Add Vendor Company" })).toHaveCount(0);
+    await page.getByLabel("Notes (optional)").fill("Created in browser E2E");
+    await page.getByRole("button", { name: "Add Vendor", exact: true }).last().click();
+    await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toHaveCount(0);
     expect(state.updatedBody).toMatchObject({
       name: "Gateway Plumbing",
       companyPhone: "(314) 555-0100",
@@ -429,7 +444,7 @@ test.describe("Vendor directory prototype parity", () => {
 
     await page.getByRole("button", { name: "View vendor Gateway Plumbing" }).click();
     const detailDrawer = page.locator(".MuiDrawer-paper").last();
-    await expect(detailDrawer.getByRole("heading", { name: "Gateway Plumbing" })).toBeVisible();
+    await expect(detailDrawer.getByRole("heading", { name: "Adam Whyte" })).toBeVisible();
     await expect(detailDrawer.getByText("Adam Whyte")).toBeVisible();
     await expect(detailDrawer.getByText("72")).toBeVisible();
     await expect(
@@ -438,9 +453,9 @@ test.describe("Vendor directory prototype parity", () => {
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-detail.png");
 
     await detailDrawer.getByRole("button", { name: "Edit" }).click();
-    await expect(page).toHaveURL(/\/vendors\/edit\/1$/);
-    await page.getByLabel("Notes").fill("Updated in browser E2E");
-    await page.getByRole("button", { name: "Save" }).click();
+    await expect(page).toHaveURL(/\/vendors$/);
+    await detailDrawer.getByLabel("Notes (optional)").fill("Updated in browser E2E");
+    await detailDrawer.getByRole("button", { name: "Save changes" }).click();
     await expect.poll(() => state.updatedBody?.notes).toBe("Updated in browser E2E");
   });
 
@@ -448,18 +463,18 @@ test.describe("Vendor directory prototype parity", () => {
     const state = await mockVendorApi(page, { legacyGateway: true });
     await page.goto("/vendors");
 
-    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
+    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
+    await page.getByRole("switch", { name: "Active status" }).click();
     await page.getByRole("button", { name: "Deactivate", exact: true }).click();
     await expect.poll(() => state.deletedId).toBe("1");
 
     await page.getByRole("tab", { name: "Inactive (2)" }).click();
-    await page.getByRole("button", { name: "View vendor Gateway Plumbing" }).click();
+    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
     const detailDrawer = page.locator(".MuiDrawer-paper").last();
-    await detailDrawer.getByRole("button", { name: "Edit" }).click();
-    await expect(page).toHaveURL(/\/vendors\/edit\/1$/);
-    await page.getByRole("switch", { name: "Inactive" }).first().click();
-    await page.getByRole("button", { name: "Save" }).click();
+    await detailDrawer.getByRole("switch", { name: "Active status" }).click();
+    await detailDrawer.getByRole("button", { name: "Save changes" }).click();
     await expect.poll(() => state.updatedBody).toEqual({ isActive: true });
+    await detailDrawer.getByRole("button", { name: "Close drawer" }).click();
     await page.getByRole("tab", { name: "Active (2)", exact: true }).click();
     await expect(page.getByText("Gateway Plumbing").first()).toBeVisible();
   });
@@ -468,7 +483,7 @@ test.describe("Vendor directory prototype parity", () => {
     const state = await mockVendorApi(page);
     await page.goto("/vendors");
 
-    const addButton = page.getByRole("button", { name: "+ Add Vendor" });
+    const addButton = page.getByRole("button", { name: "Add Vendor", exact: true });
     await addButton.focus();
     await page.keyboard.press("Enter");
     await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toBeVisible();
@@ -477,10 +492,12 @@ test.describe("Vendor directory prototype parity", () => {
     await expect(addButton).toBeFocused();
 
     await addButton.click();
-    await expect(page.getByRole("button", { name: "Add Vendor Company" }).last()).toBeDisabled();
+    await expect(
+      page.getByRole("button", { name: "Add Vendor", exact: true }).last(),
+    ).toBeEnabled();
     await page.getByRole("combobox", { name: "Company" }).fill("Independent Vendor LLC");
-    await page.getByLabel("Company Phone").fill("3145550199");
-    await page.getByRole("button", { name: "Add Vendor Company" }).last().click();
+    await page.getByLabel("Company Phone (optional)").fill("3145550199");
+    await page.getByRole("button", { name: "Add Vendor", exact: true }).last().click();
 
     await expect.poll(() => state.createdBody?.name).toBe("Independent Vendor LLC");
     expect(state.createdBody?.technicians).toEqual([]);
@@ -506,7 +523,8 @@ test.describe("Vendor directory prototype parity", () => {
     const blockedState = await mockVendorApi(page, { deactivationBlocked: true });
     await page.goto("/vendors");
 
-    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
+    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
+    await page.getByRole("switch", { name: "Active status" }).click();
     const blockedDialog = page.getByRole("dialog", { name: "Deactivate Vendor" });
     await expect(blockedDialog).toContainText("WO-501 — Emergency boiler repair");
     await expect(blockedDialog.getByRole("button", { name: /^Deactivate$/ })).toBeDisabled();
@@ -517,7 +535,8 @@ test.describe("Vendor directory prototype parity", () => {
 
     const racedState = await mockVendorApi(page, { deleteConflict: true });
     await page.reload();
-    await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
+    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
+    await page.getByRole("switch", { name: "Active status" }).click();
     await page
       .getByRole("dialog", { name: "Deactivate Vendor" })
       .getByRole("button", {
@@ -537,10 +556,25 @@ test.describe("Vendor directory prototype parity", () => {
     await mockVendorApi(page, { listError: true });
     await page.goto("/vendors");
 
+    const mainBox = await page.getByRole("main").boundingBox();
+    expect(mainBox).toMatchObject({ x: 0, width: 390 });
+    const navigation = page.getByRole("navigation", { name: "Primary navigation" });
+    await expect(navigation).not.toBeVisible();
+
+    const openNavigation = page.getByRole("button", { name: "Toggle navigation" });
+    await openNavigation.focus();
+    await page.keyboard.press("Enter");
+    await expect(navigation).toBeVisible();
+    await expect(page.getByRole("link", { name: "Sites" })).toBeVisible();
+    await page.keyboard.press("Escape");
+    await expect(navigation).not.toBeVisible();
+    await expect(openNavigation).toBeFocused();
+
     await expect(page.getByRole("main").getByRole("alert")).toContainText(
       /Vendor directory unavailable|failed|server error/i,
       { timeout: 15_000 },
     );
+    await captureVisual(page, "/tmp/seahaven-vendor-implemented-mobile-list.png");
     await page.getByRole("button", { name: "Open vendor filters" }).click();
     const filterDrawer = page.locator(".MuiDrawer-paper").filter({ hasText: "Total Jobs" });
     await expect(filterDrawer).toBeVisible();
@@ -549,4 +583,23 @@ test.describe("Vendor directory prototype parity", () => {
     await captureVisual(page, "/tmp/seahaven-vendor-implemented-mobile.png");
     await page.getByRole("button", { name: "Close filters" }).click();
   });
+
+  test("keeps protected shell destinations available and marks their selected state", async ({
+    page,
+  }) => {
+    await mockVendorApi(page);
+
+    for (const destination of [
+      { path: "/workorders", label: "Work Orders" },
+      { path: "/accounts", label: "Accounts" },
+      { path: "/locations", label: "Sites" },
+      { path: "/notifications", label: "Notifications" },
+    ]) {
+      await page.goto(destination.path);
+      await expect(page.getByRole("link", { name: destination.label })).toHaveAttribute(
+        "aria-current",
+        "page",
+      );
+    }
+  });
 });
diff --git a/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts b/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
index 2409814f..b63291be 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
@@ -15,9 +15,7 @@ export interface VendorDeactivationState {
   confirm: () => void;
 }
 
-export function useVendorDeactivation(options?: {
-  onSuccess?: () => void;
-}): VendorDeactivationState {
+export function useVendorDeactivation(onSuccess?: () => void): VendorDeactivationState {
   const [target, setTarget] = useState<VendorListItem | null>(null);
   const [error, setError] = useState<string | null>(null);
   const deleteVendor = useDeleteVendor();
@@ -43,7 +41,7 @@ export function useVendorDeactivation(options?: {
     deleteVendor.mutate(target.id, {
       onSuccess: () => {
         setTarget(null);
-        options?.onSuccess?.();
+        onSuccess?.();
       },
       onError: (err: Error) => setError(err.message || "Failed to deactivate vendor"),
     });
diff --git a/src/app/(protected)/vendors/_components/use-vendor-list-state.ts b/src/app/(protected)/vendors/_components/use-vendor-list-state.ts
index 9385a834..fdc90685 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-list-state.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-list-state.ts
@@ -31,7 +31,7 @@ export interface VendorListState {
 export function useVendorListState(): VendorListState {
   const [search, setSearch] = useState("");
   const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = useState(48);
   const [isActive, setIsActive] = useState(true);
   const [appliedFilters, setAppliedFilters] = useState<VendorFilters>(emptyVendorFilters);
 
diff --git a/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts b/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
index b4c3a51f..6bf89b1f 100644
--- a/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
+++ b/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from "react";
 import { useForm, useWatch, type FieldErrors } from "react-hook-form";
 import {
   emptyVendorCompanyRosterForm,
+  emptyRosterTechnician,
   vendorCompanyRosterSchema,
   type VendorCompanyRosterFormValues,
 } from "@/domain/vendors/schemas/vendor-roster-schema";
@@ -43,6 +44,7 @@ export interface VendorRosterFormProps {
   vendorId?: string | number;
   companyId?: string | number;
   onSuccess?: (roster: VendorCompanyRoster) => void;
+  startWithTechnician?: boolean;
 }
 
 export interface VendorRosterForm {
@@ -73,6 +75,7 @@ export function useVendorRosterForm({
   vendorId,
   companyId,
   onSuccess,
+  startWithTechnician = false,
 }: VendorRosterFormProps): VendorRosterForm {
   const query = useVendorCompanyRoster(
     mode === "update" ? vendorId : undefined,
@@ -87,9 +90,16 @@ export function useVendorRosterForm({
   const trades = useMemo(() => facets?.trades ?? [], [facets]);
   const resolver = useVendorRosterResolver(routeRoster);
 
+  const createDefaults = useMemo(
+    () => ({
+      ...emptyVendorCompanyRosterForm,
+      technicians: startWithTechnician ? [{ ...emptyRosterTechnician }] : [],
+    }),
+    [startWithTechnician],
+  );
   const form = useForm<VendorCompanyRosterFormValues>({
     resolver,
-    defaultValues: emptyVendorCompanyRosterForm,
+    defaultValues: createDefaults,
     values: mode === "update" && routeRoster ? toFormValues(routeRoster) : undefined,
     mode: "onChange",
   });
@@ -114,10 +124,10 @@ export function useVendorRosterForm({
   }, [routeRoster, watched]);
 
   const resetForm = useCallback(() => {
-    reset(emptyVendorCompanyRosterForm);
+    reset(createDefaults);
     resetSelection();
     clearConflict();
-  }, [clearConflict, reset, resetSelection]);
+  }, [clearConflict, createDefaults, reset, resetSelection]);
 
   const committedRoster = mode === "update" ? routeRoster : selection.selectedRoster;
   const isUpdate = mode === "update" || selection.selectedRoster != null;
diff --git a/src/app/(protected)/vendors/_components/vendor-create-modal.tsx b/src/app/(protected)/vendors/_components/vendor-create-modal.tsx
index d0025662..31804a3c 100644
--- a/src/app/(protected)/vendors/_components/vendor-create-modal.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-create-modal.tsx
@@ -8,8 +8,8 @@ import {
   DialogContent,
   DialogTitle,
   Stack,
-  Typography,
 } from "@mui/material";
+import { Text } from "@/components/ui/text";
 import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
 import { VendorRosterFormFields } from "./vendor-roster-form-fields";
 import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
@@ -21,7 +21,11 @@ interface VendorCreateModalProps {
 }
 
 export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
-  const form = useVendorRosterForm({ mode: "create", onSuccess: onClose });
+  const form = useVendorRosterForm({
+    mode: "create",
+    onSuccess: onClose,
+    startWithTechnician: true,
+  });
   const { resetForm } = form;
 
   useEffect(() => {
@@ -33,17 +37,24 @@ export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
       open={open}
       onClose={form.isSaving ? undefined : onClose}
       fullWidth
-      maxWidth="md"
+      maxWidth="sm"
       aria-labelledby="vendor-create-dialog-title"
-      slotProps={{ paper: { role: "dialog" } }}
+      slotProps={{
+        paper: {
+          role: "dialog",
+          sx: { maxHeight: "88vh", borderRadius: 2 },
+        },
+      }}
     >
       <DialogTitle id="vendor-create-dialog-title">
-        Add Vendor Company
-        <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.5 }}>
-          Register a company and add zero, one, or multiple technicians.
-        </Typography>
+        <Text variant="title" as="span">
+          Add Vendor
+        </Text>
+        <Text variant="description" tone="muted" sx={{ mt: 0.5 }}>
+          Register a vendor company and its technicians.
+        </Text>
       </DialogTitle>
-      <DialogContent>
+      <DialogContent sx={{ maxHeight: "55vh" }}>
         <Stack spacing={2} className="mt-1">
           {form.loadErrorMessage !== null && (
             <VendorRosterLoadErrorAlert message={form.loadErrorMessage} onRetry={form.retryLoad} />
@@ -73,9 +84,9 @@ export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
           variant="contained"
           type="submit"
           form="vendor-create-form"
-          disabled={form.isSaving || !form.isValid}
+          disabled={form.isSaving}
         >
-          {form.isSaving ? <CircularProgress size={20} color="inherit" /> : "Add Vendor Company"}
+          {form.isSaving ? <CircularProgress size={20} color="inherit" /> : "Add Vendor"}
         </Button>
       </DialogActions>
     </Dialog>
diff --git a/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx b/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx
index ad7ffa29..74d6ef02 100644
--- a/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx
@@ -1,5 +1,5 @@
-import { useEffect, type ReactNode } from "react";
-import { useNavigate } from "react-router";
+import { useEffect, useState, type ReactNode } from "react";
+import { Controller, useWatch } from "react-hook-form";
 import CloseIcon from "@mui/icons-material/Close";
 import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import LaunchIcon from "@mui/icons-material/Launch";
@@ -13,15 +13,22 @@ import {
   Drawer,
   IconButton,
   Link,
-  List,
-  ListItem,
   Stack,
-  Typography,
+  Switch,
 } from "@mui/material";
+import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
+import { VendorRosterFormFields } from "./vendor-roster-form-fields";
+import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
+import { useVendorRosterForm } from "./use-vendor-roster-form";
+import { Text } from "@/components/ui/text";
+import type {
+  VendorCompanyRoster,
+  VendorListItem,
+  VendorRosterTechnician,
+} from "@/domain/vendors/types/vendor";
 import { useVendorCompanyRoster } from "@/domain/vendors/use-cases/use-vendor-company-roster";
-import type { VendorCompanyRoster, VendorListItem } from "@/domain/vendors/types/vendor";
 
-const DRAWER_WIDTH = 440;
+const DRAWER_WIDTH = 420;
 
 function splitTrades(value: string | undefined): string[] {
   return (value ?? "")
@@ -33,106 +40,45 @@ function splitTrades(value: string | undefined): string[] {
 interface VendorDetailDrawerProps {
   open: boolean;
   vendor: VendorListItem | null;
+  startInEdit?: boolean;
+  onRequestDeactivation?: (vendor: VendorListItem) => void;
   onClose: () => void;
 }
 
 function SectionTitle({ children }: { children: ReactNode }) {
   return (
-    <Typography
-      variant="subtitle2"
-      className="font-semibold uppercase"
-      sx={{ color: "text.secondary", mb: 1 }}
+    <Text
+      variant="label"
+      tone="muted"
+      className="font-semibold tracking-[0.06em] uppercase"
+      sx={{ mb: 1 }}
     >
       {children}
-    </Typography>
+    </Text>
   );
 }
 
-function Field({ label, value }: { label: string; value: string }) {
-  const display = value && value.trim() !== "" ? value : "—";
+function Field({ label, value }: { label: string; value?: string }) {
+  const display = !value || value.trim() === "" ? "—" : value;
   return (
     <Box>
-      <Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
+      <Text variant="caption" tone="muted" sx={{ display: "block" }}>
         {label}
-      </Typography>
-      <Typography variant="body2">{display}</Typography>
+      </Text>
+      <Text variant="description">{display}</Text>
     </Box>
   );
 }
 
-function TechnicianEntry({
-  contactName,
-  phone,
-  email,
-  preferredContact,
-  tradeSpecialties,
-  isActive,
-  totalJobs,
-}: {
-  contactName: string;
-  phone: string;
-  email: string;
-  preferredContact?: string;
-  tradeSpecialties: string;
-  isActive: boolean;
-  totalJobs: number;
-}) {
-  const trades = splitTrades(tradeSpecialties);
-  return (
-    <ListItem disableGutters divider>
-      <Stack spacing={0.5} className="w-full">
-        <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
-          <Typography variant="body2" className="font-semibold">
-            {contactName || "—"}
-          </Typography>
-          <Chip
-            size="small"
-            label={isActive ? "Active" : "Inactive"}
-            color={isActive ? "success" : "default"}
-          />
-          <Typography variant="caption" sx={{ color: "text.secondary" }}>
-            {totalJobs} jobs
-          </Typography>
-        </Stack>
-        <Stack direction="row" spacing={2} className="flex flex-wrap">
-          {Boolean(phone) && (
-            <Link href={`tel:${phone}`} underline="hover">
-              {phone}
-            </Link>
-          )}
-          {Boolean(email) && (
-            <Link href={`mailto:${email}`} underline="hover">
-              {email}
-            </Link>
-          )}
-        </Stack>
-        <Stack direction="row" spacing={1} sx={{ alignItems: "center", flexWrap: "wrap" }}>
-          {Boolean(preferredContact) && (
-            <Typography variant="caption" sx={{ color: "text.secondary" }}>
-              Prefers {preferredContact}
-            </Typography>
-          )}
-          {trades.map((trade, index) => (
-            <Chip
-              key={`${trade}-${index}`}
-              size="small"
-              variant="outlined"
-              label={index === 0 ? `${trade} (primary)` : trade}
-            />
-          ))}
-        </Stack>
-      </Stack>
-    </ListItem>
-  );
-}
-
 function DrawerHeader({
   roster,
   vendor,
+  technician,
   onClose,
 }: {
   roster?: VendorCompanyRoster;
   vendor: VendorListItem | null;
+  technician?: VendorRosterTechnician;
   onClose: () => void;
 }) {
   return (
@@ -141,23 +87,18 @@ function DrawerHeader({
       sx={{
         alignItems: "center",
         justifyContent: "space-between",
-        px: 3,
+        px: 2.5,
         py: 2,
         borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
       }}
     >
       <Box>
-        <Typography
-          id="vendor-detail-drawer-title"
-          variant="subtitle1"
-          component="h2"
-          className="font-semibold"
-        >
-          {roster?.name || vendor?.companyName || "Vendor company"}
-        </Typography>
-        <Typography variant="caption" sx={{ color: "text.secondary" }}>
-          {roster ? `${roster.technicians.length} technician(s)` : "Vendor details"}
-        </Typography>
+        <Text id="vendor-detail-drawer-title" variant="title" as="h2" className="font-semibold">
+          {technician?.contactName || vendor?.contactName || roster?.name || "Vendor company"}
+        </Text>
+        <Text variant="description" tone="muted">
+          {roster?.name || vendor?.companyName || "Vendor details"}
+        </Text>
       </Box>
       <IconButton aria-label="Close drawer" onClick={onClose} size="small">
         <CloseIcon fontSize="small" />
@@ -167,18 +108,19 @@ function DrawerHeader({
 }
 
 function CompanySection({ roster }: { roster: VendorCompanyRoster }) {
-  const mapsUrl = roster.googleMapsUrl;
+  const address = [roster.address, roster.city, roster.state, roster.zip]
+    .filter(Boolean)
+    .join(", ");
+
   return (
     <Stack spacing={1.5}>
+      <Field label="Company" value={roster.name} />
       <Field label="Company Phone" value={roster.companyPhone} />
-      <Field label="Email" value={roster.email} />
-      <Field
-        label="Address"
-        value={[roster.address, roster.city, roster.state, roster.zip].filter(Boolean).join(", ")}
-      />
-      {Boolean(mapsUrl) && (
+      <Field label="Company Email" value={roster.email} />
+      <Field label="Address" value={address} />
+      {Boolean(roster.googleMapsUrl) && (
         <Link
-          href={mapsUrl}
+          href={roster.googleMapsUrl}
           target="_blank"
           rel="noopener noreferrer"
           className="inline-flex items-center gap-1"
@@ -191,49 +133,79 @@ function CompanySection({ roster }: { roster: VendorCompanyRoster }) {
   );
 }
 
-function TechniciansSection({ roster }: { roster: VendorCompanyRoster }) {
+function TechnicianSection({ technician }: { technician: VendorRosterTechnician }) {
+  const trades = splitTrades(technician.tradeSpecialties);
+
   return (
     <Box>
-      <SectionTitle>Technicians</SectionTitle>
-      {roster.technicians.length === 0 ? (
-        <Typography variant="body2" sx={{ color: "text.secondary" }}>
-          No technicians assigned to this company.
-        </Typography>
-      ) : (
-        <List disablePadding>
-          {roster.technicians.map((technician) => (
-            <TechnicianEntry
-              key={String(technician.id ?? technician.contactName)}
-              contactName={technician.contactName}
-              phone={technician.phone}
-              email={technician.email}
-              preferredContact={technician.preferredContact}
-              tradeSpecialties={technician.tradeSpecialties}
-              isActive={technician.isActive}
-              totalJobs={technician.totalJobs}
+      <Stack spacing={1.5}>
+        <Field label="Phone" value={technician.phone} />
+        <Box>
+          <Text variant="caption" tone="muted" sx={{ display: "block", mb: 0.75 }}>
+            Trade
+          </Text>
+          <Stack direction="row" spacing={0.75} sx={{ flexWrap: "wrap" }}>
+            {trades.length > 0 ? (
+              trades.map((trade, index) => (
+                <Chip key={`${trade}-${index}`} size="small" variant="outlined" label={trade} />
+              ))
+            ) : (
+              <Text variant="description">—</Text>
+            )}
+          </Stack>
+        </Box>
+        <Stack direction="row" spacing={4} sx={{ alignItems: "flex-end" }}>
+          <Box>
+            <Text variant="title">{technician.totalJobs ?? 0}</Text>
+            <Text variant="caption" tone="muted" sx={{ display: "block" }}>
+              Total Jobs
+            </Text>
+          </Box>
+          <Box>
+            <Text variant="caption" tone="muted" sx={{ display: "block", mb: 0.5 }}>
+              Status
+            </Text>
+            <Chip
+              size="small"
+              label={technician.isActive ? "Active" : "Inactive"}
+              color={technician.isActive ? "success" : "default"}
             />
-          ))}
-        </List>
-      )}
+          </Box>
+        </Stack>
+      </Stack>
     </Box>
   );
 }
 
-function DrawerBody({ roster }: { roster: VendorCompanyRoster }) {
+function DrawerBody({
+  roster,
+  technician,
+}: {
+  roster: VendorCompanyRoster;
+  technician?: VendorRosterTechnician;
+}) {
   return (
-    <Stack spacing={3} className="flex-1 overflow-y-auto" sx={{ px: 3, py: 3 }}>
-      <SectionTitle>Company</SectionTitle>
-      <CompanySection roster={roster} />
+    <Stack spacing={3} className="flex-1 overflow-y-auto" sx={{ p: 2.5 }}>
+      <Box>
+        <SectionTitle>Company</SectionTitle>
+        <CompanySection roster={roster} />
+      </Box>
       <Divider />
-      <TechniciansSection roster={roster} />
+      {technician ? (
+        <TechnicianSection technician={technician} />
+      ) : (
+        <Text variant="description" tone="muted">
+          No technicians assigned to this company.
+        </Text>
+      )}
       {Boolean(roster.notes) && (
         <>
           <Divider />
           <Box>
             <SectionTitle>Notes</SectionTitle>
-            <Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
+            <Text variant="description" sx={{ whiteSpace: "pre-wrap" }}>
               {roster.notes}
-            </Typography>
+            </Text>
           </Box>
         </>
       )}
@@ -246,8 +218,8 @@ function DrawerActions({ onEdit }: { onEdit: () => void }) {
     <Stack
       direction="row"
       sx={{
-        px: 3,
-        py: 2,
+        px: 2.5,
+        py: 1.5,
         borderTop: (theme) => `1px solid ${theme.palette.divider}`,
         alignItems: "center",
         justifyContent: "flex-end",
@@ -260,8 +232,143 @@ function DrawerActions({ onEdit }: { onEdit: () => void }) {
   );
 }
 
-export function VendorDetailDrawer({ open, vendor, onClose }: VendorDetailDrawerProps) {
-  const navigate = useNavigate();
+function DrawerEditor({
+  vendor,
+  onClose,
+  onSaved,
+  onRequestDeactivation = () => undefined,
+}: {
+  vendor: VendorListItem;
+  onClose: () => void;
+  onSaved: () => void;
+  onRequestDeactivation: (vendor: VendorListItem) => void;
+}) {
+  const form = useVendorRosterForm({
+    mode: "update",
+    vendorId: vendor.id ?? undefined,
+    companyId: vendor.id == null ? (vendor.companyId ?? undefined) : undefined,
+    onSuccess: onSaved,
+  });
+  const roster = form.roster;
+  const technicians = useWatch({ control: form.control, name: "technicians" }) ?? [];
+  const selectedIndex = technicians.findIndex(
+    (technician) => technician.id != null && String(technician.id) === String(vendor.id),
+  );
+  const selectedTotalJobs =
+    roster?.technicians.find(
+      (technician) => technician.id != null && String(technician.id) === String(vendor.id),
+    )?.totalJobs ?? vendor.totalJobs;
+
+  if (form.isLoading) {
+    return <CircularProgress size={28} sx={{ m: "auto" }} />;
+  }
+  if (form.isError || !roster) {
+    return (
+      <Alert severity="error" sx={{ m: 2 }}>
+        Failed to load vendor company. Try again.
+      </Alert>
+    );
+  }
+
+  return (
+    <Box
+      component="form"
+      id="vendor-drawer-edit-form"
+      onSubmit={form.handleSubmit(form.submit)}
+      className="flex min-h-0 flex-1 flex-col"
+    >
+      <Stack spacing={2} className="flex-1 overflow-y-auto" sx={{ p: 2.5 }}>
+        {form.loadErrorMessage !== null && (
+          <VendorRosterLoadErrorAlert message={form.loadErrorMessage} onRetry={form.retryLoad} />
+        )}
+        {form.conflict !== null && (
+          <VendorRosterConflictAlert conflict={form.conflict} onReload={form.reload} />
+        )}
+        <VendorRosterFormFields
+          control={form.control}
+          errors={form.errors}
+          tradeOptions={form.trades}
+          showTechnicianStatus={false}
+        />
+        {selectedIndex >= 0 && (
+          <>
+            <Divider />
+            <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
+              <Box>
+                <Text variant="title">{selectedTotalJobs}</Text>
+                <Text variant="caption" tone="muted">
+                  Total Jobs
+                </Text>
+              </Box>
+              <Controller
+                control={form.control}
+                name={`technicians.${selectedIndex}.isActive`}
+                render={({ field }) => (
+                  <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+                    <Text variant="description">{field.value ? "Active" : "Inactive"}</Text>
+                    <Switch
+                      checked={Boolean(field.value)}
+                      slotProps={{ input: { "aria-label": "Active status" } }}
+                      onChange={(_event, checked) => {
+                        if (field.value && !checked) onRequestDeactivation(vendor);
+                        else field.onChange(checked);
+                      }}
+                    />
+                  </Stack>
+                )}
+              />
+            </Stack>
+          </>
+        )}
+      </Stack>
+      <Stack
+        direction="row"
+        spacing={1.5}
+        sx={{ p: 2, borderTop: 1, borderColor: "divider", justifyContent: "flex-end" }}
+      >
+        <Button onClick={onClose} disabled={form.isSaving}>
+          Cancel
+        </Button>
+        <Button type="submit" variant="contained" disabled={form.isSaving || !form.isValid}>
+          {form.isSaving ? "Saving..." : "Save changes"}
+        </Button>
+      </Stack>
+    </Box>
+  );
+}
+
+function resolveTechnician(
+  roster: VendorCompanyRoster | undefined,
+  vendor: VendorListItem | null,
+): VendorRosterTechnician | undefined {
+  if (!roster || !vendor) return undefined;
+
+  const match = roster.technicians.find(
+    (technician) =>
+      vendor.id != null && technician.id != null && String(technician.id) === String(vendor.id),
+  );
+  if (match) return match;
+  if (!vendor.contactName) return undefined;
+
+  return {
+    id: vendor.id ?? undefined,
+    contactName: vendor.contactName,
+    phone: vendor.phone,
+    email: vendor.email,
+    tradeSpecialties: vendor.tradeSpecialties,
+    isActive: vendor.isActive,
+    totalJobs: vendor.totalJobs,
+  };
+}
+
+export function VendorDetailDrawer({
+  open,
+  vendor,
+  startInEdit = false,
+  onRequestDeactivation = () => undefined,
+  onClose,
+}: VendorDetailDrawerProps) {
+  const [isEditing, setIsEditing] = useState(startInEdit);
   const vendorId = vendor?.id;
   const companyId = vendor?.companyId;
   const hasVendorId = vendorId != null;
@@ -274,25 +381,30 @@ export function VendorDetailDrawer({ open, vendor, onClose }: VendorDetailDrawer
     !hasVendorId ? (companyId ?? undefined) : undefined,
   );
 
-  const editHref = hasVendorId
-    ? `/vendors/edit/${vendorId}`
-    : `/vendors/company/${companyId ?? ""}`;
+  const selectedTechnician = resolveTechnician(roster, vendor);
+
+  useEffect(() => {
+    if (open) setIsEditing(startInEdit);
+  }, [open, startInEdit, vendor]);
 
   useEffect(() => {
     if (!open) return;
 
     const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key === "Escape") onClose();
+      if (event.key === "Escape" && !isEditing) onClose();
     };
 
     window.addEventListener("keydown", closeOnEscape);
     return () => window.removeEventListener("keydown", closeOnEscape);
-  }, [onClose, open]);
+  }, [isEditing, onClose, open]);
 
   return (
     <Drawer
       open={open}
-      onClose={onClose}
+      onClose={(_event, reason) => {
+        if (reason === "escapeKeyDown" && isEditing) return;
+        onClose();
+      }}
       anchor="right"
       aria-labelledby="vendor-detail-drawer-title"
       ModalProps={{ keepMounted: false }}
@@ -304,9 +416,21 @@ export function VendorDetailDrawer({ open, vendor, onClose }: VendorDetailDrawer
       }}
     >
       <Stack className="flex h-full flex-col">
-        <DrawerHeader roster={roster} vendor={vendor} onClose={onClose} />
+        <DrawerHeader
+          roster={roster}
+          vendor={vendor}
+          technician={selectedTechnician}
+          onClose={onClose}
+        />
 
-        {isLoading ? (
+        {isEditing && vendor ? (
+          <DrawerEditor
+            vendor={vendor}
+            onClose={onClose}
+            onSaved={() => setIsEditing(false)}
+            onRequestDeactivation={onRequestDeactivation}
+          />
+        ) : isLoading ? (
           <Box className="flex flex-1 items-center justify-center">
             <CircularProgress size={28} />
           </Box>
@@ -316,14 +440,14 @@ export function VendorDetailDrawer({ open, vendor, onClose }: VendorDetailDrawer
           </Alert>
         ) : roster ? (
           <>
-            <DrawerBody roster={roster} />
-            <DrawerActions onEdit={() => navigate(editHref)} />
+            <DrawerBody roster={roster} technician={selectedTechnician} />
+            <DrawerActions onEdit={() => setIsEditing(true)} />
           </>
         ) : (
           <Box className="flex flex-1 items-center justify-center">
-            <Typography variant="body2" sx={{ color: "text.secondary" }}>
+            <Text variant="description" tone="muted">
               No vendor selected.
-            </Typography>
+            </Text>
           </Box>
         )}
       </Stack>
diff --git a/src/app/(protected)/vendors/_components/vendor-filter-options.tsx b/src/app/(protected)/vendors/_components/vendor-filter-options.tsx
new file mode 100644
index 00000000..c9be7d45
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-filter-options.tsx
@@ -0,0 +1,252 @@
+import type { Dispatch, ReactNode, SetStateAction } from "react";
+import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
+import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
+import TagOutlinedIcon from "@mui/icons-material/TagOutlined";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Autocomplete,
+  Box,
+  Button,
+  Checkbox,
+  Chip,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import type {
+  VendorFacets,
+  VendorFacetCompany,
+  VendorFacetJobBucket,
+  VendorFacetLocation,
+} from "@/domain/vendors/types/vendor";
+import type { VendorFilters } from "./vendor-filters";
+
+type DraftSetter = Dispatch<SetStateAction<VendorFilters>>;
+
+function FilterSection({
+  title,
+  icon,
+  children,
+}: {
+  title: string;
+  icon: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <Accordion disableGutters elevation={0} square sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${title}-filters-content`}>
+        <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
+          <Box sx={{ color: "primary.main", display: "flex" }}>{icon}</Box>
+          <Typography variant="subtitle1" className="font-semibold">
+            {title}
+          </Typography>
+        </Stack>
+      </AccordionSummary>
+      <AccordionDetails id={`${title}-filters-content`} sx={{ pt: 0, pb: 2.5 }}>
+        {children}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+function CompanyFilter({
+  options,
+  draft,
+  setDraft,
+}: {
+  options: VendorFacetCompany[];
+  draft: VendorFilters;
+  setDraft: DraftSetter;
+}) {
+  const allSelected = draft.companies.length === options.length && options.length > 0;
+  return (
+    <FilterSection title="Company" icon={<BusinessOutlinedIcon />}>
+      <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
+        <Typography variant="caption" sx={{ color: "text.secondary" }}>
+          Select vendor companies
+        </Typography>
+        <Button
+          size="small"
+          onClick={() =>
+            setDraft((current) => ({
+              ...current,
+              companies: allSelected ? [] : options.map((company) => company.name),
+            }))
+          }
+        >
+          {allSelected ? "Clear all" : "Select all"}
+        </Button>
+      </Stack>
+      <Autocomplete
+        multiple
+        size="small"
+        options={options}
+        getOptionLabel={(option) => (typeof option === "string" ? option : option.name)}
+        isOptionEqualToValue={(option, value) =>
+          typeof option === "string" || typeof value === "string"
+            ? option === value
+            : option.name === value.name
+        }
+        value={options.filter((option) => draft.companies.includes(option.name))}
+        onChange={(_event, value) => {
+          const next = (value as (string | VendorFacetCompany)[]).map((entry) =>
+            typeof entry === "string" ? entry : entry.name,
+          );
+          setDraft((current) => ({ ...current, companies: next }));
+        }}
+        renderOption={(props, option, { selected }) => {
+          const { key, ...optionProps } = props;
+          return (
+            <li key={key} {...optionProps}>
+              <Checkbox checked={selected} size="small" sx={{ mr: 1 }} />
+              {option.name}
+            </li>
+          );
+        }}
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const label = typeof option === "string" ? option : option.name;
+            const { key, ...chipProps } = getItemProps({ index });
+            return <Chip key={key} size="small" label={label} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            placeholder={draft.companies.length === 0 ? "All companies" : ""}
+          />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+function TradeFilter({ options, draft, setDraft }: FilterProps<string>) {
+  return (
+    <FilterSection title="Trade" icon={<BuildOutlinedIcon />}>
+      <Autocomplete
+        multiple
+        size="small"
+        options={options}
+        value={draft.trades}
+        onChange={(_event, value) =>
+          setDraft((current) => ({ ...current, trades: value as string[] }))
+        }
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const { key, ...chipProps } = getItemProps({ index });
+            return <Chip key={key} size="small" label={option} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField {...params} placeholder={draft.trades.length === 0 ? "All trades" : ""} />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+interface FilterProps<T> {
+  options: T[];
+  draft: VendorFilters;
+  setDraft: DraftSetter;
+}
+
+function LocationFilter({ options, draft, setDraft }: FilterProps<VendorFacetLocation>) {
+  return (
+    <FilterSection title="Location" icon={<LocationOnOutlinedIcon />}>
+      <Autocomplete
+        multiple
+        size="small"
+        options={options}
+        getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
+        isOptionEqualToValue={(option, value) =>
+          typeof option === "string" || typeof value === "string"
+            ? option === value
+            : option.label === value.label
+        }
+        value={options.filter((option) => draft.locations.includes(option.label))}
+        onChange={(_event, value) => {
+          const next = (value as (string | VendorFacetLocation)[]).map((entry) =>
+            typeof entry === "string" ? entry : entry.label,
+          );
+          setDraft((current) => ({ ...current, locations: next }));
+        }}
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const label = typeof option === "string" ? option : option.label;
+            const { key, ...chipProps } = getItemProps({ index });
+            return <Chip key={key} size="small" label={label} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            placeholder={draft.locations.length === 0 ? "All locations" : ""}
+          />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+function JobCountFilter({ options, draft, setDraft }: FilterProps<VendorFacetJobBucket>) {
+  return (
+    <FilterSection title="Total Jobs" icon={<TagOutlinedIcon />}>
+      <Autocomplete
+        multiple
+        size="small"
+        options={options}
+        getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
+        isOptionEqualToValue={(option, value) =>
+          typeof option === "string" || typeof value === "string"
+            ? option === value
+            : option.id === value.id
+        }
+        value={options.filter((option) => draft.jobBuckets.includes(option.id))}
+        onChange={(_event, value) => {
+          const next = (value as (string | VendorFacetJobBucket)[]).map((entry) =>
+            typeof entry === "string" ? entry : entry.id,
+          );
+          setDraft((current) => ({ ...current, jobBuckets: next }));
+        }}
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const label = typeof option === "string" ? option : option.label;
+            const { key, ...chipProps } = getItemProps({ index });
+            return <Chip key={key} size="small" label={label} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            placeholder={draft.jobBuckets.length === 0 ? "All job counts" : ""}
+          />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+export function VendorFilterOptions({
+  facets,
+  draft,
+  setDraft,
+}: {
+  facets: VendorFacets | undefined;
+  draft: VendorFilters;
+  setDraft: DraftSetter;
+}) {
+  return (
+    <>
+      <CompanyFilter options={facets?.companies ?? []} draft={draft} setDraft={setDraft} />
+      <TradeFilter options={facets?.trades ?? []} draft={draft} setDraft={setDraft} />
+      <LocationFilter options={facets?.locations ?? []} draft={draft} setDraft={setDraft} />
+      <JobCountFilter options={facets?.jobBuckets ?? []} draft={draft} setDraft={setDraft} />
+    </>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx b/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx
index ae4b51ba..e3b91cf5 100644
--- a/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx
@@ -1,32 +1,9 @@
-import { useEffect, useMemo, useState, type ReactNode } from "react";
-import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
-import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
+import { useEffect, useState } from "react";
 import CloseIcon from "@mui/icons-material/Close";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
-import TagOutlinedIcon from "@mui/icons-material/TagOutlined";
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Autocomplete,
-  Box,
-  Button,
-  Checkbox,
-  Chip,
-  Drawer,
-  IconButton,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
-import type {
-  VendorFacets,
-  VendorFacetCompany,
-  VendorFacetJobBucket,
-  VendorFacetLocation,
-} from "@/domain/vendors/types/vendor";
+import { Box, Button, Chip, Drawer, IconButton, Stack, Typography } from "@mui/material";
+import { VendorFilterOptions } from "./vendor-filter-options";
 import { emptyVendorFilters, type VendorFilters } from "./vendor-filters";
+import type { VendorFacets } from "@/domain/vendors/types/vendor";
 
 interface VendorFiltersDrawerProps {
   open: boolean;
@@ -38,32 +15,6 @@ interface VendorFiltersDrawerProps {
 
 const DRAWER_WIDTH = 360;
 
-function FilterSection({
-  title,
-  icon,
-  children,
-}: {
-  title: string;
-  icon: ReactNode;
-  children: ReactNode;
-}) {
-  return (
-    <Accordion disableGutters elevation={0} square sx={{ borderBottom: 1, borderColor: "divider" }}>
-      <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${title}-filters-content`}>
-        <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
-          <Box sx={{ color: "primary.main", display: "flex" }}>{icon}</Box>
-          <Typography variant="subtitle1" className="font-semibold">
-            {title}
-          </Typography>
-        </Stack>
-      </AccordionSummary>
-      <AccordionDetails id={`${title}-filters-content`} sx={{ pt: 0, pb: 2.5 }}>
-        {children}
-      </AccordionDetails>
-    </Accordion>
-  );
-}
-
 export function VendorFiltersDrawer({
   open,
   onClose,
@@ -74,23 +25,12 @@ export function VendorFiltersDrawer({
   const [draft, setDraft] = useState<VendorFilters>(appliedFilters);
 
   useEffect(() => {
-    if (open) {
-      setDraft(appliedFilters);
-    }
+    if (open) setDraft(appliedFilters);
   }, [open, appliedFilters]);
 
-  const companyOptions = useMemo(() => facets?.companies ?? [], [facets]);
-  const tradeOptions = useMemo(() => facets?.trades ?? [], [facets]);
-  const locationOptions = useMemo(() => facets?.locations ?? [], [facets]);
-  const jobBucketOptions = useMemo(() => facets?.jobBuckets ?? [], [facets]);
-
   const activeCount =
     draft.companies.length + draft.trades.length + draft.locations.length + draft.jobBuckets.length;
 
-  const handleClear = () => {
-    setDraft(emptyVendorFilters);
-  };
-
   const handleApply = () => {
     onApply(draft);
     onClose();
@@ -133,165 +73,7 @@ export function VendorFiltersDrawer({
         </Stack>
 
         <Box className="flex-1 overflow-y-auto" sx={{ px: 2.5 }}>
-          <FilterSection title="Company" icon={<BusinessOutlinedIcon />}>
-            <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
-              <Typography variant="caption" sx={{ color: "text.secondary" }}>
-                Select vendor companies
-              </Typography>
-              <Button
-                size="small"
-                onClick={() =>
-                  setDraft((current) => ({
-                    ...current,
-                    companies:
-                      current.companies.length === companyOptions.length
-                        ? []
-                        : companyOptions.map((company) => company.name),
-                  }))
-                }
-              >
-                {draft.companies.length === companyOptions.length && companyOptions.length > 0
-                  ? "Clear all"
-                  : "Select all"}
-              </Button>
-            </Stack>
-            <Autocomplete
-              multiple
-              size="small"
-              options={companyOptions}
-              getOptionLabel={(option) => (typeof option === "string" ? option : option.name)}
-              isOptionEqualToValue={(option, value) =>
-                typeof option === "string" || typeof value === "string"
-                  ? option === value
-                  : option.name === value.name
-              }
-              value={companyOptions.filter((option) => draft.companies.includes(option.name))}
-              onChange={(_event, value) => {
-                const next = (value as (string | VendorFacetCompany)[]).map((entry) =>
-                  typeof entry === "string" ? entry : entry.name,
-                );
-                setDraft((current) => ({ ...current, companies: next }));
-              }}
-              renderOption={(props, option, { selected }) => {
-                const { key, ...optionProps } = props;
-                return (
-                  <li key={key} {...optionProps}>
-                    <Checkbox checked={selected} size="small" sx={{ mr: 1 }} />
-                    {option.name}
-                  </li>
-                );
-              }}
-              renderValue={(value, getItemProps) =>
-                value.map((option, index) => {
-                  const label = typeof option === "string" ? option : option.name;
-                  const tagProps = getItemProps({ index });
-                  const { key, ...chipProps } = tagProps;
-                  return <Chip key={key} size="small" label={label} {...chipProps} />;
-                })
-              }
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  placeholder={draft.companies.length === 0 ? "All companies" : ""}
-                />
-              )}
-            />
-          </FilterSection>
-
-          <FilterSection title="Trade" icon={<BuildOutlinedIcon />}>
-            <Autocomplete
-              multiple
-              size="small"
-              options={tradeOptions}
-              value={draft.trades}
-              onChange={(_event, value) =>
-                setDraft((current) => ({ ...current, trades: value as string[] }))
-              }
-              renderValue={(value, getItemProps) =>
-                value.map((option, index) => {
-                  const tagProps = getItemProps({ index });
-                  const { key, ...chipProps } = tagProps;
-                  return <Chip key={key} size="small" label={option} {...chipProps} />;
-                })
-              }
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  placeholder={draft.trades.length === 0 ? "All trades" : ""}
-                />
-              )}
-            />
-          </FilterSection>
-
-          <FilterSection title="Location" icon={<LocationOnOutlinedIcon />}>
-            <Autocomplete
-              multiple
-              size="small"
-              options={locationOptions}
-              getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
-              isOptionEqualToValue={(option, value) =>
-                typeof option === "string" || typeof value === "string"
-                  ? option === value
-                  : option.label === value.label
-              }
-              value={locationOptions.filter((option) => draft.locations.includes(option.label))}
-              onChange={(_event, value) => {
-                const next = (value as (string | VendorFacetLocation)[]).map((entry) =>
-                  typeof entry === "string" ? entry : entry.label,
-                );
-                setDraft((current) => ({ ...current, locations: next }));
-              }}
-              renderValue={(value, getItemProps) =>
-                value.map((option, index) => {
-                  const label = typeof option === "string" ? option : option.label;
-                  const tagProps = getItemProps({ index });
-                  const { key, ...chipProps } = tagProps;
-                  return <Chip key={key} size="small" label={label} {...chipProps} />;
-                })
-              }
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  placeholder={draft.locations.length === 0 ? "All locations" : ""}
-                />
-              )}
-            />
-          </FilterSection>
-
-          <FilterSection title="Total Jobs" icon={<TagOutlinedIcon />}>
-            <Autocomplete
-              multiple
-              size="small"
-              options={jobBucketOptions}
-              getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
-              isOptionEqualToValue={(option, value) =>
-                typeof option === "string" || typeof value === "string"
-                  ? option === value
-                  : option.id === value.id
-              }
-              value={jobBucketOptions.filter((option) => draft.jobBuckets.includes(option.id))}
-              onChange={(_event, value) => {
-                const next = (value as (string | VendorFacetJobBucket)[]).map((entry) =>
-                  typeof entry === "string" ? entry : entry.id,
-                );
-                setDraft((current) => ({ ...current, jobBuckets: next }));
-              }}
-              renderValue={(value, getItemProps) =>
-                value.map((option, index) => {
-                  const label = typeof option === "string" ? option : option.label;
-                  const tagProps = getItemProps({ index });
-                  const { key, ...chipProps } = tagProps;
-                  return <Chip key={key} size="small" label={label} {...chipProps} />;
-                })
-              }
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  placeholder={draft.jobBuckets.length === 0 ? "All job counts" : ""}
-                />
-              )}
-            />
-          </FilterSection>
+          <VendorFilterOptions facets={facets} draft={draft} setDraft={setDraft} />
         </Box>
 
         <Stack
@@ -303,11 +85,16 @@ export function VendorFiltersDrawer({
             borderTop: (theme) => `1px solid ${theme.palette.divider}`,
           }}
         >
-          <Button variant="outlined" onClick={handleClear} disabled={activeCount === 0} fullWidth>
+          <Button
+            variant="outlined"
+            onClick={() => setDraft(emptyVendorFilters)}
+            disabled={activeCount === 0}
+            fullWidth
+          >
             Clear all
           </Button>
           <Button variant="contained" onClick={handleApply} fullWidth>
-            Apply
+            Apply filters
           </Button>
         </Stack>
       </Stack>
diff --git a/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx b/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
index d54c3016..d6d5cbf7 100644
--- a/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
@@ -1,10 +1,4 @@
-import {
-  Controller,
-  useFieldArray,
-  useWatch,
-  type Control,
-  type FieldErrors,
-} from "react-hook-form";
+import { Controller, useFieldArray, type Control, type FieldErrors } from "react-hook-form";
 import AddIcon from "@mui/icons-material/Add";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
 import {
@@ -34,7 +28,7 @@ interface VendorRosterFormFieldsProps {
   selectedCompanyId?: string | number | null;
   onSelectCompany?: (company: VendorFacetCompany | null) => Promise<void>;
   onClearSelectedCompany?: (nextName?: string) => void;
-  onRequestDeactivate?: (technician: RosterTechnicianValues) => void;
+  showTechnicianStatus?: boolean;
 }
 
 function CompanyNameField({
@@ -61,6 +55,7 @@ function CompanyNameField({
           <TextField
             {...field}
             label="Company"
+            placeholder="Start typing a company…"
             required
             error={Boolean(errors.name)}
             helperText={errors.name?.message}
@@ -105,8 +100,9 @@ function CompanyNameField({
               {...params}
               label="Company"
               required
+              placeholder="Start typing a company…"
               error={Boolean(errors.name)}
-              helperText={errors.name?.message ?? "Choose an existing company or enter a new one"}
+              helperText={errors.name?.message}
               inputRef={field.ref}
             />
           )}
@@ -126,10 +122,7 @@ function CompanyFields({
 }: VendorRosterFormFieldsProps) {
   return (
     <Box>
-      <Typography variant="subtitle2" className="font-semibold uppercase">
-        Company
-      </Typography>
-      <Stack spacing={2} className="mt-2">
+      <Stack spacing={2}>
         <CompanyNameField
           control={control}
           errors={errors}
@@ -145,13 +138,13 @@ function CompanyFields({
             render={({ field }) => (
               <TextField
                 {...field}
-                label="Company Phone"
-                placeholder="(XXX) XXX-XXXX"
+                label="Company Phone (optional)"
+                placeholder="(214) 555-0100"
                 inputMode="tel"
                 value={field.value ?? ""}
                 onChange={(event) => field.onChange(formatNorthAmericanPhone(event.target.value))}
                 error={Boolean(errors.companyPhone)}
-                helperText={errors.companyPhone?.message ?? "Phone or email required"}
+                helperText={errors.companyPhone?.message}
                 fullWidth
               />
             )}
@@ -162,7 +155,8 @@ function CompanyFields({
             render={({ field }) => (
               <TextField
                 {...field}
-                label="Email"
+                label="Email (optional)"
+                placeholder="dispatch@vendor.com"
                 type="email"
                 error={Boolean(errors.email)}
                 helperText={errors.email?.message}
@@ -174,9 +168,16 @@ function CompanyFields({
         <Controller
           control={control}
           name="address"
-          render={({ field }) => <TextField {...field} label="Address" fullWidth />}
+          render={({ field }) => (
+            <TextField
+              {...field}
+              label="Address (optional)"
+              placeholder="123 Industrial Pkwy, Dallas, TX 75201"
+              fullWidth
+            />
+          )}
         />
-        <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+        <Stack direction={{ xs: "column", sm: "row" }} spacing={2} sx={{ display: "none" }}>
           <Controller
             control={control}
             name="city"
@@ -201,10 +202,10 @@ function CompanyFields({
           render={({ field }) => (
             <TextField
               {...field}
-              label="Google Maps URL"
-              placeholder="https://maps.google.com/..."
+              label="Google Maps URL (optional)"
+              placeholder="https://maps.google.com/…"
               error={Boolean(errors.googleMapsUrl)}
-              helperText={errors.googleMapsUrl?.message ?? "Must be an HTTPS link"}
+              helperText={errors.googleMapsUrl?.message}
               fullWidth
             />
           )}
@@ -213,7 +214,14 @@ function CompanyFields({
           control={control}
           name="notes"
           render={({ field }) => (
-            <TextField {...field} label="Notes" multiline minRows={2} fullWidth />
+            <TextField
+              {...field}
+              label="Notes (optional)"
+              placeholder="Internal notes, scheduling preferences, certifications…"
+              multiline
+              minRows={2}
+              fullWidth
+            />
           )}
         />
       </Stack>
@@ -228,7 +236,7 @@ interface TechnicianRowProps {
   onRemove: () => void;
   canRemove: boolean;
   tradeOptions: string[];
-  onRequestDeactivate?: (technician: RosterTechnicianValues) => void;
+  showStatus: boolean;
 }
 
 function TechnicianRow({
@@ -238,15 +246,13 @@ function TechnicianRow({
   onRemove,
   canRemove,
   tradeOptions,
-  onRequestDeactivate,
+  showStatus,
 }: TechnicianRowProps) {
-  const technician = useWatch({ control, name: `technicians.${index}` });
-
   return (
     <Stack spacing={2} className="rounded-md border border-solid border-gray-200 p-3">
       <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
         <Typography variant="subtitle2" className="font-semibold">
-          Technician {index + 1}
+          {index + 1} - TECHNICIAN
         </Typography>
         <Tooltip title="Remove technician">
           <span>
@@ -267,7 +273,8 @@ function TechnicianRow({
         render={({ field }) => (
           <TextField
             {...field}
-            label="Technician Name"
+            label="Technician name (optional)"
+            placeholder="Technician name"
             error={Boolean(error?.contactName)}
             helperText={error?.contactName?.message}
             fullWidth
@@ -281,8 +288,8 @@ function TechnicianRow({
           render={({ field }) => (
             <TextField
               {...field}
-              label="Technician Phone"
-              placeholder="(XXX) XXX-XXXX"
+              label="Technician phone (optional)"
+              placeholder="(000) 000-0000"
               inputMode="tel"
               value={field.value ?? ""}
               onChange={(event) => field.onChange(formatNorthAmericanPhone(event.target.value))}
@@ -303,32 +310,29 @@ function TechnicianRow({
               error={Boolean(error?.email)}
               helperText={error?.email?.message}
               fullWidth
+              sx={{ display: "none" }}
             />
           )}
         />
       </Stack>
       <VendorTradeSpecialtiesField control={control} index={index} tradeOptions={tradeOptions} />
-      <Controller
-        control={control}
-        name={`technicians.${index}.isActive`}
-        render={({ field }) => (
-          <FormControlLabel
-            control={
-              <Switch
-                checked={field.value}
-                onChange={(_event, checked) => {
-                  if (!checked && technician?.id != null && onRequestDeactivate != null) {
-                    onRequestDeactivate(technician);
-                    return;
-                  }
-                  field.onChange(checked);
-                }}
-              />
-            }
-            label={field.value ? "Active" : "Inactive"}
-          />
-        )}
-      />
+      {showStatus && (
+        <Controller
+          control={control}
+          name={`technicians.${index}.isActive`}
+          render={({ field }) => (
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={field.value}
+                  onChange={(_event, checked) => field.onChange(checked)}
+                />
+              }
+              label={field.value ? "Active" : "Inactive"}
+            />
+          )}
+        />
+      )}
     </Stack>
   );
 }
@@ -337,12 +341,12 @@ function TechniciansFieldArray({
   control,
   errors,
   tradeOptions,
-  onRequestDeactivate,
+  showStatus,
 }: {
   control: Control<VendorCompanyRosterFormValues>;
   errors: FieldErrors<VendorCompanyRosterFormValues>;
   tradeOptions: string[];
-  onRequestDeactivate?: (technician: RosterTechnicianValues) => void;
+  showStatus: boolean;
 }) {
   const { fields, append, remove } = useFieldArray({ control, name: "technicians" });
 
@@ -385,7 +389,7 @@ function TechniciansFieldArray({
               onRemove={() => remove(index)}
               canRemove
               tradeOptions={tradeOptions}
-              onRequestDeactivate={onRequestDeactivate}
+              showStatus={showStatus}
             />
           ))
         )}
@@ -395,7 +399,7 @@ function TechniciansFieldArray({
 }
 
 export function VendorRosterFormFields(props: VendorRosterFormFieldsProps) {
-  const { control, errors, tradeOptions = [], onRequestDeactivate } = props;
+  const { control, errors, tradeOptions = [], showTechnicianStatus = true } = props;
   return (
     <Stack spacing={3}>
       <CompanyFields {...props} />
@@ -404,7 +408,7 @@ export function VendorRosterFormFields(props: VendorRosterFormFieldsProps) {
         control={control}
         errors={errors}
         tradeOptions={tradeOptions}
-        onRequestDeactivate={onRequestDeactivate}
+        showStatus={showTechnicianStatus}
       />
     </Stack>
   );
diff --git a/src/app/(protected)/vendors/_components/vendor-roster-page.tsx b/src/app/(protected)/vendors/_components/vendor-roster-page.tsx
index cf4e6daf..15f8ff9a 100644
--- a/src/app/(protected)/vendors/_components/vendor-roster-page.tsx
+++ b/src/app/(protected)/vendors/_components/vendor-roster-page.tsx
@@ -1,44 +1,17 @@
 import type { ReactNode } from "react";
 import { useNavigate } from "react-router";
 import { Alert, Box, Button, CircularProgress, Paper, Stack, Typography } from "@mui/material";
-import { VendorDeactivationDialog } from "./vendor-deactivation-dialog";
 import { VendorPortalTokenPanel } from "./vendor-portal-token-panel";
 import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
 import { VendorRosterFormFields } from "./vendor-roster-form-fields";
 import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
-import { useVendorDeactivation } from "./use-vendor-deactivation";
 import { useVendorRosterForm } from "./use-vendor-roster-form";
-import type { RosterTechnicianValues } from "@/domain/vendors/schemas/vendor-roster-schema";
-import type { VendorCompanyRoster, VendorListItem } from "@/domain/vendors/types/vendor";
 
 interface VendorRosterPageProps {
   vendorId?: string;
   companyId?: string;
 }
 
-function toDeactivationListItem(
-  roster: VendorCompanyRoster,
-  technician: RosterTechnicianValues,
-): VendorListItem {
-  return {
-    id: technician.id ?? null,
-    companyId: roster.companyId,
-    companyName: roster.name,
-    contactName: technician.contactName,
-    email: technician.email,
-    phone: technician.phone,
-    companyPhone: roster.companyPhone,
-    googleMapsUrl: roster.googleMapsUrl,
-    notes: roster.notes,
-    totalJobs: 0,
-    city: roster.city,
-    state: roster.state,
-    tradeSpecialties: technician.tradeSpecialties,
-    isActive: technician.isActive,
-    preferredContact: technician.preferredContact ?? "Phone",
-  };
-}
-
 function PageShell({
   title,
   subtitle,
@@ -70,9 +43,6 @@ function PageShell({
 export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPageProps) {
   const navigate = useNavigate();
   const isEdit = vendorId !== undefined || companyId !== undefined;
-  const deactivation = useVendorDeactivation({
-    onSuccess: () => navigate("/vendors"),
-  });
   const form = useVendorRosterForm({
     mode: isEdit ? "update" : "create",
     vendorId,
@@ -80,11 +50,6 @@ export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPa
     onSuccess: () => navigate("/vendors"),
   });
 
-  const handleRequestDeactivate = (technician: RosterTechnicianValues) => {
-    if (!form.roster || technician.id == null) return;
-    deactivation.open(toDeactivationListItem(form.roster, technician));
-  };
-
   if (isEdit && form.isLoading) {
     return (
       <Box className="flex justify-center p-10">
@@ -139,7 +104,6 @@ export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPa
             control={form.control}
             errors={form.errors}
             tradeOptions={form.trades}
-            onRequestDeactivate={isEdit ? handleRequestDeactivate : undefined}
             {...companySelectionProps}
           />
 
@@ -161,17 +125,6 @@ export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPa
           </Stack>
         </Stack>
       </Box>
-
-      <VendorDeactivationDialog
-        target={deactivation.target}
-        isLoading={deactivation.isLoading}
-        isSaving={deactivation.isSaving}
-        error={deactivation.error}
-        impact={deactivation.impact}
-        impactError={deactivation.impactError}
-        onClose={deactivation.close}
-        onConfirm={deactivation.confirm}
-      />
     </PageShell>
   );
 }
diff --git a/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx b/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
index e3e7cfa5..b8ad2a9c 100644
--- a/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
+++ b/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
@@ -1,13 +1,9 @@
-import FilterListIcon from "@mui/icons-material/FilterList";
-import {
-  Button,
-  Chip,
-  CircularProgress,
-  Stack,
-  TablePagination,
-  TextField,
-  Typography,
-} from "@mui/material";
+import { Button, Chip, CircularProgress, Stack, TablePagination } from "@mui/material";
+import { Plus, SlidersHorizontal } from "lucide-react";
+import { PageHeader } from "@/components/ui/page-header";
+import { SearchInput } from "@/components/ui/search-input";
+import { Text } from "@/components/ui/text";
+import { ToolbarButton } from "@/components/ui/toolbar-button";
 
 interface VendorsListToolbarProps {
   globalCount: number;
@@ -33,52 +29,46 @@ export function VendorsListToolbar({
   onAddVendor,
 }: VendorsListToolbarProps) {
   return (
-    <Stack
-      direction={{ xs: "column", md: "row" }}
-      spacing={2}
-      sx={{
-        alignItems: { xs: "stretch", md: "center" },
-        justifyContent: "space-between",
-      }}
-    >
-      <Stack direction="row" spacing={2} sx={{ alignItems: "baseline" }}>
-        <Typography variant="h5" component="h1">
-          Vendors / Technicians
-        </Typography>
-        <Typography variant="body2" sx={{ color: "text.secondary" }}>
-          {globalCount} vendor entries · {activeCount} active
-        </Typography>
-        {isFetching && !isLoading && <CircularProgress size={16} />}
-      </Stack>
-
-      <Stack
-        direction={{ xs: "column", sm: "row" }}
-        spacing={2}
-        sx={{ alignItems: { xs: "stretch", sm: "center" } }}
-      >
-        <TextField
-          size="small"
-          value={search}
-          onChange={(e) => onSearchChange(e.target.value)}
-          placeholder="Search name, company, trade..."
-          className="min-w-[260px]"
-        />
-        <Button
-          variant="outlined"
-          onClick={onOpenFilters}
-          startIcon={<FilterListIcon />}
-          aria-label="Open vendor filters"
-        >
-          Filters
-          {appliedFilterCount > 0 && (
-            <Chip size="small" color="primary" label={appliedFilterCount} sx={{ ml: 1 }} />
+    <PageHeader
+      surface
+      className="-mx-4 -mt-4"
+      title="Vendors / Technicians"
+      subtitle={`${globalCount} technicians · ${activeCount} active`}
+      actions={
+        <>
+          <SearchInput
+            value={search}
+            onChange={onSearchChange}
+            placeholder="Search name, company, trade…"
+            aria-label="Search vendors"
+            fullWidth
+            className="w-full md:w-56"
+            inputClassName="h-8 py-0 text-[13px]"
+          />
+          <ToolbarButton
+            variant="outline"
+            icon={<SlidersHorizontal size={16} />}
+            onClick={onOpenFilters}
+            aria-label="Open vendor filters"
+            badge={appliedFilterCount}
+            className="min-w-[88.609375px] flex-1 text-[13px] md:w-[88.609375px] md:flex-none"
+          >
+            Filters
+          </ToolbarButton>
+          <ToolbarButton
+            variant="primary"
+            icon={<Plus size={16} />}
+            onClick={onAddVendor}
+            className="min-w-[115.546875px] flex-1 border-0 px-3 text-[13px] md:w-[115.546875px] md:flex-none"
+          >
+            Add Vendor
+          </ToolbarButton>
+          {isFetching && !isLoading && (
+            <CircularProgress size={14} aria-label="Refreshing vendors" role="status" />
           )}
-        </Button>
-        <Button variant="contained" onClick={onAddVendor}>
-          + Add Vendor
-        </Button>
-      </Stack>
-    </Stack>
+        </>
+      }
+    />
   );
 }
 
@@ -90,16 +80,21 @@ interface AppliedChipEntry {
 
 interface VendorAppliedFiltersBarProps {
   chips: AppliedChipEntry[];
+  resultCount: number;
   onClearAll: () => void;
 }
 
-export function VendorAppliedFiltersBar({ chips, onClearAll }: VendorAppliedFiltersBarProps) {
+export function VendorAppliedFiltersBar({
+  chips,
+  resultCount,
+  onClearAll,
+}: VendorAppliedFiltersBarProps) {
   if (chips.length === 0) return null;
   return (
     <Stack direction="row" spacing={1} className="flex flex-wrap items-center">
-      <Typography variant="caption" sx={{ color: "text.secondary" }}>
-        Applied:
-      </Typography>
+      <Text variant="caption" tone="muted">
+        {resultCount} {resultCount === 1 ? "technician" : "technicians"} · filtered by
+      </Text>
       {chips.map((chip) => (
         <Chip
           key={chip.key}
@@ -146,23 +141,31 @@ export function VendorsListFooter({
       sx={{
         alignItems: { xs: "stretch", sm: "center" },
         justifyContent: "space-between",
+        minHeight: 33.5,
+        mx: -2,
+        px: 2,
+        backgroundColor: "var(--color-bg-surface)",
       }}
     >
-      <Typography variant="body2" sx={{ color: "text.secondary" }}>
+      <Text variant="caption" as="span" sx={{ color: "#6b7a96", fontSize: 11, lineHeight: 1.5 }}>
         {totalCount} {isActive ? "active" : "inactive"}{" "}
-        {totalCount === 1 ? "vendor entry" : "vendor entries"}
+        {totalCount === 1 ? "technician" : "technicians"}
         {isFiltered && " · filtered"}
-        {` · ${activeCount} active · ${inactiveCount} inactive`}
-      </Typography>
-      <TablePagination
-        component="div"
-        count={totalCount}
-        page={page}
-        onPageChange={(_e, nextPage) => onPageChange(nextPage)}
-        rowsPerPage={pageSize}
-        onRowsPerPageChange={(e) => onPageSizeChange(Number(e.target.value))}
-        rowsPerPageOptions={[12, 24, 48]}
-      />
+      </Text>
+      <Text variant="caption" as="span" sx={{ color: "#6b7a96", fontSize: 11, lineHeight: 1.5 }}>
+        {activeCount} active · {inactiveCount} inactive
+      </Text>
+      {totalCount > pageSize && (
+        <TablePagination
+          component="div"
+          count={totalCount}
+          page={page}
+          onPageChange={(_e, nextPage) => onPageChange(nextPage)}
+          rowsPerPage={pageSize}
+          onRowsPerPageChange={(e) => onPageSizeChange(Number(e.target.value))}
+          rowsPerPageOptions={[24, 48, 96]}
+        />
+      )}
     </Stack>
   );
 }
diff --git a/src/app/(protected)/vendors/_components/vendors-table.tsx b/src/app/(protected)/vendors/_components/vendors-table.tsx
index 802fff8a..db588cff 100644
--- a/src/app/(protected)/vendors/_components/vendors-table.tsx
+++ b/src/app/(protected)/vendors/_components/vendors-table.tsx
@@ -1,11 +1,10 @@
 import { type KeyboardEvent, type MouseEvent } from "react";
-import { useNavigate } from "react-router";
-import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
+import SearchOffOutlinedIcon from "@mui/icons-material/SearchOffOutlined";
 import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
 import {
   Avatar,
-  Chip,
+  Box,
   CircularProgress,
   IconButton,
   Link,
@@ -18,8 +17,8 @@ import {
   TableHead,
   TableRow,
   Tooltip,
-  Typography,
 } from "@mui/material";
+import { Text } from "@/components/ui/text";
 import type { VendorListItem } from "@/domain/vendors/types/vendor";
 
 const TABLE_COLUMNS = [
@@ -30,9 +29,6 @@ const TABLE_COLUMNS = [
   "Phone",
   "Email",
   "Total Jobs",
-  "Status",
-  "View",
-  "Edit",
 ] as const;
 
 function getInitials(name: string): string {
@@ -54,19 +50,34 @@ function stopPropagation(event: MouseEvent): void {
   event.stopPropagation();
 }
 
+function VendorStatus({ isActive }: { isActive: boolean }) {
+  return (
+    <Stack direction="row" spacing={1} sx={{ alignItems: "center", pl: 1 }}>
+      <Box
+        component="span"
+        sx={{
+          width: 6,
+          height: 6,
+          borderRadius: "9999px",
+          backgroundColor: isActive ? "success.main" : "text.secondary",
+        }}
+      />
+      <Text variant="description">{isActive ? "Active" : "Inactive"}</Text>
+    </Stack>
+  );
+}
+
 interface VendorTableRowProps {
   row: VendorListItem;
   onOpenDetail: (row: VendorListItem) => void;
-  onOpenDeactivation: (row: VendorListItem) => void;
+  onOpenEdit: (row: VendorListItem) => void;
 }
 
-function VendorTableRow({ row, onOpenDetail, onOpenDeactivation }: VendorTableRowProps) {
-  const navigate = useNavigate();
+function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps) {
   const trades = splitTrades(row.tradeSpecialties);
   const primaryTrade = trades[0] ?? "—";
   const extraTrades = trades.length > 1 ? trades.length - 1 : 0;
   const locationText = [row.city, row.state].filter(Boolean).join(", ") || "—";
-  const hasVendorId = row.id != null;
   const rowKey = String(row.id ?? `company-${row.companyId ?? ""}`);
 
   const handleKeyDown = (event: KeyboardEvent) => {
@@ -88,37 +99,62 @@ function VendorTableRow({ row, onOpenDetail, onOpenDeactivation }: VendorTableRo
       onKeyDown={handleKeyDown}
     >
       <TableCell>
-        <Typography className="font-semibold">{row.companyName || "—"}</Typography>
+        <Text variant="description" sx={{ color: "var(--color-foreground)" }}>
+          {row.companyName || "—"}
+        </Text>
       </TableCell>
       <TableCell>
-        <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
+        <Stack direction="row" spacing={1.25} sx={{ alignItems: "center" }}>
           <Avatar
             sx={{
               width: 28,
               height: 28,
-              fontSize: 12,
-              backgroundColor: "var(--accent, #1976d2)",
+              backgroundColor: "var(--color-bg-muted)",
+              color: "var(--color-primary)",
+              fontSize: 10.5,
+              fontWeight: 600,
             }}
           >
             {getInitials(row.contactName)}
           </Avatar>
-          <Typography variant="body2">{row.contactName || "—"}</Typography>
+          <Text variant="description" sx={{ color: "var(--color-foreground)" }}>
+            {row.contactName || "—"}
+          </Text>
         </Stack>
       </TableCell>
-      <TableCell>{locationText}</TableCell>
-      <TableCell>
+      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>{locationText}</TableCell>
+      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>
         {primaryTrade === "—" ? (
           "—"
         ) : (
           <Stack direction="row" spacing={0.5} sx={{ alignItems: "center" }}>
             <span>{primaryTrade}</span>
-            {extraTrades > 0 && <Chip size="small" label={`+${extraTrades}`} />}
+            {extraTrades > 0 && (
+              <Box
+                component="span"
+                sx={{
+                  borderRadius: "9999px",
+                  backgroundColor: "var(--color-bg-muted)",
+                  px: 0.75,
+                  py: 0.25,
+                  fontSize: 10.5,
+                  lineHeight: 1.2,
+                }}
+              >
+                +{extraTrades}
+              </Box>
+            )}
           </Stack>
         )}
       </TableCell>
-      <TableCell>
+      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>
         {row.phone ? (
-          <Link href={`tel:${row.phone}`} underline="hover" onClick={stopPropagation}>
+          <Link
+            href={`tel:${row.phone}`}
+            underline="hover"
+            color="inherit"
+            onClick={stopPropagation}
+          >
             {row.phone}
           </Link>
         ) : (
@@ -127,71 +163,53 @@ function VendorTableRow({ row, onOpenDetail, onOpenDeactivation }: VendorTableRo
       </TableCell>
       <TableCell>
         {row.email ? (
-          <Link href={`mailto:${row.email}`} underline="hover" onClick={stopPropagation}>
+          <Link
+            href={`mailto:${row.email}`}
+            underline="hover"
+            sx={{ color: "#6b7a96" }}
+            onClick={stopPropagation}
+          >
             {row.email}
           </Link>
         ) : (
           "—"
         )}
       </TableCell>
-      <TableCell>{row.totalJobs ?? 0}</TableCell>
+      <TableCell align="center">{row.totalJobs ?? 0}</TableCell>
       <TableCell>
-        <Chip
-          size="small"
-          label={row.isActive ? "Active" : "Inactive"}
-          color={row.isActive ? "success" : "default"}
-        />
+        <VendorStatus isActive={row.isActive} />
       </TableCell>
-      <TableCell align="center">
-        <Tooltip title="View details">
-          <IconButton
-            size="small"
-            aria-label={`View vendor ${row.companyName}`}
-            onClick={(event) => {
-              event.stopPropagation();
-              onOpenDetail(row);
-            }}
-          >
-            <VisibilityOutlinedIcon fontSize="small" />
-          </IconButton>
-        </Tooltip>
-      </TableCell>
-      <TableCell align="center">
+      <TableCell align="right">
         <Stack
           direction="row"
           spacing={0.5}
-          sx={{ alignItems: "center", justifyContent: "center" }}
+          className="vendor-row-actions"
+          sx={{ alignItems: "center", justifyContent: "flex-end" }}
         >
+          <Tooltip title="View details">
+            <IconButton
+              size="small"
+              aria-label={`View vendor ${row.companyName}`}
+              onClick={(event) => {
+                event.stopPropagation();
+                onOpenDetail(row);
+              }}
+            >
+              <VisibilityOutlinedIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
           <Tooltip title="Edit">
             <IconButton
               size="small"
               aria-label={`Edit vendor ${row.companyName}`}
               onClick={(event) => {
                 event.stopPropagation();
-                navigate(
-                  row.id != null
-                    ? `/vendors/edit/${row.id}`
-                    : `/vendors/company/${row.companyId ?? ""}`,
-                );
+                onOpenEdit(row);
               }}
             >
               <EditOutlinedIcon fontSize="small" />
             </IconButton>
           </Tooltip>
-          {hasVendorId && row.isActive && (
-            <Tooltip title="Deactivate">
-              <IconButton
-                size="small"
-                aria-label="Deactivate vendor"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  onOpenDeactivation(row);
-                }}
-              >
-                <DeleteOutlineIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-          )}
         </Stack>
       </TableCell>
     </TableRow>
@@ -200,50 +218,118 @@ function VendorTableRow({ row, onOpenDetail, onOpenDeactivation }: VendorTableRo
 
 interface VendorsTableProps {
   rows: VendorListItem[];
+  isActive: boolean;
+  isFiltered: boolean;
   isLoading: boolean;
   showError: boolean;
   onOpenDetail: (row: VendorListItem) => void;
-  onOpenDeactivation: (row: VendorListItem) => void;
+  onOpenEdit: (row: VendorListItem) => void;
 }
 
 export function VendorsTable({
   rows,
+  isActive,
+  isFiltered,
   isLoading,
   showError,
   onOpenDetail,
-  onOpenDeactivation,
+  onOpenEdit,
 }: VendorsTableProps) {
   const showEmptyRow = !isLoading && !showError && rows.length === 0;
+  const columnCount = TABLE_COLUMNS.length + 2;
 
   return (
-    <TableContainer component={Paper} variant="outlined" sx={{ overflowX: "auto" }}>
-      <Table size="small" sx={{ minWidth: 960 }}>
+    <TableContainer
+      component={Paper}
+      variant="outlined"
+      sx={{
+        mt: 2,
+        mb: 2,
+        flex: "1 1 auto",
+        overflow: "auto",
+        borderRadius: 1.5,
+        fontSize: 13,
+      }}
+    >
+      <Table
+        size="small"
+        stickyHeader
+        sx={{
+          minWidth: 1550,
+          tableLayout: "fixed",
+          "& .MuiTableCell-head": {
+            backgroundColor: "var(--color-bg-muted)",
+            color: "var(--color-foreground)",
+            fontSize: 10.5,
+            fontWeight: 700,
+            letterSpacing: "0.06em",
+            lineHeight: "24px",
+            px: 1.75,
+            py: 1.375,
+            textTransform: "uppercase",
+            whiteSpace: "nowrap",
+          },
+          "& .MuiTableCell-body": {
+            fontSize: 13,
+            px: 1.5,
+            py: 1,
+            height: 52,
+            lineHeight: 1.43,
+            whiteSpace: "nowrap",
+          },
+          "& .vendor-row-actions": {
+            opacity: { xs: 1, md: 0 },
+            transition: "opacity 120ms ease",
+          },
+          "& .MuiTableRow-root:hover .vendor-row-actions, & .MuiTableRow-root:focus-within .vendor-row-actions":
+            {
+              opacity: 1,
+            },
+        }}
+      >
+        <colgroup>
+          <col style={{ width: 196.34375 }} />
+          <col style={{ width: 207.25 }} />
+          <col style={{ width: 152.703125 }} />
+          <col style={{ width: 218.15625 }} />
+          <col style={{ width: 152.703125 }} />
+          <col style={{ width: 251.90625 }} />
+          <col style={{ width: 109.078125 }} />
+          <col style={{ width: 119.984375 }} />
+          <col style={{ width: 141.875 }} />
+        </colgroup>
         <TableHead>
           <TableRow>
             {TABLE_COLUMNS.map((column) => (
-              <TableCell
-                key={column}
-                align={column === "View" || column === "Edit" ? "center" : "left"}
-                className="font-semibold"
-              >
+              <TableCell key={column} align={column === "Total Jobs" ? "center" : "left"}>
                 {column}
               </TableCell>
             ))}
+            <TableCell>Status</TableCell>
+            <TableCell align="right" aria-label="Vendor actions" />
           </TableRow>
         </TableHead>
         <TableBody>
           {isLoading ? (
             <TableRow>
-              <TableCell colSpan={TABLE_COLUMNS.length} align="center" className="py-10">
+              <TableCell colSpan={columnCount} align="center" className="py-10">
                 <CircularProgress size={28} />
               </TableCell>
             </TableRow>
           ) : showEmptyRow ? (
             <TableRow>
-              <TableCell colSpan={TABLE_COLUMNS.length} align="center" className="py-10">
-                <Typography sx={{ color: "text.secondary" }}>
-                  No vendors match the current filters.
-                </Typography>
+              <TableCell colSpan={columnCount} align="center" className="py-10">
+                <Stack spacing={1} sx={{ alignItems: "center" }}>
+                  <SearchOffOutlinedIcon sx={{ color: "text.secondary", fontSize: 32 }} />
+                  <Text variant="description" className="font-semibold">
+                    {`No ${isActive ? "active" : "inactive"} technicians found`}
+                  </Text>
+                  <Text variant="caption" tone="muted">
+                    {isFiltered
+                      ? "Try a different search, or add a new vendor."
+                      : "Add a vendor to get started."}
+                  </Text>
+                </Stack>
               </TableCell>
             </TableRow>
           ) : (
@@ -252,7 +338,7 @@ export function VendorsTable({
                 key={String(row.id ?? `company-${row.companyId ?? ""}`)}
                 row={row}
                 onOpenDetail={onOpenDetail}
-                onOpenDeactivation={onOpenDeactivation}
+                onOpenEdit={onOpenEdit}
               />
             ))
           )}
diff --git a/src/app/(protected)/vendors/index.tsx b/src/app/(protected)/vendors/index.tsx
index a084b59b..48447ad6 100644
--- a/src/app/(protected)/vendors/index.tsx
+++ b/src/app/(protected)/vendors/index.tsx
@@ -23,16 +23,91 @@ interface AppliedChip {
   label: string;
 }
 
+function statusTabLabel(label: string, count: number) {
+  return (
+    <Box className="flex items-center gap-2">
+      <Box component="span">{label}</Box>
+      <Box
+        component="span"
+        className="min-w-5 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none"
+        sx={{ backgroundColor: "action.hover", color: "text.secondary" }}
+      >
+        {count}
+      </Box>
+    </Box>
+  );
+}
+
+function VendorStatusTabs({
+  isActive,
+  activeCount,
+  inactiveCount,
+  onChange,
+}: {
+  isActive: boolean;
+  activeCount: number;
+  inactiveCount: number;
+  onChange: (isActive: boolean) => void;
+}) {
+  return (
+    <Tabs
+      value={isActive ? "active" : "inactive"}
+      onChange={(_event, value: "active" | "inactive") => onChange(value === "active")}
+      aria-label="Vendor status"
+      sx={{
+        minHeight: 36,
+        flexShrink: 0,
+        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+        backgroundColor: "var(--color-bg-surface)",
+        mx: -2,
+        px: 1.5,
+        "& .MuiTab-root": {
+          minHeight: 36,
+          px: 2,
+          py: 0,
+          fontSize: 13,
+          fontWeight: 500,
+          textTransform: "none",
+        },
+        "& .MuiTab-root:first-of-type": { width: 102.84375 },
+        "& .Mui-selected": { fontWeight: 600 },
+        "& .MuiTabs-indicator": { height: 2 },
+      }}
+    >
+      <Tab
+        value="active"
+        label={statusTabLabel("Active", activeCount)}
+        aria-label={`Active (${activeCount})`}
+      />
+      <Tab
+        value="inactive"
+        label={statusTabLabel("Inactive", inactiveCount)}
+        aria-label={`Inactive (${inactiveCount})`}
+      />
+    </Tabs>
+  );
+}
+
 function describeChips(
   filters: VendorFilters,
   jobBucketLabels: Map<string, string>,
 ): AppliedChip[] {
   const chips: AppliedChip[] = [];
-  filters.companies.forEach((value) => chips.push({ category: "companies", value, label: value }));
-  filters.trades.forEach((value) => chips.push({ category: "trades", value, label: value }));
-  filters.locations.forEach((value) => chips.push({ category: "locations", value, label: value }));
+  filters.companies.forEach((value) =>
+    chips.push({ category: "companies", value, label: `Company: ${value}` }),
+  );
+  filters.trades.forEach((value) =>
+    chips.push({ category: "trades", value, label: `Trade: ${value}` }),
+  );
+  filters.locations.forEach((value) =>
+    chips.push({ category: "locations", value, label: `Location: ${value}` }),
+  );
   filters.jobBuckets.forEach((value) =>
-    chips.push({ category: "jobBuckets", value, label: jobBucketLabels.get(value) ?? value }),
+    chips.push({
+      category: "jobBuckets",
+      value,
+      label: `Total Jobs: ${jobBucketLabels.get(value) ?? value}`,
+    }),
   );
   return chips;
 }
@@ -42,7 +117,12 @@ export default function VendorsListPage() {
   const [filtersOpen, setFiltersOpen] = useState(false);
   const [createOpen, setCreateOpen] = useState(false);
   const [detailTarget, setDetailTarget] = useState<VendorListItem | null>(null);
-  const deactivation = useVendorDeactivation();
+  const [detailStartsInEdit, setDetailStartsInEdit] = useState(false);
+  const closeDetail = () => {
+    setDetailTarget(null);
+    setDetailStartsInEdit(false);
+  };
+  const deactivation = useVendorDeactivation(closeDetail);
 
   const { data: facets } = useVendorFacets(filters.isActive);
   const { data, isLoading, isFetching, error } = useVendorsList(filters.listParams);
@@ -61,7 +141,7 @@ export default function VendorsListPage() {
   const appliedChips = describeChips(filters.appliedFilters, jobBucketLabels);
 
   return (
-    <Box className="flex flex-col gap-4 p-4">
+    <Box className="flex h-full flex-col overflow-hidden px-4 pt-4 pb-0">
       <VendorsListToolbar
         globalCount={activeCount + inactiveCount}
         activeCount={activeCount}
@@ -74,18 +154,15 @@ export default function VendorsListPage() {
         onAddVendor={() => setCreateOpen(true)}
       />
 
-      <Tabs
-        value={filters.isActive ? "active" : "inactive"}
-        onChange={(_event, value: "active" | "inactive") =>
-          filters.setIsActiveWithReset(value === "active")
-        }
-        aria-label="Vendor status"
-      >
-        <Tab value="active" label={`Active (${activeCount})`} />
-        <Tab value="inactive" label={`Inactive (${inactiveCount})`} />
-      </Tabs>
+      <VendorStatusTabs
+        isActive={filters.isActive}
+        activeCount={activeCount}
+        inactiveCount={inactiveCount}
+        onChange={filters.setIsActiveWithReset}
+      />
 
       <VendorAppliedFiltersBar
+        resultCount={totalCount}
         chips={appliedChips.map((chip) => ({
           key: `${chip.category}-${chip.value}`,
           label: chip.label,
@@ -102,10 +179,18 @@ export default function VendorsListPage() {
 
       <VendorsTable
         rows={rows}
+        isActive={filters.isActive}
+        isFiltered={appliedChips.length > 0 || Boolean(filters.debouncedSearch)}
         isLoading={isLoading}
         showError={Boolean(error)}
-        onOpenDetail={setDetailTarget}
-        onOpenDeactivation={deactivation.open}
+        onOpenDetail={(row) => {
+          setDetailStartsInEdit(false);
+          setDetailTarget(row);
+        }}
+        onOpenEdit={(row) => {
+          setDetailStartsInEdit(true);
+          setDetailTarget(row);
+        }}
       />
 
       <VendorsListFooter
@@ -133,7 +218,9 @@ export default function VendorsListPage() {
       <VendorDetailDrawer
         open={Boolean(detailTarget)}
         vendor={detailTarget}
-        onClose={() => setDetailTarget(null)}
+        startInEdit={detailStartsInEdit}
+        onRequestDeactivation={deactivation.open}
+        onClose={closeDetail}
       />
 
       <VendorDeactivationDialog
diff --git a/src/components/ui/page-header.tsx b/src/components/ui/page-header.tsx
index 566ae837..a826b90a 100644
--- a/src/components/ui/page-header.tsx
+++ b/src/components/ui/page-header.tsx
@@ -24,15 +24,16 @@ export function PageHeader({
 }: PageHeaderProps) {
   return (
     <Stack
-      direction="row"
+      direction={{ xs: "column", md: "row" }}
       className={cn(
         surface &&
           "-mx-2.5 -mt-2.5 shrink-0 border-b border-(--color-border) bg-(--color-bg-surface) px-5 py-4",
         className,
       )}
       sx={{
-        alignItems: "center",
+        alignItems: { xs: "stretch", md: "center" },
         justifyContent: "space-between",
+        gap: { xs: 2, md: 0 },
       }}
     >
       <Stack spacing={0}>
@@ -49,15 +50,31 @@ export function PageHeader({
             "m-0 font-display mt-1! text-[30px]! font-extrabold leading-[1.1] tracking-[-0.02em] text-foreground",
             eyebrow && "mt-1",
           )}
+          sx={{ fontSize: 30, fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em" }}
         >
           {title}
         </Text>
-        <Text variant="description" tone="muted" when={Boolean(subtitle)}>
+        <Text
+          variant="description"
+          as="span"
+          tone="muted"
+          when={Boolean(subtitle)}
+          sx={{ mt: 0.75, fontWeight: 500 }}
+        >
           {subtitle}
         </Text>
       </Stack>
       {Boolean(actions) && (
-        <Stack direction="row" spacing={1} sx={{ alignItems: "center", flexWrap: "nowrap" }}>
+        <Stack
+          direction="row"
+          spacing={1}
+          useFlexGap
+          sx={{
+            alignItems: "center",
+            flexWrap: { xs: "wrap", md: "nowrap" },
+            width: { xs: "100%", md: "auto" },
+          }}
+        >
           {actions}
         </Stack>
       )}
diff --git a/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts b/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts
index cdc4b010..37532220 100644
--- a/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts
+++ b/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts
@@ -91,11 +91,6 @@ export function useSaveVendorCompanyRoster(): UseMutationResult<
           ? getSingleStatusOnlyChange(originalRoster, values)
           : null;
         if (statusChange) {
-          if (statusChange.isActive === false) {
-            throw new Error(
-              "Use Deactivate to check open work orders before inactivating a technician.",
-            );
-          }
           const baseRoster = originalRoster as VendorCompanyRoster;
           await vendorsApi.update(statusChange.id, { isActive: statusChange.isActive });
           return {
diff --git a/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx b/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
index d2e8433b..2e9f8f1f 100644
--- a/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
+++ b/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
@@ -5,6 +5,7 @@ import { useController } from "react-hook-form";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const rosterGet = vi.fn();
+const saveMutate = vi.fn();
 
 vi.mock("@/domain/vendors/api/vendor-company-roster-api", () => ({
   vendorCompanyRosterApi: { get: (...args: unknown[]) => rosterGet(...args) },
@@ -24,8 +25,6 @@ vi.mock("@/domain/vendors/use-cases/use-vendor-facets", () => ({
   useVendorFacets: () => ({ data: { companies: [], trades: [] } }),
 }));
 
-const saveMutate = vi.fn();
-
 vi.mock("@/domain/vendors/use-cases/use-save-vendor-company-roster", async () => {
   const actual = await vi.importActual<
     typeof import("@/domain/vendors/use-cases/use-save-vendor-company-roster")
@@ -106,6 +105,7 @@ function deferRoster(): {
 describe("useVendorRosterForm load-error handling", () => {
   beforeEach(() => {
     rosterGet.mockReset();
+    saveMutate.mockReset();
   });
 
   it("shows a safe retryable error when selecting an existing company fetch is rejected", async () => {
@@ -201,6 +201,44 @@ describe("useVendorRosterForm load-error handling", () => {
   });
 });
 
+describe("useVendorRosterForm prototype defaults", () => {
+  it("does not persist the prototype's untouched optional technician card", () => {
+    const { result } = renderHook(
+      () => useVendorRosterForm({ mode: "create", startWithTechnician: true }),
+      { wrapper: makeWrapper(createClient()) },
+    );
+
+    act(() => {
+      result.current.submit({
+        name: "Independent Vendor LLC",
+        companyPhone: "(314) 555-0199",
+        email: "",
+        address: "",
+        city: "",
+        state: "",
+        zip: "",
+        googleMapsUrl: "",
+        notes: "",
+        technicians: [
+          {
+            contactName: "",
+            phone: "",
+            email: "",
+            preferredContact: "Phone",
+            tradeSpecialties: "",
+            isActive: true,
+          },
+        ],
+      });
+    });
+
+    expect(saveMutate).toHaveBeenCalledWith(
+      expect.objectContaining({ values: expect.objectContaining({ technicians: [] }) }),
+      expect.any(Object),
+    );
+  });
+});
+
 describe("useVendorRosterForm stale-selection handling", () => {
   beforeEach(() => {
     rosterGet.mockReset();
@@ -278,97 +316,3 @@ describe("useVendorRosterForm stale-selection handling", () => {
     expect(result.current.name.field.value).toBe("Draft Vendor");
   });
 });
-
-describe("useVendorRosterForm blank technician filtering", () => {
-  beforeEach(() => {
-    rosterGet.mockReset();
-    saveMutate.mockReset();
-  });
-
-  it("omits blank new technician rows from the save payload", () => {
-    const { result } = renderHook(() => useVendorRosterForm({ mode: "create" }), {
-      wrapper: makeWrapper(createClient()),
-    });
-
-    act(() => {
-      result.current.submit({
-        name: "Gateway Plumbing",
-        companyPhone: "(314) 555-0100",
-        email: "dispatch@gateway.test",
-        address: "",
-        city: "",
-        state: "",
-        zip: "",
-        googleMapsUrl: "",
-        notes: "",
-        technicians: [
-          {
-            contactName: "Taylor",
-            phone: "(314) 555-0199",
-            email: "taylor@gateway.test",
-            tradeSpecialties: "Plumbing",
-            isActive: true,
-          },
-          {
-            contactName: "",
-            phone: "",
-            email: "",
-            tradeSpecialties: "",
-            isActive: true,
-          },
-        ],
-      });
-    });
-
-    expect(saveMutate).toHaveBeenCalledTimes(1);
-    const payload = saveMutate.mock.calls[0]?.[0] as {
-      values: { technicians: Array<{ contactName: string }> };
-    };
-    expect(payload.values.technicians).toHaveLength(1);
-    expect(payload.values.technicians[0]?.contactName).toBe("Taylor");
-  });
-
-  it("keeps existing technicians with an id even when contact fields are blank", () => {
-    const { result } = renderHook(() => useVendorRosterForm({ mode: "create" }), {
-      wrapper: makeWrapper(createClient()),
-    });
-
-    act(() => {
-      result.current.submit({
-        name: "Gateway Plumbing",
-        companyPhone: "(314) 555-0100",
-        email: "dispatch@gateway.test",
-        address: "",
-        city: "",
-        state: "",
-        zip: "",
-        googleMapsUrl: "",
-        notes: "",
-        technicians: [
-          {
-            id: 9,
-            contactName: "",
-            phone: "",
-            email: "",
-            tradeSpecialties: "",
-            isActive: true,
-          },
-        ],
-      });
-    });
-
-    const payload = saveMutate.mock.calls[0]?.[0] as {
-      values: { technicians: Array<{ id?: number }> };
-    };
-    expect(payload.values.technicians).toEqual([
-      {
-        id: 9,
-        contactName: "",
-        phone: "",
-        email: "",
-        tradeSpecialties: "",
-        isActive: true,
-      },
-    ]);
-  });
-});
diff --git a/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx b/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx
index a55ddaf0..df329a4a 100644
--- a/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx
+++ b/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx
@@ -49,11 +49,11 @@ function rosterWith(technicians: Array<Record<string, unknown>>) {
   };
 }
 
-describe("VendorDetailDrawer preferred-contact display", () => {
+describe("VendorDetailDrawer selected-technician display", () => {
   it("renders no preference label when preferredContact is absent", () => {
     useVendorCompanyRoster.mockReturnValue(
       rosterWith([
-        { id: 7, contactName: "Adam", phone: "314-555-0198", isActive: true, totalJobs: 5 },
+        { id: 1, contactName: "Adam", phone: "314-555-0198", isActive: true, totalJobs: 5 },
       ]),
     );
 
@@ -62,15 +62,15 @@ describe("VendorDetailDrawer preferred-contact display", () => {
       withAuth: false,
     });
 
-    expect(screen.getByText("Adam")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "Adam" })).toBeInTheDocument();
     expect(screen.queryByText(/^Prefers/)).not.toBeInTheDocument();
   });
 
-  it("renders the preference label when an explicit preferredContact is present", () => {
+  it("keeps the retired preferred-contact value out of the detail view", () => {
     useVendorCompanyRoster.mockReturnValue(
       rosterWith([
         {
-          id: 7,
+          id: 1,
           contactName: "Adam",
           phone: "314-555-0198",
           preferredContact: "Email",
@@ -85,6 +85,52 @@ describe("VendorDetailDrawer preferred-contact display", () => {
       withAuth: false,
     });
 
-    expect(screen.getByText("Prefers Email")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "Adam" })).toBeInTheDocument();
+    expect(screen.queryByText(/^Prefers/)).not.toBeInTheDocument();
+  });
+
+  it("falls back to the clicked row when the roster has no matching stable id", () => {
+    useVendorCompanyRoster.mockReturnValue(
+      rosterWith([
+        {
+          id: 7,
+          contactName: "Adam Whyte",
+          phone: "999-999-9999",
+          isActive: true,
+          totalJobs: 99,
+        },
+      ]),
+    );
+
+    renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
+      route: "/vendors",
+      withAuth: false,
+    });
+
+    expect(screen.getByText("0")).toBeInTheDocument();
+    expect(screen.queryByText("999-999-9999")).not.toBeInTheDocument();
+  });
+
+  it("does not expose a status control for a different technician", () => {
+    useVendorCompanyRoster.mockReturnValue(
+      rosterWith([
+        {
+          id: 7,
+          contactName: "Different Technician",
+          phone: "314-555-0101",
+          email: "",
+          tradeSpecialties: "Plumbing",
+          isActive: true,
+          totalJobs: 10,
+        },
+      ]),
+    );
+
+    renderWithProviders(
+      <VendorDetailDrawer open={true} vendor={vendor} startInEdit={true} onClose={vi.fn()} />,
+      { route: "/vendors", withAuth: false },
+    );
+
+    expect(screen.queryByRole("switch", { name: "Active status" })).not.toBeInTheDocument();
   });
 });
diff --git a/src/test/app/(protected)/vendors/vendors-list.test.tsx b/src/test/app/(protected)/vendors/vendors-list.test.tsx
index 64c71c69..a5fd7a64 100644
--- a/src/test/app/(protected)/vendors/vendors-list.test.tsx
+++ b/src/test/app/(protected)/vendors/vendors-list.test.tsx
@@ -1,21 +1,14 @@
-import { screen } from "@testing-library/react";
+import { screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import VendorsListPage from "@/app/(protected)/vendors/index";
-import type { VendorListItem } from "@/domain/vendors/types/vendor";
+import type { VendorCompanyRoster, VendorListItem } from "@/domain/vendors/types/vendor";
 import { renderWithProviders } from "@/test/test-utils";
 
 const useVendorsList = vi.fn();
 const useVendorCompanyRoster = vi.fn();
 const useVendorDeactivationImpact = vi.fn();
 const mutate = vi.fn();
-const navigate = vi.fn();
-
-vi.mock("react-router", async () => {
-  const actual = await vi.importActual("react-router");
-  return { ...actual, useNavigate: () => navigate };
-});
-
 vi.mock("@/domain/vendors/use-cases/use-vendors-list", () => ({
   useVendorsList: (...args: unknown[]) => useVendorsList(...args),
 }));
@@ -61,6 +54,32 @@ const inactiveVendor = {
   isActive: false,
 };
 
+const activeRoster: VendorCompanyRoster = {
+  companyId: "co-1",
+  rowVersion: "rv-1",
+  name: "Gateway Plumbing",
+  companyPhone: "(314) 555-0100",
+  email: "dispatch@gatewayplumbing.com",
+  address: "",
+  city: "St. Louis",
+  state: "MO",
+  zip: "",
+  googleMapsUrl: "",
+  notes: "",
+  technicians: [
+    {
+      id: 1,
+      contactName: "Adam Whyte",
+      phone: "(314) 555-0198",
+      email: "dispatch@gatewayplumbing.com",
+      preferredContact: "Email",
+      tradeSpecialties: "Backflow Preventers",
+      isActive: true,
+      totalJobs: 0,
+    },
+  ],
+};
+
 function result(items: VendorListItem[], totalCount: number) {
   return {
     data: { items, totalCount, page: 1, pageSize: 12 },
@@ -71,7 +90,13 @@ function result(items: VendorListItem[], totalCount: number) {
 }
 
 function setupDefaults() {
-  useVendorCompanyRoster.mockReturnValue({ data: undefined, isLoading: false, error: null });
+  useVendorCompanyRoster.mockReturnValue({
+    data: undefined,
+    isLoading: false,
+    isError: false,
+    error: null,
+    refetch: vi.fn(),
+  });
   useVendorDeactivationImpact.mockReturnValue({
     data: undefined,
     isLoading: false,
@@ -80,7 +105,7 @@ function setupDefaults() {
 }
 
 describe("VendorsListPage", () => {
-  it("renders prototype-aligned status tabs and location, then hides deactivation for inactive rows", async () => {
+  it("renders prototype-aligned status and two row actions in both tabs", async () => {
     setupDefaults();
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], params.isActive ? 1 : 1);
@@ -91,11 +116,20 @@ describe("VendorsListPage", () => {
 
     expect(screen.getByRole("heading", { name: "Vendors / Technicians" })).toBeInTheDocument();
     expect(screen.getByText("St. Louis, MO")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Deactivate vendor" })).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "Status" })).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: "Active" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "View vendor Gateway Plumbing" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Deactivate vendor" })).not.toBeInTheDocument();
 
     await userEvent.click(screen.getByRole("tab", { name: "Inactive (1)" }));
 
     expect(screen.getByText("Drain Cleaning Bros")).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: "Inactive" })).toBeInTheDocument();
     expect(screen.queryByRole("button", { name: "Deactivate vendor" })).not.toBeInTheDocument();
   });
 
@@ -114,39 +148,18 @@ describe("VendorsListPage", () => {
 
     renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
 
-    expect(screen.getByText(/25 active vendor entries/)).toBeInTheDocument();
-    expect(screen.queryByText(/3 active vendor entries/)).not.toBeInTheDocument();
+    expect(screen.getByText(/25 active technicians/)).toBeInTheDocument();
+    expect(screen.queryByText(/3 active technicians/)).not.toBeInTheDocument();
   });
 
   it("opens the detail drawer when a row is clicked or activated by keyboard", async () => {
     setupDefaults();
     useVendorCompanyRoster.mockReturnValue({
-      data: {
-        companyId: "co-1",
-        rowVersion: "rv-1",
-        name: "Gateway Plumbing",
-        companyPhone: "(314) 555-0198",
-        email: "dispatch@gatewayplumbing.com",
-        address: "",
-        city: "St. Louis",
-        state: "MO",
-        zip: "",
-        googleMapsUrl: "",
-        notes: "",
-        technicians: [
-          {
-            id: 1,
-            contactName: "Adam Whyte",
-            phone: "(314) 555-0198",
-            email: "dispatch@gatewayplumbing.com",
-            preferredContact: "Email",
-            tradeSpecialties: "Backflow Preventers",
-            isActive: true,
-          },
-        ],
-      },
+      data: activeRoster,
       isLoading: false,
+      isError: false,
       error: null,
+      refetch: vi.fn(),
     });
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], 1);
@@ -161,11 +174,18 @@ describe("VendorsListPage", () => {
     row.focus();
     await userEvent.keyboard("{Enter}");
 
-    expect(screen.getByRole("heading", { level: 2, name: "Gateway Plumbing" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "Adam Whyte" })).toBeInTheDocument();
   });
 
   it("blocks deactivation when the preflight reports open work orders", async () => {
     setupDefaults();
+    useVendorCompanyRoster.mockReturnValue({
+      data: activeRoster,
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
     useVendorDeactivationImpact.mockReturnValue({
       data: {
         vendorId: 1,
@@ -189,7 +209,8 @@ describe("VendorsListPage", () => {
 
     renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
 
-    await userEvent.click(screen.getByRole("button", { name: "Deactivate vendor" }));
+    await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
+    await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
 
     expect(
       screen.getByText(/cannot be deactivated because it still has open work orders/),
@@ -199,9 +220,51 @@ describe("VendorsListPage", () => {
     expect(mutate).not.toHaveBeenCalled();
   });
 
-  it("navigates to the vendor edit route when the table Edit control is clicked", async () => {
+  it("preserves inline edits when deactivation is cancelled", async () => {
     setupDefaults();
-    navigate.mockClear();
+    useVendorCompanyRoster.mockReturnValue({
+      data: activeRoster,
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    useVendorDeactivationImpact.mockReturnValue({
+      data: { vendorId: 1, canDeactivate: true, openWorkOrders: [] },
+      isLoading: false,
+      error: null,
+    });
+    useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
+      if (params.pageSize === 1) return result([], 1);
+      return params.isActive ? result([activeVendor], 1) : result([], 0);
+    });
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
+    const company = screen.getByRole("textbox", { name: "Company" });
+    await userEvent.clear(company);
+    await userEvent.type(company, "Draft Company Name");
+    await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
+    await userEvent.click(
+      within(screen.getByRole("dialog", { name: "Deactivate Vendor" })).getByRole("button", {
+        name: "Cancel",
+      }),
+    );
+
+    expect(company).toBeInTheDocument();
+    expect(company).toHaveValue("Draft Company Name");
+  });
+
+  it("opens inline edit when the table Edit control is clicked", async () => {
+    setupDefaults();
+    useVendorCompanyRoster.mockReturnValue({
+      data: activeRoster,
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], 1);
       return params.isActive ? result([activeVendor], 1) : result([], 0);
@@ -211,16 +274,20 @@ describe("VendorsListPage", () => {
 
     await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
 
-    expect(navigate).toHaveBeenCalledWith("/vendors/edit/1");
-    expect(
-      screen.queryByRole("heading", { level: 2, name: "Gateway Plumbing" }),
-    ).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Save changes" })).toBeInTheDocument();
+    expect(screen.getByRole("textbox", { name: "Company" })).toHaveValue("Gateway Plumbing");
   });
 
-  it("navigates to the company route when editing a vendor without a vendor id", async () => {
+  it("opens inline company edit when the row has no vendor id", async () => {
     setupDefaults();
-    navigate.mockClear();
     const companyOnlyVendor = { ...activeVendor, id: null, companyId: "co-9" };
+    useVendorCompanyRoster.mockReturnValue({
+      data: { ...activeRoster, companyId: "co-9", technicians: [] },
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
     useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
       if (params.pageSize === 1) return result([], 1);
       return params.isActive ? result([companyOnlyVendor], 1) : result([], 0);
@@ -230,6 +297,7 @@ describe("VendorsListPage", () => {
 
     await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
 
-    expect(navigate).toHaveBeenCalledWith("/vendors/company/co-9");
+    expect(screen.getByRole("button", { name: "Save changes" })).toBeInTheDocument();
+    expect(screen.getByRole("textbox", { name: "Company" })).toHaveValue("Gateway Plumbing");
   });
 });
diff --git a/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts b/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts
index 9c61e64f..f0547378 100644
--- a/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts
+++ b/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts
@@ -1,32 +1,7 @@
-import { createElement, type ReactNode } from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { renderHook } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import {
-  getSingleStatusOnlyChange,
-  useSaveVendorCompanyRoster,
-} from "@/domain/vendors/use-cases/use-save-vendor-company-roster";
+import { describe, expect, it } from "vitest";
+import { getSingleStatusOnlyChange } from "@/domain/vendors/use-cases/use-save-vendor-company-roster";
 import type { VendorCompanyRoster } from "@/domain/vendors/types/vendor";
 
-const updateVendor = vi.fn();
-
-vi.mock("@/domain/vendors/api/vendors-api", () => ({
-  vendorsApi: {
-    update: (...args: unknown[]) => updateVendor(...args),
-  },
-}));
-
-vi.mock("@/domain/vendors/api/vendor-company-roster-api", () => ({
-  vendorCompanyRosterApi: {
-    update: vi.fn(),
-    create: vi.fn(),
-  },
-}));
-
-vi.mock("react-toastify", () => ({
-  toast: { success: vi.fn(), error: vi.fn() },
-}));
-
 const roster: VendorCompanyRoster = {
   companyId: 10,
   rowVersion: "rv-1",
@@ -94,49 +69,3 @@ describe("getSingleStatusOnlyChange", () => {
     ).toBeNull();
   });
 });
-
-describe("useSaveVendorCompanyRoster status-only deactivation gate", () => {
-  beforeEach(() => {
-    updateVendor.mockReset();
-    updateVendor.mockResolvedValue(undefined);
-  });
-
-  it("rejects sparse Active→Inactive updates and still allows reactivation", async () => {
-    const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-    const wrapper = ({ children }: { children: ReactNode }) =>
-      createElement(QueryClientProvider, { client }, children);
-
-    const { result } = renderHook(() => useSaveVendorCompanyRoster(), { wrapper });
-
-    const activeRoster: VendorCompanyRoster = {
-      ...roster,
-      technicians: [{ ...roster.technicians[0], isActive: true }],
-    };
-
-    await expect(
-      result.current.mutateAsync({
-        mode: "update",
-        values: {
-          ...values,
-          technicians: [{ ...values.technicians[0], isActive: false }],
-        },
-        companyId: 10,
-        rowVersion: "rv-1",
-        originalRoster: activeRoster,
-      }),
-    ).rejects.toThrow("Use Deactivate to check open work orders before inactivating a technician.");
-    expect(updateVendor).not.toHaveBeenCalled();
-
-    await result.current.mutateAsync({
-      mode: "update",
-      values: {
-        ...values,
-        technicians: [{ ...values.technicians[0], isActive: true }],
-      },
-      companyId: 10,
-      rowVersion: "rv-1",
-      originalRoster: roster,
-    });
-    expect(updateVendor).toHaveBeenCalledWith(7, { isActive: true });
-  });
-});
diff --git a/tmp/pr-descriptions/pr1-completed-date.md b/tmp/pr-descriptions/pr1-completed-date.md
deleted file mode 100644
index 0091fbd5..00000000
--- a/tmp/pr-descriptions/pr1-completed-date.md
+++ /dev/null
@@ -1,35 +0,0 @@
-## Summary
-
-- Adds an editable COMPLETED DATE column to the Work Orders board table (after COMP DOC).
-- Wires `completedDate` through board row typing, table-row mapping, and PATCH `field: "completedDate"`.
-- Inline create keeps an empty placeholder (date is not set at creation).
-
-## Scope
-
-### In
-
-- `completedDate` on `WorkOrderBoardRowApi` / `WorkOrderTableRow`
-- Column + `DateCell` on board rows
-- Scalar board patch expansion for `completedDate`
-- Unit test for column order and patch op
-
-### Out (follow-up PRs)
-
-- Comp Doc dialog changes, closability gates, uplift, severity, filters, wizard
-
-## API / BE
-
-- Contract assumed: PATCH `/workorders/{id}/board` with `field: "completedDate"` already supported
-- Confirm GET `/board` and `/board/search` rows include `completedDate` (see `docs/work-orders/pending-be-contract.md`)
-- Blocked on BE: none for FE wiring (tolerates missing GET field as empty string)
-
-## Test plan
-
-- [ ] Board shows COMPLETED DATE column after COMP DOC
-- [ ] Editing the cell PATCHes `completedDate`
-- [ ] Inline create row shows placeholder for completed date
-- [ ] `npm run verify` green locally
-
-## Base
-
-- Base branch: `dev`

From 8398a08b7665a525e0a0a4d23a934b4091f63bbc Mon Sep 17 00:00:00 2001
From: "arthur.bassi" <arthur.bassi@luby.com.br>
Date: Tue, 11 Aug 2026 15:41:49 -0300
Subject: [PATCH 10/17] fix(work-orders): add completedDate to unscheduled
 highlight fixture

Unblocks tsc after merging origin/dev with the required table-row field.
---
 .../workorders/wo-table-unscheduled-highlight.test.tsx           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/test/app/(protected)/workorders/wo-table-unscheduled-highlight.test.tsx b/src/test/app/(protected)/workorders/wo-table-unscheduled-highlight.test.tsx
index 011c95a6..0c157819 100644
--- a/src/test/app/(protected)/workorders/wo-table-unscheduled-highlight.test.tsx
+++ b/src/test/app/(protected)/workorders/wo-table-unscheduled-highlight.test.tsx
@@ -17,6 +17,7 @@ const unscheduledRow: WorkOrderTableRow = {
   dispatcherId: "u1",
   dispatcherName: "Test Dispatcher",
   scheduledOn: "",
+  completedDate: "",
   targetWeek: "",
   dayGroup: "",
   dayLabel: "",

From 29580c6adda17c6a5a00c7d8bf1d5510a6d98808 Mon Sep 17 00:00:00 2001
From: "arthur.bassi" <arthur.bassi@luby.com.br>
Date: Tue, 11 Aug 2026 15:44:36 -0300
Subject: [PATCH 11/17] refactor(work-orders): shrink inline row cells under
 function line cap

Extract muted dash placeholders so governance max-lines-per-function passes.
---
 .../list/table/wo-table-inline-row-cells.tsx    | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
index 66b4d2dc..2e050328 100644
--- a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
@@ -28,6 +28,14 @@ type WoTableInlineRowCellsProps = {
   onPatch: (patch: Partial<WorkOrderTableDraft>) => void;
 };
 
+function InlineMutedDashCell() {
+  return (
+    <td style={{ padding: "0 14px" }}>
+      <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>—</span>
+    </td>
+  );
+}
+
 export function WoTableInlineRowCells({
   draft,
   weekDefault,
@@ -170,13 +178,8 @@ export function WoTableInlineRowCells({
         />
       </td>
 
-      <td style={{ padding: "0 14px" }}>
-        <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>—</span>
-      </td>
-
-      <td style={{ padding: "0 14px" }}>
-        <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>—</span>
-      </td>
+      <InlineMutedDashCell />
+      <InlineMutedDashCell />
     </>
   );
 }

From 11e1b65bc191d8e1144a103d4a78e4e0ae267620 Mon Sep 17 00:00:00 2001
From: Arthur Bassi <arthur.bassi@luby.com.br>
Date: Tue, 11 Aug 2026 16:55:31 -0300
Subject: [PATCH 12/17] fix(work-orders): pass workOrderVersion in slide-over
 media and fix test fixture

Wire workOrderVersion through slide-over media delete/categorize after dev
merge, and remove duplicate completedDate in unscheduled highlight fixture.
---
 .../workorders/wo-table-unscheduled-highlight.test.tsx           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/test/app/(protected)/workorders/wo-table-unscheduled-highlight.test.tsx b/src/test/app/(protected)/workorders/wo-table-unscheduled-highlight.test.tsx
index 8bd5b312..0c157819 100644
--- a/src/test/app/(protected)/workorders/wo-table-unscheduled-highlight.test.tsx
+++ b/src/test/app/(protected)/workorders/wo-table-unscheduled-highlight.test.tsx
@@ -39,7 +39,6 @@ const unscheduledRow: WorkOrderTableRow = {
   pocPhone: "",
   pocNotes: "",
   dueDate: "2026-07-15",
-  completedDate: "",
   rescheduleCount: 0,
   carriedOver: 0,
   originalWeek: "",

From 2ce72106689947a32d26d5564437769d5f698d4d Mon Sep 17 00:00:00 2001
From: Arthur Bassi <arthur.bassi@luby.com.br>
Date: Wed, 12 Aug 2026 09:39:16 -0300
Subject: [PATCH 13/17] fix(vendor-portal): accurate locked banner copy by
 dispatch status

---
 .../dispatch/_components/dispatch-snapshot-details.tsx       | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/v/[token]/dispatch/_components/dispatch-snapshot-details.tsx b/src/app/v/[token]/dispatch/_components/dispatch-snapshot-details.tsx
index 4f71d6d8..3c128caa 100644
--- a/src/app/v/[token]/dispatch/_components/dispatch-snapshot-details.tsx
+++ b/src/app/v/[token]/dispatch/_components/dispatch-snapshot-details.tsx
@@ -149,8 +149,9 @@ export function DispatchSnapshotDetails({ data, locked }: DispatchSnapshotDetail
       <DispatcherContactDetails data={data} />
       {locked && (
         <Text variant="feedback" className="vp-muted" sx={{ marginTop: 2 }}>
-          This dispatch is {data.status.toLowerCase()} and locked to further changes. Comments
-          remain open.
+          {data.status === "Refused"
+            ? "This dispatch is refused and locked to further changes. Comments remain open."
+            : `This dispatch is ${data.status.toLowerCase()} and locked to further status changes. Sign-off actions may still be available.`}
         </Text>
       )}
       {Boolean(description) && (

From fd2b34a1cc0256ea3a55a8440a35b157c4405ec0 Mon Sep 17 00:00:00 2001
From: "arthur.bassi" <arthur.bassi@luby.com.br>
Date: Wed, 12 Aug 2026 09:50:03 -0300
Subject: [PATCH 14/17] fix(work-orders): dedupe completedDate after merging PR
 #45

Keep a single fixture property and board op rule so the integrated head typechecks (TS1117).
---
 src/domain/work-orders/mappers/expand-scalar-board-ops.ts        | 1 -
 .../workorders/wo-table-unscheduled-highlight.test.tsx           | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/domain/work-orders/mappers/expand-scalar-board-ops.ts b/src/domain/work-orders/mappers/expand-scalar-board-ops.ts
index a4448267..6a67dd5d 100644
--- a/src/domain/work-orders/mappers/expand-scalar-board-ops.ts
+++ b/src/domain/work-orders/mappers/expand-scalar-board-ops.ts
@@ -23,7 +23,6 @@ const SCALAR_BOARD_OP_RULES: ScalarBoardOpRule[] = [
   { key: "status", field: "lifecycleStatus", toValue: (value) => value as string },
   { key: "dispatcherId", field: "assignTo", toValue: (value) => value as string },
   { key: "dueDate", field: "dueDate", toValue: (value) => value as string },
-  { key: "completedDate", field: "completedDate", toValue: (value) => value as string },
   { key: "vendorId", field: "vendorId", toValue: (value) => String(value) },
   { key: "apptTime", field: "apptTime", toValue: (value) => value as string },
   { key: "docStatus", field: "docStatus", toValue: (value) => mapDocStatusToApi(value as string) },
diff --git a/src/test/app/(protected)/workorders/wo-table-unscheduled-highlight.test.tsx b/src/test/app/(protected)/workorders/wo-table-unscheduled-highlight.test.tsx
index 8bd5b312..284e572d 100644
--- a/src/test/app/(protected)/workorders/wo-table-unscheduled-highlight.test.tsx
+++ b/src/test/app/(protected)/workorders/wo-table-unscheduled-highlight.test.tsx
@@ -17,7 +17,6 @@ const unscheduledRow: WorkOrderTableRow = {
   dispatcherId: "u1",
   dispatcherName: "Test Dispatcher",
   scheduledOn: "",
-  completedDate: "",
   targetWeek: "",
   dayGroup: "",
   dayLabel: "",

From abc63dc70ffc2e61fc666d4ae0d703b1f4948d0f Mon Sep 17 00:00:00 2001
From: Arthur Bassi <arthur.bassi@luby.com.br>
Date: Wed, 12 Aug 2026 10:58:15 -0300
Subject: [PATCH 15/17] fix(work-orders): restore pending BE contract ledger

---
 docs/work-orders/pending-be-contract.md | 58 +++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 docs/work-orders/pending-be-contract.md

diff --git a/docs/work-orders/pending-be-contract.md b/docs/work-orders/pending-be-contract.md
new file mode 100644
index 00000000..a3a92f53
--- /dev/null
+++ b/docs/work-orders/pending-be-contract.md
@@ -0,0 +1,58 @@
+# Pending BE contract (WO design parity gaps)
+
+Local checklist for FE branches off `dev`. Confirm with backend before shipping PR3/PR5 to production. Until confirmed, FE may use typed clients + mocks.
+
+## Board row / PATCH
+
+| Field                                                    | Needed by     | Notes                                                                  |
+| -------------------------------------------------------- | ------------- | ---------------------------------------------------------------------- |
+| `completedDate` on GET `/board` and `/board/search` rows | PR1, PR4      | PATCH `field: "completedDate"` expected; confirm GET includes ISO date |
+| `severity` (`1`–`5` \| `null`) on row, create, PATCH     | PR2, PR5      | Required for Emergency/Reactive; PATCH `field: "severity"`             |
+| `upliftSummary` on row                                   | PR3, PR4, PR5 | `{ hasUplift, pendingCount, primaryStatus? }`                          |
+| `hasPendingUplift` on row/detail                         | PR4           | Prefer server 422 on Completed / completion-doc when pending           |
+| `additionalContacts[]`                                   | PR6           | `{ name, phone, notes? }[]` on create/detail/PATCH                     |
+| `isAddOn`                                                | PR5 (filter)  | Indicator, not a WO type (SH-126)                                      |
+
+## Proposed WO-scoped uplift endpoints (confirm vs NTE `uplifts` queue)
+
+| Method | Path                                        | Body                              |
+| ------ | ------------------------------------------- | --------------------------------- |
+| GET    | `workorders/{id}/uplifts`                   | —                                 |
+| POST   | `workorders/{id}/uplifts`                   | `{ amount, notes, attachments? }` |
+| POST   | `workorders/{id}/uplifts/{upliftId}/cancel` | —                                 |
+| POST   | `workorders/{id}/uplifts/{upliftId}/revoke` | `{ reason? }`                     |
+
+Statuses (design): `pending` \| `approved` \| `auto_approved` \| `rejected` \| `cancelled` \| `revoked`.
+
+## Search query params (`GET workorders/board/search`)
+
+| Param                          | Meaning                   |
+| ------------------------------ | ------------------------- |
+| `severities`                   | multi `1`–`5`             |
+| `rescheduled` / `carriedOver`  | boolean (≥2 counters)     |
+| `addOn`                        | boolean (`isAddOn`)       |
+| `flagColors`                   | multi `#RRGGBB`           |
+| `internalOnly`                 | WO# starts with `SH`      |
+| `avetaOnly`                    | if `avetaRequired` exists |
+| `hasUplift` + `upliftStatuses` | uplift filters            |
+
+Already documented in `board-search-api.md`: datePreset, sites, types, overdue, dispatchers, statuses, pmTypes, vendorIds, docStatuses.
+
+## Comments
+
+| Field                                    | Needed by |
+| ---------------------------------------- | --------- |
+| POST `{ text, mentions?: string[] }`     | PR9       |
+| Response includes mentions for highlight | PR9       |
+
+## Vendor
+
+| Item                                                           | Needed by |
+| -------------------------------------------------------------- | --------- |
+| Create technician under company (confirm existing vendors API) | PR7       |
+
+## Optional
+
+| Item                                | Needed by                        |
+| ----------------------------------- | -------------------------------- |
+| 422 on duplicate WO number (global) | PR8 (FE dialog works without it) |

From 5d3fd1f986e7aaf450475ced0982c38120d044e8 Mon Sep 17 00:00:00 2001
From: Arthur Bassi <arthur.bassi@luby.com.br>
Date: Wed, 12 Aug 2026 11:25:41 -0300
Subject: [PATCH 16/17] fix(vendor-portal): align locked banner with
 comments-only actions

---
 .../_components/dispatch-snapshot-details.tsx |  5 +-
 .../app/v/dispatch-snapshot-details.test.tsx  | 52 +++++++++++++++++++
 2 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 src/test/app/v/dispatch-snapshot-details.test.tsx

diff --git a/src/app/v/[token]/dispatch/_components/dispatch-snapshot-details.tsx b/src/app/v/[token]/dispatch/_components/dispatch-snapshot-details.tsx
index 3c128caa..4f71d6d8 100644
--- a/src/app/v/[token]/dispatch/_components/dispatch-snapshot-details.tsx
+++ b/src/app/v/[token]/dispatch/_components/dispatch-snapshot-details.tsx
@@ -149,9 +149,8 @@ export function DispatchSnapshotDetails({ data, locked }: DispatchSnapshotDetail
       <DispatcherContactDetails data={data} />
       {locked && (
         <Text variant="feedback" className="vp-muted" sx={{ marginTop: 2 }}>
-          {data.status === "Refused"
-            ? "This dispatch is refused and locked to further changes. Comments remain open."
-            : `This dispatch is ${data.status.toLowerCase()} and locked to further status changes. Sign-off actions may still be available.`}
+          This dispatch is {data.status.toLowerCase()} and locked to further changes. Comments
+          remain open.
         </Text>
       )}
       {Boolean(description) && (
diff --git a/src/test/app/v/dispatch-snapshot-details.test.tsx b/src/test/app/v/dispatch-snapshot-details.test.tsx
new file mode 100644
index 00000000..66f31610
--- /dev/null
+++ b/src/test/app/v/dispatch-snapshot-details.test.tsx
@@ -0,0 +1,52 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { DispatchSnapshotDetails } from "@/app/v/[token]/dispatch/_components/dispatch-snapshot-details";
+import type { VendorPortalDispatchDetail } from "@/domain/vendor-portal/types/vendor-portal";
+import { renderWithProviders } from "@/test/test-utils";
+
+function buildData(
+  overrides: Partial<VendorPortalDispatchDetail> = {},
+): VendorPortalDispatchDetail {
+  return {
+    id: 9,
+    dispatchNumber: "DSP-9",
+    status: "Verified",
+    nteAmount: 500,
+    checklist: [],
+    comments: [],
+    upliftRequests: [],
+    signoffs: [],
+    documents: [],
+    ...overrides,
+  };
+}
+
+describe("DispatchSnapshotDetails locked banner", () => {
+  it.each(["Verified", "Cancelled", "Refused"])(
+    "states that comments remain open when status is %s",
+    (status) => {
+      renderWithProviders(<DispatchSnapshotDetails data={buildData({ status })} locked />, {
+        withAuth: false,
+      });
+
+      expect(
+        screen.getByText(
+          new RegExp(
+            `This dispatch is ${status.toLowerCase()} and locked to further changes\\. Comments remain open\\.`,
+            "i",
+          ),
+        ),
+      ).toBeInTheDocument();
+      expect(screen.queryByText(/sign-off/i)).not.toBeInTheDocument();
+    },
+  );
+
+  it("hides the locked banner when the dispatch is not locked", () => {
+    renderWithProviders(
+      <DispatchSnapshotDetails data={buildData({ status: "In Progress" })} locked={false} />,
+      { withAuth: false },
+    );
+
+    expect(screen.queryByText(/locked to further changes/i)).not.toBeInTheDocument();
+  });
+});

From 25837171a49a4966a504ad6cfe6467ab65cbd67a Mon Sep 17 00:00:00 2001
From: Arthur Bassi <arthur.bassi@luby.com.br>
Date: Thu, 13 Aug 2026 11:04:48 -0300
Subject: [PATCH 17/17] feat(work-orders): duplicate WO number dialog on table
 and wizard (SH-189) (#90)

* docs(work-orders): add pending BE contract checklist for design parity gaps

* feat(work-orders): confirm dialog when duplicate wo number detected

* fix(work-orders): show duplicate wo number dialog on wizard create

* docs(work-orders): align pr description with jira and qa residuals

* style(work-orders): prettier wizard duplicate dialog files

* refactor(workorders): extract wizard state hook and list overlays

* fix(work-orders): check duplicate numbers globally

* fix(work-orders): exhaust fuzzy pages for exact WO number lookup

Prevent accepting duplicates that fall outside the first fuzzy search page.

* style(work-orders): format editable WO number cell for Prettier gate

* fix(work-orders): 0-based WO search page and stale duplicate guard

* fix(work-orders): sync draft WO# ref in effect for duplicate guard [SH-189]

* fix(work-orders): extract WO number editor under max-lines gate

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(work-orders): harden duplicate WO number checks [SH-189]

* fix(work-orders): sync wizard refs in effects and exhaust duplicate WO lookup

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(work-orders): extract hooks to satisfy max-lines governance gate

Co-authored-by: Cursor <cursoragent@cursor.com>

* style(work-orders): format wizard state hook for Prettier gate

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(work-orders): search one-character WO numbers for duplicates

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../list/duplicate-wo-number-dialog.tsx       |  45 ++++
 .../table/cells/editable-wo-number-cell.tsx   | 217 ++++++++-------
 .../list/table/use-wo-table-inline-create.ts  |  58 +++++
 .../list/table/use-wo-table-row-handlers.ts   |   6 +-
 .../table/wo-table-inline-identity-cells.tsx  |   8 +-
 .../list/table/wo-table-inline-row-cells.tsx  |   8 +-
 .../list/table/wo-table-inline-row.tsx        |   8 +-
 .../_components/list/table/wo-table.tsx       |  62 +++--
 .../list/work-orders-list-wizard.tsx          |  32 +++
 .../_components/wizard/new-wo-wizard.tsx      | 246 +++++++-----------
 .../wizard/use-new-wo-wizard-state.ts         | 136 ++++++++++
 .../wizard/use-wizard-duplicate-actions.ts    | 100 +++++++
 .../wizard/wizard-step-type-schedule.tsx      |   3 +
 src/app/(protected)/workorders/index.tsx      |  10 +-
 src/domain/work-orders/api/work-orders-api.ts |  42 +++
 .../utils/find-duplicate-wo-number-row.ts     |  16 ++
 .../duplicate-wo-number-dialog.test.tsx       |  58 +++++
 .../new-wo-wizard-duplicate.test.tsx          |  88 +++++++
 ...se-wo-table-row-handlers-duplicate.test.ts |  43 +++
 .../work-orders/api/work-orders-api.test.ts   | 151 +++++++++++
 .../find-duplicate-wo-number-row.test.ts      |  19 ++
 tmp/pr-descriptions/pr8-duplicate-dialog.md   |  26 ++
 22 files changed, 1082 insertions(+), 300 deletions(-)
 create mode 100644 src/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog.tsx
 create mode 100644 src/app/(protected)/workorders/_components/list/table/use-wo-table-inline-create.ts
 create mode 100644 src/app/(protected)/workorders/_components/list/work-orders-list-wizard.tsx
 create mode 100644 src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-state.ts
 create mode 100644 src/app/(protected)/workorders/_components/wizard/use-wizard-duplicate-actions.ts
 create mode 100644 src/domain/work-orders/utils/find-duplicate-wo-number-row.ts
 create mode 100644 src/test/app/(protected)/workorders/duplicate-wo-number-dialog.test.tsx
 create mode 100644 src/test/app/(protected)/workorders/new-wo-wizard-duplicate.test.tsx
 create mode 100644 src/test/app/(protected)/workorders/use-wo-table-row-handlers-duplicate.test.ts
 create mode 100644 src/test/domain/work-orders/utils/find-duplicate-wo-number-row.test.ts
 create mode 100644 tmp/pr-descriptions/pr8-duplicate-dialog.md

diff --git a/src/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog.tsx b/src/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog.tsx
new file mode 100644
index 00000000..95decbe7
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog.tsx
@@ -0,0 +1,45 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type DuplicateWoNumberDialogProps = {
+  open: boolean;
+  existing: WorkOrderTableRow | null;
+  onDismiss: () => void;
+  onViewExisting: (row: WorkOrderTableRow) => void;
+};
+
+export function DuplicateWoNumberDialog({
+  open,
+  existing,
+  onDismiss,
+  onViewExisting,
+}: DuplicateWoNumberDialogProps) {
+  const woNumber = existing?.woNumber ?? "";
+
+  return (
+    <Dialog open={open} onClose={onDismiss} aria-labelledby="duplicate-wo-number-dialog-title">
+      <DialogTitle id="duplicate-wo-number-dialog-title">Duplicate Work Order Number</DialogTitle>
+      <DialogContent>
+        <Text variant="body">
+          Work order number {woNumber} is already assigned to another work order. View the existing
+          record or dismiss to keep editing.
+        </Text>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onDismiss}>Dismiss</Button>
+        <Button
+          variant="contained"
+          disabled={existing == null}
+          onClick={() => {
+            if (existing != null) {
+              onViewExisting(existing);
+            }
+          }}
+        >
+          View existing
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell.tsx
index ce4b3462..83d4297c 100644
--- a/src/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell.tsx
@@ -1,43 +1,30 @@
 import { useEffect, useState } from "react";
-
 import { toast } from "react-toastify";
-
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
 import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
-
+import { findDuplicateWoNumberRow } from "@/domain/work-orders/utils/find-duplicate-wo-number-row";
 import { HighlightText } from "./highlight-text";
 
 type EditableWONumberCellProps = {
   value: string;
-
   rescheduleCount: number;
-
   carriedOver?: number;
-
   q?: string;
-
   currentId: string | number;
-
   allOrders: WorkOrderTableRow[];
-
   onSave: (v: string) => void;
-
   onDuplicateFound?: (existing: WorkOrderTableRow) => void;
 };
 
 function CounterPill({ label, count }: { label: string; count: number }) {
-  if (count < 2) {
-    return null;
-  }
-
+  if (count < 2) return null;
   return (
     <span
       title={label}
       className="inline-flex h-[18px] items-center rounded px-1.5 text-[10px] font-semibold"
       style={{
         background: "var(--color-bg-muted)",
-
         color: "var(--color-text-secondary)",
-
         border: "1px solid var(--color-border)",
       }}
     >
@@ -46,89 +33,134 @@ function CounterPill({ label, count }: { label: string; count: number }) {
   );
 }
 
+type WoNumberEditorProps = {
+  draft: string;
+  invalid: boolean;
+  isChecking: boolean;
+  onDraftChange: (value: string) => void;
+  onCommit: () => void;
+  onCancel: () => void;
+  onBlur: () => void;
+};
+
+function WoNumberEditor({
+  draft,
+  invalid,
+  isChecking,
+  onDraftChange,
+  onCommit,
+  onCancel,
+  onBlur,
+}: WoNumberEditorProps) {
+  return (
+    <input
+      autoFocus
+      disabled={isChecking}
+      inputMode="numeric"
+      value={draft}
+      onChange={(e) => onDraftChange(e.target.value.replace(/\D/g, "").slice(0, 11))}
+      onFocus={(e) => e.target.select()}
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          onCommit();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          onCancel();
+        }
+      }}
+      onBlur={onBlur}
+      placeholder="12345678901"
+      aria-label="Work order number"
+      aria-invalid={invalid}
+      className="font-mono focus:outline-none"
+      style={{
+        fontSize: 13,
+        fontWeight: 700,
+        color: "var(--foreground)",
+        background: "var(--color-bg-surface)",
+        border: `1px solid ${invalid ? "var(--color-destructive)" : "var(--color-ring)"}`,
+        boxShadow: `0 0 0 1px ${invalid ? "var(--color-destructive)" : "var(--color-accent)"}`,
+        borderRadius: 4,
+        padding: "2px 4px",
+        width: 120,
+      }}
+    />
+  );
+}
+
+async function resolveDuplicateWoNumber(
+  draft: string,
+  allOrders: WorkOrderTableRow[],
+  currentId: string | number,
+) {
+  const local = findDuplicateWoNumberRow(draft, allOrders, currentId);
+  const remote = local ?? (await workOrdersApi.findByWoNumber(draft));
+  return remote && String(remote.id) !== String(currentId) ? remote : undefined;
+}
+
 export function EditableWONumberCell({
   value,
-
   rescheduleCount,
-
   carriedOver = 0,
-
   q,
-
   currentId,
-
   allOrders,
-
   onSave,
-
   onDuplicateFound,
 }: EditableWONumberCellProps) {
   const [editing, setEditing] = useState(false);
-
   const [draft, setDraft] = useState(value);
+  const [isChecking, setIsChecking] = useState(false);
 
   useEffect(() => {
-    if (!editing) {
-      setDraft(value);
-    }
+    if (!editing) setDraft(value);
   }, [value, editing]);
 
-  const findDuplicate = (d: string) =>
-    allOrders.find((o) => o.woNumber === d && String(o.id) !== String(currentId));
-
   const commit = () => {
-    if (draft === value) {
+    if (draft === value || isChecking) {
       setEditing(false);
-
       return;
     }
-
     if (draft.length !== 11) {
       toast("Work order number must be exactly 11 digits");
-
       return;
     }
-
-    const duplicate = findDuplicate(draft);
-
-    if (duplicate) {
-      onDuplicateFound?.(duplicate);
-
-      setDraft(value);
-
-      setEditing(false);
-
-      return;
-    }
-
-    onSave(draft);
-
-    setEditing(false);
+    setIsChecking(true);
+    void (async () => {
+      try {
+        const duplicate = await resolveDuplicateWoNumber(draft, allOrders, currentId);
+        if (duplicate) {
+          if (onDuplicateFound) {
+            onDuplicateFound(duplicate);
+          } else {
+            toast.error(`WO #${duplicate.woNumber} is already assigned to another work order.`);
+          }
+          setDraft(value);
+          return;
+        }
+        onSave(draft);
+      } catch {
+        toast.error("Unable to verify the work order number. Please try again.");
+      } finally {
+        setIsChecking(false);
+        setEditing(false);
+      }
+    })();
   };
 
   const cancel = () => {
     setDraft(value);
-
     setEditing(false);
   };
 
   const handleBlur = () => {
+    if (isChecking) return;
     if (draft !== value && draft.length === 11) {
-      const duplicate = findDuplicate(draft);
-
-      if (duplicate) {
-        onDuplicateFound?.(duplicate);
-
-        setDraft(value);
-
-        setEditing(false);
-
-        return;
-      }
-
-      onSave(draft);
+      commit();
+      return;
     }
-
     setEditing(false);
   };
 
@@ -137,75 +169,34 @@ export function EditableWONumberCell({
   return (
     <div className="flex items-center gap-1.5">
       {editing ? (
-        <input
-          autoFocus
-          inputMode="numeric"
-          value={draft}
-          onChange={(e) => setDraft(e.target.value.replace(/\D/g, "").slice(0, 11))}
-          onFocus={(e) => e.target.select()}
-          onClick={(e) => e.stopPropagation()}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-
-              commit();
-            } else if (e.key === "Escape") {
-              e.preventDefault();
-
-              cancel();
-            }
-          }}
+        <WoNumberEditor
+          draft={draft}
+          invalid={invalid}
+          isChecking={isChecking}
+          onDraftChange={setDraft}
+          onCommit={commit}
+          onCancel={cancel}
           onBlur={handleBlur}
-          placeholder="12345678901"
-          aria-label="Work order number"
-          aria-invalid={invalid}
-          className="font-mono focus:outline-none"
-          style={{
-            fontSize: 13,
-
-            fontWeight: 700,
-
-            color: "var(--foreground)",
-
-            background: "var(--color-bg-surface)",
-
-            border: `1px solid ${invalid ? "var(--color-destructive)" : "var(--color-ring)"}`,
-
-            boxShadow: `0 0 0 1px ${invalid ? "var(--color-destructive)" : "var(--color-accent)"}`,
-
-            borderRadius: 4,
-
-            padding: "2px 4px",
-
-            width: 120,
-          }}
         />
       ) : (
         <span
           onClick={(e) => {
             e.stopPropagation();
-
             setEditing(true);
           }}
           className="inline-block cursor-text font-mono transition-colors hover:bg-[var(--color-bg-muted)]"
           style={{
             fontSize: 13,
-
             fontWeight: 700,
-
             color: value ? "var(--foreground)" : "var(--color-text-muted)",
-
             borderRadius: 4,
-
             padding: "2px 4px",
           }}
         >
           {value ? <HighlightText text={value} q={q} /> : "-"}
         </span>
       )}
-
       <CounterPill label="Reschedules" count={rescheduleCount} />
-
       <CounterPill label="Carried over" count={carriedOver} />
     </div>
   );
diff --git a/src/app/(protected)/workorders/_components/list/table/use-wo-table-inline-create.ts b/src/app/(protected)/workorders/_components/list/table/use-wo-table-inline-create.ts
new file mode 100644
index 00000000..d6097cb4
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/use-wo-table-inline-create.ts
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { toast } from "react-toastify";
+import type { LocationOption, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+import { useCreateWorkOrderFromWizard } from "@/domain/work-orders/use-cases/use-create-work-order-from-wizard";
+import { findDuplicateWoNumberRow } from "@/domain/work-orders/utils/find-duplicate-wo-number-row";
+import type { ReturnTypeOfUseWorkOrdersTableData } from "./wo-table-types";
+import { buildInlineDraftCreateInput } from "./build-inline-draft-create-input";
+
+type UseWoTableInlineCreateArgs = {
+  tableData: ReturnTypeOfUseWorkOrdersTableData;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  onDuplicateFound: (row: WorkOrderTableRow) => void;
+};
+
+export function useWoTableInlineCreate({
+  tableData,
+  users,
+  sites,
+  onDuplicateFound,
+}: UseWoTableInlineCreateArgs) {
+  const [isCheckingInlineDuplicate, setIsCheckingInlineDuplicate] = useState(false);
+  const createMutation = useCreateWorkOrderFromWizard(() => {
+    tableData.cancelDraft();
+  });
+
+  const handleInlineSave = () => {
+    void (async () => {
+      const draftSnapshot = tableData.draft;
+      const woNumber = draftSnapshot.woNumber.trim();
+      if (woNumber) {
+        setIsCheckingInlineDuplicate(true);
+        try {
+          const duplicate =
+            findDuplicateWoNumberRow(woNumber, tableData.rows, "draft") ??
+            (await workOrdersApi.findByWoNumber(woNumber));
+          if (duplicate && String(duplicate.id) !== "draft") {
+            onDuplicateFound(duplicate);
+            return;
+          }
+        } catch {
+          toast.error("Unable to verify the work order number. Please try again.");
+          return;
+        } finally {
+          setIsCheckingInlineDuplicate(false);
+        }
+      }
+      createMutation.mutate(buildInlineDraftCreateInput(tableData.draft, users, sites));
+    })();
+  };
+
+  return {
+    handleInlineSave,
+    saving: createMutation.isPending || isCheckingInlineDuplicate,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/use-wo-table-row-handlers.ts b/src/app/(protected)/workorders/_components/list/table/use-wo-table-row-handlers.ts
index 59aca8f5..c9626b3e 100644
--- a/src/app/(protected)/workorders/_components/list/table/use-wo-table-row-handlers.ts
+++ b/src/app/(protected)/workorders/_components/list/table/use-wo-table-row-handlers.ts
@@ -19,6 +19,7 @@ type UseWoTableRowHandlersOptions = {
   onOpenMedia: (row: WorkOrderTableRow) => void;
   onPatch: (id: string | number, patch: WorkOrderTablePatch) => void;
   onScheduleHighlight: (id: string | number | null) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
 };
 
 export function useWoTableRowHandlers({
@@ -30,6 +31,7 @@ export function useWoTableRowHandlers({
   onOpenMedia,
   onPatch,
   onScheduleHighlight,
+  onDuplicateFound,
 }: UseWoTableRowHandlersOptions): WoTableRowHandlers {
   const {
     dragState: dragStateRef,
@@ -97,8 +99,7 @@ export function useWoTableRowHandlers({
         });
       },
       onDuplicateFound: (existing: WorkOrderTableRow) => {
-        tableData.setSelectedId(existing.id);
-        onOpenSlideOver(existing, false);
+        onDuplicateFound?.(existing);
       },
       onOpenSlideOver: (row: WorkOrderTableRow) => onOpenSlideOver(row, false),
       onPastDueAttempt: (id: string | number) => onScheduleHighlight(id),
@@ -138,6 +139,7 @@ export function useWoTableRowHandlers({
       onOpenMedia,
       onPatch,
       onScheduleHighlight,
+      onDuplicateFound,
     ],
   );
 }
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-identity-cells.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-identity-cells.tsx
index f518a69d..7526cdeb 100644
--- a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-identity-cells.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-identity-cells.tsx
@@ -1,6 +1,9 @@
 import type { RefObject } from "react";
 import type { LocationOption } from "@/domain/work-orders/types/work-order";
-import type { WorkOrderTableDraft } from "@/domain/work-orders/types/work-order-table-row";
+import type {
+  WorkOrderTableDraft,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
 import { EditableWONumberCell } from "./cells/editable-wo-number-cell";
 import { SiteCell } from "./cells/site-cell";
 import { InlineCreateField } from "./inline-create-field";
@@ -16,6 +19,7 @@ type WoTableInlineIdentityCellsProps = {
   siteError: string;
   woShowError: boolean;
   onPatch: (patch: Partial<WorkOrderTableDraft>) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
 };
 
 export function WoTableInlineIdentityCells({
@@ -29,6 +33,7 @@ export function WoTableInlineIdentityCells({
   siteError,
   woShowError,
   onPatch,
+  onDuplicateFound,
 }: WoTableInlineIdentityCellsProps) {
   return (
     <>
@@ -74,6 +79,7 @@ export function WoTableInlineIdentityCells({
             currentId="draft"
             allOrders={allRows as never[]}
             onSave={(v) => onPatch({ woNumber: v })}
+            onDuplicateFound={onDuplicateFound}
           />
         </InlineCreateField>
       </td>
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
index 0dfa7ba1..28b01db3 100644
--- a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
@@ -4,7 +4,10 @@ import type {
   VendorDropdownItem,
   WorkOrderUser,
 } from "@/domain/work-orders/types/work-order";
-import type { WorkOrderTableDraft } from "@/domain/work-orders/types/work-order-table-row";
+import type {
+  WorkOrderTableDraft,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
 import { AssignedToCell } from "./cells/assigned-to-cell";
 import { ApptTimeCell } from "./cells/appt-time-cell";
 import { DateCell } from "./cells/date-cell";
@@ -31,6 +34,7 @@ type WoTableInlineRowCellsProps = {
   siteError: string;
   woShowError: boolean;
   onPatch: (patch: Partial<WorkOrderTableDraft>) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
 };
 
 function InlineMutedDashCell() {
@@ -56,6 +60,7 @@ export function WoTableInlineRowCells({
   siteError,
   woShowError,
   onPatch,
+  onDuplicateFound,
 }: WoTableInlineRowCellsProps) {
   const draftRow = toInlineDraftRow(draft);
   const hasSchedule = Boolean(draft.scheduledOn) || Boolean(draft.targetWeek);
@@ -73,6 +78,7 @@ export function WoTableInlineRowCells({
         siteError={siteError}
         woShowError={woShowError}
         onPatch={onPatch}
+        onDuplicateFound={onDuplicateFound}
       />
 
       <td className="group/cell" style={{ padding: "0 14px" }}>
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row.tsx
index 816ed9e3..679a0c3b 100644
--- a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row.tsx
@@ -6,7 +6,10 @@ import type {
   VendorDropdownItem,
   WorkOrderUser,
 } from "@/domain/work-orders/types/work-order";
-import type { WorkOrderTableDraft } from "@/domain/work-orders/types/work-order-table-row";
+import type {
+  WorkOrderTableDraft,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
 import { UNSCHEDULED_DAY_KEY } from "@/domain/work-orders/types/work-order-table-row";
 import {
   draftHasScheduleDate,
@@ -32,6 +35,7 @@ type WoTableInlineRowProps = {
   onChange: (draft: WorkOrderTableDraft) => void;
   onSave: () => void;
   onCancel: () => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
 };
 
 const PRE_SCHEDULE = new Set(["Incomplete", "Pending", ""]);
@@ -60,6 +64,7 @@ export function WoTableInlineRow({
   onChange,
   onSave,
   onCancel,
+  onDuplicateFound,
 }: WoTableInlineRowProps) {
   const weekDefault = draftDayKey === UNSCHEDULED_DAY_KEY;
   const missing = getInlineCreateMissing(draft);
@@ -127,6 +132,7 @@ export function WoTableInlineRow({
         siteError={inlineCreateSiteError(missing)}
         woShowError={woShowError}
         onPatch={patch}
+        onDuplicateFound={onDuplicateFound}
       />
 
       <td style={{ padding: "0 4px" }}>
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table.tsx
index 94e019a7..c733ce89 100644
--- a/src/app/(protected)/workorders/_components/list/table/wo-table.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table.tsx
@@ -9,11 +9,11 @@ import type {
   WorkOrderTablePatch,
   WorkOrderTableRow,
 } from "@/domain/work-orders/types/work-order-table-row";
-import { useCreateWorkOrderFromWizard } from "@/domain/work-orders/use-cases/use-create-work-order-from-wizard";
+import { DuplicateWoNumberDialog } from "@/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog";
 import { WoTableSkeleton } from "@/app/(protected)/workorders/_components/loading/wo-table-skeleton";
 import type { ReturnTypeOfUseWorkOrdersTableData } from "./wo-table-types";
-import { buildInlineDraftCreateInput } from "./build-inline-draft-create-input";
 import { buildSitePlaceLookups, resolveSitePlace } from "./site-place-lookup";
+import { useWoTableInlineCreate } from "./use-wo-table-inline-create";
 import { useWoTableRowHandlers } from "./use-wo-table-row-handlers";
 import { WoTableBody } from "./wo-table-body";
 import { WoTableHead } from "./wo-table-head";
@@ -55,10 +55,14 @@ export function WoTable({
   onPatch,
 }: WoTableProps) {
   const [dueDateHighlightId, setDueDateHighlightId] = useState<string | number | null>(null);
+  const [duplicateRow, setDuplicateRow] = useState<WorkOrderTableRow | null>(null);
   const { data: locationSites = [] } = useLocationSites();
   const sitePlaceLookups = useMemo(() => buildSitePlaceLookups(locationSites), [locationSites]);
-  const createMutation = useCreateWorkOrderFromWizard(() => {
-    tableData.cancelDraft();
+  const { handleInlineSave, saving } = useWoTableInlineCreate({
+    tableData,
+    users,
+    sites,
+    onDuplicateFound: setDuplicateRow,
   });
 
   const handlers = useWoTableRowHandlers({
@@ -70,6 +74,7 @@ export function WoTable({
     onOpenMedia,
     onPatch,
     onScheduleHighlight: setDueDateHighlightId,
+    onDuplicateFound: setDuplicateRow,
   });
 
   const renderRow = (row: WorkOrderTableRow, forceScheduleHighlight = false) => (
@@ -107,12 +112,11 @@ export function WoTable({
         vendors={vendors}
         pmTypes={pmTypes}
         allRows={tableData.rows}
-        saving={createMutation.isPending}
+        saving={saving}
         onChange={tableData.setDraft}
-        onSave={() =>
-          createMutation.mutate(buildInlineDraftCreateInput(tableData.draft, users, sites))
-        }
+        onSave={handleInlineSave}
         onCancel={tableData.cancelDraft}
+        onDuplicateFound={setDuplicateRow}
       />
     );
 
@@ -151,21 +155,33 @@ export function WoTable({
   }
 
   return (
-    <WoTableShell>
-      <table
-        style={{
-          width: "100%",
-          minWidth: WO_TABLE_MIN_WIDTH,
-          borderCollapse: "collapse",
+    <>
+      <WoTableShell>
+        <table
+          style={{
+            width: "100%",
+            minWidth: WO_TABLE_MIN_WIDTH,
+            borderCollapse: "collapse",
+          }}
+        >
+          <WoTableHead />
+          <WoTableBody
+            tableData={tableData}
+            renderRow={renderRow}
+            renderInlineRow={renderInlineRow}
+          />
+        </table>
+      </WoTableShell>
+
+      <DuplicateWoNumberDialog
+        open={duplicateRow != null}
+        existing={duplicateRow}
+        onDismiss={() => setDuplicateRow(null)}
+        onViewExisting={(row) => {
+          setDuplicateRow(null);
+          onOpenSlideOver(row, false);
         }}
-      >
-        <WoTableHead />
-        <WoTableBody
-          tableData={tableData}
-          renderRow={renderRow}
-          renderInlineRow={renderInlineRow}
-        />
-      </table>
-    </WoTableShell>
+      />
+    </>
   );
 }
diff --git a/src/app/(protected)/workorders/_components/list/work-orders-list-wizard.tsx b/src/app/(protected)/workorders/_components/list/work-orders-list-wizard.tsx
new file mode 100644
index 00000000..c9ab1c6c
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/work-orders-list-wizard.tsx
@@ -0,0 +1,32 @@
+import { NewWoWizard } from "@/app/(protected)/workorders/_components/wizard/new-wo-wizard";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type WorkOrdersListWizardProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  users: WorkOrderUser[];
+  rows: WorkOrderTableRow[];
+  onViewExisting: (row: WorkOrderTableRow) => void;
+};
+
+export function WorkOrdersListWizard({
+  open,
+  onOpenChange,
+  users,
+  rows,
+  onViewExisting,
+}: WorkOrdersListWizardProps) {
+  return (
+    <NewWoWizard
+      open={open}
+      onOpenChange={onOpenChange}
+      users={users}
+      existingRows={rows}
+      onViewExistingWo={(row) => {
+        onOpenChange(false);
+        onViewExisting(row);
+      }}
+    />
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx b/src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx
index 6643256d..7b7d5326 100644
--- a/src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx
+++ b/src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx
@@ -1,38 +1,23 @@
-import { useEffect, useMemo, useState } from "react";
 import { Dialog } from "@mui/material";
 import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
 import { Text } from "@/components/ui/text";
-import { useDropdownOptionsByCategory } from "@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category";
-import { isWoWizardMockEnabled } from "@/domain/work-orders/mocks/is-wo-wizard-mock-enabled";
-import {
-  getMockWoWizardLocationDetail,
-  MOCK_WO_WIZARD_LOCATIONS,
-  MOCK_WO_WIZARD_SERVICES,
-  MOCK_WO_WIZARD_USERS,
-  MOCK_WO_WIZARD_VENDORS,
-} from "@/domain/work-orders/mocks/wo-wizard-mock-data";
+import { DuplicateWoNumberDialog } from "@/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog";
 import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
-import {
-  EMPTY_WIZARD_DRAFT,
-  WIZARD_STEPS,
-  type WorkOrderWizardDraft,
-} from "@/domain/work-orders/types/work-order-wizard";
-import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
-import {
-  useWorkOrderLocations,
-  useWorkOrderVendors,
-} from "@/domain/work-orders/use-cases/use-work-order-detail";
-import { useCreateWorkOrderFromWizard } from "@/domain/work-orders/use-cases/use-create-work-order-from-wizard";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { WIZARD_STEPS } from "@/domain/work-orders/types/work-order-wizard";
 import { WizardFooter } from "@/app/(protected)/workorders/_components/wizard/wizard-footer";
 import { WizardSidebar } from "@/app/(protected)/workorders/_components/wizard/wizard-sidebar";
 import { WizardStepLocationService } from "@/app/(protected)/workorders/_components/wizard/wizard-step-location-service";
 import { WizardStepTypeSchedule } from "@/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule";
 import { WizardStepVendorTime } from "@/app/(protected)/workorders/_components/wizard/wizard-step-vendor-time";
+import { useNewWoWizardState } from "@/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-state";
 
 type NewWoWizardProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   users: WorkOrderUser[];
+  existingRows?: WorkOrderTableRow[];
+  onViewExistingWo?: (row: WorkOrderTableRow) => void;
 };
 
 function WizardStepHeader({ step }: { step: number }) {
@@ -75,152 +60,99 @@ function WizardStepHeader({ step }: { step: number }) {
   );
 }
 
-export function NewWoWizard({ open, onOpenChange, users }: NewWoWizardProps) {
-  const mockFallback = isWoWizardMockEnabled();
-  const [step, setStep] = useState(1);
-  const [draft, setDraft] = useState<WorkOrderWizardDraft>({
-    ...EMPTY_WIZARD_DRAFT,
-    status: "Incomplete",
-  });
-  const [pocAutoFilledFor, setPocAutoFilledFor] = useState("");
-
-  const { data: apiLocations = [] } = useWorkOrderLocations();
-  const { data: apiProblems = [] } = useDropdownOptionsByCategory("Problem");
-  const isMockLocation = draft.locationId.startsWith("mock-");
-  const { data: apiLocationDetail } = useLocationDetail(
-    isMockLocation ? undefined : draft.locationId || undefined,
-  );
-  const mockLocationDetail = isMockLocation
-    ? getMockWoWizardLocationDetail(draft.locationId)
-    : undefined;
-  const locationDetail = mockLocationDetail ?? apiLocationDetail;
-  const { data: apiVendors = [] } = useWorkOrderVendors(
-    undefined,
-    isMockLocation ? undefined : locationDetail?.zipCode,
-  );
-  const createMutation = useCreateWorkOrderFromWizard(() => onOpenChange(false));
-
-  const wizardUsers = useMemo(() => {
-    if (users.length > 0) {
-      return users;
-    }
-    return mockFallback ? MOCK_WO_WIZARD_USERS : [];
-  }, [mockFallback, users]);
-  const locations =
-    apiLocations.length > 0 ? apiLocations : mockFallback ? MOCK_WO_WIZARD_LOCATIONS : [];
-  const problems =
-    apiProblems.length > 0 ? apiProblems : mockFallback ? MOCK_WO_WIZARD_SERVICES : [];
-  const vendors = apiVendors.length > 0 ? apiVendors : mockFallback ? MOCK_WO_WIZARD_VENDORS : [];
-
-  useEffect(() => {
-    if (open) {
-      setStep(1);
-      setDraft({ ...EMPTY_WIZARD_DRAFT, status: "Incomplete" });
-      setPocAutoFilledFor("");
-    }
-  }, [open]);
-
-  useEffect(() => {
-    if (!draft.locationId || !locationDetail) {
-      return;
-    }
-    if (pocAutoFilledFor === draft.locationId) {
-      return;
-    }
-    setDraft((current) => ({
-      ...current,
-      pocName: locationDetail.contact ?? current.pocName,
-      pocPhone: locationDetail.phone ?? current.pocPhone,
-    }));
-    setPocAutoFilledFor(draft.locationId);
-  }, [draft.locationId, locationDetail, pocAutoFilledFor]);
-
-  const setField = <K extends keyof WorkOrderWizardDraft>(
-    key: K,
-    value: WorkOrderWizardDraft[K],
-  ) => {
-    setDraft((current) => ({ ...current, [key]: value }));
-  };
-
-  const patchDraft = (patch: Partial<WorkOrderWizardDraft>) => {
-    setDraft((current) => ({ ...current, ...patch }));
-    if (patch.locationId !== undefined && patch.locationId !== pocAutoFilledFor) {
-      setPocAutoFilledFor("");
-    }
-  };
-
-  const handleCreate = () => createMutation.mutate(draft);
+export function NewWoWizard({
+  open,
+  onOpenChange,
+  users,
+  existingRows = [],
+  onViewExistingWo,
+}: NewWoWizardProps) {
+  const wizard = useNewWoWizardState({ open, users, existingRows, onOpenChange });
 
   return (
-    <Dialog
-      open={open}
-      onClose={() => onOpenChange(false)}
-      maxWidth={false}
-      slotProps={{
-        ...dialogBlurBackdropSlotProps,
-        paper: {
-          className: "flex flex-col overflow-hidden p-0",
-          style: {
-            borderRadius: 12,
-            width: 768,
-            maxWidth: 768,
-            height: 680,
-            maxHeight: 680,
+    <>
+      <Dialog
+        open={open}
+        onClose={() => onOpenChange(false)}
+        maxWidth={false}
+        slotProps={{
+          ...dialogBlurBackdropSlotProps,
+          paper: {
+            className: "flex flex-col overflow-hidden p-0",
+            style: {
+              borderRadius: 12,
+              width: 768,
+              maxWidth: 768,
+              height: 680,
+              maxHeight: 680,
+            },
           },
-        },
-      }}
-    >
-      <span className="sr-only">Guided setup for creating a new work order</span>
+        }}
+      >
+        <span className="sr-only">Guided setup for creating a new work order</span>
 
-      <div className="flex min-h-0 flex-1">
-        <WizardSidebar step={step} draft={draft} />
+        <div className="flex min-h-0 flex-1">
+          <WizardSidebar step={wizard.step} draft={wizard.draft} />
 
-        <div
-          className="min-h-0 flex-1 overflow-y-auto"
-          style={{ padding: 32, background: "var(--color-bg-surface)" }}
-        >
-          <WizardStepHeader step={step} />
+          <div
+            className="min-h-0 flex-1 overflow-y-auto"
+            style={{ padding: 32, background: "var(--color-bg-surface)" }}
+          >
+            <WizardStepHeader step={wizard.step} />
 
-          {step === 1 && (
-            <WizardStepTypeSchedule
-              draft={draft}
-              users={wizardUsers}
-              onUpdate={setField}
-              onPatch={patchDraft}
-            />
-          )}
+            {wizard.step === 1 && (
+              <WizardStepTypeSchedule
+                draft={wizard.draft}
+                users={wizard.wizardUsers}
+                onUpdate={wizard.setField}
+                onPatch={wizard.patchDraft}
+                onDuplicateWoNumber={wizard.handleDuplicateFound}
+              />
+            )}
 
-          {step === 2 && (
-            <WizardStepLocationService
-              draft={draft}
-              locations={locations}
-              locationDetail={locationDetail}
-              services={problems.map((p) => ({ id: p.id, value: p.value }))}
-              onUpdate={setField}
-              onPatch={patchDraft}
-            />
-          )}
+            {wizard.step === 2 && (
+              <WizardStepLocationService
+                draft={wizard.draft}
+                locations={wizard.locations}
+                locationDetail={wizard.locationDetail}
+                services={wizard.problems.map((p) => ({ id: p.id, value: p.value }))}
+                onUpdate={wizard.setField}
+                onPatch={wizard.patchDraft}
+              />
+            )}
 
-          {step === 3 && (
-            <WizardStepVendorTime
-              draft={draft}
-              vendors={vendors}
-              onUpdate={setField}
-              onPatch={patchDraft}
-            />
-          )}
+            {wizard.step === 3 && (
+              <WizardStepVendorTime
+                draft={wizard.draft}
+                vendors={wizard.vendors}
+                onUpdate={wizard.setField}
+                onPatch={wizard.patchDraft}
+              />
+            )}
+          </div>
         </div>
-      </div>
 
-      <WizardFooter
-        step={step}
-        draft={draft}
-        onCancel={() => onOpenChange(false)}
-        onBack={() => setStep((s) => s - 1)}
-        onContinue={() => setStep((s) => s + 1)}
-        onCreate={handleCreate}
-        isCreating={createMutation.isPending}
+        <WizardFooter
+          step={wizard.step}
+          draft={wizard.draft}
+          onCancel={() => onOpenChange(false)}
+          onBack={() => wizard.setStep((s) => s - 1)}
+          onContinue={() => wizard.setStep((s) => s + 1)}
+          onCreate={wizard.handleCreate}
+          isCreating={wizard.isCreating}
+        />
+      </Dialog>
+
+      <DuplicateWoNumberDialog
+        open={wizard.duplicateRow != null}
+        existing={wizard.duplicateRow}
+        onDismiss={() => wizard.setDuplicateRow(null)}
+        onViewExisting={(row) => {
+          wizard.setDuplicateRow(null);
+          onOpenChange(false);
+          onViewExistingWo?.(row);
+        }}
       />
-    </Dialog>
+    </>
   );
 }
diff --git a/src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-state.ts b/src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-state.ts
new file mode 100644
index 00000000..748fb3c5
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-state.ts
@@ -0,0 +1,136 @@
+import { useEffect, useMemo, useState } from "react";
+import { isWoWizardMockEnabled } from "@/domain/work-orders/mocks/is-wo-wizard-mock-enabled";
+import {
+  getMockWoWizardLocationDetail,
+  MOCK_WO_WIZARD_LOCATIONS,
+  MOCK_WO_WIZARD_SERVICES,
+  MOCK_WO_WIZARD_USERS,
+  MOCK_WO_WIZARD_VENDORS,
+} from "@/domain/work-orders/mocks/wo-wizard-mock-data";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  EMPTY_WIZARD_DRAFT,
+  type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
+import { useDropdownOptionsByCategory } from "@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category";
+import {
+  useWorkOrderLocations,
+  useWorkOrderVendors,
+} from "@/domain/work-orders/use-cases/use-work-order-detail";
+import { useCreateWorkOrderFromWizard } from "@/domain/work-orders/use-cases/use-create-work-order-from-wizard";
+import { useWizardDuplicateActions } from "./use-wizard-duplicate-actions";
+
+type UseNewWoWizardStateArgs = {
+  open: boolean;
+  users: WorkOrderUser[];
+  existingRows: WorkOrderTableRow[];
+  onOpenChange: (open: boolean) => void;
+};
+
+export function useNewWoWizardState({
+  open,
+  users,
+  existingRows,
+  onOpenChange,
+}: UseNewWoWizardStateArgs) {
+  const mockFallback = isWoWizardMockEnabled();
+  const [step, setStep] = useState(1);
+  const [draft, setDraft] = useState<WorkOrderWizardDraft>({
+    ...EMPTY_WIZARD_DRAFT,
+    status: "Incomplete",
+  });
+  const [pocAutoFilledFor, setPocAutoFilledFor] = useState("");
+
+  const { data: apiLocations = [] } = useWorkOrderLocations();
+  const { data: apiProblems = [] } = useDropdownOptionsByCategory("Problem");
+  const isMockLocation = draft.locationId.startsWith("mock-");
+  const { data: apiLocationDetail } = useLocationDetail(
+    isMockLocation ? undefined : draft.locationId || undefined,
+  );
+  const mockLocationDetail = isMockLocation
+    ? getMockWoWizardLocationDetail(draft.locationId)
+    : undefined;
+  const locationDetail = mockLocationDetail ?? apiLocationDetail;
+  const { data: apiVendors = [] } = useWorkOrderVendors(
+    undefined,
+    isMockLocation ? undefined : locationDetail?.zipCode,
+  );
+  const createMutation = useCreateWorkOrderFromWizard(() => onOpenChange(false));
+  const { duplicateRow, setDuplicateRow, handleDuplicateFound, handleCreate, isCreating } =
+    useWizardDuplicateActions({
+      open,
+      draft,
+      existingRows,
+      createMutation,
+    });
+
+  const wizardUsers = useMemo(() => {
+    if (users.length > 0) {
+      return users;
+    }
+    return mockFallback ? MOCK_WO_WIZARD_USERS : [];
+  }, [mockFallback, users]);
+  const locations =
+    apiLocations.length > 0 ? apiLocations : mockFallback ? MOCK_WO_WIZARD_LOCATIONS : [];
+  const problems =
+    apiProblems.length > 0 ? apiProblems : mockFallback ? MOCK_WO_WIZARD_SERVICES : [];
+  const vendors = apiVendors.length > 0 ? apiVendors : mockFallback ? MOCK_WO_WIZARD_VENDORS : [];
+
+  useEffect(() => {
+    if (open) {
+      setStep(1);
+      setDraft({ ...EMPTY_WIZARD_DRAFT, status: "Incomplete" });
+      setPocAutoFilledFor("");
+      setDuplicateRow(null);
+    }
+  }, [open, setDuplicateRow]);
+
+  useEffect(() => {
+    if (!draft.locationId || !locationDetail) {
+      return;
+    }
+    if (pocAutoFilledFor === draft.locationId) {
+      return;
+    }
+    setDraft((current) => ({
+      ...current,
+      pocName: locationDetail.contact ?? current.pocName,
+      pocPhone: locationDetail.phone ?? current.pocPhone,
+    }));
+    setPocAutoFilledFor(draft.locationId);
+  }, [draft.locationId, locationDetail, pocAutoFilledFor]);
+
+  const setField = <K extends keyof WorkOrderWizardDraft>(
+    key: K,
+    value: WorkOrderWizardDraft[K],
+  ) => {
+    setDraft((current) => ({ ...current, [key]: value }));
+  };
+
+  const patchDraft = (patch: Partial<WorkOrderWizardDraft>) => {
+    setDraft((current) => ({ ...current, ...patch }));
+    if (patch.locationId !== undefined && patch.locationId !== pocAutoFilledFor) {
+      setPocAutoFilledFor("");
+    }
+  };
+
+  return {
+    step,
+    setStep,
+    draft,
+    duplicateRow,
+    setDuplicateRow,
+    wizardUsers,
+    locations,
+    problems,
+    vendors,
+    locationDetail,
+    setField,
+    patchDraft,
+    handleDuplicateFound,
+    handleCreate,
+    isCreating,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/use-wizard-duplicate-actions.ts b/src/app/(protected)/workorders/_components/wizard/use-wizard-duplicate-actions.ts
new file mode 100644
index 00000000..0f015d2c
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/use-wizard-duplicate-actions.ts
@@ -0,0 +1,100 @@
+import { useEffect, useRef, useState } from "react";
+import { toast } from "react-toastify";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import { findDuplicateWoNumberRow } from "@/domain/work-orders/utils/find-duplicate-wo-number-row";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+
+type UseWizardDuplicateActionsArgs = {
+  open: boolean;
+  draft: WorkOrderWizardDraft;
+  existingRows: WorkOrderTableRow[];
+  createMutation: {
+    mutate: (draft: WorkOrderWizardDraft) => void;
+    isPending: boolean;
+  };
+};
+
+export function useWizardDuplicateActions({
+  open,
+  draft,
+  existingRows,
+  createMutation,
+}: UseWizardDuplicateActionsArgs) {
+  const [duplicateRow, setDuplicateRow] = useState<WorkOrderTableRow | null>(null);
+  const [isCheckingDuplicate, setIsCheckingDuplicate] = useState(false);
+  const openRef = useRef(open);
+  const draftRef = useRef(draft);
+
+  useEffect(() => {
+    openRef.current = open;
+  }, [open]);
+
+  useEffect(() => {
+    draftRef.current = draft;
+  }, [draft]);
+
+  const resolveDuplicate = async (woNumber: string) => {
+    const localDuplicate = findDuplicateWoNumberRow(woNumber, existingRows);
+    if (localDuplicate) {
+      return localDuplicate;
+    }
+
+    // The loaded board rows are only an immediate UX hint; the unfiltered API lookup is authoritative.
+    return workOrdersApi.findByWoNumber(woNumber);
+  };
+
+  const handleDuplicateFound = (woNumber: string) => {
+    void (async () => {
+      try {
+        const duplicate = await resolveDuplicate(woNumber);
+        // Ignore stale lookups after dismiss or after the user edits the WO#.
+        if (!openRef.current || woNumber !== draftRef.current.woNumber) {
+          return;
+        }
+        if (duplicate) {
+          setDuplicateRow(duplicate);
+        }
+      } catch {
+        if (!openRef.current) {
+          return;
+        }
+        toast.error("Unable to verify the work order number. Please try again.");
+      }
+    })();
+  };
+
+  const handleCreate = () => {
+    const woNumberAtSubmit = draft.woNumber;
+    void (async () => {
+      setIsCheckingDuplicate(true);
+      try {
+        const duplicate = await resolveDuplicate(woNumberAtSubmit);
+        // Ignore after dismiss or if the WO# changed while the request was in flight.
+        if (!openRef.current || woNumberAtSubmit !== draftRef.current.woNumber) {
+          return;
+        }
+        if (duplicate) {
+          setDuplicateRow(duplicate);
+          return;
+        }
+        createMutation.mutate(draftRef.current);
+      } catch {
+        if (!openRef.current) {
+          return;
+        }
+        toast.error("Unable to verify the work order number. Please try again.");
+      } finally {
+        setIsCheckingDuplicate(false);
+      }
+    })();
+  };
+
+  return {
+    duplicateRow,
+    setDuplicateRow,
+    handleDuplicateFound,
+    handleCreate,
+    isCreating: createMutation.isPending || isCheckingDuplicate,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule.tsx
index 51c6f0d3..7f35c2e7 100644
--- a/src/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule.tsx
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule.tsx
@@ -117,6 +117,7 @@ type WizardStepTypeScheduleProps = {
   users: WorkOrderUser[];
   onUpdate: <K extends keyof WorkOrderWizardDraft>(key: K, value: WorkOrderWizardDraft[K]) => void;
   onPatch: (patch: Partial<WorkOrderWizardDraft>) => void;
+  onDuplicateWoNumber?: (woNumber: string) => void;
 };
 
 export function WizardStepTypeSchedule({
@@ -124,6 +125,7 @@ export function WizardStepTypeSchedule({
   users,
   onUpdate,
   onPatch,
+  onDuplicateWoNumber,
 }: WizardStepTypeScheduleProps) {
   return (
     <div className="space-y-6">
@@ -138,6 +140,7 @@ export function WizardStepTypeSchedule({
           type="text"
           value={draft.woNumber}
           onChange={(e) => onUpdate("woNumber", e.target.value)}
+          onBlur={() => onDuplicateWoNumber?.(draft.woNumber)}
           placeholder="e.g. 24818"
           maxLength={20}
           className={DLG_INPUT_CLS}
diff --git a/src/app/(protected)/workorders/index.tsx b/src/app/(protected)/workorders/index.tsx
index 672919ee..9036de10 100644
--- a/src/app/(protected)/workorders/index.tsx
+++ b/src/app/(protected)/workorders/index.tsx
@@ -9,8 +9,8 @@ import { WorkOrdersAdvancedFiltersBanner } from "@/app/(protected)/workorders/_c
 import { WorkOrdersFilterBar } from "@/app/(protected)/workorders/_components/list/filter-bar/work-orders-filter-bar";
 import { WorkOrdersListHeader } from "@/app/(protected)/workorders/_components/list/work-orders-list-header";
 import { WorkOrderCancelDialog } from "@/app/(protected)/workorders/_components/list/work-order-cancel-dialog";
+import { WorkOrdersListWizard } from "@/app/(protected)/workorders/_components/list/work-orders-list-wizard";
 import { WoTable } from "@/app/(protected)/workorders/_components/list/table/wo-table";
-import { NewWoWizard } from "@/app/(protected)/workorders/_components/wizard/new-wo-wizard";
 import { useWorkOrdersListPage } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-page";
 import { useAuthContext } from "@/providers/auth-context";
 
@@ -91,7 +91,13 @@ export default function WorkOrdersListPage() {
         onPatch={page.patchField}
       />
 
-      <NewWoWizard open={page.wizardOpen} onOpenChange={page.setWizardOpen} users={page.users} />
+      <WorkOrdersListWizard
+        open={page.wizardOpen}
+        onOpenChange={page.setWizardOpen}
+        users={page.users}
+        rows={tableData.rows}
+        onViewExisting={(row) => page.handleOpenSlideOver(row, false)}
+      />
 
       <WorkOrdersAdvancedSearchSheet
         open={filters.advOpen}
diff --git a/src/domain/work-orders/api/work-orders-api.ts b/src/domain/work-orders/api/work-orders-api.ts
index 7b0da992..ad9a93d1 100644
--- a/src/domain/work-orders/api/work-orders-api.ts
+++ b/src/domain/work-orders/api/work-orders-api.ts
@@ -191,6 +191,48 @@ export const workOrdersApi = {
     };
   },
 
+  findByWoNumber: async (woNumber: string): Promise<WorkOrderTableRow | undefined> => {
+    const normalized = woNumber.trim();
+    // Search every non-empty WO# — backend advanced search accepts 1-character queries, and
+    // wizard/create allow single-digit numbers (SH-189 must not bypass remote uniqueness).
+    if (!normalized) {
+      return undefined;
+    }
+    // Safety cap — if hit before exhausting results, fail closed (do not treat as unique).
+    const safetyMaxPages = 50;
+
+    // `board/search` is fuzzy and paginated (0-based); exhaust pages for an exact WO#.
+    const pageSize = 100;
+    let page = 0;
+    let scanned = 0;
+    let totalCount = Number.POSITIVE_INFINITY;
+
+    while (scanned < totalCount) {
+      if (page >= safetyMaxPages) {
+        throw new Error(
+          "Unable to verify the work order number: search result set exceeded the safety page limit.",
+        );
+      }
+      const result = await workOrdersApi.searchBoard({
+        search: normalized,
+        page,
+        pageSize,
+      });
+      const exact = result.items.find((row) => row.woNumber === normalized);
+      if (exact) {
+        return exact;
+      }
+      scanned += result.items.length;
+      totalCount = result.totalCount;
+      if (result.items.length === 0) {
+        break;
+      }
+      page += 1;
+    }
+
+    return undefined;
+  },
+
   getListByLocation: async (
     locationId: string | number,
     search = "",
diff --git a/src/domain/work-orders/utils/find-duplicate-wo-number-row.ts b/src/domain/work-orders/utils/find-duplicate-wo-number-row.ts
new file mode 100644
index 00000000..0b4a0d52
--- /dev/null
+++ b/src/domain/work-orders/utils/find-duplicate-wo-number-row.ts
@@ -0,0 +1,16 @@
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+export function findDuplicateWoNumberRow(
+  woNumber: string,
+  rows: WorkOrderTableRow[],
+  excludeId?: string | number,
+): WorkOrderTableRow | undefined {
+  const normalized = woNumber.trim();
+  if (normalized === "") {
+    return undefined;
+  }
+
+  return rows.find(
+    (row) => row.woNumber === normalized && String(row.id) !== String(excludeId ?? ""),
+  );
+}
diff --git a/src/test/app/(protected)/workorders/duplicate-wo-number-dialog.test.tsx b/src/test/app/(protected)/workorders/duplicate-wo-number-dialog.test.tsx
new file mode 100644
index 00000000..5d126913
--- /dev/null
+++ b/src/test/app/(protected)/workorders/duplicate-wo-number-dialog.test.tsx
@@ -0,0 +1,58 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DuplicateWoNumberDialog } from "@/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+const existingRow = { id: "wo-99", woNumber: "12345678901" } as WorkOrderTableRow;
+
+describe("DuplicateWoNumberDialog", () => {
+  it("shows the duplicate title and work order number when open", () => {
+    renderWithProviders(
+      <DuplicateWoNumberDialog
+        open
+        existing={existingRow}
+        onDismiss={vi.fn()}
+        onViewExisting={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("Duplicate Work Order Number")).toBeInTheDocument();
+    expect(screen.getByText(/12345678901/)).toBeInTheDocument();
+  });
+
+  it("calls onViewExisting when View existing is clicked", () => {
+    const onViewExisting = vi.fn();
+
+    renderWithProviders(
+      <DuplicateWoNumberDialog
+        open
+        existing={existingRow}
+        onDismiss={vi.fn()}
+        onViewExisting={onViewExisting}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "View existing" }));
+
+    expect(onViewExisting).toHaveBeenCalledWith(existingRow);
+  });
+
+  it("calls onDismiss when Dismiss is clicked", () => {
+    const onDismiss = vi.fn();
+
+    renderWithProviders(
+      <DuplicateWoNumberDialog
+        open
+        existing={existingRow}
+        onDismiss={onDismiss}
+        onViewExisting={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Dismiss" }));
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/new-wo-wizard-duplicate.test.tsx b/src/test/app/(protected)/workorders/new-wo-wizard-duplicate.test.tsx
new file mode 100644
index 00000000..e1e6acb5
--- /dev/null
+++ b/src/test/app/(protected)/workorders/new-wo-wizard-duplicate.test.tsx
@@ -0,0 +1,88 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { NewWoWizard } from "@/app/(protected)/workorders/_components/wizard/new-wo-wizard";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+const existingRow = { id: "wo-99", woNumber: "12345678901" } as WorkOrderTableRow;
+const findByWoNumber = vi.fn();
+
+vi.mock("@/domain/work-orders/use-cases/use-create-work-order-from-wizard", () => ({
+  useCreateWorkOrderFromWizard: () => ({
+    mutate: vi.fn(),
+    isPending: false,
+  }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderLocations: () => ({ data: [] }),
+  useWorkOrderVendors: () => ({ data: [] }),
+}));
+
+vi.mock("@/domain/locations/use-cases/use-location-detail", () => ({
+  useLocationDetail: () => ({ data: undefined }),
+}));
+
+vi.mock("@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category", () => ({
+  useDropdownOptionsByCategory: () => ({ data: [] }),
+}));
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: {
+    findByWoNumber: (...args: unknown[]) => findByWoNumber(...args),
+  },
+}));
+
+describe("NewWoWizard duplicate wo number", () => {
+  it("shows the duplicate dialog when the wizard wo number matches an existing row", async () => {
+    renderWithProviders(
+      <NewWoWizard
+        open
+        onOpenChange={vi.fn()}
+        users={[]}
+        existingRows={[existingRow]}
+        onViewExistingWo={vi.fn()}
+      />,
+    );
+
+    const woNumberInput = screen.getByPlaceholderText("e.g. 24818");
+    fireEvent.change(woNumberInput, {
+      target: { value: "12345678901" },
+    });
+    fireEvent.blur(woNumberInput);
+
+    await waitFor(() => {
+      expect(screen.getByText("Duplicate Work Order Number")).toBeInTheDocument();
+    });
+    expect(screen.getByText(/is already assigned to another work order/i)).toBeInTheDocument();
+  });
+
+  it("finds a duplicate outside the loaded board rows", async () => {
+    const offPageRow = {
+      id: "wo-off-page",
+      woNumber: "98765432109",
+    } as WorkOrderTableRow;
+    findByWoNumber.mockResolvedValueOnce(offPageRow);
+
+    renderWithProviders(
+      <NewWoWizard
+        open
+        onOpenChange={vi.fn()}
+        users={[]}
+        existingRows={[]}
+        onViewExistingWo={vi.fn()}
+      />,
+    );
+
+    const woNumberInput = screen.getByPlaceholderText("e.g. 24818");
+    fireEvent.change(woNumberInput, {
+      target: { value: "98765432109" },
+    });
+    fireEvent.blur(woNumberInput);
+
+    await waitFor(() => {
+      expect(screen.getByText("Duplicate Work Order Number")).toBeInTheDocument();
+    });
+    expect(findByWoNumber).toHaveBeenCalledWith("98765432109");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-wo-table-row-handlers-duplicate.test.ts b/src/test/app/(protected)/workorders/use-wo-table-row-handlers-duplicate.test.ts
new file mode 100644
index 00000000..df563025
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-wo-table-row-handlers-duplicate.test.ts
@@ -0,0 +1,43 @@
+import { renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useWoTableRowHandlers } from "@/app/(protected)/workorders/_components/list/table/use-wo-table-row-handlers";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+const existingRow = { id: "wo-99", woNumber: "12345678901" } as WorkOrderTableRow;
+
+function buildTableData() {
+  return {
+    dragState: { current: { dragId: null, overId: null } },
+    setDragViz: vi.fn(),
+    reorderRows: vi.fn(),
+    endDrag: vi.fn(),
+    setUnschedOpen: vi.fn(),
+    triggerFlash: vi.fn(),
+    setSelectedId: vi.fn(),
+  } as never;
+}
+
+describe("useWoTableRowHandlers onDuplicateFound", () => {
+  it("delegates to onDuplicateFound instead of opening the slide-over", () => {
+    const onDuplicateFound = vi.fn();
+    const onOpenSlideOver = vi.fn();
+
+    const { result } = renderHook(() =>
+      useWoTableRowHandlers({
+        tableData: buildTableData(),
+        weekMonday: "2026-07-20",
+        onWeekChange: vi.fn(),
+        onOpenSlideOver,
+        onOpenMedia: vi.fn(),
+        onPatch: vi.fn(),
+        onScheduleHighlight: vi.fn(),
+        onDuplicateFound,
+      }),
+    );
+
+    result.current.onDuplicateFound?.(existingRow);
+
+    expect(onDuplicateFound).toHaveBeenCalledWith(existingRow);
+    expect(onOpenSlideOver).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/test/domain/work-orders/api/work-orders-api.test.ts b/src/test/domain/work-orders/api/work-orders-api.test.ts
index 8b000890..a8fdf14d 100644
--- a/src/test/domain/work-orders/api/work-orders-api.test.ts
+++ b/src/test/domain/work-orders/api/work-orders-api.test.ts
@@ -298,6 +298,157 @@ describe("workOrdersApi.searchBoard", () => {
   });
 });
 
+describe("workOrdersApi.findByWoNumber", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+  });
+
+  it("searches globally without the active board filters", async () => {
+    apiGet.mockResolvedValue({
+      items: [
+        {
+          id: 505,
+          woNumber: "10000001235",
+          lifecycleStatusLabel: "Incomplete",
+        },
+      ],
+      totalCount: 1,
+      page: 0,
+      pageSize: 100,
+    });
+
+    const result = await workOrdersApi.findByWoNumber("10000001235");
+
+    expect(apiGet).toHaveBeenCalledWith(
+      API_PATHS.workOrder.boardSearch,
+      expect.objectContaining({
+        searchParams: expect.any(URLSearchParams),
+      }),
+    );
+    const searchParams = apiGet.mock.calls[0]?.[1]?.searchParams as URLSearchParams;
+    expect(Object.fromEntries(searchParams)).toEqual({
+      search: "10000001235",
+      page: "0",
+      pageSize: "100",
+    });
+    expect(result).toMatchObject({ id: 505, woNumber: "10000001235" });
+  });
+
+  it("pages through fuzzy search until the exact WO number is found", async () => {
+    apiGet
+      .mockResolvedValueOnce({
+        items: Array.from({ length: 100 }, (_, index) => ({
+          id: index + 1,
+          woNumber: `fuzzy-match-${index}`,
+          lifecycleStatusLabel: "Incomplete",
+        })),
+        totalCount: 101,
+        page: 0,
+        pageSize: 100,
+      })
+      .mockResolvedValueOnce({
+        items: [
+          {
+            id: 999,
+            woNumber: "10000009999",
+            lifecycleStatusLabel: "Incomplete",
+          },
+        ],
+        totalCount: 101,
+        page: 1,
+        pageSize: 100,
+      });
+
+    const result = await workOrdersApi.findByWoNumber("10000009999");
+
+    expect(apiGet).toHaveBeenCalledTimes(2);
+    const secondParams = apiGet.mock.calls[1]?.[1]?.searchParams as URLSearchParams;
+    expect(Object.fromEntries(secondParams)).toMatchObject({
+      search: "10000009999",
+      page: "1",
+      pageSize: "100",
+    });
+    expect(result).toMatchObject({ id: 999, woNumber: "10000009999" });
+  });
+
+  it("skips remote search for empty WO numbers", async () => {
+    const result = await workOrdersApi.findByWoNumber("   ");
+    expect(apiGet).not.toHaveBeenCalled();
+    expect(result).toBeUndefined();
+  });
+
+  it("finds a one-character WO number duplicate outside loaded board rows", async () => {
+    apiGet.mockResolvedValue({
+      items: [
+        {
+          id: 7,
+          woNumber: "9",
+          lifecycleStatusLabel: "Incomplete",
+        },
+      ],
+      totalCount: 1,
+      page: 0,
+      pageSize: 100,
+    });
+
+    const result = await workOrdersApi.findByWoNumber("9");
+
+    expect(apiGet).toHaveBeenCalledTimes(1);
+    const searchParams = apiGet.mock.calls[0]?.[1]?.searchParams as URLSearchParams;
+    expect(Object.fromEntries(searchParams)).toEqual({
+      search: "9",
+      page: "0",
+      pageSize: "100",
+    });
+    expect(result).toMatchObject({ id: 7, woNumber: "9" });
+  });
+
+  it("throws when the safety page limit is hit before exhausting results", async () => {
+    apiGet.mockResolvedValue({
+      items: Array.from({ length: 100 }, (_, index) => ({
+        id: index + 1,
+        woNumber: `fuzzy-match-${index}`,
+        lifecycleStatusLabel: "Incomplete",
+      })),
+      totalCount: 10_000,
+      page: 0,
+      pageSize: 100,
+    });
+
+    await expect(workOrdersApi.findByWoNumber("10000005555")).rejects.toThrow(/safety page limit/i);
+    expect(apiGet).toHaveBeenCalledTimes(50);
+  });
+
+  it("returns undefined after exhausting all fuzzy search pages", async () => {
+    apiGet
+      .mockResolvedValueOnce({
+        items: Array.from({ length: 100 }, (_, index) => ({
+          id: index + 1,
+          woNumber: `fuzzy-match-${index}`,
+          lifecycleStatusLabel: "Incomplete",
+        })),
+        totalCount: 150,
+        page: 0,
+        pageSize: 100,
+      })
+      .mockResolvedValueOnce({
+        items: Array.from({ length: 50 }, (_, index) => ({
+          id: index + 101,
+          woNumber: `fuzzy-match-${index + 100}`,
+          lifecycleStatusLabel: "Incomplete",
+        })),
+        totalCount: 150,
+        page: 1,
+        pageSize: 100,
+      });
+
+    const result = await workOrdersApi.findByWoNumber("10000005555");
+
+    expect(apiGet).toHaveBeenCalledTimes(2);
+    expect(result).toBeUndefined();
+  });
+});
+
 describe("workOrdersApi.patchBoardField", () => {
   beforeEach(() => {
     apiPatchFn.mockReset();
diff --git a/src/test/domain/work-orders/utils/find-duplicate-wo-number-row.test.ts b/src/test/domain/work-orders/utils/find-duplicate-wo-number-row.test.ts
new file mode 100644
index 00000000..f56dda8d
--- /dev/null
+++ b/src/test/domain/work-orders/utils/find-duplicate-wo-number-row.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { findDuplicateWoNumberRow } from "@/domain/work-orders/utils/find-duplicate-wo-number-row";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+const rows = [
+  { id: "wo-1", woNumber: "12345678901" },
+  { id: "wo-2", woNumber: "99999999999" },
+] as WorkOrderTableRow[];
+
+describe("findDuplicateWoNumberRow", () => {
+  it("returns a matching row when the wo number already exists", () => {
+    expect(findDuplicateWoNumberRow("12345678901", rows)).toEqual(rows[0]);
+  });
+
+  it("ignores blank values and excluded ids", () => {
+    expect(findDuplicateWoNumberRow("", rows)).toBeUndefined();
+    expect(findDuplicateWoNumberRow("12345678901", rows, "wo-1")).toBeUndefined();
+  });
+});
diff --git a/tmp/pr-descriptions/pr8-duplicate-dialog.md b/tmp/pr-descriptions/pr8-duplicate-dialog.md
new file mode 100644
index 00000000..242e05f7
--- /dev/null
+++ b/tmp/pr-descriptions/pr8-duplicate-dialog.md
@@ -0,0 +1,26 @@
+## Jira
+
+- [SH-189](https://luby-us.atlassian.net/browse/SH-189)
+
+## QA residual
+
+- P0 done: duplicate dialog also on **wizard create** (not only table cell).
+- P1 polish: Cancel / View Existing copy tweaks.
+
+## Summary
+
+- Show a confirmation dialog when inline WO number editing **or wizard create** detects a duplicate instead of navigating immediately to the existing work order.
+- Dialog title: **Duplicate Work Order Number**; actions: **View existing** (opens the existing WO via slide-over route) and **Dismiss** (closes the dialog and keeps the current row editable).
+- Duplicate scan logic shared via `find-duplicate-wo-number-row`.
+
+## Test plan
+
+- [ ] Edit a WO number in the table to match an existing row → dialog opens with the duplicate number in the message.
+- [ ] Click **Dismiss** → dialog closes; edited row keeps its original number.
+- [ ] Repeat duplicate entry → click **View existing** → navigates to `/workorders/{id}` for the existing row.
+- [ ] Wizard create with duplicate WO number → same dialog; **View existing** closes wizard and opens `/workorders/{id}`.
+
+## Out of scope
+
+- Server-side uniqueness (422) handling
+- SH provisional numbering