Merge branch 'dev' into feat/work-orders-visual-regression

e2e/work-orders/type-filter.spec.ts

@@ -0,0 +1,93 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+const FROZEN_NOW = "2026-08-19T15:00:00.000Z";
+
+const TEST_USER = {
+  token: "wo-type-filter-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) });
+}
+
+function boardRow(id: number, woNumber: string, scheduledDate: string | null) {
+  return {
+    id,
+    woNumber,
+    workOrderType: 2,
+    siteCode: woNumber,
+    lifecycleStatusLabel: "Scheduled",
+    scheduledDate,
+    dispatcherId: "1",
+    dispatcherName: "Pat Dispatcher",
+    pm: "HVAC",
+  };
+}
+
+async function mockWorkOrderBoard(page: Page, boardUrls: string[]) {
+  await page.route("**/api/**", (route) => {
+    const pathname = new URL(route.request().url()).pathname;
+    if (!pathname.startsWith("/api/")) {
+      return route.fallback();
+    }
+    if (pathname.includes("/workorders/board")) {
+      return route.fallback();
+    }
+    return fulfillJson(route, { data: [] });
+  });
+  await page.route("**/api/workorders/board*", (route) => {
+    if (route.request().url().includes("board/search")) {
+      return route.fallback();
+    }
+    boardUrls.push(route.request().url());
+    return fulfillJson(route, {
+      weekStart: "2026-08-17",
+      weekEnd: "2026-08-21",
+      counts: { returned: 1, total: 1 },
+      unscheduled: [],
+      scheduled: [boardRow(1, "TYPE-WO", "2026-08-19")],
+    });
+  });
+  await page.route("**/api/workorders/board/search*", (route) =>
+    fulfillJson(route, { items: [], totalCount: 0, page: 0, pageSize: 50 }),
+  );
+}
+
+test.describe("Work Orders type filter", () => {
+  test("sends union types on the board request and omits them when cleared", async ({ page }) => {
+    const boardUrls: string[] = [];
+    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,
+    );
+    await mockWorkOrderBoard(page, boardUrls);
+
+    await page.goto("/workorders");
+    await expect(page.getByRole("heading", { name: "Work Orders" })).toBeVisible({
+      timeout: 15_000,
+    });
+    const trigger = page.getByTestId("wo-type-filter-trigger");
+    await expect(trigger).toBeVisible();
+    await trigger.click();
+    const typeMenu = page.getByTestId("wo-type-filter-menu");
+    await expect(typeMenu.getByRole("menuitemcheckbox", { name: "PM" })).toBeVisible();
+    await typeMenu.getByRole("menuitemcheckbox", { name: "PM" }).click();
+    await typeMenu.getByRole("menuitemcheckbox", { name: "Emergency" }).click();
+    await expect(trigger).toContainText("2 types selected");
+
+    await expect
+      .poll(() => boardUrls.some((url) => url.includes("types=2") && url.includes("types=3")))
+      .toBe(true);
+
+    await typeMenu.getByRole("menuitemcheckbox", { name: "All types" }).click();
+    await expect(trigger).toContainText("All types");
+  });
+});

src/app/(protected)/workorders/_components/list/filter-bar/wo-type-filter.tsx

