From e1ea198319dbac225ea6c3516d695af76235f13c Mon Sep 17 00:00:00 2001
From: Arthur Bassi <arthur.bassi@luby.com.br>
Date: Mon, 27 Jul 2026 10:59:28 -0300
Subject: [PATCH] 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.
---
 .../list/table/cells/pm-type-cell.tsx         |   4 +-
 .../list/table/cells/service-notes-dialog.tsx |   4 +-
 .../list/table/cells/site-dialog.tsx          |   4 +-
 .../list/table/cells/vendor-dialog.tsx        |   4 +-
 .../list/table/reschedule-toast.tsx           |   5 +-
 .../_components/wizard/new-wo-wizard.tsx      |   3 +-
 .../wizard/wizard-service-notes-fields.tsx    | 140 ++++++++++++++++++
 src/app/(protected)/workorders/index.tsx      |   2 +-
 .../use-cases/use-save-work-order.ts          |  12 +-
 ...ork-orders-board-core-affordances.test.tsx |   7 +
 10 files changed, 166 insertions(+), 19 deletions(-)
 create mode 100644 src/app/(protected)/workorders/_components/wizard/wizard-service-notes-fields.tsx

diff --git a/src/app/(protected)/workorders/_components/list/table/cells/pm-type-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/pm-type-cell.tsx
index 24a3a8fa..103f8ed6 100644
--- a/src/app/(protected)/workorders/_components/list/table/cells/pm-type-cell.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/cells/pm-type-cell.tsx
@@ -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}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/service-notes-dialog.tsx b/src/app/(protected)/workorders/_components/list/table/cells/service-notes-dialog.tsx
index 47088f4a..c0166809 100644
--- a/src/app/(protected)/workorders/_components/list/table/cells/service-notes-dialog.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/cells/service-notes-dialog.tsx
@@ -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"
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/site-dialog.tsx b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog.tsx
index 04531258..a3d9fc0e 100644
--- a/src/app/(protected)/workorders/_components/list/table/cells/site-dialog.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog.tsx
@@ -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
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog.tsx b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog.tsx
index 4f281b7a..cb66312d 100644
--- a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog.tsx
@@ -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 ?? ""} />
diff --git a/src/app/(protected)/workorders/_components/list/table/reschedule-toast.tsx b/src/app/(protected)/workorders/_components/list/table/reschedule-toast.tsx
index 2e43deb5..73a4ab28 100644
--- a/src/app/(protected)/workorders/_components/list/table/reschedule-toast.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/reschedule-toast.tsx
@@ -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} />
diff --git a/src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx b/src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx
index f636c2c7..6643256d 100644
--- a/src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx
+++ b/src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx
@@ -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
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-service-notes-fields.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-service-notes-fields.tsx
new file mode 100644
index 00000000..505a2f7c
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-service-notes-fields.tsx
@@ -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>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/index.tsx b/src/app/(protected)/workorders/index.tsx
index 022a6d8d..8e0173e6 100644
--- a/src/app/(protected)/workorders/index.tsx
+++ b/src/app/(protected)/workorders/index.tsx
@@ -103,7 +103,7 @@ export default function WorkOrdersListPage() {
         />
       )}
 
-      {tableData.error && (
+      {Boolean(tableData.error) && (
         <QueryErrorPanel
           className="mb-2 shrink-0"
           compact
diff --git a/src/domain/work-orders/use-cases/use-save-work-order.ts b/src/domain/work-orders/use-cases/use-save-work-order.ts
index 591031b5..db9ed6da 100644
--- a/src/domain/work-orders/use-cases/use-save-work-order.ts
+++ b/src/domain/work-orders/use-cases/use-save-work-order.ts
@@ -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 });
diff --git a/src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx b/src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx
index cfbb716a..004e96d3 100644
--- a/src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx
+++ b/src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx
@@ -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", () => ({