@dainamite/billing 0.17.0

package/dist/modules/billing/components/AccountForm.js

@@ -0,0 +1,420 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@open-mercato/ui/primitives/select";
+import { Switch } from "@open-mercato/ui/primitives/switch";
+import { Kbd, KbdShortcut } from "@open-mercato/ui/primitives/kbd";
+import { ComboboxInput } from "@open-mercato/ui/backend/inputs";
+import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+const EMPTY_VALUES = {
+  customerId: "",
+  name: "",
+  currencyCode: "EUR",
+  billCycle: "monthly",
+  billCycleAnchor: "1",
+  invoiceEmail: "",
+  invoiceLanguage: "en",
+  taxId: "",
+  invoiceAddress: {
+    line1: "",
+    line2: "",
+    city: "",
+    postal_code: "",
+    country: "PL"
+  },
+  nextBillDate: "",
+  isActive: true
+};
+function todayIso() {
+  return (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+}
+function mergeInitial(initial) {
+  if (!initial) return { ...EMPTY_VALUES, nextBillDate: todayIso() };
+  return {
+    ...EMPTY_VALUES,
+    nextBillDate: EMPTY_VALUES.nextBillDate || todayIso(),
+    ...initial,
+    invoiceAddress: {
+      ...EMPTY_VALUES.invoiceAddress,
+      ...initial.invoiceAddress ?? {}
+    }
+  };
+}
+function AccountForm({
+  mode,
+  initial,
+  submitting = false,
+  onSubmit,
+  onCancel
+}) {
+  const t = useT();
+  const [values, setValues] = React.useState(() => mergeInitial(initial));
+  const [error, setError] = React.useState(null);
+  const isEdit = mode === "edit";
+  const customerLabelCacheRef = React.useRef(/* @__PURE__ */ new Map());
+  const loadCustomerOptions = React.useCallback(
+    async (query) => {
+      const params = new URLSearchParams({ page: "1", pageSize: "20" });
+      const q = (query ?? "").trim();
+      if (q) params.set("search", q);
+      const call = await apiCall(`/api/customers/companies?${params.toString()}`);
+      if (!call.ok || call.result == null) return [];
+      const raw = call.result;
+      const items = Array.isArray(raw) ? raw : Array.isArray(raw.items) ? raw.items : [];
+      const options = [];
+      for (const c of items) {
+        const id = typeof c.id === "string" ? c.id : c.id != null ? String(c.id) : "";
+        if (!id) continue;
+        const label = String(c.display_name ?? c.displayName ?? c.name ?? id);
+        const emailRaw = c.primary_email ?? c.email;
+        const description = typeof emailRaw === "string" && emailRaw ? emailRaw : null;
+        const opt = { value: id, label, description };
+        customerLabelCacheRef.current.set(id, opt);
+        options.push(opt);
+      }
+      return options;
+    },
+    []
+  );
+  const resolveCustomerLabel = React.useCallback(
+    (id) => customerLabelCacheRef.current.get(id)?.label ?? id,
+    []
+  );
+  const resolveCustomerDescription = React.useCallback(
+    (id) => customerLabelCacheRef.current.get(id)?.description ?? null,
+    []
+  );
+  const initialKey = React.useMemo(
+    () => JSON.stringify(initial ?? null),
+    [initial]
+  );
+  React.useEffect(() => {
+    setValues(mergeInitial(initial));
+  }, [initialKey, initial]);
+  const set = React.useCallback(
+    (key, value) => {
+      setValues((prev) => ({ ...prev, [key]: value }));
+    },
+    []
+  );
+  const setAddress = React.useCallback(
+    (key, value) => {
+      setValues((prev) => ({
+        ...prev,
+        invoiceAddress: { ...prev.invoiceAddress, [key]: value }
+      }));
+    },
+    []
+  );
+  const handleSubmit = React.useCallback(async () => {
+    if (!isEdit && !values.customerId.trim()) {
+      setError(t("billing.accounts.form.error.customerId_required", "Please select a customer"));
+      return;
+    }
+    if (!values.name.trim()) {
+      setError(t("billing.accounts.form.error.name_required", "Name is required"));
+      return;
+    }
+    if (!isEdit && values.currencyCode.trim().length !== 3) {
+      setError(t("billing.accounts.form.error.currency_invalid", "Currency must be a 3-letter ISO code"));
+      return;
+    }
+    if (!values.invoiceEmail.includes("@")) {
+      setError(t("billing.accounts.form.error.email_invalid", "Invoice email looks invalid"));
+      return;
+    }
+    if (!values.invoiceAddress.line1.trim() || !values.invoiceAddress.city.trim() || !values.invoiceAddress.postal_code.trim()) {
+      setError(
+        t(
+          "billing.accounts.form.error.address_required",
+          "Invoice address (line 1 + city + postal code) is required"
+        )
+      );
+      return;
+    }
+    const country = values.invoiceAddress.country.trim();
+    if (country.length < 2 || country.length > 3) {
+      setError(
+        t(
+          "billing.accounts.form.error.country_invalid",
+          "Country must be a 2- or 3-letter ISO 3166 code"
+        )
+      );
+      return;
+    }
+    if (!values.nextBillDate) {
+      setError(t("billing.accounts.form.error.next_bill_date_required", "Next bill date is required"));
+      return;
+    }
+    setError(null);
+    await onSubmit(values);
+  }, [isEdit, onSubmit, t, values]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+        event.preventDefault();
+        void handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-card p-6", onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          isEdit ? t("billing.accounts.form.customer_id", "Customer ID") : t("billing.accounts.form.customer", "Customer"),
+          !isEdit ? /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" }) : null
+        ] }),
+        isEdit ? /* @__PURE__ */ jsx(Input, { value: values.customerId, disabled: true }) : /* @__PURE__ */ jsx(
+          ComboboxInput,
+          {
+            value: values.customerId,
+            onChange: (next) => {
+              setValues((prev) => {
+                const customerLabel = customerLabelCacheRef.current.get(next)?.label ?? "";
+                const shouldFillName = customerLabel && !prev.name.trim();
+                return {
+                  ...prev,
+                  customerId: next,
+                  name: shouldFillName ? customerLabel : prev.name
+                };
+              });
+            },
+            loadSuggestions: loadCustomerOptions,
+            resolveLabel: resolveCustomerLabel,
+            resolveDescription: resolveCustomerDescription,
+            placeholder: t(
+              "billing.accounts.form.customer.placeholder",
+              "Search customers by name or email\u2026"
+            ),
+            allowCustomValues: false
+          }
+        ),
+        isEdit ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("billing.accounts.form.customer_id.locked", "Immutable \u2014 create a new account to re-link the customer.") }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          t("billing.accounts.form.name", "Name"),
+          /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: values.name,
+            placeholder: !isEdit ? t(
+              "billing.accounts.form.name.placeholder",
+              'Auto-filled from customer \u2014 override e.g. "Acme \u2014 production"'
+            ) : void 0,
+            onChange: (event) => set("name", event.currentTarget.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          t("billing.accounts.form.currency", "Currency (ISO 4217)"),
+          !isEdit ? /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: values.currencyCode,
+            disabled: isEdit,
+            maxLength: 3,
+            onChange: (event) => set("currencyCode", event.currentTarget.value.toUpperCase())
+          }
+        ),
+        isEdit ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("billing.accounts.form.currency.locked", "Immutable \u2014 frozen at account create time.") }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("billing.accounts.form.bill_cycle", "Bill cycle") }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: values.billCycle,
+            onValueChange: (next) => set("billCycle", next),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsx(SelectItem, { value: "weekly", children: t("billing.cycle.weekly", "Weekly") }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "monthly", children: t("billing.cycle.monthly", "Monthly") }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "quarterly", children: t("billing.cycle.quarterly", "Quarterly") }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "annually", children: t("billing.cycle.annually", "Annually") })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("billing.accounts.form.cycle_anchor", "Cycle anchor") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: values.billCycleAnchor,
+            placeholder: values.billCycle === "weekly" ? t("billing.accounts.form.cycle_anchor.weekly_hint", "mon | tue | \u2026 | sun") : t("billing.accounts.form.cycle_anchor.month_hint", "1 \u2014 28"),
+            onChange: (event) => set("billCycleAnchor", event.currentTarget.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          t("billing.accounts.form.next_bill_date", "Next bill date"),
+          /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "date",
+            value: values.nextBillDate,
+            onChange: (event) => set("nextBillDate", event.currentTarget.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          t("billing.accounts.form.invoice_email", "Invoice email"),
+          /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "email",
+            value: values.invoiceEmail,
+            onChange: (event) => set("invoiceEmail", event.currentTarget.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("billing.accounts.form.invoice_language", "Invoice language (ISO 639-1)") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: values.invoiceLanguage,
+            maxLength: 5,
+            onChange: (event) => set("invoiceLanguage", event.currentTarget.value.toLowerCase())
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm col-span-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("billing.accounts.form.tax_id", "Tax ID (NIP / VATIN, optional)") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: values.taxId,
+            onChange: (event) => set("taxId", event.currentTarget.value)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold mt-6 mb-2", children: t("billing.accounts.form.address.title", "Invoice address") }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm col-span-2", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          t("billing.accounts.form.address.line1", "Line 1"),
+          /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: values.invoiceAddress.line1,
+            onChange: (event) => setAddress("line1", event.currentTarget.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm col-span-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("billing.accounts.form.address.line2", "Line 2") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: values.invoiceAddress.line2,
+            onChange: (event) => setAddress("line2", event.currentTarget.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          t("billing.accounts.form.address.city", "City"),
+          /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: values.invoiceAddress.city,
+            onChange: (event) => setAddress("city", event.currentTarget.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          t("billing.accounts.form.address.postal_code", "Postal code"),
+          /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: values.invoiceAddress.postal_code,
+            onChange: (event) => setAddress("postal_code", event.currentTarget.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          t("billing.accounts.form.address.country", "Country (ISO 3166)"),
+          /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: values.invoiceAddress.country,
+            maxLength: 3,
+            onChange: (event) => setAddress("country", event.currentTarget.value.toUpperCase())
+          }
+        )
+      ] })
+    ] }),
+    isEdit ? /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: t("billing.accounts.form.active", "Active") }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: t(
+          "billing.accounts.form.active.help",
+          "Inactive accounts stay billable until soft-deleted \u2014 toggle for visibility filtering only."
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: values.isActive,
+          onCheckedChange: (next) => set("isActive", next)
+        }
+      )
+    ] }) : null,
+    error ? /* @__PURE__ */ jsx("div", { className: "mt-4 text-sm text-destructive", children: error }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(KbdShortcut, { keys: ["Ctrl/\u2318", "Enter"] }),
+        " ",
+        t("billing.accounts.form.submit_hint", "to save,"),
+        " ",
+        /* @__PURE__ */ jsx(Kbd, { children: "Esc" }),
+        " ",
+        t("billing.accounts.form.cancel_hint", "to discard")
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: onCancel, children: t("billing.common.cancel", "Cancel") }),
+        /* @__PURE__ */ jsx(Button, { type: "button", onClick: () => void handleSubmit(), disabled: submitting, children: submitting ? t("billing.accounts.form.saving", "Saving\u2026") : isEdit ? t("billing.accounts.form.save", "Save changes") : t("billing.accounts.form.create", "Create account") })
+      ] })
+    ] })
+  ] });
+}
+export {
+  AccountForm
+};
+//# sourceMappingURL=AccountForm.js.map

