@withpotter/components 0.13.0-next.101

package/dist/invoice-editor/invoice-editor-page.js

@@ -0,0 +1,207 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { useRouter, useParams } from "next/navigation";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { invoicesApi } from "@withpotter/lib/api/invoices";
+import { inquiriesApi } from "@withpotter/lib/api/inquiries";
+import {
+  useInvoiceFormState
+} from "@withpotter/hooks/use-invoice-form-state";
+import { useEditorDirtyTracking } from "@withpotter/components/editor-shared";
+import { useDraftForm } from "@withpotter/hooks/use-draft-form";
+import { draftKey } from "@withpotter/lib/form-draft";
+import { DetailPageSkeleton } from "@withpotter/ui-kit/page-skeletons";
+import { AlertTriangle, ArrowLeft } from "lucide-react";
+import { useDetailHeader } from "@withpotter/hooks/use-detail-header";
+import { InvoiceEditor } from "./invoice-editor";
+function InvoiceEditorPage({
+  mode,
+  prefill,
+  enquiryId,
+  related
+}) {
+  const router = useRouter();
+  const params = useParams();
+  const { tenant } = useAuth();
+  const invoiceId = mode === "edit" ? params?.invoiceId : void 0;
+  const [invoice, setInvoice] = useState(null);
+  const [loadingInvoice, setLoadingInvoice] = useState(mode === "edit");
+  const [loadError, setLoadError] = useState(null);
+  useEffect(() => {
+    if (mode !== "edit" || !tenant?.slug || !invoiceId) return;
+    let cancelled = false;
+    const fetchData = async () => {
+      setLoadingInvoice(true);
+      setLoadError(null);
+      try {
+        const result = await invoicesApi.get(tenant.slug, invoiceId);
+        if (!cancelled) {
+          if (["paid", "cancelled", "void"].includes(result.status)) {
+            router.replace(`/dashboard/invoices/${invoiceId}`);
+            return;
+          }
+          setInvoice(result);
+        }
+      } catch (e) {
+        if (!cancelled) {
+          setLoadError(
+            e instanceof Error ? e.message : "Failed to load invoice"
+          );
+        }
+      } finally {
+        if (!cancelled) setLoadingInvoice(false);
+      }
+    };
+    fetchData();
+    return () => {
+      cancelled = true;
+    };
+  }, [mode, tenant?.slug, invoiceId, router]);
+  const state = useInvoiceFormState({
+    invoice: mode === "edit" ? invoice : null,
+    prefill
+  });
+  const discardDraft = useDraftForm({
+    key: mode === "create" && !prefill ? draftKey(tenant?.slug, "invoice") : null,
+    label: "invoice",
+    value: {
+      customerEmail: state.customerEmail,
+      customerName: state.customerName,
+      customerPhone: state.customerPhone,
+      customerCompany: state.customerCompany,
+      customerAddressLine: state.customerAddressLine,
+      poNumber: state.poNumber,
+      clientTin: state.clientTin,
+      recurrence: state.recurrence,
+      dueDate: state.dueDate,
+      issueDate: state.issueDate,
+      note: state.note,
+      terms: state.terms,
+      internalNote: state.internalNote,
+      items: state.items,
+      taxRateBps: state.taxRateBps
+    },
+    restore: (d) => {
+      state.setCustomerEmail(d.customerEmail);
+      state.setCustomerName(d.customerName);
+      state.setCustomerPhone(d.customerPhone);
+      state.setCustomerCompany(d.customerCompany);
+      state.setCustomerAddressLine(d.customerAddressLine);
+      state.setPoNumber(d.poNumber);
+      state.setClientTin(d.clientTin);
+      state.setRecurrence(d.recurrence);
+      state.setDueDate(d.dueDate);
+      state.setIssueDate(d.issueDate);
+      state.setNote(d.note);
+      state.setTerms(d.terms);
+      state.setInternalNote(d.internalNote);
+      state.setItems(d.items);
+      state.setTaxRateBps(d.taxRateBps);
+    }
+  });
+  const { isDirty, setIsDirty } = useEditorDirtyTracking([
+    state.customerEmail,
+    state.customerName,
+    state.customerPhone,
+    state.dueDate,
+    state.issueDate,
+    state.note,
+    state.terms,
+    state.internalNote,
+    JSON.stringify(state.items)
+  ]);
+  const handleSave = useCallback(async () => {
+    if (!tenant?.slug) return;
+    const validationError = state.validate();
+    if (validationError) {
+      state.setError(validationError);
+      return;
+    }
+    state.setSaving(true);
+    state.setError(null);
+    try {
+      if (mode === "edit" && invoiceId) {
+        const payload = state.buildUpdatePayload();
+        await invoicesApi.update(tenant.slug, invoiceId, payload);
+        setIsDirty(false);
+        router.push(`/dashboard/invoices/${invoiceId}`);
+      } else {
+        const payload = {
+          ...state.buildCreatePayload(),
+          // `relatedType`/`relatedId` have been on CreateInvoiceDto all along.
+          ...related ? { relatedType: related.type, relatedId: related.id } : enquiryId ? { relatedType: "inquiry", relatedId: enquiryId } : {}
+        };
+        const result = await invoicesApi.create(tenant.slug, payload);
+        if (enquiryId) {
+          await inquiriesApi.convert(tenant.slug, enquiryId, {
+            convertedTo: "invoice",
+            referenceId: result.id,
+            value: state.totalAmount
+          }).catch(() => {
+          });
+        }
+        setIsDirty(false);
+        discardDraft();
+        router.replace(`/dashboard/invoices/${result.id}`);
+      }
+    } catch (err) {
+      state.setError(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      state.setSaving(false);
+    }
+  }, [
+    tenant,
+    state,
+    mode,
+    invoiceId,
+    router,
+    setIsDirty,
+    enquiryId,
+    related,
+    discardDraft
+  ]);
+  const editorTitle = mode === "edit" ? invoice?.invoiceNumber ? `Edit ${invoice.invoiceNumber}` : "Edit Invoice" : "New Invoice";
+  const backUrl = mode === "edit" && invoiceId ? `/dashboard/invoices/${invoiceId}` : "/dashboard/invoices";
+  useDetailHeader({
+    title: editorTitle,
+    onBack: () => router.push(backUrl)
+  });
+  if (mode === "edit" && loadingInvoice) {
+    return /* @__PURE__ */ jsx(DetailPageSkeleton, { maxWidth: "max-w-5xl" });
+  }
+  if (mode === "edit" && (loadError || !invoice)) {
+    return /* @__PURE__ */ jsxs("div", { className: "max-w-5xl mx-auto px-6 py-8", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => router.push("/dashboard/invoices"),
+          className: "flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] mb-6 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" }),
+            "Back to invoices"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "bg-[var(--error-bg)] border border-[var(--error)]/20 rounded-md p-6 text-center", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "size-8 text-[var(--error)] mx-auto mb-2" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[var(--error)] font-medium", children: loadError || "Invoice not found" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    InvoiceEditor,
+    {
+      state,
+      isDirty,
+      onSave: handleSave,
+      onBack: () => router.push(backUrl),
+      onNavigate: (href) => router.push(href)
+    }
+  );
+}
+export {
+  InvoiceEditorPage
+};
+//# sourceMappingURL=invoice-editor-page.js.map

package/dist/invoice-editor/invoice-editor-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/invoice-editor/invoice-editor-page.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { useRouter, useParams } from 'next/navigation';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { invoicesApi } from '@withpotter/lib/api/invoices';\nimport { inquiriesApi } from '@withpotter/lib/api/inquiries';\nimport type { Invoice } from '@withpotter/lib/api/types';\nimport {\n  useInvoiceFormState,\n  type InvoicePrefill,\n} from '@withpotter/hooks/use-invoice-form-state';\nimport { useEditorDirtyTracking } from '@withpotter/components/editor-shared';\nimport { useDraftForm } from '@withpotter/hooks/use-draft-form';\nimport { draftKey } from '@withpotter/lib/form-draft';\nimport { DetailPageSkeleton } from '@withpotter/ui-kit/page-skeletons';\nimport { AlertTriangle, ArrowLeft } from 'lucide-react';\nimport { useDetailHeader } from '@withpotter/hooks/use-detail-header';\nimport { InvoiceEditor } from './invoice-editor';\n\ninterface InvoiceEditorPageProps {\n  mode: 'create' | 'edit';\n  /**\n   * Turning a quote into the bill for it.\n   *\n   * A quote and an invoice were the same document at two stages with no join\n   * at all: a merchant who quoted ₦800,000 in the Inbox retyped the customer\n   * and the number into a blank invoice, and nothing afterwards knew the two\n   * were related.\n   *\n   * Resolved by the route rather than here, so the form is seeded on its first\n   * render — see `invoices/new/page.tsx`. The invoice is opened rather than\n   * created outright: a quote is one number, an invoice needs line items, a due\n   * date and terms, and silently minting a one-line bill titled \"Quote\" would\n   * be a worse invoice than the merchant would have written.\n   */\n  prefill?: InvoicePrefill | null;\n  /** The enquiry `prefill` came from, marked won once the invoice exists. */\n  enquiryId?: string | null;\n  /** The existing record this invoice was raised from. */\n  related?: { type: string; id: string } | null;\n}\n\nexport function InvoiceEditorPage({\n  mode,\n  prefill,\n  enquiryId,\n  related,\n}: InvoiceEditorPageProps) {\n  const router = useRouter();\n  const params = useParams();\n  const { tenant } = useAuth();\n\n  const invoiceId = mode === 'edit' ? (params?.invoiceId as string) : undefined;\n\n  const [invoice, setInvoice] = useState<Invoice | null>(null);\n  const [loadingInvoice, setLoadingInvoice] = useState(mode === 'edit');\n  const [loadError, setLoadError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (mode !== 'edit' || !tenant?.slug || !invoiceId) return;\n    let cancelled = false;\n\n    const fetchData = async () => {\n      setLoadingInvoice(true);\n      setLoadError(null);\n      try {\n        const result = await invoicesApi.get(tenant.slug, invoiceId);\n        if (!cancelled) {\n          // Paid and closed invoices are immutable; unpaid invoices can be\n          // corrected before the merchant sends them again.\n          if (['paid', 'cancelled', 'void'].includes(result.status)) {\n            router.replace(`/dashboard/invoices/${invoiceId}`);\n            return;\n          }\n          setInvoice(result);\n        }\n      } catch (e: unknown) {\n        if (!cancelled) {\n          setLoadError(\n            e instanceof Error ? e.message : 'Failed to load invoice',\n          );\n        }\n      } finally {\n        if (!cancelled) setLoadingInvoice(false);\n      }\n    };\n    fetchData();\n    return () => {\n      cancelled = true;\n    };\n  }, [mode, tenant?.slug, invoiceId, router]);\n\n  const state = useInvoiceFormState({\n    invoice: mode === 'edit' ? invoice : null,\n    prefill,\n  });\n\n  // A new invoice survives an interruption. Not when it was opened from a\n  // won enquiry: that one arrives pre-filled and has its own source of truth.\n  const discardDraft = useDraftForm({\n    key:\n      mode === 'create' && !prefill ? draftKey(tenant?.slug, 'invoice') : null,\n    label: 'invoice',\n    value: {\n      customerEmail: state.customerEmail,\n      customerName: state.customerName,\n      customerPhone: state.customerPhone,\n      customerCompany: state.customerCompany,\n      customerAddressLine: state.customerAddressLine,\n      poNumber: state.poNumber,\n      clientTin: state.clientTin,\n      recurrence: state.recurrence,\n      dueDate: state.dueDate,\n      issueDate: state.issueDate,\n      note: state.note,\n      terms: state.terms,\n      internalNote: state.internalNote,\n      items: state.items,\n      taxRateBps: state.taxRateBps,\n    },\n    restore: (d) => {\n      state.setCustomerEmail(d.customerEmail);\n      state.setCustomerName(d.customerName);\n      state.setCustomerPhone(d.customerPhone);\n      state.setCustomerCompany(d.customerCompany);\n      state.setCustomerAddressLine(d.customerAddressLine);\n      state.setPoNumber(d.poNumber);\n      state.setClientTin(d.clientTin);\n      state.setRecurrence(d.recurrence);\n      state.setDueDate(d.dueDate);\n      state.setIssueDate(d.issueDate);\n      state.setNote(d.note);\n      state.setTerms(d.terms);\n      state.setInternalNote(d.internalNote);\n      state.setItems(d.items);\n      state.setTaxRateBps(d.taxRateBps);\n    },\n  });\n\n  const { isDirty, setIsDirty } = useEditorDirtyTracking([\n    state.customerEmail,\n    state.customerName,\n    state.customerPhone,\n    state.dueDate,\n    state.issueDate,\n    state.note,\n    state.terms,\n    state.internalNote,\n    JSON.stringify(state.items),\n  ]);\n\n  const handleSave = useCallback(async () => {\n    if (!tenant?.slug) return;\n\n    const validationError = state.validate();\n    if (validationError) {\n      state.setError(validationError);\n      return;\n    }\n\n    state.setSaving(true);\n    state.setError(null);\n\n    try {\n      if (mode === 'edit' && invoiceId) {\n        const payload = state.buildUpdatePayload();\n        await invoicesApi.update(tenant.slug, invoiceId, payload);\n        setIsDirty(false);\n        router.push(`/dashboard/invoices/${invoiceId}`);\n      } else {\n        const payload = {\n          ...state.buildCreatePayload(),\n          // `relatedType`/`relatedId` have been on CreateInvoiceDto all along.\n          ...(related\n            ? { relatedType: related.type, relatedId: related.id }\n            : enquiryId\n              ? { relatedType: 'inquiry', relatedId: enquiryId }\n              : {}),\n        };\n        const result = await invoicesApi.create(tenant.slug, payload);\n\n        /**\n         * The enquiry is won the moment the bill for it exists.\n         *\n         * Recorded with the invoice's id and the invoice's total, so the lead\n         * can be traced to real money rather than to the number somebody typed\n         * into a quote box weeks earlier. A failure here must not lose the\n         * invoice, which is the thing the merchant was doing.\n         */\n        if (enquiryId) {\n          await inquiriesApi\n            .convert(tenant.slug, enquiryId, {\n              convertedTo: 'invoice',\n              referenceId: result.id,\n              value: state.totalAmount,\n            })\n            .catch(() => {});\n        }\n\n        setIsDirty(false);\n        discardDraft();\n        router.replace(`/dashboard/invoices/${result.id}`);\n      }\n    } catch (err) {\n      state.setError(err instanceof Error ? err.message : 'Failed to save');\n    } finally {\n      state.setSaving(false);\n    }\n  }, [\n    tenant,\n    state,\n    mode,\n    invoiceId,\n    router,\n    setIsDirty,\n    enquiryId,\n    related,\n    discardDraft,\n  ]);\n\n  const editorTitle =\n    mode === 'edit'\n      ? invoice?.invoiceNumber\n        ? `Edit ${invoice.invoiceNumber}`\n        : 'Edit Invoice'\n      : 'New Invoice';\n  const backUrl =\n    mode === 'edit' && invoiceId\n      ? `/dashboard/invoices/${invoiceId}`\n      : '/dashboard/invoices';\n\n  useDetailHeader({\n    title: editorTitle,\n    onBack: () => router.push(backUrl),\n  });\n\n  if (mode === 'edit' && loadingInvoice) {\n    return <DetailPageSkeleton maxWidth=\"max-w-5xl\" />;\n  }\n\n  if (mode === 'edit' && (loadError || !invoice)) {\n    return (\n      <div className=\"max-w-5xl mx-auto px-6 py-8\">\n        <button\n          type=\"button\"\n          onClick={() => router.push('/dashboard/invoices')}\n          className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] mb-6 transition-colors\"\n        >\n          <ArrowLeft className=\"size-4\" />\n          Back to invoices\n        </button>\n        <div className=\"bg-[var(--error-bg)] border border-[var(--error)]/20 rounded-md p-6 text-center\">\n          <AlertTriangle className=\"size-8 text-[var(--error)] mx-auto mb-2\" />\n          <p className=\"text-[var(--error)] font-medium\">\n            {loadError || 'Invoice not found'}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <InvoiceEditor\n      state={state}\n      isDirty={isDirty}\n      onSave={handleSave}\n      onBack={() => router.push(backUrl)}\n      onNavigate={(href) => router.push(href)}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/invoice-editor/invoice-editor.d.ts

@@ -0,0 +1,23 @@
+import type { useInvoiceFormState } from '@withpotter/hooks/use-invoice-form-state';
+type InvoiceFormState = ReturnType<typeof useInvoiceFormState>;
+interface InvoiceEditorProps {
+    state: InvoiceFormState;
+    isDirty: boolean;
+    onSave: () => void;
+    /** Where Discard goes: the list on create, the record on edit. */
+    onBack: () => void;
+    /** Guarded navigation for the breadcrumb links, as on the customer editor. */
+    onNavigate?: (href: string) => void;
+}
+/**
+ * Writing an invoice, on the same frame as every other editor.
+ *
+ * This carried a bespoke sticky bar of its own — as did product, plan and
+ * collection — while the customer editor had already moved to `DetailPage`
+ * ("no more bespoke editor frame"). Four editors reinventing a header that
+ * exists is how the app grew four slightly different ways to leave a page.
+ * Same breadcrumb header, same column, same rhythm, same discard-then-save
+ * action pair. Nothing here is invoice-specific except what is being edited.
+ */
+export declare function InvoiceEditor({ state, isDirty, onSave, onBack, onNavigate, }: InvoiceEditorProps): import("react").JSX.Element;
+export {};

package/dist/invoice-editor/invoice-editor.js

@@ -0,0 +1,75 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useIsMobile } from "@withpotter/hooks/use-mobile";
+import { FloatingSaveBar } from "@withpotter/components/editor-shared";
+import { Save, Receipt } from "lucide-react";
+import { DetailPage } from "@withpotter/ui-kit/detail-page";
+import { MobileInvoiceEditor } from "./mobile-invoice-editor";
+import { InvoiceEditorContent } from "./invoice-editor-content";
+import { Button } from "@withpotter/ui-kit/button";
+import { useErrorToast } from "@withpotter/ui-kit";
+function InvoiceEditor({
+  state,
+  isDirty,
+  onSave,
+  onBack,
+  onNavigate
+}) {
+  const isMobile = useIsMobile();
+  useErrorToast(state.error, () => state.setError(null));
+  const actions = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onBack, children: "Discard" }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        onClick: onSave,
+        loading: state.saving,
+        icon: /* @__PURE__ */ jsx(Save, {}),
+        children: state.isEditing ? "Save changes" : "Create invoice"
+      }
+    )
+  ] });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(MobileInvoiceEditor, { state }),
+      /* @__PURE__ */ jsx(
+        FloatingSaveBar,
+        {
+          isDirty,
+          saving: state.saving,
+          isEditing: state.isEditing,
+          entityName: "Invoice",
+          onSave
+        }
+      )
+    ] });
+  }
+  return (
+    // Extra side inset over the shell's default, matching Payments: this screen
+    // runs edge to edge across a form and a document, and needs air at both ends.
+    /* @__PURE__ */ jsx("div", { className: "lg:px-16 xl:px-24", children: /* @__PURE__ */ jsx(
+      DetailPage,
+      {
+        breadcrumbs: [
+          {
+            label: "Payments",
+            href: "/dashboard/invoices",
+            icon: /* @__PURE__ */ jsx(Receipt, {})
+          },
+          {
+            label: state.isEditing ? state.customerName || "Invoice" : "New invoice"
+          }
+        ],
+        onNavigate,
+        actions,
+        maxWidth: "max-w-[1400px]",
+        children: /* @__PURE__ */ jsx(InvoiceEditorContent, { state })
+      }
+    ) })
+  );
+}
+export {
+  InvoiceEditor
+};
+//# sourceMappingURL=invoice-editor.js.map

