Merge remote-tracking branch 'origin/dev' into feat/ab/sh-304-services-registry-ui

# Conflicts:
#	src/api/api-paths.ts
#	src/domain/services/api/services-api.ts
#	src/domain/services/mappers/service-mapper.ts
#	src/domain/services/types/service.ts
#	src/infra/query-key/query-key.ts
#	src/test/domain/services/api/services-api.test.ts

e2e/vendors/vendors.spec.ts

@@ -29,6 +29,8 @@ const activeVendors = [
     TotalJobs: 72,
     IsActive: true,
     PreferredContact: "Email",
+    AreaId: 1 as number | null,
+    AreaName: "East",
   },
   {
     Id: 2,
@@ -47,9 +49,16 @@ const activeVendors = [
     Notes: "",
     TotalJobs: 18,
     IsActive: true,
+    AreaId: null as number | null,
+    AreaName: "",
   },
 ];
 
+const SERVICE_AREAS = [
+  { id: 2, name: "Central" },
+  { id: 1, name: "East" },
+];
+
 const inactiveVendors = [
   {
     ...activeVendors[0],
@@ -135,6 +144,7 @@ async function mockVendorApi(
           googleMapsUrl: vendor.GoogleMapsUrl,
         })),
         trades: ["Plumbing", "Backflow Preventers", "HVAC"],
