merge(dev): refresh SH-188 branch for review fixes

scripts/governance-baseline.json

@@ -2,16 +2,5 @@
   "version": 1,
   "purpose": "Frozen grandfathered debt inventory for the frontend governance checks. New entries and cap increases fail the governance comparison. Existing caps may only decrease and entries must be removed when compliant.",
   "maxFileLines": 500,
-  "godfileDebt": [
+  "godfileDebt": []
-    {
-      "path": "src/app/(protected)/workorders/[id].tsx",
-      "maxLines": 797,
-      "reason": "Work-order detail route page; legacy godfile targeted for decomposition into focused state components."
-    },
-    {
-      "path": "src/app/(protected)/vendors/index.tsx",
-      "maxLines": 612,
-      "reason": "Vendors list route; legacy page with mixed query/filter/table state pending extraction."
-    }
-  ]
 }

src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-draft-actions.tsx

@@ -0,0 +1,70 @@
+import type { RefObject } from "react";
+import { Ban, Save, Sparkles, Upload } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { COMP_DOC_FOOTER_BTN_SX } from "./comp-doc-footer-button-sx";
+
+type CompDocDialogFooterDraftActionsProps = {
+  rowVersion?: string | number | null;
+  isUploading: boolean;
+  pdfInputRef: RefObject<HTMLInputElement | null>;
+  onMarkNotRequired: () => void;
+  onSaveDraft: () => void;
+  onGenerate: () => void;
+};
+
+export function CompDocDialogFooterDraftActions({
+  rowVersion,
+  isUploading,
+  pdfInputRef,
+  onMarkNotRequired,
+  onSaveDraft,
+  onGenerate,
+}: CompDocDialogFooterDraftActionsProps) {
+  return (
+    <>
+      <Button
+        variant="ghost"
+        size="default"
+        className="gap-1.5 whitespace-nowrap text-[12px]"
+        sx={COMP_DOC_FOOTER_BTN_SX}
+        style={{ color: "var(--muted-foreground)" }}
+        onClick={onMarkNotRequired}
+      >
+        <Ban size={14} /> Mark as not required
+      </Button>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button
+          variant="outline"
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          onClick={onSaveDraft}
+        >
+          <Save size={14} /> Save draft
+        </Button>
+        <Button
+          variant="outline"
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          disabled={!rowVersion}
+          loading={isUploading}
+          loadingText="Uploading…"
+          onClick={() => pdfInputRef.current?.click()}
+          startIcon={!isUploading ? <Upload size={14} /> : undefined}
+        >
+          Upload PDF
+        </Button>
+        <Button
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          style={{ background: "var(--color-primary)", color: "#fff" }}
+          onClick={onGenerate}
+        >
+          <Sparkles size={14} /> Generate
+        </Button>
+      </div>
+    </>
+  );
+}

src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-generated-actions.tsx

@@ -0,0 +1,62 @@
+import type { RefObject } from "react";
+import { CheckCircle2, Download, Upload } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { COMP_DOC_FOOTER_BTN_SX } from "./comp-doc-footer-button-sx";
+
+type CompDocDialogFooterGeneratedActionsProps = {
+  generatedAt: string;
+  signOffAttachment?: string | null;
+  isDocumentsReadOnly: boolean;
+  rowVersion?: string | number | null;
+  isUploading: boolean;
+  pdfInputRef: RefObject<HTMLInputElement | null>;
+  onDownloadPdf: () => void;
+};
+
+export function CompDocDialogFooterGeneratedActions({
+  generatedAt,
+  signOffAttachment,
+  isDocumentsReadOnly,
+  rowVersion,
+  isUploading,
+  pdfInputRef,
+  onDownloadPdf,
+}: CompDocDialogFooterGeneratedActionsProps) {
+  return (
+    <>
+      <span
+        className="inline-flex items-center gap-1.5 whitespace-nowrap"
+        style={{ fontSize: 12, color: "var(--color-success)" }}
+      >
+        <CheckCircle2 size={14} />{" "}
+        {signOffAttachment ? "Document on file" : `Generated ${generatedAt}`}
+      </span>
+      <div className="flex shrink-0 items-center gap-2">
+        {!isDocumentsReadOnly && (
+          <Button
+            variant="outline"
+            size="default"
+            className="gap-1.5 whitespace-nowrap text-[12px]"
+            sx={COMP_DOC_FOOTER_BTN_SX}
+            disabled={!rowVersion}
+            loading={isUploading}
+            loadingText="Uploading…"
+            onClick={() => pdfInputRef.current?.click()}
+            startIcon={!isUploading ? <Upload size={14} /> : undefined}
+          >
+            Replace PDF
+          </Button>
+        )}
+        <Button
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          style={{ background: "var(--color-primary)", color: "#fff" }}
+          onClick={onDownloadPdf}
+        >
+          <Download size={14} /> Download PDF
+        </Button>
+      </div>
+    </>
+  );
+}

src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-not-required-actions.tsx

