feat(ui): shared record-scoped useDocumentDraft hook; fix half-wired invoice draft banner; dedupe draft keys

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/admin/pages/InvoiceDetail.tsx

@@ -45,6 +45,8 @@ import {
 } from "@dnd-kit/modifiers";
 import { CSS } from "@dnd-kit/utilities";
 import apiFetch from "../utils/api";
+import useDocumentDraft from "../hooks/useDocumentDraft";
+import { DRAFT_KEYS } from "../lib/draftKeys";
 import { companySettingsOptions } from "../lib/queries/settings";
 import { invoiceDetailOptions } from "../lib/queries/invoices";
 import { offerCustomersOptions, type Customer } from "../lib/queries/offers";
@@ -584,15 +586,15 @@ export default function InvoiceDetail() {
     label: `${v}%`,
   }));
 
-  const DRAFT_KEY = "boha_invoice_draft";
-
-  const clearDraft = useCallback(() => {
-    try {
-      localStorage.removeItem(DRAFT_KEY);
-    } catch {
-      /* ignore */
-    }
-  }, []);
+  // Autosave the create-form draft (record-scoped to recordId: null) so the
+  // Invoices list can surface a "you have a draft" banner. Edit mode never
+  // autosaves (enabled: !isEdit), matching the Offers behavior.
+  const draftData = useMemo(() => ({ form, items }), [form, items]);
+  const { clear: clearDraft } = useDocumentDraft(DRAFT_KEYS.invoice, {
+    recordId: null,
+    enabled: !isEdit,
+    data: draftData,
+  });
 
   // ─── TanStack Query ───