@@ -0,0 +1,124 @@
+import { useMemo } from "react";
+import { Menu, MenuItem } from "@mui/material";
+import { ChevronDown, Tag } from "lucide-react";
+import { CheckboxIndicator } from "@/components/ui/checkbox-indicator";
+import { MenuAnchorButton } from "@/components/ui/menu-anchor-button";
+import { WO_TYPES, type WOType } from "@/domain/work-orders/types/work-order-wizard";
+import { useMenuAnchor } from "@/hooks/use-menu-anchor";
+import { cn } from "@/lib/utils";
+
+type WoTypeFilterProps = {
+  selected: Set<WOType>;
+  onChange: (types: Set<WOType>) => void;
+  disabled?: boolean;
+};
+
+const TYPE_FILTER_MENU_LIST_PROPS = {
+  "aria-label": "Work order types",
+  "data-testid": "wo-type-filter-menu",
+};
+
+function typeFilterLabel(selected: Set<WOType>): string {
+  if (selected.size === 0) return "All types";
+  if (selected.size === 1) {
+    const [only] = selected;
+    return only ?? "All types";
+  }
+  return `${selected.size} types selected`;
+}
+
+function TypeFilterMenuItem({
+  checked,
+  label,
+  onClick,
+}: {
+  checked: boolean;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <MenuItem
+      role="menuitemcheckbox"
+      aria-checked={checked}
+      dense
+      disableGutters
+      onClick={onClick}
+      className="flex w-full cursor-pointer items-center gap-2.5 rounded px-2.5 py-1.5"
+    >
+      <CheckboxIndicator checked={checked} size="sm" />
+      <span className="flex-1 text-left text-[13px] text-foreground">{label}</span>
+    </MenuItem>
+  );
+}
+
+export function WoTypeFilter({ selected, onChange, disabled = false }: WoTypeFilterProps) {
+  const { anchorEl, open, setAnchor, close } = useMenuAnchor();
+  const allSelected = selected.size === 0;
+  const label = useMemo(() => typeFilterLabel(selected), [selected]);
+
+  const toggle = (type: WOType) => {
+    const next = new Set(selected);
+    if (next.has(type)) {
+      next.delete(type);
+    } else {
+      next.add(type);
+    }
+    onChange(next);
+  };
+
+  return (
+    <>
+      <MenuAnchorButton
+        onAnchor={setAnchor}
+        open={open}
+        disabled={disabled}
+        aria-label={`Work order types, ${label}`}
+        data-testid="wo-type-filter-trigger"
+        className={cn(
+          "flex h-[38px] w-auto shrink-0 items-center gap-2 rounded-md border px-3 text-[13px] font-semibold whitespace-nowrap transition-colors",
+          allSelected
+            ? "border-(--color-border) bg-(--color-bg-surface) text-foreground"
+            : "border-[#bfe2f5] bg-(--color-primary-tint) text-primary",
+        )}
+      >
+        <Tag size={15} aria-hidden style={{ color: "var(--muted-foreground)" }} />
+        {label}
+        <ChevronDown size={14} aria-hidden style={{ color: "var(--muted-foreground)" }} />
+      </MenuAnchorButton>
+
+      <Menu
+        open={open}
+        anchorEl={anchorEl}
+        variant="menu"
+        transitionDuration={0}
+        onClose={(_event, reason) => {
+          if (reason === "backdropClick" || reason === "escapeKeyDown" || reason === "tabKeyDown") {
+            close();
+          }
+        }}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
+        slotProps={{
+          paper: {
+            className: "mt-1 w-[180px] rounded-lg border border-border p-1.5 shadow-md",
+          },
+          list: TYPE_FILTER_MENU_LIST_PROPS,
+        }}
+      >
+        <TypeFilterMenuItem
+          checked={allSelected}
+          label="All types"
+          onClick={() => onChange(new Set())}
+        />
+        {WO_TYPES.map((type) => (
+          <TypeFilterMenuItem
+            key={type}
+            checked={selected.has(type)}
+            label={type}
+            onClick={() => toggle(type)}
+          />
+        ))}
+      </Menu>
+    </>
+  );
+}

src/app/(protected)/workorders/_components/list/filter-bar/wo-type-segment.tsx

@@ -1,32 +0,0 @@
-import { SegmentButton, SegmentGroup } from "@/components/ui/segment-control";
-
-import { WO_TYPES } from "@/domain/work-orders/types/work-order-wizard";
-
-import type { WorkOrderTypeFilter } from "@/domain/work-orders/types/work-order-list-filters";
-
-type WoTypeSegmentProps = {
-  value: WorkOrderTypeFilter;
-
-  onChange: (value: WorkOrderTypeFilter) => void;
-
-  disabled?: boolean;
-};
-
-const OPTIONS: WorkOrderTypeFilter[] = ["All", ...WO_TYPES];
-
-export function WoTypeSegment({ value, onChange, disabled = false }: WoTypeSegmentProps) {
-  return (
-    <SegmentGroup>
-      {OPTIONS.map((option) => (
-        <SegmentButton
-          key={option}
-          active={value === option}
-          disabled={disabled}
-          onClick={() => onChange(option)}
-        >
-          {option}
-        </SegmentButton>
-      ))}
-    </SegmentGroup>
-  );
-}

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

