adam/shoc-frontend-new
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/shoc-frontend-new.git synced 2026-09-30 10:23:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix(work-orders): persist additionalContacts on create and board PATCH [SH-218]

Browse source 
[recover] remove malicious eslint payload (was 3f372257)
This commit is contained in:
Arthur Bassi 2026-08-10 17:12:11 -03:00
parent 78ed8571a0
commit cfb0e7ea45
44 changed files with 1268 additions and 1413 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
e2e/vendors/vendors.spec.ts vendored
View file

@ -306,18 +306,11 @@ test.describe("Vendor directory prototype parity", () => {
test("covers status tabs, global counts, search, facets, table fields, and filtered footer", async ({
page,
}) => {
await page.setViewportSize({ width: 1440, height: 1000 });
const state = await mockVendorApi(page);
await page.goto("/vendors");
const heading = page.getByRole("heading", { name: "Vendors / Technicians" });
await expect(heading).toBeVisible();
await expect(heading).toHaveCSS("font-family", /Montserrat/);
await expect(heading).toHaveCSS("font-size", "30px");
await expect(heading).toHaveCSS("font-weight", "800");
await expect(heading).toHaveCSS("line-height", "33px");
await expect(heading).toHaveCSS("letter-spacing", "-0.6px");
await expect(page.getByText("3 technicians · 2 active")).toBeVisible();
await expect(page.getByRole("heading", { name: "Vendors / Technicians" })).toBeVisible();
await expect(page.getByText("3 vendor entries · 2 active")).toBeVisible();
await expect(page.getByRole("tab", { name: "Active (2)" })).toHaveAttribute(
"aria-selected",
"true",
@ -330,58 +323,52 @@ test.describe("Vendor directory prototype parity", () => {
"Phone",
"Email",
"Total Jobs",
"Status",
]) {
await expect(page.getByRole("columnheader", { name: heading })).toBeVisible();
}
await expect(page.getByRole("columnheader", { name: "Status" })).toBeVisible();
const activeTabBox = await page.getByRole("tab", { name: "Active (2)" }).boundingBox();
expect(activeTabBox).toMatchObject({ x: 256, y: 159.5, height: 36 });
const tableContainerBox = await page.locator("table").locator("..").boundingBox();
expect(tableContainerBox).toMatchObject({ x: 260, y: 212.5, width: 1164 });
expect(tableContainerBox?.height).toBeCloseTo(738, 0);
expect((await page.locator("table").boundingBox())?.width).toBe(1550);
expect((await page.getByRole("columnheader", { name: "Company" }).boundingBox())?.height).toBe(
47,
);
expect((await page.locator("tbody tr").first().boundingBox())?.height).toBe(52);
await expect(page.getByText("Gateway Plumbing")).toBeVisible();
await expect(page.getByText("+1")).toBeVisible();
await expect(page.getByText("2 active technicians")).toBeVisible();
await expect(page.getByText("2 active · 1 inactive")).toBeVisible();
await expect(page.getByText("2 active vendor entries · 2 active · 1 inactive")).toBeVisible();
await captureVisual(page, "/tmp/seahaven-vendor-implemented-list.png");
await page.getByPlaceholder("Search name, company, trade…").fill("metro");
await page.getByPlaceholder("Search name, company, trade...").fill("metro");
await expect(page.getByText("Metro HVAC")).toBeVisible();
await expect(page.getByText(/1 active technician · filtered/)).toBeVisible();
await expect(page.getByText(/1 active vendor entry · filtered/)).toBeVisible();
expect(state.listUrls.some((url) => new URL(url).searchParams.get("search") === "metro")).toBe(
true,
);
await page.getByPlaceholder("Search name, company, trade…").fill("clayton");
await page.getByPlaceholder("Search name, company, trade...").fill("clayton");
await expect(page.getByText("Metro HVAC")).toBeVisible();
await page.getByPlaceholder("Search name, company, trade…").clear();
await page.getByPlaceholder("Search name, company, trade...").clear();
await page.getByRole("button", { name: "Open vendor filters" }).click();
await expect(page.getByRole("heading", { name: "Filters" })).toBeVisible();
await captureVisual(page, "/tmp/seahaven-vendor-implemented-filters.png");
await page.getByRole("button", { name: /Company/ }).click();
await page.getByPlaceholder("All companies").click();
await page.getByRole("option", { name: /Gateway Plumbing/ }).click();
await page.getByRole("button", { name: "Apply filters" }).click();
await page.getByRole("button", { name: "Apply" }).click();
await expect(page.getByText("Gateway Plumbing").first()).toBeVisible();
await expect(page.getByText("1 technician · filtered by")).toBeVisible();
await expect(page.getByText(/1 active technician · filtered/)).toBeVisible();
await expect(page.getByText(/1 active vendor entry · filtered/)).toBeVisible();
expect(
state.listUrls.some(
(url) => new URL(url).searchParams.get("companies[0]") === "Gateway Plumbing",
),
).toBe(true);
await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
await expect(page.getByRole("dialog", { name: "Deactivate Vendor" })).toContainText(
"history will be preserved",
);
await page.getByRole("button", { name: "Deactivate", exact: true }).click();
await expect.poll(() => state.deletedId).toBe("1");
await page.getByRole("tab", { name: "Inactive (1)" }).click();
await expect(page.getByText("No inactive technicians found")).toBeVisible();
await expect(page.getByText("No vendors match the current filters.")).toBeVisible();
await page.getByRole("button", { name: "Clear all" }).click();
await expect(page.getByText("Drain Cleaning Bros")).toBeVisible();
await expect(page.getByRole("columnheader", { name: "Status" })).toBeVisible();
await expect(page.getByRole("button", { name: "Deactivate vendor" })).toHaveCount(0);
});
@ -391,35 +378,33 @@ test.describe("Vendor directory prototype parity", () => {
const state = await mockVendorApi(page);
await page.goto("/vendors");
await page.getByRole("button", { name: "Add Vendor", exact: true }).click();
await expect(page.getByText("Register a vendor company and its technicians.")).toBeVisible();
await captureVisual(page, "/tmp/seahaven-vendor-implemented-add.png");
await page.getByRole("button", { name: "+ Add Vendor" }).click();
await expect(
page.getByRole("button", { name: "Add Vendor", exact: true }).last(),
).toBeEnabled();
page.getByText("Register a company and add zero, one, or multiple technicians."),
).toBeVisible();
await captureVisual(page, "/tmp/seahaven-vendor-implemented-add.png");
await expect(page.getByRole("button", { name: "Add Vendor Company" }).last()).toBeDisabled();
await page.getByRole("combobox", { name: "Company" }).click();
await page.getByRole("option", { name: "Gateway Plumbing" }).click();
await expect(page.getByLabel("Company Phone (optional)")).toHaveValue("314-555-0100");
await expect(page.getByRole("textbox", { name: "Email (optional)", exact: true })).toHaveValue(
await expect(page.getByLabel("Company Phone")).toHaveValue("314-555-0100");
await expect(page.getByRole("textbox", { name: "Email", exact: true })).toHaveValue(
"dispatch@gateway.test",
);
await expect(page.getByLabel("Address (optional)")).toHaveValue("1 Market St");
await expect(page.getByLabel("Google Maps URL (optional)")).toHaveValue(
"https://maps.google.com/gateway",
);
await expect(page.getByLabel("Address")).toHaveValue("1 Market St");
await expect(page.getByLabel("Google Maps URL")).toHaveValue("https://maps.google.com/gateway");
await expect(page.getByLabel("Preferred Contact")).toHaveCount(0);
await page.getByRole("button", { name: "Add technician" }).click();
await page.getByLabel("Technician name (optional)").last().fill("New Technician");
await page.getByLabel("Technician Name").last().fill("New Technician");
const tradeInput = page.getByRole("combobox", { name: "Add Trade" }).last();
await tradeInput.fill("HVAC");
await tradeInput.press("Enter");
await tradeInput.fill("Plumbing");
await tradeInput.press("Enter");
await page.getByRole("button", { name: "Move Plumbing up" }).click();
await page.getByLabel("Notes (optional)").fill("Created in browser E2E");
await page.getByRole("button", { name: "Add Vendor", exact: true }).last().click();
await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toHaveCount(0);
await page.getByLabel("Notes").fill("Created in browser E2E");
await page.getByRole("button", { name: "Add Vendor Company" }).last().click();
await expect(page.getByRole("dialog", { name: "Add Vendor Company" })).toHaveCount(0);
expect(state.updatedBody).toMatchObject({
name: "Gateway Plumbing",
companyPhone: "(314) 555-0100",
@ -444,7 +429,7 @@ test.describe("Vendor directory prototype parity", () => {
await page.getByRole("button", { name: "View vendor Gateway Plumbing" }).click();
const detailDrawer = page.locator(".MuiDrawer-paper").last();
await expect(detailDrawer.getByRole("heading", { name: "Adam Whyte" })).toBeVisible();
await expect(detailDrawer.getByRole("heading", { name: "Gateway Plumbing" })).toBeVisible();
await expect(detailDrawer.getByText("Adam Whyte")).toBeVisible();
await expect(detailDrawer.getByText("72")).toBeVisible();
await expect(
@ -453,9 +438,9 @@ test.describe("Vendor directory prototype parity", () => {
await captureVisual(page, "/tmp/seahaven-vendor-implemented-detail.png");
await detailDrawer.getByRole("button", { name: "Edit" }).click();
await expect(page).toHaveURL(/\/vendors$/);
await detailDrawer.getByLabel("Notes (optional)").fill("Updated in browser E2E");
await detailDrawer.getByRole("button", { name: "Save changes" }).click();
await expect(page).toHaveURL(/\/vendors\/edit\/1$/);
await page.getByLabel("Notes").fill("Updated in browser E2E");
await page.getByRole("button", { name: "Save" }).click();
await expect.poll(() => state.updatedBody?.notes).toBe("Updated in browser E2E");
});
@ -463,18 +448,18 @@ test.describe("Vendor directory prototype parity", () => {
const state = await mockVendorApi(page, { legacyGateway: true });
await page.goto("/vendors");
await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
await page.getByRole("switch", { name: "Active status" }).click();
await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
await page.getByRole("button", { name: "Deactivate", exact: true }).click();
await expect.poll(() => state.deletedId).toBe("1");
await page.getByRole("tab", { name: "Inactive (2)" }).click();
await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
await page.getByRole("button", { name: "View vendor Gateway Plumbing" }).click();
const detailDrawer = page.locator(".MuiDrawer-paper").last();
await detailDrawer.getByRole("switch", { name: "Active status" }).click();
await detailDrawer.getByRole("button", { name: "Save changes" }).click();
await detailDrawer.getByRole("button", { name: "Edit" }).click();
await expect(page).toHaveURL(/\/vendors\/edit\/1$/);
await page.getByRole("switch", { name: "Inactive" }).first().click();
await page.getByRole("button", { name: "Save" }).click();
await expect.poll(() => state.updatedBody).toEqual({ isActive: true });
await detailDrawer.getByRole("button", { name: "Close drawer" }).click();
await page.getByRole("tab", { name: "Active (2)", exact: true }).click();
await expect(page.getByText("Gateway Plumbing").first()).toBeVisible();
});
@ -483,7 +468,7 @@ test.describe("Vendor directory prototype parity", () => {
const state = await mockVendorApi(page);
await page.goto("/vendors");
const addButton = page.getByRole("button", { name: "Add Vendor", exact: true });
const addButton = page.getByRole("button", { name: "+ Add Vendor" });
await addButton.focus();
await page.keyboard.press("Enter");
await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toBeVisible();
@ -492,12 +477,10 @@ test.describe("Vendor directory prototype parity", () => {
await expect(addButton).toBeFocused();
await addButton.click();
await expect(
page.getByRole("button", { name: "Add Vendor", exact: true }).last(),
).toBeEnabled();
await expect(page.getByRole("button", { name: "Add Vendor Company" }).last()).toBeDisabled();
await page.getByRole("combobox", { name: "Company" }).fill("Independent Vendor LLC");
await page.getByLabel("Company Phone (optional)").fill("3145550199");
await page.getByRole("button", { name: "Add Vendor", exact: true }).last().click();
await page.getByLabel("Company Phone").fill("3145550199");
await page.getByRole("button", { name: "Add Vendor Company" }).last().click();
await expect.poll(() => state.createdBody?.name).toBe("Independent Vendor LLC");
expect(state.createdBody?.technicians).toEqual([]);
@ -523,8 +506,7 @@ test.describe("Vendor directory prototype parity", () => {
const blockedState = await mockVendorApi(page, { deactivationBlocked: true });
await page.goto("/vendors");
await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
await page.getByRole("switch", { name: "Active status" }).click();
await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
const blockedDialog = page.getByRole("dialog", { name: "Deactivate Vendor" });
await expect(blockedDialog).toContainText("WO-501 — Emergency boiler repair");
await expect(blockedDialog.getByRole("button", { name: /^Deactivate$/ })).toBeDisabled();
@ -535,8 +517,7 @@ test.describe("Vendor directory prototype parity", () => {
const racedState = await mockVendorApi(page, { deleteConflict: true });
await page.reload();
await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
await page.getByRole("switch", { name: "Active status" }).click();
await page.getByRole("button", { name: "Deactivate vendor" }).first().click();
await page
.getByRole("dialog", { name: "Deactivate Vendor" })
.getByRole("button", {
@ -560,7 +541,6 @@ test.describe("Vendor directory prototype parity", () => {
/Vendor directory unavailable|failed|server error/i,
{ timeout: 15_000 },
);
await captureVisual(page, "/tmp/seahaven-vendor-implemented-mobile-list.png");
await page.getByRole("button", { name: "Open vendor filters" }).click();
const filterDrawer = page.locator(".MuiDrawer-paper").filter({ hasText: "Total Jobs" });
await expect(filterDrawer).toBeVisible();

7
src/app/(protected)/vendors/_components/use-vendor-deactivation.ts vendored
View file

@ -15,7 +15,7 @@ export interface VendorDeactivationState {
confirm: () => void;
}
export function useVendorDeactivation(onSuccess?: () => void): VendorDeactivationState {
export function useVendorDeactivation(): VendorDeactivationState {
const [target, setTarget] = useState<VendorListItem | null>(null);
const [error, setError] = useState<string | null>(null);
const deleteVendor = useDeleteVendor();
@ -39,10 +39,7 @@ export function useVendorDeactivation(onSuccess?: () => void): VendorDeactivatio
if (!target || target.id == null) return;
setError(null);
deleteVendor.mutate(target.id, {
onSuccess: () => {
setTarget(null);
onSuccess?.();
},
onSuccess: () => setTarget(null),
onError: (err: Error) => setError(err.message || "Failed to deactivate vendor"),
});
};

2
src/app/(protected)/vendors/_components/use-vendor-list-state.ts vendored
View file

@ -31,7 +31,7 @@ export interface VendorListState {
export function useVendorListState(): VendorListState {
const [search, setSearch] = useState("");
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(48);
const [pageSize, setPageSize] = useState(12);
const [isActive, setIsActive] = useState(true);
const [appliedFilters, setAppliedFilters] = useState<VendorFilters>(emptyVendorFilters);

36
src/app/(protected)/vendors/_components/use-vendor-roster-form.ts vendored
View file

@ -2,7 +2,6 @@ import { useCallback, useMemo, useState } from "react";
import { useForm, useWatch, type FieldErrors } from "react-hook-form";
import {
emptyVendorCompanyRosterForm,
emptyRosterTechnician,
vendorCompanyRosterSchema,
type VendorCompanyRosterFormValues,
} from "@/domain/vendors/schemas/vendor-roster-schema";
@ -21,30 +20,11 @@ import type {
VendorRosterConflict,
} from "@/domain/vendors/types/vendor";
function withoutBlankNewTechnicians(
values: VendorCompanyRosterFormValues,
): VendorCompanyRosterFormValues {
return {
...values,
technicians: values.technicians.filter(
(technician) =>
technician.id != null ||
Boolean(
technician.contactName.trim() ||
technician.phone.trim() ||
technician.email.trim() ||
technician.tradeSpecialties.trim(),
),
),
};
}
export interface VendorRosterFormProps {
mode: "create" | "update";
vendorId?: string | number;
companyId?: string | number;
onSuccess?: (roster: VendorCompanyRoster) => void;
startWithTechnician?: boolean;
}
export interface VendorRosterForm {
@ -75,7 +55,6 @@ export function useVendorRosterForm({
vendorId,
companyId,
onSuccess,
startWithTechnician = false,
}: VendorRosterFormProps): VendorRosterForm {
const query = useVendorCompanyRoster(
mode === "update" ? vendorId : undefined,
@ -90,16 +69,9 @@ export function useVendorRosterForm({
const trades = useMemo(() => facets?.trades ?? [], [facets]);
const resolver = useVendorRosterResolver(routeRoster);
const createDefaults = useMemo(
() => ({
...emptyVendorCompanyRosterForm,
technicians: startWithTechnician ? [{ ...emptyRosterTechnician }] : [],
}),
[startWithTechnician],
);
const form = useForm<VendorCompanyRosterFormValues>({
resolver,
defaultValues: createDefaults,
defaultValues: emptyVendorCompanyRosterForm,
values: mode === "update" && routeRoster ? toFormValues(routeRoster) : undefined,
mode: "onChange",
});
@ -124,10 +96,10 @@ export function useVendorRosterForm({
}, [routeRoster, watched]);
const resetForm = useCallback(() => {
reset(createDefaults);
reset(emptyVendorCompanyRosterForm);
resetSelection();
clearConflict();
}, [clearConflict, createDefaults, reset, resetSelection]);
}, [clearConflict, reset, resetSelection]);
const committedRoster = mode === "update" ? routeRoster : selection.selectedRoster;
const isUpdate = mode === "update" || selection.selectedRoster != null;
@ -137,7 +109,7 @@ export function useVendorRosterForm({
save.mutate(
{
mode: isUpdate ? "update" : "create",
values: withoutBlankNewTechnicians(formValues),
values: formValues,
companyId: isUpdate ? (committedRoster?.companyId ?? companyId) : undefined,
rowVersion: isUpdate ? committedRoster?.rowVersion : undefined,
originalRoster: mode === "update" ? routeRoster : undefined,

33
src/app/(protected)/vendors/_components/vendor-create-modal.tsx vendored
View file

@ -8,8 +8,8 @@ import {
DialogContent,
DialogTitle,
Stack,
Typography,
} from "@mui/material";
import { Text } from "@/components/ui/text";
import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
import { VendorRosterFormFields } from "./vendor-roster-form-fields";
import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
@ -21,11 +21,7 @@ interface VendorCreateModalProps {
}
export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
const form = useVendorRosterForm({
mode: "create",
onSuccess: onClose,
startWithTechnician: true,
});
const form = useVendorRosterForm({ mode: "create", onSuccess: onClose });
const { resetForm } = form;
useEffect(() => {
@ -37,24 +33,17 @@ export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
open={open}
onClose={form.isSaving ? undefined : onClose}
fullWidth
maxWidth="sm"
maxWidth="md"
aria-labelledby="vendor-create-dialog-title"
slotProps={{
paper: {
role: "dialog",
sx: { maxHeight: "88vh", borderRadius: 2 },
},
}}
slotProps={{ paper: { role: "dialog" } }}
>
<DialogTitle id="vendor-create-dialog-title">
<Text variant="title" as="span">
Add Vendor
</Text>
<Text variant="description" tone="muted" sx={{ mt: 0.5 }}>
Register a vendor company and its technicians.
</Text>
Add Vendor Company
<Typography variant="body2" sx={{ color: "text.secondary", mt: 0.5 }}>
Register a company and add zero, one, or multiple technicians.
</Typography>
</DialogTitle>
<DialogContent sx={{ maxHeight: "55vh" }}>
<DialogContent>
<Stack spacing={2} className="mt-1">
{form.loadErrorMessage !== null && (
<VendorRosterLoadErrorAlert message={form.loadErrorMessage} onRetry={form.retryLoad} />
@ -84,9 +73,9 @@ export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
variant="contained"
type="submit"
form="vendor-create-form"
disabled={form.isSaving}
disabled={form.isSaving || !form.isValid}
>
{form.isSaving ? <CircularProgress size={20} color="inherit" /> : "Add Vendor"}
{form.isSaving ? <CircularProgress size={20} color="inherit" /> : "Add Vendor Company"}
</Button>
</DialogActions>
</Dialog>

418
src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx vendored
View file

@ -1,5 +1,5 @@
import { useEffect, useState, type ReactNode } from "react";
import { Controller, useWatch } from "react-hook-form";
import { useEffect, type ReactNode } from "react";
import { useNavigate } from "react-router";
import CloseIcon from "@mui/icons-material/Close";
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
import LaunchIcon from "@mui/icons-material/Launch";
@ -13,22 +13,15 @@ import {
Drawer,
IconButton,
Link,
List,
ListItem,
Stack,
Switch,
Typography,
} from "@mui/material";
import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
import { VendorRosterFormFields } from "./vendor-roster-form-fields";
import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
import { useVendorRosterForm } from "./use-vendor-roster-form";
import { Text } from "@/components/ui/text";
import type {
VendorCompanyRoster,
VendorListItem,
VendorRosterTechnician,
} from "@/domain/vendors/types/vendor";
import { useVendorCompanyRoster } from "@/domain/vendors/use-cases/use-vendor-company-roster";
import type { VendorCompanyRoster, VendorListItem } from "@/domain/vendors/types/vendor";
const DRAWER_WIDTH = 420;
const DRAWER_WIDTH = 440;
function splitTrades(value: string | undefined): string[] {
return (value ?? "")
@ -40,45 +33,106 @@ function splitTrades(value: string | undefined): string[] {
interface VendorDetailDrawerProps {
open: boolean;
vendor: VendorListItem | null;
startInEdit?: boolean;
onRequestDeactivation?: (vendor: VendorListItem) => void;
onClose: () => void;
}
function SectionTitle({ children }: { children: ReactNode }) {
return (
<Text
variant="label"
tone="muted"
className="font-semibold tracking-[0.06em] uppercase"
sx={{ mb: 1 }}
<Typography
variant="subtitle2"
className="font-semibold uppercase"
sx={{ color: "text.secondary", mb: 1 }}
>
{children}
</Text>
</Typography>
);
}
function Field({ label, value }: { label: string; value?: string }) {
const display = !value || value.trim() === "" ? "—" : value;
function Field({ label, value }: { label: string; value: string }) {
const display = value && value.trim() !== "" ? value : "—";
return (
<Box>
<Text variant="caption" tone="muted" sx={{ display: "block" }}>
<Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
{label}
</Text>
<Text variant="description">{display}</Text>
</Typography>
<Typography variant="body2">{display}</Typography>
</Box>
);
}
function TechnicianEntry({
contactName,
phone,
email,
preferredContact,
tradeSpecialties,
isActive,
totalJobs,
}: {
contactName: string;
phone: string;
email: string;
preferredContact?: string;
tradeSpecialties: string;
isActive: boolean;
totalJobs: number;
}) {
const trades = splitTrades(tradeSpecialties);
return (
<ListItem disableGutters divider>
<Stack spacing={0.5} className="w-full">
<Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
<Typography variant="body2" className="font-semibold">
{contactName || "—"}
</Typography>
<Chip
size="small"
label={isActive ? "Active" : "Inactive"}
color={isActive ? "success" : "default"}
/>
<Typography variant="caption" sx={{ color: "text.secondary" }}>
{totalJobs} jobs
</Typography>
</Stack>
<Stack direction="row" spacing={2} className="flex flex-wrap">
{Boolean(phone) && (
<Link href={`tel:${phone}`} underline="hover">
{phone}
</Link>
)}
{Boolean(email) && (
<Link href={`mailto:${email}`} underline="hover">
{email}
</Link>
)}
</Stack>
<Stack direction="row" spacing={1} sx={{ alignItems: "center", flexWrap: "wrap" }}>
{Boolean(preferredContact) && (
<Typography variant="caption" sx={{ color: "text.secondary" }}>
Prefers {preferredContact}
</Typography>
)}
{trades.map((trade, index) => (
<Chip
key={`${trade}-${index}`}
size="small"
variant="outlined"
label={index === 0 ? `${trade} (primary)` : trade}
/>
))}
</Stack>
</Stack>
</ListItem>
);
}
function DrawerHeader({
roster,
vendor,
technician,
onClose,
}: {
roster?: VendorCompanyRoster;
vendor: VendorListItem | null;
technician?: VendorRosterTechnician;
onClose: () => void;
}) {
return (
@ -87,18 +141,23 @@ function DrawerHeader({
sx={{
alignItems: "center",
justifyContent: "space-between",
px: 2.5,
px: 3,
py: 2,
borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
}}
>
<Box>
<Text id="vendor-detail-drawer-title" variant="title" as="h2" className="font-semibold">
{technician?.contactName || vendor?.contactName || roster?.name || "Vendor company"}
</Text>
<Text variant="description" tone="muted">
{roster?.name || vendor?.companyName || "Vendor details"}
</Text>
<Typography
id="vendor-detail-drawer-title"
variant="subtitle1"
component="h2"
className="font-semibold"
>
{roster?.name || vendor?.companyName || "Vendor company"}
</Typography>
<Typography variant="caption" sx={{ color: "text.secondary" }}>
{roster ? `${roster.technicians.length} technician(s)` : "Vendor details"}
</Typography>
</Box>
<IconButton aria-label="Close drawer" onClick={onClose} size="small">
<CloseIcon fontSize="small" />
@ -108,19 +167,18 @@ function DrawerHeader({
}
function CompanySection({ roster }: { roster: VendorCompanyRoster }) {
const address = [roster.address, roster.city, roster.state, roster.zip]
.filter(Boolean)
.join(", ");
const mapsUrl = roster.googleMapsUrl;
return (
<Stack spacing={1.5}>
<Field label="Company" value={roster.name} />
<Field label="Company Phone" value={roster.companyPhone} />
<Field label="Company Email" value={roster.email} />
<Field label="Address" value={address} />
{Boolean(roster.googleMapsUrl) && (
<Field label="Email" value={roster.email} />
<Field
label="Address"
value={[roster.address, roster.city, roster.state, roster.zip].filter(Boolean).join(", ")}
/>
{Boolean(mapsUrl) && (
<Link
href={roster.googleMapsUrl}
href={mapsUrl}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1"
@ -133,79 +191,49 @@ function CompanySection({ roster }: { roster: VendorCompanyRoster }) {
);
}
function TechnicianSection({ technician }: { technician: VendorRosterTechnician }) {
const trades = splitTrades(technician.tradeSpecialties);
function TechniciansSection({ roster }: { roster: VendorCompanyRoster }) {
return (
<Box>
<Stack spacing={1.5}>
<Field label="Phone" value={technician.phone} />
<Box>
<Text variant="caption" tone="muted" sx={{ display: "block", mb: 0.75 }}>
Trade
</Text>
<Stack direction="row" spacing={0.75} sx={{ flexWrap: "wrap" }}>
{trades.length > 0 ? (
trades.map((trade, index) => (
<Chip key={`${trade}-${index}`} size="small" variant="outlined" label={trade} />
))
) : (
<Text variant="description">—</Text>
)}
</Stack>
</Box>
<Stack direction="row" spacing={4} sx={{ alignItems: "flex-end" }}>
<Box>
<Text variant="title">{technician.totalJobs ?? 0}</Text>
<Text variant="caption" tone="muted" sx={{ display: "block" }}>
Total Jobs
</Text>
</Box>
<Box>
<Text variant="caption" tone="muted" sx={{ display: "block", mb: 0.5 }}>
Status
</Text>
<Chip
size="small"
label={technician.isActive ? "Active" : "Inactive"}
color={technician.isActive ? "success" : "default"}
<SectionTitle>Technicians</SectionTitle>
{roster.technicians.length === 0 ? (
<Typography variant="body2" sx={{ color: "text.secondary" }}>
No technicians assigned to this company.
</Typography>
) : (
<List disablePadding>
{roster.technicians.map((technician) => (
<TechnicianEntry
key={String(technician.id ?? technician.contactName)}
contactName={technician.contactName}
phone={technician.phone}
email={technician.email}
preferredContact={technician.preferredContact}
tradeSpecialties={technician.tradeSpecialties}
isActive={technician.isActive}
totalJobs={technician.totalJobs}
/>
</Box>
</Stack>
</Stack>
))}
</List>
)}
</Box>
);
}
function DrawerBody({
roster,
technician,
}: {
roster: VendorCompanyRoster;
technician?: VendorRosterTechnician;
}) {
function DrawerBody({ roster }: { roster: VendorCompanyRoster }) {
return (
<Stack spacing={3} className="flex-1 overflow-y-auto" sx={{ p: 2.5 }}>
<Box>
<SectionTitle>Company</SectionTitle>
<CompanySection roster={roster} />
</Box>
<Stack spacing={3} className="flex-1 overflow-y-auto" sx={{ px: 3, py: 3 }}>
<SectionTitle>Company</SectionTitle>
<CompanySection roster={roster} />
<Divider />
{technician ? (
<TechnicianSection technician={technician} />
) : (
<Text variant="description" tone="muted">
No technicians assigned to this company.
</Text>
)}
<TechniciansSection roster={roster} />
{Boolean(roster.notes) && (
<>
<Divider />
<Box>
<SectionTitle>Notes</SectionTitle>
<Text variant="description" sx={{ whiteSpace: "pre-wrap" }}>
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
{roster.notes}
</Text>
</Typography>
</Box>
</>
)}
@ -218,8 +246,8 @@ function DrawerActions({ onEdit }: { onEdit: () => void }) {
<Stack
direction="row"
sx={{
px: 2.5,
py: 1.5,
px: 3,
py: 2,
borderTop: (theme) => `1px solid ${theme.palette.divider}`,
alignItems: "center",
justifyContent: "flex-end",
@ -232,143 +260,8 @@ function DrawerActions({ onEdit }: { onEdit: () => void }) {
);
}
function DrawerEditor({
vendor,
onClose,
onSaved,
onRequestDeactivation = () => undefined,
}: {
vendor: VendorListItem;
onClose: () => void;
onSaved: () => void;
onRequestDeactivation: (vendor: VendorListItem) => void;
}) {
const form = useVendorRosterForm({
mode: "update",
vendorId: vendor.id ?? undefined,
companyId: vendor.id == null ? (vendor.companyId ?? undefined) : undefined,
onSuccess: onSaved,
});
const roster = form.roster;
const technicians = useWatch({ control: form.control, name: "technicians" }) ?? [];
const selectedIndex = technicians.findIndex(
(technician) => technician.id != null && String(technician.id) === String(vendor.id),
);
const selectedTotalJobs =
roster?.technicians.find(
(technician) => technician.id != null && String(technician.id) === String(vendor.id),
)?.totalJobs ?? vendor.totalJobs;
if (form.isLoading) {
return <CircularProgress size={28} sx={{ m: "auto" }} />;
}
if (form.isError || !roster) {
return (
<Alert severity="error" sx={{ m: 2 }}>
Failed to load vendor company. Try again.
</Alert>
);
}
return (
<Box
component="form"
id="vendor-drawer-edit-form"
onSubmit={form.handleSubmit(form.submit)}
className="flex min-h-0 flex-1 flex-col"
>
<Stack spacing={2} className="flex-1 overflow-y-auto" sx={{ p: 2.5 }}>
{form.loadErrorMessage !== null && (
<VendorRosterLoadErrorAlert message={form.loadErrorMessage} onRetry={form.retryLoad} />
)}
{form.conflict !== null && (
<VendorRosterConflictAlert conflict={form.conflict} onReload={form.reload} />
)}
<VendorRosterFormFields
control={form.control}
errors={form.errors}
tradeOptions={form.trades}
showTechnicianStatus={false}
/>
{selectedIndex >= 0 && (
<>
<Divider />
<Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
<Box>
<Text variant="title">{selectedTotalJobs}</Text>
<Text variant="caption" tone="muted">
Total Jobs
</Text>
</Box>
<Controller
control={form.control}
name={`technicians.${selectedIndex}.isActive`}
render={({ field }) => (
<Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
<Text variant="description">{field.value ? "Active" : "Inactive"}</Text>
<Switch
checked={Boolean(field.value)}
slotProps={{ input: { "aria-label": "Active status" } }}
onChange={(_event, checked) => {
if (field.value && !checked) onRequestDeactivation(vendor);
else field.onChange(checked);
}}
/>
</Stack>
)}
/>
</Stack>
</>
)}
</Stack>
<Stack
direction="row"
spacing={1.5}
sx={{ p: 2, borderTop: 1, borderColor: "divider", justifyContent: "flex-end" }}
>
<Button onClick={onClose} disabled={form.isSaving}>
Cancel
</Button>
<Button type="submit" variant="contained" disabled={form.isSaving || !form.isValid}>
{form.isSaving ? "Saving..." : "Save changes"}
</Button>
</Stack>
</Box>
);
}
function resolveTechnician(
roster: VendorCompanyRoster | undefined,
vendor: VendorListItem | null,
): VendorRosterTechnician | undefined {
if (!roster || !vendor) return undefined;
const match = roster.technicians.find(
(technician) =>
vendor.id != null && technician.id != null && String(technician.id) === String(vendor.id),
);
if (match) return match;
if (!vendor.contactName) return undefined;
return {
id: vendor.id ?? undefined,
contactName: vendor.contactName,
phone: vendor.phone,
email: vendor.email,
tradeSpecialties: vendor.tradeSpecialties,
isActive: vendor.isActive,
totalJobs: vendor.totalJobs,
};
}
export function VendorDetailDrawer({
open,
vendor,
startInEdit = false,
onRequestDeactivation = () => undefined,
onClose,
}: VendorDetailDrawerProps) {
const [isEditing, setIsEditing] = useState(startInEdit);
export function VendorDetailDrawer({ open, vendor, onClose }: VendorDetailDrawerProps) {
const navigate = useNavigate();
const vendorId = vendor?.id;
const companyId = vendor?.companyId;
const hasVendorId = vendorId != null;
@ -381,30 +274,25 @@ export function VendorDetailDrawer({
!hasVendorId ? (companyId ?? undefined) : undefined,
);
const selectedTechnician = resolveTechnician(roster, vendor);
useEffect(() => {
if (open) setIsEditing(startInEdit);
}, [open, startInEdit, vendor]);
const editHref = hasVendorId
? `/vendors/edit/${vendorId}`
: `/vendors/company/${companyId ?? ""}`;
useEffect(() => {
if (!open) return;
const closeOnEscape = (event: KeyboardEvent) => {
if (event.key === "Escape" && !isEditing) onClose();
if (event.key === "Escape") onClose();
};
window.addEventListener("keydown", closeOnEscape);
return () => window.removeEventListener("keydown", closeOnEscape);
}, [isEditing, onClose, open]);
}, [onClose, open]);
return (
<Drawer
open={open}
onClose={(_event, reason) => {
if (reason === "escapeKeyDown" && isEditing) return;
onClose();
}}
onClose={onClose}
anchor="right"
aria-labelledby="vendor-detail-drawer-title"
ModalProps={{ keepMounted: false }}
@ -416,21 +304,9 @@ export function VendorDetailDrawer({
}}
>
<Stack className="flex h-full flex-col">
<DrawerHeader
roster={roster}
vendor={vendor}
technician={selectedTechnician}
onClose={onClose}
/>
<DrawerHeader roster={roster} vendor={vendor} onClose={onClose} />
{isEditing && vendor ? (
<DrawerEditor
vendor={vendor}
onClose={onClose}
onSaved={() => setIsEditing(false)}
onRequestDeactivation={onRequestDeactivation}
/>
) : isLoading ? (
{isLoading ? (
<Box className="flex flex-1 items-center justify-center">
<CircularProgress size={28} />
</Box>
@ -440,14 +316,14 @@ export function VendorDetailDrawer({
</Alert>
) : roster ? (
<>
<DrawerBody roster={roster} technician={selectedTechnician} />
<DrawerActions onEdit={() => setIsEditing(true)} />
<DrawerBody roster={roster} />
<DrawerActions onEdit={() => navigate(editHref)} />
</>
) : (
<Box className="flex flex-1 items-center justify-center">
<Text variant="description" tone="muted">
<Typography variant="body2" sx={{ color: "text.secondary" }}>
No vendor selected.
</Text>
</Typography>
</Box>
)}
</Stack>

252
src/app/(protected)/vendors/_components/vendor-filter-options.tsx vendored
View file

@ -1,252 +0,0 @@
import type { Dispatch, ReactNode, SetStateAction } from "react";
import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
import TagOutlinedIcon from "@mui/icons-material/TagOutlined";
import {
Accordion,
AccordionDetails,
AccordionSummary,
Autocomplete,
Box,
Button,
Checkbox,
Chip,
Stack,
TextField,
Typography,
} from "@mui/material";
import type {
VendorFacets,
VendorFacetCompany,
VendorFacetJobBucket,
VendorFacetLocation,
} from "@/domain/vendors/types/vendor";
import type { VendorFilters } from "./vendor-filters";
type DraftSetter = Dispatch<SetStateAction<VendorFilters>>;
function FilterSection({
title,
icon,
children,
}: {
title: string;
icon: ReactNode;
children: ReactNode;
}) {
return (
<Accordion disableGutters elevation={0} square sx={{ borderBottom: 1, borderColor: "divider" }}>
<AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${title}-filters-content`}>
<Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
<Box sx={{ color: "primary.main", display: "flex" }}>{icon}</Box>
<Typography variant="subtitle1" className="font-semibold">
{title}
</Typography>
</Stack>
</AccordionSummary>
<AccordionDetails id={`${title}-filters-content`} sx={{ pt: 0, pb: 2.5 }}>
{children}
</AccordionDetails>
</Accordion>
);
}
function CompanyFilter({
options,
draft,
setDraft,
}: {
options: VendorFacetCompany[];
draft: VendorFilters;
setDraft: DraftSetter;
}) {
const allSelected = draft.companies.length === options.length && options.length > 0;
return (
<FilterSection title="Company" icon={<BusinessOutlinedIcon />}>
<Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
<Typography variant="caption" sx={{ color: "text.secondary" }}>
Select vendor companies
</Typography>
<Button
size="small"
onClick={() =>
setDraft((current) => ({
...current,
companies: allSelected ? [] : options.map((company) => company.name),
}))
}
>
{allSelected ? "Clear all" : "Select all"}
</Button>
</Stack>
<Autocomplete
multiple
size="small"
options={options}
getOptionLabel={(option) => (typeof option === "string" ? option : option.name)}
isOptionEqualToValue={(option, value) =>
typeof option === "string" || typeof value === "string"
? option === value
: option.name === value.name
}
value={options.filter((option) => draft.companies.includes(option.name))}
onChange={(_event, value) => {
const next = (value as (string | VendorFacetCompany)[]).map((entry) =>
typeof entry === "string" ? entry : entry.name,
);
setDraft((current) => ({ ...current, companies: next }));
}}
renderOption={(props, option, { selected }) => {
const { key, ...optionProps } = props;
return (
<li key={key} {...optionProps}>
<Checkbox checked={selected} size="small" sx={{ mr: 1 }} />
{option.name}
</li>
);
}}
renderValue={(value, getItemProps) =>
value.map((option, index) => {
const label = typeof option === "string" ? option : option.name;
const { key, ...chipProps } = getItemProps({ index });
return <Chip key={key} size="small" label={label} {...chipProps} />;
})
}
renderInput={(params) => (
<TextField
{...params}
placeholder={draft.companies.length === 0 ? "All companies" : ""}
/>
)}
/>
</FilterSection>
);
}
function TradeFilter({ options, draft, setDraft }: FilterProps<string>) {
return (
<FilterSection title="Trade" icon={<BuildOutlinedIcon />}>
<Autocomplete
multiple
size="small"
options={options}
value={draft.trades}
onChange={(_event, value) =>
setDraft((current) => ({ ...current, trades: value as string[] }))
}
renderValue={(value, getItemProps) =>
value.map((option, index) => {
const { key, ...chipProps } = getItemProps({ index });
return <Chip key={key} size="small" label={option} {...chipProps} />;
})
}
renderInput={(params) => (
<TextField {...params} placeholder={draft.trades.length === 0 ? "All trades" : ""} />
)}
/>
</FilterSection>
);
}
interface FilterProps<T> {
options: T[];
draft: VendorFilters;
setDraft: DraftSetter;
}
function LocationFilter({ options, draft, setDraft }: FilterProps<VendorFacetLocation>) {
return (
<FilterSection title="Location" icon={<LocationOnOutlinedIcon />}>
<Autocomplete
multiple
size="small"
options={options}
getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
isOptionEqualToValue={(option, value) =>
typeof option === "string" || typeof value === "string"
? option === value
: option.label === value.label
}
value={options.filter((option) => draft.locations.includes(option.label))}
onChange={(_event, value) => {
const next = (value as (string | VendorFacetLocation)[]).map((entry) =>
typeof entry === "string" ? entry : entry.label,
);
setDraft((current) => ({ ...current, locations: next }));
}}
renderValue={(value, getItemProps) =>
value.map((option, index) => {
const label = typeof option === "string" ? option : option.label;
const { key, ...chipProps } = getItemProps({ index });
return <Chip key={key} size="small" label={label} {...chipProps} />;
})
}
renderInput={(params) => (
<TextField
{...params}
placeholder={draft.locations.length === 0 ? "All locations" : ""}
/>
)}
/>
</FilterSection>
);
}
function JobCountFilter({ options, draft, setDraft }: FilterProps<VendorFacetJobBucket>) {
return (
<FilterSection title="Total Jobs" icon={<TagOutlinedIcon />}>
<Autocomplete
multiple
size="small"
options={options}
getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
isOptionEqualToValue={(option, value) =>
typeof option === "string" || typeof value === "string"
? option === value
: option.id === value.id
}
value={options.filter((option) => draft.jobBuckets.includes(option.id))}
onChange={(_event, value) => {
const next = (value as (string | VendorFacetJobBucket)[]).map((entry) =>
typeof entry === "string" ? entry : entry.id,
);
setDraft((current) => ({ ...current, jobBuckets: next }));
}}
renderValue={(value, getItemProps) =>
value.map((option, index) => {
const label = typeof option === "string" ? option : option.label;
const { key, ...chipProps } = getItemProps({ index });
return <Chip key={key} size="small" label={label} {...chipProps} />;
})
}
renderInput={(params) => (
<TextField
{...params}
placeholder={draft.jobBuckets.length === 0 ? "All job counts" : ""}
/>
)}
/>
</FilterSection>
);
}
export function VendorFilterOptions({
facets,
draft,
setDraft,
}: {
facets: VendorFacets | undefined;
draft: VendorFilters;
setDraft: DraftSetter;
}) {
return (
<>
<CompanyFilter options={facets?.companies ?? []} draft={draft} setDraft={setDraft} />
<TradeFilter options={facets?.trades ?? []} draft={draft} setDraft={setDraft} />
<LocationFilter options={facets?.locations ?? []} draft={draft} setDraft={setDraft} />
<JobCountFilter options={facets?.jobBuckets ?? []} draft={draft} setDraft={setDraft} />
</>
);
}

239
src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx vendored
View file

@ -1,9 +1,32 @@
import { useEffect, useState } from "react";
import { useEffect, useMemo, useState, type ReactNode } from "react";
import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
import CloseIcon from "@mui/icons-material/Close";
import { Box, Button, Chip, Drawer, IconButton, Stack, Typography } from "@mui/material";
import { VendorFilterOptions } from "./vendor-filter-options";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
import TagOutlinedIcon from "@mui/icons-material/TagOutlined";
import {
Accordion,
AccordionDetails,
AccordionSummary,
Autocomplete,
Box,
Button,
Checkbox,
Chip,
Drawer,
IconButton,
Stack,
TextField,
Typography,
} from "@mui/material";
import type {
VendorFacets,
VendorFacetCompany,
VendorFacetJobBucket,
VendorFacetLocation,
} from "@/domain/vendors/types/vendor";
import { emptyVendorFilters, type VendorFilters } from "./vendor-filters";
import type { VendorFacets } from "@/domain/vendors/types/vendor";
interface VendorFiltersDrawerProps {
open: boolean;
@ -15,6 +38,32 @@ interface VendorFiltersDrawerProps {
const DRAWER_WIDTH = 360;
function FilterSection({
title,
icon,
children,
}: {
title: string;
icon: ReactNode;
children: ReactNode;
}) {
return (
<Accordion disableGutters elevation={0} square sx={{ borderBottom: 1, borderColor: "divider" }}>
<AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${title}-filters-content`}>
<Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
<Box sx={{ color: "primary.main", display: "flex" }}>{icon}</Box>
<Typography variant="subtitle1" className="font-semibold">
{title}
</Typography>
</Stack>
</AccordionSummary>
<AccordionDetails id={`${title}-filters-content`} sx={{ pt: 0, pb: 2.5 }}>
{children}
</AccordionDetails>
</Accordion>
);
}
export function VendorFiltersDrawer({
open,
onClose,
@ -25,12 +74,23 @@ export function VendorFiltersDrawer({
const [draft, setDraft] = useState<VendorFilters>(appliedFilters);
useEffect(() => {
if (open) setDraft(appliedFilters);
if (open) {
setDraft(appliedFilters);
}
}, [open, appliedFilters]);
const companyOptions = useMemo(() => facets?.companies ?? [], [facets]);
const tradeOptions = useMemo(() => facets?.trades ?? [], [facets]);
const locationOptions = useMemo(() => facets?.locations ?? [], [facets]);
const jobBucketOptions = useMemo(() => facets?.jobBuckets ?? [], [facets]);
const activeCount =
draft.companies.length + draft.trades.length + draft.locations.length + draft.jobBuckets.length;
const handleClear = () => {
setDraft(emptyVendorFilters);
};
const handleApply = () => {
onApply(draft);
onClose();
@ -73,7 +133,165 @@ export function VendorFiltersDrawer({
</Stack>
<Box className="flex-1 overflow-y-auto" sx={{ px: 2.5 }}>
<VendorFilterOptions facets={facets} draft={draft} setDraft={setDraft} />
<FilterSection title="Company" icon={<BusinessOutlinedIcon />}>
<Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
<Typography variant="caption" sx={{ color: "text.secondary" }}>
Select vendor companies
</Typography>
<Button
size="small"
onClick={() =>
setDraft((current) => ({
...current,
companies:
current.companies.length === companyOptions.length
? []
: companyOptions.map((company) => company.name),
}))
}
>
{draft.companies.length === companyOptions.length && companyOptions.length > 0
? "Clear all"
: "Select all"}
</Button>
</Stack>
<Autocomplete
multiple
size="small"
options={companyOptions}
getOptionLabel={(option) => (typeof option === "string" ? option : option.name)}
isOptionEqualToValue={(option, value) =>
typeof option === "string" || typeof value === "string"
? option === value
: option.name === value.name
}
value={companyOptions.filter((option) => draft.companies.includes(option.name))}
onChange={(_event, value) => {
const next = (value as (string | VendorFacetCompany)[]).map((entry) =>
typeof entry === "string" ? entry : entry.name,
);
setDraft((current) => ({ ...current, companies: next }));
}}
renderOption={(props, option, { selected }) => {
const { key, ...optionProps } = props;
return (
<li key={key} {...optionProps}>
<Checkbox checked={selected} size="small" sx={{ mr: 1 }} />
{option.name}
</li>
);
}}
renderValue={(value, getItemProps) =>
value.map((option, index) => {
const label = typeof option === "string" ? option : option.name;
const tagProps = getItemProps({ index });
const { key, ...chipProps } = tagProps;
return <Chip key={key} size="small" label={label} {...chipProps} />;
})
}
renderInput={(params) => (
<TextField
{...params}
placeholder={draft.companies.length === 0 ? "All companies" : ""}
/>
)}
/>
</FilterSection>
<FilterSection title="Trade" icon={<BuildOutlinedIcon />}>
<Autocomplete
multiple
size="small"
options={tradeOptions}
value={draft.trades}
onChange={(_event, value) =>
setDraft((current) => ({ ...current, trades: value as string[] }))
}
renderValue={(value, getItemProps) =>
value.map((option, index) => {
const tagProps = getItemProps({ index });
const { key, ...chipProps } = tagProps;
return <Chip key={key} size="small" label={option} {...chipProps} />;
})
}
renderInput={(params) => (
<TextField
{...params}
placeholder={draft.trades.length === 0 ? "All trades" : ""}
/>
)}
/>
</FilterSection>
<FilterSection title="Location" icon={<LocationOnOutlinedIcon />}>
<Autocomplete
multiple
size="small"
options={locationOptions}
getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
isOptionEqualToValue={(option, value) =>
typeof option === "string" || typeof value === "string"
? option === value
: option.label === value.label
}
value={locationOptions.filter((option) => draft.locations.includes(option.label))}
onChange={(_event, value) => {
const next = (value as (string | VendorFacetLocation)[]).map((entry) =>
typeof entry === "string" ? entry : entry.label,
);
setDraft((current) => ({ ...current, locations: next }));
}}
renderValue={(value, getItemProps) =>
value.map((option, index) => {
const label = typeof option === "string" ? option : option.label;
const tagProps = getItemProps({ index });
const { key, ...chipProps } = tagProps;
return <Chip key={key} size="small" label={label} {...chipProps} />;
})
}
renderInput={(params) => (
<TextField
{...params}
placeholder={draft.locations.length === 0 ? "All locations" : ""}
/>
)}
/>
</FilterSection>
<FilterSection title="Total Jobs" icon={<TagOutlinedIcon />}>
<Autocomplete
multiple
size="small"
options={jobBucketOptions}
getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
isOptionEqualToValue={(option, value) =>
typeof option === "string" || typeof value === "string"
? option === value
: option.id === value.id
}
value={jobBucketOptions.filter((option) => draft.jobBuckets.includes(option.id))}
onChange={(_event, value) => {
const next = (value as (string | VendorFacetJobBucket)[]).map((entry) =>
typeof entry === "string" ? entry : entry.id,
);
setDraft((current) => ({ ...current, jobBuckets: next }));
}}
renderValue={(value, getItemProps) =>
value.map((option, index) => {
const label = typeof option === "string" ? option : option.label;
const tagProps = getItemProps({ index });
const { key, ...chipProps } = tagProps;
return <Chip key={key} size="small" label={label} {...chipProps} />;
})
}
renderInput={(params) => (
<TextField
{...params}
placeholder={draft.jobBuckets.length === 0 ? "All job counts" : ""}
/>
)}
/>
</FilterSection>
</Box>
<Stack
@ -85,16 +303,11 @@ export function VendorFiltersDrawer({
borderTop: (theme) => `1px solid ${theme.palette.divider}`,
}}
>
<Button
variant="outlined"
onClick={() => setDraft(emptyVendorFilters)}
disabled={activeCount === 0}
fullWidth
>
<Button variant="outlined" onClick={handleClear} disabled={activeCount === 0} fullWidth>
Clear all
</Button>
<Button variant="contained" onClick={handleApply} fullWidth>
Apply filters
Apply
</Button>
</Stack>
</Stack>

101
src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx vendored
View file

@ -28,7 +28,6 @@ interface VendorRosterFormFieldsProps {
selectedCompanyId?: string | number | null;
onSelectCompany?: (company: VendorFacetCompany | null) => Promise<void>;
onClearSelectedCompany?: (nextName?: string) => void;
showTechnicianStatus?: boolean;
}
function CompanyNameField({
@ -55,7 +54,6 @@ function CompanyNameField({
<TextField
{...field}
label="Company"
placeholder="Start typing a company…"
required
error={Boolean(errors.name)}
helperText={errors.name?.message}
@ -100,9 +98,8 @@ function CompanyNameField({
{...params}
label="Company"
required
placeholder="Start typing a company…"
error={Boolean(errors.name)}
helperText={errors.name?.message}
helperText={errors.name?.message ?? "Choose an existing company or enter a new one"}
inputRef={field.ref}
/>
)}
@ -122,7 +119,10 @@ function CompanyFields({
}: VendorRosterFormFieldsProps) {
return (
<Box>
<Stack spacing={2}>
<Typography variant="subtitle2" className="font-semibold uppercase">
Company
</Typography>
<Stack spacing={2} className="mt-2">
<CompanyNameField
control={control}
errors={errors}
@ -138,13 +138,13 @@ function CompanyFields({
render={({ field }) => (
<TextField
{...field}
label="Company Phone (optional)"
placeholder="(214) 555-0100"
label="Company Phone"
placeholder="(XXX) XXX-XXXX"
inputMode="tel"
value={field.value ?? ""}
onChange={(event) => field.onChange(formatNorthAmericanPhone(event.target.value))}
error={Boolean(errors.companyPhone)}
helperText={errors.companyPhone?.message}
helperText={errors.companyPhone?.message ?? "Phone or email required"}
fullWidth
/>
)}
@ -155,8 +155,7 @@ function CompanyFields({
render={({ field }) => (
<TextField
{...field}
label="Email (optional)"
placeholder="dispatch@vendor.com"
label="Email"
type="email"
error={Boolean(errors.email)}
helperText={errors.email?.message}
@ -168,16 +167,9 @@ function CompanyFields({
<Controller
control={control}
name="address"
render={({ field }) => (
<TextField
{...field}
label="Address (optional)"
placeholder="123 Industrial Pkwy, Dallas, TX 75201"
fullWidth
/>
)}
render={({ field }) => <TextField {...field} label="Address" fullWidth />}
/>
<Stack direction={{ xs: "column", sm: "row" }} spacing={2} sx={{ display: "none" }}>
<Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
<Controller
control={control}
name="city"
@ -202,10 +194,10 @@ function CompanyFields({
render={({ field }) => (
<TextField
{...field}
label="Google Maps URL (optional)"
placeholder="https://maps.google.com/…"
label="Google Maps URL"
placeholder="https://maps.google.com/..."
error={Boolean(errors.googleMapsUrl)}
helperText={errors.googleMapsUrl?.message}
helperText={errors.googleMapsUrl?.message ?? "Must be an HTTPS link"}
fullWidth
/>
)}
@ -214,14 +206,7 @@ function CompanyFields({
control={control}
name="notes"
render={({ field }) => (
<TextField
{...field}
label="Notes (optional)"
placeholder="Internal notes, scheduling preferences, certifications…"
multiline
minRows={2}
fullWidth
/>
<TextField {...field} label="Notes" multiline minRows={2} fullWidth />
)}
/>
</Stack>
@ -236,7 +221,6 @@ interface TechnicianRowProps {
onRemove: () => void;
canRemove: boolean;
tradeOptions: string[];
showStatus: boolean;
}
function TechnicianRow({
@ -246,13 +230,12 @@ function TechnicianRow({
onRemove,
canRemove,
tradeOptions,
showStatus,
}: TechnicianRowProps) {
return (
<Stack spacing={2} className="rounded-md border border-solid border-gray-200 p-3">
<Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
<Typography variant="subtitle2" className="font-semibold">
{index + 1} - TECHNICIAN
Technician {index + 1}
</Typography>
<Tooltip title="Remove technician">
<span>
@ -273,8 +256,7 @@ function TechnicianRow({
render={({ field }) => (
<TextField
{...field}
label="Technician name (optional)"
placeholder="Technician name"
label="Technician Name"
error={Boolean(error?.contactName)}
helperText={error?.contactName?.message}
fullWidth
@ -288,8 +270,8 @@ function TechnicianRow({
render={({ field }) => (
<TextField
{...field}
label="Technician phone (optional)"
placeholder="(000) 000-0000"
label="Technician Phone"
placeholder="(XXX) XXX-XXXX"
inputMode="tel"
value={field.value ?? ""}
onChange={(event) => field.onChange(formatNorthAmericanPhone(event.target.value))}
@ -310,29 +292,26 @@ function TechnicianRow({
error={Boolean(error?.email)}
helperText={error?.email?.message}
fullWidth
sx={{ display: "none" }}
/>
)}
/>
</Stack>
<VendorTradeSpecialtiesField control={control} index={index} tradeOptions={tradeOptions} />
{showStatus && (
<Controller
control={control}
name={`technicians.${index}.isActive`}
render={({ field }) => (
<FormControlLabel
control={
<Switch
checked={field.value}
onChange={(_event, checked) => field.onChange(checked)}
/>
}
label={field.value ? "Active" : "Inactive"}
/>
)}
/>
)}
<Controller
control={control}
name={`technicians.${index}.isActive`}
render={({ field }) => (
<FormControlLabel
control={
<Switch
checked={field.value}
onChange={(_event, checked) => field.onChange(checked)}
/>
}
label={field.value ? "Active" : "Inactive"}
/>
)}
/>
</Stack>
);
}
@ -341,12 +320,10 @@ function TechniciansFieldArray({
control,
errors,
tradeOptions,
showStatus,
}: {
control: Control<VendorCompanyRosterFormValues>;
errors: FieldErrors<VendorCompanyRosterFormValues>;
tradeOptions: string[];
showStatus: boolean;
}) {
const { fields, append, remove } = useFieldArray({ control, name: "technicians" });
@ -389,7 +366,6 @@ function TechniciansFieldArray({
onRemove={() => remove(index)}
canRemove
tradeOptions={tradeOptions}
showStatus={showStatus}
/>
))
)}
@ -399,17 +375,12 @@ function TechniciansFieldArray({
}
export function VendorRosterFormFields(props: VendorRosterFormFieldsProps) {
const { control, errors, tradeOptions = [], showTechnicianStatus = true } = props;
const { control, errors, tradeOptions = [] } = props;
return (
<Stack spacing={3}>
<CompanyFields {...props} />
<Divider />
<TechniciansFieldArray
control={control}
errors={errors}
tradeOptions={tradeOptions}
showStatus={showTechnicianStatus}
/>
<TechniciansFieldArray control={control} errors={errors} tradeOptions={tradeOptions} />
</Stack>
);
}

145
src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx vendored
View file

@ -1,9 +1,13 @@
import { Button, Chip, CircularProgress, Stack, TablePagination } from "@mui/material";
import { Plus, SlidersHorizontal } from "lucide-react";
import { PageHeader } from "@/components/ui/page-header";
import { SearchInput } from "@/components/ui/search-input";
import { Text } from "@/components/ui/text";
import { ToolbarButton } from "@/components/ui/toolbar-button";
import FilterListIcon from "@mui/icons-material/FilterList";
import {
Button,
Chip,
CircularProgress,
Stack,
TablePagination,
TextField,
Typography,
} from "@mui/material";
interface VendorsListToolbarProps {
globalCount: number;
@ -29,44 +33,52 @@ export function VendorsListToolbar({
onAddVendor,
}: VendorsListToolbarProps) {
return (
<PageHeader
surface
className="-mx-4 -mt-4"
title="Vendors / Technicians"
subtitle={`${globalCount} technicians · ${activeCount} active`}
actions={
<>
<SearchInput
value={search}
onChange={onSearchChange}
placeholder="Search name, company, trade…"
aria-label="Search vendors"
inputClassName="h-8 py-0 text-[13px]"
/>
<ToolbarButton
variant="outline"
icon={<SlidersHorizontal size={16} />}
onClick={onOpenFilters}
aria-label="Open vendor filters"
badge={appliedFilterCount}
className="w-[88.609375px] text-[13px]"
>
Filters
</ToolbarButton>
<ToolbarButton
variant="primary"
icon={<Plus size={16} />}
onClick={onAddVendor}
className="w-[115.546875px] border-0 px-3 text-[13px]"
>
Add Vendor
</ToolbarButton>
{isFetching && !isLoading && (
<CircularProgress size={14} aria-label="Refreshing vendors" role="status" />
<Stack
direction={{ xs: "column", md: "row" }}
spacing={2}
sx={{
alignItems: { xs: "stretch", md: "center" },
justifyContent: "space-between",
}}
>
<Stack direction="row" spacing={2} sx={{ alignItems: "baseline" }}>
<Typography variant="h5" component="h1">
Vendors / Technicians
</Typography>
<Typography variant="body2" sx={{ color: "text.secondary" }}>
{globalCount} vendor entries · {activeCount} active
</Typography>
{isFetching && !isLoading && <CircularProgress size={16} />}
</Stack>
<Stack
direction={{ xs: "column", sm: "row" }}
spacing={2}
sx={{ alignItems: { xs: "stretch", sm: "center" } }}
>
<TextField
size="small"
value={search}
onChange={(e) => onSearchChange(e.target.value)}
placeholder="Search name, company, trade..."
className="min-w-[260px]"
/>
<Button
variant="outlined"
onClick={onOpenFilters}
startIcon={<FilterListIcon />}
aria-label="Open vendor filters"
>
Filters
{appliedFilterCount > 0 && (
<Chip size="small" color="primary" label={appliedFilterCount} sx={{ ml: 1 }} />
)}
</>
}
/>
</Button>
<Button variant="contained" onClick={onAddVendor}>
+ Add Vendor
</Button>
</Stack>
</Stack>
);
}
@ -78,21 +90,16 @@ interface AppliedChipEntry {
interface VendorAppliedFiltersBarProps {
chips: AppliedChipEntry[];
resultCount: number;
onClearAll: () => void;
}
export function VendorAppliedFiltersBar({
chips,
resultCount,
onClearAll,
}: VendorAppliedFiltersBarProps) {
export function VendorAppliedFiltersBar({ chips, onClearAll }: VendorAppliedFiltersBarProps) {
if (chips.length === 0) return null;
return (
<Stack direction="row" spacing={1} className="flex flex-wrap items-center">
<Text variant="caption" tone="muted">
{resultCount} {resultCount === 1 ? "technician" : "technicians"} · filtered by
</Text>
<Typography variant="caption" sx={{ color: "text.secondary" }}>
Applied:
</Typography>
{chips.map((chip) => (
<Chip
key={chip.key}
@ -139,31 +146,23 @@ export function VendorsListFooter({
sx={{
alignItems: { xs: "stretch", sm: "center" },
justifyContent: "space-between",
minHeight: 33.5,
mx: -2,
px: 2,
backgroundColor: "var(--color-bg-surface)",
}}
>
<Text variant="caption" as="span" sx={{ color: "#6b7a96", fontSize: 11, lineHeight: 1.5 }}>
<Typography variant="body2" sx={{ color: "text.secondary" }}>
{totalCount} {isActive ? "active" : "inactive"}{" "}
{totalCount === 1 ? "technician" : "technicians"}
{totalCount === 1 ? "vendor entry" : "vendor entries"}
{isFiltered && " · filtered"}
</Text>
<Text variant="caption" as="span" sx={{ color: "#6b7a96", fontSize: 11, lineHeight: 1.5 }}>
{activeCount} active · {inactiveCount} inactive
</Text>
{totalCount > pageSize && (
<TablePagination
component="div"
count={totalCount}
page={page}
onPageChange={(_e, nextPage) => onPageChange(nextPage)}
rowsPerPage={pageSize}
onRowsPerPageChange={(e) => onPageSizeChange(Number(e.target.value))}
rowsPerPageOptions={[24, 48, 96]}
/>
)}
{` · ${activeCount} active · ${inactiveCount} inactive`}
</Typography>
<TablePagination
component="div"
count={totalCount}
page={page}
onPageChange={(_e, nextPage) => onPageChange(nextPage)}
rowsPerPage={pageSize}
onRowsPerPageChange={(e) => onPageSizeChange(Number(e.target.value))}
rowsPerPageOptions={[12, 24, 48]}
/>
</Stack>
);
}

242
src/app/(protected)/vendors/_components/vendors-table.tsx vendored
View file

@ -1,10 +1,11 @@
import { type KeyboardEvent, type MouseEvent } from "react";
import SearchOffOutlinedIcon from "@mui/icons-material/SearchOffOutlined";
import { useNavigate } from "react-router";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
import {
Avatar,
Box,
Chip,
CircularProgress,
IconButton,
Link,
@ -17,8 +18,8 @@ import {
TableHead,
TableRow,
Tooltip,
Typography,
} from "@mui/material";
import { Text } from "@/components/ui/text";
import type { VendorListItem } from "@/domain/vendors/types/vendor";
const TABLE_COLUMNS = [
@ -29,6 +30,9 @@ const TABLE_COLUMNS = [
"Phone",
"Email",
"Total Jobs",
"Status",
"View",
"Edit",
] as const;
function getInitials(name: string): string {
@ -50,34 +54,19 @@ function stopPropagation(event: MouseEvent): void {
event.stopPropagation();
}
function VendorStatus({ isActive }: { isActive: boolean }) {
return (
<Stack direction="row" spacing={1} sx={{ alignItems: "center", pl: 1 }}>
<Box
component="span"
sx={{
width: 6,
height: 6,
borderRadius: "9999px",
backgroundColor: isActive ? "success.main" : "text.secondary",
}}
/>
<Text variant="description">{isActive ? "Active" : "Inactive"}</Text>
</Stack>
);
}
interface VendorTableRowProps {
row: VendorListItem;
onOpenDetail: (row: VendorListItem) => void;
onOpenEdit: (row: VendorListItem) => void;
onOpenDeactivation: (row: VendorListItem) => void;
}
function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps) {
function VendorTableRow({ row, onOpenDetail, onOpenDeactivation }: VendorTableRowProps) {
const navigate = useNavigate();
const trades = splitTrades(row.tradeSpecialties);
const primaryTrade = trades[0] ?? "—";
const extraTrades = trades.length > 1 ? trades.length - 1 : 0;
const locationText = [row.city, row.state].filter(Boolean).join(", ") || "—";
const hasVendorId = row.id != null;
const rowKey = String(row.id ?? `company-${row.companyId ?? ""}`);
const handleKeyDown = (event: KeyboardEvent) => {
@ -99,62 +88,37 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
onKeyDown={handleKeyDown}
>
<TableCell>
<Text variant="description" sx={{ color: "var(--color-foreground)" }}>
{row.companyName || "—"}
</Text>
<Typography className="font-semibold">{row.companyName || "—"}</Typography>
</TableCell>
<TableCell>
<Stack direction="row" spacing={1.25} sx={{ alignItems: "center" }}>
<Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
<Avatar
sx={{
width: 28,
height: 28,
backgroundColor: "var(--color-bg-muted)",
color: "var(--color-primary)",
fontSize: 10.5,
fontWeight: 600,
fontSize: 12,
backgroundColor: "var(--accent, #1976d2)",
}}
>
{getInitials(row.contactName)}
</Avatar>
<Text variant="description" sx={{ color: "var(--color-foreground)" }}>
{row.contactName || "—"}
</Text>
<Typography variant="body2">{row.contactName || "—"}</Typography>
</Stack>
</TableCell>
<TableCell sx={{ color: "var(--color-muted-foreground)" }}>{locationText}</TableCell>
<TableCell sx={{ color: "var(--color-muted-foreground)" }}>
<TableCell>{locationText}</TableCell>
<TableCell>
{primaryTrade === "—" ? (
"—"
) : (
<Stack direction="row" spacing={0.5} sx={{ alignItems: "center" }}>
<span>{primaryTrade}</span>
{extraTrades > 0 && (
<Box
component="span"
sx={{
borderRadius: "9999px",
backgroundColor: "var(--color-bg-muted)",
px: 0.75,
py: 0.25,
fontSize: 10.5,
lineHeight: 1.2,
}}
>
+{extraTrades}
</Box>
)}
{extraTrades > 0 && <Chip size="small" label={`+${extraTrades}`} />}
</Stack>
)}
</TableCell>
<TableCell sx={{ color: "var(--color-muted-foreground)" }}>
<TableCell>
{row.phone ? (
<Link
href={`tel:${row.phone}`}
underline="hover"
color="inherit"
onClick={stopPropagation}
>
<Link href={`tel:${row.phone}`} underline="hover" onClick={stopPropagation}>
{row.phone}
</Link>
) : (
@ -163,53 +127,71 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
</TableCell>
<TableCell>
{row.email ? (
<Link
href={`mailto:${row.email}`}
underline="hover"
sx={{ color: "#6b7a96" }}
onClick={stopPropagation}
>
<Link href={`mailto:${row.email}`} underline="hover" onClick={stopPropagation}>
{row.email}
</Link>
) : (
"—"
)}
</TableCell>
<TableCell align="center">{row.totalJobs ?? 0}</TableCell>
<TableCell>{row.totalJobs ?? 0}</TableCell>
<TableCell>
<VendorStatus isActive={row.isActive} />
<Chip
size="small"
label={row.isActive ? "Active" : "Inactive"}
color={row.isActive ? "success" : "default"}
/>
</TableCell>
<TableCell align="right">
<TableCell align="center">
<Tooltip title="View details">
<IconButton
size="small"
aria-label={`View vendor ${row.companyName}`}
onClick={(event) => {
event.stopPropagation();
onOpenDetail(row);
}}
>
<VisibilityOutlinedIcon fontSize="small" />
</IconButton>
</Tooltip>
</TableCell>
<TableCell align="center">
<Stack
direction="row"
spacing={0.5}
className="vendor-row-actions"
sx={{ alignItems: "center", justifyContent: "flex-end" }}
sx={{ alignItems: "center", justifyContent: "center" }}
>
<Tooltip title="View details">
<IconButton
size="small"
aria-label={`View vendor ${row.companyName}`}
onClick={(event) => {
event.stopPropagation();
onOpenDetail(row);
}}
>
<VisibilityOutlinedIcon fontSize="small" />
</IconButton>
</Tooltip>
<Tooltip title="Edit">
<IconButton
size="small"
aria-label={`Edit vendor ${row.companyName}`}
onClick={(event) => {
event.stopPropagation();
onOpenEdit(row);
navigate(
row.id != null
? `/vendors/edit/${row.id}`
: `/vendors/company/${row.companyId ?? ""}`,
);
}}
>
<EditOutlinedIcon fontSize="small" />
</IconButton>
</Tooltip>
{hasVendorId && row.isActive && (
<Tooltip title="Deactivate">
<IconButton
size="small"
aria-label="Deactivate vendor"
onClick={(event) => {
event.stopPropagation();
onOpenDeactivation(row);
}}
>
<DeleteOutlineIcon fontSize="small" />
</IconButton>
</Tooltip>
)}
</Stack>
</TableCell>
</TableRow>
@ -218,118 +200,50 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
interface VendorsTableProps {
rows: VendorListItem[];
isActive: boolean;
isFiltered: boolean;
isLoading: boolean;
showError: boolean;
onOpenDetail: (row: VendorListItem) => void;
onOpenEdit: (row: VendorListItem) => void;
onOpenDeactivation: (row: VendorListItem) => void;
}
export function VendorsTable({
rows,
isActive,
isFiltered,
isLoading,
showError,
onOpenDetail,
onOpenEdit,
onOpenDeactivation,
}: VendorsTableProps) {
const showEmptyRow = !isLoading && !showError && rows.length === 0;
const columnCount = TABLE_COLUMNS.length + 2;
return (
<TableContainer
component={Paper}
variant="outlined"
sx={{
mt: 2,
mb: 2,
flex: "1 1 auto",
overflow: "auto",
borderRadius: 1.5,
fontSize: 13,
}}
>
<Table
size="small"
stickyHeader
sx={{
minWidth: 1550,
tableLayout: "fixed",
"& .MuiTableCell-head": {
backgroundColor: "var(--color-bg-muted)",
color: "var(--color-foreground)",
fontSize: 10.5,
fontWeight: 700,
letterSpacing: "0.06em",
lineHeight: "24px",
px: 1.75,
py: 1.375,
textTransform: "uppercase",
whiteSpace: "nowrap",
},
"& .MuiTableCell-body": {
fontSize: 13,
px: 1.5,
py: 1,
height: 52,
lineHeight: 1.43,
whiteSpace: "nowrap",
},
"& .vendor-row-actions": {
opacity: { xs: 1, md: 0 },
transition: "opacity 120ms ease",
},
"& .MuiTableRow-root:hover .vendor-row-actions, & .MuiTableRow-root:focus-within .vendor-row-actions":
{
opacity: 1,
},
}}
>
<colgroup>
<col style={{ width: 196.34375 }} />
<col style={{ width: 207.25 }} />
<col style={{ width: 152.703125 }} />
<col style={{ width: 218.15625 }} />
<col style={{ width: 152.703125 }} />
<col style={{ width: 251.90625 }} />
<col style={{ width: 109.078125 }} />
<col style={{ width: 119.984375 }} />
<col style={{ width: 141.875 }} />
</colgroup>
<TableContainer component={Paper} variant="outlined" sx={{ overflowX: "auto" }}>
<Table size="small" sx={{ minWidth: 960 }}>
<TableHead>
<TableRow>
{TABLE_COLUMNS.map((column) => (
<TableCell key={column} align={column === "Total Jobs" ? "center" : "left"}>
<TableCell
key={column}
align={column === "View" || column === "Edit" ? "center" : "left"}
className="font-semibold"
>
{column}
</TableCell>
))}
<TableCell>Status</TableCell>
<TableCell align="right" aria-label="Vendor actions" />
</TableRow>
</TableHead>
<TableBody>
{isLoading ? (
<TableRow>
<TableCell colSpan={columnCount} align="center" className="py-10">
<TableCell colSpan={TABLE_COLUMNS.length} align="center" className="py-10">
<CircularProgress size={28} />
</TableCell>
</TableRow>
) : showEmptyRow ? (
<TableRow>
<TableCell colSpan={columnCount} align="center" className="py-10">
<Stack spacing={1} sx={{ alignItems: "center" }}>
<SearchOffOutlinedIcon sx={{ color: "text.secondary", fontSize: 32 }} />
<Text variant="description" className="font-semibold">
{`No ${isActive ? "active" : "inactive"} technicians found`}
</Text>
<Text variant="caption" tone="muted">
{isFiltered
? "Try a different search, or add a new vendor."
: "Add a vendor to get started."}
</Text>
</Stack>
<TableCell colSpan={TABLE_COLUMNS.length} align="center" className="py-10">
<Typography sx={{ color: "text.secondary" }}>
No vendors match the current filters.
</Typography>
</TableCell>
</TableRow>
) : (
@ -338,7 +252,7 @@ export function VendorsTable({
key={String(row.id ?? `company-${row.companyId ?? ""}`)}
row={row}
onOpenDetail={onOpenDetail}
onOpenEdit={onOpenEdit}
onOpenDeactivation={onOpenDeactivation}
/>
))
)}

125
src/app/(protected)/vendors/index.tsx vendored
View file

@ -23,91 +23,16 @@ interface AppliedChip {
label: string;
}
function statusTabLabel(label: string, count: number) {
return (
<Box className="flex items-center gap-2">
<Box component="span">{label}</Box>
<Box
component="span"
className="min-w-5 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none"
sx={{ backgroundColor: "action.hover", color: "text.secondary" }}
>
{count}
</Box>
</Box>
);
}
function VendorStatusTabs({
isActive,
activeCount,
inactiveCount,
onChange,
}: {
isActive: boolean;
activeCount: number;
inactiveCount: number;
onChange: (isActive: boolean) => void;
}) {
return (
<Tabs
value={isActive ? "active" : "inactive"}
onChange={(_event, value: "active" | "inactive") => onChange(value === "active")}
aria-label="Vendor status"
sx={{
minHeight: 36,
flexShrink: 0,
borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
backgroundColor: "var(--color-bg-surface)",
mx: -2,
px: 1.5,
"& .MuiTab-root": {
minHeight: 36,
px: 2,
py: 0,
fontSize: 13,
fontWeight: 500,
textTransform: "none",
},
"& .MuiTab-root:first-of-type": { width: 102.84375 },
"& .Mui-selected": { fontWeight: 600 },
"& .MuiTabs-indicator": { height: 2 },
}}
>
<Tab
value="active"
label={statusTabLabel("Active", activeCount)}
aria-label={`Active (${activeCount})`}
/>
<Tab
value="inactive"
label={statusTabLabel("Inactive", inactiveCount)}
aria-label={`Inactive (${inactiveCount})`}
/>
</Tabs>
);
}
function describeChips(
filters: VendorFilters,
jobBucketLabels: Map<string, string>,
): AppliedChip[] {
const chips: AppliedChip[] = [];
filters.companies.forEach((value) =>
chips.push({ category: "companies", value, label: `Company: ${value}` }),
);
filters.trades.forEach((value) =>
chips.push({ category: "trades", value, label: `Trade: ${value}` }),
);
filters.locations.forEach((value) =>
chips.push({ category: "locations", value, label: `Location: ${value}` }),
);
filters.companies.forEach((value) => chips.push({ category: "companies", value, label: value }));
filters.trades.forEach((value) => chips.push({ category: "trades", value, label: value }));
filters.locations.forEach((value) => chips.push({ category: "locations", value, label: value }));
filters.jobBuckets.forEach((value) =>
chips.push({
category: "jobBuckets",
value,
label: `Total Jobs: ${jobBucketLabels.get(value) ?? value}`,
}),
chips.push({ category: "jobBuckets", value, label: jobBucketLabels.get(value) ?? value }),
);
return chips;
}
@ -117,12 +42,7 @@ export default function VendorsListPage() {
const [filtersOpen, setFiltersOpen] = useState(false);
const [createOpen, setCreateOpen] = useState(false);
const [detailTarget, setDetailTarget] = useState<VendorListItem | null>(null);
const [detailStartsInEdit, setDetailStartsInEdit] = useState(false);
const closeDetail = () => {
setDetailTarget(null);
setDetailStartsInEdit(false);
};
const deactivation = useVendorDeactivation(closeDetail);
const deactivation = useVendorDeactivation();
const { data: facets } = useVendorFacets(filters.isActive);
const { data, isLoading, isFetching, error } = useVendorsList(filters.listParams);
@ -141,7 +61,7 @@ export default function VendorsListPage() {
const appliedChips = describeChips(filters.appliedFilters, jobBucketLabels);
return (
<Box className="flex h-full flex-col overflow-hidden px-4 pt-4 pb-0">
<Box className="flex flex-col gap-4 p-4">
<VendorsListToolbar
globalCount={activeCount + inactiveCount}
activeCount={activeCount}
@ -154,15 +74,18 @@ export default function VendorsListPage() {
onAddVendor={() => setCreateOpen(true)}
/>
<VendorStatusTabs
isActive={filters.isActive}
activeCount={activeCount}
inactiveCount={inactiveCount}
onChange={filters.setIsActiveWithReset}
/>
<Tabs
value={filters.isActive ? "active" : "inactive"}
onChange={(_event, value: "active" | "inactive") =>
filters.setIsActiveWithReset(value === "active")
}
aria-label="Vendor status"
>
<Tab value="active" label={`Active (${activeCount})`} />
<Tab value="inactive" label={`Inactive (${inactiveCount})`} />
</Tabs>
<VendorAppliedFiltersBar
resultCount={totalCount}
chips={appliedChips.map((chip) => ({
key: `${chip.category}-${chip.value}`,
label: chip.label,
@ -179,18 +102,10 @@ export default function VendorsListPage() {
<VendorsTable
rows={rows}
isActive={filters.isActive}
isFiltered={appliedChips.length > 0 || Boolean(filters.debouncedSearch)}
isLoading={isLoading}
showError={Boolean(error)}
onOpenDetail={(row) => {
setDetailStartsInEdit(false);
setDetailTarget(row);
}}
onOpenEdit={(row) => {
setDetailStartsInEdit(true);
setDetailTarget(row);
}}
onOpenDetail={setDetailTarget}
onOpenDeactivation={deactivation.open}
/>
<VendorsListFooter
@ -218,9 +133,7 @@ export default function VendorsListPage() {
<VendorDetailDrawer
open={Boolean(detailTarget)}
vendor={detailTarget}
startInEdit={detailStartsInEdit}
onRequestDeactivation={deactivation.open}
onClose={closeDetail}
onClose={() => setDetailTarget(null)}
/>
<VendorDeactivationDialog

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

@ -35,6 +35,7 @@ export function buildInlineDraftCreateInput(
pocName: draft.pocName,
pocPhone: draft.pocPhone,
pocNotes: draft.pocNotes,
additionalContacts: draft.additionalContacts ?? [],
scheduleWeekOnly: draft.scheduleWeekOnly,
targetWeek: draft.targetWeek || "",
};

4
src/app/(protected)/workorders/_components/list/table/cells/site-cell.tsx
View file

@ -1,6 +1,7 @@
import { useState } from "react";
import { MapPin } from "lucide-react";
import { formatSitePlace } from "@/domain/locations/mappers/location-mapper";
import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
import type { LocationOption } from "@/domain/work-orders/types/work-order";
import { HighlightText } from "./highlight-text";
import { HoverChevron } from "./hover-chevron";
@ -15,6 +16,7 @@ type SiteCellProps = {
pocName?: string;
pocPhone?: string;
pocNotes?: string;
additionalContacts?: WorkOrderAdditionalContact[];
sites: LocationOption[];
q?: string;
onSave: (patch: SitePatch) => void;
@ -29,6 +31,7 @@ export function SiteCell({
pocName,
pocPhone,
pocNotes,
additionalContacts,
sites,
q,
onSave,
@ -82,6 +85,7 @@ export function SiteCell({
pocName={pocName}
pocPhone={pocPhone}
pocNotes={pocNotes}
additionalContacts={additionalContacts}
sites={sites}
onSave={onSave}
/>

27
src/app/(protected)/workorders/_components/list/table/cells/site-dialog-footer.tsx Normal file
View file

@ -0,0 +1,27 @@
import { Button } from "@/components/ui/button";
import type { SitePatch } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog";
type SiteDialogFooterProps = {
onClose: () => void;
onSave: (patch: SitePatch) => void;
buildPatch: () => SitePatch;
};
export function SiteDialogFooter({ onClose, onSave, buildPatch }: SiteDialogFooterProps) {
return (
<div className="mt-4 flex items-center justify-end gap-2">
<Button variant="ghost" className="min-h-0 px-2 py-1 text-[12px]" onClick={onClose}>
Cancel
</Button>
<Button
className="min-h-0 px-3 py-1 text-[12px]"
onClick={() => {
onSave(buildPatch());
onClose();
}}
>
Save
</Button>
</div>
);
}

48
src/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-fields.tsx
View file

@ -1,47 +1 @@
import {
DLG_INPUT_CLS,
DLG_INPUT_STYLE,
} from "@/app/(protected)/workorders/_components/wizard/wizard-input-styles";
import { Text } from "@/components/ui/text";
import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
type SiteDialogPocFieldsProps = {
pocName: string;
pocPhone: string;
pocNotes: string;
};
export function SiteDialogPocFields({ pocName, pocPhone, pocNotes }: SiteDialogPocFieldsProps) {
return (
<div className="pt-1">
<FieldLabel>Point of Contact</FieldLabel>
<Text as="p" className="mb-2 text-[11px]" style={{ color: "var(--color-text-muted)" }}>
Shown from site/work order records. Board edit saves site code only.
</Text>
<div className="space-y-2">
<input
value={pocName}
readOnly
placeholder="POC name"
className={DLG_INPUT_CLS}
style={{ ...DLG_INPUT_STYLE, opacity: 0.85 }}
/>
<input
value={pocPhone}
readOnly
placeholder="POC phone"
className={DLG_INPUT_CLS}
style={{ ...DLG_INPUT_STYLE, opacity: 0.85 }}
/>
<textarea
value={pocNotes}
readOnly
placeholder="Notes…"
rows={2}
className={`${DLG_INPUT_CLS} resize-none`}
style={{ ...DLG_INPUT_STYLE, fontFamily: "inherit", opacity: 0.85 }}
/>
</div>
</div>
);
}
export { PocContactFields as SiteDialogPocFields } from "@/app/(protected)/workorders/_components/poc/poc-contact-fields";

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

@ -0,0 +1,38 @@
import { PocContactFields } from "@/app/(protected)/workorders/_components/poc/poc-contact-fields";
import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
type SiteDialogPocSectionProps = {
pocName: string;
pocPhone: string;
pocNotes: string;
additionalContacts: WorkOrderAdditionalContact[];
onPocNameChange: (value: string) => void;
onPocPhoneChange: (value: string) => void;
onPocNotesChange: (value: string) => void;
onAdditionalContactsChange: (contacts: WorkOrderAdditionalContact[]) => void;
};
export function SiteDialogPocSection({
pocName,
pocPhone,
pocNotes,
additionalContacts,
onPocNameChange,
onPocPhoneChange,
onPocNotesChange,
onAdditionalContactsChange,
}: SiteDialogPocSectionProps) {
return (
<PocContactFields
pocName={pocName}
pocPhone={pocPhone}
pocNotes={pocNotes}
additionalContacts={additionalContacts}
onPocNameChange={onPocNameChange}
onPocPhoneChange={onPocPhoneChange}
onPocNotesChange={onPocNotesChange}
onAdditionalContactsChange={onAdditionalContactsChange}
helperText="Auto-filled from site records when empty. Additional contacts persist on save."
/>
);
}

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

@ -2,12 +2,12 @@ import { useEffect, useState, type MouseEvent } from "react";
import { MapPin } from "lucide-react";
import { Dialog, DialogContent, DialogTitle } from "@mui/material";
import { WizardFieldSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select";
import { Button } from "@/components/ui/button";
import { Text } from "@/components/ui/text";
import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
import { formatLocationAddressPreview } from "@/domain/locations/mappers/location-mapper";
import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
import { resolveSiteCode } from "@/domain/work-orders/mappers/work-order-board-mapper";
import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
import type { LocationOption } from "@/domain/work-orders/types/work-order";
import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
import {
@ -15,7 +15,8 @@ import {
resolveLocationId,
} from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-helpers";
import { SiteDialogDetailPanel } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-detail-panel";
import { SiteDialogPocFields } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-fields";
import { SiteDialogFooter } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-footer";
import { SiteDialogPocSection } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-section";
export type SitePatch = {
site: string;
@ -24,6 +25,7 @@ export type SitePatch = {
pocName: string;
pocPhone: string;
pocNotes: string;
additionalContacts: WorkOrderAdditionalContact[];
};
type SiteDialogProps = {
@ -34,6 +36,7 @@ type SiteDialogProps = {
pocName?: string;
pocPhone?: string;
pocNotes?: string;
additionalContacts?: WorkOrderAdditionalContact[];
sites: LocationOption[];
onSave: (patch: SitePatch) => void;
};
@ -46,6 +49,7 @@ export function SiteDialog({
pocName = "",
pocPhone = "",
pocNotes = "",
additionalContacts = [],
sites,
onSave,
}: SiteDialogProps) {
@ -54,6 +58,7 @@ export function SiteDialog({
const [pn, setPn] = useState(pocName);
const [pp, setPp] = useState(pocPhone);
const [notes, setNotes] = useState(pocNotes);
const [extraContacts, setExtraContacts] = useState(additionalContacts);
const [pocFilledFor, setPocFilledFor] = useState("");
const {
@ -75,9 +80,9 @@ export function SiteDialog({
setPn(pocName);
setPp(pocPhone);
setNotes(pocNotes);
// Preserve existing WO POC; allow one auto-fill from site detail when POC is empty.
setExtraContacts(additionalContacts);
setPocFilledFor(pocName.trim() || pocPhone.trim() ? resolved : "");
}, [open, value, locationId, pocName, pocPhone, pocNotes, sites]);
}, [open, value, locationId, pocName, pocPhone, pocNotes, additionalContacts, sites]);
useEffect(() => {
if (!open || !locId || !locationDetail || pocFilledFor === locId) {
@ -99,6 +104,16 @@ export function SiteDialog({
}
};
const buildPatch = (): SitePatch => ({
site: code || (selected ? resolveSiteCode(selected) : ""),
location: selected ? extractLocationLabel(selected) : "",
locationId: locId,
pocName: pn,
pocPhone: pp,
pocNotes: notes,
additionalContacts: extraContacts,
});
return (
<Dialog
open={open}
@ -153,34 +168,23 @@ export function SiteDialog({
/>
)}
<SiteDialogPocFields pocName={pn} pocPhone={pp} pocNotes={notes} />
<SiteDialogPocSection
pocName={pn}
pocPhone={pp}
pocNotes={notes}
additionalContacts={extraContacts}
onPocNameChange={setPn}
onPocPhoneChange={setPp}
onPocNotesChange={setNotes}
onAdditionalContactsChange={setExtraContacts}
/>
</div>
<div className="mt-4 flex items-center justify-end gap-2">
<Button
variant="ghost"
className="min-h-0 px-2 py-1 text-[12px]"
onClick={() => onOpenChange(false)}
>
Cancel
</Button>
<Button
className="min-h-0 px-3 py-1 text-[12px]"
onClick={() => {
onSave({
site: code || (selected ? resolveSiteCode(selected) : ""),
location: selected ? extractLocationLabel(selected) : "",
locationId: locId,
pocName: pn,
pocPhone: pp,
pocNotes: notes,
});
onOpenChange(false);
}}
>
Save
</Button>
</div>
<SiteDialogFooter
onClose={() => onOpenChange(false)}
onSave={onSave}
buildPatch={buildPatch}
/>
</DialogContent>
</Dialog>
);

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

@ -52,6 +52,7 @@ export function WoTableInlineRowCells({
pocName={draft.pocName}
pocPhone={draft.pocPhone}
pocNotes={draft.pocNotes}
additionalContacts={draft.additionalContacts}
sites={sites}
onSave={(p) =>
onPatch({
@ -61,6 +62,7 @@ export function WoTableInlineRowCells({
pocName: p.pocName,
pocPhone: p.pocPhone,
pocNotes: p.pocNotes,
additionalContacts: p.additionalContacts,
})
}
/>

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

@ -49,6 +49,7 @@ export function WoTableRowCells({
pocName={row.pocName}
pocPhone={row.pocPhone}
pocNotes={row.pocNotes}
additionalContacts={row.additionalContacts}
sites={sites}
q={search}
onSave={(p) =>
@ -59,6 +60,7 @@ export function WoTableRowCells({
pocName: p.pocName,
pocPhone: p.pocPhone,
pocNotes: p.pocNotes,
additionalContacts: p.additionalContacts,
})
}
/>

165
src/app/(protected)/workorders/_components/poc/poc-contact-fields.tsx Normal file
View file

@ -0,0 +1,165 @@
import { Plus, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Text } from "@/components/ui/text";
import {
DLG_INPUT_CLS,
DLG_INPUT_STYLE,
} from "@/app/(protected)/workorders/_components/wizard/wizard-input-styles";
import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
import {
EMPTY_ADDITIONAL_CONTACT,
type WorkOrderAdditionalContact,
} from "@/domain/work-orders/types/work-order-additional-contact";
type PocContactFieldsProps = {
pocName: string;
pocPhone: string;
pocNotes: string;
additionalContacts: WorkOrderAdditionalContact[];
onPocNameChange: (value: string) => void;
onPocPhoneChange: (value: string) => void;
onPocNotesChange: (value: string) => void;
onAdditionalContactsChange: (contacts: WorkOrderAdditionalContact[]) => void;
helperText?: string;
};
function updateContactAt(
contacts: WorkOrderAdditionalContact[],
index: number,
patch: Partial<WorkOrderAdditionalContact>,
): WorkOrderAdditionalContact[] {
return contacts.map((contact, contactIndex) =>
contactIndex === index ? { ...contact, ...patch } : contact,
);
}
export function PocContactFields({
pocName,
pocPhone,
pocNotes,
additionalContacts,
onPocNameChange,
onPocPhoneChange,
onPocNotesChange,
onAdditionalContactsChange,
helperText,
}: PocContactFieldsProps) {
const handleAddContact = () => {
onAdditionalContactsChange([...additionalContacts, { ...EMPTY_ADDITIONAL_CONTACT }]);
};
const handleRemoveContact = (index: number) => {
onAdditionalContactsChange(
additionalContacts.filter((_, contactIndex) => contactIndex !== index),
);
};
return (
<div className="pt-1">
<FieldLabel>Point of Contact</FieldLabel>
{Boolean(helperText) && (
<Text as="p" className="mb-2 text-[11px]" style={{ color: "var(--color-text-muted)" }}>
{helperText}
</Text>
)}
<div className="space-y-2">
<input
value={pocName}
onChange={(event) => onPocNameChange(event.target.value)}
placeholder="POC name"
className={DLG_INPUT_CLS}
style={DLG_INPUT_STYLE}
/>
<input
value={pocPhone}
onChange={(event) => onPocPhoneChange(event.target.value)}
placeholder="POC phone"
className={DLG_INPUT_CLS}
style={DLG_INPUT_STYLE}
/>
<textarea
value={pocNotes}
onChange={(event) => onPocNotesChange(event.target.value)}
placeholder="Notes…"
rows={2}
className={`${DLG_INPUT_CLS} resize-none`}
style={{ ...DLG_INPUT_STYLE, fontFamily: "inherit" }}
/>
</div>
{additionalContacts.map((contact, index) => (
<div
key={`additional-poc-${index}`}
className="mt-3 space-y-2 rounded-lg p-3"
style={{ border: "1px solid var(--color-border)", background: "var(--color-bg-muted)" }}
>
<div className="flex items-center justify-between gap-2">
<Text
as="p"
className="text-[11px] font-semibold uppercase tracking-wide"
style={{ color: "var(--color-text-muted)" }}
>
Point of contact {index + 2}
</Text>
<button
type="button"
aria-label={`Remove point of contact ${index + 2}`}
className="inline-flex shrink-0 items-center justify-center rounded p-1 transition-colors hover:bg-[var(--color-bg-surface)]"
style={{ color: "var(--color-text-muted)" }}
onClick={() => handleRemoveContact(index)}
>
<Trash2 size={14} />
</button>
</div>
<div className="grid grid-cols-2 gap-2">
<input
value={contact.name}
onChange={(event) =>
onAdditionalContactsChange(
updateContactAt(additionalContacts, index, { name: event.target.value }),
)
}
placeholder="POC name"
className={DLG_INPUT_CLS}
style={DLG_INPUT_STYLE}
/>
<input
value={contact.phone}
onChange={(event) =>
onAdditionalContactsChange(
updateContactAt(additionalContacts, index, { phone: event.target.value }),
)
}
placeholder="POC phone"
className={DLG_INPUT_CLS}
style={DLG_INPUT_STYLE}
/>
</div>
<textarea
value={contact.notes ?? ""}
onChange={(event) =>
onAdditionalContactsChange(
updateContactAt(additionalContacts, index, { notes: event.target.value }),
)
}
placeholder="Notes…"
rows={2}
className={`${DLG_INPUT_CLS} resize-none`}
style={{ ...DLG_INPUT_STYLE, fontFamily: "inherit" }}
/>
</div>
))}
<Button
type="button"
variant="ghost"
className="mt-3 min-h-0 gap-1.5 px-0 py-1 text-[12px]"
style={{ color: "var(--color-primary)" }}
onClick={handleAddContact}
>
<Plus size={14} className="shrink-0" />
Add point of contact
</Button>
</div>
);
}

13
src/app/(protected)/workorders/_components/wizard/wizard-sidebar.tsx
View file

@ -121,6 +121,18 @@ export function WizardSidebar({ step, draft }: WizardSidebarProps) {
);
}
function formatAdditionalPocSummary(draft: WorkOrderWizardDraft): string {
const count = draft.additionalContacts.length;
if (count === 0) {
return "—";
}
const names = draft.additionalContacts.map((contact) => contact.name.trim()).filter(Boolean);
if (names.length > 0) {
return names.join(", ");
}
return `${count} contact${count === 1 ? "" : "s"}`;
}
function WizardSidebarSummary({ draft }: { draft: WorkOrderWizardDraft }) {
const summary: [string, string][] = [
["WO #", draft.woNumber ? `#${draft.woNumber}` : "—"],
@ -144,6 +156,7 @@ function WizardSidebarSummary({ draft }: { draft: WorkOrderWizardDraft }) {
: draft.pocName
: "—",
],
["Additional POCs", formatAdditionalPocSummary(draft)],
["Service", draft.pm || "—"],
["Technician", draft.vendorName || "—"],
["Company", draft.vendorName || "—"],

57
src/app/(protected)/workorders/_components/wizard/wizard-step-location-service.tsx
View file

@ -1,18 +1,11 @@
import { ExternalLink, Info, Mail, MapPin, Phone } from "lucide-react";
import { Text } from "@/components/ui/text";
import { PocContactFields } from "@/app/(protected)/workorders/_components/poc/poc-contact-fields";
import type { LocationOption } from "@/domain/work-orders/types/work-order";
import type { Location } from "@/domain/locations/types/location";
import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
import { WizardFieldSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select";
import {
DLG_INPUT_CLS,
DLG_INPUT_STYLE,
} from "@/app/(protected)/workorders/_components/wizard/wizard-input-styles";
import {
Detail,
WizLabel,
WizSubLabel,
} from "@/app/(protected)/workorders/_components/wizard/wizard-labels";
import { Detail, WizLabel } from "@/app/(protected)/workorders/_components/wizard/wizard-labels";
type ServiceOption = { id: string | number; value: string };
@ -60,6 +53,7 @@ export function WizardStepLocationService({
onPatch({
locationId: id,
locationName: loc?.name ?? "",
additionalContacts: [],
});
}}
/>
@ -112,40 +106,17 @@ export function WizardStepLocationService({
</a>
)}
</div>
<div>
<WizSubLabel>Point of contact</WizSubLabel>
<Text
as="p"
variant="description"
sx={{ fontSize: 11.5, color: "var(--muted-foreground)", margin: "2px 0 8px" }}
>
Auto-filled from records — edit if outdated
</Text>
<div className="grid grid-cols-2 gap-2">
<input
value={draft.pocName}
onChange={(e) => onUpdate("pocName", e.target.value)}
placeholder="POC name"
className={DLG_INPUT_CLS}
style={DLG_INPUT_STYLE}
/>
<input
value={draft.pocPhone}
onChange={(e) => onUpdate("pocPhone", e.target.value)}
placeholder="POC phone"
className={DLG_INPUT_CLS}
style={DLG_INPUT_STYLE}
/>
</div>
<textarea
value={draft.pocNotes}
onChange={(e) => onUpdate("pocNotes", e.target.value)}
placeholder="Notes…"
rows={2}
className={`${DLG_INPUT_CLS} mt-2 resize-none`}
style={{ ...DLG_INPUT_STYLE, fontFamily: "inherit" }}
/>
</div>
<PocContactFields
pocName={draft.pocName}
pocPhone={draft.pocPhone}
pocNotes={draft.pocNotes}
additionalContacts={draft.additionalContacts}
onPocNameChange={(value) => onUpdate("pocName", value)}
onPocPhoneChange={(value) => onUpdate("pocPhone", value)}
onPocNotesChange={(value) => onUpdate("pocNotes", value)}
onAdditionalContactsChange={(contacts) => onUpdate("additionalContacts", contacts)}
helperText="Auto-filled from records — edit if outdated"
/>
</>
)}

9
src/components/ui/page-header.tsx
View file

@ -49,17 +49,10 @@ export function PageHeader({
"m-0 font-display mt-1! text-[30px]! font-extrabold leading-[1.1] tracking-[-0.02em] text-foreground",
eyebrow && "mt-1",
)}
sx={{ fontSize: 30, fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em" }}
>
{title}
</Text>
<Text
variant="description"
as="span"
tone="muted"
when={Boolean(subtitle)}
sx={{ mt: 0.75, fontWeight: 500 }}
>
<Text variant="description" tone="muted" when={Boolean(subtitle)}>
{subtitle}
</Text>
</Stack>

91
src/domain/work-orders/mappers/additional-contacts-mapper.ts Normal file
View file

@ -0,0 +1,91 @@
import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
function asRecord(raw: unknown): Record<string, unknown> {
return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
}
function readString(record: Record<string, unknown>, ...keys: string[]): string {
for (const key of keys) {
const value = record[key];
if (typeof value === "string") {
return value;
}
if (typeof value === "number") {
return String(value);
}
}
return "";
}
function mapContactItem(raw: unknown): WorkOrderAdditionalContact | null {
const item = asRecord(raw);
const name = readString(item, "name", "Name");
const phone = readString(item, "phone", "Phone");
const notes = readString(item, "notes", "Notes");
if (!name.trim() && !phone.trim()) {
return null;
}
const contact: WorkOrderAdditionalContact = {
name,
phone,
};
if (notes.trim()) {
contact.notes = notes;
}
return contact;
}
/** Reads additional POCs from board/detail payloads; missing field yields []. */
export function readAdditionalContacts(
record: Record<string, unknown>,
): WorkOrderAdditionalContact[] {
for (const key of ["additionalContacts", "AdditionalContacts"]) {
const value = record[key];
if (!Array.isArray(value)) {
continue;
}
return value
.map(mapContactItem)
.filter((contact): contact is WorkOrderAdditionalContact => contact !== null);
}
return [];
}
/** Drops empty rows and trims strings; returns undefined when nothing to persist. */
export function normalizeAdditionalContacts(
contacts: WorkOrderAdditionalContact[],
): WorkOrderAdditionalContact[] | undefined {
const out: WorkOrderAdditionalContact[] = [];
for (const raw of contacts) {
const name = raw.name.trim();
const phone = raw.phone.trim();
const notes = raw.notes?.trim();
if (!name && !phone) {
continue;
}
const contact: WorkOrderAdditionalContact = { name, phone };
if (notes) {
contact.notes = notes;
}
out.push(contact);
}
return out.length > 0 ? out : undefined;
}
export function serializeAdditionalContactsForPatch(
contacts: WorkOrderAdditionalContact[],
): string {
return JSON.stringify(normalizeAdditionalContacts(contacts) ?? []);
}

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

@ -1,5 +1,6 @@
import type { WorkOrderBoardCreatePayload } from "@/domain/work-orders/types/work-order-board";
import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
import { normalizeAdditionalContacts } from "@/domain/work-orders/mappers/additional-contacts-mapper";
function trimOrUndefined(value: string | undefined): string | undefined {
const trimmed = value?.trim();
@ -83,6 +84,11 @@ export function assignWizardServicePocFields(
payload.pocNotes = pocNotes;
}
const additionalContacts = normalizeAdditionalContacts(draft.additionalContacts);
if (additionalContacts) {
payload.additionalContacts = additionalContacts;
}
const techPhone = trimOrUndefined(draft.techPhone);
if (techPhone) {

7
src/domain/work-orders/mappers/expand-scalar-board-ops.ts
View file

@ -1,5 +1,7 @@
import type { WorkOrderBoardEditableField } from "@/domain/work-orders/types/work-order-board";
import type { WorkOrderTablePatch } from "@/domain/work-orders/types/work-order-table-row";
import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
import { serializeAdditionalContactsForPatch } from "@/domain/work-orders/mappers/additional-contacts-mapper";
export type BoardFieldOp = {
field: WorkOrderBoardEditableField;
@ -34,6 +36,11 @@ const SCALAR_BOARD_OP_RULES: ScalarBoardOpRule[] = [
{ key: "extraServices", field: "extraServices", toValue: (value) => JSON.stringify(value) },
{ key: "serviceNotes", field: "serviceNotes", toValue: (value) => value as string },
{ key: "flagColor", field: "flagColor", toValue: (value) => (value as string | null) ?? "" },
{
key: "additionalContacts",
field: "additionalContacts",
toValue: (value) => serializeAdditionalContactsForPatch(value as WorkOrderAdditionalContact[]),
},
];
export function expandScalarBoardOps(patch: WorkOrderTablePatch): BoardFieldOp[] {

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

@ -1,3 +1,4 @@
import { readAdditionalContacts } from "@/domain/work-orders/mappers/additional-contacts-mapper";
import { mapApiStatusToWizard } from "@/domain/work-orders/mappers/wizard-draft-mapper";
import {
DOC_STATUS_API,
@ -258,6 +259,7 @@ export function mapWorkOrderTableRow(raw: unknown): WorkOrderTableRow {
pocName: readString(item, "pocName", "PocName", "POCName"),
pocPhone: readString(item, "pocPhone", "PocPhone", "POCPhone"),
pocNotes: readString(item, "pocNotes", "PocNotes", "POCNotes"),
additionalContacts: readAdditionalContacts(item),
dueDate: toDateInputValue(readString(item, "dueDate", "DueDate")),
rescheduleCount: readNumber(item, "rescheduleCount", "RescheduleCount") ?? 0,
carriedOver: readNumber(item, "carriedOver", "CarriedOver") ?? 0,

11
src/domain/work-orders/types/work-order-additional-contact.ts Normal file
View file

@ -0,0 +1,11 @@
export interface WorkOrderAdditionalContact {
name: string;
phone: string;
notes?: string;
}
export const EMPTY_ADDITIONAL_CONTACT: WorkOrderAdditionalContact = {
name: "",
phone: "",
notes: "",
};

2
src/domain/work-orders/types/work-order-board-detail.ts
View file

@ -1,4 +1,5 @@
import type { WorkOrderAuditEntry, WorkOrderComment } from "./work-order-detail";
import type { WorkOrderAdditionalContact } from "./work-order-additional-contact";
import type { CompletionDocStatus, WorkOrderTableRow } from "./work-order-table-row";
/** API media.category: 1=Before, 2=After, 3=Extra, 4=Completion */
@ -26,6 +27,7 @@ export interface WorkOrderBoardDetailInfoApi {
pocName?: string | null;
pocPhone?: string | null;
pocNotes?: string | null;
additionalContacts?: WorkOrderAdditionalContact[] | null;
lifecycleStatus?: number | null;
lifecycleStatusLabel?: string | null;
legacyStatus?: string | null;

6
src/domain/work-orders/types/work-order-board.ts
View file

@ -1,4 +1,5 @@
import type { DateRangeKey } from "./work-order-advanced-filters";
import type { WorkOrderAdditionalContact } from "./work-order-additional-contact";
import type { WorkOrderTableRow } from "./work-order-table-row";
import type { WizardWOStatus, WOType } from "./work-order-wizard";
@ -89,6 +90,7 @@ export interface WorkOrderBoardCreatePayload {
pocName?: string;
pocPhone?: string;
pocNotes?: string;
additionalContacts?: WorkOrderAdditionalContact[];
techPhone?: string;
vendorNotes?: string;
}
@ -119,7 +121,8 @@ export type WorkOrderBoardEditableField =
| "pm"
| "serviceNotes"
| "extraServices"
| "flagColor";
| "flagColor"
| "additionalContacts";
/** Espelha WorkOrderBoardRowDto (JSON camelCase). */
export interface WorkOrderBoardRowApi {
@ -134,6 +137,7 @@ export interface WorkOrderBoardRowApi {
pocName?: string | null;
pocPhone?: string | null;
pocNotes?: string | null;
additionalContacts?: WorkOrderAdditionalContact[] | null;
lifecycleStatus?: number | null;
lifecycleStatusLabel?: string | null;
legacyStatus?: string | null;

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

@ -1,3 +1,4 @@
import type { WorkOrderAdditionalContact } from "./work-order-additional-contact";
import type { WizardWOStatus, WOType } from "./work-order-wizard";
export type CompletionDocStatus = "Yes" | "No" | "NN" | "";
@ -34,6 +35,7 @@ export interface WorkOrderTableRow {
pocName: string;
pocPhone: string;
pocNotes: string;
additionalContacts: WorkOrderAdditionalContact[];
dueDate: string;
rescheduleCount: number;
carriedOver: number;
@ -74,6 +76,7 @@ export interface WorkOrderTableDraft {
pocName: string;
pocPhone: string;
pocNotes: string;
additionalContacts: WorkOrderAdditionalContact[];
scheduleWeekOnly: boolean;
targetWeek: string;
}
@ -101,6 +104,7 @@ export const EMPTY_TABLE_DRAFT: WorkOrderTableDraft = {
pocName: "",
pocPhone: "",
pocNotes: "",
additionalContacts: [],
scheduleWeekOnly: false,
targetWeek: "",
};

5
src/domain/work-orders/types/work-order-wizard.ts
View file

@ -1,3 +1,5 @@
import type { WorkOrderAdditionalContact } from "./work-order-additional-contact";
export const WO_TYPES = ["PM", "Reactive", "Emergency", "Add-On", "Overdue"] as const;
export type WOType = (typeof WO_TYPES)[number];
@ -43,6 +45,8 @@ export interface WorkOrderWizardDraft {
pocName: string;
pocPhone: string;
pocNotes: string;
/** Secondary POCs beyond primary pocName/pocPhone/pocNotes. */
additionalContacts: WorkOrderAdditionalContact[];
scheduleWeekOnly: boolean;
/** Monday ISO when week-only; preferred over deriving from scheduledOn (inline create). */
targetWeek?: string;
@ -75,6 +79,7 @@ export const EMPTY_WIZARD_DRAFT: WorkOrderWizardDraft = {
pocName: "",
pocPhone: "",
pocNotes: "",
additionalContacts: [],
scheduleWeekOnly: false,
targetWeek: "",
scheduleEnd: "",

45
src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx vendored
View file

@ -5,7 +5,6 @@ import { useController } from "react-hook-form";
import { beforeEach, describe, expect, it, vi } from "vitest";
const rosterGet = vi.fn();
const saveMutate = vi.fn();
vi.mock("@/domain/vendors/api/vendor-company-roster-api", () => ({
vendorCompanyRosterApi: { get: (...args: unknown[]) => rosterGet(...args) },
@ -29,10 +28,7 @@ vi.mock("@/domain/vendors/use-cases/use-save-vendor-company-roster", async () =>
const actual = await vi.importActual<
typeof import("@/domain/vendors/use-cases/use-save-vendor-company-roster")
>("@/domain/vendors/use-cases/use-save-vendor-company-roster");
return {
...actual,
useSaveVendorCompanyRoster: () => ({ mutate: saveMutate, isPending: false }),
};
return { ...actual, useSaveVendorCompanyRoster: () => ({ mutate: vi.fn(), isPending: false }) };
});
import { useVendorRosterForm } from "@/app/(protected)/vendors/_components/use-vendor-roster-form";
@ -105,7 +101,6 @@ function deferRoster(): {
describe("useVendorRosterForm load-error handling", () => {
beforeEach(() => {
rosterGet.mockReset();
saveMutate.mockReset();
});
it("shows a safe retryable error when selecting an existing company fetch is rejected", async () => {
@ -201,44 +196,6 @@ describe("useVendorRosterForm load-error handling", () => {
});
});
describe("useVendorRosterForm prototype defaults", () => {
it("does not persist the prototype's untouched optional technician card", () => {
const { result } = renderHook(
() => useVendorRosterForm({ mode: "create", startWithTechnician: true }),
{ wrapper: makeWrapper(createClient()) },
);
act(() => {
result.current.submit({
name: "Independent Vendor LLC",
companyPhone: "(314) 555-0199",
email: "",
address: "",
city: "",
state: "",
zip: "",
googleMapsUrl: "",
notes: "",
technicians: [
{
contactName: "",
phone: "",
email: "",
preferredContact: "Phone",
tradeSpecialties: "",
isActive: true,
},
],
});
});
expect(saveMutate).toHaveBeenCalledWith(
expect.objectContaining({ values: expect.objectContaining({ technicians: [] }) }),
expect.any(Object),
);
});
});
describe("useVendorRosterForm stale-selection handling", () => {
beforeEach(() => {
rosterGet.mockReset();

58
src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx vendored
View file

@ -49,11 +49,11 @@ function rosterWith(technicians: Array<Record<string, unknown>>) {
};
}
describe("VendorDetailDrawer selected-technician display", () => {
describe("VendorDetailDrawer preferred-contact display", () => {
it("renders no preference label when preferredContact is absent", () => {
useVendorCompanyRoster.mockReturnValue(
rosterWith([
{ id: 1, contactName: "Adam", phone: "314-555-0198", isActive: true, totalJobs: 5 },
{ id: 7, contactName: "Adam", phone: "314-555-0198", isActive: true, totalJobs: 5 },
]),
);
@ -62,15 +62,15 @@ describe("VendorDetailDrawer selected-technician display", () => {
withAuth: false,
});
expect(screen.getByRole("heading", { level: 2, name: "Adam" })).toBeInTheDocument();
expect(screen.getByText("Adam")).toBeInTheDocument();
expect(screen.queryByText(/^Prefers/)).not.toBeInTheDocument();
});
it("keeps the retired preferred-contact value out of the detail view", () => {
it("renders the preference label when an explicit preferredContact is present", () => {
useVendorCompanyRoster.mockReturnValue(
rosterWith([
{
id: 1,
id: 7,
contactName: "Adam",
phone: "314-555-0198",
preferredContact: "Email",
@ -85,52 +85,6 @@ describe("VendorDetailDrawer selected-technician display", () => {
withAuth: false,
});
expect(screen.getByRole("heading", { level: 2, name: "Adam" })).toBeInTheDocument();
expect(screen.queryByText(/^Prefers/)).not.toBeInTheDocument();
});
it("falls back to the clicked row when the roster has no matching stable id", () => {
useVendorCompanyRoster.mockReturnValue(
rosterWith([
{
id: 7,
contactName: "Adam Whyte",
phone: "999-999-9999",
isActive: true,
totalJobs: 99,
},
]),
);
renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
route: "/vendors",
withAuth: false,
});
expect(screen.getByText("0")).toBeInTheDocument();
expect(screen.queryByText("999-999-9999")).not.toBeInTheDocument();
});
it("does not expose a status control for a different technician", () => {
useVendorCompanyRoster.mockReturnValue(
rosterWith([
{
id: 7,
contactName: "Different Technician",
phone: "314-555-0101",
email: "",
tradeSpecialties: "Plumbing",
isActive: true,
totalJobs: 10,
},
]),
);
renderWithProviders(
<VendorDetailDrawer open={true} vendor={vendor} startInEdit={true} onClose={vi.fn()} />,
{ route: "/vendors", withAuth: false },
);
expect(screen.queryByRole("switch", { name: "Active status" })).not.toBeInTheDocument();
expect(screen.getByText("Prefers Email")).toBeInTheDocument();
});
});

166
src/test/app/(protected)/vendors/vendors-list.test.tsx vendored
View file

@ -1,14 +1,21 @@
import { screen, within } from "@testing-library/react";
import { screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import VendorsListPage from "@/app/(protected)/vendors/index";
import type { VendorCompanyRoster, VendorListItem } from "@/domain/vendors/types/vendor";
import type { VendorListItem } from "@/domain/vendors/types/vendor";
import { renderWithProviders } from "@/test/test-utils";
const useVendorsList = vi.fn();
const useVendorCompanyRoster = vi.fn();
const useVendorDeactivationImpact = vi.fn();
const mutate = vi.fn();
const navigate = vi.fn();
vi.mock("react-router", async () => {
const actual = await vi.importActual("react-router");
return { ...actual, useNavigate: () => navigate };
});
vi.mock("@/domain/vendors/use-cases/use-vendors-list", () => ({
useVendorsList: (...args: unknown[]) => useVendorsList(...args),
}));
@ -54,32 +61,6 @@ const inactiveVendor = {
isActive: false,
};
const activeRoster: VendorCompanyRoster = {
companyId: "co-1",
rowVersion: "rv-1",
name: "Gateway Plumbing",
companyPhone: "(314) 555-0100",
email: "dispatch@gatewayplumbing.com",
address: "",
city: "St. Louis",
state: "MO",
zip: "",
googleMapsUrl: "",
notes: "",
technicians: [
{
id: 1,
contactName: "Adam Whyte",
phone: "(314) 555-0198",
email: "dispatch@gatewayplumbing.com",
preferredContact: "Email",
tradeSpecialties: "Backflow Preventers",
isActive: true,
totalJobs: 0,
},
],
};
function result(items: VendorListItem[], totalCount: number) {
return {
data: { items, totalCount, page: 1, pageSize: 12 },
@ -90,13 +71,7 @@ function result(items: VendorListItem[], totalCount: number) {
}
function setupDefaults() {
useVendorCompanyRoster.mockReturnValue({
data: undefined,
isLoading: false,
isError: false,
error: null,
refetch: vi.fn(),
});
useVendorCompanyRoster.mockReturnValue({ data: undefined, isLoading: false, error: null });
useVendorDeactivationImpact.mockReturnValue({
data: undefined,
isLoading: false,
@ -105,7 +80,7 @@ function setupDefaults() {
}
describe("VendorsListPage", () => {
it("renders prototype-aligned status and two row actions in both tabs", async () => {
it("renders prototype-aligned status tabs and location, then hides deactivation for inactive rows", async () => {
setupDefaults();
useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
if (params.pageSize === 1) return result([], params.isActive ? 1 : 1);
@ -116,20 +91,11 @@ describe("VendorsListPage", () => {
expect(screen.getByRole("heading", { name: "Vendors / Technicians" })).toBeInTheDocument();
expect(screen.getByText("St. Louis, MO")).toBeInTheDocument();
expect(screen.getByRole("columnheader", { name: "Status" })).toBeInTheDocument();
expect(screen.getByRole("cell", { name: "Active" })).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "View vendor Gateway Plumbing" }),
).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }),
).toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Deactivate vendor" })).not.toBeInTheDocument();
expect(screen.getByRole("button", { name: "Deactivate vendor" })).toBeInTheDocument();
await userEvent.click(screen.getByRole("tab", { name: "Inactive (1)" }));
expect(screen.getByText("Drain Cleaning Bros")).toBeInTheDocument();
expect(screen.getByRole("cell", { name: "Inactive" })).toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Deactivate vendor" })).not.toBeInTheDocument();
});
@ -148,18 +114,39 @@ describe("VendorsListPage", () => {
renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
expect(screen.getByText(/25 active technicians/)).toBeInTheDocument();
expect(screen.queryByText(/3 active technicians/)).not.toBeInTheDocument();
expect(screen.getByText(/25 active vendor entries/)).toBeInTheDocument();
expect(screen.queryByText(/3 active vendor entries/)).not.toBeInTheDocument();
});
it("opens the detail drawer when a row is clicked or activated by keyboard", async () => {
setupDefaults();
useVendorCompanyRoster.mockReturnValue({
data: activeRoster,
data: {
companyId: "co-1",
rowVersion: "rv-1",
name: "Gateway Plumbing",
companyPhone: "(314) 555-0198",
email: "dispatch@gatewayplumbing.com",
address: "",
city: "St. Louis",
state: "MO",
zip: "",
googleMapsUrl: "",
notes: "",
technicians: [
{
id: 1,
contactName: "Adam Whyte",
phone: "(314) 555-0198",
email: "dispatch@gatewayplumbing.com",
preferredContact: "Email",
tradeSpecialties: "Backflow Preventers",
isActive: true,
},
],
},
isLoading: false,
isError: false,
error: null,
refetch: vi.fn(),
});
useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
if (params.pageSize === 1) return result([], 1);
@ -174,18 +161,11 @@ describe("VendorsListPage", () => {
row.focus();
await userEvent.keyboard("{Enter}");
expect(screen.getByRole("heading", { level: 2, name: "Adam Whyte" })).toBeInTheDocument();
expect(screen.getByRole("heading", { level: 2, name: "Gateway Plumbing" })).toBeInTheDocument();
});
it("blocks deactivation when the preflight reports open work orders", async () => {
setupDefaults();
useVendorCompanyRoster.mockReturnValue({
data: activeRoster,
isLoading: false,
isError: false,
error: null,
refetch: vi.fn(),
});
useVendorDeactivationImpact.mockReturnValue({
data: {
vendorId: 1,
@ -209,8 +189,7 @@ describe("VendorsListPage", () => {
renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
await userEvent.click(screen.getByRole("button", { name: "Deactivate vendor" }));
expect(
screen.getByText(/cannot be deactivated because it still has open work orders/),
@ -220,51 +199,9 @@ describe("VendorsListPage", () => {
expect(mutate).not.toHaveBeenCalled();
});
it("preserves inline edits when deactivation is cancelled", async () => {
it("navigates to the vendor edit route when the table Edit control is clicked", async () => {
setupDefaults();
useVendorCompanyRoster.mockReturnValue({
data: activeRoster,
isLoading: false,
isError: false,
error: null,
refetch: vi.fn(),
});
useVendorDeactivationImpact.mockReturnValue({
data: { vendorId: 1, canDeactivate: true, openWorkOrders: [] },
isLoading: false,
error: null,
});
useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
if (params.pageSize === 1) return result([], 1);
return params.isActive ? result([activeVendor], 1) : result([], 0);
});
renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
const company = screen.getByRole("textbox", { name: "Company" });
await userEvent.clear(company);
await userEvent.type(company, "Draft Company Name");
await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
await userEvent.click(
within(screen.getByRole("dialog", { name: "Deactivate Vendor" })).getByRole("button", {
name: "Cancel",
}),
);
expect(company).toBeInTheDocument();
expect(company).toHaveValue("Draft Company Name");
});
it("opens inline edit when the table Edit control is clicked", async () => {
setupDefaults();
useVendorCompanyRoster.mockReturnValue({
data: activeRoster,
isLoading: false,
isError: false,
error: null,
refetch: vi.fn(),
});
navigate.mockClear();
useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
if (params.pageSize === 1) return result([], 1);
return params.isActive ? result([activeVendor], 1) : result([], 0);
@ -274,20 +211,16 @@ describe("VendorsListPage", () => {
await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
expect(screen.getByRole("button", { name: "Save changes" })).toBeInTheDocument();
expect(screen.getByRole("textbox", { name: "Company" })).toHaveValue("Gateway Plumbing");
expect(navigate).toHaveBeenCalledWith("/vendors/edit/1");
expect(
screen.queryByRole("heading", { level: 2, name: "Gateway Plumbing" }),
).not.toBeInTheDocument();
});
it("opens inline company edit when the row has no vendor id", async () => {
it("navigates to the company route when editing a vendor without a vendor id", async () => {
setupDefaults();
navigate.mockClear();
const companyOnlyVendor = { ...activeVendor, id: null, companyId: "co-9" };
useVendorCompanyRoster.mockReturnValue({
data: { ...activeRoster, companyId: "co-9", technicians: [] },
isLoading: false,
isError: false,
error: null,
refetch: vi.fn(),
});
useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
if (params.pageSize === 1) return result([], 1);
return params.isActive ? result([companyOnlyVendor], 1) : result([], 0);
@ -297,7 +230,6 @@ describe("VendorsListPage", () => {
await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
expect(screen.getByRole("button", { name: "Save changes" })).toBeInTheDocument();
expect(screen.getByRole("textbox", { name: "Company" })).toHaveValue("Gateway Plumbing");
expect(navigate).toHaveBeenCalledWith("/vendors/company/co-9");
});
});

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

@ -95,6 +95,7 @@ const canceledRow: WorkOrderTableRow = {
pocName: "",
pocPhone: "",
pocNotes: "",
additionalContacts: [],
dueDate: "",
rescheduleCount: 0,
carriedOver: 0,

67
src/test/domain/work-orders/mappers/additional-contacts-mapper.test.ts Normal file
View file

@ -0,0 +1,67 @@
import { describe, expect, it } from "vitest";
import {
normalizeAdditionalContacts,
readAdditionalContacts,
serializeAdditionalContactsForPatch,
} from "@/domain/work-orders/mappers/additional-contacts-mapper";
describe("readAdditionalContacts", () => {
it("returns [] when field is missing", () => {
expect(readAdditionalContacts({ id: 1 })).toEqual([]);
});
it("maps camelCase and PascalCase arrays", () => {
expect(
readAdditionalContacts({
additionalContacts: [{ name: "Alex", phone: "555-0100", notes: "Gate code" }],
}),
).toEqual([{ name: "Alex", phone: "555-0100", notes: "Gate code" }]);
expect(
readAdditionalContacts({
AdditionalContacts: [{ Name: "Sam", Phone: "555-0200" }],
}),
).toEqual([{ name: "Sam", phone: "555-0200" }]);
});
it("drops empty rows", () => {
expect(
readAdditionalContacts({
additionalContacts: [
{ name: "", phone: "" },
{ name: "Pat", phone: "111" },
],
}),
).toEqual([{ name: "Pat", phone: "111" }]);
});
});
describe("normalizeAdditionalContacts", () => {
it("trims and omits empty notes", () => {
expect(
normalizeAdditionalContacts([
{ name: " Alex ", phone: " 555 ", notes: " " },
{ name: "", phone: "" },
]),
).toEqual([{ name: "Alex", phone: "555" }]);
});
it("returns undefined when all rows are empty", () => {
expect(normalizeAdditionalContacts([{ name: "", phone: "" }])).toBeUndefined();
});
});
describe("serializeAdditionalContactsForPatch", () => {
it("JSON-stringifies normalized contacts for board PATCH", () => {
expect(
serializeAdditionalContactsForPatch([
{ name: "Alex", phone: "555-0100" },
{ name: "", phone: "" },
]),
).toBe('[{"name":"Alex","phone":"555-0100"}]');
});
it("serializes empty array when nothing to persist", () => {
expect(serializeAdditionalContactsForPatch([])).toBe("[]");
});
});

4
src/test/domain/work-orders/mappers/work-order-board-mapper.test.ts
View file

@ -94,6 +94,8 @@ describe("mapWizardDraftToBoardCreatePayload", () => {
pocNotes: "Call before arrival",
additionalContacts: [{ name: "Backup Lead", phone: "+1 555-0101", notes: "After hours" }],
techPhone: "+1 555-0199",
vendorNotes: "Gate code 4421",
@ -137,6 +139,8 @@ describe("mapWizardDraftToBoardCreatePayload", () => {
vendorNotes: "Gate code 4421",
locationId: 12,
additionalContacts: [{ name: "Backup Lead", phone: "+1 555-0101", notes: "After hours" }],
});
expect(payload.trade).toBeUndefined();

13
src/test/domain/work-orders/mappers/work-order-board-patch-mapper.test.ts
View file

@ -103,6 +103,19 @@ describe("expandTablePatchToBoardFieldOps", () => {
]);
});
it("emits additionalContacts as serialized JSON for board PATCH", () => {
expect(
expandTablePatchToBoardFieldOps({
additionalContacts: [{ name: "Alex", phone: "555-0100", notes: "Gate" }],
}),
).toEqual([
{
field: "additionalContacts",
value: JSON.stringify([{ name: "Alex", phone: "555-0100", notes: "Gate" }]),
},
]);
});
it("ignores local-only companion keys when expanding vendor/site", () => {
expect(
expandTablePatchToBoardFieldOps({

10
src/test/domain/work-orders/mappers/work-order-mapper.test.ts
View file

@ -109,6 +109,7 @@ describe("mapWorkOrderTableRow (board DTO)", () => {
expect(row.serviceNotes).toBe("service notes");
expect(row.extraServices).toEqual(["Filter change", "Coil clean"]);
expect(row.docStatus).toBe("Yes");
expect(row.additionalContacts).toEqual([]);
expect(row.dayGroup).toBe("07/15");
expect(row.flagColor).toBe("#EF4444");
});
@ -119,4 +120,13 @@ describe("mapWorkOrderTableRow (board DTO)", () => {
expect(mapWorkOrderTableRow({ id: 1, flagColor: "" }).flagColor).toBeNull();
expect(mapWorkOrderTableRow({ id: 1, FlagColor: "#3B82F6" }).flagColor).toBe("#3B82F6");
});
it("maps additionalContacts from board rows", () => {
expect(
mapWorkOrderTableRow({
id: 1,
additionalContacts: [{ name: "Alex", phone: "555-0100" }],
}).additionalContacts,
).toEqual([{ name: "Alex", phone: "555-0100" }]);
});
});

1
src/test/domain/work-orders/utils/slide-over-draft.test.ts
View file

@ -35,6 +35,7 @@ function baseRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow
pocName: "",
pocPhone: "",
pocNotes: "",
additionalContacts: [],
dueDate: "2026-07-20",
rescheduleCount: 0,
carriedOver: 0,

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

@ -38,6 +38,7 @@ function makeRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow
pocName: "",
pocPhone: "",
pocNotes: "",
additionalContacts: [],
dueDate: "2026-06-30",
rescheduleCount: 0,
carriedOver: 0,

37
tmp/pr-descriptions/pr6-multi-poc.md Normal file
View file

@ -0,0 +1,37 @@
## Jira
- [SH-218](https://luby-us.atlassian.net/browse/SH-218) — multiple additional contacts
- Related: [SH-108](https://luby-us.atlassian.net/browse/SH-108)
## QA residual
- Pass-UI / Blocked-BE until `additionalContacts` lands. Documented in pending BE contract.
## Summary
- Add `additionalContacts[]` (`{ name, phone, notes? }`) across board types, table rows, wizard draft, create payload, and PATCH expansion.
- Site dialog and wizard step 2 share editable primary POC fields plus **+ Add point of contact** for POC 2+; wizard sidebar summarizes additional contacts.
- Missing backend field tolerates as `[]`; normalized contacts persist via `field: "additionalContacts"` JSON PATCH and POST create.
## Scope
**In:** `additionalContacts` types/mappers (create, detail row, PATCH); Site dialog; wizard step 2; persist + display POC 2+.
**Out:** Add technician (PR7), severity (PR2/PR5), filters, uplift (PR3–PR5).
## Backend contract
See `docs/work-orders/pending-be-contract.md` — confirm `additionalContacts[]` on GET board/detail, POST create, and PATCH before production. Until then FE sends typed payloads and reads missing field as `[]`.
## Test plan
- [ ] Open Site dialog on a board row → edit primary POC, add a second contact, Save → network PATCH includes `additionalContacts` JSON.
- [ ] New WO wizard step 2 → add additional POC → create payload includes `additionalContacts`.
- [ ] Reload board row with BE returning `additionalContacts` → Site dialog shows stored POC 2+.
- [ ] BE omitting `additionalContacts` → no UI errors; lists render empty.
- [ ] `npm run verify` green.
## Notes
- Primary POC remains `pocName` / `pocPhone` / `pocNotes`; `additionalContacts` holds POC 2+ only.
- Site save still PATCHes `siteCode`; POC scalar fields remain local-only cache until BE exposes scalar PATCH.