+
@@ -195,7 +130,13 @@ export function NewWoWizard({ open, onOpenChange, users }: NewWoWizardProps) {
draft={draft}
locations={locations}
locationDetail={locationDetail}
+ locationDetailLoading={locationDetailLoading}
+ locationDetailError={locationDetailError}
services={problems.map((p) => ({ id: p.id, value: p.value }))}
+ svcOpen={svcOpen}
+ onSvcOpenChange={setSvcOpen}
+ svcSearch={svcSearch}
+ onSvcSearchChange={setSvcSearch}
onUpdate={setField}
onPatch={patchDraft}
/>
@@ -215,11 +156,13 @@ export function NewWoWizard({ open, onOpenChange, users }: NewWoWizardProps) {
onOpenChange(false)}
+ onCancel={() => {
+ if (!isCreating) onOpenChange(false);
+ }}
onBack={() => setStep((s) => s - 1)}
onContinue={() => setStep((s) => s + 1)}
onCreate={handleCreate}
- isCreating={createMutation.isPending}
+ isCreating={isCreating}
/>
);
diff --git a/src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-draft.ts b/src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-draft.ts
new file mode 100644
index 00000000..a3f6a348
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-draft.ts
@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+import {
+ EMPTY_WIZARD_DRAFT,
+ type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+
+/** Owns the step/draft/service-panel state for the new-work-order wizard, resetting on open. */
+export function useNewWoWizardDraft(open: boolean) {
+ const [step, setStep] = useState(1);
+ const [draft, setDraft] = useState({
+ ...EMPTY_WIZARD_DRAFT,
+ status: "Incomplete",
+ });
+ const [svcOpen, setSvcOpen] = useState(false);
+ const [svcSearch, setSvcSearch] = useState("");
+
+ useEffect(() => {
+ if (open) {
+ setStep(1);
+ setDraft({ ...EMPTY_WIZARD_DRAFT, status: "Incomplete" });
+ setSvcOpen(false);
+ setSvcSearch("");
+ }
+ }, [open]);
+
+ const setField = (
+ key: K,
+ value: WorkOrderWizardDraft[K],
+ ) => {
+ setDraft((current) => ({ ...current, [key]: value }));
+ };
+
+ const patchDraft = (patch: Partial) => {
+ setDraft((current) => ({ ...current, ...patch }));
+ };
+
+ return {
+ step,
+ setStep,
+ draft,
+ setDraft,
+ setField,
+ patchDraft,
+ svcOpen,
+ setSvcOpen,
+ svcSearch,
+ setSvcSearch,
+ };
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/use-wizard-date-field-state.ts b/src/app/(protected)/workorders/_components/wizard/use-wizard-date-field-state.ts
new file mode 100644
index 00000000..ae48b4b5
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/use-wizard-date-field-state.ts
@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+import type { WizardSchedMode } from "@/domain/work-orders/types/work-order-wizard";
+
+type UseWizardDateFieldStateArgs = {
+ open: boolean;
+ value: string;
+ scheduleEnd: string;
+ allowRange: boolean;
+ allowWeekMode?: boolean;
+ targetWeek: string;
+ schedMode?: WizardSchedMode;
+};
+
+function resolveInitialMode({
+ allowRange,
+ schedMode,
+ allowWeekMode,
+ value,
+ targetWeek,
+}: Pick<
+ UseWizardDateFieldStateArgs,
+ "allowRange" | "schedMode" | "allowWeekMode" | "value" | "targetWeek"
+>): WizardSchedMode {
+ if (allowRange && schedMode === "range") {
+ return "range";
+ }
+ if (allowWeekMode && !value && targetWeek) {
+ return "week";
+ }
+ return "date";
+}
+
+/** Owns the popover-local mode/range selection state for `WizardDateField`. */
+export function useWizardDateFieldState({
+ open,
+ value,
+ scheduleEnd,
+ allowRange,
+ allowWeekMode,
+ targetWeek,
+ schedMode,
+}: UseWizardDateFieldStateArgs) {
+ const initialMode = resolveInitialMode({
+ allowRange,
+ schedMode,
+ allowWeekMode,
+ value,
+ targetWeek,
+ });
+
+ const [cellMode, setCellMode] = useState(initialMode);
+ const [rangeStart, setRangeStart] = useState(value || "");
+ const [rangeEnd, setRangeEnd] = useState(scheduleEnd || "");
+
+ useEffect(() => {
+ if (!open) {
+ return;
+ }
+ // Keep draft props as source of truth while open so parent clears
+ // (e.g. Clear schedule) cannot leave stale rangeStart/rangeEnd.
+ setRangeStart(value || "");
+ setRangeEnd(scheduleEnd || "");
+ }, [open, value, scheduleEnd]);
+
+ useEffect(() => {
+ if (open) {
+ setCellMode(initialMode);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps -- reseat mode only when the popover opens
+ }, [open]);
+
+ function handleRangeClick(iso: string) {
+ if (!rangeStart || (rangeStart && rangeEnd)) {
+ setRangeStart(iso);
+ setRangeEnd("");
+ return;
+ }
+ if (iso < rangeStart) {
+ setRangeStart(iso);
+ setRangeEnd(rangeStart);
+ } else {
+ setRangeEnd(iso);
+ }
+ }
+
+ return { cellMode, setCellMode, rangeStart, rangeEnd, handleRangeClick };
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/use-wizard-poc-autofill.ts b/src/app/(protected)/workorders/_components/wizard/use-wizard-poc-autofill.ts
new file mode 100644
index 00000000..0b515cac
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/use-wizard-poc-autofill.ts
@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import type { Location } from "@/domain/locations/types/location";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+
+type SetDraft = (updater: (current: WorkOrderWizardDraft) => WorkOrderWizardDraft) => void;
+
+/**
+ * Auto-fills POC name/phone from the fetched location, once per selected location.
+ * Never clobbers fields the dispatcher already typed while detail was loading
+ * (prototype: autofill from site records, then edit if outdated).
+ */
+export function useWizardPocAutofill(
+ open: boolean,
+ locationId: string,
+ locationDetail: Location | undefined,
+ setDraft: SetDraft,
+) {
+ const [pocAutoFilledFor, setPocAutoFilledFor] = useState("");
+
+ useEffect(() => {
+ if (open) {
+ setPocAutoFilledFor("");
+ }
+ }, [open]);
+
+ useEffect(() => {
+ if (!locationId || !locationDetail || pocAutoFilledFor === locationId) {
+ return;
+ }
+ setDraft((current) => ({
+ ...current,
+ pocName: current.pocName.trim()
+ ? current.pocName
+ : (locationDetail.contact ?? current.pocName),
+ pocPhone: current.pocPhone.trim()
+ ? current.pocPhone
+ : (locationDetail.phone ?? current.pocPhone),
+ }));
+ setPocAutoFilledFor(locationId);
+ }, [locationId, locationDetail, pocAutoFilledFor, setDraft]);
+
+ // Always clear the seed guard on a site pick (including re-selecting the
+ // same location). Prototype onPick re-seeds pocName/pocPhone from the site
+ // every time; if we keep the guard keyed by the same id, clearing the fields
+ // leaves them blank because autofill will not re-run.
+ function notifyLocationChanged(_newLocationId: string) {
+ setPocAutoFilledFor("");
+ }
+
+ return { notifyLocationChanged };
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-date-field-trigger.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-date-field-trigger.tsx
new file mode 100644
index 00000000..1b7cb1af
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-date-field-trigger.tsx
@@ -0,0 +1,68 @@
+import { CalendarDays, CalendarIcon, CalendarRange, ChevronDown } from "lucide-react";
+import { MenuAnchorButton } from "@/components/ui/menu-anchor-button";
+
+type WizardDateFieldTriggerProps = {
+ onAnchor: (element: HTMLElement) => void;
+ open: boolean;
+ label: string;
+ showWeek: boolean;
+ showRange: boolean;
+ hasValue: boolean;
+};
+
+function DateFieldIcon({ showRange, showWeek }: { showRange: boolean; showWeek: boolean }) {
+ const style = { color: "var(--muted-foreground)" };
+ if (showRange) {
+ return ;
+ }
+ if (showWeek) {
+ return ;
+ }
+ return ;
+}
+
+export function WizardDateFieldTrigger({
+ onAnchor,
+ open,
+ label,
+ showWeek,
+ showRange,
+ hasValue,
+}: WizardDateFieldTriggerProps) {
+ return (
+ {
+ (e.currentTarget as HTMLButtonElement).style.boxShadow = "0 0 0 2px var(--color-primary)";
+ }}
+ onBlur={(e) => {
+ (e.currentTarget as HTMLButtonElement).style.boxShadow = "none";
+ }}
+ aria-haspopup="dialog"
+ >
+
+
+ {label}
+
+
+
+ );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-date-field.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-date-field.tsx
index e4d38cd2..80a9ae90 100644
--- a/src/app/(protected)/workorders/_components/wizard/wizard-date-field.tsx
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-date-field.tsx
@@ -1,10 +1,12 @@
-import { useState } from "react";
-import { CalendarDays, CalendarIcon, ChevronDown } from "lucide-react";
import { Popover } from "@mui/material";
import { MiniCalendar } from "@/app/(protected)/workorders/_components/wizard/mini-calendar";
import { WeekPicker } from "@/app/(protected)/workorders/_components/wizard/week-picker";
-import { fmtDate, fmtWeekRange } from "@/domain/work-orders/utils/wizard-date-utils";
-import { MenuAnchorButton } from "@/components/ui/menu-anchor-button";
+import { WizardDateFieldTrigger } from "@/app/(protected)/workorders/_components/wizard/wizard-date-field-trigger";
+import { WizardDateModeTabs } from "@/app/(protected)/workorders/_components/wizard/wizard-date-mode-tabs";
+import { WizardDateRangePanel } from "@/app/(protected)/workorders/_components/wizard/wizard-date-range-panel";
+import { useWizardDateFieldState } from "@/app/(protected)/workorders/_components/wizard/use-wizard-date-field-state";
+import type { WizardSchedMode } from "@/domain/work-orders/types/work-order-wizard";
+import { fmtDate, fmtDateRange, fmtWeekRange } from "@/domain/work-orders/utils/wizard-date-utils";
import { useMenuAnchor } from "@/hooks/use-menu-anchor";
type WizardDateFieldProps = {
@@ -14,8 +16,29 @@ type WizardDateFieldProps = {
allowWeekMode?: boolean;
targetWeek?: string;
onChangeWeek?: (weekStart: string) => void;
+ scheduleEnd?: string;
+ schedMode?: WizardSchedMode;
+ onChangeRange?: (start: string, end: string) => void;
};
+function fieldLabel(args: {
+ showRange: boolean;
+ showWeek: boolean;
+ value: string;
+ scheduleEnd: string;
+ targetWeek: string;
+ placeholder: string;
+}): string {
+ const { showRange, showWeek, value, scheduleEnd, targetWeek, placeholder } = args;
+ if (showRange) {
+ return fmtDateRange(value, scheduleEnd);
+ }
+ if (showWeek) {
+ return fmtWeekRange(targetWeek);
+ }
+ return value ? fmtDate(value) : placeholder;
+}
+
export function WizardDateField({
value,
placeholder,
@@ -23,60 +46,44 @@ export function WizardDateField({
allowWeekMode,
targetWeek = "",
onChangeWeek,
+ scheduleEnd = "",
+ schedMode,
+ onChangeRange,
}: WizardDateFieldProps) {
const { anchorEl, open, setAnchor, close } = useMenuAnchor();
- const [cellMode, setCellMode] = useState<"week" | "date">(
- allowWeekMode && !value && targetWeek ? "week" : "date",
+ const allowRange = Boolean(allowWeekMode && onChangeRange);
+
+ const { cellMode, setCellMode, rangeStart, rangeEnd, handleRangeClick } = useWizardDateFieldState(
+ {
+ open,
+ value,
+ scheduleEnd,
+ allowRange,
+ allowWeekMode,
+ targetWeek,
+ schedMode,
+ },
);
+
const showWeek = Boolean(allowWeekMode && !value && targetWeek);
+ const showRange = Boolean(allowRange && schedMode === "range" && value && scheduleEnd);
+
+ const modes: WizardSchedMode[] = allowRange
+ ? ["week", "date", "range"]
+ : allowWeekMode
+ ? ["week", "date"]
+ : [];
return (
<>
- {
- (e.currentTarget as HTMLButtonElement).style.boxShadow = "0 0 0 2px var(--color-primary)";
- }}
- onBlur={(e) => {
- (e.currentTarget as HTMLButtonElement).style.boxShadow = "none";
- }}
- aria-haspopup="dialog"
- >
- {showWeek ? (
-
- ) : (
-
- )}
-
- {showWeek ? fmtWeekRange(targetWeek) : value ? fmtDate(value) : placeholder}
-
-
-
+ label={fieldLabel({ showRange, showWeek, value, scheduleEnd, targetWeek, placeholder })}
+ showWeek={showWeek}
+ showRange={showRange}
+ hasValue={Boolean(value)}
+ />
- {Boolean(allowWeekMode) && (
-
- {(["week", "date"] as const).map((m) => {
- const activeMode = cellMode === m;
- return (
-
- );
- })}
-
- )}
+
{allowWeekMode && cellMode === "week" ? (
+ ) : allowRange && cellMode === "range" ? (
+ {
+ onChangeRange?.(start, end);
+ close();
+ }}
+ />
) : (
void;
+};
+
+function modeLabel(mode: WizardSchedMode, allowRange: boolean): string {
+ if (mode === "week") {
+ return "Week";
+ }
+ if (mode === "range") {
+ return "Range";
+ }
+ return allowRange ? "Date" : "Specific date";
+}
+
+export function WizardDateModeTabs({
+ modes,
+ cellMode,
+ allowRange,
+ onSelect,
+}: WizardDateModeTabsProps) {
+ if (modes.length === 0) {
+ return null;
+ }
+
+ return (
+
+ {modes.map((m) => {
+ const activeMode = cellMode === m;
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-date-range-panel.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-date-range-panel.tsx
new file mode 100644
index 00000000..72f9a73d
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-date-range-panel.tsx
@@ -0,0 +1,65 @@
+import { MiniCalendar } from "@/app/(protected)/workorders/_components/wizard/mini-calendar";
+import { rangeDayCount } from "@/domain/work-orders/utils/wizard-date-utils";
+
+type WizardDateRangePanelProps = {
+ rangeStart: string;
+ rangeEnd: string;
+ onRangeClick: (iso: string) => void;
+ onDone: (start: string, end: string) => void;
+};
+
+export function WizardDateRangePanel({
+ rangeStart,
+ rangeEnd,
+ onRangeClick,
+ onDone,
+}: WizardDateRangePanelProps) {
+ const canConfirm = Boolean(rangeStart && rangeEnd);
+
+ return (
+ <>
+
+ {Boolean(rangeStart) && (
+
+ {(() => {
+ const n = rangeDayCount(rangeStart, rangeEnd || rangeStart);
+ return `${n} ${n === 1 ? "day" : "days"} selected`;
+ })()}
+
+ )}
+
+
+ );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-field-select-options.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-field-select-options.tsx
new file mode 100644
index 00000000..8eba4e0e
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-field-select-options.tsx
@@ -0,0 +1,86 @@
+import { Check } from "lucide-react";
+import { Text } from "@/components/ui/text";
+import type { WizardMenuOption } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select-types";
+
+type WizardFieldSelectOptionsProps = {
+ search: boolean;
+ searchPlaceholder: string;
+ query: string;
+ onQueryChange: (q: string) => void;
+ options: WizardMenuOption[];
+ value: string;
+ onPick: (key: string) => void;
+};
+
+export function WizardFieldSelectOptions({
+ search,
+ searchPlaceholder,
+ query,
+ onQueryChange,
+ options,
+ value,
+ onPick,
+}: WizardFieldSelectOptionsProps) {
+ return (
+ <>
+ {search && (
+
+ onQueryChange(e.target.value)}
+ placeholder={searchPlaceholder}
+ className="w-full rounded px-2 py-1 text-[12px] focus:outline-none"
+ style={{
+ border: "1px solid var(--color-border)",
+ color: "var(--color-text-primary)",
+ background: "var(--color-bg-surface)",
+ }}
+ />
+
+ )}
+
+ {options.length === 0 ? (
+
+ No matches
+
+ ) : (
+ options.map((o) => (
+
+ ))
+ )}
+
+
+ );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-field-select-types.ts b/src/app/(protected)/workorders/_components/wizard/wizard-field-select-types.ts
new file mode 100644
index 00000000..17958148
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-field-select-types.ts
@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export interface WizardMenuOption {
+ key: string;
+ label: string;
+ description?: string;
+ left?: ReactNode;
+ right?: ReactNode;
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-field-select.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-field-select.tsx
index 460ecec5..ad53384d 100644
--- a/src/app/(protected)/workorders/_components/wizard/wizard-field-select.tsx
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-field-select.tsx
@@ -1,15 +1,12 @@
import { useState, type ReactNode } from "react";
-import { Check, ChevronDown } from "lucide-react";
+import { ChevronDown } from "lucide-react";
import { Popover } from "@mui/material";
import { MenuAnchorButton } from "@/components/ui/menu-anchor-button";
-import { Text } from "@/components/ui/text";
+import { WizardFieldSelectOptions } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select-options";
+import type { WizardMenuOption } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select-types";
import { useMenuAnchor } from "@/hooks/use-menu-anchor";
-export interface WizardMenuOption {
- key: string;
- label: string;
- left?: ReactNode;
-}
+export type { WizardMenuOption } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select-types";
type WizardFieldSelectProps = {
value: string;
@@ -22,6 +19,19 @@ type WizardFieldSelectProps = {
disabled?: boolean;
};
+function filterOptions(options: WizardMenuOption[], query: string): WizardMenuOption[] {
+ if (!query) {
+ return options;
+ }
+ const needle = query.toLowerCase();
+ return options.filter(
+ (o) =>
+ o.label.toLowerCase().includes(needle) ||
+ o.key.toLowerCase().includes(needle) ||
+ (o.description?.toLowerCase().includes(needle) ?? false),
+ );
+}
+
export function WizardFieldSelect({
value,
placeholder,
@@ -35,13 +45,7 @@ export function WizardFieldSelect({
const { anchorEl, open, setAnchor, close } = useMenuAnchor();
const [q, setQ] = useState("");
const selected = options.find((o) => o.key === value);
- const filtered = q
- ? options.filter(
- (o) =>
- o.label.toLowerCase().includes(q.toLowerCase()) ||
- o.key.toLowerCase().includes(q.toLowerCase()),
- )
- : options;
+ const filtered = filterOptions(options, q);
const handleClose = () => {
close();
@@ -74,9 +78,8 @@ export function WizardFieldSelect({
}}
aria-haspopup="listbox"
>
- {icon != null && {icon}}
- {icon == null && selected?.left != null && (
- {selected.left}
+ {(selected?.left ?? icon) != null && (
+ {selected?.left ?? icon}
)}
{selected ? (
- {search && (
-
- setQ(e.target.value)}
- placeholder={searchPlaceholder}
- className="w-full rounded px-2 py-1 text-[12px] focus:outline-none"
- style={{
- border: "1px solid var(--color-border)",
- color: "var(--color-text-primary)",
- background: "var(--color-bg-surface)",
- }}
- />
-
- )}
-
- {filtered.length === 0 ? (
-
- No matches
-
- ) : (
- filtered.map((o) => (
-
- ))
- )}
-
+ {
+ onPick(key);
+ handleClose();
+ }}
+ />
);
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary-rows.ts b/src/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary-rows.ts
new file mode 100644
index 00000000..5295cc69
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary-rows.ts
@@ -0,0 +1,45 @@
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import {
+ fmtDate,
+ fmtDateRange,
+ fmtWeekRange,
+ formatApptRange,
+} from "@/domain/work-orders/utils/wizard-date-utils";
+
+function scheduleOnLabel(draft: WorkOrderWizardDraft): string {
+ if (draft.schedMode === "range" && draft.scheduledOn && draft.scheduleEnd) {
+ return fmtDateRange(draft.scheduledOn, draft.scheduleEnd);
+ }
+ if (!draft.scheduledOn) {
+ return "—";
+ }
+ if (draft.scheduleWeekOnly) {
+ return fmtWeekRange(draft.targetWeek || draft.scheduledOn);
+ }
+ return fmtDate(draft.scheduledOn);
+}
+
+function pocLabel(draft: WorkOrderWizardDraft): string {
+ if (!draft.pocName) {
+ return "—";
+ }
+ return draft.pocPhone ? `${draft.pocName} · ${draft.pocPhone}` : draft.pocName;
+}
+
+/** Builds the label/value rows for the wizard sidebar's live summary card. */
+export function buildWizardSidebarSummaryRows(draft: WorkOrderWizardDraft): [string, string][] {
+ return [
+ ["WO #", draft.woNumber ? `#${draft.woNumber}` : "—"],
+ ["Type", draft.type || "—"],
+ ["Schedule on", scheduleOnLabel(draft)],
+ ["Due date", fmtDate(draft.dueDate) || "—"],
+ ["Assigned to", draft.assigneeName || "—"],
+ ["Site", draft.siteCode || draft.locationName || "—"],
+ ["POC", pocLabel(draft)],
+ ["Service", draft.pm || "—"],
+ ["Technician", draft.vendorName || "—"],
+ ["Company", draft.vendorName || "—"],
+ ["Appt time", draft.apptStart ? formatApptRange(draft.apptStart, draft.apptEnd) : "—"],
+ ["Status", draft.status || "Incomplete"],
+ ];
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary.tsx
new file mode 100644
index 00000000..e330f575
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary.tsx
@@ -0,0 +1,82 @@
+import {
+ WIZARD_STATUS_DOTS,
+ type WizardWOStatus,
+ type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+import { buildWizardSidebarSummaryRows } from "@/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary-rows";
+import { ColorDot } from "@/app/(protected)/workorders/_components/wizard/wizard-labels";
+
+export function WizardSidebarSummary({ draft }: { draft: WorkOrderWizardDraft }) {
+ const summary = buildWizardSidebarSummaryRows(draft);
+ const statusLabel = draft.status || "Incomplete";
+ const statusValue = statusLabel as WizardWOStatus;
+ const statusDotColor = WIZARD_STATUS_DOTS[statusValue] ?? WIZARD_STATUS_DOTS.Incomplete;
+
+ return (
+
+
+ This work order
+
+ {summary.map(([label, val], i) => (
+
+
+ {label}
+
+ {label === "Status" ? (
+
+
+
+ {statusLabel}
+
+
+ ) : (
+
+ {val}
+
+ )}
+
+ ))}
+
);
}
-
-function WizardSidebarSummary({ draft }: { draft: WorkOrderWizardDraft }) {
- const summary: [string, string][] = [
- ["WO #", draft.woNumber ? `#${draft.woNumber}` : "—"],
- ["Type", draft.type || "—"],
- [
- "Schedule on",
- draft.scheduledOn
- ? draft.scheduleWeekOnly
- ? fmtWeekRange(draft.scheduledOn)
- : fmtDate(draft.scheduledOn)
- : "—",
- ],
- ["Due date", fmtDate(draft.dueDate) || "—"],
- ["Assigned to", draft.assigneeName || "—"],
- ["Site", draft.locationName || "—"],
- [
- "POC",
- draft.pocName
- ? draft.pocPhone
- ? `${draft.pocName} · ${draft.pocPhone}`
- : draft.pocName
- : "—",
- ],
- ["Service", draft.pm || "—"],
- ["Technician", draft.vendorName || "—"],
- ["Company", draft.vendorName || "—"],
- ["Appt time", draft.apptStart ? formatApptRange(draft.apptStart, draft.apptEnd) : "—"],
- ["Status", draft.status || "Incomplete"],
- ];
-
- const statusLabel = draft.status || "Incomplete";
- const statusValue = statusLabel as WizardWOStatus;
- const statusDotColor = WIZARD_STATUS_DOTS[statusValue] ?? WIZARD_STATUS_DOTS.Incomplete;
-
- return (
-
-
- This work order
-
- {summary.map(([label, val], i) => (
-
-
- {label}
-
- {label === "Status" ? (
-
-
-
- {statusLabel}
-
-
- ) : (
-
- {val}
-
- )}
-
- ))}
-
- );
-}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-step-header.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-step-header.tsx
new file mode 100644
index 00000000..29976864
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-step-header.tsx
@@ -0,0 +1,42 @@
+import { Text } from "@/components/ui/text";
+import { WIZARD_STEPS } from "@/domain/work-orders/types/work-order-wizard";
+
+export function WizardStepHeader({ step }: { step: number }) {
+ return (
+
+
+ Step {step} of {WIZARD_STEPS.length}
+
+
+ {WIZARD_STEPS[step - 1].title}
+
+
+ {WIZARD_STEPS[step - 1].subtitle}
+
+
+ );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-step-location-poc-fields.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-step-location-poc-fields.tsx
new file mode 100644
index 00000000..3b3b1e3a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-step-location-poc-fields.tsx
@@ -0,0 +1,51 @@
+import { Text } from "@/components/ui/text";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import {
+ DLG_INPUT_CLS,
+ DLG_INPUT_STYLE,
+} from "@/app/(protected)/workorders/_components/wizard/wizard-input-styles";
+import { WizSubLabel } from "@/app/(protected)/workorders/_components/wizard/wizard-labels";
+
+type WizardStepLocationPocFieldsProps = {
+ draft: WorkOrderWizardDraft;
+ onUpdate:
(key: K, value: WorkOrderWizardDraft[K]) => void;
+};
+
+export function WizardStepLocationPocFields({ draft, onUpdate }: WizardStepLocationPocFieldsProps) {
+ return (
+