@@ -1,7 +1,7 @@
-import type { WorkOrderTypeFilter } from "@/domain/work-orders/types/work-order-list-filters";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
 import { DayTabs } from "@/app/(protected)/workorders/_components/list/filter-bar/day-tabs";
 import { WeekSelector } from "@/app/(protected)/workorders/_components/list/filter-bar/week-selector";
-import { WoTypeSegment } from "@/app/(protected)/workorders/_components/list/filter-bar/wo-type-segment";
+import { WoTypeFilter } from "@/app/(protected)/workorders/_components/list/filter-bar/wo-type-filter";
 import { Text } from "@/components/ui/text";
 
 type WorkOrdersFilterBarProps = {
@@ -9,8 +9,8 @@ type WorkOrdersFilterBarProps = {
   onWeekChange: (mondayIso: string) => void;
   selectedDayIso: string;
   onSelectedDayChange: (dayIso: string) => void;
-  typeFilter: WorkOrderTypeFilter;
-  onTypeChange: (value: WorkOrderTypeFilter) => void;
+  types: Set<WOType>;
+  onTypesChange: (value: Set<WOType>) => void;
   filteredCount: number;
   scopeTotalCount: number;
   disabled?: boolean;
@@ -21,8 +21,8 @@ export function WorkOrdersFilterBar({
   onWeekChange,
   selectedDayIso,
   onSelectedDayChange,
-  typeFilter,
-  onTypeChange,
+  types,
+  onTypesChange,
   filteredCount,
   scopeTotalCount,
   disabled = false,
@@ -34,9 +34,12 @@ export function WorkOrdersFilterBar({
       className="-mx-2.5 shrink-0 border-b border-(--color-border) bg-(--color-bg-surface)"
       aria-disabled={disabled}
     >
-      <div className="flex items-center gap-3 px-4 pt-2" aria-label="Week and day">
-        <div className="flex min-w-0 flex-col gap-1">
-          <WeekSelector weekMonday={weekMonday} onChange={onWeekChange} disabled={disabled} />
+      <div
+        className="flex h-14 shrink-0 flex-nowrap items-center gap-3 px-4 py-2"
+        aria-label="Week and day"
+      >
+        <WeekSelector weekMonday={weekMonday} onChange={onWeekChange} disabled={disabled} />
+        <div className="min-w-0 overflow-x-auto">
           <DayTabs
             weekMonday={weekMonday}
             selectedDayIso={selectedDayIso}
@@ -48,9 +51,7 @@ export function WorkOrdersFilterBar({
         <Text variant="caption" tone="muted" className="shrink-0">
           {resultLabel}
         </Text>
-      </div>
-      <div className="flex items-center gap-3 px-4 pt-1 pb-2">
-        <WoTypeSegment value={typeFilter} onChange={onTypeChange} disabled={disabled} />
+        <WoTypeFilter selected={types} onChange={onTypesChange} disabled={disabled} />
       </div>
     </div>
   );

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

@@ -1,10 +1,8 @@
 import { useMemo, useState } from "react";
 import { useDebounce } from "@/hooks/use-debounce";
 import type { WorkOrderAdvancedFilters } from "@/domain/work-orders/types/work-order-advanced-filters";
-import type {
-  WorkOrderBarFilters,
-  WorkOrderTypeFilter,
-} from "@/domain/work-orders/types/work-order-list-filters";
+import type { WorkOrderBarFilters } from "@/domain/work-orders/types/work-order-list-filters";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
 import type { WorkOrderBoardQueryParams } from "@/domain/work-orders/types/work-order-board";
 import {
   clearAdvancedFilterGroup,
@@ -37,7 +35,7 @@ export function useWorkOrdersListFilters() {
     initialSelectedDay(currentWeekMonday()),
   );
   const [dispatcherIds, setDispatcherIdsState] = useState<Set<string>>(() => new Set());
-  const [typeFilter, setTypeFilterState] = useState<WorkOrderTypeFilter>("All");
+  const [types, setTypesState] = useState<Set<WOType>>(() => new Set());
 
   const debouncedSearch = useDebounce(search, 300);
 
@@ -45,9 +43,9 @@ export function useWorkOrdersListFilters() {
     () => ({
       weekMonday,
       dispatcherIds,
-      type: typeFilter,
+      types,
     }),
-    [weekMonday, dispatcherIds, typeFilter],
+    [weekMonday, dispatcherIds, types],
   );
 
   const weekLabel = useMemo(() => compactWeekLabel(weekMonday), [weekMonday]);
@@ -85,8 +83,8 @@ export function useWorkOrdersListFilters() {
     setPage(0);
   };
 
-  const setTypeFilter = (value: WorkOrderTypeFilter) => {
-    setTypeFilterState(value);
+  const setTypes = (value: Set<WOType>) => {
+    setTypesState(new Set(value));
     setPage(0);
   };
 
@@ -148,7 +146,7 @@ export function useWorkOrdersListFilters() {
     selectedDayIso,
     weekDays,
     dispatcherIds,
-    typeFilter,
+    types,
     barFilters,
     weekLabel,
     boardParams,
@@ -166,7 +164,7 @@ export function useWorkOrdersListFilters() {
     setSelectedDayIso,
     navigateToDay,
     setDispatcherIds,
-    setTypeFilter,
+    setTypes,
     setSortBy,
     setSortDir,
   };

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

@@ -58,8 +58,8 @@ export default function WorkOrdersListPage() {
         onWeekChange={filters.setWeekMonday}
         selectedDayIso={filters.selectedDayIso}
         onSelectedDayChange={filters.setSelectedDayIso}
-        typeFilter={filters.typeFilter}
-        onTypeChange={filters.setTypeFilter}
+        types={filters.types}
+        onTypesChange={filters.setTypes}
         filteredCount={tableData.totalCount}
         scopeTotalCount={tableData.scopeTotalCount}
         disabled={filters.advApplied != null}

src/domain/work-orders/types/work-order-list-filters.ts

@@ -1,9 +1,7 @@
 import type { WOType } from "./work-order-wizard";
 
-export type WorkOrderTypeFilter = WOType | "All";
-
 export interface WorkOrderBarFilters {
   weekMonday: string;
   dispatcherIds: Set<string>;
-  type: WorkOrderTypeFilter;
+  types: Set<WOType>;
 }

src/domain/work-orders/utils/board-query-params.ts

@@ -140,7 +140,7 @@ export function toBoardQueryParams(
   search: string,
 ): WorkOrderBoardQueryParams {
   const [, weekTo] = weekRange(bar.weekMonday);
-  const typeFilters = bar.type !== "All" ? mapWoTypeFilters([bar.type]) : {};
+  const typeFilters = bar.types.size > 0 ? mapWoTypeFilters(bar.types) : {};
 
   return {
     weekStart: bar.weekMonday,

src/domain/work-orders/utils/table-filter-utils.ts

@@ -1,6 +1,7 @@
 import type { WorkOrderAdvancedFilters } from "@/domain/work-orders/types/work-order-advanced-filters";
 import { ASSIGNEE_FILTER_UNASSIGNED } from "@/domain/work-orders/types/work-order-list";
 import type { WorkOrderBarFilters } from "@/domain/work-orders/types/work-order-list-filters";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
 import type {
   WorkOrderDayGroup,
   WorkOrderTableRow,
@@ -59,6 +60,15 @@ function rowMatchesSearch(row: WorkOrderTableRow, query: string): boolean {
   return haystack.includes(q);
 }
 
+function rowMatchesBarTypes(row: WorkOrderTableRow, types: Set<WOType>): boolean {
+  if (types.size === 0) {
+    return true;
+  }
+  const overdueMatch = types.has("Overdue") && row.isPastDue;
+  const typeMatch = types.has(row.type as WOType);
+  return overdueMatch || typeMatch;
+}
+
 export function filterByBarAndSearch(
   rows: WorkOrderTableRow[],
   bar: WorkOrderBarFilters,
@@ -71,11 +81,7 @@ export function filterByBarAndSearch(
       return false;
     }
 
-    if (bar.type === "Overdue") {
-      if (!row.isPastDue) {
-        return false;
-      }
-    } else if (bar.type !== "All" && row.type !== bar.type) {
+    if (!rowMatchesBarTypes(row, bar.types)) {
       return false;
     }
 

src/test/app/(protected)/workorders/dispatcher-filter.test.tsx

@@ -122,4 +122,28 @@ describe("DispatcherFilter (SH-242)", () => {
     await user.click(within(menu).getByRole("button", { name: "All dispatchers" }));
     expect(onChange).toHaveBeenLastCalledWith(new Set());
   });
+
+  it("does not put aria-checked on ordinary dispatcher buttons", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <DispatcherFilter
+        selectedIds={new Set()}
+        onChange={vi.fn()}
+        users={users}
+        currentUserId="u1"
+      />,
+      { withAuth: false },
+    );
+
+    await user.click(screen.getByRole("button", { name: "All dispatchers" }));
+    const popover = screen.getByRole("presentation");
+    const items = [
+      within(popover).getByRole("button", { name: "All dispatchers" }),
+      within(popover).getByRole("button", { name: "Unassigned" }),
+      within(popover).getByRole("button", { name: "Blair Cho" }),
+    ];
+    for (const item of items) {
+      expect(item).not.toHaveAttribute("aria-checked");
+    }
+  });
 });

src/test/app/(protected)/workorders/week-day-nav.test.tsx

@@ -6,6 +6,7 @@ import { DayTabs } from "@/app/(protected)/workorders/_components/list/filter-ba
 import { WeekSelector } from "@/app/(protected)/workorders/_components/list/filter-bar/week-selector";
 import { useWorkOrdersListFilters } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-filters";
 import { firstWeekday } from "@/domain/work-orders/utils/week-day-nav-utils";
+import { WORK_ORDER_TYPE_API } from "@/domain/work-orders/types/work-order-board";
 
 vi.mock("@/domain/work-orders/utils/wizard-date-utils", async (importOriginal) => {
   const actual =
@@ -110,4 +111,22 @@ describe("useWorkOrdersListFilters day state (SH-240)", () => {
     expect(result.current.weekMonday).toBe("2026-05-18");
     expect(result.current.selectedDayIso).toBe("2026-05-20");
   });
+
+  it("maps selected types onto board params and resets the page", () => {
+    const { result } = renderHook(() => useWorkOrdersListFilters());
+
+    act(() => {
+      result.current.setPage(2);
+    });
+    act(() => {
+      result.current.setTypes(new Set(["PM", "Emergency"]));
+    });
+
+    expect(result.current.page).toBe(0);
+    expect(result.current.boardParams.types).toEqual([
+      WORK_ORDER_TYPE_API.PM,
+      WORK_ORDER_TYPE_API.Emergency,
+    ]);
+    expect(result.current.boardParams.overdue).toBeUndefined();
+  });
 });

src/test/app/(protected)/workorders/wo-type-filter.test.tsx

@@ -0,0 +1,220 @@
+import { useState } from "react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { WoTypeFilter } from "@/app/(protected)/workorders/_components/list/filter-bar/wo-type-filter";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import { renderWithProviders } from "@/test/test-utils";
+import { screen, waitFor, within } from "@testing-library/react";
+
+function TypeFilterHarness({
+  initial = new Set<WOType>(),
+  disabled = false,
+}: {
+  initial?: Set<WOType>;
+  disabled?: boolean;
+}) {
+  const [selected, setSelected] = useState(initial);
+  return <WoTypeFilter selected={selected} onChange={setSelected} disabled={disabled} />;
+}
+
+async function openTypeMenu(
+  user: ReturnType<typeof userEvent.setup>,
+  triggerName: string | RegExp,
+) {
+  await user.click(screen.getByRole("button", { name: triggerName }));
+  return screen.getByRole("menu", { name: "Work order types" });
+}
+
+describe("WoTypeFilter", () => {
+  it("exposes a menu trigger, not a listbox", () => {
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const trigger = screen.getByRole("button", { name: /all types/i });
+    expect(trigger).toHaveAttribute("aria-haspopup", "menu");
+    expect(trigger).not.toHaveAttribute("aria-haspopup", "listbox");
+  });
+
+  it("shows All types on the trigger and lists the four types in the menu", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    expect(screen.getByRole("button", { name: /all types/i })).toBeEnabled();
+    const menu = await openTypeMenu(user, /all types/i);
+
+    expect(menu).toHaveAttribute("data-testid", "wo-type-filter-menu");
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "PM" })).toBeInTheDocument();
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "Reactive" })).toBeInTheDocument();
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "Emergency" })).toBeInTheDocument();
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "Overdue" })).toBeInTheDocument();
+  });
+
+  it("exposes selected and unselected type state on the menu", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /all types/i);
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "All types" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "PM" })).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+
+    await user.click(within(menu).getByRole("menuitemcheckbox", { name: "PM" }));
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "All types" })).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "PM" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+  });
+
+  it("labels a single type and multiple types on the trigger", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /all types/i);
+    await user.click(within(menu).getByRole("menuitemcheckbox", { name: "PM" }));
+    expect(
+      screen.getByRole("button", { name: /work order types, pm/i, hidden: true, expanded: true }),
+    ).toBeInTheDocument();
+
+    await user.click(within(menu).getByRole("menuitemcheckbox", { name: "Emergency" }));
+    expect(
+      screen.getByRole("button", {
+        name: /2 types selected/i,
+        hidden: true,
+        expanded: true,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it("clears the selection when All types is chosen", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness initial={new Set(["PM"])} />, { withAuth: false });
+
+    expect(screen.getByRole("button", { name: /work order types, pm/i })).toBeInTheDocument();
+    const menu = await openTypeMenu(user, /work order types, pm/i);
+    await user.click(within(menu).getByRole("menuitemcheckbox", { name: "All types" }));
+    expect(
+      screen.getByRole("button", {
+        name: /work order types, all types/i,
+        hidden: true,
+        expanded: true,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it("returns to All types after deselecting the last type", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness initial={new Set(["PM"])} />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /work order types, pm/i);
+    await user.click(within(menu).getByRole("menuitemcheckbox", { name: "PM" }));
+    expect(
+      screen.getByRole("button", {
+        name: /work order types, all types/i,
+        hidden: true,
+        expanded: true,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it("does not open when disabled", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness disabled />, { withAuth: false });
+
+    const trigger = screen.getByRole("button", { name: /all types/i });
+    expect(trigger).toBeDisabled();
+    await user.click(trigger);
+    expect(screen.queryByRole("menu", { name: "Work order types" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("menuitemcheckbox", { name: "PM" })).not.toBeInTheDocument();
+  });
+
+  it("lists All types first, then the four WO types", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /all types/i);
+    const labels = within(menu)
+      .getAllByRole("menuitemcheckbox")
+      .map((item) => item.textContent?.trim());
+    expect(labels).toEqual(["All types", "PM", "Reactive", "Emergency", "Overdue"]);
+  });
+
+  it("moves focus into the menu when opened", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /all types/i);
+    await waitFor(() => {
+      expect(within(menu).getByRole("menuitemcheckbox", { name: "All types" })).toHaveFocus();
+    });
+  });
+
+  it("navigates with Arrow, Home, and End keys", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /all types/i);
+    const allTypes = within(menu).getByRole("menuitemcheckbox", { name: "All types" });
+    const pm = within(menu).getByRole("menuitemcheckbox", { name: "PM" });
+    const overdue = within(menu).getByRole("menuitemcheckbox", { name: "Overdue" });
+
+    await waitFor(() => {
+      expect(allTypes).toHaveFocus();
+    });
+    await user.keyboard("{ArrowDown}");
+    expect(pm).toHaveFocus();
+    await user.keyboard("{End}");
+    expect(overdue).toHaveFocus();
+    await user.keyboard("{Home}");
+    expect(allTypes).toHaveFocus();
+    await user.keyboard("{ArrowUp}");
+    expect(overdue).toHaveFocus();
+  });
+
+  it("keeps inactive items out of the Tab sequence", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /all types/i);
+    const items = within(menu).getAllByRole("menuitemcheckbox");
+    for (const item of items) {
+      expect(item).toHaveAttribute("tabindex", "-1");
+    }
+  });
+
+  it("toggles the focused type from the keyboard without closing the menu", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /all types/i);
+    await waitFor(() => {
+      expect(within(menu).getByRole("menuitemcheckbox", { name: "All types" })).toHaveFocus();
+    });
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard(" ");
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "PM" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+    expect(screen.getByRole("menu", { name: "Work order types" })).toBeInTheDocument();
+  });
+
+  it("closes the menu on Tab instead of walking each item", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    await openTypeMenu(user, /all types/i);
+    await waitFor(() => {
+      expect(screen.getByRole("menuitemcheckbox", { name: "All types" })).toHaveFocus();
+    });
+    await user.keyboard("{Tab}");
+    expect(screen.queryByRole("menu", { name: "Work order types" })).not.toBeInTheDocument();
+  });
+});