package/dist/modules/billing/components/AccountForm.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/billing/components/AccountForm.tsx"],
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@open-mercato/ui/primitives/select'\nimport { Switch } from '@open-mercato/ui/primitives/switch'\nimport { Kbd, KbdShortcut } from '@open-mercato/ui/primitives/kbd'\nimport { ComboboxInput, type ComboboxOption } from '@open-mercato/ui/backend/inputs'\nimport { apiCall } from '@open-mercato/ui/backend/utils/apiCall'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\n/**\n * Shared form for Billing Account create + edit.\n *\n * Hand-rolled (not CrudForm) on purpose \u2014 the form's `invoiceAddress`\n * jsonb sub-object would need a custom-field renderer in the\n * CrudForm DSL, which is heavier than just rendering five inputs\n * inline. The trade-off is documented in `xd-249-billing-spec.md`\n * Phase 4d notes.\n *\n * UX per the OM UI AGENTS.md:\n *   - `Cmd/Ctrl + Enter` submits.\n *   - Buttons use the `Button` / `Switch` primitives, never raw HTML.\n *   - Footer hint row uses `Kbd` / `KbdShortcut`.\n *\n * `mode='create'` shows the always-required fields. `mode='edit'`\n * disables `customerId` and `currencyCode` per the spec\n * (\"immutable per spec \u2014 create a new account if the customer FK\n * changes\" \u2014 see `billingAccountUpdateSchema`).\n */\n\nexport type AccountFormValues = {\n  customerId: string\n  name: string\n  currencyCode: string\n  billCycle: 'weekly' | 'monthly' | 'quarterly' | 'annually'\n  billCycleAnchor: string\n  invoiceEmail: string\n  invoiceLanguage: string\n  taxId: string\n  invoiceAddress: {\n    line1: string\n    line2: string\n    city: string\n    postal_code: string\n    country: string\n  }\n  nextBillDate: string\n  isActive: boolean\n}\n\nexport type AccountFormProps = {\n  mode: 'create' | 'edit'\n  initial?: Partial<AccountFormValues>\n  submitting?: boolean\n  onSubmit: (values: AccountFormValues) => Promise<void> | void\n  onCancel: () => void\n}\n\nconst EMPTY_VALUES: AccountFormValues = {\n  customerId: '',\n  name: '',\n  currencyCode: 'EUR',\n  billCycle: 'monthly',\n  billCycleAnchor: '1',\n  invoiceEmail: '',\n  invoiceLanguage: 'en',\n  taxId: '',\n  invoiceAddress: {\n    line1: '',\n    line2: '',\n    city: '',\n    postal_code: '',\n    country: 'PL',\n  },\n  nextBillDate: '',\n  isActive: true,\n}\n\nfunction todayIso(): string {\n  return new Date().toISOString().slice(0, 10)\n}\n\nfunction mergeInitial(initial: Partial<AccountFormValues> | undefined): AccountFormValues {\n  if (!initial) return { ...EMPTY_VALUES, nextBillDate: todayIso() }\n  return {\n    ...EMPTY_VALUES,\n    nextBillDate: EMPTY_VALUES.nextBillDate || todayIso(),\n    ...initial,\n    invoiceAddress: {\n      ...EMPTY_VALUES.invoiceAddress,\n      ...(initial.invoiceAddress ?? {}),\n    },\n  }\n}\n\nexport function AccountForm({\n  mode,\n  initial,\n  submitting = false,\n  onSubmit,\n  onCancel,\n}: AccountFormProps) {\n  const t = useT()\n  const [values, setValues] = React.useState<AccountFormValues>(() => mergeInitial(initial))\n  const [error, setError] = React.useState<string | null>(null)\n  const isEdit = mode === 'edit'\n\n  // Label cache for the customer combobox \u2014 populated as the user searches,\n  // so the picker can render \"Acme Telecom\" after selection instead of the\n  // raw UUID we send to the API.\n  const customerLabelCacheRef = React.useRef<Map<string, ComboboxOption>>(new Map())\n\n  const loadCustomerOptions = React.useCallback(\n    async (query?: string): Promise<ComboboxOption[]> => {\n      const params = new URLSearchParams({ page: '1', pageSize: '20' })\n      const q = (query ?? '').trim()\n      if (q) params.set('search', q)\n      const call = await apiCall<unknown>(`/api/customers/companies?${params.toString()}`)\n      if (!call.ok || call.result == null) return []\n      const raw = call.result as { items?: unknown } | unknown[]\n      const items: Array<Record<string, unknown>> = Array.isArray(raw)\n        ? (raw as Array<Record<string, unknown>>)\n        : Array.isArray((raw as { items?: unknown }).items)\n          ? ((raw as { items: unknown[] }).items as Array<Record<string, unknown>>)\n          : []\n      const options: ComboboxOption[] = []\n      for (const c of items) {\n        const id = typeof c.id === 'string' ? c.id : c.id != null ? String(c.id) : ''\n        if (!id) continue\n        const label = String(c.display_name ?? c.displayName ?? c.name ?? id)\n        const emailRaw = c.primary_email ?? c.email\n        const description = typeof emailRaw === 'string' && emailRaw ? emailRaw : null\n        const opt: ComboboxOption = { value: id, label, description }\n        customerLabelCacheRef.current.set(id, opt)\n        options.push(opt)\n      }\n      return options\n    },\n    [],\n  )\n\n  const resolveCustomerLabel = React.useCallback(\n    (id: string) => customerLabelCacheRef.current.get(id)?.label ?? id,\n    [],\n  )\n  const resolveCustomerDescription = React.useCallback(\n    (id: string) => customerLabelCacheRef.current.get(id)?.description ?? null,\n    [],\n  )\n\n  // Reset when the parent swaps `initial` (e.g. after loading the edit row).\n  const initialKey = React.useMemo(\n    () => JSON.stringify(initial ?? null),\n    [initial],\n  )\n  React.useEffect(() => {\n    setValues(mergeInitial(initial))\n  }, [initialKey, initial])\n\n  const set = React.useCallback(\n    <K extends keyof AccountFormValues>(key: K, value: AccountFormValues[K]) => {\n      setValues((prev) => ({ ...prev, [key]: value }))\n    },\n    [],\n  )\n\n  const setAddress = React.useCallback(\n    <K extends keyof AccountFormValues['invoiceAddress']>(\n      key: K,\n      value: AccountFormValues['invoiceAddress'][K],\n    ) => {\n      setValues((prev) => ({\n        ...prev,\n        invoiceAddress: { ...prev.invoiceAddress, [key]: value },\n      }))\n    },\n    [],\n  )\n\n  const handleSubmit = React.useCallback(async () => {\n    if (!isEdit && !values.customerId.trim()) {\n      setError(t('billing.accounts.form.error.customerId_required', 'Please select a customer'))\n      return\n    }\n    if (!values.name.trim()) {\n      setError(t('billing.accounts.form.error.name_required', 'Name is required'))\n      return\n    }\n    if (!isEdit && values.currencyCode.trim().length !== 3) {\n      setError(t('billing.accounts.form.error.currency_invalid', 'Currency must be a 3-letter ISO code'))\n      return\n    }\n    if (!values.invoiceEmail.includes('@')) {\n      setError(t('billing.accounts.form.error.email_invalid', 'Invoice email looks invalid'))\n      return\n    }\n    if (\n      !values.invoiceAddress.line1.trim() ||\n      !values.invoiceAddress.city.trim() ||\n      !values.invoiceAddress.postal_code.trim()\n    ) {\n      setError(\n        t(\n          'billing.accounts.form.error.address_required',\n          'Invoice address (line 1 + city + postal code) is required',\n        ),\n      )\n      return\n    }\n    const country = values.invoiceAddress.country.trim()\n    if (country.length < 2 || country.length > 3) {\n      setError(\n        t(\n          'billing.accounts.form.error.country_invalid',\n          'Country must be a 2- or 3-letter ISO 3166 code',\n        ),\n      )\n      return\n    }\n    if (!values.nextBillDate) {\n      setError(t('billing.accounts.form.error.next_bill_date_required', 'Next bill date is required'))\n      return\n    }\n    setError(null)\n    await onSubmit(values)\n  }, [isEdit, onSubmit, t, values])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {\n        event.preventDefault()\n        void handleSubmit()\n      }\n    },\n    [handleSubmit],\n  )\n\n  return (\n    <div className=\"rounded-lg border border-border bg-card p-6\" onKeyDown={handleKeyDown}>\n      <div className=\"grid grid-cols-2 gap-4\">\n        <label className=\"flex flex-col gap-1 text-sm\">\n          <span className=\"text-muted-foreground\">\n            {isEdit\n              ? t('billing.accounts.form.customer_id', 'Customer ID')\n              : t('billing.accounts.form.customer', 'Customer')}\n            {!isEdit ? <span className=\"text-destructive\"> *</span> : null}\n          </span>\n          {isEdit ? (\n            <Input value={values.customerId} disabled />\n          ) : (\n            <ComboboxInput\n              value={values.customerId}\n              onChange={(next) => {\n                setValues((prev) => {\n                  const customerLabel = customerLabelCacheRef.current.get(next)?.label ?? ''\n                  // Auto-fill Name with the customer's display name on the first\n                  // pick. We leave it alone if the operator has already typed\n                  // something \u2014 one customer can have multiple billing accounts\n                  // (e.g. \"Acme \u2014 production\" / \"Acme \u2014 staging\").\n                  const shouldFillName = customerLabel && !prev.name.trim()\n                  return {\n                    ...prev,\n                    customerId: next,\n                    name: shouldFillName ? customerLabel : prev.name,\n                  }\n                })\n              }}\n              loadSuggestions={loadCustomerOptions}\n              resolveLabel={resolveCustomerLabel}\n              resolveDescription={resolveCustomerDescription}\n              placeholder={t(\n                'billing.accounts.form.customer.placeholder',\n                'Search customers by name or email\u2026',\n              )}\n              allowCustomValues={false}\n            />\n          )}\n          {isEdit ? (\n            <span className=\"text-xs text-muted-foreground\">\n              {t('billing.accounts.form.customer_id.locked', 'Immutable \u2014 create a new account to re-link the customer.')}\n            </span>\n          ) : null}\n        </label>\n\n        <label className=\"flex flex-col gap-1 text-sm\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.accounts.form.name', 'Name')}\n            <span className=\"text-destructive\"> *</span>\n          </span>\n          <Input\n            value={values.name}\n            placeholder={\n              !isEdit\n                ? t(\n                    'billing.accounts.form.name.placeholder',\n                    'Auto-filled from customer \u2014 override e.g. \"Acme \u2014 production\"',\n                  )\n                : undefined\n            }\n            onChange={(event) => set('name', event.currentTarget.value)}\n          />\n        </label>\n\n        <label className=\"flex flex-col gap-1 text-sm\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.accounts.form.currency', 'Currency (ISO 4217)')}\n            {!isEdit ? <span className=\"text-destructive\"> *</span> : null}\n          </span>\n          <Input\n            value={values.currencyCode}\n            disabled={isEdit}\n            maxLength={3}\n            onChange={(event) =>\n              set('currencyCode', event.currentTarget.value.toUpperCase())\n            }\n          />\n          {isEdit ? (\n            <span className=\"text-xs text-muted-foreground\">\n              {t('billing.accounts.form.currency.locked', 'Immutable \u2014 frozen at account create time.')}\n            </span>\n          ) : null}\n        </label>\n\n        <label className=\"flex flex-col gap-1 text-sm\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.accounts.form.bill_cycle', 'Bill cycle')}\n          </span>\n          <Select\n            value={values.billCycle}\n            onValueChange={(next) =>\n              set('billCycle', next as AccountFormValues['billCycle'])\n            }\n          >\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"weekly\">{t('billing.cycle.weekly', 'Weekly')}</SelectItem>\n              <SelectItem value=\"monthly\">{t('billing.cycle.monthly', 'Monthly')}</SelectItem>\n              <SelectItem value=\"quarterly\">{t('billing.cycle.quarterly', 'Quarterly')}</SelectItem>\n              <SelectItem value=\"annually\">{t('billing.cycle.annually', 'Annually')}</SelectItem>\n            </SelectContent>\n          </Select>\n        </label>\n\n        <label className=\"flex flex-col gap-1 text-sm\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.accounts.form.cycle_anchor', 'Cycle anchor')}\n          </span>\n          <Input\n            value={values.billCycleAnchor}\n            placeholder={\n              values.billCycle === 'weekly'\n                ? t('billing.accounts.form.cycle_anchor.weekly_hint', 'mon | tue | \u2026 | sun')\n                : t('billing.accounts.form.cycle_anchor.month_hint', '1 \u2014 28')\n            }\n            onChange={(event) => set('billCycleAnchor', event.currentTarget.value)}\n          />\n        </label>\n\n        <label className=\"flex flex-col gap-1 text-sm\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.accounts.form.next_bill_date', 'Next bill date')}\n            <span className=\"text-destructive\"> *</span>\n          </span>\n          <Input\n            type=\"date\"\n            value={values.nextBillDate}\n            onChange={(event) => set('nextBillDate', event.currentTarget.value)}\n          />\n        </label>\n\n        <label className=\"flex flex-col gap-1 text-sm\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.accounts.form.invoice_email', 'Invoice email')}\n            <span className=\"text-destructive\"> *</span>\n          </span>\n          <Input\n            type=\"email\"\n            value={values.invoiceEmail}\n            onChange={(event) => set('invoiceEmail', event.currentTarget.value)}\n          />\n        </label>\n\n        <label className=\"flex flex-col gap-1 text-sm\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.accounts.form.invoice_language', 'Invoice language (ISO 639-1)')}\n          </span>\n          <Input\n            value={values.invoiceLanguage}\n            maxLength={5}\n            onChange={(event) =>\n              set('invoiceLanguage', event.currentTarget.value.toLowerCase())\n            }\n          />\n        </label>\n\n        <label className=\"flex flex-col gap-1 text-sm col-span-2\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.accounts.form.tax_id', 'Tax ID (NIP / VATIN, optional)')}\n          </span>\n          <Input\n            value={values.taxId}\n            onChange={(event) => set('taxId', event.currentTarget.value)}\n          />\n        </label>\n      </div>\n\n      <h3 className=\"text-sm font-semibold mt-6 mb-2\">\n        {t('billing.accounts.form.address.title', 'Invoice address')}\n      </h3>\n      <div className=\"grid grid-cols-2 gap-4\">\n        <label className=\"flex flex-col gap-1 text-sm col-span-2\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.accounts.form.address.line1', 'Line 1')}\n            <span className=\"text-destructive\"> *</span>\n          </span>\n          <Input\n            value={values.invoiceAddress.line1}\n            onChange={(event) => setAddress('line1', event.currentTarget.value)}\n          />\n        </label>\n        <label className=\"flex flex-col gap-1 text-sm col-span-2\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.accounts.form.address.line2', 'Line 2')}\n          </span>\n          <Input\n            value={values.invoiceAddress.line2}\n            onChange={(event) => setAddress('line2', event.currentTarget.value)}\n          />\n        </label>\n        <label className=\"flex flex-col gap-1 text-sm\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.accounts.form.address.city', 'City')}\n            <span className=\"text-destructive\"> *</span>\n          </span>\n          <Input\n            value={values.invoiceAddress.city}\n            onChange={(event) => setAddress('city', event.currentTarget.value)}\n          />\n        </label>\n        <label className=\"flex flex-col gap-1 text-sm\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.accounts.form.address.postal_code', 'Postal code')}\n            <span className=\"text-destructive\"> *</span>\n          </span>\n          <Input\n            value={values.invoiceAddress.postal_code}\n            onChange={(event) => setAddress('postal_code', event.currentTarget.value)}\n          />\n        </label>\n        <label className=\"flex flex-col gap-1 text-sm\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.accounts.form.address.country', 'Country (ISO 3166)')}\n            <span className=\"text-destructive\"> *</span>\n          </span>\n          <Input\n            value={values.invoiceAddress.country}\n            maxLength={3}\n            onChange={(event) =>\n              setAddress('country', event.currentTarget.value.toUpperCase())\n            }\n          />\n        </label>\n      </div>\n\n      {isEdit ? (\n        <div className=\"mt-6 flex items-center justify-between gap-3\">\n          <div>\n            <div className=\"text-sm font-medium\">\n              {t('billing.accounts.form.active', 'Active')}\n            </div>\n            <div className=\"text-xs text-muted-foreground\">\n              {t(\n                'billing.accounts.form.active.help',\n                'Inactive accounts stay billable until soft-deleted \u2014 toggle for visibility filtering only.',\n              )}\n            </div>\n          </div>\n          <Switch\n            checked={values.isActive}\n            onCheckedChange={(next) => set('isActive', next)}\n          />\n        </div>\n      ) : null}\n\n      {error ? <div className=\"mt-4 text-sm text-destructive\">{error}</div> : null}\n\n      <div className=\"mt-6 flex items-center justify-between gap-3\">\n        <span className=\"text-xs text-muted-foreground\">\n          <KbdShortcut keys={['Ctrl/\u2318', 'Enter']} />{' '}\n          {t('billing.accounts.form.submit_hint', 'to save,')} <Kbd>Esc</Kbd>{' '}\n          {t('billing.accounts.form.cancel_hint', 'to discard')}\n        </span>\n        <div className=\"flex items-center gap-2\">\n          <Button type=\"button\" variant=\"outline\" onClick={onCancel}>\n            {t('billing.common.cancel', 'Cancel')}\n          </Button>\n          <Button type=\"button\" onClick={() => void handleSubmit()} disabled={submitting}>\n            {submitting\n              ? t('billing.accounts.form.saving', 'Saving\u2026')\n              : isEdit\n                ? t('billing.accounts.form.save', 'Save changes')\n                : t('billing.accounts.form.create', 'Create account')}\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/billing/components/DetailFields.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DetailCard({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children }) });
+}
+function DetailField({
+  label,
+  children,
+  fullWidth = false
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: fullWidth ? "sm:col-span-2" : void 0, children: [
+    /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium mb-1", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "text-sm py-1", children })
+  ] });
+}
+function StatCard({
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
+    title ? /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium mb-3", children: title }) : null,
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-10 gap-y-4", children })
+  ] });
+}
+function Stat({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", children: value })
+  ] });
+}
+export {
+  DetailCard,
+  DetailField,
+  Stat,
+  StatCard
+};
+//# sourceMappingURL=DetailFields.js.map

