@dainamite/billing 0.17.0

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

@@ -0,0 +1,195 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@open-mercato/ui/primitives/dialog";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Textarea } from "@open-mercato/ui/primitives/textarea";
+import { Kbd, KbdShortcut } from "@open-mercato/ui/primitives/kbd";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+function toNumber(raw) {
+  if (raw.trim() === "") return null;
+  const n = Number.parseFloat(raw);
+  return Number.isFinite(n) ? n : null;
+}
+function LineFormDialog({
+  open,
+  mode,
+  initial,
+  submitting = false,
+  onSubmit,
+  onCancel
+}) {
+  const t = useT();
+  const [description, setDescription] = React.useState(initial?.description ?? "");
+  const [quantity, setQuantity] = React.useState(
+    initial?.quantity != null ? String(initial.quantity) : ""
+  );
+  const [unitPriceNet, setUnitPriceNet] = React.useState(
+    initial?.unitPriceNet != null ? String(initial.unitPriceNet) : ""
+  );
+  const [totalOverride, setTotalOverride] = React.useState(
+    initial?.totalNetAmount != null ? String(initial.totalNetAmount) : ""
+  );
+  const [error, setError] = React.useState(null);
+  React.useEffect(() => {
+    if (open) {
+      setDescription(initial?.description ?? "");
+      setQuantity(initial?.quantity != null ? String(initial.quantity) : "");
+      setUnitPriceNet(initial?.unitPriceNet != null ? String(initial.unitPriceNet) : "");
+      setTotalOverride(initial?.totalNetAmount != null ? String(initial.totalNetAmount) : "");
+      setError(null);
+    }
+  }, [open, initial]);
+  const handleSubmit = React.useCallback(async () => {
+    const trimmedDescription = description.trim();
+    if (!trimmedDescription) {
+      setError(t("billing.invoices.lines.form.error.description_required", "Description is required"));
+      return;
+    }
+    const quantityValue = toNumber(quantity);
+    if (quantityValue == null || quantityValue < 0) {
+      setError(t("billing.invoices.lines.form.error.quantity_invalid", "Quantity must be a non-negative number"));
+      return;
+    }
+    const unitPriceValue = toNumber(unitPriceNet);
+    if (unitPriceValue == null) {
+      setError(t("billing.invoices.lines.form.error.unit_price_invalid", "Unit price must be a number"));
+      return;
+    }
+    const totalOverrideRaw = totalOverride.trim();
+    let totalOverrideValue;
+    if (totalOverrideRaw !== "") {
+      const parsed = toNumber(totalOverrideRaw);
+      if (parsed == null) {
+        setError(t("billing.invoices.lines.form.error.total_invalid", "Total override must be a number when set"));
+        return;
+      }
+      totalOverrideValue = parsed;
+    }
+    setError(null);
+    await onSubmit({
+      description: trimmedDescription,
+      quantity: quantityValue,
+      unitPriceNet: unitPriceValue,
+      totalNetAmount: totalOverrideValue
+    });
+  }, [description, onSubmit, quantity, t, totalOverride, unitPriceNet]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+        event.preventDefault();
+        void handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const computedTotal = React.useMemo(() => {
+    const q = toNumber(quantity);
+    const u = toNumber(unitPriceNet);
+    if (q == null || u == null) return null;
+    return (Math.round(q * u * 100) / 100).toFixed(2);
+  }, [quantity, unitPriceNet]);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (next) => {
+    if (!next) onCancel();
+  }, children: /* @__PURE__ */ jsxs(DialogContent, { onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: mode === "add" ? t("billing.invoices.lines.form.title_add", "Add invoice line") : t("billing.invoices.lines.form.title_edit", "Edit invoice line") }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: t(
+        "billing.invoices.lines.form.help",
+        "Changes are recorded in the draft-edit audit log."
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 py-2", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("billing.invoices.lines.form.description", "Description") }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            value: description,
+            onChange: (event) => setDescription(event.currentTarget.value),
+            rows: 2
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+        /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("billing.invoices.lines.form.quantity", "Quantity") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              value: quantity,
+              step: "0.0001",
+              onChange: (event) => setQuantity(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.invoices.lines.form.unit_price", "Unit price (net)") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              value: unitPriceNet,
+              step: "0.0001",
+              onChange: (event) => setUnitPriceNet(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.invoices.lines.form.total_override", "Total override (optional)") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            value: totalOverride,
+            step: "0.0001",
+            placeholder: computedTotal ?? "",
+            onChange: (event) => setTotalOverride(event.currentTarget.value)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: computedTotal != null ? t(
+          "billing.invoices.lines.form.computed_total",
+          "Computed total: {computed}"
+        ).replace("{computed}", computedTotal) : null })
+      ] }),
+      error ? /* @__PURE__ */ jsx("div", { className: "text-sm text-destructive", children: error }) : null
+    ] }),
+    /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 w-full", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(KbdShortcut, { keys: ["Ctrl/\u2318", "Enter"] }),
+        " ",
+        t("billing.invoices.lines.form.submit_hint", "to save,"),
+        " ",
+        /* @__PURE__ */ jsx(Kbd, { children: "Esc" }),
+        " ",
+        t("billing.invoices.lines.form.cancel_hint", "to cancel")
+      ] }),
+      /* @__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.invoices.lines.form.saving", "Saving\u2026") : t("billing.common.save", "Save")
+          }
+        )
+      ] })
+    ] }) })
+  ] }) });
+}
+export {
+  LineFormDialog
+};
+//# sourceMappingURL=LineFormDialog.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/billing/components/LineFormDialog.tsx"],
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@open-mercato/ui/primitives/dialog'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Textarea } from '@open-mercato/ui/primitives/textarea'\nimport { Kbd, KbdShortcut } from '@open-mercato/ui/primitives/kbd'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\n/**\n * Shared dialog for add / edit of an invoice line.\n *\n * - `mode='add'` shows empty fields and calls the\n *   `billing.invoices.add_draft_line` route on submit.\n * - `mode='edit'` pre-fills from `initial` and calls\n *   `billing.invoices.edit_draft_line`.\n *\n * The caller owns the network call (so we can stay simple and avoid\n * threading apiCall context through the component). On submit, this\n * dialog only emits `onSubmit(values)` and the parent decides which\n * command to hit.\n *\n * UX conventions per `@open-mercato/ui`:\n *   - `Cmd/Ctrl + Enter` submits.\n *   - `Escape` cancels (Radix Dialog handles this for free).\n *   - Hint row at the bottom lists both shortcuts via `Kbd` /\n *     `KbdShortcut` (not raw `<span>`).\n */\n\nexport type LineFormValues = {\n  description: string\n  quantity: number\n  unitPriceNet: number\n  /** Optional explicit total override (operator \"I know better\" path). */\n  totalNetAmount?: number\n}\n\nexport type LineFormDialogProps = {\n  open: boolean\n  mode: 'add' | 'edit'\n  /** Pre-fill values for edit mode. */\n  initial?: Partial<LineFormValues>\n  submitting?: boolean\n  onSubmit: (values: LineFormValues) => Promise<void> | void\n  onCancel: () => void\n}\n\nfunction toNumber(raw: string): number | null {\n  if (raw.trim() === '') return null\n  const n = Number.parseFloat(raw)\n  return Number.isFinite(n) ? n : null\n}\n\nexport function LineFormDialog({\n  open,\n  mode,\n  initial,\n  submitting = false,\n  onSubmit,\n  onCancel,\n}: LineFormDialogProps) {\n  const t = useT()\n  const [description, setDescription] = React.useState(initial?.description ?? '')\n  const [quantity, setQuantity] = React.useState(\n    initial?.quantity != null ? String(initial.quantity) : '',\n  )\n  const [unitPriceNet, setUnitPriceNet] = React.useState(\n    initial?.unitPriceNet != null ? String(initial.unitPriceNet) : '',\n  )\n  const [totalOverride, setTotalOverride] = React.useState(\n    initial?.totalNetAmount != null ? String(initial.totalNetAmount) : '',\n  )\n  const [error, setError] = React.useState<string | null>(null)\n\n  React.useEffect(() => {\n    if (open) {\n      setDescription(initial?.description ?? '')\n      setQuantity(initial?.quantity != null ? String(initial.quantity) : '')\n      setUnitPriceNet(initial?.unitPriceNet != null ? String(initial.unitPriceNet) : '')\n      setTotalOverride(initial?.totalNetAmount != null ? String(initial.totalNetAmount) : '')\n      setError(null)\n    }\n  }, [open, initial])\n\n  const handleSubmit = React.useCallback(async () => {\n    const trimmedDescription = description.trim()\n    if (!trimmedDescription) {\n      setError(t('billing.invoices.lines.form.error.description_required', 'Description is required'))\n      return\n    }\n    const quantityValue = toNumber(quantity)\n    if (quantityValue == null || quantityValue < 0) {\n      setError(t('billing.invoices.lines.form.error.quantity_invalid', 'Quantity must be a non-negative number'))\n      return\n    }\n    const unitPriceValue = toNumber(unitPriceNet)\n    if (unitPriceValue == null) {\n      setError(t('billing.invoices.lines.form.error.unit_price_invalid', 'Unit price must be a number'))\n      return\n    }\n    const totalOverrideRaw = totalOverride.trim()\n    let totalOverrideValue: number | undefined\n    if (totalOverrideRaw !== '') {\n      const parsed = toNumber(totalOverrideRaw)\n      if (parsed == null) {\n        setError(t('billing.invoices.lines.form.error.total_invalid', 'Total override must be a number when set'))\n        return\n      }\n      totalOverrideValue = parsed\n    }\n    setError(null)\n    await onSubmit({\n      description: trimmedDescription,\n      quantity: quantityValue,\n      unitPriceNet: unitPriceValue,\n      totalNetAmount: totalOverrideValue,\n    })\n  }, [description, onSubmit, quantity, t, totalOverride, unitPriceNet])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      // Cmd/Ctrl + Enter submits \u2014 required by the OM UX convention\n      // for every dialog. Escape is handled by Radix Dialog itself.\n      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {\n        event.preventDefault()\n        void handleSubmit()\n      }\n    },\n    [handleSubmit],\n  )\n\n  // Auto-compute total for the helper text \u2014 purely informational, not\n  // submitted unless the operator types into `totalOverride`.\n  const computedTotal = React.useMemo(() => {\n    const q = toNumber(quantity)\n    const u = toNumber(unitPriceNet)\n    if (q == null || u == null) return null\n    return (Math.round(q * u * 100) / 100).toFixed(2)\n  }, [quantity, unitPriceNet])\n\n  return (\n    <Dialog open={open} onOpenChange={(next) => { if (!next) onCancel() }}>\n      <DialogContent onKeyDown={handleKeyDown}>\n        <DialogHeader>\n          <DialogTitle>\n            {mode === 'add'\n              ? t('billing.invoices.lines.form.title_add', 'Add invoice line')\n              : t('billing.invoices.lines.form.title_edit', 'Edit invoice line')}\n          </DialogTitle>\n          <DialogDescription>\n            {t(\n              'billing.invoices.lines.form.help',\n              'Changes are recorded in the draft-edit audit log.',\n            )}\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"flex flex-col gap-4 py-2\">\n          <label className=\"flex flex-col gap-1 text-sm\">\n            <span className=\"text-muted-foreground\">\n              {t('billing.invoices.lines.form.description', 'Description')}\n            </span>\n            <Textarea\n              value={description}\n              onChange={(event) => setDescription(event.currentTarget.value)}\n              rows={2}\n            />\n          </label>\n          <div className=\"grid grid-cols-2 gap-3\">\n            <label className=\"flex flex-col gap-1 text-sm\">\n              <span className=\"text-muted-foreground\">\n                {t('billing.invoices.lines.form.quantity', 'Quantity')}\n              </span>\n              <Input\n                type=\"number\"\n                value={quantity}\n                step=\"0.0001\"\n                onChange={(event) => setQuantity(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.invoices.lines.form.unit_price', 'Unit price (net)')}\n              </span>\n              <Input\n                type=\"number\"\n                value={unitPriceNet}\n                step=\"0.0001\"\n                onChange={(event) => setUnitPriceNet(event.currentTarget.value)}\n              />\n            </label>\n          </div>\n          <label className=\"flex flex-col gap-1 text-sm\">\n            <span className=\"text-muted-foreground\">\n              {t('billing.invoices.lines.form.total_override', 'Total override (optional)')}\n            </span>\n            <Input\n              type=\"number\"\n              value={totalOverride}\n              step=\"0.0001\"\n              placeholder={computedTotal ?? ''}\n              onChange={(event) => setTotalOverride(event.currentTarget.value)}\n            />\n            <span className=\"text-xs text-muted-foreground\">\n              {computedTotal != null\n                ? t(\n                    'billing.invoices.lines.form.computed_total',\n                    'Computed total: {computed}',\n                  ).replace('{computed}', computedTotal)\n                : null}\n            </span>\n          </label>\n          {error ? (\n            <div className=\"text-sm text-destructive\">{error}</div>\n          ) : null}\n        </div>\n        <DialogFooter>\n          <div className=\"flex items-center justify-between gap-3 w-full\">\n            <span className=\"text-xs text-muted-foreground\">\n              <KbdShortcut keys={['Ctrl/\u2318', 'Enter']} />\n              {' '}\n              {t('billing.invoices.lines.form.submit_hint', 'to save,')}\n              {' '}\n              <Kbd>Esc</Kbd>\n              {' '}\n              {t('billing.invoices.lines.form.cancel_hint', 'to cancel')}\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\n                type=\"button\"\n                onClick={() => void handleSubmit()}\n                disabled={submitting}\n              >\n                {submitting\n                  ? t('billing.invoices.lines.form.saving', 'Saving\u2026')\n                  : t('billing.common.save', 'Save')}\n              </Button>\n            </div>\n          </div>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,262 @@
+"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 { Textarea } from "@open-mercato/ui/primitives/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@open-mercato/ui/primitives/select";
+import { Kbd, KbdShortcut } from "@open-mercato/ui/primitives/kbd";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+const EMPTY_VALUES = {
+  billAccountId: "",
+  uomCode: "",
+  quantity: "",
+  periodStart: "",
+  periodEnd: "",
+  lineDescription: "",
+  sourceRef: ""
+};
+function firstOfMonthIso() {
+  const now = /* @__PURE__ */ new Date();
+  return new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10);
+}
+function todayIso() {
+  return (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+}
+function mergeInitial(initial) {
+  return {
+    ...EMPTY_VALUES,
+    periodStart: EMPTY_VALUES.periodStart || firstOfMonthIso(),
+    periodEnd: EMPTY_VALUES.periodEnd || todayIso(),
+    ...initial
+  };
+}
+function toNumber(raw) {
+  if (raw.trim() === "") return null;
+  const n = Number.parseFloat(raw);
+  return Number.isFinite(n) ? n : null;
+}
+function UsageForm({
+  accountOptions,
+  initial,
+  submitting = false,
+  onSubmit,
+  onCancel
+}) {
+  const t = useT();
+  const [values, setValues] = React.useState(() => mergeInitial(initial));
+  const [error, setError] = React.useState(null);
+  const initialKey = React.useMemo(() => JSON.stringify(initial ?? null), [initial]);
+  React.useEffect(() => {
+    setValues(mergeInitial(initial));
+  }, [initialKey]);
+  const set = React.useCallback(
+    (key, value) => {
+      setValues((prev) => ({ ...prev, [key]: value }));
+    },
+    []
+  );
+  const handleSubmit = React.useCallback(async () => {
+    if (!values.billAccountId.trim()) {
+      setError(t("billing.usage.form.error.account_required", "Billing Account is required"));
+      return;
+    }
+    if (!values.uomCode.trim()) {
+      setError(t("billing.usage.form.error.uom_required", "UoM code is required"));
+      return;
+    }
+    const quantity = toNumber(values.quantity);
+    if (quantity == null || quantity < 0) {
+      setError(
+        t("billing.usage.form.error.quantity_invalid", "Quantity must be a non-negative number")
+      );
+      return;
+    }
+    if (!values.periodStart || !values.periodEnd) {
+      setError(t("billing.usage.form.error.period_required", "Period start and end are required"));
+      return;
+    }
+    if (values.periodEnd < values.periodStart) {
+      setError(
+        t("billing.usage.form.error.period_order", "Period end must be on or after period start")
+      );
+      return;
+    }
+    setError(null);
+    const payload = {
+      billAccountId: values.billAccountId,
+      uomCode: values.uomCode.trim(),
+      quantity,
+      periodStart: values.periodStart,
+      periodEnd: values.periodEnd
+    };
+    if (values.lineDescription.trim()) payload.lineDescription = values.lineDescription.trim();
+    if (values.sourceRef.trim()) payload.sourceRef = values.sourceRef.trim();
+    await onSubmit(payload);
+  }, [onSubmit, t, values]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+        event.preventDefault();
+        void handleSubmit();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        onCancel();
+      }
+    },
+    [handleSubmit, onCancel]
+  );
+  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 col-span-2", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          t("billing.usage.form.account", "Billing Account"),
+          /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: values.billAccountId,
+            onValueChange: (next) => set("billAccountId", next),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(
+                SelectValue,
+                {
+                  placeholder: t("billing.usage.form.account.placeholder", "Select an account")
+                }
+              ) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: accountOptions.map((opt) => /* @__PURE__ */ jsxs(SelectItem, { value: opt.id, children: [
+                opt.name,
+                " \xB7 ",
+                opt.customer_id,
+                " \xB7 ",
+                opt.currency_code
+              ] }, opt.id)) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          t("billing.usage.form.uom_code", "UoM code"),
+          /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: values.uomCode,
+            placeholder: t("billing.usage.form.uom_code.placeholder", "api_request, gb, seat, \u2026"),
+            onChange: (event) => set("uomCode", event.currentTarget.value)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t(
+          "billing.usage.form.uom_code.help",
+          "Must exactly match the UoM on a usage Billing Item for this account \u2014 no conversion."
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          t("billing.usage.form.quantity", "Quantity"),
+          /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            step: "0.0001",
+            min: "0",
+            value: values.quantity,
+            onChange: (event) => set("quantity", event.currentTarget.value)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t(
+          "billing.usage.form.quantity.help",
+          "Total units consumed in the period (pre-aggregated)."
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          t("billing.usage.form.period_start", "Period start"),
+          /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "date",
+            value: values.periodStart,
+            onChange: (event) => set("periodStart", 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.usage.form.period_end", "Period end"),
+          /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "date",
+            value: values.periodEnd,
+            onChange: (event) => set("periodEnd", 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.usage.form.description", "Description (optional)") }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            value: values.lineDescription,
+            rows: 2,
+            onChange: (event) => set("lineDescription", event.currentTarget.value)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t(
+          "billing.usage.form.description.help",
+          "Shown on its own invoice line when set; otherwise matching records are aggregated into one line."
+        ) })
+      ] }),
+      /* @__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.usage.form.source_ref", "Source reference (optional)") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: values.sourceRef,
+            onChange: (event) => set("sourceRef", event.currentTarget.value)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t(
+          "billing.usage.form.source_ref.help",
+          "Idempotency key \u2014 re-submitting the same reference for this account is deduplicated."
+        ) })
+      ] })
+    ] }),
+    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.usage.form.submit_hint", "to save,"),
+        " ",
+        /* @__PURE__ */ jsx(Kbd, { children: "Esc" }),
+        " ",
+        t("billing.usage.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.usage.form.saving", "Saving\u2026") : t("billing.usage.form.create", "Record usage") })
+      ] })
+    ] })
+  ] });
+}
+export {
+  UsageForm
+};
+//# sourceMappingURL=UsageForm.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/billing/components/UsageForm.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 { Textarea } from '@open-mercato/ui/primitives/textarea'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@open-mercato/ui/primitives/select'\nimport { Kbd, KbdShortcut } from '@open-mercato/ui/primitives/kbd'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\n/**\n * Manual Billing Account Usage entry form.\n *\n * Usage is normally ingested by an external metering system via\n * `POST /api/billing/usage` + an `X-Api-Key` scoped to\n * `billing.usage.ingest`. This form gives operators the same path from\n * the admin UI \u2014 for corrections, demos, or customers without an\n * automated meter. It POSTs to the very same endpoint, so the\n * idempotency (`sourceRef`) and append-only guarantees are identical.\n *\n * Usage records are immutable once written \u2014 there is no edit/delete,\n * hence this is a create-only form (mirrors the `billing.usage.create`\n * command, which has no update sibling).\n */\n\n// The accounts list API returns snake_case rows \u2014 mirror that here so\n// the picker reads real values (camelCase would resolve to `undefined`).\nexport type UsageAccountOption = {\n  id: string\n  name: string\n  customer_id: string\n  currency_code: string\n}\n\nexport type UsageFormValues = {\n  billAccountId: string\n  uomCode: string\n  quantity: string\n  periodStart: string\n  periodEnd: string\n  lineDescription: string\n  sourceRef: string\n}\n\nexport type AssembledUsagePayload = {\n  billAccountId: string\n  uomCode: string\n  quantity: number\n  periodStart: string\n  periodEnd: string\n  lineDescription?: string\n  sourceRef?: string\n}\n\nexport type UsageFormProps = {\n  accountOptions: UsageAccountOption[]\n  initial?: Partial<UsageFormValues>\n  submitting?: boolean\n  onSubmit: (assembled: AssembledUsagePayload) => Promise<void> | void\n  onCancel: () => void\n}\n\nconst EMPTY_VALUES: UsageFormValues = {\n  billAccountId: '',\n  uomCode: '',\n  quantity: '',\n  periodStart: '',\n  periodEnd: '',\n  lineDescription: '',\n  sourceRef: '',\n}\n\nfunction firstOfMonthIso(): string {\n  const now = new Date()\n  return new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10)\n}\n\nfunction todayIso(): string {\n  return new Date().toISOString().slice(0, 10)\n}\n\nfunction mergeInitial(initial: Partial<UsageFormValues> | undefined): UsageFormValues {\n  return {\n    ...EMPTY_VALUES,\n    periodStart: EMPTY_VALUES.periodStart || firstOfMonthIso(),\n    periodEnd: EMPTY_VALUES.periodEnd || todayIso(),\n    ...initial,\n  }\n}\n\nfunction toNumber(raw: string): number | null {\n  if (raw.trim() === '') return null\n  const n = Number.parseFloat(raw)\n  return Number.isFinite(n) ? n : null\n}\n\nexport function UsageForm({\n  accountOptions,\n  initial,\n  submitting = false,\n  onSubmit,\n  onCancel,\n}: UsageFormProps) {\n  const t = useT()\n  const [values, setValues] = React.useState<UsageFormValues>(() => mergeInitial(initial))\n  const [error, setError] = React.useState<string | null>(null)\n\n  const initialKey = React.useMemo(() => JSON.stringify(initial ?? null), [initial])\n  React.useEffect(() => {\n    // Depend on the serialized key only \u2014 `initial` is a fresh object ref on\n    // every parent render, so including it would re-run this effect (and wipe\n    // in-progress edits) whenever the parent re-renders for an unrelated reason.\n    setValues(mergeInitial(initial))\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialKey])\n\n  const set = React.useCallback(\n    <K extends keyof UsageFormValues>(key: K, value: UsageFormValues[K]) => {\n      setValues((prev) => ({ ...prev, [key]: value }))\n    },\n    [],\n  )\n\n  const handleSubmit = React.useCallback(async () => {\n    if (!values.billAccountId.trim()) {\n      setError(t('billing.usage.form.error.account_required', 'Billing Account is required'))\n      return\n    }\n    if (!values.uomCode.trim()) {\n      setError(t('billing.usage.form.error.uom_required', 'UoM code is required'))\n      return\n    }\n    const quantity = toNumber(values.quantity)\n    if (quantity == null || quantity < 0) {\n      setError(\n        t('billing.usage.form.error.quantity_invalid', 'Quantity must be a non-negative number'),\n      )\n      return\n    }\n    if (!values.periodStart || !values.periodEnd) {\n      setError(t('billing.usage.form.error.period_required', 'Period start and end are required'))\n      return\n    }\n    if (values.periodEnd < values.periodStart) {\n      setError(\n        t('billing.usage.form.error.period_order', 'Period end must be on or after period start'),\n      )\n      return\n    }\n    setError(null)\n\n    const payload: AssembledUsagePayload = {\n      billAccountId: values.billAccountId,\n      uomCode: values.uomCode.trim(),\n      quantity,\n      periodStart: values.periodStart,\n      periodEnd: values.periodEnd,\n    }\n    if (values.lineDescription.trim()) payload.lineDescription = values.lineDescription.trim()\n    if (values.sourceRef.trim()) payload.sourceRef = values.sourceRef.trim()\n    await onSubmit(payload)\n  }, [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      } else if (event.key === 'Escape') {\n        event.preventDefault()\n        onCancel()\n      }\n    },\n    [handleSubmit, onCancel],\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 col-span-2\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.usage.form.account', 'Billing Account')}\n            <span className=\"text-destructive\"> *</span>\n          </span>\n          <Select\n            value={values.billAccountId}\n            onValueChange={(next) => set('billAccountId', next)}\n          >\n            <SelectTrigger>\n              <SelectValue\n                placeholder={t('billing.usage.form.account.placeholder', 'Select an account')}\n              />\n            </SelectTrigger>\n            <SelectContent>\n              {accountOptions.map((opt) => (\n                <SelectItem key={opt.id} value={opt.id}>\n                  {opt.name} \u00B7 {opt.customer_id} \u00B7 {opt.currency_code}\n                </SelectItem>\n              ))}\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.usage.form.uom_code', 'UoM code')}\n            <span className=\"text-destructive\"> *</span>\n          </span>\n          <Input\n            value={values.uomCode}\n            placeholder={t('billing.usage.form.uom_code.placeholder', 'api_request, gb, seat, \u2026')}\n            onChange={(event) => set('uomCode', event.currentTarget.value)}\n          />\n          <span className=\"text-xs text-muted-foreground\">\n            {t(\n              'billing.usage.form.uom_code.help',\n              'Must exactly match the UoM on a usage Billing Item for this account \u2014 no conversion.',\n            )}\n          </span>\n        </label>\n\n        <label className=\"flex flex-col gap-1 text-sm\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.usage.form.quantity', 'Quantity')}\n            <span className=\"text-destructive\"> *</span>\n          </span>\n          <Input\n            type=\"number\"\n            step=\"0.0001\"\n            min=\"0\"\n            value={values.quantity}\n            onChange={(event) => set('quantity', event.currentTarget.value)}\n          />\n          <span className=\"text-xs text-muted-foreground\">\n            {t(\n              'billing.usage.form.quantity.help',\n              'Total units consumed in the period (pre-aggregated).',\n            )}\n          </span>\n        </label>\n\n        <label className=\"flex flex-col gap-1 text-sm\">\n          <span className=\"text-muted-foreground\">\n            {t('billing.usage.form.period_start', 'Period start')}\n            <span className=\"text-destructive\"> *</span>\n          </span>\n          <Input\n            type=\"date\"\n            value={values.periodStart}\n            onChange={(event) => set('periodStart', 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.usage.form.period_end', 'Period end')}\n            <span className=\"text-destructive\"> *</span>\n          </span>\n          <Input\n            type=\"date\"\n            value={values.periodEnd}\n            onChange={(event) => set('periodEnd', event.currentTarget.value)}\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.usage.form.description', 'Description (optional)')}\n          </span>\n          <Textarea\n            value={values.lineDescription}\n            rows={2}\n            onChange={(event) => set('lineDescription', event.currentTarget.value)}\n          />\n          <span className=\"text-xs text-muted-foreground\">\n            {t(\n              'billing.usage.form.description.help',\n              'Shown on its own invoice line when set; otherwise matching records are aggregated into one line.',\n            )}\n          </span>\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.usage.form.source_ref', 'Source reference (optional)')}\n          </span>\n          <Input\n            value={values.sourceRef}\n            onChange={(event) => set('sourceRef', event.currentTarget.value)}\n          />\n          <span className=\"text-xs text-muted-foreground\">\n            {t(\n              'billing.usage.form.source_ref.help',\n              'Idempotency key \u2014 re-submitting the same reference for this account is deduplicated.',\n            )}\n          </span>\n        </label>\n      </div>\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.usage.form.submit_hint', 'to save,')} <Kbd>Esc</Kbd>{' '}\n          {t('billing.usage.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.usage.form.saving', 'Saving\u2026')\n              : t('billing.usage.form.create', 'Record usage')}\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}