src/test/app/(protected)/workorders/work-orders-advanced-search-wiring.test.tsx

@@ -54,8 +54,8 @@ vi.mock("@/app/(protected)/workorders/_hooks/use-work-orders-list-filters", () =
     navigateToDay: vi.fn(),
     dispatcherIds: new Set<string>(),
     setDispatcherIds: vi.fn(),
-    typeFilter: "All",
-    setTypeFilter: vi.fn(),
+    types: new Set(),
+    setTypes: vi.fn(),
   }),
 }));
 
@@ -256,8 +256,7 @@ describe("WorkOrders Advanced Search page wiring (SH-121)", () => {
     expect(screen.getByRole("button", { name: "All dispatchers" })).toBeDisabled();
     expect(screen.getByRole("button", { name: "Week 7/20–7/24" })).toBeDisabled();
     expect(screen.getByRole("tab", { name: "Mon · 07/20" })).toBeDisabled();
-    expect(screen.getByRole("button", { name: "All" })).toBeDisabled();
-    expect(screen.getByRole("button", { name: "PM" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /work order types, all types/i })).toBeDisabled();
     expect(screen.getByText("42 work orders")).toBeInTheDocument();
 
     fireEvent.click(screen.getByRole("button", { name: /clear all/i }));
@@ -267,7 +266,6 @@ describe("WorkOrders Advanced Search page wiring (SH-121)", () => {
 
     expect(screen.queryByText("42 work orders")).not.toBeInTheDocument();
     expect(screen.getByRole("button", { name: "All dispatchers" })).toBeEnabled();
-    expect(screen.getByRole("button", { name: "All" })).toBeEnabled();
-    expect(screen.getByRole("button", { name: "PM" })).toBeEnabled();
+    expect(screen.getByRole("button", { name: /work order types, all types/i })).toBeEnabled();
   });
 });