package/dist/modules/billing/components/DetailFields.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/billing/components/DetailFields.tsx"],
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\n\n/**\n * OM/CPQ-standard read-only detail rendering.\n *\n * One bordered card holding a 2-col grid of label-above-value blocks \u2014\n * mirrors the CPQ offering detail \"General\" section so billing detail\n * pages match the rest of the admin shell.\n */\n\nexport function DetailCard({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"rounded-lg border bg-card p-6\">\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">{children}</div>\n    </div>\n  )\n}\n\nexport function DetailField({\n  label,\n  children,\n  fullWidth = false,\n}: {\n  label: string\n  children: React.ReactNode\n  fullWidth?: boolean\n}) {\n  return (\n    <div className={fullWidth ? 'sm:col-span-2' : undefined}>\n      <label className=\"block text-sm font-medium mb-1\">{label}</label>\n      <div className=\"text-sm py-1\">{children}</div>\n    </div>\n  )\n}\n\n/** Compact stat block \u2014 card with an optional heading + metric tiles. */\nexport function StatCard({\n  title,\n  children,\n}: {\n  title?: string\n  children: React.ReactNode\n}) {\n  return (\n    <div className=\"rounded-lg border bg-card p-4\">\n      {title ? <h3 className=\"text-sm font-medium mb-3\">{title}</h3> : null}\n      <div className=\"flex flex-wrap gap-x-10 gap-y-4\">{children}</div>\n    </div>\n  )\n}\n\nexport function Stat({ label, value }: { label: string; value: React.ReactNode }) {\n  return (\n    <div>\n      <p className=\"text-xs text-muted-foreground\">{label}</p>\n      <p className=\"text-lg font-semibold\">{value}</p>\n    </div>\n  )\n}\n"],
+  "mappings": ";AAcM,cAeF,YAfE;AAHC,SAAS,WAAW,EAAE,SAAS,GAAkC;AACtE,SACE,oBAAC,SAAI,WAAU,iCACb,8BAAC,SAAI,WAAU,yCAAyC,UAAS,GACnE;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAIG;AACD,SACE,qBAAC,SAAI,WAAW,YAAY,kBAAkB,QAC5C;AAAA,wBAAC,WAAM,WAAU,kCAAkC,iBAAM;AAAA,IACzD,oBAAC,SAAI,WAAU,gBAAgB,UAAS;AAAA,KAC1C;AAEJ;AAGO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AACF,GAGG;AACD,SACE,qBAAC,SAAI,WAAU,iCACZ;AAAA,YAAQ,oBAAC,QAAG,WAAU,4BAA4B,iBAAM,IAAQ;AAAA,IACjE,oBAAC,SAAI,WAAU,mCAAmC,UAAS;AAAA,KAC7D;AAEJ;AAEO,SAAS,KAAK,EAAE,OAAO,MAAM,GAA8C;AAChF,SACE,qBAAC,SACC;AAAA,wBAAC,OAAE,WAAU,iCAAiC,iBAAM;AAAA,IACpD,oBAAC,OAAE,WAAU,yBAAyB,iBAAM;AAAA,KAC9C;AAEJ;",
+  "names": []
+}