fix(work-orders): make board-api head build in isolation

Include wizard-service-notes-fields in this slice, keep ApiError export,
and align JSX/boolean lint plus save-id wiring after rebase onto dev.
This commit is contained in:
Arthur Bassi 2026-07-27 10:59:28 -03:00
parent dffa30f27a
commit e1ea198319
10 changed files with 166 additions and 19 deletions

View file

@ -172,7 +172,7 @@ export function PMTypeCell({
</div>
<div className="max-h-52 overflow-y-auto">
{onSaveDetails ? (
{Boolean(onSaveDetails) && (
<button
type="button"
onClick={() => {
@ -191,7 +191,7 @@ export function PMTypeCell({
>
<Plus size={12} className="shrink-0" /> Add service and notes
</button>
) : null}
)}
{filtered.map((pm) => (
<button
key={pm}

View file

@ -65,11 +65,11 @@ export function ServiceNotesDialog({
>
<Wrench size={16} style={{ color: "var(--color-text-muted)" }} />
Service &amp; Notes
{woNumber ? (
{Boolean(woNumber) && (
<span style={{ fontSize: 13, fontWeight: 400, color: "var(--color-text-muted)" }}>
#{woNumber}
</span>
) : null}
)}
</DialogTitle>
<DialogContent
className="space-y-4"

View file

@ -206,10 +206,10 @@ export function SiteDialog({
<>
<Detail icon={MapPin} text={addressPreview || selected?.name || code || "—"} />
{Boolean(locationDetail.phone) && (
<Detail icon={Phone} text={locationDetail.phone} />
<Detail icon={Phone} text={locationDetail.phone ?? ""} />
)}
{Boolean(locationDetail.contactEmail) && (
<Detail icon={Mail} text={locationDetail.contactEmail} />
<Detail icon={Mail} text={locationDetail.contactEmail ?? ""} />
)}
{Boolean(addressPreview) && (
<a

View file

@ -215,14 +215,14 @@ export function VendorDialog({
<div style={{ fontSize: 13, fontWeight: 500, color: "var(--foreground)" }}>
{resolvedCompany || "—"}
</div>
{selectedDistance ? (
{Boolean(selectedDistance) && (
<span
className="shrink-0 text-[11px]"
style={{ color: "var(--muted-foreground)" }}
>
{selectedDistance}
</span>
) : null}
)}
</div>
{Boolean(selectedVendor?.contactName) && (
<Detail icon={User} text={selectedVendor?.contactName ?? ""} />

View file

@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { Calendar as CalendarIcon, X } from "lucide-react";
import { Text } from "@/components/ui/text";
const TOAST_DURATION_MS = 6000;
@ -37,9 +38,9 @@ export function RescheduleToast({
<div className="flex items-start gap-2.5 p-3">
<CalendarIcon size={16} className="mt-0.5 shrink-0" style={{ color: "var(--primary)" }} />
<button type="button" onClick={onNavigate} className="flex-1 text-left hover:opacity-80">
<p style={{ fontSize: 13 }}>
<Text as="p" style={{ fontSize: 13 }}>
{message} <span style={{ color: "var(--primary)", fontWeight: 500 }}>{linkLabel}</span>
</p>
</Text>
</button>
<button type="button" onClick={onDismiss} title="Dismiss" className="shrink-0">
<X size={14} />

View file

@ -3,7 +3,6 @@ import { Dialog } from "@mui/material";
import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
import { Text } from "@/components/ui/text";
import { useDropdownOptionsByCategory } from "@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category";
import { mapWizardDraftToFormValues } from "@/domain/work-orders/mappers/wizard-draft-mapper";
import { isWoWizardMockEnabled } from "@/domain/work-orders/mocks/is-wo-wizard-mock-enabled";
import {
getMockWoWizardLocationDetail,
@ -150,7 +149,7 @@ export function NewWoWizard({ open, onOpenChange, users }: NewWoWizardProps) {
}
};
const handleCreate = () => createMutation.mutate(mapWizardDraftToFormValues(draft));
const handleCreate = () => createMutation.mutate(draft);
return (
<Dialog

View file

@ -0,0 +1,140 @@
import type { ReactNode } from "react";
import { Check } from "lucide-react";
import { getPmTypeIcon } from "@/app/(protected)/workorders/_components/list/table/pm-type-icons";
import {
DLG_INPUT_CLS,
DLG_INPUT_STYLE,
} from "@/app/(protected)/workorders/_components/wizard/wizard-input-styles";
type WizardServiceNotesFieldsProps = {
services: { id: string | number; value: string }[];
sel: string[];
onToggle: (service: string) => void;
note: string;
setNote: (v: string) => void;
search: string;
setSearch: (v: string) => void;
};
function SvcSectionLabel({ children }: { children: ReactNode }) {
return (
<div
style={{
fontFamily: "var(--font-mono)",
fontSize: 10,
fontWeight: 600,
letterSpacing: "0.06em",
textTransform: "uppercase",
color: "var(--color-text-muted)",
marginBottom: 6,
}}
>
{children}
</div>
);
}
/** Multi-select services + notes — mirrors design ServiceNotesFields (wizard inline). */
export function WizardServiceNotesFields({
services,
sel,
onToggle,
note,
setNote,
search,
setSearch,
}: WizardServiceNotesFieldsProps) {
const filtered = search
? services.filter((s) => s.value.toLowerCase().includes(search.toLowerCase()))
: services;
return (
<>
<div>
<SvcSectionLabel>Services</SvcSectionLabel>
<input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search services…"
className="mb-1.5 w-full rounded px-2 py-1.5 text-[12px] focus:outline-none focus:ring-1"
style={{
border: "1px solid var(--color-border)",
color: "var(--color-text-primary)",
background: "var(--color-bg-surface)",
}}
/>
<div
className="rounded"
style={{ maxHeight: 200, overflowY: "auto", border: "1px solid var(--color-border)" }}
>
{filtered.map((s) => {
const checked = sel.includes(s.value);
const isPrimary = checked && sel[0] === s.value;
const Icon = getPmTypeIcon(s.value);
return (
<button
key={String(s.id)}
type="button"
onClick={() => onToggle(s.value)}
className="flex w-full items-center gap-2 px-2 py-1.5 text-left transition-colors hover:bg-[#F9FAFB]"
>
<span
className="flex shrink-0 items-center justify-center"
style={{
width: 16,
height: 16,
borderRadius: 4,
border: `1px solid ${checked ? "var(--color-primary)" : "var(--color-border)"}`,
background: checked ? "var(--color-primary)" : "var(--color-bg-surface)",
}}
>
{checked && <Check size={11} style={{ color: "#fff" }} />}
</span>
<Icon size={13} className="shrink-0" style={{ color: "var(--color-text-muted)" }} />
<span
className="min-w-0 flex-1 truncate text-[13px]"
style={{ color: "var(--color-text-primary)" }}
>
{s.value}
</span>
{isPrimary && (
<span
style={{
fontFamily: "var(--font-mono)",
fontSize: 10,
fontWeight: 600,
letterSpacing: "0.06em",
textTransform: "uppercase",
color: "var(--color-primary)",
background: "var(--color-primary-tint)",
padding: "1px 6px",
borderRadius: 4,
}}
>
Primary
</span>
)}
</button>
);
})}
{filtered.length === 0 && (
<div className="px-2 py-3 text-[12px]" style={{ color: "var(--color-text-muted)" }}>
No services match.
</div>
)}
</div>
</div>
<div style={{ marginTop: 16 }}>
<SvcSectionLabel>Notes / Issue Detail</SvcSectionLabel>
<textarea
rows={3}
value={note}
onChange={(e) => setNote(e.target.value)}
placeholder="Describe the specific issue, location details, door number, etc."
className={`${DLG_INPUT_CLS} resize-none`}
style={{ ...DLG_INPUT_STYLE, fontSize: 13, fontFamily: "inherit" }}
/>
</div>
</>
);
}

View file

@ -103,7 +103,7 @@ export default function WorkOrdersListPage() {
/>
)}
{tableData.error && (
{Boolean(tableData.error) && (
<QueryErrorPanel
className="mb-2 shrink-0"
compact

View file

@ -39,20 +39,20 @@ export function useSaveWorkOrder() {
values,
vendorAssignment,
}: SaveWorkOrderInput): Promise<SaveWorkOrderResult> => {
const savedWorkOrder = workOrderId
? await workOrdersApi.update(workOrderId, values)
: await workOrdersApi.create(values);
const savedWorkOrderId = workOrderId
? await workOrdersApi.update(workOrderId, values).then(() => workOrderId)
: await workOrdersApi.create(values).then((created) => created.id);
let assignment: VendorAssignmentResult | undefined;
if (vendorAssignment) {
try {
assignment = await vendorOperationsApi.assignVendor(savedWorkOrder.id, vendorAssignment);
assignment = await vendorOperationsApi.assignVendor(savedWorkOrderId, vendorAssignment);
} catch {
throw new PartialWorkOrderSaveError(savedWorkOrder.id);
throw new PartialWorkOrderSaveError(savedWorkOrderId);
}
}
return { workOrderId: savedWorkOrder.id, assignment };
return { workOrderId: savedWorkOrderId, assignment };
},
onSuccess: ({ workOrderId, assignment }) => {
void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });

View file

@ -81,6 +81,9 @@ const canceledRow: WorkOrderTableRow = {
location: "Chicago Loop",
locationId: "mock-loc-1",
pm: "HVAC — Quarterly PM",
serviceNotes: "",
extraServices: [],
vendorId: "",
company: "",
tech: "",
techPhone: "",
@ -102,6 +105,10 @@ const canceledRow: WorkOrderTableRow = {
mediaCount: 0,
title: "",
priority: "",
primaryDispatchId: null,
rowVersion: "",
dispatchRowVersion: "",
flagColor: null,
};
vi.mock("@/app/(protected)/workorders/_hooks/use-work-orders-table-data", () => ({