+        areas: SERVICE_AREAS,
         locations: [
           { city: "St. Louis", state: "MO", label: "St. Louis, MO" },
           { city: "Clayton", state: "MO", label: "Clayton, MO" },
@@ -160,13 +170,20 @@ async function mockVendorApi(
     const source = vendorRecords.filter((vendor) => vendor.IsActive === isActive);
     const search = (url.searchParams.get("search") ?? "").toLowerCase();
     const company = url.searchParams.get("companies[0]");
+    const areas = [...url.searchParams.entries()]
+      .filter(([key]) => key.startsWith("areas["))
+      .map(([, value]) => value);
     const filtered = source.filter(
       (vendor) =>
         (!search ||
           `${vendor.CompanyName} ${vendor.ContactName} ${vendor.TradeSpecialties} ${vendor.City} ${vendor.State}`
             .toLowerCase()
             .includes(search)) &&
-        (!company || vendor.CompanyName === company),
+        (!company || vendor.CompanyName === company) &&
+        (areas.length === 0 ||
+          areas.some((area) =>
+            area === "__unassigned__" ? vendor.AreaId == null : String(vendor.AreaId) === area,
+          )),
     );
     const isCount = url.searchParams.get("pageSize") === "1";
     const responseRows = filtered.map((vendor) => {
@@ -244,6 +261,8 @@ async function mockVendorApi(
         zip: anchor.Zip,
         googleMapsUrl: anchor.GoogleMapsUrl,
         notes: anchor.Notes,
+        areaId: anchor.AreaId,
+        areaName: anchor.AreaName,
         technicians: [
           ...vendorRecords
             .filter((vendor) => vendor.CompanyId === anchor.CompanyId)
@@ -307,6 +326,8 @@ async function mockVendorApi(
       zip: anchor.Zip,
       googleMapsUrl: anchor.GoogleMapsUrl,
       notes: anchor.Notes,
+      areaId: anchor.AreaId,
+      areaName: anchor.AreaName,
       technicians: vendorRecords
         .filter((vendor) => vendor.CompanyId === anchor.CompanyId)
         .map((vendor) => ({
@@ -410,6 +431,7 @@ test.describe("Vendor directory prototype parity", () => {
       "Street Address",
       "City",
       "State",
+      "Service Area",
       "Trade",
       "Technician",
       "Technician Phone",
@@ -461,6 +483,7 @@ test.describe("Vendor directory prototype parity", () => {
       "Street Address",
       "City",
       "State",
+      "Service Area",
       "Trade",
       "Technician",
       "Technician Phone",
@@ -474,7 +497,7 @@ test.describe("Vendor directory prototype parity", () => {
     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(2050);
+    expect((await page.locator("table").boundingBox())?.width).toBe(2200);
     expect(
       (await page.getByRole("columnheader", { name: "Company", exact: true }).boundingBox())
         ?.height,
@@ -540,8 +563,8 @@ test.describe("Vendor directory prototype parity", () => {
       { cellIndex: 0, testId: "vendor-text-company", value: LONG_TEXT_VENDOR.CompanyName },
       { cellIndex: 2, testId: "vendor-text-company-email", value: LONG_TEXT_VENDOR.Email },
       { cellIndex: 3, testId: "vendor-text-street-address", value: LONG_TEXT_VENDOR.Address },
-      { cellIndex: 7, testId: "vendor-text-technician", value: LONG_TEXT_VENDOR.ContactName },
+      { cellIndex: 8, testId: "vendor-text-technician", value: LONG_TEXT_VENDOR.ContactName },
-      { cellIndex: 8, testId: "vendor-text-technician-phone", value: LONG_TEXT_VENDOR.Phone },
+      { cellIndex: 9, testId: "vendor-text-technician-phone", value: LONG_TEXT_VENDOR.Phone },
     ];
 
     for (const expected of fields) {
@@ -675,7 +698,8 @@ test.describe("Vendor directory prototype parity", () => {
       "1 Market St",
     );
     await expect(page.getByLabel("City (required)")).toHaveValue("St. Louis");
-    await expect(page.getByLabel("State (required)")).toHaveValue("MO");
+    await expect(page.getByLabel("State (required)")).toHaveValue("Missouri (MO)");
+    await expect(page.getByLabel("Service Area (optional)")).toHaveValue("East");
     await expect(page.getByLabel("Google Maps URL (optional)")).toHaveCount(0);
     await expect(page.getByLabel("Address (optional)")).toHaveCount(0);
     await expect(page.getByLabel("Preferred Contact")).toHaveCount(0);
@@ -748,6 +772,55 @@ test.describe("Vendor directory prototype parity", () => {
     await expect.poll(() => state.updatedBody?.notes).toBe("Updated in browser E2E");
   });
 
+  test("filters by Service Area and lets an admin assign one", async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 1000 });
+    const state = await mockVendorApi(page);
+    await page.goto("/vendors");
+
+    const gatewayRow = page.getByRole("button", {
+      name: "Open vendor details for Gateway Plumbing",
+    });
+    const metroRow = page.getByRole("button", { name: "Open vendor details for Metro HVAC" });
+    await expect(gatewayRow.getByTestId("vendor-text-service-area")).toHaveText("East");
+    await expect(metroRow.getByTestId("vendor-text-service-area")).toHaveText("Unassigned");
+
+    await page.getByRole("button", { name: "Open vendor filters" }).click();
+    await page.getByRole("button", { name: "Service Area" }).click();
+    await page.getByPlaceholder("All areas").click();
+    await expect(page.getByRole("option")).toHaveText(["Unassigned", "Central", "East"]);
+    await page.getByRole("option", { name: "East" }).click();
+    await page.getByRole("button", { name: "Apply filters" }).click();
+
+    await expect(
+      page.getByRole("button", { name: "Remove filter Service Area: East" }),
+    ).toBeVisible();
+    await expect(gatewayRow).toBeVisible();
+    await expect(metroRow).toHaveCount(0);
+    expect(state.listUrls.some((url) => new URL(url).searchParams.get("areas[0]") === "1")).toBe(
+      true,
+    );
+
+    await page.getByRole("button", { name: "Open vendor filters" }).click();
+    await page.getByRole("button", { name: "Service Area" }).click();
+    await page.getByRole("button", { name: "Clear all" }).last().click();
+    await page.getByPlaceholder("All areas").click();
+    await page.getByRole("option", { name: "Unassigned" }).click();
+    await page.getByRole("button", { name: "Apply filters" }).click();
+    await expect(page.getByText("Service Area: Unassigned")).toBeVisible();
+    await expect(metroRow).toBeVisible();
+    await expect(gatewayRow).toHaveCount(0);
+
+    await page.getByRole("button", { name: "Edit vendor Metro HVAC" }).click();
+    const detailDrawer = page.locator(".MuiDrawer-paper").last();
+    const areaField = detailDrawer.getByRole("combobox", { name: "Service Area (optional)" });
+    await expect(areaField).toBeEnabled();
+    await areaField.click();
+    await page.getByRole("option", { name: "Central" }).click();
+    await detailDrawer.getByRole("button", { name: "Save changes" }).click();
+    await expect.poll(() => state.updatedBody?.areaId).toBe(2);
+    expect(state.updatedBody?.state).toBe("MO");
+  });
+
   test("reactivates a legacy inactive vendor with an exact sparse update", async ({ page }) => {
     const state = await mockVendorApi(page, { legacyGateway: true });
     await page.goto("/vendors");
@@ -791,11 +864,14 @@ test.describe("Vendor directory prototype parity", () => {
     // leave those as the only things it is exercising.
     await page.getByRole("combobox", { name: "Street Address (required)" }).fill("1 Market St");
     await page.getByLabel("City (required)").fill("St. Louis");
-    await page.getByLabel("State (required)").fill("MO");
+    await page.getByLabel("State (required)").fill("Missouri");
+    await page.getByRole("option", { name: "Missouri (MO)" }).click();
     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([]);
+    expect(state.createdBody?.state).toBe("MO");
+    expect(state.createdBody?.areaId).toBeNull();
   });
 
   test("closes vendor details with Escape and keeps only Edit in the footer", async ({ page }) => {

e2e/work-orders/due-date-schedule-floor.spec.ts

@@ -0,0 +1,80 @@
+import { expect, test, type Route } from "@playwright/test";
+
+const FROZEN_NOW = "2026-08-19T15:00:00.000Z";
+
+const TEST_USER = {
+  token: "due-date-floor-e2e-token",
+  expiration: "2030-01-01T00:00:00.000Z",
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Work Order E2E Admin",
+  id: "1",
+};
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+test.describe("Due Date floor in the Create WO wizard (SH-356)", () => {
+  test.setTimeout(60_000);
+
+  test("disables days before Schedule On and clears Due Date when Schedule On passes it", async ({
+    page,
+  }) => {
+    await page.clock.install({ time: new Date(FROZEN_NOW) });
+    await page.clock.resume();
+    await page.addInitScript((user) => {
+      localStorage.setItem("auth", JSON.stringify(user));
+      const style = document.createElement("style");
+      style.textContent = ".tsqd-parent-container { display: none !important; }";
+      document.documentElement.appendChild(style);
+    }, TEST_USER);
+    await page.route(
+      (url) => url.pathname.startsWith("/api/"),
+      async (route) => {
+        if (route.request().method() !== "GET") {
+          await fulfillJson(route, {}, 500);
+          return;
+        }
+        await fulfillJson(route, {
+          data: [],
+          items: [],
+          weekStart: "2026-08-17",
+          weekEnd: "2026-08-21",
+          counts: { returned: 0, total: 0 },
+          unscheduled: [],
+          scheduled: [],
+        });
+      },
+    );
+
+    await page.goto("/workorders");
+    await page.getByRole("button", { name: "New WO" }).click();
+    await expect(page.getByRole("heading", { name: "Type & schedule" })).toBeVisible({
+      timeout: 20_000,
+    });
+
+    await page.getByRole("button", { name: /Pick a date/ }).click();
+    const dateTab = page.getByRole("button", { name: "Date", exact: true });
+    if (await dateTab.isVisible()) {
+      await dateTab.click();
+    }
+    await page.getByRole("button", { name: "20", exact: true }).click();
+
+    await page.getByRole("button", { name: /No due date/ }).click();
+    await expect(page.getByRole("button", { name: "19", exact: true })).toBeDisabled();
+    await expect(page.getByRole("button", { name: "20", exact: true })).toBeEnabled();
+    await page.getByRole("button", { name: "21", exact: true }).click();
+    await expect(page.getByRole("button", { name: /No due date/ })).toHaveCount(0);
+
+    await page.getByRole("button", { name: /Aug 20/ }).click();
+    const dateTabAgain = page.getByRole("button", { name: "Date", exact: true });
+    if (await dateTabAgain.isVisible()) {
+      await dateTabAgain.click();
+    }
+    await page.getByRole("button", { name: "25", exact: true }).click();
+
+    await expect(page.getByRole("button", { name: /No due date/ })).toBeVisible();
+  });
+});

e2e/work-orders/wo-number-sh-placeholder.spec.ts

@@ -0,0 +1,121 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+const FROZEN_NOW = "2026-08-19T15:00:00.000Z";
+
+const TEST_USER = {
+  token: "wo-number-sh-placeholder-e2e-token",
+  expiration: "2030-01-01T00:00:00.000Z",
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Work Order E2E Admin",
+  id: "1",
+};
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+async function hideQueryDevtools(page: Page) {
+  await page.addStyleTag({
+    content:
+      ".tsqd-parent-container { display: none !important; pointer-events: none !important; }",
+  });
+  await page.locator(".tsqd-parent-container").evaluateAll((nodes) => {
+    for (const node of nodes) {
+      node.remove();
+    }
+  });
+}
+
+const REAL_ROW = {
+  id: 1000,
+  woNumber: "12345678901",
+  workOrderType: 2,
+  siteCode: "DAL1",
+  lifecycleStatusLabel: "Scheduled",
+  scheduledDate: "2026-08-19",
+  dispatcherId: "1",
+  dispatcherName: "Pat Dispatcher",
+  pm: "HVAC",
+};
+
+async function mockBoard(page: Page, patches: unknown[]) {
+  await page.route(
+    (url) => url.pathname.startsWith("/api/"),
+    async (route) => {
+      const request = route.request();
+      const url = request.url();
+      if (request.method() !== "GET") {
+        patches.push({ url, body: request.postDataJSON() });
+        await fulfillJson(route, {}, 500);
+        return;
+      }
+      if (url.includes("workorders/board/search")) {
+        await fulfillJson(route, { items: [REAL_ROW], totalCount: 1, page: 0, pageSize: 50 });
+        return;
+      }
+      if (url.includes("workorders/board")) {
+        await fulfillJson(route, {
+          weekStart: "2026-08-17",
+          weekEnd: "2026-08-21",
+          counts: { returned: 1, total: 1 },
+          unscheduled: [],
+          scheduled: [REAL_ROW],
+        });
+        return;
+      }
+      await fulfillJson(route, { data: [], items: [] });
+    },
+  );
+}
+
+test.describe("inline WO number SH placeholder", () => {
+  test.setTimeout(60_000);
+
+  test.beforeEach(async ({ page }) => {
+    await page.clock.install({ time: new Date(FROZEN_NOW) });
+    await page.clock.resume();
+    await page.addInitScript((user) => {
+      localStorage.setItem("auth", JSON.stringify(user));
+    }, TEST_USER);
+  });
+
+  test("keeps a typed SH number on a new inline row and blocks downgrading a saved real number", async ({
+    page,
+  }) => {
+    const mutations: unknown[] = [];
+    await mockBoard(page, mutations);
+    await page.goto("/workorders");
+    await hideQueryDevtools(page);
+    await expect(page.getByRole("heading", { name: "Work Orders" })).toBeVisible({
+      timeout: 20_000,
+    });
+    await expect(page.getByText("12345678901").first()).toBeVisible();
+
+    await page
+      .getByRole("button", { name: /Add WO/ })
+      .first()
+      .click();
+    await page
+      .getByText(/^Insert WO #/)
+      .first()
+      .click();
+    const draftInput = page.getByLabel("Work order number");
+    await draftInput.fill("SH00001");
+    await draftInput.press("Enter");
+    await expect(draftInput).toHaveCount(0);
+    await expect(page.getByText("SH00001", { exact: true })).toBeVisible();
+    await expect(page.getByText(/must be 11 digits/)).toHaveCount(0);
+
+    await page.getByText("12345678901", { exact: true }).first().click();
+    const savedInput = page.getByLabel("Work order number");
+    await savedInput.fill("SH00009");
+    await savedInput.press("Enter");
+    await expect(
+      page.getByText("Cannot replace an APM work order number with an internal number"),
+    ).toBeVisible();
+    await expect(page.getByText("12345678901", { exact: true }).first()).toBeVisible();
+    expect(mutations).toEqual([]);
+  });
+});

src/app/(protected)/vendors/_components/use-vendor-list-state.ts

@@ -16,6 +16,7 @@ export interface VendorListState {
     isActive: boolean;
     companies: string[];
     trades: string[];
+    areas: string[];
     locations: string[];
     jobBuckets: string[];
   };
@@ -45,6 +46,7 @@ export function useVendorListState(): VendorListState {
       isActive,
       companies: appliedFilters.companies,
       trades: appliedFilters.trades,
+      areas: appliedFilters.areas,
       locations: appliedFilters.locations,
       jobBuckets: appliedFilters.jobBuckets,
     }),

src/app/(protected)/vendors/_components/use-vendor-roster-form.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useContext, useMemo, useState } from "react";
 import { toast } from "react-toastify";
 import { useForm, useWatch, type FieldErrors } from "react-hook-form";
 import {
@@ -15,6 +15,8 @@ import {
   type EditedCompanyFields,
 } from "@/domain/vendors/use-cases/use-save-vendor-company-roster";
 import { useVendorRosterResolver } from "./use-vendor-roster-resolver";
+import { AuthContext } from "@/providers/auth-context";
+import { isAdminUser } from "@/lib/auth/user-utils";
 
 const VENDOR_ROSTER_NO_CHANGES_MESSAGE =
   "No changes to save. Enter technician details or update a company field.";
@@ -28,6 +30,7 @@ const EDITABLE_COMPANY_FIELDS = [
   "state",
   "zip",
   "notes",
+  "areaId",
 ] as const;
 
 /**
@@ -48,10 +51,21 @@ import { useVendorFacets } from "@/domain/vendors/use-cases/use-vendor-facets";
 import { isVendorRosterConflictError } from "@/domain/vendors/lib/vendor-roster-conflict";
 import type {
   VendorCompanyRoster,
+  VendorFacetArea,
   VendorFacetCompany,
   VendorRosterConflict,
 } from "@/domain/vendors/types/vendor";
 
+export interface VendorRosterAreaFieldProps {
+  areaOptions: VendorFacetArea[];
+  currentArea: VendorFacetArea | null;
+  canAssignArea: boolean;
+}
+
+function toCurrentArea(roster: VendorCompanyRoster | null | undefined): VendorFacetArea | null {
+  return roster && roster.areaId !== "" ? { id: roster.areaId, name: roster.areaName } : null;
+}
+
 function withoutBlankNewTechnicians(
   values: VendorCompanyRosterFormValues,
 ): VendorCompanyRosterFormValues {
@@ -96,6 +110,7 @@ export interface VendorRosterForm {
   companies: VendorFacetCompany[];
   trades: string[];
   tradesLoading: boolean;
+  areaField: VendorRosterAreaFieldProps;
   selectedCompanyId: string | number | null;
   selectCompany: (company: VendorFacetCompany | null) => Promise<void>;
   clearSelectedCompany: (nextName?: string) => void;
@@ -116,6 +131,8 @@ export function useVendorRosterForm({
   );
   const { data: facets, isLoading: facetsLoading } = useVendorFacets();
   const save = useSaveVendorCompanyRoster();
+  // Area assignment is Admin-only; the API enforces it and the field mirrors it.
+  const canAssignArea = isAdminUser(useContext(AuthContext)?.user?.userRoles);
   const [conflict, setConflict] = useState<VendorRosterConflict | null>(null);
 
   const routeRoster = mode === "update" ? query.data : undefined;
@@ -151,6 +168,14 @@ export function useVendorRosterForm({
     clearConflict,
   });
   const { resetSelection } = selection;
+  const areaField = useMemo<VendorRosterAreaFieldProps>(
+    () => ({
+      areaOptions: facets?.areas ?? [],
+      currentArea: toCurrentArea(routeRoster ?? selection.selectedRoster),
+      canAssignArea,
+    }),
+    [canAssignArea, facets, routeRoster, selection.selectedRoster],
+  );
 
   const isValid = useMemo(() => {
     if (vendorCompanyRosterSchema.safeParse(watched).success) return true;
@@ -238,6 +263,7 @@ export function useVendorRosterForm({
     companies,
     trades,
     tradesLoading: facetsLoading,
+    areaField,
     selectedCompanyId: selection.selectedCompanyId,
     selectCompany: selection.selectCompany,
     clearSelectedCompany: selection.clearSelectedCompany,

src/app/(protected)/vendors/_components/use-vendor-roster-selection.ts

@@ -43,6 +43,7 @@ export function toFormValues(roster: VendorCompanyRoster): VendorCompanyRosterFo
     // The deprecated stored Maps URL is intentionally not seeded: the form has
     // no input for it, and carrying it would re-emit a legacy value on write.
     notes: roster.notes,
+    areaId: roster.areaId,
     technicians: roster.technicians.map((technician) => ({
       id: technician.id,
       contactName: technician.contactName,

src/app/(protected)/vendors/_components/vendor-create-modal.tsx

@@ -77,6 +77,7 @@ export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
               selectedCompanyId={form.selectedCompanyId}
               onSelectCompany={form.selectCompany}
               onClearSelectedCompany={form.clearSelectedCompany}
+              {...form.areaField}
             />
           </Box>
         </Stack>

src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx

@@ -155,6 +155,7 @@ function CompanySection({ roster }: { roster: VendorCompanyRoster }) {
           <Field label="State" value={roster.state} />
         </Box>
       </Stack>
+      <Field label="Service Area" value={roster.areaName || "Unassigned"} />
       <AddressMapPreview address={address} />
     </Stack>
   );
@@ -336,6 +337,7 @@ function DrawerEditor({
           tradeOptions={form.trades}
           tradeOptionsLoading={form.tradesLoading}
           showTechnicianStatus={false}
+          {...form.areaField}
         />
         {selectedIndex >= 0 && (
           <>

src/app/(protected)/vendors/_components/vendor-filter-options.tsx

@@ -3,6 +3,7 @@ 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 MapOutlinedIcon from "@mui/icons-material/MapOutlined";
 import TagOutlinedIcon from "@mui/icons-material/TagOutlined";
 import {
   Accordion,
@@ -17,13 +18,14 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import type {
+import {
-  VendorFacets,
+  type VendorFacetArea,
-  VendorFacetCompany,
+  type VendorFacets,
-  VendorFacetJobBucket,
+  type VendorFacetCompany,
-  VendorFacetLocation,
+  type VendorFacetJobBucket,
+  type VendorFacetLocation,
 } from "@/domain/vendors/types/vendor";
-import type { VendorFilters } from "./vendor-filters";
+import { serviceAreaFilterOptions, type VendorFilters } from "./vendor-filters";
 
 type DraftSetter = Dispatch<SetStateAction<VendorFilters>>;
 
@@ -156,6 +158,33 @@ interface FilterProps<T> {
   setDraft: DraftSetter;
 }
 
+function ServiceAreaFilter({ options, draft, setDraft }: FilterProps<VendorFacetArea>) {
+  return (
+    <FilterSection title="Service Area" icon={<MapOutlinedIcon />}>
+      <Autocomplete
+        multiple
+        size="small"
+        options={options}
+        getOptionLabel={(option) => option.name}
+        isOptionEqualToValue={(option, value) => option.id === value.id}
+        value={options.filter((option) => draft.areas.includes(option.id))}
+        onChange={(_event, value) =>
+          setDraft((current) => ({ ...current, areas: value.map((entry) => entry.id) }))
+        }
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const { key, ...chipProps } = getItemProps({ index });
+            return <Chip key={key} size="small" label={option.name} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField {...params} placeholder={draft.areas.length === 0 ? "All areas" : ""} />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
 function LocationFilter({ options, draft, setDraft }: FilterProps<VendorFacetLocation>) {
   return (
     <FilterSection title="Location" icon={<LocationOnOutlinedIcon />}>
@@ -245,6 +274,11 @@ export function VendorFilterOptions({
     <>
       <CompanyFilter options={facets?.companies ?? []} draft={draft} setDraft={setDraft} />
       <TradeFilter options={facets?.trades ?? []} draft={draft} setDraft={setDraft} />
+      <ServiceAreaFilter
+        options={serviceAreaFilterOptions(facets?.areas ?? [])}
+        draft={draft}
+        setDraft={setDraft}
+      />
       <LocationFilter options={facets?.locations ?? []} draft={draft} setDraft={setDraft} />
       <JobCountFilter options={facets?.jobBuckets ?? []} draft={draft} setDraft={setDraft} />
     </>

src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx

@@ -31,7 +31,11 @@ export function VendorFiltersDrawer({
   }, [open, appliedFilters]);
 
   const activeCount =
-    draft.companies.length + draft.trades.length + draft.locations.length + draft.jobBuckets.length;
+    draft.companies.length +
+    draft.trades.length +
+    draft.areas.length +
+    draft.locations.length +
+    draft.jobBuckets.length;
 
   const handleClear = () => {
     setDraft(emptyVendorFilters);

src/app/(protected)/vendors/_components/vendor-filters.ts

@@ -1,6 +1,10 @@
+import { VENDOR_AREA_UNASSIGNED, type VendorFacetArea } from "@/domain/vendors/types/vendor";
+
 export interface VendorFilters {
   companies: string[];
   trades: string[];
+  /** Stable Area ids or VENDOR_AREA_UNASSIGNED; OR within the facet. */
+  areas: string[];
   locations: string[];
   jobBuckets: string[];
 }
@@ -8,6 +12,17 @@ export interface VendorFilters {
 export const emptyVendorFilters: VendorFilters = {
   companies: [],
   trades: [],
+  areas: [],
   locations: [],
   jobBuckets: [],
 };
+
+const UNASSIGNED_AREA_OPTION: VendorFacetArea = { id: VENDOR_AREA_UNASSIGNED, name: "Unassigned" };
+
+/** Unassigned first, then the active Area catalogue A–Z (case-insensitive). */
+export function serviceAreaFilterOptions(areas: VendorFacetArea[]): VendorFacetArea[] {
+  const sorted = [...areas].sort((a, b) =>
+    a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
+  );
+  return [UNASSIGNED_AREA_OPTION, ...sorted];
+}

src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx

@@ -30,8 +30,11 @@ import {
   type RosterTechnicianValues,
   type VendorCompanyRosterFormValues,
 } from "@/domain/vendors/schemas/vendor-roster-schema";
-import type { VendorFacetCompany } from "@/domain/vendors/types/vendor";
+import type { VendorFacetArea, VendorFacetCompany } from "@/domain/vendors/types/vendor";
+import { normalizeStateCode } from "@/data/areas";
 import { VendorCompanyContactFields } from "./vendor-company-contact-fields";
+import { VendorServiceAreaField } from "./vendor-service-area-field";
+import { VendorStateSelectField } from "./vendor-state-select-field";
 
 interface VendorRosterFormFieldsProps {
   control: Control<VendorCompanyRosterFormValues>;
@@ -43,6 +46,9 @@ interface VendorRosterFormFieldsProps {
   onSelectCompany?: (company: VendorFacetCompany | null) => Promise<void>;
   onClearSelectedCompany?: (nextName?: string) => void;
   showTechnicianStatus?: boolean;
+  areaOptions?: VendorFacetArea[];
+  currentArea?: VendorFacetArea | null;
+  canAssignArea?: boolean;
 }
 
 function CompanyNameField({
@@ -136,6 +142,9 @@ function CompanyFields({
   selectedCompanyId,
   onSelectCompany,
   onClearSelectedCompany,
+  areaOptions = [],
+  currentArea = null,
+  canAssignArea = false,
 }: VendorRosterFormFieldsProps) {
   const notes = useWatch({ control, name: "notes" }) ?? "";
   const { field: streetField } = useController({ control, name: "address" });
@@ -163,7 +172,7 @@ function CompanyFields({
             // revalidates — a plain assignment would be discarded on save.
             streetField.onChange(parts.street);
             cityField.onChange(parts.city);
-            stateField.onChange(parts.state);
+            stateField.onChange(normalizeStateCode(parts.state) ?? parts.state);
           }}
           label="Street Address (required)"
           required
@@ -183,15 +192,13 @@ function CompanyFields({
             fullWidth
             slotProps={{ htmlInput: { required: true } }}
           />
-          <TextField
+          <VendorStateSelectField
-            {...stateField}
             value={stateField.value ?? ""}
-            label="State (required)"
+            onChange={stateField.onChange}
-            placeholder="e.g., MO"
+            onBlur={stateField.onBlur}
+            inputRef={stateField.ref}
             error={Boolean(errors.state)}
             helperText={errors.state?.message}
-            fullWidth
-            slotProps={{ htmlInput: { required: true } }}
           />
         </Stack>
         <Controller
@@ -234,6 +241,12 @@ function CompanyFields({
             />
           )}
         />
+        <VendorServiceAreaField
+          control={control}
+          areaOptions={areaOptions}
+          currentArea={currentArea}
+          canAssign={canAssignArea}
+        />
       </Stack>
     </Box>
   );

src/app/(protected)/vendors/_components/vendor-service-area-field.tsx

@@ -0,0 +1,58 @@
+import { Controller, type Control } from "react-hook-form";
+import { Autocomplete, TextField } from "@mui/material";
+import type { VendorCompanyRosterFormValues } from "@/domain/vendors/schemas/vendor-roster-schema";
+import type { VendorFacetArea } from "@/domain/vendors/types/vendor";
+
+interface VendorServiceAreaFieldProps {
+  control: Control<VendorCompanyRosterFormValues>;
+  areaOptions: VendorFacetArea[];
+  currentArea?: VendorFacetArea | null;
+  canAssign: boolean;
+}
+
+export const SERVICE_AREA_ADMIN_ONLY_MESSAGE = "Only administrators can assign a Service Area.";
+
+/**
+ * Zero or one Service Area per vendor company, chosen from the Area
+ * catalogue by stable id. Clearing the selection leaves the company Unassigned.
+ * The saved Area stays visible when it is no longer in the active catalogue.
+ */
+export function VendorServiceAreaField({
+  control,
+  areaOptions,
+  currentArea,
+  canAssign,
+}: VendorServiceAreaFieldProps) {
+  const options =
+    currentArea && !areaOptions.some((area) => area.id === currentArea.id)
+      ? [...areaOptions, currentArea]
+      : areaOptions;
+
+  return (
+    <Controller
+      control={control}
+      name="areaId"
+      render={({ field }) => (
+        <Autocomplete<VendorFacetArea>
+          options={options}
+          value={options.find((area) => area.id === field.value) ?? null}
+          onChange={(_event, option) => field.onChange(option?.id ?? "")}
+          onBlur={field.onBlur}
+          getOptionLabel={(option) => option.name}
+          isOptionEqualToValue={(option, value) => option.id === value.id}
+          disabled={!canAssign}
+          fullWidth
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label="Service Area (optional)"
+              placeholder="Unassigned"
+              inputRef={field.ref}
+              helperText={canAssign ? undefined : SERVICE_AREA_ADMIN_ONLY_MESSAGE}
+            />
+          )}
+        />
+      )}
+    />
+  );
+}

src/app/(protected)/vendors/_components/vendor-state-select-field.tsx

@@ -0,0 +1,57 @@
+import type { Ref } from "react";
+import { Autocomplete, TextField } from "@mui/material";
+import {
+  US_STATE_CODES,
+  formatStateOptionLabel,
+  normalizeStateCode,
+  type StateCode,
+} from "@/data/areas";
+
+interface VendorStateSelectFieldProps {
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  inputRef?: Ref<HTMLInputElement>;
+  error?: boolean;
+  helperText?: string;
+}
+
+/**
+ * Closed, searchable list of the 50 US states for the vendor company.
+ * Legacy full names are shown as their canonical code. Service Area is chosen
+ * independently, so no Area is derived from the selected State here.
+ */
+export function VendorStateSelectField({
+  value,
+  onChange,
+  onBlur,
+  inputRef,
+  error,
+  helperText,
+}: VendorStateSelectFieldProps) {
+  const selected: StateCode | null = normalizeStateCode(value);
+  return (
+    <Autocomplete<StateCode>
+      options={US_STATE_CODES}
+      value={selected}
+      onChange={(_event, option) => onChange(option ?? "")}
+      onBlur={onBlur}
+      getOptionLabel={formatStateOptionLabel}
+      fullWidth
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label="State (required)"
+          placeholder="Select a state"
+          inputRef={inputRef}
+          error={error}
+          helperText={helperText}
+          slotProps={{
+            ...params.slotProps,
+            htmlInput: { ...params.slotProps?.htmlInput, required: true },
+          }}
+        />
+      )}
+    />
+  );
+}

src/app/(protected)/vendors/_components/vendor-table-row.tsx

@@ -155,6 +155,7 @@ function CompanyCells({ row }: { row: VendorListItem }) {
       <CellText value={row.address} testId="vendor-text-street-address" focusable />
       <CellText value={row.city} testId="vendor-text-city" focusable />
       <CellText value={row.state} testId="vendor-text-state" focusable />
+      <CellText value={row.areaName || "Unassigned"} testId="vendor-text-service-area" focusable />
     </>
   );
 }

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

@@ -21,6 +21,7 @@ const TABLE_COLUMNS = [
   "Street Address",
   "City",
   "State",
+  "Service Area",
   "Trade",
   "Technician",
   "Technician Phone",
@@ -66,7 +67,7 @@ export function VendorsTable({
         size="small"
         stickyHeader
         sx={{
-          minWidth: 2050,
+          minWidth: 2200,
           tableLayout: "fixed",
           "& .MuiTableCell-head": {
             backgroundColor: "var(--color-bg-muted)",
@@ -94,7 +95,7 @@ export function VendorsTable({
         }}
       >
         <colgroup>
-          {[190, 160, 220, 220, 140, 100, 190, 220, 170, 110, 120, 130].map((width, index) => (
+          {[190, 160, 220, 220, 140, 100, 150, 190, 220, 170, 110, 120, 130].map((width, index) => (
             <col key={`${width}-${index}`} style={{ width }} />
           ))}
         </colgroup>

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

@@ -13,7 +13,7 @@ import { VendorsTable } from "./_components/vendors-table";
 import { useVendorDeactivation } from "./_components/use-vendor-deactivation";
 import { useVendorListState } from "./_components/use-vendor-list-state";
 import type { VendorFilters } from "./_components/vendor-filters";
-import type { VendorListItem } from "@/domain/vendors/types/vendor";
+import { VENDOR_AREA_UNASSIGNED, type VendorListItem } from "@/domain/vendors/types/vendor";
 import { useVendorFacets } from "@/domain/vendors/use-cases/use-vendor-facets";
 import { useVendorDirectoryList } from "@/domain/vendors/use-cases/use-vendor-directory-list";
 
@@ -91,6 +91,7 @@ function VendorStatusTabs({
 function describeChips(
   filters: VendorFilters,
   jobBucketLabels: Map<string, string>,
+  areaLabels: Map<string, string>,
 ): AppliedChip[] {
   const chips: AppliedChip[] = [];
   filters.companies.forEach((value) =>
@@ -99,6 +100,13 @@ function describeChips(
   filters.trades.forEach((value) =>
     chips.push({ category: "trades", value, label: `Trade: ${value}` }),
   );
+  filters.areas.forEach((value) =>
+    chips.push({
+      category: "areas",
+      value,
+      label: `Service Area: ${areaLabels.get(value) ?? value}`,
+    }),
+  );
   filters.locations.forEach((value) =>
     chips.push({ category: "locations", value, label: `Location: ${value}` }),
   );
@@ -146,7 +154,15 @@ export default function VendorsListPage() {
     () => new Map((facets?.jobBuckets ?? []).map((bucket) => [bucket.id, bucket.label])),
     [facets],
   );
-  const appliedChips = describeChips(filters.appliedFilters, jobBucketLabels);
+  const areaLabels = useMemo(
+    () =>
+      new Map([
+        [VENDOR_AREA_UNASSIGNED, "Unassigned"],
+        ...(facets?.areas ?? []).map((area): [string, string] => [area.id, area.name]),
+      ]),
+    [facets],
+  );
+  const appliedChips = describeChips(filters.appliedFilters, jobBucketLabels, areaLabels);
 
   return (
     <Box className="flex h-full flex-col overflow-hidden px-4 pt-4 pb-0">

src/app/(protected)/workorders/_components/detail/slide-over-audit-list.tsx

@@ -6,6 +6,7 @@ import {
   getDispatcherAvatarColor,
   getInitialsFromName,
 } from "@/domain/work-orders/utils/dispatcher-avatar-color";
+import { formatAuditTimestamp } from "@/domain/work-orders/utils/format-audit-timestamp";
 import { formatBoardAuditAction } from "@/domain/work-orders/utils/format-board-audit-action";
 
 function isSystemEntry(entry: WorkOrderAuditEntry): boolean {
@@ -15,36 +16,6 @@ function isSystemEntry(entry: WorkOrderAuditEntry): boolean {
   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[];
@@ -151,7 +122,7 @@ export function SlideOverAuditList({ entries, users = [] }: SlideOverAuditListPr
                       color: "#9CA3AF",
                     }}
                   >
-                    {formatAuditTime(entry.createdAt, isSys)}
+                    {formatAuditTimestamp(entry.createdAt)}
                   </Text>
                 </div>
               </div>

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

@@ -8,13 +8,29 @@ type SlideOverCompletionActionsProps = {
   docStatus: CompletionDocStatus;
   rowVersion?: string | number | null;
   completionPending: boolean;
+  /** Completion documents require a selected primary service. */
+  hasService: boolean;
   hasUploadHandler: boolean;
   pdfInputRef: RefObject<HTMLInputElement | null>;
   onPdfSelected: (files: FileList | null) => void;
   onOpenCompletionDoc: () => void;
 };
 
-function DocStatusButtonContent({ docStatus }: { docStatus: CompletionDocStatus }) {
+function DocStatusButtonContent({
+  docStatus,
+  hasService,
+}: {
+  docStatus: CompletionDocStatus;
+  hasService: boolean;
+}) {
+  if (!hasService) {
+    return (
+      <>
+        <FileText size={13} />
+        Select service
+      </>
+    );
+  }
   if (docStatus === "Yes") {
     return (
       <>
@@ -43,6 +59,7 @@ export function SlideOverCompletionActions({
   docStatus,
   rowVersion,
   completionPending,
+  hasService,
   hasUploadHandler,
   pdfInputRef,
   onPdfSelected,
@@ -83,10 +100,17 @@ export function SlideOverCompletionActions({
       <Button
         variant="outline"
         className="w-full gap-1.5 text-[12px]"
+        disabled={!hasService}
+        title={hasService ? undefined : "Select a service before opening the completion document"}
         onClick={onOpenCompletionDoc}
       >
-        <DocStatusButtonContent docStatus={docStatus} />
+        <DocStatusButtonContent docStatus={docStatus} hasService={hasService} />
       </Button>
+      {!hasService && (
+        <Text as="p" style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+          Select a service before opening the completion document.
+        </Text>
+      )}
     </div>
   );
 }

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

@@ -6,7 +6,8 @@ import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-
 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 { hasCompletionDocService } from "@/domain/work-orders/utils/completion-doc-service-gate";
+import { hasCompletionMediaGallery } from "@/domain/work-orders/utils/partition-slide-over-media";
 import {
   formatMediaSizeLimit,
   isWorkOrderFileTooLarge,
@@ -16,10 +17,6 @@ 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;
@@ -56,7 +53,7 @@ export function SlideOverCompletionTab({
   const templateUrl = completion?.template?.templateUrl;
   const signOffAttachment = completion?.signOffAttachment;
 
-  if (isMediaWO(row.type)) {
+  if (hasCompletionMediaGallery(row.type)) {
     return (
       <SlideOverCompletionMedia
         isReadOnly={isReadOnly}
@@ -130,6 +127,7 @@ export function SlideOverCompletionTab({
           docStatus={docStatus}
           rowVersion={row.rowVersion}
           completionPending={completionPending}
+          hasService={hasCompletionDocService(row.pm)}
           hasUploadHandler={Boolean(onUploadCompletionPdf)}
           pdfInputRef={pdfInputRef}
           onPdfSelected={handlePdfSelected}

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

@@ -34,6 +34,14 @@ const FILETYPE_ICON: Record<FileCategory, typeof ImageIcon> = {
   other: Paperclip,
 };
 
+const FILETYPE_LABEL: Record<FileCategory, string> = {
+  image: "Photo",
+  video: "Video",
+  pdf: "PDF",
+  doc: "Document",
+  other: "File",
+};
+
 const EXTRA_DOC_PURPOSES: Array<Extract<UploadableMediaCategory, "Extra" | "Aveta">> = [
   "Extra",
   "Aveta",
@@ -92,8 +100,13 @@ function ExtraDocRow({
   const purpose = file.purpose === "Aveta" || isAveta ? "Aveta" : "Extra";
 
   return (
-    <div className="flex items-center gap-2 py-1">
+    <div
+      role="group"
+      aria-label={`${FILETYPE_LABEL[file.fileType]}, ${purpose}: ${file.name}`}
+      className="flex items-center gap-2 py-1"
+    >
       <ItemIcon
+        aria-hidden
         size={12}
         className="shrink-0"
         style={{ color: isAveta ? "var(--warning)" : "var(--color-text-muted)" }}

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

@@ -19,6 +19,10 @@ import type { WizardWOStatus } from "@/domain/work-orders/types/work-order-wizar
 import { deriveDayFields } from "@/domain/work-orders/utils/table-day-utils";
 import { toVendorTablePatch } from "@/domain/work-orders/utils/vendor-assignment-patch";
 import { DocBadge } from "./slide-over-doc-badge";
+import {
+  clearDueDateBeforeSchedule,
+  resolveDueDateFloor,
+} from "@/domain/work-orders/utils/due-date-floor";
 
 type SlideOverInfoTabEditViewProps = {
   draft: WorkOrderTableRow;
@@ -52,6 +56,7 @@ function SlideOverScheduleOnField({
       schedMode={draft.schedMode}
       onSave={(scheduledOn) =>
         onDraftChange({
+          ...clearDueDateBeforeSchedule(draft.dueDate, scheduledOn),
           scheduledOn,
           scheduleWeekOnly: false,
           targetWeek: scheduledOn ? "" : draft.targetWeek,
@@ -63,6 +68,7 @@ function SlideOverScheduleOnField({
       }
       onSaveWeek={(weekStart) =>
         onDraftChange({
+          ...clearDueDateBeforeSchedule(draft.dueDate, weekStart),
           scheduledOn: "",
           targetWeek: weekStart,
           scheduleWeekOnly: true,
@@ -74,6 +80,7 @@ function SlideOverScheduleOnField({
       }
       onSaveRange={(start, end) =>
         onDraftChange({
+          ...clearDueDateBeforeSchedule(draft.dueDate, start),
           scheduledOn: start,
           scheduleEnd: end,
           schedMode: "range",
@@ -175,6 +182,7 @@ export function SlideOverInfoTabEditView({
         <DueDateCell
           type={draft.type}
           value={draft.dueDate}
+          minDate={resolveDueDateFloor(draft)}
           onSave={(dueDate) => onDraftChange({ dueDate })}
         />
       </SlideOverInfoRow>

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

@@ -12,6 +12,7 @@ import type {
   UploadWorkOrderMediaInput,
 } from "@/domain/work-orders/use-cases/use-work-order-mutations";
 import {
+  hasCompletionMediaGallery,
   isCompletionSurfaceMedia,
   isExtrasSurfaceMedia,
   type MediaSurfaceOwnership,
@@ -80,6 +81,7 @@ export function useSlideOverMediaState({
   categorizeMediaMutation,
 }: UseSlideOverMediaStateArgs) {
   const workOrderId = detailForRow?.info.id;
+  const completionHasGallery = hasCompletionMediaGallery(detailForRow?.info.type);
   const [mediaBatchPending, setMediaBatchPending] = useState(false);
   const [ownership, setOwnershipState] = useState<MediaSurfaceOwnership>(() =>
     loadOwnership(workOrderId),
@@ -116,16 +118,16 @@ export function useSlideOverMediaState({
     useMediaUploadSession(detailForRow, persistCompletionUpload);
 
   const completionMedia = useMemo(
-    () => uploads.filter((item) => isCompletionSurfaceMedia(item, ownership)),
+    () => uploads.filter((item) => isCompletionSurfaceMedia(item, ownership, completionHasGallery)),
-    [uploads, ownership],
+    [uploads, ownership, completionHasGallery],
   );
 
   const extrasUploads = useMemo(
     () =>
       boardMediaItemsToMediaFiles(detailForRow?.media ?? []).filter((item) =>
-        isExtrasSurfaceMedia(item, ownership),
+        isExtrasSurfaceMedia(item, ownership, completionHasGallery),
       ),
-    [detailForRow?.media, ownership],
+    [detailForRow?.media, ownership, completionHasGallery],
   );
 
   const hasLocalUploading = uploads.some((item) => item.uploadStatus === "uploading");

src/app/(protected)/workorders/_components/list/table/build-inline-draft-create-input.ts

@@ -28,6 +28,7 @@ export function buildInlineDraftCreateInput(
     scheduledOn: draft.scheduledOn,
     dueDate: draft.dueDate,
     pm: draft.pm,
+    serviceId: null,
     extraServices: draft.extraServices ?? [],
     avetaRequired: Boolean(draft.avetaRequired),
     pmNote: draft.serviceNotes ?? "",

src/app/(protected)/workorders/_components/list/table/cells/date-cell.tsx

@@ -25,6 +25,8 @@ type DateCellProps = {
   onClear?: () => void;
   /** Screen-reader-only status appended inside the button so the accessible name keeps the visible date and adds durable state. */
   srStatusSuffix?: string;
+  /** Earliest selectable day in the date calendar (SH-356). */
+  minDate?: string;
 };
 
 export function DateCell({
@@ -41,6 +43,7 @@ export function DateCell({
   onSaveRange,
   onClear,
   srStatusSuffix,
+  minDate,
 }: DateCellProps) {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const open = Boolean(anchorEl);
@@ -154,6 +157,7 @@ export function DateCell({
         ) : (
           <MiniCalendar
             value={value}
+            minDate={minDate}
             onChange={(d) => {
               onSave(d);
               setAnchorEl(null);

src/app/(protected)/workorders/_components/list/table/cells/due-date-calendar-dialog.tsx

@@ -8,6 +8,7 @@ type DueDateCalendarDialogProps = {
   onOpenChange: (open: boolean) => void;
   value: string;
   onSave: (iso: string) => void;
+  minDate?: string;
 };
 
 /**
@@ -19,6 +20,7 @@ export function DueDateCalendarDialog({
   onOpenChange,
   value,
   onSave,
+  minDate,
 }: DueDateCalendarDialogProps) {
   return (
     <Dialog
@@ -44,6 +46,7 @@ export function DueDateCalendarDialog({
         <div className="flex justify-center">
           <MiniCalendar
             value={value}
+            minDate={minDate}
             onChange={(iso) => {
               onSave(iso);
               onOpenChange(false);

src/app/(protected)/workorders/_components/list/table/cells/due-date-cell.tsx

@@ -16,6 +16,8 @@ type DueDateCellProps = {
    * read by colour alone.
    */
   pastDue?: boolean;
+  /** Schedule On floor: earlier days are not selectable (SH-356). */
+  minDate?: string;
   onSave: (date: string) => void;
 };
 
@@ -29,6 +31,7 @@ export function DueDateCell({
   q,
   highlight,
   pastDue = false,
+  minDate,
   onSave,
 }: DueDateCellProps) {
   const [open, setOpen] = useState(false);
@@ -40,6 +43,7 @@ export function DueDateCell({
         q={q}
         highlight={highlight}
         onSave={onSave}
+        minDate={minDate}
         srStatusSuffix={pastDue ? "Past due" : undefined}
       />
     );
@@ -87,7 +91,13 @@ export function DueDateCell({
           style={{ color: "var(--muted-foreground)" }}
         />
       </button>
-      <DueDateCalendarDialog open={open} onOpenChange={setOpen} value={value} onSave={onSave} />
+      <DueDateCalendarDialog
+        minDate={minDate}
+        open={open}
+        onOpenChange={setOpen}
+        value={value}
+        onSave={onSave}
+      />
     </>
   );
 }

src/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell.tsx

@@ -3,6 +3,12 @@ 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 {
+  WO_NUMBER_DOWNGRADE_MESSAGE,
+  WO_NUMBER_FORMAT_MESSAGE,
+  isValidBoardWoNumber,
+  isWoNumberDowngrade,
+} from "@/domain/work-orders/utils/wo-number-input";
 import { EditableWONumberInput } from "./editable-wo-number-input";
 import { HighlightText } from "./highlight-text";
 import { AddOnPill, CarriedOverCounterPill, RescheduleCounterPill } from "./wo-counter-pills";
@@ -22,8 +28,13 @@ type EditableWONumberCellProps = {
   onSave: (v: string) => void;
   onDuplicateFound?: (existing: WorkOrderTableRow) => void;
   locked?: boolean;
+  /** Empty-state label for create flows; renders with a persistent required asterisk. */
+  requiredPlaceholder?: string;
 };
 
+/** Inline-create rows pass this id; their number is draft state, never a saved WO number. */
+const UNSAVED_DRAFT_ID = "draft";
+
 async function resolveDuplicateWoNumber(
   draft: string,
   allOrders: WorkOrderTableRow[],
@@ -34,6 +45,28 @@ async function resolveDuplicateWoNumber(
   return remote && String(remote.id) !== String(currentId) ? remote : undefined;
 }
 
+function EmptyWoNumberLabel({
+  value,
+  q,
+  requiredPlaceholder,
+}: {
+  value: string;
+  q?: string;
+  requiredPlaceholder?: string;
+}) {
+  if (value) {
+    return <HighlightText text={value} q={q} />;
+  }
+  if (!requiredPlaceholder) {
+    return "-";
+  }
+  return (
+    <span className="font-sans text-[13px] font-normal">
+      {requiredPlaceholder} <span style={{ color: "var(--destructive)" }}>*</span>
+    </span>
+  );
+}
+
 export function EditableWONumberCell({
   value,
   rescheduleCount,
@@ -49,6 +82,7 @@ export function EditableWONumberCell({
   onSave,
   onDuplicateFound,
   locked = false,
+  requiredPlaceholder,
 }: EditableWONumberCellProps) {
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(value);
@@ -63,8 +97,14 @@ export function EditableWONumberCell({
       setEditing(false);
       return;
     }
-    if (draft.length !== 11) {
+    if (!isValidBoardWoNumber(draft)) {
-      toast("Work order number must be exactly 11 digits");
+      toast(WO_NUMBER_FORMAT_MESSAGE);
+      return;
+    }
+    if (String(currentId) !== UNSAVED_DRAFT_ID && isWoNumberDowngrade(value, draft)) {
+      toast.error(WO_NUMBER_DOWNGRADE_MESSAGE);
+      setDraft(value);
+      setEditing(false);
       return;
     }
     setIsChecking(true);
@@ -97,14 +137,14 @@ export function EditableWONumberCell({
 
   const handleBlur = () => {
     if (isChecking) return;
-    if (draft !== value && draft.length === 11) {
+    if (draft !== value && isValidBoardWoNumber(draft)) {
       commit();
       return;
     }
     setEditing(false);
   };
 
-  const invalid = editing && draft.length > 0 && draft.length !== 11;
+  const invalid = editing && draft.length > 0 && !isValidBoardWoNumber(draft);
 
   if (locked) {
     return (
@@ -162,7 +202,7 @@ export function EditableWONumberCell({
             padding: "2px 4px",
           }}
         >
-          {value ? <HighlightText text={value} q={q} /> : "-"}
+          <EmptyWoNumberLabel value={value} q={q} requiredPlaceholder={requiredPlaceholder} />
         </span>
       )}
       <AddOnPill when={isAddOn} />

src/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-input.tsx

@@ -1,3 +1,5 @@
+import { sanitizeBoardWoNumberInput } from "@/domain/work-orders/utils/wo-number-input";
+
 type EditableWONumberInputProps = {
   draft: string;
   invalid: boolean;
@@ -21,9 +23,8 @@ export function EditableWONumberInput({
     <input
       autoFocus
       disabled={isChecking}
-      inputMode="numeric"
       value={draft}
-      onChange={(event) => onChange(event.target.value.replace(/\D/g, "").slice(0, 11))}
+      onChange={(event) => onChange(sanitizeBoardWoNumberInput(event.target.value))}
       onFocus={(event) => event.target.select()}
       onClick={(event) => event.stopPropagation()}
       onKeyDown={(event) => {
@@ -36,7 +37,7 @@ export function EditableWONumberInput({
         }
       }}
       onBlur={onBlur ?? onCommit}
-      placeholder="12345678901"
+      placeholder="e.g. 12345678901 or SH00001"
       aria-label="Work order number"
       aria-invalid={invalid}
       className="font-mono focus:outline-none"

src/app/(protected)/workorders/_components/list/table/cells/pm-type-picker-popover.tsx

@@ -39,7 +39,7 @@ export function PmTypePickerPopover({
           autoFocus
           value={search}
           onChange={(e) => onSearchChange(e.target.value)}
-          placeholder="Search PM type…"
+          placeholder="Search service…"
           className="w-full rounded border border-border bg-[var(--color-bg-surface)] px-2 py-1 text-xs text-[var(--color-text-primary)] focus:outline-none"
         />
       </div>

src/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-section.tsx

@@ -7,6 +7,7 @@ type SiteDialogPocSectionProps = {
   pocNotes: string;
   additionalContacts: WorkOrderAdditionalContact[];
   showPrimaryErrors?: boolean;
+  primaryRequired?: boolean;
   onPocNameChange: (value: string) => void;
   onPocPhoneChange: (value: string) => void;
   onPocNotesChange: (value: string) => void;
@@ -19,6 +20,7 @@ export function SiteDialogPocSection({
   pocNotes,
   additionalContacts,
   showPrimaryErrors = false,
+  primaryRequired = false,
   onPocNameChange,
   onPocPhoneChange,
   onPocNotesChange,
@@ -31,6 +33,7 @@ export function SiteDialogPocSection({
       pocNotes={pocNotes}
       additionalContacts={additionalContacts}
       showPrimaryErrors={showPrimaryErrors}
+      primaryRequired={primaryRequired}
       onPocNameChange={onPocNameChange}
       onPocPhoneChange={onPocPhoneChange}
       onPocNotesChange={onPocNotesChange}

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

@@ -86,7 +86,7 @@ export function SiteDialog({
 
         <fieldset disabled={viewOnly} className="mt-3 space-y-3 border-0 p-0">
           <div>
-            <FieldLabel>Site</FieldLabel>
+            <FieldLabel required={createMode}>Site</FieldLabel>
             <WizardFieldSelect
               value={s.locId}
               placeholder="Select site …"
@@ -130,6 +130,7 @@ export function SiteDialog({
             pocNotes={s.notes}
             additionalContacts={s.extraContacts}
             showPrimaryErrors={createMode && s.showErrors}
+            primaryRequired={createMode}
             onPocNameChange={s.setPn}
             onPocPhoneChange={s.setPp}
             onPocNotesChange={s.setNotes}

src/app/(protected)/workorders/_components/list/table/cells/status-cell.tsx

@@ -9,10 +9,10 @@ import {
   tableRowToClosabilityInput,
 } from "@/domain/work-orders/utils/wo-closability";
 import {
-  BOARD_INLINE_STATUSES,
   PAST_DUE_BADGE_TOOLTIP,
   PAST_DUE_POPOVER_BODY,
   PAST_DUE_RESCHEDULE_CTA,
+  getInlineStatusTransitions,
   getStatusOptionState,
 } from "@/domain/work-orders/utils/wo-lifecycle-transitions";
 import { HoverChevron } from "./hover-chevron";
@@ -27,6 +27,7 @@ type StatusCellProps = {
   onPastDueAttempt?: () => void;
   onRequestComplete?: () => void;
   readOnly?: boolean;
+  /** Explicit list for inline create; existing WOs derive valid transitions from `wo.status`. */
   statusOptions?: readonly WizardWOStatus[];
 };
 
@@ -128,10 +129,11 @@ export function StatusCell({
   onPastDueAttempt,
   onRequestComplete,
   readOnly = false,
-  statusOptions = BOARD_INLINE_STATUSES,
+  statusOptions,
 }: StatusCellProps) {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const closabilityGaps = rowClosabilityGaps(wo);
+  const options = statusOptions ?? getInlineStatusTransitions(wo.status);
 
   if (readOnly) {
     return <ReadOnlyStatusLabel status={wo.status} />;
@@ -169,7 +171,7 @@ export function StatusCell({
         onClick={(e) => e.stopPropagation()}
         slotProps={{ paper: { className: "min-w-[190px] rounded-lg border border-border p-1" } }}
       >
-        {statusOptions.map((status) => {
+        {options.map((status) => {
           const option = getStatusOptionState(wo, status, closabilityGaps);
 
           return (

src/app/(protected)/workorders/_components/list/table/use-wo-table-row-handlers.ts

@@ -9,6 +9,7 @@ import { shouldNotifyCrossWeek } from "@/domain/work-orders/utils/should-notify-
 import type { ReturnTypeOfUseWorkOrdersTableData } from "./wo-table-types";
 import { rescheduleNotify, weekMoveNotify } from "./reschedule-notify";
 import type { WoTableRowHandlers } from "./wo-table-row";
+import { clearDueDateBeforeSchedule } from "@/domain/work-orders/utils/due-date-floor";
 
 function revealOrNotifyScheduledDay(args: {
   id: string | number;
@@ -31,6 +32,35 @@ function revealOrNotifyScheduledDay(args: {
   revealScheduledRow(id);
 }
 
+type DragHandlersArgs = Pick<
+  ReturnTypeOfUseWorkOrdersTableData,
+  "dragState" | "setDragViz" | "reorderRows" | "endDrag"
+>;
+
+function createDragHandlers({ dragState, setDragViz, reorderRows, endDrag }: DragHandlersArgs) {
+  return {
+    onDragStart: (id: string | number) => {
+      dragState.current = { dragId: id, overId: null };
+      setDragViz({ dragId: id, overId: null });
+    },
+    onDragOver: (id: string | number) => {
+      const did = dragState.current.dragId;
+      if (did && did !== id && dragState.current.overId !== id) {
+        dragState.current.overId = id;
+        setDragViz((v) => ({ ...v, overId: id }));
+      }
+    },
+    onDrop: () => {
+      const { dragId, overId } = dragState.current;
+      if (dragId && overId) {
+        reorderRows(dragId, overId);
+      }
+      endDrag();
+    },
+    onDragEnd: endDrag,
+  };
+}
+
 type UseWoTableRowHandlersOptions = {
   tableData: ReturnTypeOfUseWorkOrdersTableData;
   weekMonday: string;
@@ -101,8 +131,11 @@ export function useWoTableRowHandlers({
       onPatch: (id, patch, options) => {
         onPatch(id, patch, options);
       },
-      onScheduleDate: (id: string | number, date: string) => {
+      onScheduleDate: (id: string | number, date: string, dueDate?: string) => {
-        onPatch(id, applySchedulePatch(date, false));
+        onPatch(id, {
+          ...applySchedulePatch(date, false),
+          ...clearDueDateBeforeSchedule(dueDate, date),
+        });
         revealOrNotifyScheduledDay({
           id,
           date,
@@ -111,8 +144,11 @@ export function useWoTableRowHandlers({
           revealScheduledRow,
         });
       },
-      onScheduleRange: (id: string | number, start: string, end: string) => {
+      onScheduleRange: (id: string | number, start: string, end: string, dueDate?: string) => {
-        onPatch(id, applyScheduleRangePatch(start, end));
+        onPatch(id, {
+          ...applyScheduleRangePatch(start, end),
+          ...clearDueDateBeforeSchedule(dueDate, start),
+        });
         revealOrNotifyScheduledDay({
           id,
           date: start,
@@ -121,7 +157,7 @@ export function useWoTableRowHandlers({
           revealScheduledRow,
         });
       },
-      onScheduleWeek: (id: string | number, week: string) => {
+      onScheduleWeek: (id: string | number, week: string, dueDate?: string) => {
         const isClear = week === "";
         onPatch(
           id,
@@ -135,6 +171,7 @@ export function useWoTableRowHandlers({
                 schedMode: "week",
                 dayGroup: "",
                 dayLabel: "",
+                ...clearDueDateBeforeSchedule(dueDate, week),
               },
         );
         weekMoveNotify(week, {
@@ -153,25 +190,12 @@ export function useWoTableRowHandlers({
       onRequestComplete,
       onPastDueAttempt: (id: string | number) => onScheduleHighlight(id),
       onReorder: reorderRows,
-      onDragStart: (id: string | number) => {
+      ...createDragHandlers({
-        dragStateRef.current = { dragId: id, overId: null };
+        dragState: dragStateRef,
-        setDragViz({ dragId: id, overId: null });
+        setDragViz,
-      },
+        reorderRows,
-      onDragOver: (id: string | number) => {
+        endDrag,
-        const did = dragStateRef.current.dragId;
+      }),
-        if (did && did !== id && dragStateRef.current.overId !== id) {
-          dragStateRef.current.overId = id;
-          setDragViz((v) => ({ ...v, overId: id }));
-        }
-      },
-      onDrop: () => {
-        const { dragId, overId } = dragStateRef.current;
-        if (dragId && overId) {
-          reorderRows(dragId, overId);
-        }
-        endDrag();
-      },
-      onDragEnd: endDrag,
     }),
     [
       tableData,

src/app/(protected)/workorders/_components/list/table/wo-table-cols.ts

@@ -11,9 +11,10 @@ export const WO_TABLE_COLS = [
   { key: "vendor", label: "VENDOR", w: 184 },
   { key: "appt", label: "APPT TIME", w: 128 },
   { key: "status", label: "STATUS", w: 148 },
+  // Completed Date gates the Completion Document, so it sits between Status and Comp Doc.
+  { key: "completed", label: "COMPLETED DATE", w: 130 },
   { key: "doc", label: "COMP DOC", w: 84 },
   { key: "uplift", label: "UPLIFT", w: 108 },
-  { key: "completed", label: "COMPLETED DATE", w: 130 },
   { key: "actions", label: "", w: 100 },
 ] as const;
 

src/app/(protected)/workorders/_components/list/table/wo-table-head.tsx

@@ -1,4 +1,5 @@
 import { WO_TABLE_COLS } from "./wo-table-cols";
+import { WoTableHeaderLabel } from "./wo-table-header-label";
 
 export function WoTableHead() {
   return (
@@ -25,7 +26,7 @@ export function WoTableHead() {
                 borderBottom: "1px solid var(--border)",
               }}
             >
-              {col.label}
+              <WoTableHeaderLabel colKey={col.key} label={col.label} />
               {Boolean(srLabel) && <span className="sr-only">{srLabel}</span>}
             </th>
           );

src/app/(protected)/workorders/_components/list/table/wo-table-header-label.tsx

@@ -0,0 +1,39 @@
+import { Tooltip } from "@mui/material";
+import { CircleQuestionMark } from "lucide-react";
+
+import { getWoTableHeaderTooltip } from "@/domain/work-orders/constants/wo-table-header-tooltips";
+
+type WoTableHeaderLabelProps = {
+  colKey: string;
+  label: string;
+};
+
+export function WoTableHeaderLabel({ colKey, label }: WoTableHeaderLabelProps) {
+  const tooltip = getWoTableHeaderTooltip(colKey);
+
+  if (!tooltip) {
+    return <>{label}</>;
+  }
+
+  return (
+    <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
+      {label}
+      <Tooltip title={tooltip} arrow placement="top">
+        <button
+          type="button"
+          aria-label={`${label} column help`}
+          style={{
+            display: "inline-flex",
+            cursor: "help",
+            color: "var(--color-text-muted)",
+            padding: 0,
+            border: 0,
+            background: "transparent",
+          }}
+        >
+          <CircleQuestionMark size={13} aria-hidden="true" />
+        </button>
+      </Tooltip>
+    </span>
+  );
+}

src/app/(protected)/workorders/_components/list/table/wo-table-inline-identity-cells.tsx

@@ -89,6 +89,7 @@ export function WoTableInlineIdentityCells({
               allOrders={allRows as never[]}
               onSave={(v) => onPatch({ woNumber: v })}
               onDuplicateFound={onDuplicateFound}
+              requiredPlaceholder="Insert WO #"
             />
             <AddOnOverrideToggle
               checked={draft.isAddOnOverride}

src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-actions.tsx

@@ -17,7 +17,7 @@ export function WoTableInlineRowActions({
   onCancel,
 }: WoTableInlineRowActionsProps) {
   return (
-    <div className="flex items-center gap-0.5">
+    <div className="flex items-center gap-0.5" style={{ minHeight: 34 }}>
       <button
         type="button"
         onClick={onSave}

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

@@ -1,4 +1,4 @@
-import type { RefObject } from "react";
+import type { ReactNode, RefObject } from "react";
 import type {
   LocationOption,
   VendorDropdownItem,
@@ -21,8 +21,13 @@ import { StatusCell } from "./cells/status-cell";
 import { TypeCell } from "./cells/type-cell";
 import { VendorCell } from "./cells/vendor-cell";
 import { toVendorTablePatch } from "@/domain/work-orders/utils/vendor-assignment-patch";
+import { InlineCreateField } from "./inline-create-field";
 import { toInlineDraftRow } from "./to-inline-draft-row";
 import { WoTableInlineIdentityCells } from "./wo-table-inline-identity-cells";
+import {
+  clearDueDateBeforeSchedule,
+  resolveDueDateFloor,
+} from "@/domain/work-orders/utils/due-date-floor";
 
 type WoTableInlineRowCellsProps = {
   draft: WorkOrderTableDraft;
@@ -43,6 +48,17 @@ type WoTableInlineRowCellsProps = {
   onRequestComplete?: () => void;
 };
 
+/** Matches the identity cells: top-aligned so field boxes and error helpers line up. */
+const INLINE_FIELD_TD_STYLE = { padding: "8px 6px 0", verticalAlign: "top" } as const;
+
+function InlineFieldCell({ children }: { children: ReactNode }) {
+  return (
+    <td className="group/cell" style={INLINE_FIELD_TD_STYLE}>
+      <InlineCreateField>{children}</InlineCreateField>
+    </td>
+  );
+}
+
 function InlineTypeSeverityCell({
   draft,
   onPatch,
@@ -51,20 +67,22 @@ function InlineTypeSeverityCell({
   onPatch: (patch: Partial<WorkOrderTableDraft>) => void;
 }) {
   return (
-    <td className="group/cell" style={{ padding: "0 14px" }}>
+    <InlineFieldCell>
       <TypeCell
         value={draft.type}
         severity={draft.severity}
         onSave={(t, sev) => onPatch({ type: t, severity: sev })}
       />
-    </td>
+    </InlineFieldCell>
   );
 }
 
 function InlineMutedDashCell() {
   return (
-    <td style={{ padding: "0 14px" }}>
+    <td style={INLINE_FIELD_TD_STYLE}>
-      <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>—</span>
+      <div className="flex items-center" style={{ minHeight: 34 }}>
+        <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>—</span>
+      </div>
     </td>
   );
 }
@@ -81,18 +99,18 @@ function InlineScheduleOnCell({
   const hasSchedule =
     Boolean(draft.scheduledOn) || Boolean(draft.targetWeek) || Boolean(draft.scheduleEnd);
   return (
-    <td className="group/cell" style={{ padding: "0 14px" }}>
+    <InlineFieldCell>
       <DateCell
         value={draft.scheduledOn}
         allowWeekMode
         targetWeek={draft.targetWeek}
         defaultMode={weekDefault ? "week" : "date"}
-        highlight={!draft.scheduledOn && !draft.targetWeek}
         scheduleEnd={draft.scheduleEnd}
         schedMode={draft.schedMode}
         onSave={(date) =>
           onPatch(
             withAutoScheduleStatus(draft, {
+              ...clearDueDateBeforeSchedule(draft.dueDate, date),
               scheduledOn: date,
               scheduleWeekOnly: false,
               targetWeek: "",
@@ -105,6 +123,7 @@ function InlineScheduleOnCell({
         onSaveWeek={(week) =>
           onPatch(
             withAutoScheduleStatus(draft, {
+              ...clearDueDateBeforeSchedule(draft.dueDate, week),
               scheduledOn: "",
               targetWeek: week,
               scheduleWeekOnly: true,
@@ -117,6 +136,7 @@ function InlineScheduleOnCell({
         onSaveRange={(start, end) =>
           onPatch(
             withAutoScheduleStatus(draft, {
+              ...clearDueDateBeforeSchedule(draft.dueDate, start),
               scheduledOn: start,
               scheduleEnd: end,
               schedMode: "range",
@@ -142,7 +162,7 @@ function InlineScheduleOnCell({
             : undefined
         }
       />
-    </td>
+    </InlineFieldCell>
   );
 }
 
@@ -184,26 +204,26 @@ export function WoTableInlineRowCells({
 
       <InlineTypeSeverityCell draft={draft} onPatch={onPatch} />
 
-      <td className="group/cell" style={{ padding: "0 14px" }}>
+      <InlineFieldCell>
         <AssignedToCell
           dispatcherId={draft.dispatcherId}
           users={users}
-          highlight={!draft.dispatcherId}
           onSave={(id) => {
             onPatch({ dispatcherId: id, status: draft.status || "Incomplete" });
           }}
         />
-      </td>
+      </InlineFieldCell>
       <InlineScheduleOnCell draft={draft} weekDefault={weekDefault} onPatch={onPatch} />
 
-      <td className="group/cell" style={{ padding: "0 14px" }}>
+      <InlineFieldCell>
         <DueDateCell
           type={draft.type}
           value={draft.dueDate}
+          minDate={resolveDueDateFloor(draft)}
           onSave={(date) => onPatch({ dueDate: date })}
         />
-      </td>
+      </InlineFieldCell>
-      <td className="group/cell" style={{ padding: "0 14px" }}>
+      <InlineFieldCell>
         <PMTypeCell
           value={draft.pm}
           pmTypes={pmTypes}
@@ -221,8 +241,8 @@ export function WoTableInlineRowCells({
             })
           }
         />
-      </td>
+      </InlineFieldCell>
-      <td className="group/cell" style={{ padding: "0 14px" }}>
+      <InlineFieldCell>
         <VendorCell
           vendorId={draft.vendorId}
           company={draft.company}
@@ -231,8 +251,8 @@ export function WoTableInlineRowCells({
           vendors={vendors}
           onSave={(p) => onPatch(toVendorTablePatch(p))}
         />
-      </td>
+      </InlineFieldCell>
-      <td className="group/cell" style={{ padding: "0 14px" }}>
+      <InlineFieldCell>
         <ApptTimeCell
           apptTime={
             draft.apptStart ? `${draft.apptStart}${draft.apptEnd ? ` – ${draft.apptEnd}` : ""}` : ""
@@ -242,8 +262,8 @@ export function WoTableInlineRowCells({
             onPatch({ apptStart: start ?? "", apptEnd: end ?? "" });
           }}
         />
-      </td>
+      </InlineFieldCell>
-      <td className="group/cell" style={{ padding: "0 14px" }}>
+      <InlineFieldCell>
         <StatusCell
           wo={draftRow as never}
           statusOptions={CREATION_INLINE_STATUSES}
@@ -251,7 +271,7 @@ export function WoTableInlineRowCells({
           onOpenSlideOver={() => {}}
           onRequestComplete={onRequestComplete}
         />
-      </td>
+      </InlineFieldCell>
 
       <InlineMutedDashCell />
       <InlineMutedDashCell />

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

@@ -115,15 +115,17 @@ export function WoTableInlineRow({
         pointerEvents: saving ? "none" : undefined,
       }}
     >
-      <td style={{ padding: "0 0 0 6px" }} />
+      <td style={{ padding: "8px 0 0 6px", verticalAlign: "top" }} />
 
-      <td style={{ padding: "0 2px 0 8px" }}>
+      <td style={{ padding: "8px 2px 0 8px", verticalAlign: "top" }}>
-        <Flag
+        <div className="flex items-center" style={{ minHeight: 34 }}>
-          size={14}
+          <Flag
-          strokeWidth={1.75}
+            size={14}
-          aria-hidden="true"
+            strokeWidth={1.75}
-          style={{ color: "var(--color-border)" }}
+            aria-hidden="true"
-        />
+            style={{ color: "var(--color-border)" }}
+          />
+        </div>
       </td>
 
       <WoTableInlineRowCells
@@ -145,7 +147,7 @@ export function WoTableInlineRow({
         onRequestComplete={() => setConfirmComplete(true)}
       />
 
-      <td style={{ padding: "0 4px" }}>
+      <td style={{ padding: "8px 4px 0", verticalAlign: "top" }}>
         <WoTableInlineRowActions
           canSave={canSave}
           saving={saving}

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

@@ -16,6 +16,7 @@ import { EditableWONumberCell } from "./cells/editable-wo-number-cell";
 import { SiteCell } from "./cells/site-cell";
 import { TypeCell } from "./cells/type-cell";
 import type { WoTableRowHandlers } from "./wo-table-row";
+import { resolveDueDateFloor } from "@/domain/work-orders/utils/due-date-floor";
 
 type WoTableRowCellsProps = {
   row: WorkOrderTableRow;
@@ -146,9 +147,9 @@ export function WoTableRowCells({
           targetWeek={row.targetWeek}
           scheduleEnd={row.scheduleEnd}
           schedMode={row.schedMode}
-          onSave={(date) => handlers.onScheduleDate(row.id, date)}
+          onSave={(date) => handlers.onScheduleDate(row.id, date, row.dueDate)}
-          onSaveWeek={(week) => handlers.onScheduleWeek(row.id, week)}
+          onSaveWeek={(week) => handlers.onScheduleWeek(row.id, week, row.dueDate)}
-          onSaveRange={(start, end) => handlers.onScheduleRange(row.id, start, end)}
+          onSaveRange={(start, end) => handlers.onScheduleRange(row.id, start, end, row.dueDate)}
           onClear={hasSchedule && !viewOnly ? () => handlers.onScheduleWeek(row.id, "") : undefined}
         />
       </td>
@@ -163,6 +164,7 @@ export function WoTableRowCells({
           q={search}
           highlight={forceDueDateHighlight || row.isPastDue}
           pastDue={row.isPastDue}
+          minDate={resolveDueDateFloor(row)}
           onSave={(date) => onPatchRow({ dueDate: date })}
         />
       </td>

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

@@ -105,6 +105,17 @@ export function WoTableRowServiceCells({
           onRequestComplete={() => handlers.onRequestComplete?.(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>
       <td style={{ padding: "0 14px" }} onClick={(e) => e.stopPropagation()}>
         <CompDocCell
           status={row.docStatus}
@@ -126,17 +137,6 @@ export function WoTableRowServiceCells({
           }
         />
       </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>
     </>
   );
 }

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

@@ -36,9 +36,10 @@ export type WoTableRowHandlers = {
     patch: Partial<WorkOrderTableRow>,
     options?: WorkOrderTablePatchOptions,
   ) => void;
-  onScheduleDate: (id: string | number, date: string) => void;
+  /** `dueDate` is the row's current Due Date, cleared when the new schedule passes it (SH-356). */
-  onScheduleWeek: (id: string | number, week: string) => void;
+  onScheduleDate: (id: string | number, date: string, dueDate?: string) => void;
-  onScheduleRange: (id: string | number, start: string, end: string) => void;
+  onScheduleWeek: (id: string | number, week: string, dueDate?: string) => void;
+  onScheduleRange: (id: string | number, start: string, end: string, dueDate?: string) => void;
   onDuplicateFound?: (existing: WorkOrderTableRow) => void;
   onOpenSlideOver: (row: WorkOrderTableRow) => void;
   onRequestComplete?: (row: WorkOrderTableRow) => void;
@@ -77,17 +78,17 @@ function guardScheduleHandlers(
       if (!canApplyWorkOrderTablePatch(row.status, patch)) return;
       handlers.onPatch(id, patch, options);
     },
-    onScheduleDate: (id, date) => {
+    onScheduleDate: (id, date, dueDate) => {
       if (!canApplyWorkOrderTablePatch(row.status, { scheduledOn: date })) return;
-      handlers.onScheduleDate(id, date);
+      handlers.onScheduleDate(id, date, dueDate);
     },
-    onScheduleWeek: (id, week) => {
+    onScheduleWeek: (id, week, dueDate) => {
       if (!canApplyWorkOrderTablePatch(row.status, { targetWeek: week })) return;
-      handlers.onScheduleWeek(id, week);
+      handlers.onScheduleWeek(id, week, dueDate);
     },
-    onScheduleRange: (id, start, end) => {
+    onScheduleRange: (id, start, end, dueDate) => {
       if (!canApplyWorkOrderTablePatch(row.status, { scheduledOn: start })) return;
-      handlers.onScheduleRange(id, start, end);
+      handlers.onScheduleRange(id, start, end, dueDate);
     },
   };
 }

src/app/(protected)/workorders/_components/list/work-orders-list-header.tsx

@@ -5,31 +5,49 @@ import { ToolbarButton } from "@/components/ui/toolbar-button";
 
 type WorkOrdersListHeaderProps = {
   search: string;
+  /** Compact label of the active board week (e.g. "5/4–5/8"). */
+  weekLabel: string;
   onSearchChange: (value: string) => void;
   /** Omit until Advanced Search slice mounts the sheet. */
   onOpenAdvancedFilters?: () => void;
   /** Omit until wizard shell slice mounts New WO. */
   onNewWorkOrder?: () => void;
   activeFilterCount: number;
+  /** True while Advanced Filters are applied; results are global and the keyword box is inert. */
+  advancedFiltersActive?: boolean;
   isFetching?: boolean;
 };
 
 export function WorkOrdersListHeader({
   search,
+  weekLabel,
   onSearchChange,
   onOpenAdvancedFilters,
   onNewWorkOrder,
   activeFilterCount,
+  advancedFiltersActive = false,
   isFetching = false,
 }: WorkOrdersListHeaderProps) {
   return (
     <>
-      <SearchInput
+      <div className="relative">
-        value={search}
+        <SearchInput
-        onChange={onSearchChange}
+          value={search}
-        placeholder="Search this week…"
+          onChange={onSearchChange}
-        aria-label="Search work orders"
+          placeholder="Search this week…"
-      />
+          aria-label="Search work orders"
+        />
+        {/* Keyword search is scoped to the active week; make that scope visible. */}
+        {!advancedFiltersActive && search.trim() !== "" && Boolean(weekLabel) && (
+          <span
+            role="status"
+            className="absolute left-0 whitespace-nowrap text-(length:--text-xs) text-muted-foreground"
+            style={{ top: "calc(100% + 4px)" }}
+          >
+            Searching within {weekLabel}
+          </span>
+        )}
+      </div>
 
       {Boolean(onOpenAdvancedFilters) && (
         <ToolbarButton

src/app/(protected)/workorders/_components/poc/poc-contact-fields.tsx

@@ -1,3 +1,4 @@
+import { useId } from "react";
 import { Plus, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Text } from "@/components/ui/text";
@@ -23,6 +24,8 @@ type PocContactFieldsProps = {
   onAdditionalContactsChange: (contacts: WorkOrderAdditionalContact[]) => void;
   helperText?: string;
   showPrimaryErrors?: boolean;
+  /** Labels the primary name/phone inputs with a persistent required asterisk. */
+  primaryRequired?: boolean;
 };
 
 function extraNameMissing(contact: WorkOrderAdditionalContact): boolean {
@@ -135,7 +138,9 @@ export function PocContactFields({
   onAdditionalContactsChange,
   helperText,
   showPrimaryErrors = false,
+  primaryRequired = false,
 }: PocContactFieldsProps) {
+  const fieldId = useId();
   const nameMissing = showPrimaryErrors && !pocName.trim();
   const phoneMissing = showPrimaryErrors && !pocPhone.trim();
 
@@ -153,7 +158,13 @@ export function PocContactFields({
       )}
       <div className="space-y-2">
         <div>
+          {primaryRequired && (
+            <FieldLabel required htmlFor={`${fieldId}-name`}>
+              POC name
+            </FieldLabel>
+          )}
           <input
+            id={`${fieldId}-name`}
             value={pocName}
             onChange={(event) => onPocNameChange(event.target.value)}
             placeholder="POC name"
@@ -168,7 +179,13 @@ export function PocContactFields({
           </Text>
         </div>
         <div>
+          {primaryRequired && (
+            <FieldLabel required htmlFor={`${fieldId}-phone`}>
+              POC phone
+            </FieldLabel>
+          )}
           <input
+            id={`${fieldId}-phone`}
             value={pocPhone}
             onChange={(event) => onPocPhoneChange(event.target.value)}
             placeholder="POC phone"

src/app/(protected)/workorders/_components/wizard/mini-calendar.tsx

@@ -12,6 +12,8 @@ type MiniCalendarProps = {
   range?: boolean;
   rangeStart?: string;
   rangeEnd?: string;
+  /** Days before this ISO date are disabled (SH-356 Due Date floor). */
+  minDate?: string;
 };
 
 export function MiniCalendar({
@@ -20,9 +22,11 @@ export function MiniCalendar({
   range,
   rangeStart = "",
   rangeEnd = "",
+  minDate = "",
 }: MiniCalendarProps) {
   const initRaw = range ? rangeStart || value : value;
-  const init = /^\d{4}-\d{2}-\d{2}$/.test(initRaw) ? initRaw : todayIso();
+  const fallback = minDate > todayIso() ? minDate : todayIso();
+  const init = /^\d{4}-\d{2}-\d{2}$/.test(initRaw) ? initRaw : fallback;
   const [iy, im] = init.split("-").map(Number);
   const [viewY, setViewY] = useState(iy);
   const [viewM, setViewM] = useState(im);
@@ -94,6 +98,7 @@ export function MiniCalendar({
           }
           const iso = `${viewY}-${pad2(viewM)}-${pad2(day)}`;
           const isToday = iso === today;
+          const beforeMin = Boolean(minDate) && iso < minDate;
           const { bg, fg, radius, filled } = getMiniCalendarCellStyle({
             iso,
             value,
@@ -107,8 +112,9 @@ export function MiniCalendar({
             <button
               key={i}
               type="button"
+              disabled={beforeMin}
               onClick={() => onChange(iso)}
-              className="text-center text-[12px] transition-colors hover:bg-[var(--color-primary-tint)]"
+              className="text-center text-[12px] transition-colors hover:bg-[var(--color-primary-tint)] disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40"
               style={{
                 height: 26,
                 borderRadius: radius,

src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx

@@ -82,7 +82,10 @@ export function NewWoWizard({
                 locationDetail={wizard.locationDetail}
                 locationDetailLoading={wizard.locationDetailLoading}
                 locationDetailError={wizard.locationDetailError}
-                services={wizard.problems.map((p) => ({ id: p.id, value: p.value }))}
+                services={wizard.services.map((service) => ({
+                  id: service.id,
+                  value: service.name,
+                }))}
                 showErrors={wizard.showErrors}
                 svcOpen={wizard.svcOpen}
                 onSvcOpenChange={wizard.setSvcOpen}

src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-controller.ts

@@ -2,8 +2,6 @@ import { useEffect } from "react";
 
 import { guardDialogClose } from "@/lib/dialog-guard";
 
-import { useDropdownOptionsByCategory } from "@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category";
-
 import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
 import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
 
@@ -16,6 +14,7 @@ import { useCreateWorkOrderFromWizard } from "@/domain/work-orders/use-cases/use
 import { useNewWoWizardDraft } from "@/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-draft";
 import { useWizardDuplicateActions } from "@/app/(protected)/workorders/_components/wizard/use-wizard-duplicate-actions";
 import { useWizardPocAutofill } from "@/app/(protected)/workorders/_components/wizard/use-wizard-poc-autofill";
+import { useServicesForWorkOrderType } from "@/domain/services/use-cases/use-services-for-work-order-type";
 
 type UseNewWoWizardControllerArgs = {
   open: boolean;
@@ -32,7 +31,7 @@ export function useNewWoWizardController({
   const draftState = useNewWoWizardDraft(open);
 
   const { data: locations = [] } = useLocationSites();
-  const { data: problems = [] } = useDropdownOptionsByCategory("Problem");
+  const { data: registryServices = [] } = useServicesForWorkOrderType(draftState.draft.type);
   const {
     data: locationDetail,
     isLoading: locationDetailLoading,
@@ -78,7 +77,7 @@ export function useNewWoWizardController({
     ...draftState,
     patchDraft,
     locations,
-    problems,
+    services: registryServices,
     locationDetail,
     locationDetailLoading,
     locationDetailError,

src/app/(protected)/workorders/_components/wizard/wizard-date-field.tsx

@@ -19,6 +19,8 @@ type WizardDateFieldProps = {
   scheduleEnd?: string;
   schedMode?: WizardSchedMode;
   onChangeRange?: (start: string, end: string) => void;
+  /** Earliest selectable day in the date calendar (SH-356). */
+  minDate?: string;
 };
 
 function fieldLabel(args: {
@@ -49,6 +51,7 @@ export function WizardDateField({
   scheduleEnd = "",
   schedMode,
   onChangeRange,
+  minDate,
 }: WizardDateFieldProps) {
   const { anchorEl, open, setAnchor, close } = useMenuAnchor();
   const allowRange = Boolean(allowWeekMode && onChangeRange);
@@ -127,6 +130,7 @@ export function WizardDateField({
         ) : (
           <MiniCalendar
             value={value}
+            minDate={minDate}
             onChange={(iso) => {
               onChange(iso);
               close();

src/app/(protected)/workorders/_components/wizard/wizard-due-date-field.tsx

@@ -10,6 +10,8 @@ type WizardDueDateFieldProps = {
   value: string;
   placeholder: string;
   onChange: (iso: string) => void;
+  /** Schedule On floor: earlier days are not selectable (SH-356). */
+  minDate?: string;
 };
 
 /**
@@ -21,11 +23,19 @@ export function WizardDueDateField({
   value,
   placeholder,
   onChange,
+  minDate,
 }: WizardDueDateFieldProps) {
   const [open, setOpen] = useState(false);
 
   if (type !== "Emergency") {
-    return <WizardDateField value={value} placeholder={placeholder} onChange={onChange} />;
+    return (
+      <WizardDateField
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        minDate={minDate}
+      />
+    );
   }
 
   return (
@@ -63,7 +73,13 @@ export function WizardDueDateField({
         </span>
         <ChevronDown size={13} className="shrink-0" style={{ color: "var(--muted-foreground)" }} />
       </button>
-      <DueDateCalendarDialog open={open} onOpenChange={setOpen} value={value} onSave={onChange} />
+      <DueDateCalendarDialog
+        open={open}
+        onOpenChange={setOpen}
+        value={value}
+        onSave={onChange}
+        minDate={minDate}
+      />
     </>
   );
 }

src/app/(protected)/workorders/_components/wizard/wizard-step-location-poc-fields.tsx

@@ -26,6 +26,7 @@ export function WizardStepLocationPocFields({
       onAdditionalContactsChange={(contacts) => onUpdate("additionalContacts", contacts)}
       helperText="Auto-filled from records — edit if outdated"
       showPrimaryErrors={showErrors && pocIncomplete}
+      primaryRequired
     />
   );
 }

src/app/(protected)/workorders/_components/wizard/wizard-step-location-service-select.tsx

@@ -32,8 +32,10 @@ export function WizardStepLocationServiceSelect({
     nextPm !== draft.pm ? { vendorId: "", vendorName: "", techPhone: "" } : {};
 
   const selectSvc = (p: string) => {
+    const selected = services.find((service) => service.value === p);
     onPatch({
       pm: p,
+      serviceId: selected?.id ?? null,
       extraServices: [],
       ...clearVendorIfPrimaryChanged(p),
     });
@@ -48,7 +50,7 @@ export function WizardStepLocationServiceSelect({
         icon={
           <Droplets size={16} className="shrink-0" style={{ color: "var(--muted-foreground)" }} />
         }
-        searchPlaceholder="Search PM type…"
+        searchPlaceholder="Search services…"
         options={services.map((s) => {
           const Icon = getPmTypeIcon(s.value);
           return {

src/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule.tsx

@@ -29,6 +29,10 @@ import {
 import { WizardSeverityPicker } from "@/app/(protected)/workorders/_components/wizard/wizard-severity-picker";
 import { CheckCircle2, Clock, Flame, Users, Wrench, Zap } from "lucide-react";
 import type { ElementType } from "react";
+import {
+  clearDueDateBeforeSchedule,
+  resolveDueDateFloor,
+} from "@/domain/work-orders/utils/due-date-floor";
 
 const WO_TYPE_ICONS: Record<WOType, ElementType> = {
   PM: Wrench,
@@ -165,6 +169,7 @@ function WizardTypeScheduleDates({ draft, onUpdate, onPatch }: WizardTypeSchedul
           onChange={(iso) =>
             onPatch(
               withAutoScheduleStatus(draft, {
+                ...clearDueDateBeforeSchedule(draft.dueDate, iso),
                 scheduledOn: iso,
                 scheduleWeekOnly: false,
                 scheduleEnd: "",
@@ -177,6 +182,7 @@ function WizardTypeScheduleDates({ draft, onUpdate, onPatch }: WizardTypeSchedul
           onChangeWeek={(w) =>
             onPatch(
               withAutoScheduleStatus(draft, {
+                ...clearDueDateBeforeSchedule(draft.dueDate, w),
                 scheduledOn: w,
                 scheduleWeekOnly: Boolean(w),
                 scheduleEnd: "",
@@ -189,6 +195,7 @@ function WizardTypeScheduleDates({ draft, onUpdate, onPatch }: WizardTypeSchedul
           onChangeRange={(s, e) =>
             onPatch(
               withAutoScheduleStatus(draft, {
+                ...clearDueDateBeforeSchedule(draft.dueDate, s),
                 scheduledOn: s,
                 scheduleEnd: e,
                 schedMode: "range",
@@ -211,6 +218,7 @@ function WizardTypeScheduleDates({ draft, onUpdate, onPatch }: WizardTypeSchedul
         <WizardDueDateField
           type={draft.type}
           value={draft.dueDate}
+          minDate={resolveDueDateFloor(draft)}
           placeholder="No due date"
           onChange={(iso) => onUpdate("dueDate", iso)}
         />
@@ -262,9 +270,23 @@ export function WizardStepTypeSchedule({
         <WoTypePicker
           selected={draft.type}
           onSelect={(t) => {
+            const typeChanged = t !== draft.type;
             onPatch({
               type: t,
               severity: nextSeverityForType(draft.type, t, draft.severity),
+              // A registry service is scoped to its work-order type, so a service picked
+              // under the previous type fails backend ResolveServiceAsync (SH-187/#131).
+              // Clear the service (and its vendor, filtered by the service) on a type change.
+              ...(typeChanged
+                ? {
+                    pm: "",
+                    serviceId: null,
+                    extraServices: [],
+                    vendorId: "",
+                    vendorName: "",
+                    techPhone: "",
+                  }
+                : {}),
             });
           }}
         />

src/app/(protected)/workorders/_hooks/use-work-orders-board-source.ts

@@ -33,7 +33,8 @@ export function useWorkOrdersBoardSource(filters: FiltersReturn): WorkOrdersBoar
     () =>
       buildResolvedBoardSearchParams({
         advApplied: filters.advApplied,
-        search: filters.search,
+        // Advanced Filters are global by design; the week-scoped keyword box has no effect.
+        search: "",
         page: filters.page,
         pageSize: filters.pageSize,
         sortBy: filters.sortBy,
@@ -43,7 +44,6 @@ export function useWorkOrdersBoardSource(filters: FiltersReturn): WorkOrdersBoar
       }),
     [
       filters.advApplied,
-      filters.search,
       filters.page,
       filters.pageSize,
       filters.sortBy,

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

@@ -8,6 +8,7 @@ import {
 } 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 { shouldCompleteAfterCompletionDoc } from "@/domain/work-orders/utils/completion-doc-auto-complete";
 import {
   patchWorkOrderAsCanceled,
   patchWorkOrderAsCompleted,
@@ -112,7 +113,17 @@ export function useWorkOrdersListPage() {
       generatedAt: data.generatedAt,
     };
     setCompletionDocs((prev) => ({ ...prev, [String(row.id)]: nextData }));
-    await patchFieldAsync(row.id, { docStatus: status });
+    const saved = await patchFieldAsync(row.id, { docStatus: status });
+    if (saved.kind !== "board" || !shouldCompleteAfterCompletionDoc(status, saved.row)) {
+      return;
+    }
+    try {
+      // Generation is the one automatic completion — no confirmation dialog.
+      await patchFieldAsync(row.id, { status: "Completed" }, saved.row);
+    } catch {
+      // The document is saved; the table mutation already surfaced the status error and
+      // refetched, so the WO stays in its prior status for a manual retry.
+    }
   };
 
   return {

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

@@ -43,10 +43,12 @@ export default function WorkOrdersListPage() {
         actions={
           <WorkOrdersListHeader
             search={filters.search}
+            weekLabel={filters.weekLabel}
             onSearchChange={filters.handleSearchChange}
             onOpenAdvancedFilters={() => filters.setAdvOpen(true)}
             onNewWorkOrder={() => page.setWizardOpen(true)}
             activeFilterCount={filters.activeFilterCount}
+            advancedFiltersActive={filters.advApplied != null}
             isFetching={tableData.isFetching && !tableData.isLoading}
           />
         }

src/domain/services/api/services-api.ts

@@ -11,6 +11,8 @@ import type {
   Service,
   ServiceInput,
 } from "@/domain/services/types/service";
+import { WORK_ORDER_TYPE_API } from "@/domain/work-orders/types/work-order-board";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
 
 const SERVICE_WORK_ORDER_TYPE_API = {
   PM: 2,
@@ -18,6 +20,12 @@ const SERVICE_WORK_ORDER_TYPE_API = {
   Reactive: 6,
 } as const;
 
+const TYPE_TO_API: Record<Exclude<WOType, "Overdue">, number> = {
+  PM: WORK_ORDER_TYPE_API.PM,
+  Reactive: WORK_ORDER_TYPE_API.Reactive,
+  Emergency: WORK_ORDER_TYPE_API.Emergency,
+};
+
 function toApiInput(input: ServiceInput) {
   return {
     ...input,
@@ -35,6 +43,21 @@ export const servicesApi = {
     return mapServices(handleApiResponse(data));
   },
 
+  getActive: async (): Promise<Service[]> => {
+    const data = await apiGet<unknown>(API_PATHS.services.list, {
+      searchParams: { isActive: true },
+    });
+    return mapServices(handleApiResponse(data));
+  },
+
+  getActiveForWorkOrderType: async (workOrderType: WOType): Promise<Service[]> => {
+    if (workOrderType === "Overdue") return [];
+    const data = await apiGet<unknown>(API_PATHS.services.list, {
+      searchParams: { isActive: true, workOrderType: TYPE_TO_API[workOrderType] },
+    });
+    return mapServices(handleApiResponse(data));
+  },
+
   getCompletionTemplates: async (): Promise<CompletionDocTemplateOption[]> => {
     const data = await apiGet<unknown>(API_PATHS.workOrder.completionTemplates);
     return mapCompletionDocTemplates(handleApiResponse(data));

src/domain/services/use-cases/use-services-for-work-order-type.ts

@@ -0,0 +1,25 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { servicesApi } from "@/domain/services/api/services-api";
+import type { Service } from "@/domain/services/types/service";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useServicesForWorkOrderType(
+  workOrderType: WOType | "",
+): UseQueryResult<Service[], Error> {
+  const effectiveType = workOrderType || "PM";
+  return useQuery({
+    queryKey: queryKeys.services.byWorkOrderType(effectiveType),
+    queryFn: () => servicesApi.getActiveForWorkOrderType(effectiveType),
+    enabled: effectiveType !== "Overdue",
+    staleTime: 60 * 1000,
+  });
+}
+
+export function useActiveServices(): UseQueryResult<Service[], Error> {
+  return useQuery({
+    queryKey: queryKeys.services.active(),
+    queryFn: () => servicesApi.getActive(),
+    staleTime: 60 * 1000,
+  });
+}

src/domain/vendors/api/vendors-api.ts

@@ -56,6 +56,7 @@ function buildListParams(params: VendorsListParams): Record<string, string | num
   pushRepeated(searchParams, "trades", params.trades);
   pushRepeated(searchParams, "locations", params.locations);
   pushRepeated(searchParams, "jobBuckets", params.jobBuckets);
+  pushRepeated(searchParams, "areas", params.areas);
   return searchParams;
 }
 

src/domain/vendors/mappers/vendor-mapper.ts

@@ -2,6 +2,7 @@ import type {
   Vendor,
   VendorDeactivationImpact,
   VendorDirectoryTechnician,
+  VendorFacetArea,
   VendorFacetCompany,
   VendorFacetJobBucket,
   VendorFacetLocation,
@@ -126,6 +127,8 @@ export function mapVendorListItem(raw: unknown): VendorListItem {
     tradeSpecialties: readString(item, "tradeSpecialties", "TradeSpecialties"),
     isActive: readBool(item, "isActive", "IsActive"),
     preferredContact: readPreferredContact(item, "preferredContact", "PreferredContact"),
+    areaId: readString(item, "areaId", "AreaId"),
+    areaName: readString(item, "areaName", "AreaName"),
   };
   const rawTechnicians = item.technicians ?? item.Technicians;
   const technicians = Array.isArray(rawTechnicians)
@@ -290,6 +293,14 @@ function mapFacetLocation(raw: unknown): VendorFacetLocation {
   };
 }
 
+function mapFacetArea(raw: unknown): VendorFacetArea {
+  const item = asRecord(raw);
+  return {
+    id: readString(item, "id", "Id"),
+    name: readString(item, "name", "Name"),
+  };
+}
+
 function mapFacetJobBucket(raw: unknown): VendorFacetJobBucket {
   const item = asRecord(raw);
   return {
@@ -304,6 +315,7 @@ export function mapVendorFacets(raw: unknown): VendorFacets {
   const tradesRaw = item.trades ?? item.Trades;
   const locationsRaw = item.locations ?? item.Locations;
   const jobBucketsRaw = item.jobBuckets ?? item.JobBuckets;
+  const areasRaw = item.areas ?? item.Areas;
 
   return {
     companies: Array.isArray(companiesRaw) ? companiesRaw.map(mapFacetCompany) : [],
@@ -315,6 +327,9 @@ export function mapVendorFacets(raw: unknown): VendorFacets {
           })
           .filter(Boolean)
       : [],
+    areas: Array.isArray(areasRaw)
+      ? areasRaw.map(mapFacetArea).filter((area) => area.id !== "" && area.name !== "")
+      : [],
     locations: Array.isArray(locationsRaw) ? locationsRaw.map(mapFacetLocation) : [],
     jobBuckets: Array.isArray(jobBucketsRaw) ? jobBucketsRaw.map(mapFacetJobBucket) : [],
   };

src/domain/vendors/mappers/vendor-roster-mapper.ts

@@ -92,10 +92,18 @@ export function mapVendorCompanyRoster(raw: unknown): VendorCompanyRoster {
     zip: readString(item, "zip", "Zip", "zipCode", "ZipCode"),
     googleMapsUrl: readString(item, "googleMapsUrl", "GoogleMapsUrl"),
     notes: readString(item, "notes", "Notes"),
+    areaId: readString(item, "areaId", "AreaId"),
+    areaName: readString(item, "areaName", "AreaName"),
     technicians: mapRosterTechnicians(item.technicians ?? item.Technicians),
   };
 }
 
+/** Form Area ids are strings; the API takes a positive integer id or null (Unassigned). */
+export function toBackendAreaId(value: unknown): number | null {
+  const parsed = Number(typeof value === "string" ? value.trim() : value);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+}
+
 export function mapRosterTechnicianToBackend(technician: unknown): Record<string, unknown> {
   const item = asRecord(technician);
   const payload: Record<string, unknown> = {
@@ -130,6 +138,11 @@ export function mapVendorRosterToBackend(values: unknown): Record<string, unknow
       ? techniciansRaw.map(mapRosterTechnicianToBackend)
       : [],
   };
+  // The form always round-trips its Area (id or null = Unassigned). Callers
+  // without an Area value omit it, which the API treats as "leave unchanged".
+  if ("areaId" in item || "AreaId" in item) {
+    payload.areaId = toBackendAreaId(item.areaId ?? item.AreaId);
+  }
   const rowVersion = readString(item, "rowVersion", "RowVersion");
   if (rowVersion) payload.rowVersion = rowVersion;
   return payload;
@@ -157,9 +170,12 @@ export function mapVendorRosterAdditivePatchToBackend(
     // SH-250: match the reconcile write path, which canonicalizes companyPhone.
     // Copying companyFields verbatim let additive patches send a different phone
     // shape than PUT for the same user input.
-    const companyFields = { ...patch.companyFields };
+    const companyFields: Record<string, unknown> = { ...patch.companyFields };
     if (companyFields.companyPhone !== undefined)
       companyFields.companyPhone = toCanonicalPhone(companyFields.companyPhone);
+    // An edited Area is sent as an id or an explicit null (Unassigned).
+    if (companyFields.areaId !== undefined)
+      companyFields.areaId = toBackendAreaId(companyFields.areaId);
     payload.companyFields = companyFields;
   }
   return payload;

src/domain/vendors/schemas/vendor-roster-schema.ts

@@ -54,6 +54,8 @@ const baseCompanyFields = {
   notes: z
     .string()
     .max(VENDOR_NOTES_MAX_LENGTH, `Notes must be ${VENDOR_NOTES_MAX_LENGTH} characters or fewer`),
+  // Optional stable Area id; "" means Unassigned. Admin-only to change.
+  areaId: z.string(),
   technicians: z.array(rosterTechnicianSchema),
 };
 
@@ -107,5 +109,6 @@ export const emptyVendorCompanyRosterForm: VendorCompanyRosterFormValues = {
   state: "",
   zip: "",
   notes: "",
+  areaId: "",
   technicians: [],
 };

src/domain/vendors/types/vendor.ts

@@ -30,6 +30,10 @@ export interface VendorListItem {
   tradeSpecialties: string;
   isActive: boolean;
   preferredContact: VendorPreferredContact;
+  /** Stable Area id as a string; "" when the company is Unassigned. */
+  areaId: string;
+  /** Area display name; "" when the company is Unassigned. */
+  areaName: string;
   /** Present on company-grouped directory responses; optional for legacy clients/fixtures. */
   technicians?: VendorDirectoryTechnician[];
 }
@@ -63,6 +67,8 @@ export interface VendorsListParams {
   trades?: string[];
   locations?: string[];
   jobBuckets?: string[];
+  /** Stable Area ids or the "__unassigned__" sentinel. */
+  areas?: string[];
 }
 
 export interface VendorsListResult {
@@ -95,9 +101,19 @@ export interface VendorFacetJobBucket {
   label: string;
 }
 
+/** Active Area catalogue option. `id` is the stable areas[n] filter value. */
+export interface VendorFacetArea {
+  id: string;
+  name: string;
+}
+
+/** Wire value that selects companies without an Area. */
+export const VENDOR_AREA_UNASSIGNED = "__unassigned__";
+
 export interface VendorFacets {
   companies: VendorFacetCompany[];
   trades: string[];
+  areas: VendorFacetArea[];
   locations: VendorFacetLocation[];
   jobBuckets: VendorFacetJobBucket[];
 }
@@ -147,6 +163,9 @@ export interface VendorCompanyRoster {
   zip: string;
   googleMapsUrl: string;
   notes: string;
+  /** Stable Area id as a string; "" when the company is Unassigned. */
+  areaId: string;
+  areaName: string;
   technicians: VendorRosterTechnician[];
 }
 

src/domain/vendors/use-cases/use-save-vendor-company-roster.ts

@@ -38,6 +38,7 @@ const COMPANY_FIELDS = [
   "state",
   "zip",
   "notes",
+  "areaId",
 ] as const;
 
 const TECHNICIAN_FIELDS = [

src/domain/work-orders/constants/wo-table-header-tooltips.ts

@@ -0,0 +1,17 @@
+/**
+ * Help copy for date-column headers on the work orders board table.
+ * Keyed by the `WO_TABLE_COLS` column key; only columns with copy here show a
+ * header help icon. `appt` (Appt Time) is an intentional open point — do not
+ * add it without a business-rule decision.
+ */
+export const WO_TABLE_HEADER_TOOLTIPS = {
+  sched: "The date the work is planned to happen. Setting it moves the work order to Scheduled.",
+  due: "The deadline for the work — when it must be completed by.",
+  completed: "The date the vendor actually finished the work. Required to complete the work order.",
+} as const;
+
+export function getWoTableHeaderTooltip(colKey: string): string | undefined {
+  return colKey in WO_TABLE_HEADER_TOOLTIPS
+    ? WO_TABLE_HEADER_TOOLTIPS[colKey as keyof typeof WO_TABLE_HEADER_TOOLTIPS]
+    : undefined;
+}

src/domain/work-orders/errors/board-create-errors.ts

@@ -0,0 +1,45 @@
+import { isHTTPError, isNetworkError, isTimeoutError } from "ky";
+import { mapHttpStatusToMessage } from "@/api/api-error";
+import { DISPATCH_REQUIRED_MESSAGE } from "@/domain/work-orders/errors/board-patch-errors";
+
+export const BOARD_CREATE_FAILED_MESSAGE = "Unable to create the work order. Please try again.";
+
+const DUPLICATE_WO_NUMBER_MESSAGE =
+  "This work order number is already assigned to another work order.";
+
+/** Statuses whose mapped copy is fixed product text, never the response body. */
+const FIXED_COPY_STATUSES = new Set([401, 403, 404, 500]);
+
+function readErrorCode(data: unknown): string | undefined {
+  if (typeof data !== "object" || data === null) {
+    return undefined;
+  }
+  const record = data as Record<string, unknown>;
+  const code = record.code ?? record.Code;
+  return typeof code === "string" ? code : undefined;
+}
+
+/**
+ * why: board create returns backend validation text ("siteCode is required.",
+ * "vendorId is required when setting appointment fields.") that must never reach the
+ * screen. Unknown failures fall back to generic copy, not to `error.message`.
+ */
+export function boardCreateErrorMessage(error: unknown): string {
+  if (isHTTPError(error)) {
+    const code = readErrorCode(error.data);
+    if (code === "DispatchRequired") {
+      return DISPATCH_REQUIRED_MESSAGE;
+    }
+    if (code === "DuplicateWoNumber") {
+      return DUPLICATE_WO_NUMBER_MESSAGE;
+    }
+    const status = error.response.status;
+    return FIXED_COPY_STATUSES.has(status)
+      ? mapHttpStatusToMessage(status)
+      : BOARD_CREATE_FAILED_MESSAGE;
+  }
+  if (isNetworkError(error) || isTimeoutError(error)) {
+    return error.message;
+  }
+  return BOARD_CREATE_FAILED_MESSAGE;
+}

src/domain/work-orders/errors/board-patch-errors.ts

@@ -22,10 +22,12 @@ export class BoardPatchValidationError extends Error {
   }
 }
 
+export const DISPATCH_REQUIRED_MESSAGE = "Select a vendor company before saving.";
+
 /** why: backend field names must never be exposed through user-facing board toasts. */
 export function boardPatchValidationMessage(error: BoardPatchValidationError): string {
   if (error.code === "DispatchRequired") {
-    return "Select a vendor company before saving.";
+    return DISPATCH_REQUIRED_MESSAGE;
   }
   return error.message;
 }

src/domain/work-orders/mappers/assign-wizard-service-poc-fields.ts

@@ -19,6 +19,10 @@ export function assignWizardServicePocFields(
     payload.primaryService = primaryService;
   }
 
+  if (draft.serviceId != null) {
+    payload.serviceId = draft.serviceId;
+  }
+
   const serviceNotes = trimOrUndefined(draft.pmNote);
 
   if (serviceNotes) {

src/domain/work-orders/mappers/work-order-table-row-mapper.ts

@@ -400,6 +400,7 @@ export function mapWorkOrderTableRow(raw: unknown): WorkOrderTableRow {
     locationId:
       typeof locationIdRaw === "string" || typeof locationIdRaw === "number" ? locationIdRaw : "",
     pm: readString(item, "pm", "PM", "problem", "Problem", "service", "Service", "trade", "Trade"),
+    serviceId: readNumber(item, "serviceId", "ServiceId"),
     serviceNotes: readString(item, "serviceNotes", "ServiceNotes", "pmNote", "PmNote"),
     extraServices: readStringArray(item, "extraServices", "ExtraServices"),
     vendorId: vendorIdNum != null ? String(vendorIdNum) : "",

src/domain/work-orders/types/work-order-board.ts

@@ -105,6 +105,8 @@ export interface WorkOrderBoardCreatePayload {
   trade?: string;
   /** Primary service label; persisted as board `pm`. */
   primaryService?: string;
+  /** Registry service identity; the backend validates active/type-compatible selections. */
+  serviceId?: string | number;
   /** Services beyond primary; order preserved. */
   extraServices?: string[];
   /** Issue detail from Service & Notes (`pmNote` in draft). */
@@ -171,6 +173,7 @@ export interface WorkOrderBoardRowApi {
   originalDate?: string | null;
   originalWeek?: string | null;
   workOrderType?: number | null;
+  serviceId?: number | null;
   isPastDue?: boolean;
   siteCode?: string | null;
   locationName?: string | null;

src/domain/work-orders/types/work-order-table-row.ts

@@ -60,6 +60,7 @@ export interface WorkOrderTableRow {
   location: string;
   locationId: string | number;
   pm: string;
+  serviceId?: string | number | null;
   /** Issue detail from Service & Notes. */
   serviceNotes: string;
   /** Additional services beyond primary `pm`. */

src/domain/work-orders/types/work-order-wizard.ts

@@ -37,6 +37,8 @@ export interface WorkOrderWizardDraft {
   scheduledOn: string;
   dueDate: string;
   pm: string;
+  /** Registry service selected for this work order; null keeps the optional field empty. */
+  serviceId: string | number | null;
   /** Extra services beyond primary `pm` (Service & Notes). */
   extraServices: string[];
   /** Free-text note attached to the service (Service & Notes). */
@@ -82,6 +84,7 @@ export const EMPTY_WIZARD_DRAFT: WorkOrderWizardDraft = {
   scheduledOn: "",
   dueDate: "",
   pm: "",
+  serviceId: null,
   extraServices: [],
   pmNote: "",
   avetaRequired: false,

src/domain/work-orders/use-cases/use-create-work-order-from-wizard.ts

@@ -4,6 +4,8 @@ import { toast } from "react-toastify";
 
 import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
 
+import { boardCreateErrorMessage } from "@/domain/work-orders/errors/board-create-errors";
+
 import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order";
 
 import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
@@ -27,7 +29,7 @@ export function useCreateWorkOrderFromWizard(
     },
 
     onError: (error: Error) => {
-      toast.error(error.message || "Failed to create work order");
+      toast.error(boardCreateErrorMessage(error));
     },
   });
 }

src/domain/work-orders/use-cases/use-work-order-table-mutations.ts

@@ -134,11 +134,17 @@ export function useWorkOrderTableMutations(
     mutationFn: ({
       id,
       persistPatch,
+      baseRow,
     }: {
       id: string | number;
       patch: WorkOrderTablePatch;
       persistPatch: WorkOrderTablePatch;
-    }) => enqueuePatch(id, () => runWorkOrderTablePatch(id, persistPatch, getRow)),
+      /** Server row from a just-settled patch; its rowVersion is fresher than the table snapshot. */
+      baseRow?: WorkOrderTableRow;
+    }) =>
+      enqueuePatch(id, () =>
+        runWorkOrderTablePatch(id, persistPatch, baseRow ? () => baseRow : getRow),
+      ),
     onMutate: async ({ id, persistPatch }) => {
       onPatch(id, persistPatch);
     },
@@ -182,9 +188,13 @@ export function useWorkOrderTableMutations(
     );
   };
 
-  const patchFieldAsync = (id: string | number, patch: WorkOrderTablePatch) => {
+  const patchFieldAsync = (
-    const persistPatch = resolvePatch(id, patch);
+    id: string | number,
-    return patchMutation.mutateAsync({ id, patch, persistPatch });
+    patch: WorkOrderTablePatch,
+    baseRow?: WorkOrderTableRow,
+  ) => {
+    const persistPatch = baseRow ? mergeAutoSchedulePatch(baseRow, patch) : resolvePatch(id, patch);
+    return patchMutation.mutateAsync({ id, patch, persistPatch, baseRow });
   };
 
   return {

src/domain/work-orders/utils/board-audit-action-rules.ts

@@ -39,24 +39,53 @@ function formatSeverityAuditLabel(raw: string): string {
   return raw;
 }
 
-function tryTypeRule({ fieldKey, actionKey, newValue }: AuditActionRuleContext): string | null {
+const CLEARED_AUDIT_VALUE: FormattedAuditValue = { text: "—", isQuotedList: false };
+
+/** `from X to Y` whenever the previous value is known; a cleared value reads as "—". */
+function formatFieldChangeSentence(
+  label: string,
+  oldValue: FormattedAuditValue,
+  newValue: FormattedAuditValue,
+): string | null {
+  if (!oldValue.text && !newValue.text) return null;
+  const next = wrapAuditValue(newValue.text ? newValue : CLEARED_AUDIT_VALUE);
+  if (oldValue.text) {
+    return `Changed ${label} from ${wrapAuditValue(oldValue)} to ${next}`;
+  }
+  return `Changed ${label} to ${next}`;
+}
+
+function tryTypeRule({
+  fieldKey,
+  actionKey,
+  oldValue,
+  newValue,
+}: AuditActionRuleContext): string | null {
   const matches =
     fieldKey === "type" ||
     fieldKey === "workordertype" ||
     fieldKey === "wotype" ||
     actionKey === "typechanged" ||
     actionKey.includes("workordertype");
-  if (!matches || !newValue.text) return null;
+  if (!matches) return null;
 
-  return `Changed Type to ${wrapAuditValue(newValue)}`;
+  return formatFieldChangeSentence("Type", oldValue, newValue);
 }
 
-function trySeverityRule({ fieldKey, actionKey, newValue }: AuditActionRuleContext): string | null {
+function severityValue(value: FormattedAuditValue): FormattedAuditValue {
-  const matches = fieldKey.includes("severity") || actionKey.includes("severity");
+  return value.text ? { text: formatSeverityAuditLabel(value.text), isQuotedList: false } : value;
-  if (!matches || !newValue.text) return null;
+}
 
-  const labeled = { text: formatSeverityAuditLabel(newValue.text), isQuotedList: false };
+function trySeverityRule({
-  return `Changed Severity to ${wrapAuditValue(labeled)}`;
+  fieldKey,
+  actionKey,
+  oldValue,
+  newValue,
+}: AuditActionRuleContext): string | null {
+  const matches = fieldKey.includes("severity") || actionKey.includes("severity");
+  if (!matches) return null;
+
+  return formatFieldChangeSentence("Severity", severityValue(oldValue), severityValue(newValue));
 }
 
 function tryStatusRule({

src/domain/work-orders/utils/completion-doc-auto-complete.ts

@@ -0,0 +1,25 @@
+import type { CompDocSaveStatus } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  getClosabilityGaps,
+  tableRowToClosabilityInput,
+} from "@/domain/work-orders/utils/wo-closability";
+
+/**
+ * Completion is manual with confirmation, except that generating the completion document
+ * completes the WO — but only when the closability gate passes on the persisted row.
+ * Not-required (NN) and drafts never complete; Past Due rows must be
+ * rescheduled before any status change, so they are left for the dispatcher.
+ */
+export function shouldCompleteAfterCompletionDoc(
+  status: CompDocSaveStatus,
+  row: WorkOrderTableRow,
+): boolean {
+  if (status !== "Yes" || row.docStatus !== "Yes") {
+    return false;
+  }
+  if (row.status === "Completed" || row.status === "Canceled" || row.isPastDue) {
+    return false;
+  }
+  return getClosabilityGaps(tableRowToClosabilityInput(row)).length === 0;
+}

src/domain/work-orders/utils/due-date-floor.ts

@@ -0,0 +1,27 @@
+/**
+ * SH-356: a Due Date can never be earlier than Schedule On.
+ *
+ * The floor is the concrete Schedule On day, the start of a date range, or — for a
+ * week-only schedule (SH-110) — the first day of the target week.
+ */
+export function resolveDueDateFloor(schedule: {
+  scheduledOn?: string | null;
+  targetWeek?: string | null;
+}): string {
+  return schedule.scheduledOn?.trim() || schedule.targetWeek?.trim() || "";
+}
+
+export function isDueDateBeforeFloor(dueDate: string | null | undefined, floor: string): boolean {
+  return Boolean(dueDate && floor && dueDate < floor);
+}
+
+/**
+ * Patch fragment for a Schedule On change: clears an existing Due Date that the new
+ * schedule would leave in the past. Never bumps it to a guessed value.
+ */
+export function clearDueDateBeforeSchedule(
+  dueDate: string | null | undefined,
+  nextFloor: string,
+): { dueDate?: string } {
+  return isDueDateBeforeFloor(dueDate, nextFloor) ? { dueDate: "" } : {};
+}

src/domain/work-orders/utils/format-audit-timestamp.ts

@@ -0,0 +1,24 @@
+const AUDIT_DATE_PATTERN = /\b\d{1,2}\/\d{1,2}(\/\d{2,4})?\b/;
+
+/**
+ * Every entry, manual or system, shows a complete timestamp — `09/15/2026 · 7:42 PM`.
+ * Pre-formatted API strings are kept only when they already carry a calendar date.
+ */
+export function formatAuditTimestamp(value: string): string {
+  if (!value) return "";
+  if (AUDIT_DATE_PATTERN.test(value) && /\b(AM|PM)\b/i.test(value)) return value;
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+
+  const datePart = date.toLocaleDateString("en-US", {
+    month: "2-digit",
+    day: "2-digit",
+    year: "numeric",
+  });
+  const timePart = date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+  return `${datePart} · ${timePart}`;
+}

src/domain/work-orders/utils/format-board-audit-action.ts

@@ -127,6 +127,10 @@ function formatGenericAuditFallback(args: {
   if (newValue.text) {
     return `Changed ${label} to ${wrapAuditValue(newValue)}`;
   }
-  if (action) return action;
+  if (oldValue.text) {
+    return `Changed ${label} from ${wrapAuditValue(oldValue)} to "—"`;
+  }
+  // Never surface a raw audit enum such as "FieldChanged" as the sentence.
+  if (fieldName && action) return `Updated ${label}`;
   return "Updated work order";
 }

src/domain/work-orders/utils/partition-slide-over-media.ts

@@ -12,6 +12,11 @@ const EMPTY_OWNERSHIP: MediaSurfaceOwnership = {
   extraOwnedIds: new Set(),
 };
 
+/** Only Reactive and Emergency work orders render a media gallery on the Completion tab. */
+export function hasCompletionMediaGallery(type: string | null | undefined): boolean {
+  return type === "Emergency" || type === "Reactive";
+}
+
 function isPhotoOrVideo(item: MediaFile): boolean {
   return item.fileType === "image" || item.fileType === "video";
 }
@@ -24,20 +29,25 @@ function isInFlight(item: MediaFile): boolean {
 export function isCompletionSurfaceMedia(
   item: MediaFile,
   ownership: MediaSurfaceOwnership = EMPTY_OWNERSHIP,
+  completionHasGallery = true,
 ): boolean {
   if (isInFlight(item)) return true;
   if (COMPLETION_PURPOSES.has(item.purpose ?? "")) return true;
+  if (!completionHasGallery && item.purpose === "Extra") return false;
   if (ownership.completionOwnedIds.has(item.id)) return true;
   if (ownership.extraOwnedIds.has(item.id)) return false;
   return item.purpose === "Extra" && isPhotoOrVideo(item);
 }
 
+/** Without a Completion gallery, every Extra item (including photos/videos) belongs to Extras. */
 export function isExtrasSurfaceMedia(
   item: MediaFile,
   ownership: MediaSurfaceOwnership = EMPTY_OWNERSHIP,
+  completionHasGallery = true,
 ): boolean {
   if (item.purpose === "Aveta") return true;
   if (item.purpose !== "Extra") return false;
+  if (!completionHasGallery) return true;
   if (ownership.completionOwnedIds.has(item.id)) return false;
   if (ownership.extraOwnedIds.has(item.id)) return true;
   return !isPhotoOrVideo(item);

src/domain/work-orders/utils/wo-lifecycle-transitions.ts

@@ -11,8 +11,21 @@ import {
   UPLIFT_PENDING_COMPLETED_TITLE,
 } from "@/domain/work-orders/utils/wo-closability";
 
-/** AAP `ALL_STATUSES` — Canceled is kebab-only. */
+/**
-export const BOARD_INLINE_STATUSES: readonly WizardWOStatus[] = ALL_WIZARD_STATUSES;
+ * Lifecycle states the server derives (Incomplete from create, Scheduled from Schedule On).
+ * Past Due is an overlay, not a status. None of these may be picked manually on an existing WO.
+ */
+export const AUTOMATIC_LIFECYCLE_STATUSES: readonly WizardWOStatus[] = ["Incomplete", "Scheduled"];
+
+/** Manually selectable statuses for an existing WO — Canceled is kebab-only. */
+export const BOARD_INLINE_STATUSES: readonly WizardWOStatus[] = ALL_WIZARD_STATUSES.filter(
+  (status) => !AUTOMATIC_LIFECYCLE_STATUSES.includes(status),
+);
+
+/** Inline options for an existing WO never repeat its current status. */
+export function getInlineStatusTransitions(currentStatus: string): WizardWOStatus[] {
+  return BOARD_INLINE_STATUSES.filter((status) => status !== currentStatus);
+}
 
 /** AAP `CREATION_STATUSES` — wizard Step 3 and inline create. */
 export const CREATION_INLINE_STATUSES: readonly WizardWOStatus[] = [

src/domain/work-orders/utils/wo-number-input.ts

@@ -0,0 +1,33 @@
+import { isRealWoNumber } from "@/domain/work-orders/utils/wo-closability";
+
+/** Board WO numbers are an 11-digit APM number or an SH placeholder of at most 11 characters. */
+export const BOARD_WO_NUMBER_MAX_LENGTH = 11;
+
+export const WO_NUMBER_FORMAT_MESSAGE =
+  "Work order number must be 11 digits or an SH number (e.g. SH00001)";
+
+export const WO_NUMBER_DOWNGRADE_MESSAGE =
+  "Cannot replace an APM work order number with an internal number";
+
+export function sanitizeBoardWoNumberInput(raw: string): string {
+  return raw
+    .replace(/[^a-zA-Z0-9]/g, "")
+    .toUpperCase()
+    .slice(0, BOARD_WO_NUMBER_MAX_LENGTH);
+}
+
+export function isProvisionalWoNumber(woNumber: string): boolean {
+  return /^SH/i.test(woNumber.trim());
+}
+
+export function isValidBoardWoNumber(woNumber: string): boolean {
+  return /^\d{11}$/.test(woNumber) || /^SH\d{1,9}$/i.test(woNumber);
+}
+
+/**
+ * Only an already-saved real APM number is protected from being replaced by an
+ * SH placeholder. A brand-new WO has no saved number, so the rule never applies there.
+ */
+export function isWoNumberDowngrade(savedWoNumber: string, nextWoNumber: string): boolean {
+  return isRealWoNumber(savedWoNumber) && isProvisionalWoNumber(nextWoNumber);
+}

src/infra/query-key/query-key.ts

@@ -60,6 +60,9 @@ export const queryKeys = {
     all: ["services"] as const,
     list: (isActive?: boolean) => [...queryKeys.services.all, "list", isActive ?? "all"] as const,
     completionTemplates: () => [...queryKeys.services.all, "completionTemplates"] as const,
+    active: () => [...queryKeys.services.all, "active"] as const,
+    byWorkOrderType: (workOrderType: string) =>
+      [...queryKeys.services.all, "byWorkOrderType", workOrderType] as const,
   },
   locations: {
     all: ["locations"] as const,