src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx

@@ -50,8 +50,8 @@ vi.mock("@/app/(protected)/workorders/_hooks/use-work-orders-list-filters", () =
     navigateToDay: vi.fn(),
     dispatcherIds: new Set<string>(),
     setDispatcherIds: vi.fn(),
-    typeFilter: "All",
-    setTypeFilter: vi.fn(),
+    types: new Set(),
+    setTypes: vi.fn(),
   }),
 }));
 

src/test/app/(protected)/workorders/work-orders-dispatcher-layout.test.tsx

@@ -35,8 +35,8 @@ vi.mock("@/app/(protected)/workorders/_hooks/use-work-orders-list-filters", () =
     navigateToDay: vi.fn(),
     dispatcherIds: new Set<string>(),
     setDispatcherIds: vi.fn(),
-    typeFilter: "All",
-    setTypeFilter: vi.fn(),
+    types: new Set(),
+    setTypes: vi.fn(),
   }),
 }));
 

src/test/domain/work-orders/utils/board-query-params.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
 import { ASSIGNEE_FILTER_UNASSIGNED } from "@/domain/work-orders/types/work-order-list";
 import { EMPTY_ADVANCED_FILTERS } from "@/domain/work-orders/types/work-order-advanced-filters";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
 import { WORK_ORDER_TYPE_API } from "@/domain/work-orders/types/work-order-board";
 import {
   BOARD_SEARCH_MAX_PAGE_SIZE,
@@ -16,7 +17,7 @@ describe("toBoardQueryParams", () => {
   const baseBar = {
     weekMonday: "2026-07-13",
     dispatcherIds: new Set<string>(),
-    type: "All" as const,
+    types: new Set<WOType>(),
   };
 
   it("omits search when shorter than 2 characters", () => {
@@ -43,17 +44,29 @@ describe("toBoardQueryParams", () => {
   });
 
   it("maps PM type filter to API types", () => {
-    const params = toBoardQueryParams({ ...baseBar, type: "PM" }, "");
+    const params = toBoardQueryParams({ ...baseBar, types: new Set(["PM"]) }, "");
     expect(params.types).toEqual([WORK_ORDER_TYPE_API.PM]);
     expect(params.overdue).toBeUndefined();
   });
 
+  it("maps multiple types as union query params", () => {
+    const params = toBoardQueryParams({ ...baseBar, types: new Set(["PM", "Emergency"]) }, "");
+    expect(params.types).toEqual([WORK_ORDER_TYPE_API.PM, WORK_ORDER_TYPE_API.Emergency]);
+    expect(params.overdue).toBeUndefined();
+  });
+
   it("maps Overdue bar filter to overdue=true without types", () => {
-    const params = toBoardQueryParams({ ...baseBar, type: "Overdue" }, "");
+    const params = toBoardQueryParams({ ...baseBar, types: new Set(["Overdue"]) }, "");
     expect(params.overdue).toBe(true);
     expect(params.types).toBeUndefined();
   });
 
+  it("maps Overdue with real types as OR (types + overdue)", () => {
+    const params = toBoardQueryParams({ ...baseBar, types: new Set(["PM", "Overdue"]) }, "");
+    expect(params.types).toEqual([WORK_ORDER_TYPE_API.PM]);
+    expect(params.overdue).toBe(true);
+  });
+
   it("omits types when filter is All", () => {
     const params = toBoardQueryParams(baseBar, "");
     expect(params.types).toBeUndefined();

src/test/domain/work-orders/utils/table-filter-utils.test.ts

@@ -3,6 +3,7 @@ import { EMPTY_UPLIFT_SUMMARY } from "@/domain/work-orders/types/work-order-upli
 import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
 import { EMPTY_ADVANCED_FILTERS } from "@/domain/work-orders/types/work-order-advanced-filters";
 import type { WorkOrderBarFilters } from "@/domain/work-orders/types/work-order-list-filters";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
 import {
   buildDayGroups,
   composeBoardSections,
@@ -83,7 +84,7 @@ function bar(
   return {
     weekMonday,
     dispatcherIds: new Set(),
-    type: "All",
+    types: new Set<WOType>(),
     ...overrides,
   };
 }
@@ -135,6 +136,49 @@ describe("filterByBarAndSearch", () => {
     const ids = filterByBarAndSearch([inWeek, outWeek], bar(weekMonday), "").map((row) => row.id);
     expect(ids).toEqual(["in"]);
   });
+
+  it("keeps the union of selected types (OR)", () => {
+    const pm = makeRow({ id: "pm", type: "PM", scheduledOn: "2026-06-03" });
+    const emergency = makeRow({ id: "em", type: "Emergency", scheduledOn: "2026-06-03" });
+    const reactive = makeRow({ id: "rx", type: "Reactive", scheduledOn: "2026-06-03" });
+
+    const ids = filterByBarAndSearch(
+      [pm, emergency, reactive],
+      bar(weekMonday, { types: new Set(["Emergency", "Reactive"]) }),
+      "",
+    ).map((row) => row.id);
+    expect(ids).toEqual(["em", "rx"]);
+  });
+
+  it("matches Overdue via isPastDue even when row.type is not Overdue", () => {
+    const pastDuePm = makeRow({
+      id: "pd",
+      type: "PM",
+      isPastDue: true,
+      scheduledOn: "2026-06-03",
+    });
+    const currentPm = makeRow({
+      id: "now",
+      type: "PM",
+      isPastDue: false,
+      scheduledOn: "2026-06-03",
+    });
+
+    const ids = filterByBarAndSearch(
+      [pastDuePm, currentPm],
+      bar(weekMonday, { types: new Set(["Overdue"]) }),
+      "",
+    ).map((row) => row.id);
+    expect(ids).toEqual(["pd"]);
+  });
+
+  it("does not filter by type when the set is empty", () => {
+    const pm = makeRow({ id: "pm", type: "PM", scheduledOn: "2026-06-03" });
+    const emergency = makeRow({ id: "em", type: "Emergency", scheduledOn: "2026-06-03" });
+
+    const ids = filterByBarAndSearch([pm, emergency], bar(weekMonday), "").map((row) => row.id);
+    expect(ids).toEqual(["pm", "em"]);
+  });
 });
 
 describe("isUnassignedBoardRow", () => {