package/dist/invoice-editor/invoice-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/invoice-editor/invoice-editor.tsx"],"sourcesContent":["'use client';\n\nimport { useIsMobile } from '@withpotter/hooks/use-mobile';\nimport { FloatingSaveBar } from '@withpotter/components/editor-shared';\nimport { Save, Receipt } from 'lucide-react';\nimport { DetailPage } from '@withpotter/ui-kit/detail-page';\nimport { MobileInvoiceEditor } from './mobile-invoice-editor';\nimport { InvoiceEditorContent } from './invoice-editor-content';\nimport type { useInvoiceFormState } from '@withpotter/hooks/use-invoice-form-state';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { useErrorToast } from '@withpotter/ui-kit';\n\ntype InvoiceFormState = ReturnType<typeof useInvoiceFormState>;\n\ninterface InvoiceEditorProps {\n  state: InvoiceFormState;\n  isDirty: boolean;\n  onSave: () => void;\n  /** Where Discard goes: the list on create, the record on edit. */\n  onBack: () => void;\n  /** Guarded navigation for the breadcrumb links, as on the customer editor. */\n  onNavigate?: (href: string) => void;\n}\n\n/**\n * Writing an invoice, on the same frame as every other editor.\n *\n * This carried a bespoke sticky bar of its own — as did product, plan and\n * collection — while the customer editor had already moved to `DetailPage`\n * (\"no more bespoke editor frame\"). Four editors reinventing a header that\n * exists is how the app grew four slightly different ways to leave a page.\n * Same breadcrumb header, same column, same rhythm, same discard-then-save\n * action pair. Nothing here is invoice-specific except what is being edited.\n */\nexport function InvoiceEditor({\n  state,\n  isDirty,\n  onSave,\n  onBack,\n  onNavigate,\n}: InvoiceEditorProps) {\n  const isMobile = useIsMobile();\n  useErrorToast(state.error, () => state.setError(null));\n\n  const actions = (\n    <>\n      <Button variant=\"secondary\" onClick={onBack}>\n        Discard\n      </Button>\n      <Button\n        variant=\"primary\"\n        onClick={onSave}\n        loading={state.saving}\n        icon={<Save />}\n      >\n        {state.isEditing ? 'Save changes' : 'Create invoice'}\n      </Button>\n    </>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        <MobileInvoiceEditor state={state} />\n        <FloatingSaveBar\n          isDirty={isDirty}\n          saving={state.saving}\n          isEditing={state.isEditing}\n          entityName=\"Invoice\"\n          onSave={onSave}\n        />\n      </>\n    );\n  }\n\n  return (\n    // Extra side inset over the shell's default, matching Payments: this screen\n    // runs edge to edge across a form and a document, and needs air at both ends.\n    <div className=\"lg:px-16 xl:px-24\">\n      <DetailPage\n        breadcrumbs={[\n          {\n            label: 'Payments',\n            href: '/dashboard/invoices',\n            icon: <Receipt />,\n          },\n          {\n            label: state.isEditing\n              ? state.customerName || 'Invoice'\n              : 'New invoice',\n          },\n        ]}\n        onNavigate={onNavigate}\n        actions={actions}\n        // Wider than the usual editor column: the document sits beside the form\n        // here, and an invoice sheet cannot be squeezed into a third of a page.\n        maxWidth=\"max-w-[1400px]\"\n      >\n        <InvoiceEditorContent state={state} />\n      </DetailPage>\n    </div>\n  );\n}\n"],"mappings":";AA6CI,mBACE,KADF;AA3CJ,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAErC,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAwBvB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,WAAW,YAAY;AAC7B,gBAAc,MAAM,OAAO,MAAM,MAAM,SAAS,IAAI,CAAC;AAErD,QAAM,UACJ,iCACE;AAAA,wBAAC,UAAO,SAAQ,aAAY,SAAS,QAAQ,qBAE7C;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS,MAAM;AAAA,QACf,MAAM,oBAAC,QAAK;AAAA,QAEX,gBAAM,YAAY,iBAAiB;AAAA;AAAA,IACtC;AAAA,KACF;AAGF,MAAI,UAAU;AACZ,WACE,iCACE;AAAA,0BAAC,uBAAoB,OAAc;AAAA,MACnC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,QAAQ,MAAM;AAAA,UACd,WAAW,MAAM;AAAA,UACjB,YAAW;AAAA,UACX;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AAEA;AAAA;AAAA;AAAA,IAGE,oBAAC,SAAI,WAAU,qBACb;AAAA,MAAC;AAAA;AAAA,QACC,aAAa;AAAA,UACX;AAAA,YACE,OAAO;AAAA,YACP,MAAM;AAAA,YACN,MAAM,oBAAC,WAAQ;AAAA,UACjB;AAAA,UACA;AAAA,YACE,OAAO,MAAM,YACT,MAAM,gBAAgB,YACtB;AAAA,UACN;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QAGA,UAAS;AAAA,QAET,8BAAC,wBAAqB,OAAc;AAAA;AAAA,IACtC,GACF;AAAA;AAEJ;","names":[]}