@@ -0,0 +1,53 @@
+import { Ban, Sparkles, Undo2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { COMP_DOC_FOOTER_BTN_SX } from "./comp-doc-footer-button-sx";
+
+type CompDocDialogFooterNotRequiredActionsProps = {
+  isDocumentsReadOnly: boolean;
+  onUndo: () => void;
+};
+
+export function CompDocDialogFooterNotRequiredActions({
+  isDocumentsReadOnly,
+  onUndo,
+}: CompDocDialogFooterNotRequiredActionsProps) {
+  return (
+    <>
+      <span
+        className="inline-flex items-center gap-1.5 whitespace-nowrap"
+        style={{ fontSize: 12, color: "var(--muted-foreground)" }}
+      >
+        <Ban size={14} style={{ color: "var(--warning)" }} /> Marked{" "}
+        <b style={{ fontWeight: 600 }}>not required</b> for this work order
+      </span>
+      <div className="flex shrink-0 items-center gap-2">
+        {!isDocumentsReadOnly && (
+          <Button
+            variant="outline"
+            size="default"
+            className="gap-1.5 whitespace-nowrap text-[12px]"
+            sx={COMP_DOC_FOOTER_BTN_SX}
+            onClick={onUndo}
+          >
+            <Undo2 size={14} /> Undo
+          </Button>
+        )}
+        <Button
+          size="default"
+          disabled
+          title="Marked not required — undo to generate"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          style={{
+            background: "var(--color-primary)",
+            color: "#fff",
+            opacity: 0.5,
+            pointerEvents: "none",
+          }}
+        >
+          <Sparkles size={14} /> Generate
+        </Button>
+      </div>
+    </>
+  );
+}

src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer.tsx

@@ -1,27 +1,48 @@
+import type { RefObject } from "react";
 import type { DocState } from "@/domain/work-orders/types/completion-doc";
-import { CompDocDialogFooterDraft } from "./comp-doc-dialog-footer-draft";
+import { CompDocDialogFooterDraftActions } from "./comp-doc-dialog-footer-draft-actions";
-import { CompDocDialogFooterGenerated } from "./comp-doc-dialog-footer-generated";
+import { CompDocDialogFooterGeneratedActions } from "./comp-doc-dialog-footer-generated-actions";
-import { CompDocDialogFooterNotRequired } from "./comp-doc-dialog-footer-not-required";
+import { CompDocDialogFooterNotRequiredActions } from "./comp-doc-dialog-footer-not-required-actions";
 
 type CompDocDialogFooterProps = {
   docState: DocState;
+  isDocumentsReadOnly: boolean;
+  rowVersion?: string | number | null;
+  isUploading: boolean;
+  signOffAttachment?: string | null;
   generatedAt: string;
+  pdfInputRef: RefObject<HTMLInputElement | null>;
   onMarkNotRequired: () => void;
-  onUndo: () => void;
   onSaveDraft: () => void;
   onGenerate: () => void;
+  onUndo: () => void;
   onDownloadPdf: () => void;
+  onUploadPdf: (files: FileList | null) => void;
 };
 
 export function CompDocDialogFooter({
   docState,
+  isDocumentsReadOnly,
+  rowVersion,
+  isUploading,
+  signOffAttachment,
   generatedAt,
+  pdfInputRef,
   onMarkNotRequired,
-  onUndo,
   onSaveDraft,
   onGenerate,
+  onUndo,
   onDownloadPdf,
+  onUploadPdf,
 }: CompDocDialogFooterProps) {
+  // Exclusive footer branches (prototype: one docState at a time). A signed PDF
+  // on file implies Generated even if local docState has not caught up yet — never
+  // render Draft actions alongside Generated.
+  const showNotRequired = docState === "not-required";
+  const showGenerated =
+    !showNotRequired && (docState === "generated" || Boolean(signOffAttachment));
+  const showDraft = !showNotRequired && !showGenerated && docState === "draft";
+
   return (
     <div
       className="flex shrink-0 items-center justify-between gap-3"
@@ -31,17 +52,43 @@ export function CompDocDialogFooter({
         background: "var(--color-bg-surface)",
       }}
     >
-      {docState === "draft" && (
+      <input
-        <CompDocDialogFooterDraft
+        ref={pdfInputRef}
+        type="file"
+        accept="application/pdf,.pdf"
+        hidden
+        onChange={(event) => {
+          onUploadPdf(event.target.files);
+          event.target.value = "";
+        }}
+      />
+      {Boolean(showDraft && !isDocumentsReadOnly) && (
+        <CompDocDialogFooterDraftActions
+          rowVersion={rowVersion}
+          isUploading={isUploading}
+          pdfInputRef={pdfInputRef}
           onMarkNotRequired={onMarkNotRequired}
           onSaveDraft={onSaveDraft}
           onGenerate={onGenerate}
         />
       )}
-      {docState === "generated" && (
+      {showGenerated && (
-        <CompDocDialogFooterGenerated generatedAt={generatedAt} onDownloadPdf={onDownloadPdf} />
+        <CompDocDialogFooterGeneratedActions
+          generatedAt={generatedAt}
+          signOffAttachment={signOffAttachment}
+          isDocumentsReadOnly={isDocumentsReadOnly}
+          rowVersion={rowVersion}
+          isUploading={isUploading}
+          pdfInputRef={pdfInputRef}
+          onDownloadPdf={onDownloadPdf}
+        />
+      )}
+      {showNotRequired && (
+        <CompDocDialogFooterNotRequiredActions
+          isDocumentsReadOnly={isDocumentsReadOnly}
+          onUndo={onUndo}
+        />
       )}
-      {docState === "not-required" && <CompDocDialogFooterNotRequired onUndo={onUndo} />}
     </div>
   );
 }

src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-header.tsx

@@ -4,12 +4,13 @@ import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-ta
 import { serviceTitle } from "@/domain/work-orders/utils/completion-doc-service-title";
 
 type CompDocDialogHeaderProps = {
-  row: WorkOrderTableRow;
+  info: WorkOrderTableRow;
   cfg: CompletionDocStateConfig;
+  isUploading: boolean;
   onClose: () => void;
 };
 
-export function CompDocDialogHeader({ row, cfg, onClose }: CompDocDialogHeaderProps) {
+export function CompDocDialogHeader({ info, cfg, isUploading, onClose }: CompDocDialogHeaderProps) {
   return (
     <div
       className="flex shrink-0 items-center justify-between"
@@ -44,10 +45,10 @@ export function CompDocDialogHeader({ row, cfg, onClose }: CompDocDialogHeaderPr
           >
             WO{" "}
             <span className="font-mono" style={{ color: "var(--color-primary)", fontWeight: 600 }}>
-              #{row.woNumber}
+              #{info.woNumber}
             </span>
             {" · "}
-            {serviceTitle(row)}
+            {serviceTitle(info)}
           </div>
         </div>
       </div>
@@ -77,8 +78,9 @@ export function CompDocDialogHeader({ row, cfg, onClose }: CompDocDialogHeaderPr
         <button
           type="button"
           onClick={onClose}
+          disabled={isUploading}
           aria-label="Close"
-          className="flex items-center justify-center rounded-md transition-colors hover:bg-[var(--color-bg-muted)]"
+          className="flex items-center justify-center rounded-md transition-colors hover:bg-[var(--color-bg-muted)] disabled:opacity-40"
           style={{
             width: 32,
             height: 32,

src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-resource-links.tsx

@@ -0,0 +1,48 @@
+import { Download, FileText } from "lucide-react";
+
+type CompDocDialogResourceLinksProps = {
+  templateUrl?: string | null;
+  signOffAttachment?: string | null;
+};
+
+export function CompDocDialogResourceLinks({
+  templateUrl,
+  signOffAttachment,
+}: CompDocDialogResourceLinksProps) {
+  if (!templateUrl && !signOffAttachment) return null;
+
+  return (
+    <div
+      className="flex shrink-0 flex-wrap items-center gap-3 px-5 py-2"
+      style={{
+        borderBottom: "1px solid var(--color-border)",
+        background: "var(--color-bg-muted)",
+      }}
+    >
+      {Boolean(templateUrl) && (
+        <a
+          href={templateUrl ?? undefined}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+          style={{ color: "var(--color-primary)" }}
+        >
+          <Download size={13} />
+          Download blank template
+        </a>
+      )}
+      {Boolean(signOffAttachment) && (
+        <a
+          href={signOffAttachment ?? undefined}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+          style={{ color: "var(--color-primary)" }}
+        >
+          <FileText size={13} />
+          Open uploaded PDF
+        </a>
+      )}
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog.tsx

@@ -4,11 +4,12 @@ import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdro
 import { Text } from "@/components/ui/text";
 import type { CompDocData, CompDocSaveStatus } from "@/domain/work-orders/types/completion-doc";
 import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
-import { useCompDocDialog } from "@/app/(protected)/workorders/_hooks/use-comp-doc-dialog";
 import { CompDocDialogFooter } from "./comp-doc-dialog-footer";
 import { CompDocDialogHeader } from "./comp-doc-dialog-header";
+import { CompDocDialogResourceLinks } from "./comp-doc-dialog-resource-links";
 import { CompDocPreview } from "./comp-doc-preview";
 import { CompDocSidebar } from "./comp-doc-sidebar";
+import { useCompDocDialog } from "./use-comp-doc-dialog";
 
 type CompDocDialogProps = {
   row: WorkOrderTableRow;
@@ -27,32 +28,19 @@ export function CompDocDialog({
   onSave,
   onDateCompletedChange,
 }: CompDocDialogProps) {
-  const {
+  const dialog = useCompDocDialog({
-    site,
+    row,
-    notes,
+    open,
-    setNotes,
+    data,
-    docState,
+    onSave,
-    generatedAt,
+    onDateCompletedChange,
-    editAddress,
+  });
-    setEditAddress,
+  const handleClose = dialog.isUploading ? undefined : () => onOpenChange(false);
-    editDateCompleted,
-    setEditDateCompleted,
-    amazonRep,
-    seaRep,
-    cfg,
-    isNotRequired,
-    isGenerated,
-    handleMarkNotRequired,
-    handleUndo,
-    handleSaveDraft,
-    handleGenerate,
-    handleDownloadPdf,
-  } = useCompDocDialog({ row, open, data, onSave, onDateCompletedChange });
 
   return (
     <Dialog
       open={open}
-      onClose={() => onOpenChange(false)}
+      onClose={handleClose}
       maxWidth={false}
       slotProps={{
         ...dialogBlurBackdropSlotProps,
@@ -78,48 +66,64 @@ export function CompDocDialog({
           overflow: "hidden",
         }}
       >
-        <DialogTitle className="sr-only">Completion Document — WO #{row.woNumber}</DialogTitle>
+        <DialogTitle className="sr-only">
+          Completion Document — WO #{dialog.info.woNumber}
+        </DialogTitle>
         <Text className="sr-only" variant="description">
           Generate, save or mark not-required the completion document for this work order.
         </Text>
 
         <div className="flex min-h-0 flex-1 flex-col">
-          <CompDocDialogHeader row={row} cfg={cfg} onClose={() => onOpenChange(false)} />
+          <CompDocDialogHeader
+            info={dialog.info}
+            cfg={dialog.cfg}
+            isUploading={dialog.isUploading}
+            onClose={() => handleClose?.()}
+          />
+
+          <CompDocDialogResourceLinks
+            templateUrl={dialog.templateUrl}
+            signOffAttachment={dialog.signOffAttachment}
+          />
 
           <div className="flex min-h-0 flex-1 flex-row">
             <CompDocPreview
-              row={row}
+              row={dialog.info}
-              site={site}
+              site={dialog.site}
-              notes={notes}
+              notes={dialog.notes}
-              generatedAt={generatedAt}
+              generatedAt={dialog.generatedAt}
-              isGenerated={isGenerated}
+              isGenerated={dialog.isGenerated}
-              isNotRequired={isNotRequired}
+              isNotRequired={dialog.isNotRequired}
             />
             <CompDocSidebar
-              row={row}
+              row={dialog.info}
-              site={site}
+              site={dialog.site}
-              docState={docState}
+              docState={dialog.docState}
-              generatedAt={generatedAt}
+              generatedAt={dialog.generatedAt}
-              notes={notes}
+              notes={dialog.notes}
-              editAddress={editAddress}
+              editDateCompleted={dialog.editDateCompleted}
-              onAddressChange={setEditAddress}
+              amazonRep={dialog.amazonRep}
-              editDateCompleted={editDateCompleted}
+              seaRep={dialog.seaRep}
-              amazonRep={amazonRep}
+              isGenerated={dialog.isGenerated}
-              seaRep={seaRep}
+              onNotesChange={dialog.setNotes}
-              isGenerated={isGenerated}
+              onDateCompletedChange={dialog.setEditDateCompleted}
-              onNotesChange={setNotes}
-              onDateCompletedChange={setEditDateCompleted}
             />
           </div>
 
           <CompDocDialogFooter
-            docState={docState}
+            docState={dialog.docState}
-            generatedAt={generatedAt}
+            isDocumentsReadOnly={dialog.isDocumentsReadOnly}
-            onMarkNotRequired={handleMarkNotRequired}
+            rowVersion={dialog.rowVersion}
-            onUndo={handleUndo}
+            isUploading={dialog.isUploading}
-            onSaveDraft={handleSaveDraft}
+            signOffAttachment={dialog.signOffAttachment}
-            onGenerate={handleGenerate}
+            generatedAt={dialog.generatedAt}
-            onDownloadPdf={handleDownloadPdf}
+            pdfInputRef={dialog.pdfInputRef}
+            onMarkNotRequired={dialog.handleMarkNotRequired}
+            onSaveDraft={dialog.handleSaveDraft}
+            onGenerate={dialog.handleGenerate}
+            onUndo={dialog.handleUndo}
+            onDownloadPdf={dialog.handleDownloadPdf}
+            onUploadPdf={dialog.handleUploadPdf}
           />
         </div>
       </DialogContent>

src/app/(protected)/workorders/_components/comp-doc/comp-doc-edit-row.tsx

@@ -0,0 +1,51 @@
+import type { CSSProperties } from "react";
+
+const COMP_DOC_INPUT_CLS = "w-full rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1";
+
+const COMP_DOC_INPUT_STYLE: CSSProperties = {
+  fontSize: 13,
+  border: "1px solid var(--color-border)",
+  color: "var(--color-text-primary)",
+  background: "var(--color-bg-surface)",
+};
+
+type CompDocEditRowProps = {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  type?: string;
+  readOnly?: boolean;
+};
+
+export function CompDocEditRow({
+  label,
+  value,
+  onChange,
+  type = "text",
+  readOnly = false,
+}: CompDocEditRowProps) {
+  return (
+    <div style={{ padding: "8px 0", borderBottom: "1px solid var(--color-border)" }}>
+      <div style={{ fontSize: 11.5, color: "var(--muted-foreground)", marginBottom: 4 }}>
+        {label}
+      </div>
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        readOnly={readOnly}
+        className={COMP_DOC_INPUT_CLS}
+        style={{
+          ...COMP_DOC_INPUT_STYLE,
+          ...(readOnly
+            ? {
+                opacity: 0.6,
+                cursor: "default",
+                pointerEvents: "none" as const,
+              }
+            : {}),
+        }}
+      />
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/comp-doc/comp-doc-footer-button-sx.ts

@@ -0,0 +1,8 @@
+export const COMP_DOC_FOOTER_BTN_SX = {
+  minHeight: 28,
+  height: 28,
+  fontSize: 12,
+  px: 1.25,
+  py: 0.5,
+  gap: 0.75,
+} as const;

src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-company-header.tsx

@@ -0,0 +1,36 @@
+import { Building2, Mail, MapPin, Phone, Printer } from "lucide-react";
+import { SEAHAVEN_HEADER } from "@/domain/work-orders/utils/completion-doc-html";
+import { CompDocCoLine } from "./comp-doc-co-line";
+
+export function CompDocPreviewCompanyHeader() {
+  return (
+    <>
+      <div
+        className="flex flex-wrap items-start justify-between gap-y-3"
+        style={{ padding: "20px 0 12px" }}
+      >
+        <div className="flex items-center">
+          <img
+            src="/seahaven-logo.svg"
+            alt="Seahaven Industries"
+            style={{ height: 34, width: "auto", display: "block" }}
+          />
+        </div>
+        <div className="space-y-1">
+          <CompDocCoLine icon={Building2} text={SEAHAVEN_HEADER.name} bold />
+          <CompDocCoLine icon={MapPin} text={SEAHAVEN_HEADER.address} />
+          <CompDocCoLine icon={Phone} text={SEAHAVEN_HEADER.phone} />
+          <CompDocCoLine icon={Printer} text={SEAHAVEN_HEADER.fax} />
+          <CompDocCoLine icon={Mail} text={SEAHAVEN_HEADER.email} />
+        </div>
+      </div>
+      <div
+        style={{
+          height: 3,
+          borderRadius: 2,
+          background: "linear-gradient(90deg,#27AAE1,#1C75BC)",
+        }}
+      />
+    </>
+  );
+}

src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-document.tsx

@@ -0,0 +1,58 @@
+import type { CompDocSiteInfo } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { CompDocPreviewCompanyHeader } from "./comp-doc-preview-company-header";
+import { CompDocPreviewProcedureNotes } from "./comp-doc-preview-procedure-notes";
+import { CompDocPreviewServiceInfo } from "./comp-doc-preview-service-info";
+import { CompDocPreviewVendorSafety } from "./comp-doc-preview-vendor-safety";
+
+type CompDocPreviewDocumentProps = {
+  row: WorkOrderTableRow;
+  site: CompDocSiteInfo;
+  notes: string;
+  generatedAt: string;
+  isGenerated: boolean;
+  isNotRequired: boolean;
+};
+
+export function CompDocPreviewDocument({
+  row,
+  site,
+  notes,
+  generatedAt,
+  isGenerated,
+  isNotRequired,
+}: CompDocPreviewDocumentProps) {
+  return (
+    <div
+      style={{
+        opacity: isNotRequired ? 0.5 : 1,
+        filter: isNotRequired ? "grayscale(0.4)" : "none",
+      }}
+    >
+      <div
+        style={{
+          height: 12,
+          background: "linear-gradient(100deg,#27AAE1,#1C75BC)",
+        }}
+      />
+      <div style={{ padding: "0 28px 28px" }}>
+        <CompDocPreviewCompanyHeader />
+        <CompDocPreviewServiceInfo
+          row={row}
+          site={site}
+          isGenerated={isGenerated}
+          generatedAt={generatedAt}
+        />
+        <CompDocPreviewVendorSafety row={row} />
+        <CompDocPreviewProcedureNotes pm={row.pm} notes={notes} />
+      </div>
+      <div
+        style={{
+          height: 24,
+          background: "linear-gradient(100deg,#1C75BC,#27AAE1)",
+          clipPath: "polygon(0 45%,100% 0,100% 100%,0 100%)",
+        }}
+      />
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-not-required-stamp.tsx

@@ -0,0 +1,25 @@
+import { Ban } from "lucide-react";
+
+export function CompDocPreviewNotRequiredStamp() {
+  return (
+    <div className="pointer-events-none absolute inset-0 flex items-start justify-center">
+      <div
+        className="inline-flex items-center gap-2"
+        style={{
+          marginTop: "30%",
+          transform: "rotate(-15deg)",
+          border: "3px solid var(--warning)",
+          color: "var(--warning)",
+          borderRadius: 8,
+          padding: "8px 18px",
+          fontWeight: 800,
+          fontSize: 22,
+          letterSpacing: "0.06em",
+          background: "rgba(255,255,255,0.65)",
+        }}
+      >
+        <Ban size={20} /> NOT REQUIRED
+      </div>
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-procedure-notes.tsx

@@ -0,0 +1,68 @@
+import { Text } from "@/components/ui/text";
+import { procedureFor } from "@/domain/work-orders/utils/completion-doc-procedures";
+import { CompDocProcedureList } from "./comp-doc-procedure-list";
+
+type CompDocPreviewProcedureNotesProps = {
+  pm: string;
+  notes: string;
+};
+
+export function CompDocPreviewProcedureNotes({ pm, notes }: CompDocPreviewProcedureNotesProps) {
+  const proc = procedureFor(pm);
+
+  return (
+    <>
+      <Text
+        as="h3"
+        style={{
+          fontSize: 13,
+          fontWeight: 700,
+          color: "#161E38",
+          margin: "16px 0 4px",
+        }}
+      >
+        {proc.heading}
+      </Text>
+      <Text
+        as="p"
+        style={{
+          fontSize: 12.5,
+          lineHeight: 1.5,
+          color: "#58595B",
+          margin: "0 0 8px",
+        }}
+      >
+        {proc.intro}
+      </Text>
+      <CompDocProcedureList proc={proc} />
+
+      {Boolean(notes) && (
+        <>
+          <Text
+            as="h3"
+            style={{
+              fontSize: 13,
+              fontWeight: 700,
+              color: "#161E38",
+              margin: "16px 0 4px",
+            }}
+          >
+            PM Comments
+          </Text>
+          <Text
+            as="p"
+            style={{
+              fontSize: 12.5,
+              lineHeight: 1.5,
+              color: "#161E38",
+              margin: 0,
+              whiteSpace: "pre-wrap",
+            }}
+          >
+            {notes}
+          </Text>
+        </>
+      )}
+    </>
+  );
+}

src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-service-info.tsx

@@ -0,0 +1,89 @@
+import { CheckCircle2 } from "lucide-react";
+import { Text } from "@/components/ui/text";
+import type { CompDocSiteInfo } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { serviceTitle } from "@/domain/work-orders/utils/completion-doc-service-title";
+
+type CompDocPreviewServiceInfoProps = {
+  row: WorkOrderTableRow;
+  site: CompDocSiteInfo;
+  isGenerated: boolean;
+  generatedAt: string;
+};
+
+export function CompDocPreviewServiceInfo({
+  row,
+  site,
+  isGenerated,
+  generatedAt,
+}: CompDocPreviewServiceInfoProps) {
+  return (
+    <>
+      {isGenerated && (
+        <div
+          className="inline-flex items-center gap-1.5"
+          style={{
+            marginTop: 16,
+            padding: "4px 10px",
+            borderRadius: 9999,
+            background: "var(--doc-yes-bg)",
+            color: "var(--color-success)",
+            fontSize: 11.5,
+            fontWeight: 600,
+          }}
+        >
+          <CheckCircle2 size={13} /> Generated · {generatedAt} · v1
+        </div>
+      )}
+
+      <Text
+        as="h2"
+        style={{
+          fontFamily: "var(--font-sans)",
+          fontSize: 13,
+          fontWeight: 700,
+          letterSpacing: "0.02em",
+          color: "#161E38",
+          margin: "16px 0 4px",
+        }}
+      >
+        {serviceTitle(row).toUpperCase()}
+      </Text>
+      <Text
+        as="p"
+        className="font-mono"
+        style={{
+          fontSize: 12.5,
+          fontWeight: 600,
+          color: "#1C75BC",
+          margin: "2px 0",
+        }}
+      >
+        WO# {row.woNumber}
+      </Text>
+
+      <div style={{ marginTop: 14 }}>
+        <Text
+          as="p"
+          style={{
+            fontSize: 13,
+            fontWeight: 600,
+            color: "#161E38",
+            margin: "2px 0",
+          }}
+        >
+          Site ID — {row.site}
+        </Text>
+        <Text as="p" style={{ fontSize: 13, color: "#161E38", margin: "2px 0" }}>
+          Amazon.com Services LLC {row.site}
+        </Text>
+        <Text as="p" style={{ fontSize: 13, color: "#58595B", margin: "2px 0" }}>
+          {site.street},
+        </Text>
+        <Text as="p" style={{ fontSize: 13, color: "#58595B", margin: "2px 0" }}>
+          {site.label}
+        </Text>
+      </div>
+    </>
+  );
+}

src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-status-badge.tsx

@@ -0,0 +1,32 @@
+import { CheckCircle2, FileText } from "lucide-react";
+
+type CompDocPreviewStatusBadgeProps = {
+  isGenerated: boolean;
+};
+
+export function CompDocPreviewStatusBadge({ isGenerated }: CompDocPreviewStatusBadgeProps) {
+  return (
+    <div className="flex shrink-0 items-center justify-center" style={{ padding: "12px 0" }}>
+      <span
+        className="inline-flex items-center gap-1.5"
+        style={{
+          height: 28,
+          padding: "0 12px",
+          borderRadius: 9999,
+          background: "var(--color-bg-surface)",
+          border: "1px solid var(--color-border)",
+          fontSize: 12,
+          fontWeight: 500,
+          color: "var(--muted-foreground)",
+        }}
+      >
+        {isGenerated ? (
+          <CheckCircle2 size={13} style={{ color: "var(--color-success)" }} />
+        ) : (
+          <FileText size={13} />
+        )}
+        {isGenerated ? "Generated document" : "Preview — not yet generated"}
+      </span>
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-vendor-safety.tsx

@@ -0,0 +1,35 @@
+import { Text } from "@/components/ui/text";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { SAFETY_BULLETS } from "@/domain/work-orders/utils/completion-doc-procedures";
+
+type CompDocPreviewVendorSafetyProps = {
+  row: WorkOrderTableRow;
+};
+
+export function CompDocPreviewVendorSafety({ row }: CompDocPreviewVendorSafetyProps) {
+  return (
+    <>
+      <Text as="p" style={{ fontSize: 13, color: "#161E38", margin: "14px 0 6px" }}>
+        <span style={{ fontWeight: 700 }}>Vendor / Technician:&nbsp;</span>
+        {row.tech || "—"}
+        {row.company ? ` · ${row.company}` : ""}
+      </Text>
+
+      <ul style={{ listStyle: "disc", paddingLeft: 18, margin: "8px 0 0" }}>
+        {SAFETY_BULLETS.map((b, i) => (
+          <li
+            key={i}
+            style={{
+              fontSize: 12.5,
+              lineHeight: 1.5,
+              margin: "5px 0",
+              color: "#161E38",
+            }}
+          >
+            {b}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview.tsx

@@ -1,10 +1,8 @@
 import type { CompDocSiteInfo } from "@/domain/work-orders/types/completion-doc";
 import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
-import { CompDocNotRequiredStamp } from "./comp-doc-not-required-stamp";
+import { CompDocPreviewDocument } from "./comp-doc-preview-document";
-import { CompDocPreviewBadge } from "./comp-doc-preview-badge";
+import { CompDocPreviewNotRequiredStamp } from "./comp-doc-preview-not-required-stamp";
-import { CompDocPreviewHeader } from "./comp-doc-preview-header";
+import { CompDocPreviewStatusBadge } from "./comp-doc-preview-status-badge";
-import { CompDocPreviewProcedure } from "./comp-doc-preview-procedure";
-import { CompDocPreviewSummary } from "./comp-doc-preview-summary";
 
 type CompDocPreviewProps = {
   row: WorkOrderTableRow;
@@ -32,7 +30,7 @@ export function CompDocPreview({
         background: "var(--color-bg-muted)",
       }}
     >
-      <CompDocPreviewBadge isGenerated={isGenerated} />
+      <CompDocPreviewStatusBadge isGenerated={isGenerated} />
 
       <div
         className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto"
@@ -50,38 +48,16 @@ export function CompDocPreview({
             wordBreak: "break-word",
           }}
         >
-          <div
+          <CompDocPreviewDocument
-            style={{
+            row={row}
-              opacity: isNotRequired ? 0.5 : 1,
+            site={site}
-              filter: isNotRequired ? "grayscale(0.4)" : "none",
+            notes={notes}
-            }}
+            generatedAt={generatedAt}
-          >
+            isGenerated={isGenerated}
-            <div
+            isNotRequired={isNotRequired}
-              style={{
+          />
-                height: 12,
-                background: "linear-gradient(100deg,#27AAE1,#1C75BC)",
-              }}
-            />
-            <div style={{ padding: "0 28px 28px" }}>
-              <CompDocPreviewHeader />
-              <CompDocPreviewSummary
-                row={row}
-                site={site}
-                generatedAt={generatedAt}
-                isGenerated={isGenerated}
-              />
-              <CompDocPreviewProcedure row={row} notes={notes} />
-            </div>
-            <div
-              style={{
-                height: 24,
-                background: "linear-gradient(100deg,#1C75BC,#27AAE1)",
-                clipPath: "polygon(0 45%,100% 0,100% 100%,0 100%)",
-              }}
-            />
-          </div>
 
-          {isNotRequired && <CompDocNotRequiredStamp />}
+          {isNotRequired && <CompDocPreviewNotRequiredStamp />}
         </div>
       </div>
     </div>

src/app/(protected)/workorders/_components/comp-doc/comp-doc-procedure-list.tsx

@@ -7,29 +7,26 @@ type CompDocProcedureListProps = {
 export function CompDocProcedureList({ proc }: CompDocProcedureListProps) {
   return (
     <ol style={{ listStyle: "decimal", paddingLeft: 22, margin: 0 }}>
-      {proc.steps.map((st, i) => {
+      {proc.steps.map((st, i) => (
-        const subSteps = st.sub ?? [];
+        <li key={i} style={{ margin: "6px 0", fontSize: 13, lineHeight: 1.5 }}>
-        return (
+          {st.text}
-          <li key={i} style={{ margin: "6px 0", fontSize: 13, lineHeight: 1.5 }}>
+          {st.sub != null && (
-            {st.text}
+            <ol
-            {subSteps.length > 0 && (
+              style={{
-              <ol
+                listStyle: "lower-alpha",
-                style={{
+                paddingLeft: 22,
-                  listStyle: "lower-alpha",
+                margin: "4px 0 0",
-                  paddingLeft: 22,
+              }}
-                  margin: "4px 0 0",
+            >
-                }}
+              {st.sub.map((x, j) => (
-              >
+                <li key={j} style={{ margin: "2px 0" }}>
-                {subSteps.map((x, j) => (
+                  {x}
-                  <li key={j} style={{ margin: "2px 0" }}>
+                </li>
-                    {x}
+              ))}
-                  </li>
+            </ol>
-                ))}
+          )}
-              </ol>
+        </li>
-            )}
+      ))}
-          </li>
-        );
-      })}
     </ol>
   );
 }

src/app/(protected)/workorders/_components/comp-doc/comp-doc-sidebar.tsx

@@ -1,8 +1,12 @@
+import { Building2, MapPin, Users, Wrench } from "lucide-react";
 import type { CompDocSiteInfo, DocState } from "@/domain/work-orders/types/completion-doc";
 import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
-import { CompDocDetailsSection } from "./comp-doc-details-section";
+import {
-import { CompDocNotesField } from "./comp-doc-notes-field";
+  DOC_STATE_CFG,
-import { CompDocStatusCard } from "./comp-doc-status-card";
+  docStatusCardDescription,
+} from "@/domain/work-orders/utils/completion-doc-state";
+import { CompDocDetailRow } from "./comp-doc-detail-row";
+import { CompDocEditRow } from "./comp-doc-edit-row";
 
 type CompDocSidebarProps = {
   row: WorkOrderTableRow;
@@ -10,8 +14,6 @@ type CompDocSidebarProps = {
   docState: DocState;
   generatedAt: string;
   notes: string;
-  editAddress: string;
-  onAddressChange: (value: string) => void;
   editDateCompleted: string;
   amazonRep: string;
   seaRep: string;
@@ -26,8 +28,6 @@ export function CompDocSidebar({
   docState,
   generatedAt,
   notes,
-  editAddress,
-  onAddressChange,
   editDateCompleted,
   amazonRep,
   seaRep,
@@ -35,25 +35,139 @@ export function CompDocSidebar({
   onNotesChange,
   onDateCompletedChange,
 }: CompDocSidebarProps) {
+  const displayState: DocState =
+    isGenerated && docState !== "not-required" ? "generated" : docState;
+  const cfg = DOC_STATE_CFG[displayState];
+  const StateIcon = cfg.icon;
+
   return (
     <div
       className="flex min-h-0 flex-col"
       style={{ width: "42%", background: "var(--color-bg-surface)" }}
     >
       <div className="min-h-0 flex-1 overflow-y-auto" style={{ padding: 20 }}>
-        <CompDocStatusCard docState={docState} generatedAt={generatedAt} />
+        <div
-        <CompDocDetailsSection
+          className="flex items-start gap-3"
-          row={row}
+          style={{
-          site={site}
+            padding: 14,
-          editAddress={editAddress}
+            borderRadius: 10,
-          onAddressChange={onAddressChange}
+            background: cfg.cardBg,
-          editDateCompleted={editDateCompleted}
+            border: `1px solid ${cfg.cardBorder}`,
-          onDateCompletedChange={onDateCompletedChange}
+          }}
-          amazonRep={amazonRep}
+        >
-          seaRep={seaRep}
+          <div
-          isGenerated={isGenerated}
+            className="flex shrink-0 items-center justify-center"
-        />
+            style={{
-        <CompDocNotesField notes={notes} onNotesChange={onNotesChange} isGenerated={isGenerated} />
+              width: 34,
+              height: 34,
+              borderRadius: 8,
+              background: cfg.cardIconBg,
+              border: `1px solid ${cfg.cardBorder}`,
+            }}
+          >
+            <StateIcon size={17} style={{ color: cfg.iconColor }} />
+          </div>
+          <div className="min-w-0">
+            <div
+              style={{
+                fontSize: 13.5,
+                fontWeight: 600,
+                color: "var(--color-text-primary)",
+              }}
+            >
+              {cfg.cardTitle}
+            </div>
+            <div
+              style={{
+                fontSize: 12.5,
+                lineHeight: 1.45,
+                color: "var(--muted-foreground)",
+                marginTop: 3,
+              }}
+            >
+              {docStatusCardDescription(displayState, generatedAt)}
+            </div>
+          </div>
+        </div>
+
+        <div style={{ marginTop: 20 }}>
+          <div
+            style={{
+              fontFamily: "var(--font-mono)",
+              fontSize: 10,
+              fontWeight: 600,
+              letterSpacing: "0.1em",
+              textTransform: "uppercase",
+              color: "var(--muted-foreground)",
+            }}
+          >
+            Work Order Details
+          </div>
+          <div style={{ marginTop: 6 }}>
+            <CompDocDetailRow icon={Building2} label="WO #" value={`#${row.woNumber}`} />
+            <CompDocDetailRow
+              icon={MapPin}
+              label="Site Code"
+              value={`${row.site} · Amazon.com Services LLC`}
+            />
+            <CompDocDetailRow icon={MapPin} label="Address" value={site.fullAddress} />
+            <CompDocEditRow
+              label="Date Work Completed"
+              value={editDateCompleted}
+              onChange={onDateCompletedChange}
+              type="date"
+              readOnly={isGenerated}
+            />
+            <CompDocDetailRow icon={Users} label="Amazon Representative" value={amazonRep || "—"} />
+            <CompDocDetailRow
+              icon={Wrench}
+              label="Seahaven Representative"
+              value={seaRep || "—"}
+              last
+            />
+          </div>
+        </div>
+
+        <div style={{ marginTop: 18 }}>
+          <label
+            style={{
+              fontSize: 13,
+              fontWeight: 600,
+              color: "var(--color-text-primary)",
+            }}
+          >
+            PM Comments{" "}
+            <span style={{ fontWeight: 400, color: "var(--muted-foreground)" }}>
+              — optional, included in the document
+            </span>
+          </label>
+          <textarea
+            value={notes}
+            onChange={(e) => onNotesChange(e.target.value)}
+            readOnly={isGenerated}
+            rows={3}
+            placeholder="Add findings, parts used, access notes, or anything the site POC should see…"
+            className="mt-2 w-full resize-none"
+            style={{
+              fontSize: 13,
+              fontFamily: "var(--font-sans)",
+              color: "var(--color-text-primary)",
+              background: "var(--color-bg-surface)",
+              border: "1px solid var(--color-border)",
+              borderRadius: 8,
+              padding: "10px 12px",
+              lineHeight: 1.5,
+              outline: "none",
+              ...(isGenerated
+                ? {
+                    opacity: 0.6,
+                    cursor: "default",
+                    pointerEvents: "none" as const,
+                  }
+                : {}),
+            }}
+          />
+        </div>
       </div>
     </div>
   );

src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog-seed.ts

@@ -0,0 +1,59 @@
+import { useEffect, useRef, type Dispatch, type SetStateAction } from "react";
+import type { CompDocData, DocState } from "@/domain/work-orders/types/completion-doc";
+import type { CompletionDocStatus } from "@/domain/work-orders/types/work-order-table-row";
+import { docStateOf } from "@/domain/work-orders/utils/completion-doc-state";
+
+type UseCompDocDialogSeedArgs = {
+  open: boolean;
+  infoId: string | number;
+  infoDocStatus: CompletionDocStatus;
+  infoCompletedDate?: string | null;
+  completionDocStatus?: CompletionDocStatus | null;
+  data?: CompDocData;
+  setNotes: Dispatch<SetStateAction<string>>;
+  setDocState: Dispatch<SetStateAction<DocState>>;
+  setGeneratedAt: Dispatch<SetStateAction<string>>;
+  setEditDateCompleted: Dispatch<SetStateAction<string>>;
+};
+
+/** Prototype seeds once per open/WO session; detail refetches must not wipe edits. */
+export function useCompDocDialogSeed({
+  open,
+  infoId,
+  infoDocStatus,
+  infoCompletedDate,
+  completionDocStatus,
+  data,
+  setNotes,
+  setDocState,
+  setGeneratedAt,
+  setEditDateCompleted,
+}: UseCompDocDialogSeedArgs) {
+  const seedKeyRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!open) {
+      seedKeyRef.current = null;
+      return;
+    }
+    const key = String(infoId);
+    if (seedKeyRef.current === key) return;
+    seedKeyRef.current = key;
+    setNotes(data?.notes ?? "");
+    setDocState(docStateOf(completionDocStatus || infoDocStatus));
+    setGeneratedAt(data?.generatedAt ?? "");
+    setEditDateCompleted(infoCompletedDate || "");
+  }, [
+    open,
+    infoId,
+    infoDocStatus,
+    infoCompletedDate,
+    completionDocStatus,
+    data?.notes,
+    data?.generatedAt,
+    setNotes,
+    setDocState,
+    setGeneratedAt,
+    setEditDateCompleted,
+  ]);
+}

src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog.tsx

@@ -0,0 +1,179 @@
+import { useMemo, useRef, useState } from "react";
+import { toast } from "react-toastify";
+import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
+import type {
+  CompDocData,
+  CompDocSaveStatus,
+  DocFields,
+  DocState,
+} from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { useWorkOrderBoardDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
+import { useUploadCompletionDoc } from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { resolveCompDocSite } from "@/domain/work-orders/utils/completion-doc-site";
+import { DOC_STATE_CFG } from "@/domain/work-orders/utils/completion-doc-state";
+import { isWorkOrderDocumentsReadOnly } from "@/domain/work-orders/utils/work-order-media-limits";
+import { useCompDocDialogSeed } from "./use-comp-doc-dialog-seed";
+import { useCompDocNotRequiredActions } from "./use-comp-doc-not-required-actions";
+import { useCompDocPdfActions } from "./use-comp-doc-pdf-actions";
+import { useCompDocPersistFlow } from "./use-comp-doc-persist-flow";
+
+type UseCompDocDialogArgs = {
+  row: WorkOrderTableRow;
+  open: boolean;
+  data?: CompDocData;
+  onSave: (data: CompDocData, status: CompDocSaveStatus) => void | Promise<void>;
+  onDateCompletedChange?: (date: string) => void | Promise<void>;
+};
+
+function notifyDraftSaved() {
+  toast(
+    <div
+      className="flex items-center gap-2"
+      style={{
+        background: "var(--foreground)",
+        color: "#fff",
+        padding: "10px 18px",
+        borderRadius: 9999,
+        fontSize: 13,
+        fontWeight: 600,
+        boxShadow: "0 10px 30px -10px rgba(0,0,0,.45)",
+      }}
+    >
+      Draft saved
+    </div>,
+    {
+      position: "bottom-center",
+      autoClose: 3000,
+      hideProgressBar: true,
+      closeButton: false,
+      icon: false,
+      className: "!min-h-0 !bg-transparent !p-0 !shadow-none",
+    },
+  );
+}
+
+export function useCompDocDialog({
+  row,
+  open,
+  data,
+  onSave,
+  onDateCompletedChange,
+}: UseCompDocDialogArgs) {
+  const locId = String(row.locationId || "");
+  const { data: locationDetail } = useLocationDetail(locId || undefined);
+  const { data: boardDetail } = useWorkOrderBoardDetail(row.id, open);
+  const uploadCompletionMutation = useUploadCompletionDoc(row.id);
+  const pdfInputRef = useRef<HTMLInputElement>(null);
+  const [isFinalizing, setIsFinalizing] = useState(false);
+
+  const info = boardDetail?.info ?? row;
+  const completion = boardDetail?.completion;
+  const templateUrl = completion?.template?.templateUrl;
+  const signOffAttachment = completion?.signOffAttachment;
+  const rowVersion = info.rowVersion || row.rowVersion;
+  const isDocumentsReadOnly = isWorkOrderDocumentsReadOnly(info.status);
+  const site = useMemo(() => resolveCompDocSite(info, locationDetail), [info, locationDetail]);
+
+  const [notes, setNotes] = useState("");
+  const [docState, setDocState] = useState<DocState>("draft");
+  const [generatedAt, setGeneratedAt] = useState("");
+  const [editDateCompleted, setEditDateCompleted] = useState("");
+
+  useCompDocDialogSeed({
+    open,
+    infoId: info.id,
+    infoDocStatus: info.docStatus,
+    infoCompletedDate: info.completedDate,
+    completionDocStatus: completion?.docStatus,
+    data,
+    setNotes,
+    setDocState,
+    setGeneratedAt,
+    setEditDateCompleted,
+  });
+
+  const amazonRep = info.pocName || "";
+  const seaRep = info.tech || "";
+  const cfg = DOC_STATE_CFG[docState];
+  const isNotRequired = docState === "not-required";
+  const isGenerated = docState === "generated" || Boolean(signOffAttachment);
+
+  const docFields: DocFields = {
+    street: site.street,
+    city: site.city,
+    state: site.state,
+    zip: site.zip,
+    dateCompleted: editDateCompleted,
+    amazonRep,
+    seaRep,
+  };
+
+  const { persist, syncDateIfChanged, refreshAuthoritativeState, handleSaveDraft, handleGenerate } =
+    useCompDocPersistFlow({
+      workOrderId: row.id,
+      notes,
+      generatedAt,
+      editDateCompleted,
+      currentCompletedDate: info.completedDate || "",
+      onSave,
+      onDateCompletedChange,
+      onGenerated: (ts) => {
+        setGeneratedAt(ts);
+        setDocState("generated");
+      },
+      onDraftSaved: notifyDraftSaved,
+    });
+
+  const { handleMarkNotRequired, handleUndo } = useCompDocNotRequiredActions({
+    docState,
+    setDocState,
+    persist,
+    refreshAuthoritativeState,
+    setIsFinalizing,
+  });
+
+  const { handleDownloadPdf, handleUploadPdf } = useCompDocPdfActions({
+    info,
+    signOffAttachment,
+    rowVersion,
+    notes,
+    generatedAt,
+    docFields,
+    uploadCompletionMutation,
+    persist,
+    syncDateIfChanged,
+    setGeneratedAt,
+    markGenerated: () => setDocState("generated"),
+    onPersistFailure: refreshAuthoritativeState,
+    onFinalizingChange: setIsFinalizing,
+  });
+
+  return {
+    info,
+    templateUrl,
+    signOffAttachment,
+    rowVersion,
+    isDocumentsReadOnly,
+    site,
+    notes,
+    setNotes,
+    docState,
+    generatedAt,
+    editDateCompleted,
+    setEditDateCompleted,
+    amazonRep,
+    seaRep,
+    cfg,
+    isNotRequired,
+    isGenerated,
+    isUploading: uploadCompletionMutation.isPending || isFinalizing,
+    pdfInputRef,
+    handleMarkNotRequired,
+    handleUndo,
+    handleSaveDraft,
+    handleGenerate,
+    handleDownloadPdf,
+    handleUploadPdf,
+  };
+}

src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-not-required-actions.ts

@@ -0,0 +1,58 @@
+import { toast } from "react-toastify";
+import type {
+  CompDocData,
+  CompDocSaveStatus,
+  DocState,
+} from "@/domain/work-orders/types/completion-doc";
+
+type PersistFn = (data: Partial<CompDocData>, status: CompDocSaveStatus) => void | Promise<void>;
+
+type UseCompDocNotRequiredActionsArgs = {
+  docState: DocState;
+  setDocState: (state: DocState) => void;
+  persist: PersistFn;
+  refreshAuthoritativeState: () => void;
+  setIsFinalizing: (value: boolean) => void;
+};
+
+export function useCompDocNotRequiredActions({
+  docState,
+  setDocState,
+  persist,
+  refreshAuthoritativeState,
+  setIsFinalizing,
+}: UseCompDocNotRequiredActionsArgs) {
+  async function handleMarkNotRequired() {
+    const previous = docState;
+    setDocState("not-required");
+    setIsFinalizing(true);
+    try {
+      await persist({}, "NN");
+    } catch (error) {
+      setDocState(previous);
+      refreshAuthoritativeState();
+      toast.error(
+        error instanceof Error ? error.message : "Failed to mark document as not required",
+      );
+    } finally {
+      setIsFinalizing(false);
+    }
+  }
+
+  async function handleUndo() {
+    const previous = docState;
+    setDocState("draft");
+    setIsFinalizing(true);
+    try {
+      await persist({}, "No");
+    } catch (error) {
+      setDocState(previous);
+      refreshAuthoritativeState();
+      toast.error(error instanceof Error ? error.message : "Failed to undo not-required");
+    } finally {
+      setIsFinalizing(false);
+    }
+  }
+
+  return { handleMarkNotRequired, handleUndo };
+}

src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-pdf-actions.ts

@@ -0,0 +1,98 @@
+import { toast } from "react-toastify";
+import type {
+  CompDocData,
+  CompDocSaveStatus,
+  DocFields,
+} from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { useUploadCompletionDoc } from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { buildDocHtml, printDoc } from "@/domain/work-orders/utils/completion-doc-html";
+import { fmtDocNow } from "@/domain/work-orders/utils/completion-doc-state";
+import {
+  formatMediaSizeLimit,
+  isWorkOrderFileTooLarge,
+} from "@/domain/work-orders/utils/work-order-media-limits";
+
+type UseCompDocPdfActionsArgs = {
+  info: WorkOrderTableRow;
+  signOffAttachment?: string | null;
+  rowVersion?: string;
+  notes: string;
+  generatedAt: string;
+  docFields: DocFields;
+  uploadCompletionMutation: ReturnType<typeof useUploadCompletionDoc>;
+  persist: (extra: Partial<CompDocData>, status: CompDocSaveStatus) => Promise<void>;
+  syncDateIfChanged: () => Promise<void>;
+  setGeneratedAt: (value: string) => void;
+  markGenerated: () => void;
+  onPersistFailure?: () => void;
+  onFinalizingChange?: (finalizing: boolean) => void;
+};
+
+export function useCompDocPdfActions({
+  info,
+  signOffAttachment,
+  rowVersion,
+  notes,
+  generatedAt,
+  docFields,
+  uploadCompletionMutation,
+  persist,
+  syncDateIfChanged,
+  setGeneratedAt,
+  markGenerated,
+  onPersistFailure,
+  onFinalizingChange,
+}: UseCompDocPdfActionsArgs) {
+  function handleDownloadPdf() {
+    if (signOffAttachment) {
+      window.open(signOffAttachment, "_blank", "noopener,noreferrer");
+      return;
+    }
+    printDoc(buildDocHtml(info, { notes, generatedAt }, docFields));
+  }
+
+  function handleUploadPdf(files: FileList | null) {
+    const file = files?.[0];
+    if (!file) return;
+    if (isWorkOrderFileTooLarge(file)) {
+      toast.error(`File exceeds the ${formatMediaSizeLimit()} limit.`);
+      return;
+    }
+    if (file.type !== "application/pdf" && !file.name.toLowerCase().endsWith(".pdf")) {
+      toast.error("Please upload a PDF file.");
+      return;
+    }
+    if (!rowVersion) {
+      toast.error("Missing work order version. Refresh and try again.");
+      return;
+    }
+    uploadCompletionMutation.mutate(
+      { file, workOrderVersion: rowVersion },
+      {
+        onSuccess: () => {
+          // Keep close disabled across the gap between upload settle and docStatus persist.
+          onFinalizingChange?.(true);
+          void (async () => {
+            const ts = fmtDocNow();
+            try {
+              await syncDateIfChanged();
+              await persist({ generatedAt: ts }, "Yes");
+              setGeneratedAt(ts);
+              markGenerated();
+            } catch (error) {
+              onPersistFailure?.();
+              toast.error(
+                error instanceof Error ? error.message : "Failed to finalize completion document",
+              );
+            } finally {
+              onFinalizingChange?.(false);
+            }
+          })();
+        },
+      },
+    );
+  }
+
+  return { handleDownloadPdf, handleUploadPdf };
+}

src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-persist-flow.ts

@@ -0,0 +1,84 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import type { CompDocData, CompDocSaveStatus } from "@/domain/work-orders/types/completion-doc";
+import { fmtDocNow } from "@/domain/work-orders/utils/completion-doc-state";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+type UseCompDocPersistFlowArgs = {
+  workOrderId: string | number;
+  notes: string;
+  generatedAt: string;
+  editDateCompleted: string;
+  currentCompletedDate: string;
+  onSave: (data: CompDocData, status: CompDocSaveStatus) => void | Promise<void>;
+  onDateCompletedChange?: (date: string) => void | Promise<void>;
+  onGenerated: (generatedAt: string) => void;
+  onDraftSaved: () => void;
+};
+
+export function useCompDocPersistFlow({
+  workOrderId,
+  notes,
+  generatedAt,
+  editDateCompleted,
+  currentCompletedDate,
+  onSave,
+  onDateCompletedChange,
+  onGenerated,
+  onDraftSaved,
+}: UseCompDocPersistFlowArgs) {
+  const queryClient = useQueryClient();
+
+  const refreshAuthoritativeState = () => {
+    void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });
+    void queryClient.invalidateQueries({
+      queryKey: queryKeys.workOrders.boardDetail(workOrderId),
+    });
+    void queryClient.invalidateQueries({
+      queryKey: queryKeys.workOrders.detail(workOrderId),
+    });
+  };
+
+  const persist = async (extra: Partial<CompDocData>, status: CompDocSaveStatus) => {
+    await onSave({ notes, generatedAt, ...extra }, status);
+  };
+
+  const syncDateIfChanged = async () => {
+    if (editDateCompleted !== currentCompletedDate) {
+      await onDateCompletedChange?.(editDateCompleted);
+    }
+  };
+
+  async function handleSaveDraft() {
+    try {
+      // Prerequisites first; docStatus last.
+      await syncDateIfChanged();
+      await persist({}, "No");
+      onDraftSaved();
+    } catch (error) {
+      refreshAuthoritativeState();
+      toast.error(error instanceof Error ? error.message : "Failed to save draft");
+    }
+  }
+
+  async function handleGenerate() {
+    const ts = fmtDocNow();
+    try {
+      // Prerequisites first; only mark Generated after completedDate persists.
+      await syncDateIfChanged();
+      await persist({ generatedAt: ts }, "Yes");
+      onGenerated(ts);
+    } catch (error) {
+      refreshAuthoritativeState();
+      toast.error(error instanceof Error ? error.message : "Failed to generate document");
+    }
+  }
+
+  return {
+    persist,
+    syncDateIfChanged,
+    refreshAuthoritativeState,
+    handleSaveDraft,
+    handleGenerate,
+  };
+}

src/app/(protected)/workorders/_components/detail/audit-timeline.tsx

@@ -0,0 +1,67 @@
+import { useMemo } from "react";
+import { Box, Typography } from "@mui/material";
+import type { WorkOrderAuditEntry } from "@/domain/work-orders/types/work-order";
+import { formatDateTime } from "@/lib/time-utils";
+
+type AuditTimelineProps = {
+  entries: WorkOrderAuditEntry[];
+  emptyMessage?: string;
+  maxHeightClass?: string;
+};
+
+export function AuditTimeline({
+  entries,
+  emptyMessage = "No changes recorded.",
+  maxHeightClass = "max-h-72",
+}: AuditTimelineProps) {
+  const sorted = useMemo(
+    () =>
+      [...entries].sort(
+        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+      ),
+    [entries],
+  );
+
+  if (!sorted.length) {
+    return <Typography color="text.secondary">{emptyMessage}</Typography>;
+  }
+
+  return (
+    <Box className={`${maxHeightClass} space-y-3 overflow-y-auto`}>
+      {sorted.map((entry) => (
+        <Box key={String(entry.id)} className="rounded border border-border p-3">
+          <Box className="mb-1 flex justify-between gap-2">
+            <Typography variant="caption" className="font-semibold">
+              {entry.userName || "System"}
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+              {entry.createdAt ? formatDateTime(entry.createdAt) : ""}
+            </Typography>
+          </Box>
+          <Typography variant="body2">
+            {entry.action ? (
+              entry.action
+            ) : (
+              <>
+                <strong>{entry.fieldName}</strong> {entry.oldValue} → {entry.newValue}
+              </>
+            )}
+          </Typography>
+          {Boolean(entry.action && entry.fieldName) && (
+            <Typography
+              variant="caption"
+              color="text.secondary"
+              className="mt-1"
+              sx={{ display: "block" }}
+            >
+              {entry.fieldName}
+              {entry.oldValue || entry.newValue
+                ? `: ${entry.oldValue || "—"} → ${entry.newValue || "—"}`
+                : ""}
+            </Typography>
+          )}
+        </Box>
+      ))}
+    </Box>
+  );
+}

src/app/(protected)/workorders/_components/detail/slide-over-audit-list.tsx

@@ -0,0 +1,164 @@
+import { Settings } from "lucide-react";
+import { Text } from "@/components/ui/text";
+import type { WorkOrderAuditEntry, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import {
+  getAvatarColorFromName,
+  getDispatcherAvatarColor,
+  getInitialsFromName,
+} from "@/domain/work-orders/utils/dispatcher-avatar-color";
+import { formatBoardAuditAction } from "@/domain/work-orders/utils/format-board-audit-action";
+
+function isSystemEntry(entry: WorkOrderAuditEntry): boolean {
+  if (entry.type === "system") return true;
+  if (entry.type === "manual") return false;
+  const name = entry.userName?.trim();
+  return !name || name.toLowerCase() === "system";
+}
+
+function formatClock(date: Date): string {
+  return date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+/**
+ * Manual (image): `· 9:48 AM`
+ * System (image): `05/13 · 8:00 AM`
+ * Prefer API display strings that already include · / AM|PM.
+ */
+function formatAuditTime(value: string, isSystem: boolean): string {
+  if (!value) return "";
+  if (/[·•]/.test(value) || /\b(AM|PM)\b/i.test(value)) return value;
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+
+  const timePart = formatClock(date);
+  if (isSystem) {
+    const datePart = date.toLocaleDateString("en-US", {
+      month: "2-digit",
+      day: "2-digit",
+    });
+    return `${datePart} · ${timePart}`;
+  }
+  return `· ${timePart}`;
+}
+
+type SlideOverAuditListProps = {
+  entries: WorkOrderAuditEntry[];
+  users?: WorkOrderUser[];
+};
+
+export function SlideOverAuditList({ entries, users = [] }: SlideOverAuditListProps) {
+  return (
+    <div>
+      <Text
+        as="p"
+        className="mb-3 text-[10px] font-medium uppercase"
+        style={{ letterSpacing: "0.06em", color: "var(--color-text-muted)" }}
+      >
+        Audit Log
+      </Text>
+      <div className="space-y-2.5">
+        {entries.length === 0 ? (
+          <Text
+            as="p"
+            className="py-4 text-center text-[12px]"
+            style={{ color: "var(--muted-foreground)" }}
+          >
+            No changes recorded
+          </Text>
+        ) : (
+          entries.map((entry, index) => {
+            const isSys = isSystemEntry(entry);
+            const dispatcher = users.find(
+              (user) =>
+                entry.dispatcherId != null && String(user.id) === String(entry.dispatcherId),
+            );
+            const name =
+              dispatcher?.name ||
+              entry.userName?.trim() ||
+              (entry.dispatcherId ? String(entry.dispatcherId) : "Unknown");
+            const color = dispatcher
+              ? getDispatcherAvatarColor(dispatcher)
+              : getAvatarColorFromName(name);
+            const initials = dispatcher
+              ? getInitialsFromName(dispatcher.name)
+              : getInitialsFromName(name);
+            const action = formatBoardAuditAction(entry);
+
+            return (
+              <div
+                key={String(entry.id) || index}
+                className="flex items-start gap-2.5"
+                style={
+                  isSys
+                    ? {
+                        background: "#F8FAFC",
+                        borderRadius: 6,
+                        padding: "10px",
+                      }
+                    : {
+                        background: "transparent",
+                        padding: "10px 0",
+                      }
+                }
+              >
+                {isSys ? (
+                  <div
+                    className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded"
+                    style={{ background: "#E2E8F0" }}
+                  >
+                    <Settings size={10} style={{ color: "#64748B" }} />
+                  </div>
+                ) : (
+                  <div
+                    className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[8px] font-bold"
+                    style={
+                      dispatcher || name !== "Unknown"
+                        ? { background: `${color}25`, color }
+                        : {
+                            background: "var(--color-bg-muted)",
+                            color: "var(--color-text-muted)",
+                          }
+                    }
+                  >
+                    {initials}
+                  </div>
+                )}
+                <div className="min-w-0 flex-1">
+                  {isSys ? (
+                    <Text as="p" className="text-[12px] leading-snug" style={{ color: "#374151" }}>
+                      <span style={{ fontStyle: "italic", color: "#6B7280" }}>System</span>
+                      <span style={{ color: "#6B7280" }}> — </span>
+                      {action}
+                    </Text>
+                  ) : (
+                    <Text as="p" className="text-[12px] leading-snug">
+                      <span className="font-semibold" style={{ color: "#1E293B" }}>
+                        {name}
+                      </span>
+                      <span style={{ color: "#D1D5DB" }}> · </span>
+                      <span style={{ color: "#374151" }}>{action}</span>
+                    </Text>
+                  )}
+                  <Text
+                    as="p"
+                    className="mt-0.5 text-[10px]"
+                    style={{
+                      fontFamily: "var(--font-mono)",
+                      color: "#9CA3AF",
+                    }}
+                  >
+                    {formatAuditTime(entry.createdAt, isSys)}
+                  </Text>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/detail/slide-over-footer.tsx

@@ -0,0 +1,143 @@
+import { AlertTriangle, Ban, Check, Pencil } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+
+type SlideOverFooterProps = {
+  isCancelled: boolean;
+  editing: boolean;
+  isDirty: boolean;
+  showUnsaved: boolean;
+  saving?: boolean;
+  onCancelWO: () => void;
+  onCancelEdit: () => void;
+  onClose: () => void;
+  onEdit: () => void;
+  onSave: () => void;
+  onDiscard: () => void;
+  onKeepEditing: () => void;
+};
+
+export function SlideOverFooter({
+  isCancelled,
+  editing,
+  isDirty,
+  showUnsaved,
+  saving,
+  onCancelWO,
+  onCancelEdit,
+  onClose,
+  onEdit,
+  onSave,
+  onDiscard,
+  onKeepEditing,
+}: SlideOverFooterProps) {
+  if (showUnsaved) {
+    return (
+      <div
+        className="flex shrink-0 items-center justify-between gap-2 px-5 py-3"
+        style={{
+          borderTop: "1px solid var(--color-border)",
+          background: "var(--color-bg-surface)",
+        }}
+      >
+        <span
+          className="flex items-center gap-1.5 text-[12px]"
+          style={{ color: "var(--color-warning)" }}
+        >
+          <AlertTriangle size={13} />
+          You have unsaved changes.
+        </span>
+        <div className="flex gap-2">
+          <Button variant="ghost" className="text-[12px]" onClick={onDiscard}>
+            Discard
+          </Button>
+          <Button
+            variant="default"
+            className="gap-1.5 text-[12px]"
+            onClick={onSave}
+            loading={saving}
+          >
+            <Check size={13} />
+            Save
+          </Button>
+          <Button variant="ghost" className="text-[12px]" onClick={onKeepEditing}>
+            Keep editing
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (isCancelled) {
+    return (
+      <div
+        className="flex shrink-0 items-center gap-2 px-4 py-2.5"
+        style={{
+          background: "var(--color-bg-muted)",
+          borderTop: "1px solid var(--color-border)",
+        }}
+      >
+        <Ban size={14} style={{ color: "var(--muted-foreground)" }} />
+        <Text as="p" className="text-[12px]" style={{ color: "var(--muted-foreground)" }}>
+          This work order has been cancelled and is read-only.
+        </Text>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex shrink-0 items-center justify-between gap-3 px-5 py-3"
+      style={{
+        borderTop: "1px solid var(--color-border)",
+        background: "var(--color-bg-surface)",
+      }}
+    >
+      <button
+        type="button"
+        onClick={onCancelWO}
+        className="flex items-center gap-1.5 text-[12px] font-medium transition-opacity hover:opacity-80"
+        style={{ color: "var(--destructive)" }}
+      >
+        <AlertTriangle size={13} />
+        Cancel WO
+      </button>
+
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={editing ? onCancelEdit : onClose}
+          disabled={saving}
+          className="text-[12px] transition-colors"
+          style={{ color: "var(--color-text-muted)" }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = "var(--color-text-primary)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = "var(--color-text-muted)";
+          }}
+        >
+          Cancel
+        </button>
+
+        {editing ? (
+          <Button
+            variant="default"
+            className="gap-1.5 text-[12px]"
+            onClick={onSave}
+            disabled={!isDirty}
+            loading={saving}
+          >
+            <Check size={13} />
+            Save
+          </Button>
+        ) : (
+          <Button variant="default" className="gap-1.5 text-[12px]" onClick={onEdit}>
+            <Pencil size={13} />
+            Edit WO
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/detail/slide-over-header.tsx

@@ -0,0 +1,106 @@
+import { CircularProgress } from "@mui/material";
+import { X } from "lucide-react";
+import { WoTableStatusLabel } from "@/app/(protected)/workorders/_components/list/table/cells/wo-table-status-label";
+import { WoTableTypeLabel } from "@/app/(protected)/workorders/_components/list/table/cells/wo-table-type-label";
+import { Text } from "@/components/ui/text";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+type SlideOverHeaderProps = {
+  row: WorkOrderTableRow;
+  isCancelled: boolean;
+  isFetching?: boolean;
+  closeDisabled?: boolean;
+  onClose: () => void;
+};
+
+export function SlideOverHeader({
+  row,
+  isCancelled,
+  isFetching = false,
+  closeDisabled = false,
+  onClose,
+}: SlideOverHeaderProps) {
+  return (
+    <div
+      className="flex shrink-0 items-center justify-between gap-3 px-5 py-3.5"
+      style={{ borderBottom: "1px solid var(--color-border)" }}
+    >
+      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+        <Text
+          as="h2"
+          className="text-[15px] font-semibold leading-none"
+          style={{ color: "var(--color-text-primary)" }}
+        >
+          #{row.woNumber || "—"}
+        </Text>
+
+        {isCancelled && (
+          <span
+            className="rounded-full px-2 py-0.5 text-[12px] font-medium"
+            style={{
+              background: "var(--color-bg-muted)",
+              color: "var(--muted-foreground)",
+              border: "1px solid var(--color-border)",
+            }}
+          >
+            Cancelled
+          </span>
+        )}
+
+        {Boolean(row.site) && (
+          <span
+            className="rounded px-1.5 py-0.5 font-mono text-[11px]"
+            style={{
+              background: "var(--color-bg-muted)",
+              color: "var(--color-text-secondary)",
+            }}
+          >
+            {row.site}
+          </span>
+        )}
+
+        {row.isPastDue ? (
+          <span
+            className="inline-flex items-center gap-1.5 text-[11px] font-medium leading-none"
+            style={{
+              background: "var(--status-pastdue-bg)",
+              color: "var(--status-pastdue-text)",
+              borderRadius: 4,
+              padding: "3px 8px",
+            }}
+          >
+            <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-[#BE123C]" />
+            Past Due
+          </span>
+        ) : row.status ? (
+          <WoTableStatusLabel status={row.status} />
+        ) : null}
+
+        {Boolean(row.type) && <WoTableTypeLabel type={row.type as WOType} />}
+      </div>
+
+      <div className="flex shrink-0 items-center gap-1">
+        {isFetching && <CircularProgress size={14} aria-label="Refreshing details" />}
+        <button
+          type="button"
+          aria-label="Close"
+          onClick={onClose}
+          disabled={closeDisabled}
+          className="shrink-0 rounded p-1.5 transition-colors disabled:opacity-40"
+          style={{ color: "var(--color-text-muted)" }}
+          onMouseEnter={(e) => {
+            if (!closeDisabled) {
+              e.currentTarget.style.background = "var(--color-bg-muted)";
+            }
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = "transparent";
+          }}
+        >
+          <X size={15} />
+        </button>
+      </div>
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/detail/slide-over-info-row.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+type SlideOverInfoRowProps = {
+  label: string;
+  children: ReactNode;
+};
+
+export function SlideOverInfoRow({ label, children }: SlideOverInfoRowProps) {
+  return (
+    <div
+      className="flex items-center gap-2 py-1.5"
+      style={{ borderBottom: "1px solid var(--color-bg-muted)" }}
+    >
+      <span className="w-28 shrink-0 text-[13px]" style={{ color: "var(--color-text-muted)" }}>
+        {label}
+      </span>
+      <div className="min-w-0 flex-1 text-[12.5px]" style={{ color: "var(--color-text-primary)" }}>
+        {children}
+      </div>
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-audit-tab.tsx

@@ -0,0 +1,11 @@
+import { SlideOverAuditList } from "@/app/(protected)/workorders/_components/detail/slide-over-audit-list";
+import type { WorkOrderAuditEntry, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+
+type SlideOverAuditTabProps = {
+  entries: WorkOrderAuditEntry[];
+  users?: WorkOrderUser[];
+};
+
+export function SlideOverAuditTab({ entries, users }: SlideOverAuditTabProps) {
+  return <SlideOverAuditList entries={entries} users={users} />;
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-comments-tab.tsx

@@ -0,0 +1,265 @@
+import { useState } from "react";
+import { Pencil } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+import type { WorkOrderComment } from "@/domain/work-orders/types/work-order";
+import { isOwnWorkOrderComment } from "@/domain/work-orders/utils/comment-ownership";
+import {
+  getAvatarColorFromName,
+  getInitialsFromName,
+} from "@/domain/work-orders/utils/dispatcher-avatar-color";
+
+function formatCommentTime(value: string): string {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+const textareaStyle = {
+  border: "1px solid var(--color-border)",
+  color: "var(--color-text-primary)",
+  background: "var(--color-bg-surface)",
+} as const;
+
+type SlideOverCommentItemProps = {
+  comment: WorkOrderComment;
+  canEdit: boolean;
+  isEditing: boolean;
+  draftText: string;
+  isUpdatePending: boolean;
+  onStartEdit: () => void;
+  onDraftChange: (value: string) => void;
+  onCancelEdit: () => void;
+  onSaveEdit: () => void;
+};
+
+function SlideOverCommentItem({
+  comment,
+  canEdit,
+  isEditing,
+  draftText,
+  isUpdatePending,
+  onStartEdit,
+  onDraftChange,
+  onCancelEdit,
+  onSaveEdit,
+}: SlideOverCommentItemProps) {
+  const author = comment.userName || comment.commenter || "Unknown";
+  const color = getAvatarColorFromName(author);
+  const initials = getInitialsFromName(author);
+
+  return (
+    <div className="flex items-start gap-2.5 py-2.5">
+      <span
+        className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[9px] font-semibold"
+        style={{ background: `${color}25`, color }}
+      >
+        {initials}
+      </span>
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center justify-between gap-1.5">
+          <div className="flex min-w-0 items-center gap-1.5">
+            <span
+              className="truncate text-[12px] font-semibold"
+              style={{ color: "var(--color-text-primary)" }}
+            >
+              {author}
+            </span>
+            <span className="shrink-0 text-[10px]" style={{ color: "var(--color-text-muted)" }}>
+              {formatCommentTime(comment.createdDate)}
+            </span>
+          </div>
+          {canEdit && !isEditing && (
+            <button
+              type="button"
+              title="Edit comment"
+              aria-label="Edit comment"
+              onClick={onStartEdit}
+              className="shrink-0 rounded p-0.5 transition-opacity hover:opacity-70"
+              style={{ color: "var(--color-text-muted)" }}
+            >
+              <Pencil size={12} />
+            </button>
+          )}
+        </div>
+
+        {isEditing ? (
+          <div className="mt-1.5 space-y-2">
+            <textarea
+              value={draftText}
+              onChange={(event) => onDraftChange(event.target.value)}
+              rows={3}
+              disabled={isUpdatePending}
+              className="w-full resize-none rounded-lg px-3 py-2 text-[12px] focus:outline-none focus:ring-1"
+              style={textareaStyle}
+            />
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="ghost"
+                size="default"
+                className="h-8 text-[12px]"
+                disabled={isUpdatePending}
+                onClick={onCancelEdit}
+                style={{ color: "var(--color-text-muted)" }}
+              >
+                Cancel
+              </Button>
+              <Button
+                size="default"
+                className="h-8 text-[12px]"
+                disabled={!draftText.trim() || isUpdatePending}
+                loading={isUpdatePending}
+                onClick={onSaveEdit}
+              >
+                Save
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Text
+            as="p"
+            className="mt-0.5 text-[12px] leading-snug"
+            style={{ color: "var(--color-text-secondary)" }}
+          >
+            {comment.commenttext}
+          </Text>
+        )}
+      </div>
+    </div>
+  );
+}
+
+type SlideOverCommentsTabProps = {
+  comments: WorkOrderComment[];
+  isReadOnly: boolean;
+  isPending: boolean;
+  currentUserId?: string | number;
+  isUpdatePending?: boolean;
+  onSubmit: (text: string, options?: { onSuccess?: () => void }) => void;
+  onUpdateComment?: (
+    commentId: string | number,
+    text: string,
+    options?: { onSuccess?: () => void },
+  ) => void;
+};
+
+export function SlideOverCommentsTab({
+  comments,
+  isReadOnly,
+  isPending,
+  currentUserId,
+  isUpdatePending = false,
+  onSubmit,
+  onUpdateComment,
+}: SlideOverCommentsTabProps) {
+  const [commentText, setCommentText] = useState("");
+  const [editingCommentId, setEditingCommentId] = useState<string | number | null>(null);
+  const [draftText, setDraftText] = useState("");
+
+  const handlePost = () => {
+    const text = commentText.trim();
+    if (!text || isReadOnly || isPending) return;
+    onSubmit(text, { onSuccess: () => setCommentText("") });
+  };
+
+  const startEdit = (comment: WorkOrderComment) => {
+    setEditingCommentId(comment.id);
+    setDraftText(comment.commenttext);
+  };
+
+  const cancelEdit = () => {
+    setEditingCommentId(null);
+    setDraftText("");
+  };
+
+  const saveEdit = () => {
+    if (editingCommentId == null || !onUpdateComment) return;
+    const text = draftText.trim();
+    if (!text || isUpdatePending) return;
+    onUpdateComment(editingCommentId, text, {
+      onSuccess: () => {
+        setEditingCommentId(null);
+        setDraftText("");
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-3">
+      {!isReadOnly && (
+        <>
+          <textarea
+            value={commentText}
+            onChange={(event) => setCommentText(event.target.value)}
+            placeholder="Add comment…"
+            rows={3}
+            disabled={isPending}
+            className="w-full resize-none rounded-lg px-3 py-2 text-[12px] focus:outline-none focus:ring-1"
+            style={textareaStyle}
+          />
+          <div className="flex justify-end">
+            <Button
+              size="default"
+              className="h-8 text-[12px]"
+              disabled={!commentText.trim() || isPending}
+              onClick={handlePost}
+              loading={isPending}
+            >
+              Post
+            </Button>
+          </div>
+        </>
+      )}
+
+      <div
+        style={{
+          borderTop: "1px solid var(--color-bg-muted)",
+          pointerEvents: isReadOnly ? "none" : undefined,
+        }}
+      >
+        {comments.length === 0 ? (
+          <Text
+            as="p"
+            className="py-6 text-center text-[12px]"
+            style={{ color: "var(--muted-foreground)" }}
+          >
+            No comments yet
+          </Text>
+        ) : (
+          comments.map((comment) => {
+            const canEdit =
+              !isReadOnly &&
+              Boolean(onUpdateComment) &&
+              isOwnWorkOrderComment(comment, currentUserId);
+            const isEditing = editingCommentId === comment.id;
+
+            return (
+              <div
+                key={String(comment.id)}
+                style={{ borderBottom: "1px solid var(--color-bg-muted)" }}
+              >
+                <SlideOverCommentItem
+                  comment={comment}
+                  canEdit={canEdit}
+                  isEditing={isEditing}
+                  draftText={isEditing ? draftText : comment.commenttext}
+                  isUpdatePending={isUpdatePending && isEditing}
+                  onStartEdit={() => startEdit(comment)}
+                  onDraftChange={setDraftText}
+                  onCancelEdit={cancelEdit}
+                  onSaveEdit={saveEdit}
+                />
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-actions.tsx

@@ -0,0 +1,92 @@
+import type { RefObject } from "react";
+import { Ban, CheckCircle2, FileText, Upload } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+import type { CompletionDocStatus } from "@/domain/work-orders/types/work-order-table-row";
+
+type SlideOverCompletionActionsProps = {
+  docStatus: CompletionDocStatus;
+  rowVersion?: string | number | null;
+  completionPending: boolean;
+  hasUploadHandler: boolean;
+  pdfInputRef: RefObject<HTMLInputElement | null>;
+  onPdfSelected: (files: FileList | null) => void;
+  onOpenCompletionDoc: () => void;
+};
+
+function DocStatusButtonContent({ docStatus }: { docStatus: CompletionDocStatus }) {
+  if (docStatus === "Yes") {
+    return (
+      <>
+        <CheckCircle2 size={13} />
+        View / Edit Document
+      </>
+    );
+  }
+  if (docStatus === "NN") {
+    return (
+      <>
+        <Ban size={13} />
+        Document Not Required — Review
+      </>
+    );
+  }
+  return (
+    <>
+      <FileText size={13} />
+      Open completion document
+    </>
+  );
+}
+
+export function SlideOverCompletionActions({
+  docStatus,
+  rowVersion,
+  completionPending,
+  hasUploadHandler,
+  pdfInputRef,
+  onPdfSelected,
+  onOpenCompletionDoc,
+}: SlideOverCompletionActionsProps) {
+  return (
+    <div className="space-y-2">
+      {hasUploadHandler && (
+        <>
+          <Button
+            variant="outline"
+            className="w-full gap-1.5 text-[12px]"
+            disabled={!rowVersion}
+            loading={completionPending}
+            loadingText="Uploading…"
+            onClick={() => pdfInputRef.current?.click()}
+            startIcon={!completionPending ? <Upload size={13} /> : undefined}
+          >
+            Upload signed PDF
+          </Button>
+          <input
+            ref={pdfInputRef}
+            type="file"
+            accept="application/pdf,.pdf"
+            hidden
+            onChange={(event) => {
+              onPdfSelected(event.target.files);
+              event.target.value = "";
+            }}
+          />
+          {!rowVersion && (
+            <Text as="p" style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+              Waiting for work order version before upload is available.
+            </Text>
+          )}
+        </>
+      )}
+      <Button
+        variant="outline"
+        className="w-full gap-1.5 text-[12px]"
+        onClick={onOpenCompletionDoc}
+      >
+        <DocStatusButtonContent docStatus={docStatus} />
+      </Button>
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-media.tsx

@@ -0,0 +1,52 @@
+import { Image as ImageIcon } from "lucide-react";
+import {
+  MediaUploader,
+  type MediaUploadRequest,
+} from "@/app/(protected)/workorders/_components/media/media-uploader";
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+
+type SlideOverCompletionMediaProps = {
+  isReadOnly: boolean;
+  media: MediaFile[];
+  mediaPending: boolean;
+  onUploadMedia?: (requests: MediaUploadRequest[]) => void;
+  onCategorizeMedia?: (id: string, category: UploadableMediaCategory) => void;
+  onRemoveMedia?: (id: string) => void;
+  onRetryMedia?: (localId: string) => void;
+  onCancelMedia?: (localId: string) => void;
+};
+
+export function SlideOverCompletionMedia({
+  isReadOnly,
+  media,
+  mediaPending,
+  onUploadMedia,
+  onCategorizeMedia,
+  onRemoveMedia,
+  onRetryMedia,
+  onCancelMedia,
+}: SlideOverCompletionMediaProps) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-1.5">
+        <ImageIcon size={14} style={{ color: "var(--foreground)" }} />
+        <span style={{ fontSize: 12, fontWeight: 600, color: "var(--foreground)" }}>
+          Photos &amp; Videos
+        </span>
+      </div>
+      <div style={isReadOnly ? { opacity: 0.6, pointerEvents: "none" } : undefined}>
+        <MediaUploader
+          uploads={media}
+          onUpload={onUploadMedia}
+          onCategorize={onCategorizeMedia}
+          onRemove={onRemoveMedia}
+          onRetry={onRetryMedia}
+          onCancel={onCancelMedia}
+          readOnly={isReadOnly}
+          pending={mediaPending}
+        />
+      </div>
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-readonly-status.tsx

@@ -0,0 +1,45 @@
+import { CheckCircle2, FileText } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { CompletionDocStatus } from "@/domain/work-orders/types/work-order-table-row";
+
+type SlideOverCompletionReadonlyStatusProps = {
+  docStatus: CompletionDocStatus;
+  onOpenCompletionDoc: () => void;
+};
+
+export function SlideOverCompletionReadonlyStatus({
+  docStatus,
+  onOpenCompletionDoc,
+}: SlideOverCompletionReadonlyStatusProps) {
+  if (docStatus === "Yes") {
+    return (
+      <Button
+        variant="outline"
+        className="w-full gap-1.5 text-[12px]"
+        onClick={onOpenCompletionDoc}
+      >
+        <CheckCircle2 size={13} />
+        View Document
+      </Button>
+    );
+  }
+
+  return (
+    <div
+      className="flex items-center gap-2"
+      style={{
+        padding: "10px 12px",
+        borderRadius: 8,
+        background: "var(--color-bg-muted)",
+        border: "1px solid var(--color-border)",
+      }}
+    >
+      <FileText size={14} className="shrink-0" style={{ color: "var(--color-text-muted)" }} />
+      <span style={{ fontSize: 12, color: "var(--muted-foreground)" }}>
+        {docStatus === "NN"
+          ? "No completion document was required for this work order."
+          : "No completion document was generated."}
+      </span>
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-signoffs.tsx

@@ -0,0 +1,35 @@
+import type { WorkOrderBoardCompletion } from "@/domain/work-orders/types/work-order-board-detail";
+
+type SlideOverCompletionSignoffsProps = {
+  completion?: WorkOrderBoardCompletion;
+};
+
+export function SlideOverCompletionSignoffs({ completion }: SlideOverCompletionSignoffsProps) {
+  if (!completion || completion.dispatchSignoffs.length === 0) return null;
+
+  return (
+    <div className="space-y-1 pt-2">
+      <span
+        style={{
+          fontSize: 10,
+          fontWeight: 700,
+          letterSpacing: "0.06em",
+          textTransform: "uppercase",
+          color: "var(--color-text-muted)",
+        }}
+      >
+        Dispatch sign-offs
+      </span>
+      {completion.dispatchSignoffs.map((signoff, index) => (
+        <div
+          key={`${signoff.dispatchId ?? "d"}-${index}`}
+          style={{ fontSize: 12, color: "var(--color-text-secondary)" }}
+        >
+          {signoff.signoffType || "Sign-off"}
+          {signoff.name ? ` — ${signoff.name}` : ""}
+          {signoff.signedAt ? ` · ${signoff.signedAt}` : ""}
+        </div>
+      ))}
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-tab.tsx

@@ -0,0 +1,143 @@
+import { useRef } from "react";
+import { Download, FileText } from "lucide-react";
+import { toast } from "react-toastify";
+import type { MediaUploadRequest } from "@/app/(protected)/workorders/_components/media/media-uploader";
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { WorkOrderBoardCompletion } from "@/domain/work-orders/types/work-order-board-detail";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import {
+  formatMediaSizeLimit,
+  isWorkOrderFileTooLarge,
+} from "@/domain/work-orders/utils/work-order-media-limits";
+import { SlideOverCompletionActions } from "./slide-over-completion-actions";
+import { SlideOverCompletionMedia } from "./slide-over-completion-media";
+import { SlideOverCompletionReadonlyStatus } from "./slide-over-completion-readonly-status";
+import { SlideOverCompletionSignoffs } from "./slide-over-completion-signoffs";
+
+function isMediaWO(type: WOType | ""): boolean {
+  return type === "Emergency" || type === "Reactive";
+}
+
+type SlideOverCompletionTabProps = {
+  row: WorkOrderTableRow;
+  isReadOnly: boolean;
+  completion?: WorkOrderBoardCompletion;
+  media: MediaFile[];
+  mediaPending?: boolean;
+  completionPending?: boolean;
+  onUploadMedia?: (requests: MediaUploadRequest[]) => void;
+  onCategorizeMedia?: (id: string, category: UploadableMediaCategory) => void;
+  onRemoveMedia?: (id: string) => void;
+  onRetryMedia?: (localId: string) => void;
+  onCancelMedia?: (localId: string) => void;
+  onUploadCompletionPdf?: (file: File) => void;
+  onOpenCompletionDoc: () => void;
+};
+
+export function SlideOverCompletionTab({
+  row,
+  isReadOnly,
+  completion,
+  media,
+  mediaPending = false,
+  completionPending = false,
+  onUploadMedia,
+  onCategorizeMedia,
+  onRemoveMedia,
+  onRetryMedia,
+  onCancelMedia,
+  onUploadCompletionPdf,
+  onOpenCompletionDoc,
+}: SlideOverCompletionTabProps) {
+  const pdfInputRef = useRef<HTMLInputElement>(null);
+  const docStatus = completion?.docStatus || row.docStatus;
+  const templateUrl = completion?.template?.templateUrl;
+  const signOffAttachment = completion?.signOffAttachment;
+
+  if (isMediaWO(row.type)) {
+    return (
+      <SlideOverCompletionMedia
+        isReadOnly={isReadOnly}
+        media={media}
+        mediaPending={mediaPending}
+        onUploadMedia={onUploadMedia}
+        onCategorizeMedia={onCategorizeMedia}
+        onRemoveMedia={onRemoveMedia}
+        onRetryMedia={onRetryMedia}
+        onCancelMedia={onCancelMedia}
+      />
+    );
+  }
+
+  const handlePdfSelected = (files: FileList | null) => {
+    const file = files?.[0];
+    if (!file || !onUploadCompletionPdf) return;
+    if (isWorkOrderFileTooLarge(file)) {
+      toast.error(`File exceeds the ${formatMediaSizeLimit()} limit.`);
+      return;
+    }
+    if (file.type !== "application/pdf" && !file.name.toLowerCase().endsWith(".pdf")) {
+      toast.error("Please upload a PDF file.");
+      return;
+    }
+    onUploadCompletionPdf(file);
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-1.5">
+        <FileText size={14} style={{ color: "var(--foreground)" }} />
+        <span style={{ fontSize: 12, fontWeight: 600, color: "var(--foreground)" }}>
+          Completion Document
+        </span>
+      </div>
+
+      {Boolean(templateUrl) && (
+        <a
+          href={templateUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+          style={{ color: "var(--color-primary)" }}
+        >
+          <Download size={13} />
+          Download blank template
+        </a>
+      )}
+
+      {Boolean(signOffAttachment) && (
+        <a
+          href={signOffAttachment}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+          style={{ color: "var(--color-primary)" }}
+        >
+          <FileText size={13} />
+          View uploaded document
+        </a>
+      )}
+
+      {isReadOnly ? (
+        <SlideOverCompletionReadonlyStatus
+          docStatus={docStatus}
+          onOpenCompletionDoc={onOpenCompletionDoc}
+        />
+      ) : (
+        <SlideOverCompletionActions
+          docStatus={docStatus}
+          rowVersion={row.rowVersion}
+          completionPending={completionPending}
+          hasUploadHandler={Boolean(onUploadCompletionPdf)}
+          pdfInputRef={pdfInputRef}
+          onPdfSelected={handlePdfSelected}
+          onOpenCompletionDoc={onOpenCompletionDoc}
+        />
+      )}
+
+      <SlideOverCompletionSignoffs completion={completion} />
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-doc-badge.tsx

@@ -0,0 +1,44 @@
+import { Image as ImageIcon } from "lucide-react";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+function isMediaWO(type: WOType | ""): boolean {
+  return type === "Emergency" || type === "Reactive";
+}
+
+const DOC_BADGE_STYLE: Record<"Yes" | "No" | "NN", { bg: string; text: string }> = {
+  Yes: { bg: "#F0FDF4", text: "#166534" },
+  No: { bg: "#FFF1F2", text: "#BE123C" },
+  NN: { bg: "#F3F4F6", text: "#6B7280" },
+};
+
+export function DocBadge({ row }: { row: WorkOrderTableRow }) {
+  if (isMediaWO(row.type)) {
+    return (
+      <span
+        className="inline-flex items-center gap-1.5 text-[12.5px] font-semibold"
+        style={{ color: "var(--color-primary)" }}
+      >
+        <ImageIcon size={14} />
+        {row.mediaCount > 0 ? `${row.mediaCount} file${row.mediaCount !== 1 ? "s" : ""}` : "Media"}
+      </span>
+    );
+  }
+
+  const key = row.docStatus === "Yes" ? "Yes" : row.docStatus === "NN" ? "NN" : "No";
+  const style = DOC_BADGE_STYLE[key];
+  const label = key === "NN" ? "NN" : key;
+
+  return (
+    <span
+      className="inline-flex items-center px-1.5 py-0.5 text-[11px] font-medium leading-none"
+      style={{
+        background: style.bg,
+        color: style.text,
+        borderRadius: 4,
+      }}
+    >
+      {label}
+    </span>
+  );
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx

@@ -0,0 +1,163 @@
+import { useRef } from "react";
+import {
+  File as FileIcon,
+  FileText,
+  Film,
+  Image as ImageIcon,
+  Paperclip,
+  Upload,
+  X,
+} from "lucide-react";
+import { toast } from "react-toastify";
+import { Text } from "@/components/ui/text";
+import type { FileCategory, MediaFile } from "@/domain/work-orders/types/work-order-media";
+import {
+  canDeleteWorkOrderMedia,
+  formatMediaSizeLimit,
+  isWorkOrderFileTooLarge,
+  isWorkOrderMediaTypeAllowed,
+  workOrderMediaAcceptAttribute,
+} from "@/domain/work-orders/utils/work-order-media-limits";
+
+const FILETYPE_ICON: Record<FileCategory, typeof ImageIcon> = {
+  image: ImageIcon,
+  video: Film,
+  pdf: FileText,
+  doc: FileIcon,
+  other: Paperclip,
+};
+
+type SlideOverExtrasTabProps = {
+  uploads: MediaFile[];
+  isReadOnly: boolean;
+  pending?: boolean;
+  onUpload: (files: File[]) => void;
+  onRemove: (id: string) => void;
+};
+
+export function SlideOverExtrasTab({
+  uploads,
+  isReadOnly,
+  pending = false,
+  onUpload,
+  onRemove,
+}: SlideOverExtrasTabProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const addFiles = (files: FileList | null) => {
+    if (isReadOnly || pending || !files || files.length === 0) return;
+    const accepted: File[] = [];
+    for (const file of Array.from(files)) {
+      if (!isWorkOrderMediaTypeAllowed(file)) {
+        toast.error(`"${file.name}" is not a supported type (JPG, PNG, MP4, MOV).`);
+        continue;
+      }
+      if (isWorkOrderFileTooLarge(file)) {
+        toast.error(`"${file.name}" exceeds the ${formatMediaSizeLimit()} limit.`);
+        continue;
+      }
+      accepted.push(file);
+    }
+    if (accepted.length > 0) {
+      onUpload(accepted);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-1.5">
+        <ImageIcon size={14} style={{ color: "var(--foreground)" }} />
+        <span style={{ fontSize: 12, fontWeight: 600, color: "var(--foreground)" }}>
+          Extra Documents
+        </span>
+      </div>
+
+      {!isReadOnly && (
+        <>
+          <button
+            type="button"
+            disabled={pending}
+            onClick={() => inputRef.current?.click()}
+            onDragOver={(event) => event.preventDefault()}
+            onDrop={(event) => {
+              event.preventDefault();
+              addFiles(event.dataTransfer.files);
+            }}
+            className="flex w-full flex-col items-center justify-center gap-1.5 transition-colors hover:bg-[var(--color-bg-muted)] disabled:opacity-60"
+            style={{
+              minHeight: 100,
+              border: "1px dashed var(--color-border)",
+              borderRadius: 8,
+            }}
+          >
+            <Upload size={20} style={{ color: "var(--color-text-muted)" }} />
+            <span
+              style={{ fontSize: 13, color: "var(--color-text-muted)" }}
+              aria-busy={pending || undefined}
+            >
+              {pending ? "Uploading…" : "Upload documents, photos or videos"}
+            </span>
+            <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+              Accepted: JPG, PNG, MP4, MOV · Max {formatMediaSizeLimit()} per file
+            </span>
+          </button>
+          <input
+            ref={inputRef}
+            type="file"
+            accept={workOrderMediaAcceptAttribute()}
+            multiple
+            hidden
+            disabled={pending}
+            onChange={(event) => {
+              addFiles(event.target.files);
+              event.target.value = "";
+            }}
+          />
+        </>
+      )}
+
+      {uploads.length === 0 ? (
+        <Text as="p" style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+          No extra documents yet.
+        </Text>
+      ) : (
+        <div className="space-y-1">
+          {uploads.map((file) => {
+            const ItemIcon = FILETYPE_ICON[file.fileType];
+            const showDelete = !isReadOnly && canDeleteWorkOrderMedia(file);
+            return (
+              <div key={file.id} className="flex items-center gap-2 py-1">
+                <ItemIcon
+                  size={12}
+                  className="shrink-0"
+                  style={{ color: "var(--color-text-muted)" }}
+                />
+                <a
+                  href={file.url}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="min-w-0 flex-1 truncate hover:underline"
+                  style={{ fontSize: 12, color: "var(--foreground)" }}
+                >
+                  {file.name}
+                </a>
+                {showDelete && (
+                  <button
+                    type="button"
+                    title="Remove"
+                    disabled={pending}
+                    onClick={() => onRemove(file.id)}
+                    className="rounded p-0.5 transition-opacity hover:opacity-70 disabled:opacity-50"
+                    style={{ color: "var(--color-text-muted)" }}
+                  >
+                    <X size={12} />
+                  </button>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-assigned-field.tsx

@@ -0,0 +1,28 @@
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { getDispatcherAvatarColor } from "@/domain/work-orders/utils/dispatcher-avatar-color";
+
+type SlideOverInfoTabAssignedFieldProps = {
+  dispatcher?: WorkOrderUser;
+  dispatcherName?: string;
+};
+
+export function SlideOverInfoTabAssignedField({
+  dispatcher,
+  dispatcherName,
+}: SlideOverInfoTabAssignedFieldProps) {
+  if (!dispatcher && !dispatcherName) {
+    return <span style={{ color: "var(--color-text-muted)" }}>—</span>;
+  }
+
+  return (
+    <span className="inline-flex items-center gap-1.5 text-[12.5px]">
+      {dispatcher != null && (
+        <span
+          className="h-2 w-2 shrink-0 rounded-full"
+          style={{ background: getDispatcherAvatarColor(dispatcher) }}
+        />
+      )}
+      {dispatcher?.name || dispatcherName}
+    </span>
+  );
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-display-view.tsx

@@ -0,0 +1,92 @@
+import { SlideOverInfoRow } from "@/app/(protected)/workorders/_components/detail/slide-over-info-row";
+import { PmTypeIcon } from "@/app/(protected)/workorders/_components/list/table/pm-type-icons";
+import { WoTableTypeLabel } from "@/app/(protected)/workorders/_components/list/table/cells/wo-table-type-label";
+import type { VendorDropdownItem, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import { formatApptRange, parseApptTime } from "@/domain/work-orders/utils/wizard-date-utils";
+import { DocBadge } from "./slide-over-doc-badge";
+import { SlideOverInfoTabAssignedField } from "./slide-over-info-tab-assigned-field";
+import { SlideOverInfoTabStatusField } from "./slide-over-info-tab-status-field";
+import { SlideOverInfoTabVendorField } from "./slide-over-info-tab-vendor-field";
+
+type SlideOverInfoTabDisplayViewProps = {
+  source: WorkOrderTableRow;
+  isCancelled: boolean;
+  dispatcher?: WorkOrderUser;
+  vendors: VendorDropdownItem[];
+};
+
+export function SlideOverInfoTabDisplayView({
+  source,
+  isCancelled,
+  dispatcher,
+  vendors,
+}: SlideOverInfoTabDisplayViewProps) {
+  const appt = parseApptTime(source.apptTime);
+  const apptDisplay = appt.start ? formatApptRange(appt.start, appt.end) : source.apptTime || "—";
+
+  return (
+    <div style={isCancelled ? { opacity: 0.6, pointerEvents: "none" } : undefined}>
+      <SlideOverInfoRow label="WO #">
+        <span className="font-mono text-[12.5px] font-semibold">{source.woNumber || "—"}</span>
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Site">
+        <span className="font-mono text-[12.5px] font-bold" style={{ color: "var(--foreground)" }}>
+          {source.site || "—"}
+        </span>
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Type of WO">
+        {source.type ? (
+          <WoTableTypeLabel type={source.type as WOType} />
+        ) : (
+          <span style={{ color: "var(--color-text-muted)" }}>—</span>
+        )}
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Assigned To">
+        <SlideOverInfoTabAssignedField
+          dispatcher={dispatcher}
+          dispatcherName={source.dispatcherName}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Schedule On">
+        <span className="text-[12.5px]">
+          {source.scheduleWeekOnly && source.targetWeek
+            ? `Week of ${source.targetWeek}`
+            : source.scheduledOn || "—"}
+        </span>
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Due Date">
+        <span className="text-[12.5px]">{source.dueDate || "—"}</span>
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Appt Time">
+        <span className="text-[12.5px]">{apptDisplay}</span>
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Service">
+        {source.pm ? (
+          <span className="inline-flex items-center gap-1.5 text-[12.5px]">
+            <PmTypeIcon pmType={source.pm} size={14} />
+            {source.pm}
+          </span>
+        ) : (
+          <span style={{ color: "var(--color-text-muted)" }}>—</span>
+        )}
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Vendor">
+        <SlideOverInfoTabVendorField source={source} vendors={vendors} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Status">
+        <SlideOverInfoTabStatusField source={source} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Comp Doc">
+        <DocBadge row={source} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="POC">
+        <span className="text-[12.5px]" style={{ color: "var(--color-text-secondary)" }}>
+          {source.pocName || "—"}
+          {source.pocPhone ? ` · ${source.pocPhone}` : ""}
+        </span>
+      </SlideOverInfoRow>
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-edit-view.tsx

@@ -0,0 +1,160 @@
+import { AssignedToCell } from "@/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell";
+import { ApptTimeCell } from "@/app/(protected)/workorders/_components/list/table/cells/appt-time-cell";
+import { DateCell } from "@/app/(protected)/workorders/_components/list/table/cells/date-cell";
+import { EditableWONumberCell } from "@/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell";
+import { PMTypeCell } from "@/app/(protected)/workorders/_components/list/table/cells/pm-type-cell";
+import { SiteCell } from "@/app/(protected)/workorders/_components/list/table/cells/site-cell";
+import { StatusCell } from "@/app/(protected)/workorders/_components/list/table/cells/status-cell";
+import { TypeCell } from "@/app/(protected)/workorders/_components/list/table/cells/type-cell";
+import { VendorCell } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-cell";
+import { SlideOverInfoRow } from "@/app/(protected)/workorders/_components/detail/slide-over-info-row";
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WizardWOStatus } from "@/domain/work-orders/types/work-order-wizard";
+import { DocBadge } from "./slide-over-doc-badge";
+
+type SlideOverInfoTabEditViewProps = {
+  draft: WorkOrderTableRow;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  allOrders: WorkOrderTableRow[];
+  onDraftChange: (patch: Partial<WorkOrderTableRow>) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+};
+
+export function SlideOverInfoTabEditView({
+  draft,
+  users,
+  sites,
+  vendors,
+  pmTypes,
+  allOrders,
+  onDraftChange,
+  onDuplicateFound,
+}: SlideOverInfoTabEditViewProps) {
+  return (
+    <div>
+      <SlideOverInfoRow label="WO #">
+        <EditableWONumberCell
+          value={draft.woNumber}
+          rescheduleCount={draft.rescheduleCount}
+          carriedOver={draft.carriedOver}
+          currentId={draft.id}
+          allOrders={allOrders}
+          onSave={(woNumber) => onDraftChange({ woNumber })}
+          onDuplicateFound={onDuplicateFound}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Site">
+        <SiteCell
+          value={draft.site}
+          location={draft.location}
+          locationId={draft.locationId}
+          pocName={draft.pocName}
+          pocPhone={draft.pocPhone}
+          pocNotes={draft.pocNotes}
+          sites={sites}
+          onSave={(patch) =>
+            onDraftChange({
+              site: patch.site,
+              location: patch.location,
+              locationId: patch.locationId,
+            })
+          }
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Type of WO">
+        <TypeCell value={draft.type} onSave={(type) => onDraftChange({ type })} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Assigned To">
+        <AssignedToCell
+          dispatcherId={draft.dispatcherId}
+          users={users}
+          onSave={(id, name) => onDraftChange({ dispatcherId: id, dispatcherName: name })}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Schedule On">
+        <DateCell
+          value={draft.scheduledOn}
+          allowWeekMode
+          targetWeek={draft.targetWeek}
+          defaultMode={draft.scheduleWeekOnly ? "week" : "date"}
+          onSave={(scheduledOn) =>
+            onDraftChange({ scheduledOn, scheduleWeekOnly: false, isPastDue: false })
+          }
+          onSaveWeek={(weekStart) =>
+            onDraftChange({
+              scheduledOn: "",
+              targetWeek: weekStart,
+              scheduleWeekOnly: true,
+              isPastDue: false,
+            })
+          }
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Due Date">
+        <DateCell value={draft.dueDate} onSave={(dueDate) => onDraftChange({ dueDate })} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Appt Time">
+        <ApptTimeCell
+          apptTime={draft.apptTime}
+          onSave={(apptTime) => onDraftChange({ apptTime })}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Service">
+        <PMTypeCell
+          value={draft.pm}
+          pmTypes={pmTypes}
+          serviceNotes={draft.serviceNotes}
+          extraServices={draft.extraServices}
+          woNumber={draft.woNumber}
+          onSave={(pm) => onDraftChange({ pm })}
+          onSaveDetails={(details) =>
+            onDraftChange({
+              serviceNotes: details.serviceNotes,
+              extraServices: details.extraServices,
+            })
+          }
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Vendor">
+        <VendorCell
+          company={draft.company}
+          tech={draft.tech}
+          techPhone={draft.techPhone}
+          vendors={vendors}
+          onSave={(patch) =>
+            onDraftChange({
+              vendorId: patch.vendorId,
+              company: patch.company,
+              tech: patch.tech,
+              techPhone: patch.techPhone,
+            })
+          }
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Status">
+        <StatusCell
+          wo={draft}
+          onChangeStatus={(status: WizardWOStatus) => onDraftChange({ status })}
+          onOpenSlideOver={() => {}}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Comp Doc">
+        <DocBadge row={draft} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="POC">
+        <span className="text-[13px]" style={{ color: "var(--color-text-secondary)" }}>
+          {draft.pocName || "—"}
+          {draft.pocPhone ? ` · ${draft.pocPhone}` : ""}
+        </span>
+      </SlideOverInfoRow>
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-status-field.tsx

@@ -0,0 +1,26 @@
+import { WoTableStatusLabel } from "@/app/(protected)/workorders/_components/list/table/cells/wo-table-status-label";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type SlideOverInfoTabStatusFieldProps = {
+  source: WorkOrderTableRow;
+};
+
+export function SlideOverInfoTabStatusField({ source }: SlideOverInfoTabStatusFieldProps) {
+  if (source.isPastDue) {
+    return (
+      <span
+        className="inline-flex items-center gap-1.5 text-[12.5px] font-semibold"
+        style={{ color: "var(--status-pastdue-text)" }}
+      >
+        <span className="h-2 w-2 shrink-0 rounded-full bg-[#BE123C]" />
+        Past Due
+      </span>
+    );
+  }
+
+  if (source.status) {
+    return <WoTableStatusLabel status={source.status} />;
+  }
+
+  return <span style={{ color: "var(--color-text-muted)" }}>—</span>;
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-vendor-field.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { VendorDialog } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type SlideOverInfoTabVendorFieldProps = {
+  source: WorkOrderTableRow;
+  vendors: VendorDropdownItem[];
+};
+
+export function SlideOverInfoTabVendorField({ source, vendors }: SlideOverInfoTabVendorFieldProps) {
+  const [vendorDlg, setVendorDlg] = useState(false);
+
+  if (!source.tech && !source.company) {
+    return <span style={{ color: "var(--color-text-muted)" }}>—</span>;
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setVendorDlg(true)}
+        className="text-left transition-opacity hover:opacity-80"
+      >
+        <div className="text-[13px] font-semibold" style={{ color: "var(--foreground)" }}>
+          {source.tech || source.company}
+        </div>
+        {Boolean(source.tech && source.company) && (
+          <div className="text-[11px] font-normal" style={{ color: "var(--muted-foreground)" }}>
+            {source.company}
+          </div>
+        )}
+      </button>
+      <VendorDialog
+        open={vendorDlg}
+        onOpenChange={setVendorDlg}
+        company={source.company}
+        tech={source.tech}
+        techPhone={source.techPhone}
+        vendors={vendors}
+        onSave={() => setVendorDlg(false)}
+      />
+    </>
+  );
+}

src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab.tsx

@@ -0,0 +1,64 @@
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { SlideOverInfoTabDisplayView } from "./slide-over-info-tab-display-view";
+import { SlideOverInfoTabEditView } from "./slide-over-info-tab-edit-view";
+
+type SlideOverInfoTabProps = {
+  row: WorkOrderTableRow;
+  draft: WorkOrderTableRow;
+  editing: boolean;
+  isCancelled: boolean;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  allOrders: WorkOrderTableRow[];
+  onDraftChange: (patch: Partial<WorkOrderTableRow>) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+};
+
+export function SlideOverInfoTab({
+  row,
+  draft,
+  editing,
+  isCancelled,
+  users,
+  sites,
+  vendors,
+  pmTypes,
+  allOrders,
+  onDraftChange,
+  onDuplicateFound,
+}: SlideOverInfoTabProps) {
+  const isEditing = editing && !isCancelled;
+  const source = isEditing ? draft : row;
+  const dispatcher = users.find((u) => String(u.id) === source.dispatcherId);
+
+  if (isEditing) {
+    return (
+      <SlideOverInfoTabEditView
+        draft={draft}
+        users={users}
+        sites={sites}
+        vendors={vendors}
+        pmTypes={pmTypes}
+        allOrders={allOrders}
+        onDraftChange={onDraftChange}
+        onDuplicateFound={onDuplicateFound}
+      />
+    );
+  }
+
+  return (
+    <SlideOverInfoTabDisplayView
+      source={source}
+      isCancelled={isCancelled}
+      dispatcher={dispatcher}
+      vendors={vendors}
+    />
+  );
+}

src/app/(protected)/workorders/_components/detail/use-slide-over-edit-state.ts

@@ -0,0 +1,162 @@
+import { useEffect, useMemo, useState } from "react";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import {
+  buildSlideOverPatch,
+  isSlideOverDraftDirty,
+} from "@/domain/work-orders/utils/slide-over-draft";
+import type { SlideOverSaveOptions } from "./work-order-slide-over";
+import type { SlideOverTab } from "./use-work-order-slide-over";
+
+type UseSlideOverEditStateArgs = {
+  row: WorkOrderTableRow | null;
+  editMode: boolean;
+  infoSource: WorkOrderTableRow | null | undefined;
+  onSave: (id: string | number, patch: WorkOrderTablePatch, options?: SlideOverSaveOptions) => void;
+  onClose: () => void;
+  closeDisabled: boolean;
+  setTab: (tab: SlideOverTab) => void;
+};
+
+export function useSlideOverEditState({
+  row,
+  editMode,
+  infoSource,
+  onSave,
+  onClose,
+  closeDisabled,
+  setTab,
+}: UseSlideOverEditStateArgs) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState<WorkOrderTableRow | null>(null);
+  /** Last confirmed baseline for dirty/patch — not overwritten by optimistic parent row. */
+  const [baseline, setBaseline] = useState<WorkOrderTableRow | null>(null);
+  const [showUnsaved, setShowUnsaved] = useState(false);
+  const [unsavedIntent, setUnsavedIntent] = useState<"close" | "cancel-edit" | null>(null);
+
+  // Reset draft/baseline only when the opened WO identity or editMode intent changes —
+  // not on every optimistic parent-row field update during a failed/in-flight save.
+  useEffect(() => {
+    if (!row) {
+      setDraft(null);
+      setBaseline(null);
+      setEditing(false);
+      setShowUnsaved(false);
+      setUnsavedIntent(null);
+      return;
+    }
+    setDraft(row);
+    setBaseline(row);
+    setEditing(editMode && (row.status as string) !== "Canceled");
+    setTab("info");
+    setShowUnsaved(false);
+    setUnsavedIntent(null);
+    // Intentionally identity-only: depending on `row` would absorb optimistic patches.
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- row.id / editMode gate
+  }, [row?.id, editMode]);
+
+  useEffect(() => {
+    if (!infoSource) return;
+    if (!editing) {
+      setDraft(infoSource);
+      setBaseline(infoSource);
+      return;
+    }
+    // While editing, freeze baseline so optimistic parent-row patches cannot clear dirty.
+    setDraft((prev) => {
+      if (prev && baseline && isSlideOverDraftDirty(prev, baseline)) return prev;
+      return infoSource;
+    });
+  }, [infoSource, editing, baseline]);
+
+  const activeDraft = draft ?? infoSource;
+  const dirtyBaseline = baseline ?? infoSource;
+  const isDirty = useMemo(() => {
+    if (!dirtyBaseline || !activeDraft || !editing) return false;
+    return isSlideOverDraftDirty(activeDraft, dirtyBaseline);
+  }, [activeDraft, dirtyBaseline, editing]);
+
+  const handleDraftChange = (patch: Partial<WorkOrderTableRow>) => {
+    setDraft((prev) => (prev ? { ...prev, ...patch } : prev));
+  };
+
+  const commit = () => {
+    if (!row || !activeDraft || !dirtyBaseline) return;
+    const patch = buildSlideOverPatch(activeDraft, dirtyBaseline);
+    if (Object.keys(patch).length === 0) {
+      setEditing(false);
+      setShowUnsaved(false);
+      return;
+    }
+    onSave(row.id, patch, {
+      onSuccess: () => {
+        setBaseline(activeDraft);
+        setEditing(false);
+        setShowUnsaved(false);
+      },
+    });
+  };
+
+  const discard = () => {
+    if (!dirtyBaseline) return;
+    setDraft(dirtyBaseline);
+    setEditing(false);
+    setShowUnsaved(false);
+  };
+
+  const requestClose = () => {
+    if (closeDisabled) return;
+    if (editing && isDirty) {
+      setUnsavedIntent("close");
+      setShowUnsaved(true);
+      return;
+    }
+    onClose();
+  };
+
+  const handleCancelEdit = () => {
+    if (isDirty) {
+      setUnsavedIntent("cancel-edit");
+      setShowUnsaved(true);
+      return;
+    }
+    if (dirtyBaseline) setDraft(dirtyBaseline);
+    setEditing(false);
+  };
+
+  const handleDiscard = () => {
+    const intent = unsavedIntent;
+    discard();
+    setUnsavedIntent(null);
+    // Close only when Discard was opened from panel close — never from cancel-edit.
+    // Skip when uploads block close (closeDisabled).
+    if (intent === "close" && !closeDisabled) {
+      onClose();
+    }
+  };
+
+  const startEditing = () => {
+    if (!infoSource) return;
+    setDraft(infoSource);
+    setBaseline(infoSource);
+    setEditing(true);
+    setTab("info");
+  };
+
+  return {
+    editing,
+    activeDraft,
+    isDirty,
+    showUnsaved,
+    setShowUnsaved,
+    handleDraftChange,
+    commit,
+    discard,
+    handleDiscard,
+    requestClose,
+    handleCancelEdit,
+    startEditing,
+  };
+}

src/app/(protected)/workorders/_components/detail/use-slide-over-media-state.ts

@@ -0,0 +1,101 @@
+import { useMemo, useState } from "react";
+import type { MediaUploadRequest } from "@/app/(protected)/workorders/_components/media/media-uploader";
+import { useMediaUploadSession } from "@/app/(protected)/workorders/_hooks/use-media-upload-session";
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import { boardMediaItemsToMediaFiles } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { WorkOrderBoardDetail } from "@/domain/work-orders/types/work-order-board-detail";
+import type {
+  useDeleteWorkOrderMedia,
+  useUpdateWorkOrderMediaCategory,
+  useUploadWorkOrderMedia,
+} from "@/domain/work-orders/use-cases/use-work-order-mutations";
+
+const COMPLETION_MEDIA_PURPOSES = new Set(["Before", "After", "Completion"]);
+
+type UseSlideOverMediaStateArgs = {
+  detailForRow?: WorkOrderBoardDetail;
+  uploadMediaMutation: ReturnType<typeof useUploadWorkOrderMedia>;
+  deleteMediaMutation: ReturnType<typeof useDeleteWorkOrderMedia>;
+  categorizeMediaMutation: ReturnType<typeof useUpdateWorkOrderMediaCategory>;
+};
+
+export function useSlideOverMediaState({
+  detailForRow,
+  uploadMediaMutation,
+  deleteMediaMutation,
+  categorizeMediaMutation,
+}: UseSlideOverMediaStateArgs) {
+  const [mediaBatchPending, setMediaBatchPending] = useState(false);
+  const { uploads, startUploads, retryUpload, cancelUpload, removeLocal, isLocal } =
+    useMediaUploadSession(detailForRow, (input) => uploadMediaMutation.mutateAsync(input));
+
+  const completionMedia = useMemo(
+    () =>
+      uploads.filter(
+        (item) =>
+          COMPLETION_MEDIA_PURPOSES.has(item.purpose ?? "") ||
+          item.uploadStatus === "uploading" ||
+          item.uploadStatus === "failed",
+      ),
+    [uploads],
+  );
+
+  const extrasUploads = useMemo(
+    () =>
+      boardMediaItemsToMediaFiles(
+        (detailForRow?.media ?? []).filter((item) => item.category === "Extra"),
+      ),
+    [detailForRow?.media],
+  );
+
+  const hasLocalUploading = uploads.some((item) => item.uploadStatus === "uploading");
+  const mediaPending =
+    mediaBatchPending ||
+    hasLocalUploading ||
+    uploadMediaMutation.isPending ||
+    deleteMediaMutation.isPending ||
+    categorizeMediaMutation.isPending;
+
+  const workOrderVersion = detailForRow?.info.rowVersion?.trim() ?? "";
+
+  const uploadMediaRequests = (requests: MediaUploadRequest[]) => {
+    startUploads(requests);
+  };
+
+  const uploadExtraFiles = async (files: File[]) => {
+    setMediaBatchPending(true);
+    try {
+      for (const file of files) {
+        await uploadMediaMutation.mutateAsync({ file, category: "Extra" });
+      }
+    } finally {
+      setMediaBatchPending(false);
+    }
+  };
+
+  const categorizeMedia = (mediaId: string, category: UploadableMediaCategory) => {
+    if (!workOrderVersion) return;
+    categorizeMediaMutation.mutate({ mediaId, category, workOrderVersion });
+  };
+
+  const removeMedia = (id: string) => {
+    if (isLocal(id)) {
+      removeLocal(id);
+      return;
+    }
+    if (!workOrderVersion) return;
+    deleteMediaMutation.mutate({ mediaId: id, workOrderVersion });
+  };
+
+  return {
+    completionMedia,
+    extrasUploads,
+    mediaPending,
+    uploadMediaRequests,
+    uploadExtraFiles,
+    categorizeMedia,
+    retryUpload,
+    cancelUpload,
+    removeMedia,
+  };
+}

src/app/(protected)/workorders/_components/detail/use-work-order-slide-over.ts

@@ -0,0 +1,160 @@
+import { useState } from "react";
+import { toast } from "react-toastify";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { useWorkOrderBoardDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
+import {
+  useAddWorkOrderComment,
+  useDeleteWorkOrderMedia,
+  useUpdateWorkOrderComment,
+  useUpdateWorkOrderMediaCategory,
+  useUploadCompletionDoc,
+  useUploadWorkOrderMedia,
+} from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { isWorkOrderDocumentsReadOnly } from "@/domain/work-orders/utils/work-order-media-limits";
+import { todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+import { useAuthContext } from "@/providers/auth-context";
+import { useSlideOverEditState } from "./use-slide-over-edit-state";
+import { useSlideOverMediaState } from "./use-slide-over-media-state";
+import type { SlideOverSaveOptions } from "./work-order-slide-over";
+
+export type SlideOverTab = "info" | "comments" | "audit" | "completion" | "extras";
+
+type UseWorkOrderSlideOverArgs = {
+  row: WorkOrderTableRow | null;
+  editMode: boolean;
+  onSave: (id: string | number, patch: WorkOrderTablePatch, options?: SlideOverSaveOptions) => void;
+  onClose: () => void;
+  saving?: boolean;
+};
+
+export function useWorkOrderSlideOver({
+  row,
+  editMode,
+  onSave,
+  onClose,
+  saving,
+}: UseWorkOrderSlideOverArgs) {
+  const { user } = useAuthContext();
+  const workOrderId = row?.id;
+  const {
+    data: detail,
+    isLoading,
+    isFetching,
+    error,
+    refetch,
+  } = useWorkOrderBoardDetail(workOrderId, Boolean(row));
+  const commentMutation = useAddWorkOrderComment(workOrderId ?? "");
+  const updateCommentMutation = useUpdateWorkOrderComment(workOrderId ?? "");
+  const uploadMediaMutation = useUploadWorkOrderMedia(workOrderId ?? "");
+  const categorizeMediaMutation = useUpdateWorkOrderMediaCategory(workOrderId ?? "");
+  const deleteMediaMutation = useDeleteWorkOrderMedia(workOrderId ?? "");
+  const uploadCompletionMutation = useUploadCompletionDoc(workOrderId ?? "");
+
+  const [tab, setTab] = useState<SlideOverTab>("info");
+
+  // Prefer row until detail for this id arrives — avoids cross-WO bleed while loading.
+  const detailForRow =
+    detail && row && String(detail.info.id) === String(row.id) ? detail : undefined;
+  const infoSource = detailForRow?.info ?? row;
+  const isCancelled = (infoSource?.status as string) === "Canceled";
+  const isDocumentsReadOnly = isWorkOrderDocumentsReadOnly(infoSource?.status);
+
+  const {
+    completionMedia,
+    extrasUploads,
+    mediaPending,
+    uploadMediaRequests,
+    uploadExtraFiles,
+    categorizeMedia,
+    retryUpload,
+    cancelUpload,
+    removeMedia,
+  } = useSlideOverMediaState({
+    detailForRow,
+    uploadMediaMutation,
+    deleteMediaMutation,
+    categorizeMediaMutation,
+  });
+  const completionPending = uploadCompletionMutation.isPending;
+  const closeDisabled = Boolean(saving || mediaPending || completionPending);
+
+  const editState = useSlideOverEditState({
+    row,
+    editMode,
+    infoSource,
+    onSave,
+    onClose,
+    closeDisabled,
+    setTab,
+  });
+
+  const uploadCompletionPdf = (file: File) => {
+    const version = infoSource?.rowVersion;
+    if (!version || !row || !infoSource) {
+      toast.error("Missing work order version. Refresh and try again.");
+      return;
+    }
+    uploadCompletionMutation.mutate(
+      { file, workOrderVersion: version },
+      {
+        onSuccess: async () => {
+          // Mirror CompDoc finalize: ensure completedDate then mark docStatus Yes.
+          const patch: WorkOrderTablePatch = { docStatus: "Yes" };
+          if (!infoSource.completedDate) {
+            patch.completedDate = todayIso();
+          }
+          try {
+            await new Promise<void>((resolve, reject) => {
+              onSave(row.id, patch, {
+                onSuccess: () => resolve(),
+                onError: (error) => reject(error),
+              });
+            });
+          } catch {
+            toast.error("Uploaded PDF but failed to update document status. Refresh and retry.");
+          }
+        },
+      },
+    );
+  };
+
+  const showDetailSkeleton = isLoading && !detailForRow;
+  const errorMessage =
+    error instanceof Error ? error.message : "Failed to load work order details.";
+
+  return {
+    user,
+    detail,
+    isLoading,
+    isFetching,
+    error,
+    refetch,
+    commentMutation,
+    updateCommentMutation,
+    tab,
+    setTab,
+    detailForRow,
+    infoSource,
+    isCancelled,
+    isDocumentsReadOnly,
+    completionMedia,
+    extrasUploads,
+    mediaPending,
+    completionPending,
+    closeDisabled,
+    uploadMediaRequests,
+    uploadExtraFiles,
+    categorizeMedia,
+    retryUpload,
+    cancelUpload,
+    removeMedia,
+    deleteMediaMutation,
+    uploadCompletionPdf,
+    showDetailSkeleton,
+    errorMessage,
+    ...editState,
+  };
+}

src/app/(protected)/workorders/_components/detail/work-order-activity-section.tsx

@@ -0,0 +1,101 @@
+import { useMemo, useState } from "react";
+import { Box, Paper, Tab, Tabs, TextField, Typography } from "@mui/material";
+import { CommentTimeline } from "@/components/common/comment-timeline";
+import { mapWorkOrderCommentsToTimeline } from "@/components/common/comment-timeline-mappers";
+import { Button } from "@/components/ui/button";
+import { AuditTimeline } from "./audit-timeline";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order";
+
+type ActivityTab = "customer" | "internal" | "audit";
+
+type WorkOrderActivitySectionProps = {
+  wo: WorkOrderDetail;
+  onCommentSubmit: (
+    text: string,
+    commentType: "customer" | "internal",
+    options?: { onSuccess?: () => void },
+  ) => void;
+  isCommentPending: boolean;
+};
+
+export function WorkOrderActivitySection({
+  wo,
+  onCommentSubmit,
+  isCommentPending,
+}: WorkOrderActivitySectionProps) {
+  const [activeTab, setActiveTab] = useState<ActivityTab>("customer");
+  const [commentText, setCommentText] = useState("");
+
+  const customerComments = useMemo(
+    () => (wo.comments ?? []).filter((comment) => comment.commentType === "customer"),
+    [wo.comments],
+  );
+  const internalComments = useMemo(
+    () => (wo.comments ?? []).filter((comment) => comment.commentType === "internal"),
+    [wo.comments],
+  );
+  const auditLog = wo.auditLog ?? [];
+
+  const handleCommentSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!commentText.trim()) {
+      return;
+    }
+    onCommentSubmit(commentText.trim(), activeTab === "customer" ? "customer" : "internal", {
+      onSuccess: () => setCommentText(""),
+    });
+  };
+
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Typography variant="subtitle1" className="mb-3 font-semibold">
+        Activity
+      </Typography>
+      <Tabs
+        value={activeTab}
+        onChange={(_event, value: ActivityTab) => setActiveTab(value)}
+        className="mb-3"
+      >
+        <Tab value="customer" label={`Customer (${customerComments.length})`} />
+        <Tab value="internal" label={`Internal (${internalComments.length})`} />
+        <Tab value="audit" label={`Audit Log (${auditLog.length})`} />
+      </Tabs>
+
+      {activeTab === "customer" && (
+        <CommentTimeline
+          items={mapWorkOrderCommentsToTimeline(customerComments)}
+          emptyMessage="No comments yet."
+        />
+      )}
+      {activeTab === "internal" && (
+        <CommentTimeline
+          items={mapWorkOrderCommentsToTimeline(internalComments)}
+          emptyMessage="No comments yet."
+        />
+      )}
+      {activeTab === "audit" && <AuditTimeline entries={auditLog} />}
+
+      {activeTab === "internal" && (
+        <Box component="form" onSubmit={handleCommentSubmit} className="mt-4 flex flex-col gap-2">
+          <TextField
+            multiline
+            rows={2}
+            value={commentText}
+            onChange={(event) => setCommentText(event.target.value)}
+            placeholder="Type a comment..."
+            disabled={isCommentPending}
+          />
+          <Button
+            type="submit"
+            className="self-end"
+            disabled={!commentText.trim()}
+            loading={isCommentPending}
+            loadingText="Sending…"
+          >
+            Send
+          </Button>
+        </Box>
+      )}
+    </Paper>
+  );
+}

src/app/(protected)/workorders/_components/detail/work-order-assignee-menu.tsx

@@ -0,0 +1,56 @@
+import { Button, Menu, MenuItem } from "@mui/material";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { useMenuAnchor } from "@/hooks/use-menu-anchor";
+
+type WorkOrderAssigneeMenuProps = {
+  assignedTo: string;
+  users: WorkOrderUser[];
+  disabled?: boolean;
+  onAssign: (userId: string | number, userName: string) => void;
+};
+
+export function WorkOrderAssigneeMenu({
+  assignedTo,
+  users,
+  disabled = false,
+  onAssign,
+}: WorkOrderAssigneeMenuProps) {
+  const { anchorEl, open, setAnchor, close } = useMenuAnchor();
+
+  return (
+    <>
+      <Button
+        size="small"
+        disabled={disabled}
+        aria-busy={disabled || undefined}
+        onClick={(event) => setAnchor(event.currentTarget)}
+      >
+        {disabled ? "Updating…" : assignedTo || "Unassigned"}
+      </Button>
+      <Menu anchorEl={anchorEl} open={open} onClose={close}>
+        <MenuItem
+          disabled={disabled}
+          onClick={() => {
+            close();
+            onAssign("", "");
+          }}
+        >
+          Unassigned
+        </MenuItem>
+        {users.map((user) => (
+          <MenuItem
+            key={String(user.id)}
+            selected={assignedTo === user.name}
+            disabled={disabled}
+            onClick={() => {
+              close();
+              onAssign(user.id, user.name);
+            }}
+          >
+            {user.name}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}

src/app/(protected)/workorders/_components/detail/work-order-description-accordion.tsx

@@ -0,0 +1,20 @@
+import { Accordion, AccordionDetails, AccordionSummary, Typography } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order";
+
+type WorkOrderDescriptionAccordionProps = {
+  wo: WorkOrderDetail;
+};
+
+export function WorkOrderDescriptionAccordion({ wo }: WorkOrderDescriptionAccordionProps) {
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography sx={{ fontWeight: 600 }}>Description</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography>{wo.description || "No description provided."}</Typography>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/app/(protected)/workorders/_components/detail/work-order-detail-sections.tsx

@@ -0,0 +1,49 @@
+import type { WorkOrderDetail, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { WorkOrderActivitySection } from "./work-order-activity-section";
+import { WorkOrderDescriptionAccordion } from "./work-order-description-accordion";
+import { WorkOrderDetailsCard } from "./work-order-details-card";
+import { WorkOrderDispatchesAccordion } from "./work-order-dispatches-accordion";
+import { WorkOrderSimpleAccordions } from "./work-order-simple-accordions";
+
+type WorkOrderDetailsSectionProps = {
+  wo: WorkOrderDetail;
+  users: WorkOrderUser[];
+  onAssign: (userId: string | number, userName: string) => void;
+  isAssignPending?: boolean;
+  onDispatchClick: (dispatchId: string | number) => void;
+  onCommentSubmit: (
+    text: string,
+    commentType: "customer" | "internal",
+    options?: { onSuccess?: () => void },
+  ) => void;
+  isCommentPending: boolean;
+};
+
+export function WorkOrderDetailsSection({
+  wo,
+  users,
+  onAssign,
+  isAssignPending = false,
+  onDispatchClick,
+  onCommentSubmit,
+  isCommentPending,
+}: WorkOrderDetailsSectionProps) {
+  return (
+    <>
+      <WorkOrderDetailsCard
+        wo={wo}
+        users={users}
+        onAssign={onAssign}
+        isAssignPending={isAssignPending}
+      />
+      <WorkOrderSimpleAccordions wo={wo} />
+      <WorkOrderDispatchesAccordion wo={wo} onDispatchClick={onDispatchClick} />
+      <WorkOrderDescriptionAccordion wo={wo} />
+      <WorkOrderActivitySection
+        wo={wo}
+        onCommentSubmit={onCommentSubmit}
+        isCommentPending={isCommentPending}
+      />
+    </>
+  );
+}

src/app/(protected)/workorders/_components/detail/work-order-details-card.tsx

@@ -0,0 +1,45 @@
+import { Box, Paper, Typography } from "@mui/material";
+import { DetailField, DetailFieldGrid } from "@/components/common/detail-field";
+import { WorkOrderAssigneeMenu } from "./work-order-assignee-menu";
+import type { WorkOrderDetail, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+
+type WorkOrderDetailsCardProps = {
+  wo: WorkOrderDetail;
+  users: WorkOrderUser[];
+  onAssign: (userId: string | number, userName: string) => void;
+  isAssignPending?: boolean;
+};
+
+export function WorkOrderDetailsCard({
+  wo,
+  users,
+  onAssign,
+  isAssignPending = false,
+}: WorkOrderDetailsCardProps) {
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Typography variant="subtitle1" className="mb-3 font-semibold">
+        Details
+      </Typography>
+      <DetailFieldGrid>
+        <DetailField label="Internal WO" value={wo.internalWONumber} />
+        <DetailField label="Customer WO" value={wo.workOrderNumber || "—"} />
+        <DetailField label="Priority" value={wo.priority || "—"} />
+        <DetailField label="Location" value={wo.location || "—"} />
+        <Box>
+          <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
+            Assigned To
+          </Typography>
+          <WorkOrderAssigneeMenu
+            assignedTo={wo.assignedTo}
+            users={users}
+            disabled={isAssignPending}
+            onAssign={onAssign}
+          />
+        </Box>
+        <DetailField label="Source" value={wo.source || "—"} />
+        <DetailField label="TT" value={wo.tt || "—"} />
+      </DetailFieldGrid>
+    </Paper>
+  );
+}

src/app/(protected)/workorders/_components/detail/work-order-dispatches-accordion.tsx

@@ -0,0 +1,85 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order";
+import { formatDateTime, getWaitTimeTextClass, timeSince, waitTimeColor } from "@/lib/time-utils";
+
+type WorkOrderDispatchesAccordionProps = {
+  wo: WorkOrderDetail;
+  onDispatchClick: (dispatchId: string | number) => void;
+};
+
+export function WorkOrderDispatchesAccordion({
+  wo,
+  onDispatchClick,
+}: WorkOrderDispatchesAccordionProps) {
+  return (
+    <Accordion defaultExpanded={Boolean(wo.dispatches.length)}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography sx={{ fontWeight: 600 }}>Dispatches ({wo.dispatches.length})</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        {wo.dispatches.length ? (
+          <TableContainer>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell>Dispatch #</TableCell>
+                  <TableCell>Vendor</TableCell>
+                  <TableCell>NTE</TableCell>
+                  <TableCell>Status</TableCell>
+                  <TableCell>Date</TableCell>
+                  <TableCell>Wait</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {wo.dispatches.map((dispatch) => {
+                  const color = waitTimeColor(dispatch.dispatchedAt);
+                  return (
+                    <TableRow
+                      key={String(dispatch.id)}
+                      hover
+                      className="cursor-pointer"
+                      onClick={() => onDispatchClick(dispatch.id)}
+                    >
+                      <TableCell>{dispatch.dispatchNumber || dispatch.poNumber}</TableCell>
+                      <TableCell>{dispatch.vendorName}</TableCell>
+                      <TableCell>
+                        {dispatch.nteAmount != null ? `$${dispatch.nteAmount.toFixed(2)}` : "—"}
+                      </TableCell>
+                      <TableCell>{dispatch.status}</TableCell>
+                      <TableCell>
+                        {dispatch.dispatchedAt ? formatDateTime(dispatch.dispatchedAt) : "—"}
+                      </TableCell>
+                      <TableCell>
+                        {dispatch.status === "Sent" ? (
+                          <Typography variant="caption" className={getWaitTimeTextClass(color)}>
+                            {timeSince(dispatch.dispatchedAt)}
+                          </Typography>
+                        ) : (
+                          "—"
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        ) : (
+          <Typography color="text.secondary">No dispatches yet.</Typography>
+        )}
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/app/(protected)/workorders/_components/detail/work-order-simple-accordions.tsx

@@ -0,0 +1,61 @@
+import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { DetailField, DetailFieldGrid } from "@/components/common/detail-field";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order";
+import { formatDateTime } from "@/lib/time-utils";
+
+type WorkOrderSimpleAccordionsProps = {
+  wo: WorkOrderDetail;
+};
+
+export function WorkOrderSimpleAccordions({ wo }: WorkOrderSimpleAccordionsProps) {
+  return (
+    <>
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Classification</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <DetailFieldGrid>
+            <DetailField label="Problem" value={wo.problem || "—"} />
+            <DetailField label="Trade" value={wo.trade || "—"} />
+            <DetailField label="Sub-Trade" value={wo.subTrade || "—"} />
+          </DetailFieldGrid>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Schedule</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <DetailField
+              label="Created"
+              value={wo.createdDateFull ? formatDateTime(wo.createdDateFull) : "—"}
+            />
+            <DetailField label="Due Date" value={wo.dueDate || "—"} />
+            <DetailField label="Scheduled" value={wo.scheduledDate || "—"} />
+            <DetailField label="Completed" value={wo.completedDate || "—"} />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Financial</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <DetailField
+              label="Vendor NTE"
+              value={wo.vendorNTE ? `$${parseFloat(wo.vendorNTE).toFixed(2)}` : "—"}
+            />
+            <DetailField label="Customer PO" value={wo.po || "—"} />
+            <DetailField label="Customer NTE" value="Not connected" />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+    </>
+  );
+}

src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-nav.tsx

@@ -0,0 +1,52 @@
+import type { SlideOverTab } from "./use-work-order-slide-over";
+
+const SLIDE_OVER_TABS: { id: SlideOverTab; label: string }[] = [
+  { id: "info", label: "Info" },
+  { id: "comments", label: "Comments" },
+  { id: "audit", label: "Audit Log" },
+  { id: "completion", label: "Completion Doc" },
+  { id: "extras", label: "Extra Docs" },
+];
+
+type WorkOrderSlideOverTabNavProps = {
+  tab: SlideOverTab;
+  saving?: boolean;
+  onTabChange: (tab: SlideOverTab) => void;
+};
+
+export function WorkOrderSlideOverTabNav({
+  tab,
+  saving,
+  onTabChange,
+}: WorkOrderSlideOverTabNavProps) {
+  return (
+    <div
+      className="mt-2 flex shrink-0 gap-4 overflow-x-auto px-4"
+      style={{ borderBottom: "1px solid var(--color-border)" }}
+      role="tablist"
+      aria-label="Work order sections"
+    >
+      {SLIDE_OVER_TABS.map((item) => {
+        const active = tab === item.id;
+        return (
+          <button
+            key={item.id}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            disabled={Boolean(saving)}
+            onClick={() => onTabChange(item.id)}
+            className="shrink-0 border-b-2 pb-2.5 text-[12px] transition-colors disabled:opacity-50"
+            style={{
+              borderBottomColor: active ? "var(--color-primary)" : "transparent",
+              color: active ? "var(--color-primary)" : "var(--color-text-muted)",
+              fontWeight: active ? 500 : 400,
+            }}
+          >
+            {item.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-panel.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { QueryErrorPanel } from "@/components/ui/query-error-panel";
+import { SlideOverTabSkeleton } from "@/app/(protected)/workorders/_components/loading/slide-over-tab-skeleton";
+
+type SlideOverTabSkeletonVariant = "comments" | "audit" | "completion" | "extras";
+
+type WorkOrderSlideOverTabPanelProps = {
+  variant: SlideOverTabSkeletonVariant;
+  showSkeleton: boolean;
+  hasError: boolean;
+  errorMessage: string;
+  onRetry: () => void;
+  showContent: boolean;
+  children: ReactNode;
+};
+
+export function WorkOrderSlideOverTabPanel({
+  variant,
+  showSkeleton,
+  hasError,
+  errorMessage,
+  onRetry,
+  showContent,
+  children,
+}: WorkOrderSlideOverTabPanelProps) {
+  return (
+    <>
+      {showSkeleton && <SlideOverTabSkeleton variant={variant} />}
+      {hasError && <QueryErrorPanel compact message={errorMessage} onRetry={onRetry} />}
+      {showContent && children}
+    </>
+  );
+}

src/app/(protected)/workorders/_components/detail/work-order-slide-over-tabs.tsx

@@ -0,0 +1,156 @@
+import { Box } from "@mui/material";
+import { SlideOverAuditTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-audit-tab";
+import { SlideOverCommentsTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-comments-tab";
+import { SlideOverCompletionTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-tab";
+import { SlideOverExtrasTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab";
+import { SlideOverInfoTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab";
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { useWorkOrderSlideOver, SlideOverTab } from "./use-work-order-slide-over";
+import { WorkOrderSlideOverTabPanel } from "./work-order-slide-over-tab-panel";
+
+type SlideOverState = ReturnType<typeof useWorkOrderSlideOver>;
+
+type WorkOrderSlideOverTabsProps = {
+  tab: SlideOverTab;
+  state: SlideOverState;
+  saving?: boolean;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  allOrders: WorkOrderTableRow[];
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+  onOpenCompletionDoc: () => void;
+};
+
+export function WorkOrderSlideOverTabs({
+  tab,
+  state,
+  saving,
+  users,
+  sites,
+  vendors,
+  pmTypes,
+  allOrders,
+  onDuplicateFound,
+  onOpenCompletionDoc,
+}: WorkOrderSlideOverTabsProps) {
+  const hasError = Boolean(state.error) && !state.detailForRow;
+  const showContent = Boolean(state.detailForRow || !state.isLoading);
+  const { infoSource, activeDraft } = state;
+
+  return (
+    <Box className="flex-1 overflow-y-auto p-5">
+      {tab === "info" && infoSource != null && activeDraft != null && (
+        <SlideOverInfoTab
+          row={infoSource}
+          draft={activeDraft}
+          editing={state.editing && !saving}
+          isCancelled={state.isCancelled}
+          users={users}
+          sites={sites}
+          vendors={vendors}
+          pmTypes={pmTypes}
+          allOrders={allOrders}
+          onDraftChange={state.handleDraftChange}
+          onDuplicateFound={onDuplicateFound}
+        />
+      )}
+
+      {tab === "comments" && (
+        <WorkOrderSlideOverTabPanel
+          variant="comments"
+          showSkeleton={state.showDetailSkeleton}
+          hasError={hasError}
+          errorMessage={state.errorMessage}
+          onRetry={() => void state.refetch()}
+          showContent={state.detailForRow != null}
+        >
+          {state.detailForRow != null && (
+            <SlideOverCommentsTab
+              comments={state.detailForRow.comments}
+              isReadOnly={state.isDocumentsReadOnly}
+              isPending={state.commentMutation.isPending}
+              currentUserId={state.user?.id}
+              isUpdatePending={state.updateCommentMutation.isPending}
+              onSubmit={(text, options) => state.commentMutation.mutate({ text }, options)}
+              onUpdateComment={(commentId, text, options) =>
+                state.updateCommentMutation.mutate({ commentId, text }, options)
+              }
+            />
+          )}
+        </WorkOrderSlideOverTabPanel>
+      )}
+
+      {tab === "audit" && (
+        <WorkOrderSlideOverTabPanel
+          variant="audit"
+          showSkeleton={state.showDetailSkeleton}
+          hasError={hasError}
+          errorMessage={state.errorMessage}
+          onRetry={() => void state.refetch()}
+          showContent={state.detailForRow != null}
+        >
+          {state.detailForRow != null && (
+            <SlideOverAuditTab entries={state.detailForRow.audit} users={users} />
+          )}
+        </WorkOrderSlideOverTabPanel>
+      )}
+
+      {tab === "completion" && state.infoSource != null && (
+        <WorkOrderSlideOverTabPanel
+          variant="completion"
+          showSkeleton={state.showDetailSkeleton}
+          hasError={hasError}
+          errorMessage={state.errorMessage}
+          onRetry={() => void state.refetch()}
+          showContent={showContent}
+        >
+          <SlideOverCompletionTab
+            row={state.infoSource}
+            isReadOnly={state.isDocumentsReadOnly}
+            completion={state.detailForRow?.completion}
+            media={state.completionMedia}
+            mediaPending={state.mediaPending}
+            completionPending={state.completionPending}
+            onUploadMedia={(requests) => {
+              state.uploadMediaRequests(requests);
+            }}
+            onCategorizeMedia={state.categorizeMedia}
+            onRemoveMedia={state.removeMedia}
+            onRetryMedia={state.retryUpload}
+            onCancelMedia={state.cancelUpload}
+            onUploadCompletionPdf={state.uploadCompletionPdf}
+            onOpenCompletionDoc={onOpenCompletionDoc}
+          />
+        </WorkOrderSlideOverTabPanel>
+      )}
+
+      {tab === "extras" && (
+        <WorkOrderSlideOverTabPanel
+          variant="extras"
+          showSkeleton={state.showDetailSkeleton}
+          hasError={hasError}
+          errorMessage={state.errorMessage}
+          onRetry={() => void state.refetch()}
+          showContent={showContent}
+        >
+          <SlideOverExtrasTab
+            uploads={state.extrasUploads}
+            isReadOnly={state.isDocumentsReadOnly}
+            pending={state.mediaPending}
+            onUpload={(files) => {
+              void state.uploadExtraFiles(files);
+            }}
+            onRemove={state.removeMedia}
+          />
+        </WorkOrderSlideOverTabPanel>
+      )}
+    </Box>
+  );
+}

src/app/(protected)/workorders/_components/detail/work-order-slide-over.tsx

@@ -0,0 +1,108 @@
+import { Box } from "@mui/material";
+import { SideSheet } from "@/components/ui/side-sheet";
+import { SlideOverHeader } from "@/app/(protected)/workorders/_components/detail/slide-over-header";
+import { SlideOverFooter } from "@/app/(protected)/workorders/_components/detail/slide-over-footer";
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { useWorkOrderSlideOver } from "./use-work-order-slide-over";
+import { WorkOrderSlideOverTabNav } from "./work-order-slide-over-tab-nav";
+import { WorkOrderSlideOverTabs } from "./work-order-slide-over-tabs";
+
+export type SlideOverSaveOptions = {
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+};
+
+type WorkOrderSlideOverProps = {
+  row: WorkOrderTableRow | null;
+  editMode: boolean;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  allOrders: WorkOrderTableRow[];
+  onSave: (id: string | number, patch: WorkOrderTablePatch, options?: SlideOverSaveOptions) => void;
+  onOpenCompletionDoc: (row: WorkOrderTableRow) => void;
+  onCancelWO: (row: WorkOrderTableRow) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+  onClose: () => void;
+  saving?: boolean;
+};
+
+export function WorkOrderSlideOver({
+  row,
+  editMode,
+  users,
+  sites,
+  vendors,
+  pmTypes,
+  allOrders,
+  onSave,
+  onOpenCompletionDoc,
+  onCancelWO,
+  onDuplicateFound,
+  onClose,
+  saving,
+}: WorkOrderSlideOverProps) {
+  const state = useWorkOrderSlideOver({ row, editMode, onSave, onClose, saving });
+  const { infoSource, activeDraft } = state;
+
+  return (
+    <SideSheet
+      open={Boolean(row)}
+      onClose={state.requestClose}
+      closeDisabled={state.closeDisabled}
+      widthClass="w-[480px] max-w-[480px]"
+      aria-label="Work order details"
+    >
+      {row != null && infoSource != null && activeDraft != null && (
+        <Box className="flex h-full flex-col overflow-hidden">
+          <SlideOverHeader
+            row={infoSource}
+            isCancelled={state.isCancelled}
+            isFetching={state.isFetching && !state.isLoading}
+            closeDisabled={state.closeDisabled}
+            onClose={state.requestClose}
+          />
+
+          <WorkOrderSlideOverTabNav tab={state.tab} saving={saving} onTabChange={state.setTab} />
+
+          <WorkOrderSlideOverTabs
+            tab={state.tab}
+            state={state}
+            saving={saving}
+            users={users}
+            sites={sites}
+            vendors={vendors}
+            pmTypes={pmTypes}
+            allOrders={allOrders}
+            onDuplicateFound={onDuplicateFound}
+            onOpenCompletionDoc={() => onOpenCompletionDoc(infoSource)}
+          />
+
+          <SlideOverFooter
+            isCancelled={state.isCancelled}
+            editing={state.editing}
+            isDirty={state.isDirty}
+            showUnsaved={state.showUnsaved}
+            saving={saving}
+            onCancelWO={() => onCancelWO(infoSource)}
+            onCancelEdit={state.handleCancelEdit}
+            onClose={state.requestClose}
+            onEdit={state.startEditing}
+            onSave={state.commit}
+            onDiscard={state.handleDiscard}
+            onKeepEditing={() => state.setShowUnsaved(false)}
+          />
+        </Box>
+      )}
+    </SideSheet>
+  );
+}

src/app/(protected)/workorders/_components/detail/work-order-status-menu.tsx

@@ -0,0 +1,50 @@
+import { Menu, MenuItem } from "@mui/material";
+import { WorkOrderStatusBadge } from "@/components/domain/status-badge";
+import { MenuAnchorButton } from "@/components/ui/menu-anchor-button";
+import { WORK_ORDER_STATUS_OPTIONS } from "@/domain/work-orders/types/work-order";
+import { useMenuAnchor } from "@/hooks/use-menu-anchor";
+
+type WorkOrderStatusMenuProps = {
+  status: string;
+  disabled?: boolean;
+  onStatusChange: (status: string) => void;
+};
+
+export function WorkOrderStatusMenu({
+  status,
+  disabled = false,
+  onStatusChange,
+}: WorkOrderStatusMenuProps) {
+  const { anchorEl, open, setAnchor, close } = useMenuAnchor();
+
+  return (
+    <>
+      <MenuAnchorButton
+        onAnchor={setAnchor}
+        open={open}
+        disabled={disabled}
+        aria-label="Change status"
+        aria-busy={disabled || undefined}
+      >
+        <WorkOrderStatusBadge status={status} />
+      </MenuAnchorButton>
+      <Menu anchorEl={anchorEl} open={open} onClose={close}>
+        {WORK_ORDER_STATUS_OPTIONS.map((option) => (
+          <MenuItem
+            key={option}
+            selected={option === status}
+            disabled={disabled}
+            onClick={() => {
+              close();
+              if (option !== status) {
+                onStatusChange(option);
+              }
+            }}
+          >
+            {option}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}

src/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog.tsx

@@ -0,0 +1,45 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type DuplicateWoNumberDialogProps = {
+  open: boolean;
+  existing: WorkOrderTableRow | null;
+  onDismiss: () => void;
+  onViewExisting: (row: WorkOrderTableRow) => void;
+};
+
+export function DuplicateWoNumberDialog({
+  open,
+  existing,
+  onDismiss,
+  onViewExisting,
+}: DuplicateWoNumberDialogProps) {
+  const woNumber = existing?.woNumber ?? "";
+
+  return (
+    <Dialog open={open} onClose={onDismiss} aria-labelledby="duplicate-wo-number-dialog-title">
+      <DialogTitle id="duplicate-wo-number-dialog-title">Duplicate Work Order Number</DialogTitle>
+      <DialogContent>
+        <Text variant="body">
+          Work order number {woNumber} is already assigned to another work order. View the existing
+          record or dismiss to keep editing.
+        </Text>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onDismiss}>Dismiss</Button>
+        <Button
+          variant="contained"
+          disabled={existing == null}
+          onClick={() => {
+            if (existing != null) {
+              onViewExisting(existing);
+            }
+          }}
+        >
+          View existing
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

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

@@ -12,12 +12,15 @@ export function buildInlineDraftCreateInput(
   const location = sites.find((s) => String(s.id) === String(draft.locationId));
   const locationName = draft.location || draft.site || location?.name || "";
 
+  const hasWeekTarget = Boolean(draft.targetWeek?.trim());
+  const scheduleWeekOnly = draft.scheduleWeekOnly && (hasWeekTarget || Boolean(draft.scheduledOn));
+
   return {
     locationId: String(draft.locationId || ""),
     locationName,
     siteCode: location ? resolveSiteCode(location) : resolveSiteCode({ name: locationName }),
     woNumber: draft.woNumber,
-    type: draft.type,
+    type: draft.type || "PM",
     assigneeId: draft.dispatcherId,
     assigneeName: assignee?.name ?? "",
     scheduledOn: draft.scheduledOn,
@@ -35,7 +38,7 @@ export function buildInlineDraftCreateInput(
     pocName: draft.pocName,
     pocPhone: draft.pocPhone,
     pocNotes: draft.pocNotes,
-    scheduleWeekOnly: draft.scheduleWeekOnly,
+    scheduleWeekOnly,
     targetWeek: draft.targetWeek || "",
   };
 }

src/app/(protected)/workorders/_components/list/table/cells/date-cell.tsx

@@ -15,6 +15,8 @@ type DateCellProps = {
   targetWeek?: string;
   onSaveWeek?: (weekStart: string) => void;
   defaultMode?: "week" | "date";
+  /** When set, shows Clear in the popover so schedule can be removed (e.g. day-group → Unscheduled). */
+  onClear?: () => void;
 };
 
 export function DateCell({
@@ -26,6 +28,7 @@ export function DateCell({
   targetWeek = "",
   onSaveWeek,
   defaultMode,
+  onClear,
 }: DateCellProps) {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [cellMode, setCellMode] = useState<"week" | "date">(
@@ -132,6 +135,21 @@ export function DateCell({
             }}
           />
         )}
+        {Boolean(onClear) && (
+          <div className="mt-2.5 flex justify-end border-t border-border pt-2">
+            <button
+              type="button"
+              onClick={() => {
+                onClear?.();
+                setAnchorEl(null);
+              }}
+              className="text-[11.5px] font-medium transition-colors"
+              style={{ color: "var(--color-text-muted)" }}
+            >
+              × Clear
+            </button>
+          </div>
+        )}
       </Popover>
     </>
   );

src/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell.tsx

@@ -1,43 +1,30 @@
 import { useEffect, useState } from "react";
-
 import { toast } from "react-toastify";
-
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
 import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
-
+import { findDuplicateWoNumberRow } from "@/domain/work-orders/utils/find-duplicate-wo-number-row";
 import { HighlightText } from "./highlight-text";
 
 type EditableWONumberCellProps = {
   value: string;
-
   rescheduleCount: number;
-
   carriedOver?: number;
-
   q?: string;
-
   currentId: string | number;
-
   allOrders: WorkOrderTableRow[];
-
   onSave: (v: string) => void;
-
   onDuplicateFound?: (existing: WorkOrderTableRow) => void;
 };
 
 function CounterPill({ label, count }: { label: string; count: number }) {
-  if (count < 2) {
+  if (count < 2) return null;
-    return null;
-  }
-
   return (
     <span
       title={label}
       className="inline-flex h-[18px] items-center rounded px-1.5 text-[10px] font-semibold"
       style={{
         background: "var(--color-bg-muted)",
-
         color: "var(--color-text-secondary)",
-
         border: "1px solid var(--color-border)",
       }}
     >
@@ -46,89 +33,134 @@ function CounterPill({ label, count }: { label: string; count: number }) {
   );
 }
 
+type WoNumberEditorProps = {
+  draft: string;
+  invalid: boolean;
+  isChecking: boolean;
+  onDraftChange: (value: string) => void;
+  onCommit: () => void;
+  onCancel: () => void;
+  onBlur: () => void;
+};
+
+function WoNumberEditor({
+  draft,
+  invalid,
+  isChecking,
+  onDraftChange,
+  onCommit,
+  onCancel,
+  onBlur,
+}: WoNumberEditorProps) {
+  return (
+    <input
+      autoFocus
+      disabled={isChecking}
+      inputMode="numeric"
+      value={draft}
+      onChange={(e) => onDraftChange(e.target.value.replace(/\D/g, "").slice(0, 11))}
+      onFocus={(e) => e.target.select()}
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          onCommit();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          onCancel();
+        }
+      }}
+      onBlur={onBlur}
+      placeholder="12345678901"
+      aria-label="Work order number"
+      aria-invalid={invalid}
+      className="font-mono focus:outline-none"
+      style={{
+        fontSize: 13,
+        fontWeight: 700,
+        color: "var(--foreground)",
+        background: "var(--color-bg-surface)",
+        border: `1px solid ${invalid ? "var(--color-destructive)" : "var(--color-ring)"}`,
+        boxShadow: `0 0 0 1px ${invalid ? "var(--color-destructive)" : "var(--color-accent)"}`,
+        borderRadius: 4,
+        padding: "2px 4px",
+        width: 120,
+      }}
+    />
+  );
+}
+
+async function resolveDuplicateWoNumber(
+  draft: string,
+  allOrders: WorkOrderTableRow[],
+  currentId: string | number,
+) {
+  const local = findDuplicateWoNumberRow(draft, allOrders, currentId);
+  const remote = local ?? (await workOrdersApi.findByWoNumber(draft));
+  return remote && String(remote.id) !== String(currentId) ? remote : undefined;
+}
+
 export function EditableWONumberCell({
   value,
-
   rescheduleCount,
-
   carriedOver = 0,
-
   q,
-
   currentId,
-
   allOrders,
-
   onSave,
-
   onDuplicateFound,
 }: EditableWONumberCellProps) {
   const [editing, setEditing] = useState(false);
-
   const [draft, setDraft] = useState(value);
+  const [isChecking, setIsChecking] = useState(false);
 
   useEffect(() => {
-    if (!editing) {
+    if (!editing) setDraft(value);
-      setDraft(value);
-    }
   }, [value, editing]);
 
-  const findDuplicate = (d: string) =>
-    allOrders.find((o) => o.woNumber === d && String(o.id) !== String(currentId));
-
   const commit = () => {
-    if (draft === value) {
+    if (draft === value || isChecking) {
       setEditing(false);
-
       return;
     }
-
     if (draft.length !== 11) {
       toast("Work order number must be exactly 11 digits");
-
       return;
     }
-
+    setIsChecking(true);
-    const duplicate = findDuplicate(draft);
+    void (async () => {
-
+      try {
-    if (duplicate) {
+        const duplicate = await resolveDuplicateWoNumber(draft, allOrders, currentId);
-      onDuplicateFound?.(duplicate);
+        if (duplicate) {
-
+          if (onDuplicateFound) {
-      setDraft(value);
+            onDuplicateFound(duplicate);
-
+          } else {
-      setEditing(false);
+            toast.error(`WO #${duplicate.woNumber} is already assigned to another work order.`);
-
+          }
-      return;
+          setDraft(value);
-    }
+          return;
-
+        }
-    onSave(draft);
+        onSave(draft);
-
+      } catch {
-    setEditing(false);
+        toast.error("Unable to verify the work order number. Please try again.");
+      } finally {
+        setIsChecking(false);
+        setEditing(false);
+      }
+    })();
   };
 
   const cancel = () => {
     setDraft(value);
-
     setEditing(false);
   };
 
   const handleBlur = () => {
+    if (isChecking) return;
     if (draft !== value && draft.length === 11) {
-      const duplicate = findDuplicate(draft);
+      commit();
-
+      return;
-      if (duplicate) {
-        onDuplicateFound?.(duplicate);
-
-        setDraft(value);
-
-        setEditing(false);
-
-        return;
-      }
-
-      onSave(draft);
     }
-
     setEditing(false);
   };
 
@@ -137,75 +169,34 @@ export function EditableWONumberCell({
   return (
     <div className="flex items-center gap-1.5">
       {editing ? (
-        <input
+        <WoNumberEditor
-          autoFocus
+          draft={draft}
-          inputMode="numeric"
+          invalid={invalid}
-          value={draft}
+          isChecking={isChecking}
-          onChange={(e) => setDraft(e.target.value.replace(/\D/g, "").slice(0, 11))}
+          onDraftChange={setDraft}
-          onFocus={(e) => e.target.select()}
+          onCommit={commit}
-          onClick={(e) => e.stopPropagation()}
+          onCancel={cancel}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-
-              commit();
-            } else if (e.key === "Escape") {
-              e.preventDefault();
-
-              cancel();
-            }
-          }}
           onBlur={handleBlur}
-          placeholder="12345678901"
-          aria-label="Work order number"
-          aria-invalid={invalid}
-          className="font-mono focus:outline-none"
-          style={{
-            fontSize: 13,
-
-            fontWeight: 700,
-
-            color: "var(--foreground)",
-
-            background: "var(--color-bg-surface)",
-
-            border: `1px solid ${invalid ? "var(--color-destructive)" : "var(--color-ring)"}`,
-
-            boxShadow: `0 0 0 1px ${invalid ? "var(--color-destructive)" : "var(--color-accent)"}`,
-
-            borderRadius: 4,
-
-            padding: "2px 4px",
-
-            width: 120,
-          }}
         />
       ) : (
         <span
           onClick={(e) => {
             e.stopPropagation();
-
             setEditing(true);
           }}
           className="inline-block cursor-text font-mono transition-colors hover:bg-[var(--color-bg-muted)]"
           style={{
             fontSize: 13,
-
             fontWeight: 700,
-
             color: value ? "var(--foreground)" : "var(--color-text-muted)",
-
             borderRadius: 4,
-
             padding: "2px 4px",
           }}
         >
           {value ? <HighlightText text={value} q={q} /> : "-"}
         </span>
       )}
-
       <CounterPill label="Reschedules" count={rescheduleCount} />
-
       <CounterPill label="Carried over" count={carriedOver} />
     </div>
   );

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

@@ -17,6 +17,8 @@ type SiteCellProps = {
   pocNotes?: string;
   sites: LocationOption[];
   q?: string;
+  /** Inline create: editable POC + Site/POC required to confirm the modal. */
+  createMode?: boolean;
   onSave: (patch: SitePatch) => void;
 };
 
@@ -31,6 +33,7 @@ export function SiteCell({
   pocNotes,
   sites,
   q,
+  createMode = false,
   onSave,
 }: SiteCellProps) {
   const [open, setOpen] = useState(false);
@@ -70,7 +73,15 @@ export function SiteCell({
             )}
           </span>
         ) : (
-          <span className="text-[12.5px] text-[var(--color-text-muted)]">—</span>
+          <span className="text-[12.5px] text-[var(--color-text-muted)]">
+            {createMode ? (
+              <>
+                Site <span style={{ color: "var(--destructive)" }}>*</span>
+              </>
+            ) : (
+              "—"
+            )}
+          </span>
         )}
         <HoverChevron />
       </button>
@@ -83,6 +94,7 @@ export function SiteCell({
         pocPhone={pocPhone}
         pocNotes={pocNotes}
         sites={sites}
+        createMode={createMode}
         onSave={onSave}
       />
     </>

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

@@ -9,37 +9,77 @@ type SiteDialogPocFieldsProps = {
   pocName: string;
   pocPhone: string;
   pocNotes: string;
+  editable?: boolean;
+  showErrors?: boolean;
+  onPocNameChange?: (value: string) => void;
+  onPocPhoneChange?: (value: string) => void;
+  onPocNotesChange?: (value: string) => void;
 };
 
-export function SiteDialogPocFields({ pocName, pocPhone, pocNotes }: SiteDialogPocFieldsProps) {
+export function SiteDialogPocFields({
+  pocName,
+  pocPhone,
+  pocNotes,
+  editable = false,
+  showErrors = false,
+  onPocNameChange,
+  onPocPhoneChange,
+  onPocNotesChange,
+}: SiteDialogPocFieldsProps) {
+  const nameMissing = showErrors && !pocName.trim();
+  const phoneMissing = showErrors && !pocPhone.trim();
+
   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.
+        {editable
+          ? "Auto-filled from records — edit if outdated"
+          : "Shown from site/work order records. Board edit saves site code only."}
       </Text>
       <div className="space-y-2">
-        <input
+        <div>
-          value={pocName}
+          <input
-          readOnly
+            value={pocName}
-          placeholder="POC name"
+            readOnly={!editable}
-          className={DLG_INPUT_CLS}
+            placeholder="POC name"
-          style={{ ...DLG_INPUT_STYLE, opacity: 0.85 }}
+            className={DLG_INPUT_CLS}
-        />
+            style={{
-        <input
+              ...DLG_INPUT_STYLE,
-          value={pocPhone}
+              opacity: editable ? 1 : 0.85,
-          readOnly
+              borderColor: nameMissing ? "var(--destructive)" : undefined,
-          placeholder="POC phone"
+            }}
-          className={DLG_INPUT_CLS}
+            onChange={(e) => onPocNameChange?.(e.target.value)}
-          style={{ ...DLG_INPUT_STYLE, opacity: 0.85 }}
+          />
-        />
+          <Text as="p" variant="error" when={nameMissing} className="mt-1 text-[11px]">
+            Contact name is required
+          </Text>
+        </div>
+        <div>
+          <input
+            value={pocPhone}
+            readOnly={!editable}
+            placeholder="POC phone"
+            className={DLG_INPUT_CLS}
+            style={{
+              ...DLG_INPUT_STYLE,
+              opacity: editable ? 1 : 0.85,
+              borderColor: phoneMissing ? "var(--destructive)" : undefined,
+            }}
+            onChange={(e) => onPocPhoneChange?.(e.target.value)}
+          />
+          <Text as="p" variant="error" when={phoneMissing} className="mt-1 text-[11px]">
+            Contact phone is required
+          </Text>
+        </div>
         <textarea
           value={pocNotes}
-          readOnly
+          readOnly={!editable}
           placeholder="Notes…"
           rows={2}
           className={`${DLG_INPUT_CLS} resize-none`}
-          style={{ ...DLG_INPUT_STYLE, fontFamily: "inherit", opacity: 0.85 }}
+          style={{ ...DLG_INPUT_STYLE, fontFamily: "inherit", opacity: editable ? 1 : 0.85 }}
+          onChange={(e) => onPocNotesChange?.(e.target.value)}
         />
       </div>
     </div>

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

@@ -1,30 +1,20 @@
-import { useEffect, useState, type MouseEvent } from "react";
+import 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 { LocationOption } from "@/domain/work-orders/types/work-order";
 import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
-import {
-  extractLocationLabel,
-  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 {
+  useSiteDialogState,
+  type SitePatch,
+} from "@/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state";
 
-export type SitePatch = {
+export type { SitePatch };
-  site: string;
-  location: string;
-  locationId: string | number;
-  pocName: string;
-  pocPhone: string;
-  pocNotes: string;
-};
 
 type SiteDialogProps = {
   open: boolean;
@@ -35,6 +25,7 @@ type SiteDialogProps = {
   pocPhone?: string;
   pocNotes?: string;
   sites: LocationOption[];
+  createMode?: boolean;
   onSave: (patch: SitePatch) => void;
 };
 
@@ -47,62 +38,26 @@ export function SiteDialog({
   pocPhone = "",
   pocNotes = "",
   sites,
+  createMode = false,
   onSave,
 }: SiteDialogProps) {
-  const [code, setCode] = useState(value);
+  const s = useSiteDialogState({
-  const [locId, setLocId] = useState(() => resolveLocationId(locationId, value, sites));
+    open,
-  const [pn, setPn] = useState(pocName);
+    onOpenChange,
-  const [pp, setPp] = useState(pocPhone);
+    value,
-  const [notes, setNotes] = useState(pocNotes);
+    locationId,
-  const [pocFilledFor, setPocFilledFor] = useState("");
+    pocName,
-
+    pocPhone,
-  const {
+    pocNotes,
-    data: locationDetail,
+    sites,
-    isLoading: locationDetailLoading,
+    createMode,
-    isError: locationDetailError,
+    onSave,
-  } = useLocationDetail(open && locId ? locId : undefined);
+  });
-
-  const selected = sites.find((s) => String(s.id) === locId);
-  const addressPreview = locationDetail ? formatLocationAddressPreview(locationDetail) : "";
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    const resolved = resolveLocationId(locationId, value, sites);
-    setCode(value);
-    setLocId(resolved);
-    setPn(pocName);
-    setPp(pocPhone);
-    setNotes(pocNotes);
-    // Preserve existing WO POC; allow one auto-fill from site detail when POC is empty.
-    setPocFilledFor(pocName.trim() || pocPhone.trim() ? resolved : "");
-  }, [open, value, locationId, pocName, pocPhone, pocNotes, sites]);
-
-  useEffect(() => {
-    if (!open || !locId || !locationDetail || pocFilledFor === locId) {
-      return;
-    }
-    setPn(locationDetail.contact ?? "");
-    setPp(locationDetail.phone ?? "");
-    setPocFilledFor(locId);
-  }, [open, locId, locationDetail, pocFilledFor]);
-
-  const handlePick = (id: string) => {
-    const next = sites.find((s) => String(s.id) === id);
-    setLocId(id);
-    if (next) {
-      setCode(resolveSiteCode(next));
-    }
-    if (id !== pocFilledFor) {
-      setPocFilledFor("");
-    }
-  };
 
   return (
     <Dialog
       open={open}
-      onClose={() => onOpenChange(false)}
+      onClose={s.close}
       maxWidth={false}
       slotProps={{
         ...dialogBlurBackdropSlotProps,
@@ -125,7 +80,7 @@ export function SiteDialog({
           <div>
             <FieldLabel>Site</FieldLabel>
             <WizardFieldSelect
-              value={locId}
+              value={s.locId}
               placeholder="Select site …"
               icon={
                 <MapPin
@@ -139,45 +94,45 @@ export function SiteDialog({
                 key: String(site.id),
                 label: site.name,
               }))}
-              onPick={handlePick}
+              onPick={s.handlePick}
             />
+            <Text
+              as="p"
+              variant="error"
+              when={Boolean(createMode && s.showErrors && s.siteMissing)}
+              className="mt-1 text-[11px]"
+            >
+              Site is required
+            </Text>
           </div>
 
-          {Boolean(locId) && (
+          {Boolean(s.locId) && (
             <SiteDialogDetailPanel
-              locationDetail={locationDetail}
+              locationDetail={s.locationDetail}
-              locationDetailLoading={locationDetailLoading}
+              locationDetailLoading={s.locationDetailLoading}
-              locationDetailError={locationDetailError}
+              locationDetailError={s.locationDetailError}
-              addressPreview={addressPreview}
+              addressPreview={s.addressPreview}
-              fallbackLabel={selected?.name || code || "—"}
+              fallbackLabel={s.selected?.name || s.code || "—"}
             />
           )}
 
-          <SiteDialogPocFields pocName={pn} pocPhone={pp} pocNotes={notes} />
+          <SiteDialogPocFields
+            pocName={s.pn}
+            pocPhone={s.pp}
+            pocNotes={s.notes}
+            editable={createMode}
+            showErrors={createMode && s.showErrors}
+            onPocNameChange={s.setPn}
+            onPocPhoneChange={s.setPp}
+            onPocNotesChange={s.setNotes}
+          />
         </div>
 
         <div className="mt-4 flex items-center justify-end gap-2">
-          <Button
+          <Button variant="ghost" className="min-h-0 px-2 py-1 text-[12px]" onClick={s.close}>
-            variant="ghost"
-            className="min-h-0 px-2 py-1 text-[12px]"
-            onClick={() => onOpenChange(false)}
-          >
             Cancel
           </Button>
-          <Button
+          <Button className="min-h-0 px-3 py-1 text-[12px]" onClick={s.attemptSave}>
-            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>

src/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state.ts

@@ -0,0 +1,142 @@
+import { useEffect, useState } from "react";
+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 { LocationOption } from "@/domain/work-orders/types/work-order";
+import {
+  extractLocationLabel,
+  resolveLocationId,
+} from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-helpers";
+
+export type SitePatch = {
+  site: string;
+  location: string;
+  locationId: string | number;
+  pocName: string;
+  pocPhone: string;
+  pocNotes: string;
+};
+
+type UseSiteDialogStateArgs = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  value: string;
+  locationId: string | number;
+  pocName: string;
+  pocPhone: string;
+  pocNotes: string;
+  sites: LocationOption[];
+  createMode: boolean;
+  onSave: (patch: SitePatch) => void;
+};
+
+export function useSiteDialogState({
+  open,
+  onOpenChange,
+  value,
+  locationId,
+  pocName,
+  pocPhone,
+  pocNotes,
+  sites,
+  createMode,
+  onSave,
+}: UseSiteDialogStateArgs) {
+  const [code, setCode] = useState(value);
+  const [locId, setLocId] = useState(() => resolveLocationId(locationId, value, sites));
+  const [pn, setPn] = useState(pocName);
+  const [pp, setPp] = useState(pocPhone);
+  const [notes, setNotes] = useState(pocNotes);
+  const [pocFilledFor, setPocFilledFor] = useState("");
+  const [showErrors, setShowErrors] = useState(false);
+
+  const {
+    data: locationDetail,
+    isLoading: locationDetailLoading,
+    isError: locationDetailError,
+  } = useLocationDetail(open && locId ? locId : undefined);
+
+  const selected = sites.find((s) => String(s.id) === locId);
+  const addressPreview = locationDetail ? formatLocationAddressPreview(locationDetail) : "";
+  const siteMissing = !locId;
+  const pocMissing = !pn.trim() || !pp.trim();
+  const canConfirm = !siteMissing && (!createMode || !pocMissing);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const resolved = resolveLocationId(locationId, value, sites);
+    setCode(value);
+    setLocId(resolved);
+    setPn(pocName);
+    setPp(pocPhone);
+    setNotes(pocNotes);
+    setShowErrors(false);
+    setPocFilledFor(pocName.trim() || pocPhone.trim() ? resolved : "");
+  }, [open, value, locationId, pocName, pocPhone, pocNotes, sites]);
+
+  useEffect(() => {
+    if (!open || !locId || !locationDetail || pocFilledFor === locId) {
+      return;
+    }
+    // Only autofill empty fields so typed createMode POC edits are not overwritten.
+    setPn((prev) => (prev.trim() ? prev : (locationDetail.contact ?? "")));
+    setPp((prev) => (prev.trim() ? prev : (locationDetail.phone ?? "")));
+    setPocFilledFor(locId);
+  }, [open, locId, locationDetail, pocFilledFor]);
+
+  const handlePick = (id: string) => {
+    const next = sites.find((s) => String(s.id) === id);
+    const siteChanged = id !== locId;
+    setLocId(id);
+    if (next) {
+      setCode(resolveSiteCode(next));
+    }
+    if (siteChanged) {
+      setPn("");
+      setPp("");
+      setPocFilledFor("");
+    } else if (id !== pocFilledFor) {
+      setPocFilledFor("");
+    }
+  };
+
+  const attemptSave = () => {
+    if (createMode && !canConfirm) {
+      setShowErrors(true);
+      return;
+    }
+    onSave({
+      site: code || (selected ? resolveSiteCode(selected) : ""),
+      location: selected ? extractLocationLabel(selected) : "",
+      locationId: locId,
+      pocName: pn,
+      pocPhone: pp,
+      pocNotes: notes,
+    });
+    onOpenChange(false);
+  };
+
+  return {
+    locId,
+    pn,
+    pp,
+    notes,
+    showErrors,
+    locationDetail,
+    locationDetailLoading,
+    locationDetailError,
+    selected,
+    addressPreview,
+    siteMissing,
+    canConfirm,
+    code,
+    handlePick,
+    attemptSave,
+    setPn,
+    setPp,
+    setNotes,
+    close: () => onOpenChange(false),
+  };
+}

src/app/(protected)/workorders/_components/list/table/inline-create-field.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import { Text } from "@/components/ui/text";
+
+type InlineCreateFieldProps = {
+  showError?: boolean;
+  error?: string;
+  children: ReactNode;
+};
+
+/** Bordered create-cell wrapper; error ring + helper reveal after a failed Save attempt. */
+export function InlineCreateField({ showError = false, error, children }: InlineCreateFieldProps) {
+  return (
+    <div className="flex w-full min-w-0 flex-col gap-1">
+      <div
+        className="flex w-full min-w-0 items-center"
+        style={{
+          minHeight: 34,
+          borderRadius: 6,
+          padding: "0 8px",
+          background: "var(--color-bg-surface)",
+          border: `1px solid ${showError ? "var(--destructive)" : "var(--color-border)"}`,
+          boxShadow: showError ? "0 0 0 1px var(--destructive)" : "none",
+        }}
+      >
+        {children}
+      </div>
+      <Text as="p" variant="error" when={Boolean(showError && error)} className="m-0 text-[11px]">
+        {error}
+      </Text>
+    </div>
+  );
+}

src/app/(protected)/workorders/_components/list/table/to-inline-draft-row.ts

@@ -16,6 +16,7 @@ export function toInlineDraftRow(draft: WorkOrderTableDraft) {
     location: draft.location,
     dispatcherId: draft.dispatcherId,
     scheduledOn: draft.scheduledOn,
+    completedDate: "",
     dueDate: draft.dueDate,
     pm: draft.pm,
     serviceNotes: draft.serviceNotes,

src/app/(protected)/workorders/_components/list/table/use-wo-table-inline-create.ts

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { toast } from "react-toastify";
+import type { LocationOption, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+import { useCreateWorkOrderFromWizard } from "@/domain/work-orders/use-cases/use-create-work-order-from-wizard";
+import { findDuplicateWoNumberRow } from "@/domain/work-orders/utils/find-duplicate-wo-number-row";
+import type { ReturnTypeOfUseWorkOrdersTableData } from "./wo-table-types";
+import { buildInlineDraftCreateInput } from "./build-inline-draft-create-input";
+
+type UseWoTableInlineCreateArgs = {
+  tableData: ReturnTypeOfUseWorkOrdersTableData;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  onDuplicateFound: (row: WorkOrderTableRow) => void;
+};
+
+export function useWoTableInlineCreate({
+  tableData,
+  users,
+  sites,
+  onDuplicateFound,
+}: UseWoTableInlineCreateArgs) {
+  const [isCheckingInlineDuplicate, setIsCheckingInlineDuplicate] = useState(false);
+  const createMutation = useCreateWorkOrderFromWizard(() => {
+    tableData.cancelDraft();
+  });
+
+  const handleInlineSave = () => {
+    void (async () => {
+      const draftSnapshot = tableData.draft;
+      const woNumber = draftSnapshot.woNumber.trim();
+      if (woNumber) {
+        setIsCheckingInlineDuplicate(true);
+        try {
+          const duplicate =
+            findDuplicateWoNumberRow(woNumber, tableData.rows, "draft") ??
+            (await workOrdersApi.findByWoNumber(woNumber));
+          if (duplicate && String(duplicate.id) !== "draft") {
+            onDuplicateFound(duplicate);
+            return;
+          }
+        } catch {
+          toast.error("Unable to verify the work order number. Please try again.");
+          return;
+        } finally {
+          setIsCheckingInlineDuplicate(false);
+        }
+      }
+      createMutation.mutate(buildInlineDraftCreateInput(tableData.draft, users, sites));
+    })();
+  };
+
+  return {
+    handleInlineSave,
+    saving: createMutation.isPending || isCheckingInlineDuplicate,
+  };
+}

src/app/(protected)/workorders/_components/list/table/use-wo-table-row-handlers.ts

@@ -19,6 +19,7 @@ type UseWoTableRowHandlersOptions = {
   onOpenMedia: (row: WorkOrderTableRow) => void;
   onPatch: (id: string | number, patch: WorkOrderTablePatch) => void;
   onScheduleHighlight: (id: string | number | null) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
 };
 
 export function useWoTableRowHandlers({
@@ -30,6 +31,7 @@ export function useWoTableRowHandlers({
   onOpenMedia,
   onPatch,
   onScheduleHighlight,
+  onDuplicateFound,
 }: UseWoTableRowHandlersOptions): WoTableRowHandlers {
   const {
     dragState: dragStateRef,
@@ -97,8 +99,7 @@ export function useWoTableRowHandlers({
         });
       },
       onDuplicateFound: (existing: WorkOrderTableRow) => {
-        tableData.setSelectedId(existing.id);
+        onDuplicateFound?.(existing);
-        onOpenSlideOver(existing, false);
       },
       onOpenSlideOver: (row: WorkOrderTableRow) => onOpenSlideOver(row, false),
       onPastDueAttempt: (id: string | number) => onScheduleHighlight(id),
@@ -138,6 +139,7 @@ export function useWoTableRowHandlers({
       onOpenMedia,
       onPatch,
       onScheduleHighlight,
+      onDuplicateFound,
     ],
   );
 }

src/app/(protected)/workorders/_components/list/table/wo-table-cols.ts

@@ -12,8 +12,9 @@ export const WO_TABLE_COLS = [
   { key: "appt", label: "APPT TIME", w: 128 },
   { key: "status", label: "STATUS", w: 148 },
   { key: "doc", label: "COMP DOC", w: 84 },
+  { key: "completed", label: "COMPLETED DATE", w: 130 },
   { key: "actions", label: "", w: 100 },
 ] as const;
 
-export const WO_TABLE_MIN_WIDTH = 1504;
+export const WO_TABLE_MIN_WIDTH = 1634;
 export const WO_TABLE_ROW_HEIGHT = 52;

src/app/(protected)/workorders/_components/list/table/wo-table-inline-identity-cells.tsx

@@ -0,0 +1,88 @@
+import type { RefObject } from "react";
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+import type {
+  WorkOrderTableDraft,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { EditableWONumberCell } from "./cells/editable-wo-number-cell";
+import { SiteCell } from "./cells/site-cell";
+import { InlineCreateField } from "./inline-create-field";
+
+type WoTableInlineIdentityCellsProps = {
+  draft: WorkOrderTableDraft;
+  sites: LocationOption[];
+  sitePlace?: { city: string; state: string };
+  allRows: { id: string | number; woNumber: string }[];
+  siteCellRef: RefObject<HTMLTableCellElement | null>;
+  woCellRef: RefObject<HTMLTableCellElement | null>;
+  siteShowError: boolean;
+  siteError: string;
+  woShowError: boolean;
+  onPatch: (patch: Partial<WorkOrderTableDraft>) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+};
+
+export function WoTableInlineIdentityCells({
+  draft,
+  sites,
+  sitePlace,
+  allRows,
+  siteCellRef,
+  woCellRef,
+  siteShowError,
+  siteError,
+  woShowError,
+  onPatch,
+  onDuplicateFound,
+}: WoTableInlineIdentityCellsProps) {
+  return (
+    <>
+      <td
+        ref={siteCellRef}
+        className="group/cell"
+        style={{ padding: "8px 6px 0", verticalAlign: "top" }}
+      >
+        <InlineCreateField showError={siteShowError} error={siteError}>
+          <SiteCell
+            value={draft.site}
+            location={draft.location}
+            locationId={draft.locationId}
+            city={sitePlace?.city}
+            state={sitePlace?.state}
+            pocName={draft.pocName}
+            pocPhone={draft.pocPhone}
+            pocNotes={draft.pocNotes}
+            sites={sites}
+            createMode
+            onSave={(p) =>
+              onPatch({
+                site: p.site,
+                location: p.location,
+                locationId: p.locationId,
+                pocName: p.pocName,
+                pocPhone: p.pocPhone,
+                pocNotes: p.pocNotes,
+              })
+            }
+          />
+        </InlineCreateField>
+      </td>
+
+      <td
+        ref={woCellRef}
+        style={{ padding: "8px 6px 0", verticalAlign: "top", whiteSpace: "nowrap" }}
+      >
+        <InlineCreateField showError={woShowError} error="Work order number is required">
+          <EditableWONumberCell
+            value={draft.woNumber}
+            rescheduleCount={0}
+            currentId="draft"
+            allOrders={allRows as never[]}
+            onSave={(v) => onPatch({ woNumber: v })}
+            onDuplicateFound={onDuplicateFound}
+          />
+        </InlineCreateField>
+      </td>
+    </>
+  );
+}

src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-actions.tsx

@@ -4,6 +4,7 @@ import { Check, X } from "lucide-react";
 type WoTableInlineRowActionsProps = {
   canSave: boolean;
   saving: boolean;
+  saveHint: string;
   onSave: () => void;
   onCancel: () => void;
 };
@@ -11,6 +12,7 @@ type WoTableInlineRowActionsProps = {
 export function WoTableInlineRowActions({
   canSave,
   saving,
+  saveHint,
   onSave,
   onCancel,
 }: WoTableInlineRowActionsProps) {
@@ -19,11 +21,14 @@ export function WoTableInlineRowActions({
       <button
         type="button"
         onClick={onSave}
-        disabled={!canSave}
+        disabled={saving}
-        title={saving ? "Saving…" : canSave ? "Save" : "Schedule On is required"}
+        title={saveHint}
         aria-label={saving ? "Saving work order" : "Save work order"}
         className="rounded p-1 transition-colors disabled:opacity-30"
-        style={{ color: "var(--color-primary)" }}
+        style={{
+          color: "var(--color-primary)",
+          ...(canSave || saving ? {} : { opacity: 0.5, cursor: "not-allowed" }),
+        }}
         onMouseEnter={(e) => {
           if (canSave) {
             (e.currentTarget as HTMLButtonElement).style.background = "var(--color-primary-tint)";

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

@@ -1,20 +1,23 @@
+import type { RefObject } from "react";
 import type {
   LocationOption,
   VendorDropdownItem,
   WorkOrderUser,
 } from "@/domain/work-orders/types/work-order";
-import type { WorkOrderTableDraft } from "@/domain/work-orders/types/work-order-table-row";
+import type {
+  WorkOrderTableDraft,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
 import { AssignedToCell } from "./cells/assigned-to-cell";
 import { ApptTimeCell } from "./cells/appt-time-cell";
 import { DateCell } from "./cells/date-cell";
 import { DueDateCell } from "./cells/due-date-cell";
-import { EditableWONumberCell } from "./cells/editable-wo-number-cell";
 import { PMTypeCell } from "./cells/pm-type-cell";
-import { SiteCell } from "./cells/site-cell";
 import { StatusCell } from "./cells/status-cell";
 import { TypeCell } from "./cells/type-cell";
 import { VendorCell } from "./cells/vendor-cell";
 import { toInlineDraftRow } from "./to-inline-draft-row";
+import { WoTableInlineIdentityCells } from "./wo-table-inline-identity-cells";
 
 type WoTableInlineRowCellsProps = {
   draft: WorkOrderTableDraft;
@@ -25,9 +28,23 @@ type WoTableInlineRowCellsProps = {
   vendors: VendorDropdownItem[];
   pmTypes: string[];
   allRows: { id: string | number; woNumber: string }[];
+  siteCellRef: RefObject<HTMLTableCellElement | null>;
+  woCellRef: RefObject<HTMLTableCellElement | null>;
+  siteShowError: boolean;
+  siteError: string;
+  woShowError: boolean;
   onPatch: (patch: Partial<WorkOrderTableDraft>) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
 };
 
+function InlineMutedDashCell() {
+  return (
+    <td style={{ padding: "0 14px" }}>
+      <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>—</span>
+    </td>
+  );
+}
+
 export function WoTableInlineRowCells({
   draft,
   weekDefault,
@@ -37,45 +54,32 @@ export function WoTableInlineRowCells({
   vendors,
   pmTypes,
   allRows,
+  siteCellRef,
+  woCellRef,
+  siteShowError,
+  siteError,
+  woShowError,
   onPatch,
+  onDuplicateFound,
 }: WoTableInlineRowCellsProps) {
   const draftRow = toInlineDraftRow(draft);
+  const hasSchedule = Boolean(draft.scheduledOn) || Boolean(draft.targetWeek);
 
   return (
     <>
-      <td className="group/cell" style={{ padding: "0 14px" }}>
+      <WoTableInlineIdentityCells
-        <SiteCell
+        draft={draft}
-          value={draft.site}
+        sites={sites}
-          location={draft.location}
+        sitePlace={sitePlace}
-          locationId={draft.locationId}
+        allRows={allRows}
-          city={sitePlace?.city}
+        siteCellRef={siteCellRef}
-          state={sitePlace?.state}
+        woCellRef={woCellRef}
-          pocName={draft.pocName}
+        siteShowError={siteShowError}
-          pocPhone={draft.pocPhone}
+        siteError={siteError}
-          pocNotes={draft.pocNotes}
+        woShowError={woShowError}
-          sites={sites}
+        onPatch={onPatch}
-          onSave={(p) =>
+        onDuplicateFound={onDuplicateFound}
-            onPatch({
+      />
-              site: p.site,
-              location: p.location,
-              locationId: p.locationId,
-              pocName: p.pocName,
-              pocPhone: p.pocPhone,
-              pocNotes: p.pocNotes,
-            })
-          }
-        />
-      </td>
-
-      <td style={{ padding: "0 14px" }}>
-        <EditableWONumberCell
-          value={draft.woNumber}
-          rescheduleCount={0}
-          currentId="draft"
-          allOrders={allRows as never[]}
-          onSave={(v) => onPatch({ woNumber: v })}
-        />
-      </td>
 
       <td className="group/cell" style={{ padding: "0 14px" }}>
         <TypeCell value={draft.type} onSave={(t) => onPatch({ type: t })} />
@@ -98,11 +102,15 @@ export function WoTableInlineRowCells({
           allowWeekMode
           targetWeek={draft.targetWeek}
           defaultMode={weekDefault ? "week" : "date"}
-          highlight={!draft.scheduledOn && !draft.targetWeek}
           onSave={(date) => onPatch({ scheduledOn: date, scheduleWeekOnly: false, targetWeek: "" })}
           onSaveWeek={(week) =>
             onPatch({ scheduledOn: "", targetWeek: week, scheduleWeekOnly: true })
           }
+          onClear={
+            hasSchedule
+              ? () => onPatch({ scheduledOn: "", targetWeek: "", scheduleWeekOnly: false })
+              : undefined
+          }
         />
       </td>
 
@@ -170,9 +178,8 @@ export function WoTableInlineRowCells({
         />
       </td>
 
-      <td style={{ padding: "0 14px" }}>
+      <InlineMutedDashCell />
-        <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>—</span>
+      <InlineMutedDashCell />
-      </td>
     </>
   );
 }

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

@@ -1,3 +1,4 @@
+import { useRef, useState, type RefObject } from "react";
 import { Flag } from "lucide-react";
 
 import type {
@@ -5,10 +6,17 @@ import type {
   VendorDropdownItem,
   WorkOrderUser,
 } from "@/domain/work-orders/types/work-order";
-
+import type {
-import type { WorkOrderTableDraft } from "@/domain/work-orders/types/work-order-table-row";
+  WorkOrderTableDraft,
-
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
 import { UNSCHEDULED_DAY_KEY } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  draftHasScheduleDate,
+  getInlineCreateMissing,
+  inlineCreateSaveHint,
+  inlineCreateSiteError,
+} from "@/domain/work-orders/utils/get-inline-create-missing";
 
 import { WO_TABLE_ROW_HEIGHT } from "./wo-table-cols";
 import { WoTableInlineRowCells } from "./wo-table-inline-row-cells";
@@ -16,72 +24,88 @@ import { WoTableInlineRowActions } from "./wo-table-inline-row-actions";
 
 type WoTableInlineRowProps = {
   draft: WorkOrderTableDraft;
-
   draftDayKey: string;
-
   users: WorkOrderUser[];
-
   sites: LocationOption[];
-
   sitePlace?: { city: string; state: string };
-
   vendors: VendorDropdownItem[];
-
   pmTypes: string[];
-
   allRows: { id: string | number; woNumber: string }[];
-
   saving?: boolean;
-
   onChange: (draft: WorkOrderTableDraft) => void;
-
   onSave: () => void;
-
   onCancel: () => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
 };
 
+const PRE_SCHEDULE = new Set(["Incomplete", "Pending", ""]);
+
+function withScheduleStatusSync(next: WorkOrderTableDraft): WorkOrderTableDraft {
+  const dated = draftHasScheduleDate(next);
+  if (dated && PRE_SCHEDULE.has(next.status)) {
+    return { ...next, status: "Scheduled" };
+  }
+  if (!dated && next.status === "Scheduled") {
+    return { ...next, status: "Pending" };
+  }
+  return next;
+}
+
 export function WoTableInlineRow({
   draft,
-
   draftDayKey,
-
   users,
-
   sites,
-
   sitePlace,
-
   vendors,
-
   pmTypes,
-
   allRows,
-
   saving = false,
-
   onChange,
-
   onSave,
-
   onCancel,
+  onDuplicateFound,
 }: WoTableInlineRowProps) {
   const weekDefault = draftDayKey === UNSCHEDULED_DAY_KEY;
+  const missing = getInlineCreateMissing(draft);
+  const canSave = !saving && missing.length === 0;
+  const [showErrors, setShowErrors] = useState(false);
+  const siteCellRef = useRef<HTMLTableCellElement>(null);
+  const woCellRef = useRef<HTMLTableCellElement>(null);
 
-  const canSave =
+  const siteCellMissing = missing.some((f) => f === "site" || f === "pocName" || f === "pocPhone");
-    !saving && (weekDefault ? !!draft.targetWeek || !!draft.scheduledOn : !!draft.scheduledOn);
+  const siteShowError = showErrors && siteCellMissing;
+  const woShowError = showErrors && missing.includes("woNumber");
 
-  const patch = (p: Partial<WorkOrderTableDraft>) => onChange({ ...draft, ...p });
+  const patch = (p: Partial<WorkOrderTableDraft>) =>
+    onChange(withScheduleStatusSync({ ...draft, ...p }));
+
+  const focusCell = (r: RefObject<HTMLTableCellElement | null>) =>
+    r.current?.querySelector<HTMLElement>("input, button, [tabindex]")?.focus();
+
+  const attemptSave = () => {
+    if (saving) {
+      return;
+    }
+    if (canSave) {
+      onSave();
+      return;
+    }
+    setShowErrors(true);
+    if (siteCellMissing) {
+      focusCell(siteCellRef);
+    } else if (missing.includes("woNumber")) {
+      focusCell(woCellRef);
+    }
+  };
 
   return (
     <tr
       aria-busy={saving || undefined}
       style={{
         height: WO_TABLE_ROW_HEIGHT,
-
         borderBottom: "1px solid var(--color-border)",
-
         borderLeft: "2px solid var(--color-primary)",
-
         background: "var(--color-primary-tint)",
         opacity: saving ? 0.7 : 1,
         pointerEvents: saving ? "none" : undefined,
@@ -102,14 +126,21 @@ export function WoTableInlineRow({
         vendors={vendors}
         pmTypes={pmTypes}
         allRows={allRows}
+        siteCellRef={siteCellRef}
+        woCellRef={woCellRef}
+        siteShowError={siteShowError}
+        siteError={inlineCreateSiteError(missing)}
+        woShowError={woShowError}
         onPatch={patch}
+        onDuplicateFound={onDuplicateFound}
       />
 
       <td style={{ padding: "0 4px" }}>
         <WoTableInlineRowActions
           canSave={canSave}
           saving={saving}
-          onSave={onSave}
+          saveHint={saving ? "Saving…" : inlineCreateSaveHint(missing)}
+          onSave={attemptSave}
           onCancel={onCancel}
         />
       </td>

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

@@ -3,6 +3,7 @@ import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
 import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
 import { ApptTimeCell } from "./cells/appt-time-cell";
 import { CompDocCell } from "./cells/comp-doc-cell";
+import { DateCell } from "./cells/date-cell";
 import { PMTypeCell } from "./cells/pm-type-cell";
 import { StatusCell } from "./cells/status-cell";
 import { VendorCell } from "./cells/vendor-cell";
@@ -102,6 +103,17 @@ export function WoTableRowServiceCells({
           onOpenMedia={() => handlers.onOpenMedia(row)}
         />
       </td>
+      <td
+        className="group/cell"
+        style={{ padding: "0 14px", ...mutationCellStyle }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <DateCell
+          value={row.completedDate}
+          q={search}
+          onSave={(date) => onPatchRow({ completedDate: date })}
+        />
+      </td>
     </>
   );
 }

src/app/(protected)/workorders/_components/list/table/wo-table.tsx

@@ -9,11 +9,11 @@ import type {
   WorkOrderTablePatch,
   WorkOrderTableRow,
 } from "@/domain/work-orders/types/work-order-table-row";
-import { useCreateWorkOrderFromWizard } from "@/domain/work-orders/use-cases/use-create-work-order-from-wizard";
+import { DuplicateWoNumberDialog } from "@/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog";
 import { WoTableSkeleton } from "@/app/(protected)/workorders/_components/loading/wo-table-skeleton";
 import type { ReturnTypeOfUseWorkOrdersTableData } from "./wo-table-types";
-import { buildInlineDraftCreateInput } from "./build-inline-draft-create-input";
 import { buildSitePlaceLookups, resolveSitePlace } from "./site-place-lookup";
+import { useWoTableInlineCreate } from "./use-wo-table-inline-create";
 import { useWoTableRowHandlers } from "./use-wo-table-row-handlers";
 import { WoTableBody } from "./wo-table-body";
 import { WoTableHead } from "./wo-table-head";
@@ -55,10 +55,14 @@ export function WoTable({
   onPatch,
 }: WoTableProps) {
   const [dueDateHighlightId, setDueDateHighlightId] = useState<string | number | null>(null);
+  const [duplicateRow, setDuplicateRow] = useState<WorkOrderTableRow | null>(null);
   const { data: locationSites = [] } = useLocationSites();
   const sitePlaceLookups = useMemo(() => buildSitePlaceLookups(locationSites), [locationSites]);
-  const createMutation = useCreateWorkOrderFromWizard(() => {
+  const { handleInlineSave, saving } = useWoTableInlineCreate({
-    tableData.cancelDraft();
+    tableData,
+    users,
+    sites,
+    onDuplicateFound: setDuplicateRow,
   });
 
   const handlers = useWoTableRowHandlers({
@@ -70,6 +74,7 @@ export function WoTable({
     onOpenMedia,
     onPatch,
     onScheduleHighlight: setDueDateHighlightId,
+    onDuplicateFound: setDuplicateRow,
   });
 
   const renderRow = (row: WorkOrderTableRow, forceScheduleHighlight = false) => (
@@ -107,12 +112,11 @@ export function WoTable({
         vendors={vendors}
         pmTypes={pmTypes}
         allRows={tableData.rows}
-        saving={createMutation.isPending}
+        saving={saving}
         onChange={tableData.setDraft}
-        onSave={() =>
+        onSave={handleInlineSave}
-          createMutation.mutate(buildInlineDraftCreateInput(tableData.draft, users, sites))
-        }
         onCancel={tableData.cancelDraft}
+        onDuplicateFound={setDuplicateRow}
       />
     );
 
@@ -151,21 +155,33 @@ export function WoTable({
   }
 
   return (
-    <WoTableShell>
+    <>
-      <table
+      <WoTableShell>
-        style={{
+        <table
-          width: "100%",
+          style={{
-          minWidth: WO_TABLE_MIN_WIDTH,
+            width: "100%",
-          borderCollapse: "collapse",
+            minWidth: WO_TABLE_MIN_WIDTH,
+            borderCollapse: "collapse",
+          }}
+        >
+          <WoTableHead />
+          <WoTableBody
+            tableData={tableData}
+            renderRow={renderRow}
+            renderInlineRow={renderInlineRow}
+          />
+        </table>
+      </WoTableShell>
+
+      <DuplicateWoNumberDialog
+        open={duplicateRow != null}
+        existing={duplicateRow}
+        onDismiss={() => setDuplicateRow(null)}
+        onViewExisting={(row) => {
+          setDuplicateRow(null);
+          onOpenSlideOver(row, false);
         }}
-      >
+      />
-        <WoTableHead />
+    </>
-        <WoTableBody
-          tableData={tableData}
-          renderRow={renderRow}
-          renderInlineRow={renderInlineRow}
-        />
-      </table>
-    </WoTableShell>
   );
 }

src/app/(protected)/workorders/_components/list/work-order-cancel-dialog.tsx

@@ -0,0 +1,50 @@
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import { Button } from "@/components/ui/button";
+import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type WorkOrderCancelDialogProps = {
+  row: WorkOrderTableRow | null;
+  isPending: boolean;
+  onDialogClose: (() => void) | undefined;
+  onKeepWO: () => void;
+  onConfirm: () => void;
+};
+
+export function WorkOrderCancelDialog({
+  row,
+  isPending,
+  onDialogClose,
+  onKeepWO,
+  onConfirm,
+}: WorkOrderCancelDialogProps) {
+  return (
+    <Dialog open={Boolean(row)} onClose={onDialogClose} slotProps={dialogBlurBackdropSlotProps}>
+      <DialogTitle>Cancel work order?</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          Cancel WO #{row?.woNumber}? The record will be kept with status Canceled.
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button variant="outline" onClick={onKeepWO} disabled={isPending}>
+          Keep WO
+        </Button>
+        <Button
+          variant="destructive"
+          onClick={onConfirm}
+          loading={isPending}
+          loadingText="Canceling…"
+        >
+          Cancel WO
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/app/(protected)/workorders/_components/list/work-orders-list-wizard.tsx

@@ -0,0 +1,32 @@
+import { NewWoWizard } from "@/app/(protected)/workorders/_components/wizard/new-wo-wizard";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type WorkOrdersListWizardProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  users: WorkOrderUser[];
+  rows: WorkOrderTableRow[];
+  onViewExisting: (row: WorkOrderTableRow) => void;
+};
+
+export function WorkOrdersListWizard({
+  open,
+  onOpenChange,
+  users,
+  rows,
+  onViewExisting,
+}: WorkOrdersListWizardProps) {
+  return (
+    <NewWoWizard
+      open={open}
+      onOpenChange={onOpenChange}
+      users={users}
+      existingRows={rows}
+      onViewExistingWo={(row) => {
+        onOpenChange(false);
+        onViewExisting(row);
+      }}
+    />
+  );
+}

src/app/(protected)/workorders/_components/media/media-upload-modal.tsx

@@ -38,10 +38,8 @@ export function MediaUploadModal({ row, open, onOpenChange }: MediaUploadModalPr
   const categorizeMutation = useUpdateWorkOrderMediaCategory(row.id);
   const deleteMutation = useDeleteWorkOrderMedia(row.id);
   const isReadOnly = isWorkOrderDocumentsReadOnly(detail?.info.status ?? row.status);
-  const { uploads, startUploads, retryUpload, removeLocal, isLocal } = useMediaUploadSession(
+  const { uploads, startUploads, retryUpload, cancelUpload, removeLocal, isLocal } =
-    detail,
+    useMediaUploadSession(detail, (input) => uploadMutation.mutateAsync(input));
-    (input) => uploadMutation.mutateAsync(input),
-  );
 
   const pending =
     uploadMutation.isPending || deleteMutation.isPending || categorizeMutation.isPending;
@@ -109,7 +107,7 @@ export function MediaUploadModal({ row, open, onOpenChange }: MediaUploadModalPr
                 categorizeMutation.mutate({ mediaId: id, category, workOrderVersion });
               }}
               onRetry={retryUpload}
-              onCancel={removeLocal}
+              onCancel={cancelUpload}
               readOnly={isReadOnly}
               pending={pending}
             />

src/app/(protected)/workorders/_components/media/media-uploader.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { toast } from "react-toastify";
 import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
 import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
@@ -15,17 +15,16 @@ import { MediaUploaderGrid } from "./media-uploader-grid";
 export type MediaUploadRequest = {
   localId: string;
   file: File;
-  signal: AbortSignal;
   onProgress: (percent: number) => void;
 };
 
 type MediaUploaderProps = {
   uploads: MediaFile[];
-  /** Upload-then-categorize: files only — category assigned after persist. */
+  /** Upload-then-categorize: files only ÔÇö category assigned after persist. */
   onUpload?: (requests: MediaUploadRequest[]) => void;
   onRemove?: (id: string) => void;
   onCategorize?: (id: string, category: UploadableMediaCategory) => void;
-  onRetry?: (localId: string, signal: AbortSignal) => void;
+  onRetry?: (localId: string) => void;
   onCancel?: (localId: string) => void;
   /** Legacy local-only mode (table modal fallback). */
   onChange?: (next: MediaFile[]) => void;
@@ -45,7 +44,6 @@ export function MediaUploader({
   pending = false,
 }: MediaUploaderProps) {
   const inputRef = useRef<HTMLInputElement>(null);
-  const [controllers, setControllers] = useState<Record<string, AbortController>>({});
 
   const addFiles = (files: FileList | null) => {
     if (readOnly || pending || !files || files.length === 0) return;
@@ -65,19 +63,11 @@ export function MediaUploader({
     if (accepted.length === 0) return;
 
     if (onUpload) {
-      const nextControllers: Record<string, AbortController> = { ...controllers };
+      const requests: MediaUploadRequest[] = accepted.map((file) => ({
-      const requests: MediaUploadRequest[] = accepted.map((file) => {
+        localId: `local-${crypto.randomUUID()}`,
-        const localId = `local-${crypto.randomUUID()}`;
+        file,
-        const controller = new AbortController();
+        onProgress: () => undefined,
-        nextControllers[localId] = controller;
+      }));
-        return {
-          localId,
-          file,
-          signal: controller.signal,
-          onProgress: () => undefined,
-        };
-      });
-      setControllers(nextControllers);
       onUpload(requests);
       return;
     }
@@ -98,18 +88,6 @@ export function MediaUploader({
     onChange?.(uploads.filter((u) => u.id !== id));
   };
 
-  const cancel = (id: string) => {
-    controllers[id]?.abort();
-    onCancel?.(id);
-  };
-
-  const retry = (id: string) => {
-    controllers[id]?.abort();
-    const controller = new AbortController();
-    setControllers((prev) => ({ ...prev, [id]: controller }));
-    onRetry?.(id, controller.signal);
-  };
-
   return (
     <div>
       {!readOnly && (
@@ -121,8 +99,8 @@ export function MediaUploader({
         pending={pending}
         onRemove={remove}
         onCategorize={onCategorize}
-        onRetry={onRetry ? retry : undefined}
+        onRetry={onRetry}
-        onCancel={cancel}
+        onCancel={onCancel}
       />
     </div>
   );

src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx

@@ -1,38 +1,23 @@
-import { useEffect, useMemo, useState } from "react";
 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 { DuplicateWoNumberDialog } from "@/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog";
-import { isWoWizardMockEnabled } from "@/domain/work-orders/mocks/is-wo-wizard-mock-enabled";
-import {
-  getMockWoWizardLocationDetail,
-  MOCK_WO_WIZARD_LOCATIONS,
-  MOCK_WO_WIZARD_SERVICES,
-  MOCK_WO_WIZARD_USERS,
-  MOCK_WO_WIZARD_VENDORS,
-} from "@/domain/work-orders/mocks/wo-wizard-mock-data";
 import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
-import {
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
-  EMPTY_WIZARD_DRAFT,
+import { WIZARD_STEPS } from "@/domain/work-orders/types/work-order-wizard";
-  WIZARD_STEPS,
-  type WorkOrderWizardDraft,
-} from "@/domain/work-orders/types/work-order-wizard";
-import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
-import {
-  useWorkOrderLocations,
-  useWorkOrderVendors,
-} from "@/domain/work-orders/use-cases/use-work-order-detail";
-import { useCreateWorkOrderFromWizard } from "@/domain/work-orders/use-cases/use-create-work-order-from-wizard";
 import { WizardFooter } from "@/app/(protected)/workorders/_components/wizard/wizard-footer";
 import { WizardSidebar } from "@/app/(protected)/workorders/_components/wizard/wizard-sidebar";
 import { WizardStepLocationService } from "@/app/(protected)/workorders/_components/wizard/wizard-step-location-service";
 import { WizardStepTypeSchedule } from "@/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule";
 import { WizardStepVendorTime } from "@/app/(protected)/workorders/_components/wizard/wizard-step-vendor-time";
+import { useNewWoWizardState } from "@/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-state";
 
 type NewWoWizardProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   users: WorkOrderUser[];
+  existingRows?: WorkOrderTableRow[];
+  onViewExistingWo?: (row: WorkOrderTableRow) => void;
 };
 
 function WizardStepHeader({ step }: { step: number }) {
@@ -75,152 +60,99 @@ function WizardStepHeader({ step }: { step: number }) {
   );
 }
 
-export function NewWoWizard({ open, onOpenChange, users }: NewWoWizardProps) {
+export function NewWoWizard({
-  const mockFallback = isWoWizardMockEnabled();
+  open,
-  const [step, setStep] = useState(1);
+  onOpenChange,
-  const [draft, setDraft] = useState<WorkOrderWizardDraft>({
+  users,
-    ...EMPTY_WIZARD_DRAFT,
+  existingRows = [],
-    status: "Incomplete",
+  onViewExistingWo,
-  });
+}: NewWoWizardProps) {
-  const [pocAutoFilledFor, setPocAutoFilledFor] = useState("");
+  const wizard = useNewWoWizardState({ open, users, existingRows, onOpenChange });
-
-  const { data: apiLocations = [] } = useWorkOrderLocations();
-  const { data: apiProblems = [] } = useDropdownOptionsByCategory("Problem");
-  const isMockLocation = draft.locationId.startsWith("mock-");
-  const { data: apiLocationDetail } = useLocationDetail(
-    isMockLocation ? undefined : draft.locationId || undefined,
-  );
-  const mockLocationDetail = isMockLocation
-    ? getMockWoWizardLocationDetail(draft.locationId)
-    : undefined;
-  const locationDetail = mockLocationDetail ?? apiLocationDetail;
-  const { data: apiVendors = [] } = useWorkOrderVendors(
-    undefined,
-    isMockLocation ? undefined : locationDetail?.zipCode,
-  );
-  const createMutation = useCreateWorkOrderFromWizard(() => onOpenChange(false));
-
-  const wizardUsers = useMemo(() => {
-    if (users.length > 0) {
-      return users;
-    }
-    return mockFallback ? MOCK_WO_WIZARD_USERS : [];
-  }, [mockFallback, users]);
-  const locations =
-    apiLocations.length > 0 ? apiLocations : mockFallback ? MOCK_WO_WIZARD_LOCATIONS : [];
-  const problems =
-    apiProblems.length > 0 ? apiProblems : mockFallback ? MOCK_WO_WIZARD_SERVICES : [];
-  const vendors = apiVendors.length > 0 ? apiVendors : mockFallback ? MOCK_WO_WIZARD_VENDORS : [];
-
-  useEffect(() => {
-    if (open) {
-      setStep(1);
-      setDraft({ ...EMPTY_WIZARD_DRAFT, status: "Incomplete" });
-      setPocAutoFilledFor("");
-    }
-  }, [open]);
-
-  useEffect(() => {
-    if (!draft.locationId || !locationDetail) {
-      return;
-    }
-    if (pocAutoFilledFor === draft.locationId) {
-      return;
-    }
-    setDraft((current) => ({
-      ...current,
-      pocName: locationDetail.contact ?? current.pocName,
-      pocPhone: locationDetail.phone ?? current.pocPhone,
-    }));
-    setPocAutoFilledFor(draft.locationId);
-  }, [draft.locationId, locationDetail, pocAutoFilledFor]);
-
-  const setField = <K extends keyof WorkOrderWizardDraft>(
-    key: K,
-    value: WorkOrderWizardDraft[K],
-  ) => {
-    setDraft((current) => ({ ...current, [key]: value }));
-  };
-
-  const patchDraft = (patch: Partial<WorkOrderWizardDraft>) => {
-    setDraft((current) => ({ ...current, ...patch }));
-    if (patch.locationId !== undefined && patch.locationId !== pocAutoFilledFor) {
-      setPocAutoFilledFor("");
-    }
-  };
-
-  const handleCreate = () => createMutation.mutate(draft);
 
   return (
-    <Dialog
+    <>
-      open={open}
+      <Dialog
-      onClose={() => onOpenChange(false)}
+        open={open}
-      maxWidth={false}
+        onClose={() => onOpenChange(false)}
-      slotProps={{
+        maxWidth={false}
-        ...dialogBlurBackdropSlotProps,
+        slotProps={{
-        paper: {
+          ...dialogBlurBackdropSlotProps,
-          className: "flex flex-col overflow-hidden p-0",
+          paper: {
-          style: {
+            className: "flex flex-col overflow-hidden p-0",
-            borderRadius: 12,
+            style: {
-            width: 768,
+              borderRadius: 12,
-            maxWidth: 768,
+              width: 768,
-            height: 680,
+              maxWidth: 768,
-            maxHeight: 680,
+              height: 680,
+              maxHeight: 680,
+            },
           },
-        },
+        }}
-      }}
+      >
-    >
+        <span className="sr-only">Guided setup for creating a new work order</span>
-      <span className="sr-only">Guided setup for creating a new work order</span>
 
-      <div className="flex min-h-0 flex-1">
+        <div className="flex min-h-0 flex-1">
-        <WizardSidebar step={step} draft={draft} />
+          <WizardSidebar step={wizard.step} draft={wizard.draft} />
 
-        <div
+          <div
-          className="min-h-0 flex-1 overflow-y-auto"
+            className="min-h-0 flex-1 overflow-y-auto"
-          style={{ padding: 32, background: "var(--color-bg-surface)" }}
+            style={{ padding: 32, background: "var(--color-bg-surface)" }}
-        >
+          >
-          <WizardStepHeader step={step} />
+            <WizardStepHeader step={wizard.step} />
 
-          {step === 1 && (
+            {wizard.step === 1 && (
-            <WizardStepTypeSchedule
+              <WizardStepTypeSchedule
-              draft={draft}
+                draft={wizard.draft}
-              users={wizardUsers}
+                users={wizard.wizardUsers}
-              onUpdate={setField}
+                onUpdate={wizard.setField}
-              onPatch={patchDraft}
+                onPatch={wizard.patchDraft}
-            />
+                onDuplicateWoNumber={wizard.handleDuplicateFound}
-          )}
+              />
+            )}
 
-          {step === 2 && (
+            {wizard.step === 2 && (
-            <WizardStepLocationService
+              <WizardStepLocationService
-              draft={draft}
+                draft={wizard.draft}
-              locations={locations}
+                locations={wizard.locations}
-              locationDetail={locationDetail}
+                locationDetail={wizard.locationDetail}
-              services={problems.map((p) => ({ id: p.id, value: p.value }))}
+                services={wizard.problems.map((p) => ({ id: p.id, value: p.value }))}
-              onUpdate={setField}
+                onUpdate={wizard.setField}
-              onPatch={patchDraft}
+                onPatch={wizard.patchDraft}
-            />
+              />
-          )}
+            )}
 
-          {step === 3 && (
+            {wizard.step === 3 && (
-            <WizardStepVendorTime
+              <WizardStepVendorTime
-              draft={draft}
+                draft={wizard.draft}
-              vendors={vendors}
+                vendors={wizard.vendors}
-              onUpdate={setField}
+                onUpdate={wizard.setField}
-              onPatch={patchDraft}
+                onPatch={wizard.patchDraft}
-            />
+              />
-          )}
+            )}
+          </div>
         </div>
-      </div>
 
-      <WizardFooter
+        <WizardFooter
-        step={step}
+          step={wizard.step}
-        draft={draft}
+          draft={wizard.draft}
-        onCancel={() => onOpenChange(false)}
+          onCancel={() => onOpenChange(false)}
-        onBack={() => setStep((s) => s - 1)}
+          onBack={() => wizard.setStep((s) => s - 1)}
-        onContinue={() => setStep((s) => s + 1)}
+          onContinue={() => wizard.setStep((s) => s + 1)}
-        onCreate={handleCreate}
+          onCreate={wizard.handleCreate}
-        isCreating={createMutation.isPending}
+          isCreating={wizard.isCreating}
+        />
+      </Dialog>
+
+      <DuplicateWoNumberDialog
+        open={wizard.duplicateRow != null}
+        existing={wizard.duplicateRow}
+        onDismiss={() => wizard.setDuplicateRow(null)}
+        onViewExisting={(row) => {
+          wizard.setDuplicateRow(null);
+          onOpenChange(false);
+          onViewExistingWo?.(row);
+        }}
       />
-    </Dialog>
+    </>
   );
 }

src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-state.ts

@@ -0,0 +1,136 @@
+import { useEffect, useMemo, useState } from "react";
+import { isWoWizardMockEnabled } from "@/domain/work-orders/mocks/is-wo-wizard-mock-enabled";
+import {
+  getMockWoWizardLocationDetail,
+  MOCK_WO_WIZARD_LOCATIONS,
+  MOCK_WO_WIZARD_SERVICES,
+  MOCK_WO_WIZARD_USERS,
+  MOCK_WO_WIZARD_VENDORS,
+} from "@/domain/work-orders/mocks/wo-wizard-mock-data";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  EMPTY_WIZARD_DRAFT,
+  type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
+import { useDropdownOptionsByCategory } from "@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category";
+import {
+  useWorkOrderLocations,
+  useWorkOrderVendors,
+} from "@/domain/work-orders/use-cases/use-work-order-detail";
+import { useCreateWorkOrderFromWizard } from "@/domain/work-orders/use-cases/use-create-work-order-from-wizard";
+import { useWizardDuplicateActions } from "./use-wizard-duplicate-actions";
+
+type UseNewWoWizardStateArgs = {
+  open: boolean;
+  users: WorkOrderUser[];
+  existingRows: WorkOrderTableRow[];
+  onOpenChange: (open: boolean) => void;
+};
+
+export function useNewWoWizardState({
+  open,
+  users,
+  existingRows,
+  onOpenChange,
+}: UseNewWoWizardStateArgs) {
+  const mockFallback = isWoWizardMockEnabled();
+  const [step, setStep] = useState(1);
+  const [draft, setDraft] = useState<WorkOrderWizardDraft>({
+    ...EMPTY_WIZARD_DRAFT,
+    status: "Incomplete",
+  });
+  const [pocAutoFilledFor, setPocAutoFilledFor] = useState("");
+
+  const { data: apiLocations = [] } = useWorkOrderLocations();
+  const { data: apiProblems = [] } = useDropdownOptionsByCategory("Problem");
+  const isMockLocation = draft.locationId.startsWith("mock-");
+  const { data: apiLocationDetail } = useLocationDetail(
+    isMockLocation ? undefined : draft.locationId || undefined,
+  );
+  const mockLocationDetail = isMockLocation
+    ? getMockWoWizardLocationDetail(draft.locationId)
+    : undefined;
+  const locationDetail = mockLocationDetail ?? apiLocationDetail;
+  const { data: apiVendors = [] } = useWorkOrderVendors(
+    undefined,
+    isMockLocation ? undefined : locationDetail?.zipCode,
+  );
+  const createMutation = useCreateWorkOrderFromWizard(() => onOpenChange(false));
+  const { duplicateRow, setDuplicateRow, handleDuplicateFound, handleCreate, isCreating } =
+    useWizardDuplicateActions({
+      open,
+      draft,
+      existingRows,
+      createMutation,
+    });
+
+  const wizardUsers = useMemo(() => {
+    if (users.length > 0) {
+      return users;
+    }
+    return mockFallback ? MOCK_WO_WIZARD_USERS : [];
+  }, [mockFallback, users]);
+  const locations =
+    apiLocations.length > 0 ? apiLocations : mockFallback ? MOCK_WO_WIZARD_LOCATIONS : [];
+  const problems =
+    apiProblems.length > 0 ? apiProblems : mockFallback ? MOCK_WO_WIZARD_SERVICES : [];
+  const vendors = apiVendors.length > 0 ? apiVendors : mockFallback ? MOCK_WO_WIZARD_VENDORS : [];
+
+  useEffect(() => {
+    if (open) {
+      setStep(1);
+      setDraft({ ...EMPTY_WIZARD_DRAFT, status: "Incomplete" });
+      setPocAutoFilledFor("");
+      setDuplicateRow(null);
+    }
+  }, [open, setDuplicateRow]);
+
+  useEffect(() => {
+    if (!draft.locationId || !locationDetail) {
+      return;
+    }
+    if (pocAutoFilledFor === draft.locationId) {
+      return;
+    }
+    setDraft((current) => ({
+      ...current,
+      pocName: locationDetail.contact ?? current.pocName,
+      pocPhone: locationDetail.phone ?? current.pocPhone,
+    }));
+    setPocAutoFilledFor(draft.locationId);
+  }, [draft.locationId, locationDetail, pocAutoFilledFor]);
+
+  const setField = <K extends keyof WorkOrderWizardDraft>(
+    key: K,
+    value: WorkOrderWizardDraft[K],
+  ) => {
+    setDraft((current) => ({ ...current, [key]: value }));
+  };
+
+  const patchDraft = (patch: Partial<WorkOrderWizardDraft>) => {
+    setDraft((current) => ({ ...current, ...patch }));
+    if (patch.locationId !== undefined && patch.locationId !== pocAutoFilledFor) {
+      setPocAutoFilledFor("");
+    }
+  };
+
+  return {
+    step,
+    setStep,
+    draft,
+    duplicateRow,
+    setDuplicateRow,
+    wizardUsers,
+    locations,
+    problems,
+    vendors,
+    locationDetail,
+    setField,
+    patchDraft,
+    handleDuplicateFound,
+    handleCreate,
+    isCreating,
+  };
+}

src/app/(protected)/workorders/_components/wizard/use-wizard-duplicate-actions.ts

@@ -0,0 +1,100 @@
+import { useEffect, useRef, useState } from "react";
+import { toast } from "react-toastify";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import { findDuplicateWoNumberRow } from "@/domain/work-orders/utils/find-duplicate-wo-number-row";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+
+type UseWizardDuplicateActionsArgs = {
+  open: boolean;
+  draft: WorkOrderWizardDraft;
+  existingRows: WorkOrderTableRow[];
+  createMutation: {
+    mutate: (draft: WorkOrderWizardDraft) => void;
+    isPending: boolean;
+  };
+};
+
+export function useWizardDuplicateActions({
+  open,
+  draft,
+  existingRows,
+  createMutation,
+}: UseWizardDuplicateActionsArgs) {
+  const [duplicateRow, setDuplicateRow] = useState<WorkOrderTableRow | null>(null);
+  const [isCheckingDuplicate, setIsCheckingDuplicate] = useState(false);
+  const openRef = useRef(open);
+  const draftRef = useRef(draft);
+
+  useEffect(() => {
+    openRef.current = open;
+  }, [open]);
+
+  useEffect(() => {
+    draftRef.current = draft;
+  }, [draft]);
+
+  const resolveDuplicate = async (woNumber: string) => {
+    const localDuplicate = findDuplicateWoNumberRow(woNumber, existingRows);
+    if (localDuplicate) {
+      return localDuplicate;
+    }
+
+    // The loaded board rows are only an immediate UX hint; the unfiltered API lookup is authoritative.
+    return workOrdersApi.findByWoNumber(woNumber);
+  };
+
+  const handleDuplicateFound = (woNumber: string) => {
+    void (async () => {
+      try {
+        const duplicate = await resolveDuplicate(woNumber);
+        // Ignore stale lookups after dismiss or after the user edits the WO#.
+        if (!openRef.current || woNumber !== draftRef.current.woNumber) {
+          return;
+        }
+        if (duplicate) {
+          setDuplicateRow(duplicate);
+        }
+      } catch {
+        if (!openRef.current) {
+          return;
+        }
+        toast.error("Unable to verify the work order number. Please try again.");
+      }
+    })();
+  };
+
+  const handleCreate = () => {
+    const woNumberAtSubmit = draft.woNumber;
+    void (async () => {
+      setIsCheckingDuplicate(true);
+      try {
+        const duplicate = await resolveDuplicate(woNumberAtSubmit);
+        // Ignore after dismiss or if the WO# changed while the request was in flight.
+        if (!openRef.current || woNumberAtSubmit !== draftRef.current.woNumber) {
+          return;
+        }
+        if (duplicate) {
+          setDuplicateRow(duplicate);
+          return;
+        }
+        createMutation.mutate(draftRef.current);
+      } catch {
+        if (!openRef.current) {
+          return;
+        }
+        toast.error("Unable to verify the work order number. Please try again.");
+      } finally {
+        setIsCheckingDuplicate(false);
+      }
+    })();
+  };
+
+  return {
+    duplicateRow,
+    setDuplicateRow,
+    handleDuplicateFound,
+    handleCreate,
+    isCreating: createMutation.isPending || isCheckingDuplicate,
+  };
+}

src/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule.tsx

@@ -117,6 +117,7 @@ type WizardStepTypeScheduleProps = {
   users: WorkOrderUser[];
   onUpdate: <K extends keyof WorkOrderWizardDraft>(key: K, value: WorkOrderWizardDraft[K]) => void;
   onPatch: (patch: Partial<WorkOrderWizardDraft>) => void;
+  onDuplicateWoNumber?: (woNumber: string) => void;
 };
 
 export function WizardStepTypeSchedule({
@@ -124,6 +125,7 @@ export function WizardStepTypeSchedule({
   users,
   onUpdate,
   onPatch,
+  onDuplicateWoNumber,
 }: WizardStepTypeScheduleProps) {
   return (
     <div className="space-y-6">
@@ -138,6 +140,7 @@ export function WizardStepTypeSchedule({
           type="text"
           value={draft.woNumber}
           onChange={(e) => onUpdate("woNumber", e.target.value)}
+          onBlur={() => onDuplicateWoNumber?.(draft.woNumber)}
           placeholder="e.g. 24818"
           maxLength={20}
           className={DLG_INPUT_CLS}

src/app/(protected)/workorders/_hooks/use-media-upload-session.ts

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import type { MediaUploadRequest } from "@/app/(protected)/workorders/_components/media/media-uploader";
 import { boardMediaItemsToMediaFiles } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
 import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
@@ -13,13 +13,13 @@ type UploadMutate = (input: {
   onProgress?: (percent: number) => void;
 }) => Promise<unknown>;
 
-function revokeBlobUrl(url: string | undefined) {
+type SessionUploadRequest = {
-  if (url?.startsWith("blob:")) {
+  localId: string;
-    URL.revokeObjectURL(url);
+  file: File;
-  }
+  signal: AbortSignal;
-}
+};
 
-function toLocalUpload(request: MediaUploadRequest): LocalUpload {
+function toLocalUpload(request: SessionUploadRequest): LocalUpload {
   const classified = classifyUpload(request.file);
   return {
     id: request.localId,
@@ -35,15 +35,44 @@ function toLocalUpload(request: MediaUploadRequest): LocalUpload {
   };
 }
 
-function isSameAttempt(item: LocalUpload, request: MediaUploadRequest) {
+function isSameAttempt(item: LocalUpload, request: SessionUploadRequest) {
   return item.id === request.localId && item.signal === request.signal;
 }
 
+function revokeBlobUrl(url: string) {
+  if (url.startsWith("blob:")) {
+    URL.revokeObjectURL(url);
+  }
+}
+
 export function useMediaUploadSession(
   detail: WorkOrderBoardDetail | undefined,
   uploadMutateAsync: UploadMutate,
 ) {
   const [localUploads, setLocalUploads] = useState<LocalUpload[]>([]);
+  const controllersRef = useRef(new Map<string, AbortController>());
+  const workOrderId = detail?.info.id;
+  const previousWorkOrderIdRef = useRef(workOrderId);
+
+  // Drop local tiles and abort in-flight uploads when the bound WO changes.
+  // Skip the first bind (undefined  id) so an early upload is not cleared.
+  useEffect(() => {
+    if (previousWorkOrderIdRef.current === workOrderId) return;
+    const hadPrevious = previousWorkOrderIdRef.current != null;
+    previousWorkOrderIdRef.current = workOrderId;
+    if (!hadPrevious) return;
+
+    for (const controller of controllersRef.current.values()) {
+      controller.abort();
+    }
+    controllersRef.current.clear();
+    setLocalUploads((prev) => {
+      for (const item of prev) {
+        revokeBlobUrl(item.url);
+      }
+      return [];
+    });
+  }, [workOrderId]);
 
   const serverUploads = useMemo(
     () => boardMediaItemsToMediaFiles(detail?.media ?? []),
@@ -58,15 +87,34 @@ export function useMediaUploadSession(
     return [...serverUploads, ...pendingLocals.filter((item) => !serverIds.has(item.id))];
   }, [serverUploads, localUploads]);
 
+  function clearController(localId: string) {
+    controllersRef.current.delete(localId);
+  }
+
+  function replaceController(localId: string): AbortController {
+    controllersRef.current.get(localId)?.abort();
+    const controller = new AbortController();
+    controllersRef.current.set(localId, controller);
+    return controller;
+  }
+
   function startUploads(requests: MediaUploadRequest[]) {
+    const sessionRequests: SessionUploadRequest[] = requests.map((request) => ({
+      localId: request.localId,
+      file: request.file,
+      signal: replaceController(request.localId).signal,
+    }));
+
     setLocalUploads((prev) => {
       const next = [...prev];
-      for (const request of requests) {
+      for (const request of sessionRequests) {
         const entry = toLocalUpload(request);
         const index = next.findIndex((item) => item.id === request.localId);
         if (index >= 0) {
           const previous = next[index];
-          revokeBlobUrl(previous?.url);
+          if (previous) {
+            revokeBlobUrl(previous.url);
+          }
           next[index] = entry;
         } else {
           next.push(entry);
@@ -75,7 +123,7 @@ export function useMediaUploadSession(
       return next;
     });
 
-    for (const request of requests) {
+    for (const request of sessionRequests) {
       void uploadMutateAsync({
         file: request.file,
         signal: request.signal,
@@ -88,25 +136,16 @@ export function useMediaUploadSession(
         },
       })
         .then(() => {
-          setLocalUploads((prev) => {
+          clearController(request.localId);
-            const dropped = prev.filter((item) => isSameAttempt(item, request));
+          setLocalUploads((prev) => prev.filter((item) => !isSameAttempt(item, request)));
-            for (const item of dropped) {
-              revokeBlobUrl(item.url);
-            }
-            return prev.filter((item) => !isSameAttempt(item, request));
-          });
         })
         .catch((error: Error) => {
           if (error.name === "AbortError") {
-            setLocalUploads((prev) => {
+            clearController(request.localId);
-              const dropped = prev.filter((item) => isSameAttempt(item, request));
+            setLocalUploads((prev) => prev.filter((item) => !isSameAttempt(item, request)));
-              for (const item of dropped) {
-                revokeBlobUrl(item.url);
-              }
-              return prev.filter((item) => !isSameAttempt(item, request));
-            });
             return;
           }
+          // Keep controller entry only while retryable; replaceController on retry.
           setLocalUploads((prev) =>
             prev.map((item) =>
               isSameAttempt(item, request)
@@ -123,32 +162,38 @@ export function useMediaUploadSession(
     }
   }
 
-  function retryUpload(localId: string, signal: AbortSignal) {
+  function retryUpload(localId: string) {
     const target = localUploads.find((item) => item.id === localId);
     if (!target?.sourceFile) return;
     startUploads([
       {
         localId,
         file: target.sourceFile,
-        signal,
         onProgress: () => undefined,
       },
     ]);
   }
 
-  function removeLocal(id: string) {
+  function cancelUpload(localId: string) {
+    controllersRef.current.get(localId)?.abort();
+    clearController(localId);
     setLocalUploads((prev) => {
-      const dropped = prev.filter((item) => item.id === id);
+      const target = prev.find((item) => item.id === localId);
-      for (const item of dropped) {
+      if (target) {
-        revokeBlobUrl(item.url);
+        revokeBlobUrl(target.url);
       }
-      return prev.filter((item) => item.id !== id);
+      return prev.filter((item) => item.id !== localId);
     });
   }
 
+  function removeLocal(id: string) {
+    clearController(id);
+    setLocalUploads((prev) => prev.filter((item) => item.id !== id));
+  }
+
   function isLocal(id: string) {
     return localUploads.some((item) => item.id === id);
   }
 
-  return { uploads, startUploads, retryUpload, removeLocal, isLocal };
+  return { uploads, startUploads, retryUpload, cancelUpload, removeLocal, isLocal };
 }

src/app/(protected)/workorders/_hooks/use-work-orders-list-page.ts

@@ -0,0 +1,131 @@
+import { useMemo, useState } from "react";
+import { useDropdownOptionsByCategory } from "@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category";
+import type { CompDocData, CompDocSaveStatus } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  useWorkOrderLocations,
+  useWorkOrderVendors,
+} from "@/domain/work-orders/use-cases/use-work-order-detail";
+import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
+import { useWorkOrderTableMutations } from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+import { guardDialogClose } from "@/lib/dialog-guard";
+import { useWorkOrdersListFilters } from "./use-work-orders-list-filters";
+import { useWorkOrdersTableData } from "./use-work-orders-table-data";
+
+export function useWorkOrdersListPage() {
+  const [wizardOpen, setWizardOpen] = useState(false);
+  const [slideOverRow, setSlideOverRow] = useState<WorkOrderTableRow | null>(null);
+  const [slideOverEdit, setSlideOverEdit] = useState(false);
+  const [confirmCancel, setConfirmCancel] = useState<WorkOrderTableRow | null>(null);
+  const [docRow, setDocRow] = useState<WorkOrderTableRow | null>(null);
+  const [mediaRow, setMediaRow] = useState<WorkOrderTableRow | null>(null);
+  const [completionDocs, setCompletionDocs] = useState<Record<string, CompDocData>>({});
+  const filters = useWorkOrdersListFilters();
+  const tableData = useWorkOrdersTableData(filters);
+  const {
+    patchField,
+    patchFieldAsync,
+    isPending: isPatchPending,
+  } = useWorkOrderTableMutations({
+    onPatch: tableData.patchRow,
+    clearPatch: tableData.clearRowPatch,
+    getRow: (id) => tableData.rows.find((row) => String(row.id) === String(id)),
+  });
+
+  const { data: users = [], isLoading: usersLoading } = useWorkOrderUsers();
+  const { data: locations = [] } = useWorkOrderLocations();
+  const { data: vendors = [] } = useWorkOrderVendors();
+  const { data: problemOptions = [] } = useDropdownOptionsByCategory("Problem");
+
+  const pmTypes = useMemo(
+    () => problemOptions.map((option) => option.value).filter(Boolean),
+    [problemOptions],
+  );
+
+  const vendorTechs = useMemo(
+    () => [...new Set(vendors.map((vendor) => vendor.companyName).filter(Boolean))],
+    [vendors],
+  );
+
+  const activeSlideOverRow = useMemo(() => {
+    if (!slideOverRow) return null;
+    return tableData.rows.find((row) => row.id === slideOverRow.id) ?? slideOverRow;
+  }, [slideOverRow, tableData.rows]);
+
+  const activeDocRow = useMemo(() => {
+    if (!docRow) return null;
+    return tableData.rows.find((row) => row.id === docRow.id) ?? docRow;
+  }, [docRow, tableData.rows]);
+
+  const activeMediaRow = useMemo(() => {
+    if (!mediaRow) return null;
+    return tableData.rows.find((row) => row.id === mediaRow.id) ?? mediaRow;
+  }, [mediaRow, tableData.rows]);
+
+  const handleOpenSlideOver = (row: WorkOrderTableRow, edit = false) => {
+    setSlideOverRow(row);
+    setSlideOverEdit(edit);
+  };
+
+  const handleCloseSlideOver = () => {
+    setSlideOverRow(null);
+    setSlideOverEdit(false);
+    tableData.setSelectedId(null);
+  };
+
+  const handleConfirmCancel = () => {
+    if (!confirmCancel) return;
+    patchField(confirmCancel.id, { status: "Canceled" });
+    setConfirmCancel(null);
+    handleCloseSlideOver();
+  };
+
+  const cancelDialogClose = guardDialogClose(isPatchPending, () => setConfirmCancel(null));
+
+  const saveCompletionDoc = async (
+    row: WorkOrderTableRow,
+    data: CompDocData,
+    status: CompDocSaveStatus,
+  ) => {
+    // Persist PM comments + generatedAt in session state (no dedicated BE field yet)
+    // before patching board docStatus — Save draft / Generate / NN all share this path.
+    const nextData: CompDocData = {
+      notes: data.notes,
+      generatedAt: data.generatedAt,
+    };
+    setCompletionDocs((prev) => ({ ...prev, [String(row.id)]: nextData }));
+    await patchFieldAsync(row.id, { docStatus: status });
+  };
+
+  return {
+    wizardOpen,
+    setWizardOpen,
+    slideOverEdit,
+    confirmCancel,
+    setConfirmCancel,
+    docRow,
+    setDocRow,
+    mediaRow,
+    setMediaRow,
+    completionDocs,
+    filters,
+    tableData,
+    patchField,
+    patchFieldAsync,
+    isPatchPending,
+    users,
+    usersLoading,
+    locations,
+    vendors,
+    pmTypes,
+    vendorTechs,
+    activeSlideOverRow,
+    activeDocRow,
+    activeMediaRow,
+    handleOpenSlideOver,
+    handleCloseSlideOver,
+    handleConfirmCancel,
+    cancelDialogClose,
+    saveCompletionDoc,
+  };
+}

src/app/(protected)/workorders/_hooks/use-work-orders-table-ui-state.ts

@@ -49,12 +49,16 @@ export function useWorkOrdersTableUiState(weekMonday: string) {
   const startDayDraft = useCallback(
     (key: string, scheduledIso?: string) => {
       setDraftDayKey(key);
+      // Unscheduled "+ Add WO" starts with no schedule (SH-109); day groups prefill the day.
+      if (key === UNSCHEDULED_DAY_KEY) {
+        setDraft({ ...EMPTY_TABLE_DRAFT });
+        return;
+      }
       const scheduledOn = resolveDraftScheduledOn(key, weekMonday, scheduledIso);
       setDraft({
         ...EMPTY_TABLE_DRAFT,
         scheduledOn,
-        scheduleWeekOnly: key === UNSCHEDULED_DAY_KEY,
+        status: scheduledOn ? "Scheduled" : "Incomplete",
-        targetWeek: key === UNSCHEDULED_DAY_KEY ? weekMonday : "",
       });
     },
     [weekMonday],

src/app/(protected)/workorders/index.tsx

@@ -1,69 +1,24 @@
-import { useMemo, useState } from "react";
 import { Box } from "@mui/material";
-import { useNavigate } from "react-router";
 import { PageHeader } from "@/components/ui/page-header";
 import { QueryErrorPanel } from "@/components/ui/query-error-panel";
+import { CompDocDialog } from "@/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog";
+import { WorkOrderSlideOver } from "@/app/(protected)/workorders/_components/detail/work-order-slide-over";
+import { MediaUploadModal } from "@/app/(protected)/workorders/_components/media/media-upload-modal";
+import { WorkOrdersAdvancedSearchSheet } from "@/app/(protected)/workorders/_components/list/advanced-search/work-orders-advanced-search-sheet";
 import { WorkOrdersAdvancedFiltersBanner } from "@/app/(protected)/workorders/_components/list/work-orders-advanced-filters-banner";
 import { WorkOrdersFilterBar } from "@/app/(protected)/workorders/_components/list/filter-bar/work-orders-filter-bar";
 import { WorkOrdersListHeader } from "@/app/(protected)/workorders/_components/list/work-orders-list-header";
-import { WorkOrdersListOverlays } from "@/app/(protected)/workorders/_components/list/work-orders-list-overlays";
+import { WorkOrderCancelDialog } from "@/app/(protected)/workorders/_components/list/work-order-cancel-dialog";
+import { WorkOrdersListWizard } from "@/app/(protected)/workorders/_components/list/work-orders-list-wizard";
 import { WoTable } from "@/app/(protected)/workorders/_components/list/table/wo-table";
-import { useWorkOrdersListFilters } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-filters";
+import { useWorkOrdersListPage } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-page";
-import { useWorkOrdersTableData } from "@/app/(protected)/workorders/_hooks/use-work-orders-table-data";
-import { useDropdownOptionsByCategory } from "@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category";
-import {
-  useWorkOrderLocations,
-  useWorkOrderVendors,
-} from "@/domain/work-orders/use-cases/use-work-order-detail";
-import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
-import type { CompDocData } from "@/domain/work-orders/types/completion-doc";
-import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
-import { useWorkOrderTableMutations } from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
-import { hasCompletionDocService } from "@/domain/work-orders/utils/completion-doc-service-gate";
 import { useAuthContext } from "@/providers/auth-context";
 
-function resolveActiveRow(
-  selected: WorkOrderTableRow | null,
-  rows: WorkOrderTableRow[],
-): WorkOrderTableRow | null {
-  if (!selected) return null;
-  return rows.find((row) => row.id === selected.id) ?? selected;
-}
-
 export default function WorkOrdersListPage() {
-  const navigate = useNavigate();
   const { user } = useAuthContext();
-  const [wizardOpen, setWizardOpen] = useState(false);
+  const page = useWorkOrdersListPage();
-  const [docRow, setDocRow] = useState<WorkOrderTableRow | null>(null);
+  const { filters, tableData, activeDocRow } = page;
-  const [mediaRow, setMediaRow] = useState<WorkOrderTableRow | null>(null);
+
-  const [completionDocs, setCompletionDocs] = useState<Record<string, CompDocData>>({});
-  const filters = useWorkOrdersListFilters();
-  const tableData = useWorkOrdersTableData(filters);
-  const { patchField, patchFieldAsync } = useWorkOrderTableMutations({
-    onPatch: tableData.patchRow,
-    clearPatch: tableData.clearRowPatch,
-    getRow: (id) => tableData.rows.find((row) => String(row.id) === String(id)),
-  });
-  const { data: users = [], isLoading: usersLoading } = useWorkOrderUsers();
-  const { data: locations = [] } = useWorkOrderLocations();
-  const { data: vendors = [] } = useWorkOrderVendors();
-  const { data: problemOptions = [] } = useDropdownOptionsByCategory("Problem");
-  const pmTypes = useMemo(
-    () => problemOptions.map((option) => option.value).filter(Boolean),
-    [problemOptions],
-  );
-  const vendorTechs = useMemo(
-    () => [...new Set(vendors.map((vendor) => vendor.companyName).filter(Boolean))],
-    [vendors],
-  );
-  const activeDocRow = useMemo(
-    () => resolveActiveRow(docRow, tableData.rows),
-    [docRow, tableData.rows],
-  );
-  const activeMediaRow = useMemo(
-    () => resolveActiveRow(mediaRow, tableData.rows),
-    [mediaRow, tableData.rows],
-  );
   return (
     <Box className="flex h-full flex-col overflow-hidden p-2.5">
       <PageHeader
@@ -75,7 +30,7 @@ export default function WorkOrdersListPage() {
             search={filters.search}
             onSearchChange={filters.handleSearchChange}
             onOpenAdvancedFilters={() => filters.setAdvOpen(true)}
-            onNewWorkOrder={() => setWizardOpen(true)}
+            onNewWorkOrder={() => page.setWizardOpen(true)}
             activeFilterCount={filters.activeFilterCount}
             isFetching={tableData.isFetching && !tableData.isLoading}
           />
@@ -89,8 +44,8 @@ export default function WorkOrdersListPage() {
         onDispatcherChange={filters.setDispatcherIds}
         typeFilter={filters.typeFilter}
         onTypeChange={filters.setTypeFilter}
-        users={users}
+        users={page.users}
-        usersLoading={usersLoading}
+        usersLoading={page.usersLoading}
         currentUserId={user?.id}
         filteredCount={tableData.totalCount}
         scopeTotalCount={tableData.scopeTotalCount}
@@ -100,8 +55,8 @@ export default function WorkOrdersListPage() {
         <WorkOrdersAdvancedFiltersBanner
           applied={filters.advApplied}
           totalCount={tableData.totalCount}
-          sites={locations}
+          sites={page.locations}
-          users={users}
+          users={page.users}
           onClearChip={filters.clearAdvancedFilterChip}
           onClearAll={filters.clearAdvancedFilters}
         />
@@ -122,58 +77,88 @@ export default function WorkOrdersListPage() {
 
       <WoTable
         tableData={tableData}
-        users={users}
+        users={page.users}
-        sites={locations}
+        sites={page.locations}
-        vendors={vendors}
+        vendors={page.vendors}
-        pmTypes={pmTypes}
+        pmTypes={page.pmTypes}
         weekMonday={filters.weekMonday}
         onWeekChange={filters.setWeekMonday}
-        onOpenSlideOver={(row, edit) => {
+        onOpenSlideOver={page.handleOpenSlideOver}
-          tableData.setSelectedId(row.id);
+        onOpenCompDoc={page.setDocRow}
-          navigate(edit ? `/workorders/edit/${row.id}` : `/workorders/${row.id}`);
+        onOpenMedia={page.setMediaRow}
-        }}
-        onOpenCompDoc={(row) => {
-          if (!hasCompletionDocService(row.pm)) return;
-          setDocRow(row);
-        }}
-        onOpenMedia={setMediaRow}
         onClearSearch={() => filters.handleSearchChange("")}
         onOpenAdvancedFilters={() => filters.setAdvOpen(true)}
-        onPatch={patchField}
+        onPatch={page.patchField}
       />
 
-      <WorkOrdersListOverlays
+      <WorkOrdersListWizard
-        wizardOpen={wizardOpen}
+        open={page.wizardOpen}
-        onWizardOpenChange={setWizardOpen}
+        onOpenChange={page.setWizardOpen}
-        users={users}
+        users={page.users}
-        sites={locations}
+        rows={tableData.rows}
-        pmTypes={pmTypes}
+        onViewExisting={(row) => page.handleOpenSlideOver(row, false)}
-        vendorTechs={vendorTechs}
-        advOpen={filters.advOpen}
-        onAdvOpenChange={filters.setAdvOpen}
-        advInitial={filters.advInitial}
-        onApplyAdvanced={filters.applyAdvancedFilters}
-        onClearAdvanced={filters.clearAdvancedFilters}
-        activeDocRow={activeDocRow}
-        onDocOpenChange={(open) => {
-          if (!open) setDocRow(null);
-        }}
-        completionDocs={completionDocs}
-        onSaveCompDoc={async (data, status) => {
-          if (!activeDocRow) return;
-          // Persist board docStatus first so local generatedAt/notes never outrun the server.
-          await patchFieldAsync(activeDocRow.id, { docStatus: status });
-          setCompletionDocs((prev) => ({ ...prev, [String(activeDocRow.id)]: data }));
-        }}
-        onDateCompletedChange={async (date) => {
-          if (!activeDocRow) return;
-          await patchFieldAsync(activeDocRow.id, { completedDate: date });
-        }}
-        activeMediaRow={activeMediaRow}
-        onMediaOpenChange={(open) => {
-          if (!open) setMediaRow(null);
-        }}
       />
+
+      <WorkOrdersAdvancedSearchSheet
+        open={filters.advOpen}
+        onOpenChange={filters.setAdvOpen}
+        initial={filters.advInitial}
+        onApply={filters.applyAdvancedFilters}
+        onClearAll={filters.clearAdvancedFilters}
+        sites={page.locations}
+        users={page.users}
+        pmTypes={page.pmTypes}
+        vendorTechs={page.vendorTechs}
+      />
+
+      <WorkOrderSlideOver
+        row={page.activeSlideOverRow}
+        editMode={page.slideOverEdit}
+        users={page.users}
+        sites={page.locations}
+        vendors={page.vendors}
+        pmTypes={page.pmTypes}
+        allOrders={tableData.rows}
+        onSave={(id, patch, options) => page.patchField(id, patch, options)}
+        onOpenCompletionDoc={page.setDocRow}
+        onCancelWO={page.setConfirmCancel}
+        onDuplicateFound={(existing) => page.handleOpenSlideOver(existing, false)}
+        saving={page.isPatchPending}
+        onClose={page.handleCloseSlideOver}
+      />
+
+      <WorkOrderCancelDialog
+        row={page.confirmCancel}
+        isPending={page.isPatchPending}
+        onDialogClose={page.cancelDialogClose}
+        onKeepWO={() => page.setConfirmCancel(null)}
+        onConfirm={page.handleConfirmCancel}
+      />
+
+      {page.activeMediaRow != null && (
+        <MediaUploadModal
+          row={page.activeMediaRow}
+          open={Boolean(page.activeMediaRow)}
+          onOpenChange={(open) => {
+            if (!open) page.setMediaRow(null);
+          }}
+        />
+      )}
+
+      {activeDocRow != null && (
+        <CompDocDialog
+          row={activeDocRow}
+          open={Boolean(activeDocRow)}
+          onOpenChange={(open) => {
+            if (!open) page.setDocRow(null);
+          }}
+          data={page.completionDocs[String(activeDocRow.id)]}
+          onSave={(data, status) => page.saveCompletionDoc(activeDocRow, data, status)}
+          onDateCompletedChange={async (date) => {
+            await page.patchFieldAsync(activeDocRow.id, { completedDate: date });
+          }}
+        />
+      )}
     </Box>
   );
 }

src/domain/work-orders/api/work-orders-api.ts

@@ -191,6 +191,48 @@ export const workOrdersApi = {
     };
   },
 
+  findByWoNumber: async (woNumber: string): Promise<WorkOrderTableRow | undefined> => {
+    const normalized = woNumber.trim();
+    // Search every non-empty WO# — backend advanced search accepts 1-character queries, and
+    // wizard/create allow single-digit numbers (SH-189 must not bypass remote uniqueness).
+    if (!normalized) {
+      return undefined;
+    }
+    // Safety cap — if hit before exhausting results, fail closed (do not treat as unique).
+    const safetyMaxPages = 50;
+
+    // `board/search` is fuzzy and paginated (0-based); exhaust pages for an exact WO#.
+    const pageSize = 100;
+    let page = 0;
+    let scanned = 0;
+    let totalCount = Number.POSITIVE_INFINITY;
+
+    while (scanned < totalCount) {
+      if (page >= safetyMaxPages) {
+        throw new Error(
+          "Unable to verify the work order number: search result set exceeded the safety page limit.",
+        );
+      }
+      const result = await workOrdersApi.searchBoard({
+        search: normalized,
+        page,
+        pageSize,
+      });
+      const exact = result.items.find((row) => row.woNumber === normalized);
+      if (exact) {
+        return exact;
+      }
+      scanned += result.items.length;
+      totalCount = result.totalCount;
+      if (result.items.length === 0) {
+        break;
+      }
+      page += 1;
+    }
+
+    return undefined;
+  },
+
   getListByLocation: async (
     locationId: string | number,
     search = "",

src/domain/work-orders/mappers/assign-wizard-schedule-fields.ts

@@ -14,11 +14,11 @@ export function assignWizardScheduleFields(
   const isRange = draft.schedMode === "range";
 
   if (!isRange && draft.scheduleWeekOnly) {
-    payload.scheduleWeekOnly = true;
-
     const week = draft.targetWeek?.trim() || (draft.scheduledOn ? mondayOf(draft.scheduledOn) : "");
 
+    // Only emit week-mode flags when a concrete week exists (SH-109: undated create).
     if (week) {
+      payload.scheduleWeekOnly = true;
       payload.targetWeek = week;
     }
   } else if (!isRange && draft.scheduledOn) {

src/domain/work-orders/mappers/work-order-board-detail-mapper.ts

@@ -259,10 +259,7 @@ export function boardMediaItemsToMediaFiles(items: WorkOrderBoardMediaItem[]): M
     fileType: classifyFileName(item.fileName, item.url),
     url: item.url,
     category: boardCategoryToMediaCategory(item.category),
-    purpose:
+    purpose: item.category,
-      item.category === "Before" || item.category === "After" || item.category === "Extra"
-        ? item.category
-        : null,
     isLegacy: item.isLegacy || Number(item.id) <= 0,
     uploadStatus: "done" as const,
   }));

src/domain/work-orders/types/work-order-board.ts

@@ -147,6 +147,8 @@ export interface WorkOrderBoardRowApi {
   flagColor?: string | null;
   dueDate?: string | null;
   scheduledDate?: string | null;
+  /** ISO date when work was completed; optional on list rows until BE confirms. */
+  completedDate?: string | null;
   targetWeek?: string | null;
   scheduleWeekOnly?: boolean | null;
   dayGroup?: string | null;

src/domain/work-orders/types/work-order-media.ts

@@ -9,8 +9,8 @@ export interface MediaFile {
   fileType: FileCategory;
   url: string;
   category: MediaCategory;
-  /** Board purpose label (Before/After/Extra). Null/undefined = needs categorization. */
+  /** Board purpose label (Before/After/Extra/Completion). Null/undefined = needs categorization. */
-  purpose?: "Before" | "After" | "Extra" | null;
+  purpose?: "Before" | "After" | "Extra" | "Completion" | null;
   /** True when media is a legacy Before/After/Completion column (not deletable). */
   isLegacy?: boolean;
   /** 0–100 while uploading; undefined when idle/complete. */

src/domain/work-orders/use-cases/use-work-order-table-mutations.ts

@@ -146,8 +146,21 @@ export function useWorkOrderTableMutations(
     },
   });
 
-  const patchField = (id: string | number, patch: WorkOrderTablePatch) => {
+  const patchField = (
-    patchMutation.mutate({ id, patch });
+    id: string | number,
+    patch: WorkOrderTablePatch,
+    options?: {
+      onSuccess?: () => void;
+      onError?: (error: Error) => void;
+    },
+  ) => {
+    patchMutation.mutate(
+      { id, patch },
+      {
+        onSuccess: () => options?.onSuccess?.(),
+        onError: (error) => options?.onError?.(error),
+      },
+    );
   };
 
   const patchFieldAsync = (id: string | number, patch: WorkOrderTablePatch) =>

src/domain/work-orders/utils/find-duplicate-wo-number-row.ts

@@ -0,0 +1,16 @@
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+export function findDuplicateWoNumberRow(
+  woNumber: string,
+  rows: WorkOrderTableRow[],
+  excludeId?: string | number,
+): WorkOrderTableRow | undefined {
+  const normalized = woNumber.trim();
+  if (normalized === "") {
+    return undefined;
+  }
+
+  return rows.find(
+    (row) => row.woNumber === normalized && String(row.id) !== String(excludeId ?? ""),
+  );
+}

src/domain/work-orders/utils/get-inline-create-missing.ts

@@ -0,0 +1,62 @@
+/** Required fields for board inline create (Schedule On is optional — SH-109). */
+export type InlineCreateReqField = "site" | "woNumber" | "pocName" | "pocPhone";
+
+export const INLINE_CREATE_REQ_LABELS: Record<InlineCreateReqField, string> = {
+  site: "Site",
+  woNumber: "WO #",
+  pocName: "POC name",
+  pocPhone: "POC phone",
+};
+
+export type InlineCreateDraftFields = {
+  site?: string;
+  locationId?: string | number;
+  woNumber?: string;
+  pocName?: string;
+  pocPhone?: string;
+};
+
+export function getInlineCreateMissing(d: InlineCreateDraftFields): InlineCreateReqField[] {
+  const miss: InlineCreateReqField[] = [];
+  const hasSite = Boolean(d.site?.trim()) || Boolean(String(d.locationId ?? "").trim());
+  if (!hasSite) {
+    miss.push("site");
+  }
+  if (!d.woNumber?.trim()) {
+    miss.push("woNumber");
+  }
+  if (!d.pocName?.trim()) {
+    miss.push("pocName");
+  }
+  if (!d.pocPhone?.trim()) {
+    miss.push("pocPhone");
+  }
+  return miss;
+}
+
+/** Tooltip for Save: "Missing: Site, WO #" or "Save" when ready. */
+export function inlineCreateSaveHint(miss: InlineCreateReqField[]): string {
+  if (miss.length === 0) {
+    return "Save";
+  }
+  return `Missing: ${miss.map((m) => INLINE_CREATE_REQ_LABELS[m]).join(", ")}`;
+}
+
+export function inlineCreateSiteError(miss: InlineCreateReqField[]): string {
+  if (miss.includes("site")) {
+    return "Site is required";
+  }
+  return "Contact name and phone are required";
+}
+
+/** Concrete calendar day/range — week-only does not count (design hasScheduleDate). */
+export function draftHasScheduleDate(d: {
+  scheduledOn?: string;
+  scheduleWeekOnly?: boolean;
+  schedMode?: string;
+}): boolean {
+  if (d.scheduleWeekOnly || d.schedMode === "week") {
+    return false;
+  }
+  return Boolean(d.scheduledOn?.trim());
+}

src/domain/work-orders/utils/run-sequential-uploads.ts

@@ -0,0 +1,24 @@
+/**
+ * Runs file uploads one-by-one while holding an aggregate pending flag true
+ * until every file has settled (success or failure). Avoids relying on a single
+ * TanStack Mutation `isPending`, which can flip false when a later small file
+ * finishes before an earlier large one.
+ */
+export async function runSequentialUploads<TFile>(
+  files: readonly TFile[],
+  upload: (file: TFile) => Promise<unknown>,
+  setPending: (pending: boolean) => void,
+): Promise<void> {
+  if (files.length === 0) {
+    return;
+  }
+
+  setPending(true);
+  try {
+    for (const file of files) {
+      await upload(file);
+    }
+  } finally {
+    setPending(false);
+  }
+}