feat(work-orders): add multi-select All types filter (SH-243)

Dispatchers can select several WO types so the board shows the union of matching rows.

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 (SH-243)", () => {
+  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("button", { name: "PM" })).toBeVisible();
+    await typeMenu.getByRole("button", { name: "PM" }).click();
+    await typeMenu.getByRole("button", { 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("button", { 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,90 @@
+import { useMemo } from "react";
+import { Popover } from "@mui/material";
+import { ChevronDown, Layers } from "lucide-react";
+import { CheckboxMenuItem } from "@/components/ui/checkbox-menu-item";
+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;
+};
+
+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`;
+}
+
+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-haspopup="listbox"
+        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",
+        )}
+      >
+        <Layers size={15} aria-hidden style={{ color: "var(--muted-foreground)" }} />
+        {label}
+        <ChevronDown size={14} aria-hidden style={{ color: "var(--muted-foreground)" }} />
+      </MenuAnchorButton>
+
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={close}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
+        slotProps={{
+          paper: {
+            className: "mt-1 w-[220px] rounded-lg border border-border p-1.5 shadow-md",
+          },
+        }}
+      >
+        <div data-testid="wo-type-filter-menu">
+          <CheckboxMenuItem
+            checked={allSelected}
+            label="All types"
+            onClick={() => onChange(new Set())}
+          />
+          {WO_TYPES.map((type) => (
+            <CheckboxMenuItem
+              key={type}
+              checked={selected.has(type)}
+              label={type}
+              onClick={() => toggle(type)}
+            />
+          ))}
+        </div>
+      </Popover>
+    </>
+  );
+}

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,9 +1,9 @@
 import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
-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 { DispatcherFilter } from "@/app/(protected)/workorders/_components/list/filter-bar/dispatcher-filter";
 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 = {
@@ -13,8 +13,8 @@ type WorkOrdersFilterBarProps = {
   onSelectedDayChange: (dayIso: string) => void;
   dispatcherIds: Set<string>;
   onDispatcherChange: (ids: Set<string>) => void;
-  typeFilter: WorkOrderTypeFilter;
-  onTypeChange: (value: WorkOrderTypeFilter) => void;
+  types: Set<WOType>;
+  onTypesChange: (value: Set<WOType>) => void;
   users: WorkOrderUser[];
   usersLoading?: boolean;
   currentUserId?: string | number;
@@ -30,8 +30,8 @@ export function WorkOrdersFilterBar({
   onSelectedDayChange,
   dispatcherIds,
   onDispatcherChange,
-  typeFilter,
-  onTypeChange,
+  types,
+  onTypesChange,
   users,
   usersLoading = false,
   currentUserId,
@@ -60,17 +60,21 @@ export function WorkOrdersFilterBar({
           {resultLabel}
         </Text>
       </div>
-      <div className="flex flex-col gap-1 px-4 pt-1" aria-label="Week and day">
+      <div
+        className="flex h-14 shrink-0 flex-nowrap items-center gap-3 px-4 pt-1 pb-2"
+        aria-label="Week and day"
+      >
         <WeekSelector weekMonday={weekMonday} onChange={onWeekChange} disabled={disabled} />
-        <DayTabs
-          weekMonday={weekMonday}
-          selectedDayIso={selectedDayIso}
-          onChange={onSelectedDayChange}
-          disabled={disabled}
-        />
-      </div>
-      <div className="flex items-center gap-3 px-4 pt-1 pb-2">
-        <WoTypeSegment value={typeFilter} onChange={onTypeChange} disabled={disabled} />
+        <div className="min-w-0 overflow-x-auto">
+          <DayTabs
+            weekMonday={weekMonday}
+            selectedDayIso={selectedDayIso}
+            onChange={onSelectedDayChange}
+            disabled={disabled}
+          />
+        </div>
+        <div className="flex-1" />
+        <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

@@ -49,8 +49,8 @@ export default function WorkOrdersListPage() {
         onSelectedDayChange={filters.setSelectedDayIso}
         dispatcherIds={filters.dispatcherIds}
         onDispatcherChange={filters.setDispatcherIds}
-        typeFilter={filters.typeFilter}
-        onTypeChange={filters.setTypeFilter}
+        types={filters.types}
+        onTypesChange={filters.setTypes}
         users={page.users}
         usersLoading={page.usersLoading}
         currentUserId={user?.id}

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/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,95 @@
+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 } 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) {
+  await user.click(screen.getByRole("button", { name: triggerName }));
+}
+
+describe("WoTypeFilter (SH-243)", () => {
+  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" })).toBeEnabled();
+    await openTypeMenu(user, "All types");
+
+    expect(screen.getByRole("button", { name: "PM" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Reactive" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Emergency" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Overdue" })).toBeInTheDocument();
+  });
+
+  it("labels a single type and multiple types on the trigger", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    await openTypeMenu(user, "All types");
+    await user.click(screen.getByRole("button", { name: "PM" }));
+    expect(
+      screen.getByRole("button", { name: "PM", hidden: true, expanded: true }),
+    ).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Emergency" }));
+    expect(
+      screen.getByRole("button", { name: "2 types selected", 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: "PM" })).toBeInTheDocument();
+    await openTypeMenu(user, "PM");
+    await user.click(screen.getByRole("button", { name: "All types" }));
+    expect(
+      screen.getByRole("button", { name: "All types", 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 });
+
+    await openTypeMenu(user, "PM");
+    await user.click(screen.getByRole("button", { name: "PM" }));
+    expect(
+      screen.getByRole("button", { name: "All types", 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" });
+    expect(trigger).toBeDisabled();
+    await user.click(trigger);
+    expect(screen.queryByRole("button", { name: "PM" })).not.toBeInTheDocument();
+  });
+
+  it("lists All types first, then the four WO types", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    await openTypeMenu(user, "All types");
+    const labels = screen.getAllByRole("button").map((button) => button.textContent?.trim());
+    expect(labels).toEqual(["All types", "PM", "Reactive", "Emergency", "Overdue"]);
+  });
+});

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: "All types" })).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: "All types" })).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/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", () => {