package/dist/invoice-editor/invoice-preview.d.ts

@@ -0,0 +1,35 @@
+import type { useInvoiceFormState } from '@withpotter/hooks/use-invoice-form-state';
+import type { InvoiceBrand } from '@withpotter/lib/invoice-brand';
+type InvoiceFormState = ReturnType<typeof useInvoiceFormState>;
+/**
+ * The invoice, as the customer will receive it, while it is being written.
+ *
+ * The editor used to be a form and only a form: you filled boxes and found out
+ * what you had made after saving it. An invoice is a DOCUMENT — it carries your
+ * letterhead and goes to a client — so the thing being edited should be on
+ * screen while you edit it.
+ *
+ * `InvoiceDocument` is the same component the saved invoice and the print view
+ * render, so what you see here is the artefact, not an impression of it. This
+ * shapes the draft form state into the `Invoice` it will become; nothing is
+ * duplicated, and the preview cannot drift from the real document.
+ */
+export declare function InvoicePreview({ state, formatCurrency, invoiceNumber, brand, edit, }: {
+    state: InvoiceFormState;
+    formatCurrency: (amount: number, currency?: string) => string;
+    /** The real number when editing; a placeholder while drafting. */
+    invoiceNumber?: string;
+    /** Colours not yet saved, while they are being chosen. */
+    brand?: InvoiceBrand;
+    /**
+     * Pass the draft through and the sheet becomes writable in place.
+     *
+     * The branding dialog renders this same component WITHOUT it, because a
+     * sheet you are choosing a colour on should not invite you to retype the
+     * client's name at the same time.
+     */
+    edit?: {
+        state: InvoiceFormState;
+    };
+}): import("react").JSX.Element;
+export {};

package/dist/invoice-editor/invoice-preview.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { InvoiceDocument } from "@withpotter/pages-finance/dashboard/(finance)/invoices/[invoiceId]/_components/invoice-document";
+function InvoicePreview({
+  state,
+  formatCurrency,
+  invoiceNumber,
+  brand,
+  edit
+}) {
+  const items = state.items.filter((i) => i.title.trim() || i.unitPrice > 0).map((item, i) => ({
+    id: `draft-${i}`,
+    title: item.title.trim() || "Untitled item",
+    description: null,
+    quantity: item.quantity,
+    unitPrice: item.unitPrice,
+    discount: 0,
+    tax: 0,
+    total: item.quantity * item.unitPrice
+  }));
+  const draft = {
+    id: "draft",
+    invoiceNumber: invoiceNumber || "Draft",
+    status: "draft",
+    customerEmail: state.customerEmail,
+    customerName: state.customerName,
+    customerPhone: state.customerPhone,
+    customerAddress: null,
+    issueDate: state.issueDate || (/* @__PURE__ */ new Date()).toISOString(),
+    // A due date that has not been picked yet must stay EMPTY, not become the
+    // string 'Invalid Date'. The document is told to hide the row instead.
+    dueDate: state.dueDate || null,
+    items,
+    // Subtotal is the lines; total is the lines plus the tax printed under
+    // them. Passing `totalAmount` as both is how the sheet showed a total that
+    // did not equal what it was about to charge once VAT existed.
+    subtotal: state.totalAmount - state.taxAmount,
+    discountTotal: 0,
+    taxTotal: state.taxAmount,
+    total: state.totalAmount,
+    amountPaid: 0,
+    // The document reads `amountDue`, not `balanceDue`. Getting this wrong is
+    // how the preview printed ₦NaN on the sheet.
+    amountDue: state.totalAmount,
+    balanceDue: state.totalAmount,
+    currency: "NGN",
+    note: state.note,
+    terms: state.terms,
+    // Deliberately not passed through: it is the one field on this form the
+    // customer must never see.
+    internalNote: null,
+    paymentLink: null
+  };
+  return /* @__PURE__ */ jsx(
+    InvoiceDocument,
+    {
+      invoice: draft,
+      formatCurrency,
+      brand,
+      edit
+    }
+  );
+}
+export {
+  InvoicePreview
+};
+//# sourceMappingURL=invoice-preview.js.map

package/dist/invoice-editor/invoice-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/invoice-editor/invoice-preview.tsx"],"sourcesContent":["'use client';\n\nimport type { Invoice } from '@withpotter/lib/api/types';\nimport { InvoiceDocument } from '@withpotter/pages-finance/dashboard/(finance)/invoices/[invoiceId]/_components/invoice-document';\nimport type { useInvoiceFormState } from '@withpotter/hooks/use-invoice-form-state';\nimport type { InvoiceBrand } from '@withpotter/lib/invoice-brand';\n\ntype InvoiceFormState = ReturnType<typeof useInvoiceFormState>;\n\n/**\n * The invoice, as the customer will receive it, while it is being written.\n *\n * The editor used to be a form and only a form: you filled boxes and found out\n * what you had made after saving it. An invoice is a DOCUMENT — it carries your\n * letterhead and goes to a client — so the thing being edited should be on\n * screen while you edit it.\n *\n * `InvoiceDocument` is the same component the saved invoice and the print view\n * render, so what you see here is the artefact, not an impression of it. This\n * shapes the draft form state into the `Invoice` it will become; nothing is\n * duplicated, and the preview cannot drift from the real document.\n */\nexport function InvoicePreview({\n  state,\n  formatCurrency,\n  invoiceNumber,\n  brand,\n  edit,\n}: {\n  state: InvoiceFormState;\n  formatCurrency: (amount: number, currency?: string) => string;\n  /** The real number when editing; a placeholder while drafting. */\n  invoiceNumber?: string;\n  /** Colours not yet saved, while they are being chosen. */\n  brand?: InvoiceBrand;\n  /**\n   * Pass the draft through and the sheet becomes writable in place.\n   *\n   * The branding dialog renders this same component WITHOUT it, because a\n   * sheet you are choosing a colour on should not invite you to retype the\n   * client's name at the same time.\n   */\n  edit?: { state: InvoiceFormState };\n}) {\n  const items = state.items\n    .filter((i) => i.title.trim() || i.unitPrice > 0)\n    .map((item, i) => ({\n      id: `draft-${i}`,\n      title: item.title.trim() || 'Untitled item',\n      description: null,\n      quantity: item.quantity,\n      unitPrice: item.unitPrice,\n      discount: 0,\n      tax: 0,\n      total: item.quantity * item.unitPrice,\n    }));\n\n  const draft = {\n    id: 'draft',\n    invoiceNumber: invoiceNumber || 'Draft',\n    status: 'draft',\n    customerEmail: state.customerEmail,\n    customerName: state.customerName,\n    customerPhone: state.customerPhone,\n    customerAddress: null,\n    issueDate: state.issueDate || new Date().toISOString(),\n    // A due date that has not been picked yet must stay EMPTY, not become the\n    // string 'Invalid Date'. The document is told to hide the row instead.\n    dueDate: state.dueDate || null,\n    items,\n    // Subtotal is the lines; total is the lines plus the tax printed under\n    // them. Passing `totalAmount` as both is how the sheet showed a total that\n    // did not equal what it was about to charge once VAT existed.\n    subtotal: state.totalAmount - state.taxAmount,\n    discountTotal: 0,\n    taxTotal: state.taxAmount,\n    total: state.totalAmount,\n    amountPaid: 0,\n    // The document reads `amountDue`, not `balanceDue`. Getting this wrong is\n    // how the preview printed ₦NaN on the sheet.\n    amountDue: state.totalAmount,\n    balanceDue: state.totalAmount,\n    currency: 'NGN',\n    note: state.note,\n    terms: state.terms,\n    // Deliberately not passed through: it is the one field on this form the\n    // customer must never see.\n    internalNote: null,\n    paymentLink: null,\n  } as unknown as Invoice;\n\n  return (\n    <InvoiceDocument\n      invoice={draft}\n      formatCurrency={formatCurrency}\n      brand={brand}\n      edit={edit}\n    />\n  );\n}\n"],"mappings":";AA4FI;AAzFJ,SAAS,uBAAuB;AAmBzB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAeG;AACD,QAAM,QAAQ,MAAM,MACjB,OAAO,CAAC,MAAM,EAAE,MAAM,KAAK,KAAK,EAAE,YAAY,CAAC,EAC/C,IAAI,CAAC,MAAM,OAAO;AAAA,IACjB,IAAI,SAAS,CAAC;AAAA,IACd,OAAO,KAAK,MAAM,KAAK,KAAK;AAAA,IAC5B,aAAa;AAAA,IACb,UAAU,KAAK;AAAA,IACf,WAAW,KAAK;AAAA,IAChB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO,KAAK,WAAW,KAAK;AAAA,EAC9B,EAAE;AAEJ,QAAM,QAAQ;AAAA,IACZ,IAAI;AAAA,IACJ,eAAe,iBAAiB;AAAA,IAChC,QAAQ;AAAA,IACR,eAAe,MAAM;AAAA,IACrB,cAAc,MAAM;AAAA,IACpB,eAAe,MAAM;AAAA,IACrB,iBAAiB;AAAA,IACjB,WAAW,MAAM,cAAa,oBAAI,KAAK,GAAE,YAAY;AAAA;AAAA;AAAA,IAGrD,SAAS,MAAM,WAAW;AAAA,IAC1B;AAAA;AAAA;AAAA;AAAA,IAIA,UAAU,MAAM,cAAc,MAAM;AAAA,IACpC,eAAe;AAAA,IACf,UAAU,MAAM;AAAA,IAChB,OAAO,MAAM;AAAA,IACb,YAAY;AAAA;AAAA;AAAA,IAGZ,WAAW,MAAM;AAAA,IACjB,YAAY,MAAM;AAAA,IAClB,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,OAAO,MAAM;AAAA;AAAA;AAAA,IAGb,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/invoice-editor/invoice-repeat-card.d.ts

@@ -0,0 +1,18 @@
+import type { useInvoiceFormState } from '@withpotter/hooks/use-invoice-form-state';
+type InvoiceFormState = ReturnType<typeof useInvoiceFormState>;
+/**
+ * Does this invoice come back?
+ *
+ * In the rail rather than on the sheet, and that is the whole argument for
+ * where it sits: a schedule is a fact about the SERIES, and the sheet is one
+ * bill. The client never sees it, the same reason the internal note is up here.
+ *
+ * A retainer agency, an IT contract, a facility round and a school's termly fee
+ * were all re-typing this invoice every period, because the only repeating
+ * thing Box had was a Paystack subscription — a saved card charged on
+ * Paystack's clock, which is not what any of them sell.
+ */
+export declare function InvoiceRepeatCard({ state }: {
+    state: InvoiceFormState;
+}): import("react").JSX.Element;
+export {};

package/dist/invoice-editor/invoice-repeat-card.js

@@ -0,0 +1,93 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Card } from "@withpotter/ui-kit/card";
+import { Field } from "@withpotter/ui-kit/field";
+import { Select } from "@withpotter/ui-kit/select";
+import { DateField } from "@withpotter/ui-kit/date-field";
+import { Checkbox } from "@withpotter/ui-kit";
+const INTERVALS = [
+  { value: "once", label: "Just once" },
+  { value: "weekly", label: "Every week" },
+  { value: "monthly", label: "Every month" },
+  { value: "quarterly", label: "Every quarter" },
+  { value: "yearly", label: "Every year" }
+];
+function InvoiceRepeatCard({ state }) {
+  const recurrence = state.recurrence;
+  const interval = recurrence?.interval ?? "once";
+  const setInterval = (next) => {
+    if (next === "once") {
+      state.setRecurrence(null);
+      return;
+    }
+    state.setRecurrence({
+      interval: next,
+      // The first copy is due one period after this one is issued, and the
+      // merchant can move it. Defaulting to today would bill twice on day one.
+      nextRunOn: recurrence?.nextRunOn || nextAfter(state.issueDate, next),
+      endsOn: recurrence?.endsOn ?? null,
+      autoSend: recurrence?.autoSend ?? false
+    });
+  };
+  return /* @__PURE__ */ jsx(Card, { padding: "sm", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(Field, { label: "Repeats", hint: "The client never sees this", children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        value: interval,
+        onChange: setInterval,
+        options: INTERVALS.map((i) => ({ ...i }))
+      }
+    ) }),
+    recurrence && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Field, { label: "Next one", hint: "A copy is written on this date", children: /* @__PURE__ */ jsx(
+        DateField,
+        {
+          value: recurrence.nextRunOn,
+          onChange: (value) => state.setRecurrence({ ...recurrence, nextRunOn: value }),
+          "aria-label": "Date of the next invoice in this series"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Field, { label: "Until", hint: "Leave empty to keep going", children: /* @__PURE__ */ jsx(
+        DateField,
+        {
+          value: recurrence.endsOn ?? "",
+          min: recurrence.nextRunOn,
+          onChange: (value) => state.setRecurrence({ ...recurrence, endsOn: value || null }),
+          "aria-label": "Date the series ends"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: recurrence.autoSend ?? false,
+          onChange: (e) => state.setRecurrence({
+            ...recurrence,
+            autoSend: e.target.checked
+          }),
+          label: "Send each one automatically"
+        }
+      )
+    ] })
+  ] }) });
+}
+function nextAfter(issueDate, interval) {
+  const base = issueDate ? /* @__PURE__ */ new Date(`${issueDate}T00:00:00Z`) : /* @__PURE__ */ new Date(`${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}T00:00:00Z`);
+  if (interval === "weekly") {
+    base.setUTCDate(base.getUTCDate() + 7);
+    return base.toISOString().slice(0, 10);
+  }
+  const months = interval === "quarterly" ? 3 : interval === "yearly" ? 12 : 1;
+  const day = base.getUTCDate();
+  const target = new Date(
+    Date.UTC(base.getUTCFullYear(), base.getUTCMonth() + months, 1)
+  );
+  const lastDay = new Date(
+    Date.UTC(target.getUTCFullYear(), target.getUTCMonth() + 1, 0)
+  ).getUTCDate();
+  target.setUTCDate(Math.min(day, lastDay));
+  return target.toISOString().slice(0, 10);
+}
+export {
+  InvoiceRepeatCard
+};
+//# sourceMappingURL=invoice-repeat-card.js.map

package/dist/invoice-editor/invoice-repeat-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/invoice-editor/invoice-repeat-card.tsx"],"sourcesContent":["'use client';\n\nimport { Card } from '@withpotter/ui-kit/card';\nimport { Field } from '@withpotter/ui-kit/field';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { DateField } from '@withpotter/ui-kit/date-field';\nimport { Checkbox } from '@withpotter/ui-kit';\nimport type { useInvoiceFormState } from '@withpotter/hooks/use-invoice-form-state';\nimport type { InvoiceRecurrence } from '@withpotter/lib/api/types';\n\ntype InvoiceFormState = ReturnType<typeof useInvoiceFormState>;\n\nconst INTERVALS: {\n  value: InvoiceRecurrence['interval'] | 'once';\n  label: string;\n}[] = [\n  { value: 'once', label: 'Just once' },\n  { value: 'weekly', label: 'Every week' },\n  { value: 'monthly', label: 'Every month' },\n  { value: 'quarterly', label: 'Every quarter' },\n  { value: 'yearly', label: 'Every year' },\n];\n\n/**\n * Does this invoice come back?\n *\n * In the rail rather than on the sheet, and that is the whole argument for\n * where it sits: a schedule is a fact about the SERIES, and the sheet is one\n * bill. The client never sees it, the same reason the internal note is up here.\n *\n * A retainer agency, an IT contract, a facility round and a school's termly fee\n * were all re-typing this invoice every period, because the only repeating\n * thing Box had was a Paystack subscription — a saved card charged on\n * Paystack's clock, which is not what any of them sell.\n */\nexport function InvoiceRepeatCard({ state }: { state: InvoiceFormState }) {\n  const recurrence = state.recurrence;\n  const interval = recurrence?.interval ?? 'once';\n\n  const setInterval = (next: string) => {\n    if (next === 'once') {\n      state.setRecurrence(null);\n      return;\n    }\n    state.setRecurrence({\n      interval: next as InvoiceRecurrence['interval'],\n      // The first copy is due one period after this one is issued, and the\n      // merchant can move it. Defaulting to today would bill twice on day one.\n      nextRunOn: recurrence?.nextRunOn || nextAfter(state.issueDate, next),\n      endsOn: recurrence?.endsOn ?? null,\n      autoSend: recurrence?.autoSend ?? false,\n    });\n  };\n\n  return (\n    <Card padding=\"sm\">\n      <div className=\"space-y-3\">\n        <Field label=\"Repeats\" hint=\"The client never sees this\">\n          <Select\n            value={interval}\n            onChange={setInterval}\n            options={INTERVALS.map((i) => ({ ...i }))}\n          />\n        </Field>\n\n        {recurrence && (\n          <>\n            <Field label=\"Next one\" hint=\"A copy is written on this date\">\n              <DateField\n                value={recurrence.nextRunOn}\n                onChange={(value) =>\n                  state.setRecurrence({ ...recurrence, nextRunOn: value })\n                }\n                aria-label=\"Date of the next invoice in this series\"\n              />\n            </Field>\n\n            <Field label=\"Until\" hint=\"Leave empty to keep going\">\n              <DateField\n                value={recurrence.endsOn ?? ''}\n                min={recurrence.nextRunOn}\n                onChange={(value) =>\n                  state.setRecurrence({ ...recurrence, endsOn: value || null })\n                }\n                aria-label=\"Date the series ends\"\n              />\n            </Field>\n\n            {/* Off by default. Sending on a merchant's behalf without them\n                looking is the one thing here that can embarrass them in front\n                of a client, so it is a decision rather than an assumption. */}\n            <Checkbox\n              checked={recurrence.autoSend ?? false}\n              onChange={(e) =>\n                state.setRecurrence({\n                  ...recurrence,\n                  autoSend: e.target.checked,\n                })\n              }\n              label=\"Send each one automatically\"\n            />\n          </>\n        )}\n      </div>\n    </Card>\n  );\n}\n\n/** One period after the issue date, as an ISO date. */\nfunction nextAfter(issueDate: string, interval: string): string {\n  const base = issueDate\n    ? new Date(`${issueDate}T00:00:00Z`)\n    : new Date(`${new Date().toISOString().slice(0, 10)}T00:00:00Z`);\n\n  if (interval === 'weekly') {\n    base.setUTCDate(base.getUTCDate() + 7);\n    return base.toISOString().slice(0, 10);\n  }\n\n  const months = interval === 'quarterly' ? 3 : interval === 'yearly' ? 12 : 1;\n  const day = base.getUTCDate();\n  const target = new Date(\n    Date.UTC(base.getUTCFullYear(), base.getUTCMonth() + months, 1),\n  );\n  const lastDay = new Date(\n    Date.UTC(target.getUTCFullYear(), target.getUTCMonth() + 1, 0),\n  ).getUTCDate();\n  target.setUTCDate(Math.min(day, lastDay));\n  return target.toISOString().slice(0, 10);\n}\n"],"mappings":"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","names":[]}

package/dist/invoice-editor/line-items-editor.d.ts

@@ -0,0 +1,8 @@
+import type { useInvoiceFormState } from '@withpotter/hooks/use-invoice-form-state';
+type InvoiceFormState = ReturnType<typeof useInvoiceFormState>;
+interface LineItemsEditorProps {
+    state: InvoiceFormState;
+    compact?: boolean;
+}
+export declare function LineItemsEditor({ state, compact }: LineItemsEditorProps): import("react").JSX.Element;
+export {};