mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-10-02 02:43:12 +00:00
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:
parent
dffa30f27a
commit
e1ea198319
10 changed files with 166 additions and 19 deletions
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -65,11 +65,11 @@ export function ServiceNotesDialog({
|
|||
>
|
||||
<Wrench size={16} style={{ color: "var(--color-text-muted)" }} />
|
||||
Service & Notes
|
||||
{woNumber ? (
|
||||
{Boolean(woNumber) && (
|
||||
<span style={{ fontSize: 13, fontWeight: 400, color: "var(--color-text-muted)" }}>
|
||||
#{woNumber}
|
||||
</span>
|
||||
) : null}
|
||||
)}
|
||||
</DialogTitle>
|
||||
<DialogContent
|
||||
className="space-y-4"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 ?? ""} />
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -103,7 +103,7 @@ export default function WorkOrdersListPage() {
|
|||
/>
|
||||
)}
|
||||
|
||||
{tableData.error && (
|
||||
{Boolean(tableData.error) && (
|
||||
<QueryErrorPanel
|
||||
className="mb-2 shrink-0"
|
||||
compact
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
|
|
|
|||
|
|
@ -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", () => ({
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue