@withpotter/components 0.13.0-next.101

package/dist/billing/rates-tab.js

@@ -0,0 +1,359 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Button } from "@withpotter/ui-kit/button";
+import { Badge } from "@withpotter/ui-kit/badge";
+import { Select } from "@withpotter/ui-kit/select";
+import { Calculator, Landmark, Percent, ReceiptText } from "lucide-react";
+const CATEGORY_OPTIONS = [
+  { value: "selling", label: "Selling" },
+  { value: "bookings", label: "Bookings" },
+  { value: "digital", label: "Digital" },
+  { value: "consultations", label: "Consultations" },
+  { value: "events", label: "Events" }
+];
+function RatesTab({
+  policy,
+  ledgerSummary,
+  policyLoading,
+  ledgerLoading,
+  previewResult,
+  previewPending,
+  onPreview,
+  formatCurrency
+}) {
+  const currency = policy?.policy.currency ?? ledgerSummary?.context.currency ?? "NGN";
+  const [category, setCategory] = useState("selling");
+  const [amount, setAmount] = useState("10000");
+  const categoryRules = useMemo(() => {
+    const rules = policy?.policy.rules.platform_fee ?? {};
+    return CATEGORY_OPTIONS.map((option) => ({
+      ...option,
+      rule: rules[option.value]
+    }));
+  }, [policy]);
+  const submitPreview = () => {
+    const amountValue = Number(amount.replace(/,/g, ""));
+    if (!Number.isFinite(amountValue) || amountValue < 0) return;
+    onPreview({
+      lineItems: [
+        {
+          id: "dashboard-preview",
+          category,
+          grossCents: Math.round(amountValue * 100)
+        }
+      ]
+    });
+  };
+  const totals = previewResult?.calculation.totals;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-3", children: [
+      /* @__PURE__ */ jsx(
+        SummaryTile,
+        {
+          icon: Percent,
+          label: "Policy",
+          value: policyLoading ? "Loading" : policy ? `v${policy.policy.version}` : "Unavailable",
+          detail: policy ? `${policy.policy.region} \xB7 ${policy.policy.tier}` : "Current rates"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SummaryTile,
+        {
+          icon: Landmark,
+          label: "Settlement fee",
+          value: formatMinorCurrency(
+            policy?.policy.rules.settlement_fee_cents ?? ledgerSummary?.policy?.settlementFeeCents ?? 0,
+            currency,
+            formatCurrency
+          ),
+          detail: "Per paid order or booking"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SummaryTile,
+        {
+          icon: ReceiptText,
+          label: "Ledger entries",
+          value: ledgerLoading ? "Loading" : (ledgerSummary?.totals.feeLedgerEntries ?? 0).toLocaleString(),
+          detail: "Backfilled and recorded fees"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "bg-[var(--bg-base)] rounded-md border border-[var(--border-default)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-[var(--border-subtle)] px-5 py-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "rounded-md bg-[var(--accent-secondary)] p-2 text-brand-500", children: /* @__PURE__ */ jsx(Calculator, { className: "h-5 w-5" }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-base font-medium text-[var(--text-primary)]", children: "Fee preview" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: "Estimate platform, VAT, and settlement fees" })
+          ] })
+        ] }),
+        policy?.policy.version ? /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
+          "v",
+          policy.policy.version
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-5 p-5 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "block text-sm font-medium text-[var(--text-primary)]", children: [
+            /* @__PURE__ */ jsx("span", { className: "block mb-2", children: "Category" }),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: category,
+                onChange: (value) => setCategory(value),
+                options: CATEGORY_OPTIONS
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-[var(--text-primary)]", children: [
+            "Gross amount",
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: amount,
+                onChange: (event) => setAmount(event.target.value),
+                inputMode: "decimal",
+                className: "mt-2 h-10 w-full rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-3 text-sm text-[var(--text-primary)] outline-none focus:border-brand-500",
+                placeholder: "10000"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              onClick: submitPreview,
+              disabled: previewPending || !policy,
+              className: "w-full",
+              children: previewPending ? "Calculating..." : "Calculate fees"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "rounded-md border border-[var(--border-subtle)] bg-[var(--bg-muted)] p-4", children: totals ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx(
+            PreviewRow,
+            {
+              label: "Gross",
+              value: formatMinorCurrency(
+                totals.grossCents,
+                currency,
+                formatCurrency
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PreviewRow,
+            {
+              label: "Platform fee",
+              value: formatMinorCurrency(
+                totals.platformFeeCents,
+                currency,
+                formatCurrency
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PreviewRow,
+            {
+              label: "Settlement fee",
+              value: formatMinorCurrency(
+                totals.settlementFeeCents,
+                currency,
+                formatCurrency
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PreviewRow,
+            {
+              label: "VAT",
+              value: formatMinorCurrency(
+                totals.vatCents,
+                currency,
+                formatCurrency
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "h-px bg-[var(--border-subtle)]" }),
+          /* @__PURE__ */ jsx(
+            PreviewRow,
+            {
+              label: "Total Box fees",
+              value: formatMinorCurrency(
+                totals.platformFeeCents + totals.settlementFeeCents + totals.vatCents,
+                currency,
+                formatCurrency
+              ),
+              emphasis: true
+            }
+          ),
+          (totals.savingsCents > 0 || totals.phantomSavingsCents > 0) && /* @__PURE__ */ jsx(
+            PreviewRow,
+            {
+              label: totals.savingsCents > 0 ? "Savings" : "Potential savings",
+              value: formatMinorCurrency(
+                Math.max(totals.savingsCents, totals.phantomSavingsCents),
+                currency,
+                formatCurrency
+              )
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx("div", { className: "flex min-h-[220px] items-center justify-center text-center text-sm text-[var(--text-tertiary)]", children: "Run a preview to see the fee breakdown." }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "grid gap-4 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-base)] rounded-md border border-[var(--border-default)] p-5", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-base font-medium text-[var(--text-primary)]", children: "Category rates" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-4 divide-y divide-[var(--border-subtle)]", children: categoryRules.map(({ value, label, rule }) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between gap-4 py-3 text-sm",
+            children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "font-medium text-[var(--text-primary)]", children: label }),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--text-tertiary)]", children: [
+                  "Minimum",
+                  " ",
+                  formatMinorCurrency(
+                    rule?.min_fee_cents ?? 0,
+                    currency,
+                    formatCurrency
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "font-semibold tabular-nums text-[var(--text-primary)]", children: formatBasisPoints(rule?.rate_bps ?? 0) })
+            ]
+          },
+          value
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-base)] rounded-md border border-[var(--border-default)] p-5", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-base font-medium text-[var(--text-primary)]", children: "Ledger summary" }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ jsx(
+            Metric,
+            {
+              label: "Gross tracked",
+              value: formatMinorCurrency(
+                ledgerSummary?.totals.grossCents ?? 0,
+                currency,
+                formatCurrency
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Metric,
+            {
+              label: "Platform fees",
+              value: formatMinorCurrency(
+                ledgerSummary?.totals.platformFeeCents ?? 0,
+                currency,
+                formatCurrency
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Metric,
+            {
+              label: "VAT",
+              value: formatMinorCurrency(
+                ledgerSummary?.totals.vatCents ?? 0,
+                currency,
+                formatCurrency
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Metric,
+            {
+              label: "Rev share",
+              value: formatMinorCurrency(
+                ledgerSummary?.totals.revShareCents ?? 0,
+                currency,
+                formatCurrency
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-5 divide-y divide-[var(--border-subtle)]", children: [
+          (ledgerSummary?.recentFees ?? []).slice(0, 5).map((fee) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between gap-4 py-3 text-sm",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("p", { className: "truncate font-medium capitalize text-[var(--text-primary)]", children: fee.category }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: new Date(fee.createdAt).toLocaleDateString() })
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "font-semibold tabular-nums text-[var(--text-primary)]", children: formatMinorCurrency(
+                  fee.platformFeeCents + fee.vatCents,
+                  currency,
+                  formatCurrency
+                ) })
+              ]
+            },
+            fee.id
+          )),
+          !ledgerLoading && (ledgerSummary?.recentFees.length ?? 0) === 0 && /* @__PURE__ */ jsx("p", { className: "py-6 text-center text-sm text-[var(--text-tertiary)]", children: "No fee ledger entries yet." })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function SummaryTile({
+  icon: Icon,
+  label,
+  value,
+  detail
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-base)] rounded-md border border-[var(--border-default)] p-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-md bg-[var(--accent-secondary)] p-2 text-brand-500", children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: label }),
+        /* @__PURE__ */ jsx("p", { className: "truncate text-lg font-semibold text-[var(--text-primary)]", children: value })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-[var(--text-tertiary)]", children: detail })
+  ] });
+}
+function PreviewRow({
+  label,
+  value,
+  emphasis
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 text-sm", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: emphasis ? "font-medium text-[var(--text-primary)]" : "text-[var(--text-tertiary)]",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: emphasis ? "font-semibold tabular-nums text-[var(--text-primary)]" : "font-medium tabular-nums text-[var(--text-primary)]",
+        children: value
+      }
+    )
+  ] });
+}
+function Metric({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-[var(--border-subtle)] bg-[var(--bg-muted)] p-3", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: label }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-semibold tabular-nums text-[var(--text-primary)]", children: value })
+  ] });
+}
+function formatMinorCurrency(valueCents, currency, formatCurrency) {
+  return formatCurrency(Math.round(valueCents / 100), currency);
+}
+function formatBasisPoints(bps) {
+  return `${(bps / 100).toFixed(bps % 100 === 0 ? 0 : 2)}%`;
+}
+export {
+  RatesTab
+};
+//# sourceMappingURL=rates-tab.js.map

package/dist/billing/rates-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/billing/rates-tab.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Badge } from '@withpotter/ui-kit/badge';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { Calculator, Landmark, Percent, ReceiptText } from 'lucide-react';\nimport type {\n  BillingLedgerSummaryResponse,\n  BusinessCategory,\n  CurrentPricingPolicyResponse,\n  FeePreviewRequest,\n  FeePreviewResponse,\n} from './helpers';\n\nconst CATEGORY_OPTIONS: Array<{ value: BusinessCategory; label: string }> = [\n  { value: 'selling', label: 'Selling' },\n  { value: 'bookings', label: 'Bookings' },\n  { value: 'digital', label: 'Digital' },\n  { value: 'consultations', label: 'Consultations' },\n  { value: 'events', label: 'Events' },\n];\n\ninterface RatesTabProps {\n  policy: CurrentPricingPolicyResponse | undefined;\n  ledgerSummary: BillingLedgerSummaryResponse | undefined;\n  policyLoading: boolean;\n  ledgerLoading: boolean;\n  previewResult: FeePreviewResponse | undefined;\n  previewPending: boolean;\n  onPreview: (payload: FeePreviewRequest) => void;\n  formatCurrency: (amount: number, currency?: string) => string;\n}\n\nexport function RatesTab({\n  policy,\n  ledgerSummary,\n  policyLoading,\n  ledgerLoading,\n  previewResult,\n  previewPending,\n  onPreview,\n  formatCurrency,\n}: RatesTabProps) {\n  const currency =\n    policy?.policy.currency ?? ledgerSummary?.context.currency ?? 'NGN';\n  const [category, setCategory] = useState<BusinessCategory>('selling');\n  const [amount, setAmount] = useState('10000');\n\n  const categoryRules = useMemo(() => {\n    const rules = policy?.policy.rules.platform_fee ?? {};\n    return CATEGORY_OPTIONS.map((option) => ({\n      ...option,\n      rule: rules[option.value],\n    }));\n  }, [policy]);\n\n  const submitPreview = () => {\n    const amountValue = Number(amount.replace(/,/g, ''));\n    if (!Number.isFinite(amountValue) || amountValue < 0) return;\n    onPreview({\n      lineItems: [\n        {\n          id: 'dashboard-preview',\n          category,\n          grossCents: Math.round(amountValue * 100),\n        },\n      ],\n    });\n  };\n\n  const totals = previewResult?.calculation.totals;\n\n  return (\n    <div className=\"space-y-6\">\n      <div className=\"grid gap-4 lg:grid-cols-3\">\n        <SummaryTile\n          icon={Percent}\n          label=\"Policy\"\n          value={\n            policyLoading\n              ? 'Loading'\n              : policy\n                ? `v${policy.policy.version}`\n                : 'Unavailable'\n          }\n          detail={\n            policy\n              ? `${policy.policy.region} · ${policy.policy.tier}`\n              : 'Current rates'\n          }\n        />\n        <SummaryTile\n          icon={Landmark}\n          label=\"Settlement fee\"\n          value={formatMinorCurrency(\n            policy?.policy.rules.settlement_fee_cents ??\n              ledgerSummary?.policy?.settlementFeeCents ??\n              0,\n            currency,\n            formatCurrency,\n          )}\n          detail=\"Per paid order or booking\"\n        />\n        <SummaryTile\n          icon={ReceiptText}\n          label=\"Ledger entries\"\n          value={\n            ledgerLoading\n              ? 'Loading'\n              : (ledgerSummary?.totals.feeLedgerEntries ?? 0).toLocaleString()\n          }\n          detail=\"Backfilled and recorded fees\"\n        />\n      </div>\n\n      <section className=\"bg-[var(--bg-base)] rounded-md border border-[var(--border-default)]\">\n        <div className=\"flex items-center justify-between gap-3 border-b border-[var(--border-subtle)] px-5 py-4\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"rounded-md bg-[var(--accent-secondary)] p-2 text-brand-500\">\n              <Calculator className=\"h-5 w-5\" />\n            </div>\n            <div>\n              <h2 className=\"text-base font-medium text-[var(--text-primary)]\">\n                Fee preview\n              </h2>\n              <p className=\"text-sm text-[var(--text-tertiary)]\">\n                Estimate platform, VAT, and settlement fees\n              </p>\n            </div>\n          </div>\n          {policy?.policy.version ? (\n            <Badge variant=\"secondary\">v{policy.policy.version}</Badge>\n          ) : null}\n        </div>\n\n        <div className=\"grid gap-5 p-5 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]\">\n          <div className=\"space-y-4\">\n            <div className=\"block text-sm font-medium text-[var(--text-primary)]\">\n              <span className=\"block mb-2\">Category</span>\n              <Select\n                value={category}\n                onChange={(value) => setCategory(value as BusinessCategory)}\n                options={CATEGORY_OPTIONS}\n              />\n            </div>\n            <label className=\"block text-sm font-medium text-[var(--text-primary)]\">\n              Gross amount\n              <input\n                value={amount}\n                onChange={(event) => setAmount(event.target.value)}\n                inputMode=\"decimal\"\n                className=\"mt-2 h-10 w-full rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-3 text-sm text-[var(--text-primary)] outline-none focus:border-brand-500\"\n                placeholder=\"10000\"\n              />\n            </label>\n            <Button\n              type=\"button\"\n              onClick={submitPreview}\n              disabled={previewPending || !policy}\n              className=\"w-full\"\n            >\n              {previewPending ? 'Calculating...' : 'Calculate fees'}\n            </Button>\n          </div>\n\n          <div className=\"rounded-md border border-[var(--border-subtle)] bg-[var(--bg-muted)] p-4\">\n            {totals ? (\n              <div className=\"space-y-3\">\n                <PreviewRow\n                  label=\"Gross\"\n                  value={formatMinorCurrency(\n                    totals.grossCents,\n                    currency,\n                    formatCurrency,\n                  )}\n                />\n                <PreviewRow\n                  label=\"Platform fee\"\n                  value={formatMinorCurrency(\n                    totals.platformFeeCents,\n                    currency,\n                    formatCurrency,\n                  )}\n                />\n                <PreviewRow\n                  label=\"Settlement fee\"\n                  value={formatMinorCurrency(\n                    totals.settlementFeeCents,\n                    currency,\n                    formatCurrency,\n                  )}\n                />\n                <PreviewRow\n                  label=\"VAT\"\n                  value={formatMinorCurrency(\n                    totals.vatCents,\n                    currency,\n                    formatCurrency,\n                  )}\n                />\n                <div className=\"h-px bg-[var(--border-subtle)]\" />\n                <PreviewRow\n                  label=\"Total Box fees\"\n                  value={formatMinorCurrency(\n                    totals.platformFeeCents +\n                      totals.settlementFeeCents +\n                      totals.vatCents,\n                    currency,\n                    formatCurrency,\n                  )}\n                  emphasis\n                />\n                {(totals.savingsCents > 0 ||\n                  totals.phantomSavingsCents > 0) && (\n                  <PreviewRow\n                    label={\n                      totals.savingsCents > 0 ? 'Savings' : 'Potential savings'\n                    }\n                    value={formatMinorCurrency(\n                      Math.max(totals.savingsCents, totals.phantomSavingsCents),\n                      currency,\n                      formatCurrency,\n                    )}\n                  />\n                )}\n              </div>\n            ) : (\n              <div className=\"flex min-h-[220px] items-center justify-center text-center text-sm text-[var(--text-tertiary)]\">\n                Run a preview to see the fee breakdown.\n              </div>\n            )}\n          </div>\n        </div>\n      </section>\n\n      <section className=\"grid gap-4 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]\">\n        <div className=\"bg-[var(--bg-base)] rounded-md border border-[var(--border-default)] p-5\">\n          <h2 className=\"text-base font-medium text-[var(--text-primary)]\">\n            Category rates\n          </h2>\n          <div className=\"mt-4 divide-y divide-[var(--border-subtle)]\">\n            {categoryRules.map(({ value, label, rule }) => (\n              <div\n                key={value}\n                className=\"flex items-center justify-between gap-4 py-3 text-sm\"\n              >\n                <div>\n                  <p className=\"font-medium text-[var(--text-primary)]\">\n                    {label}\n                  </p>\n                  <p className=\"text-xs text-[var(--text-tertiary)]\">\n                    Minimum{' '}\n                    {formatMinorCurrency(\n                      rule?.min_fee_cents ?? 0,\n                      currency,\n                      formatCurrency,\n                    )}\n                  </p>\n                </div>\n                <p className=\"font-semibold tabular-nums text-[var(--text-primary)]\">\n                  {formatBasisPoints(rule?.rate_bps ?? 0)}\n                </p>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"bg-[var(--bg-base)] rounded-md border border-[var(--border-default)] p-5\">\n          <h2 className=\"text-base font-medium text-[var(--text-primary)]\">\n            Ledger summary\n          </h2>\n          <div className=\"mt-4 grid grid-cols-2 gap-3\">\n            <Metric\n              label=\"Gross tracked\"\n              value={formatMinorCurrency(\n                ledgerSummary?.totals.grossCents ?? 0,\n                currency,\n                formatCurrency,\n              )}\n            />\n            <Metric\n              label=\"Platform fees\"\n              value={formatMinorCurrency(\n                ledgerSummary?.totals.platformFeeCents ?? 0,\n                currency,\n                formatCurrency,\n              )}\n            />\n            <Metric\n              label=\"VAT\"\n              value={formatMinorCurrency(\n                ledgerSummary?.totals.vatCents ?? 0,\n                currency,\n                formatCurrency,\n              )}\n            />\n            <Metric\n              label=\"Rev share\"\n              value={formatMinorCurrency(\n                ledgerSummary?.totals.revShareCents ?? 0,\n                currency,\n                formatCurrency,\n              )}\n            />\n          </div>\n          <div className=\"mt-5 divide-y divide-[var(--border-subtle)]\">\n            {(ledgerSummary?.recentFees ?? []).slice(0, 5).map((fee) => (\n              <div\n                key={fee.id}\n                className=\"flex items-center justify-between gap-4 py-3 text-sm\"\n              >\n                <div className=\"min-w-0\">\n                  <p className=\"truncate font-medium capitalize text-[var(--text-primary)]\">\n                    {fee.category}\n                  </p>\n                  <p className=\"text-xs text-[var(--text-tertiary)]\">\n                    {new Date(fee.createdAt).toLocaleDateString()}\n                  </p>\n                </div>\n                <p className=\"font-semibold tabular-nums text-[var(--text-primary)]\">\n                  {formatMinorCurrency(\n                    fee.platformFeeCents + fee.vatCents,\n                    currency,\n                    formatCurrency,\n                  )}\n                </p>\n              </div>\n            ))}\n            {!ledgerLoading &&\n              (ledgerSummary?.recentFees.length ?? 0) === 0 && (\n                <p className=\"py-6 text-center text-sm text-[var(--text-tertiary)]\">\n                  No fee ledger entries yet.\n                </p>\n              )}\n          </div>\n        </div>\n      </section>\n    </div>\n  );\n}\n\nfunction SummaryTile({\n  icon: Icon,\n  label,\n  value,\n  detail,\n}: {\n  icon: React.ComponentType<{ className?: string }>;\n  label: string;\n  value: string;\n  detail: string;\n}) {\n  return (\n    <div className=\"bg-[var(--bg-base)] rounded-md border border-[var(--border-default)] p-5\">\n      <div className=\"flex items-center gap-3\">\n        <div className=\"rounded-md bg-[var(--accent-secondary)] p-2 text-brand-500\">\n          <Icon className=\"h-5 w-5\" />\n        </div>\n        <div className=\"min-w-0\">\n          <p className=\"text-xs text-[var(--text-tertiary)]\">{label}</p>\n          <p className=\"truncate text-lg font-semibold text-[var(--text-primary)]\">\n            {value}\n          </p>\n        </div>\n      </div>\n      <p className=\"mt-3 text-sm text-[var(--text-tertiary)]\">{detail}</p>\n    </div>\n  );\n}\n\nfunction PreviewRow({\n  label,\n  value,\n  emphasis,\n}: {\n  label: string;\n  value: string;\n  emphasis?: boolean;\n}) {\n  return (\n    <div className=\"flex items-center justify-between gap-4 text-sm\">\n      <span\n        className={\n          emphasis\n            ? 'font-medium text-[var(--text-primary)]'\n            : 'text-[var(--text-tertiary)]'\n        }\n      >\n        {label}\n      </span>\n      <span\n        className={\n          emphasis\n            ? 'font-semibold tabular-nums text-[var(--text-primary)]'\n            : 'font-medium tabular-nums text-[var(--text-primary)]'\n        }\n      >\n        {value}\n      </span>\n    </div>\n  );\n}\n\nfunction Metric({ label, value }: { label: string; value: string }) {\n  return (\n    <div className=\"rounded-md border border-[var(--border-subtle)] bg-[var(--bg-muted)] p-3\">\n      <p className=\"text-xs text-[var(--text-tertiary)]\">{label}</p>\n      <p className=\"mt-1 text-sm font-semibold tabular-nums text-[var(--text-primary)]\">\n        {value}\n      </p>\n    </div>\n  );\n}\n\nfunction formatMinorCurrency(\n  valueCents: number,\n  currency: string,\n  formatCurrency: (amount: number, currency?: string) => string,\n) {\n  return formatCurrency(Math.round(valueCents / 100), currency);\n}\n\nfunction formatBasisPoints(bps: number) {\n  return `${(bps / 100).toFixed(bps % 100 === 0 ? 0 : 2)}%`;\n}\n"],"mappings":"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","names":[]}

package/dist/billing/storage-purchase-modal.d.ts

@@ -0,0 +1,16 @@
+import type { StoragePack } from './helpers';
+interface StoragePurchaseModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    packs: StoragePack[];
+    usedBytes: number;
+    addOnBytes: number;
+    /** Baseline storage included with every plan (bytes) */
+    baselineBytes: number;
+    isPending: boolean;
+    onPurchase: (gb: number, currency: string) => void;
+    formatCurrency: (amount: number, currency?: string) => string;
+    currency: string;
+}
+export declare function StoragePurchaseModal({ open, onOpenChange, packs, usedBytes, addOnBytes, baselineBytes, isPending, onPurchase, formatCurrency, currency, }: StoragePurchaseModalProps): import("react").JSX.Element;
+export {};

package/dist/billing/storage-purchase-modal.js

@@ -0,0 +1,139 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { HardDrive, Check, Wifi } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter
+} from "@withpotter/ui-kit/dialog";
+import { formatBytes } from "@withpotter/lib/utils";
+function StoragePurchaseModal({
+  open,
+  onOpenChange,
+  packs,
+  usedBytes,
+  addOnBytes,
+  baselineBytes,
+  isPending,
+  onPurchase,
+  formatCurrency,
+  currency
+}) {
+  const defaultPack = packs.find((p) => p.isPopular) ?? packs[0];
+  const [selectedGb, setSelectedGb] = useState(
+    defaultPack?.gb ?? null
+  );
+  const currentLimitBytes = baselineBytes + addOnBytes;
+  const selectedPack = packs.find((p) => p.gb === selectedGb);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(HardDrive, { className: "w-5 h-5 text-brand-500" }),
+        "Buy more storage"
+      ] }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Purchased storage is added permanently to your workspace and carries over between billing periods. Each pack includes a bundled monthly bandwidth allowance." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-[var(--bg-subtle)] border border-[var(--border-subtle)] px-4 py-3 text-sm space-y-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[var(--text-secondary)]", children: "Currently using" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--text-primary)]", children: formatBytes(usedBytes) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[var(--text-secondary)]", children: "Current limit" }),
+        /* @__PURE__ */ jsxs("span", { className: "font-medium text-[var(--text-primary)]", children: [
+          formatBytes(currentLimitBytes),
+          addOnBytes > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[var(--text-muted)] font-normal ml-1", children: [
+            "(",
+            formatBytes(baselineBytes),
+            " + ",
+            formatBytes(addOnBytes),
+            " ",
+            "purchased)"
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Choose a storage pack:" }),
+      packs.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-muted)] text-center py-4", children: "Loading packs..." }),
+      packs.map((pack) => {
+        const isSelected = selectedGb === pack.gb;
+        const newLimit = currentLimitBytes + pack.gb * 1024 * 1024 * 1024;
+        const price = pack.prices[currency] ?? pack.prices["NGN"] ?? 0;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSelectedGb(pack.gb),
+            className: `w-full flex items-center justify-between px-4 py-3 rounded-md border text-sm transition-colors cursor-pointer ${isSelected ? "border-brand-500 bg-brand-500/5 text-[var(--text-primary)]" : "border-[var(--border-default)] bg-[var(--bg-base)] text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)]"}`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${isSelected ? "border-brand-500" : "border-[var(--border-default)]"}`,
+                    children: isSelected && /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-brand-500" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--text-primary)]", children: pack.label }),
+                    pack.isPopular && /* @__PURE__ */ jsx("span", { className: "text-xs bg-brand-500/10 text-brand-500 px-1.5 py-0.5 rounded font-medium", children: "Popular" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-0.5", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--text-muted)]", children: [
+                      "\u2192 ",
+                      formatBytes(newLimit),
+                      " total"
+                    ] }),
+                    pack.bandwidthBytesPerMonth > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5 text-xs text-[var(--text-muted)]", children: [
+                      /* @__PURE__ */ jsx(Wifi, { className: "w-3 h-3" }),
+                      formatBytes(pack.bandwidthBytesPerMonth),
+                      "/mo BW"
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--text-primary)]", children: formatCurrency(price, currency) })
+            ]
+          },
+          pack.gb
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: () => onOpenChange(false),
+          disabled: isPending,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => {
+            if (selectedGb) onPurchase(selectedGb, currency);
+          },
+          disabled: isPending || !selectedPack,
+          children: isPending ? "Processing..." : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 mr-1.5" }),
+            "Purchase ",
+            selectedPack?.label ?? ""
+          ] })
+        }
+      )
+    ] })
+  ] }) });
+}
+export {
+  StoragePurchaseModal
+};
+//# sourceMappingURL=storage-purchase-modal.js.map

package/dist/billing/storage-purchase-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/billing/storage-purchase-modal.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { HardDrive, Check, Wifi } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogFooter,\n} from '@withpotter/ui-kit/dialog';\nimport { formatBytes } from '@withpotter/lib/utils';\nimport type { StoragePack } from './helpers';\n\ninterface StoragePurchaseModalProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  packs: StoragePack[];\n  usedBytes: number;\n  addOnBytes: number;\n  /** Baseline storage included with every plan (bytes) */\n  baselineBytes: number;\n  isPending: boolean;\n  onPurchase: (gb: number, currency: string) => void;\n  formatCurrency: (amount: number, currency?: string) => string;\n  currency: string;\n}\n\nexport function StoragePurchaseModal({\n  open,\n  onOpenChange,\n  packs,\n  usedBytes,\n  addOnBytes,\n  baselineBytes,\n  isPending,\n  onPurchase,\n  formatCurrency,\n  currency,\n}: StoragePurchaseModalProps) {\n  const defaultPack = packs.find((p) => p.isPopular) ?? packs[0];\n  const [selectedGb, setSelectedGb] = useState<number | null>(\n    defaultPack?.gb ?? null,\n  );\n\n  const currentLimitBytes = baselineBytes + addOnBytes;\n  const selectedPack = packs.find((p) => p.gb === selectedGb);\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-w-md\">\n        <DialogHeader>\n          <DialogTitle className=\"flex items-center gap-2\">\n            <HardDrive className=\"w-5 h-5 text-brand-500\" />\n            Buy more storage\n          </DialogTitle>\n          <DialogDescription>\n            Purchased storage is added permanently to your workspace and carries\n            over between billing periods. Each pack includes a bundled monthly\n            bandwidth allowance.\n          </DialogDescription>\n        </DialogHeader>\n\n        {/* Current usage summary */}\n        <div className=\"rounded-md bg-[var(--bg-subtle)] border border-[var(--border-subtle)] px-4 py-3 text-sm space-y-1\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-[var(--text-secondary)]\">\n              Currently using\n            </span>\n            <span className=\"font-medium text-[var(--text-primary)]\">\n              {formatBytes(usedBytes)}\n            </span>\n          </div>\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-[var(--text-secondary)]\">Current limit</span>\n            <span className=\"font-medium text-[var(--text-primary)]\">\n              {formatBytes(currentLimitBytes)}\n              {addOnBytes > 0 && (\n                <span className=\"text-[var(--text-muted)] font-normal ml-1\">\n                  ({formatBytes(baselineBytes)} + {formatBytes(addOnBytes)}{' '}\n                  purchased)\n                </span>\n              )}\n            </span>\n          </div>\n        </div>\n\n        {/* Package selector */}\n        <div className=\"space-y-2\">\n          <p className=\"text-sm font-medium text-[var(--text-secondary)]\">\n            Choose a storage pack:\n          </p>\n          {packs.length === 0 && (\n            <p className=\"text-sm text-[var(--text-muted)] text-center py-4\">\n              Loading packs...\n            </p>\n          )}\n          {packs.map((pack) => {\n            const isSelected = selectedGb === pack.gb;\n            const newLimit = currentLimitBytes + pack.gb * 1024 * 1024 * 1024;\n            const price = pack.prices[currency] ?? pack.prices['NGN'] ?? 0;\n            return (\n              <button\n                key={pack.gb}\n                type=\"button\"\n                onClick={() => setSelectedGb(pack.gb)}\n                className={`w-full flex items-center justify-between px-4 py-3 rounded-md border text-sm transition-colors cursor-pointer ${\n                  isSelected\n                    ? 'border-brand-500 bg-brand-500/5 text-[var(--text-primary)]'\n                    : 'border-[var(--border-default)] bg-[var(--bg-base)] text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)]'\n                }`}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div\n                    className={`w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${\n                      isSelected\n                        ? 'border-brand-500'\n                        : 'border-[var(--border-default)]'\n                    }`}\n                  >\n                    {isSelected && (\n                      <div className=\"w-2 h-2 rounded-full bg-brand-500\" />\n                    )}\n                  </div>\n                  <div className=\"text-left\">\n                    <div className=\"flex items-center gap-1.5\">\n                      <span className=\"font-medium text-[var(--text-primary)]\">\n                        {pack.label}\n                      </span>\n                      {pack.isPopular && (\n                        <span className=\"text-xs bg-brand-500/10 text-brand-500 px-1.5 py-0.5 rounded font-medium\">\n                          Popular\n                        </span>\n                      )}\n                    </div>\n                    <div className=\"flex items-center gap-2 mt-0.5\">\n                      <span className=\"text-xs text-[var(--text-muted)]\">\n                        → {formatBytes(newLimit)} total\n                      </span>\n                      {pack.bandwidthBytesPerMonth > 0 && (\n                        <span className=\"flex items-center gap-0.5 text-xs text-[var(--text-muted)]\">\n                          <Wifi className=\"w-3 h-3\" />\n                          {formatBytes(pack.bandwidthBytesPerMonth)}/mo BW\n                        </span>\n                      )}\n                    </div>\n                  </div>\n                </div>\n                <span className=\"font-semibold text-[var(--text-primary)]\">\n                  {formatCurrency(price, currency)}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n\n        <DialogFooter>\n          <Button\n            variant=\"secondary\"\n            onClick={() => onOpenChange(false)}\n            disabled={isPending}\n          >\n            Cancel\n          </Button>\n          <Button\n            onClick={() => {\n              if (selectedGb) onPurchase(selectedGb, currency);\n            }}\n            disabled={isPending || !selectedPack}\n          >\n            {isPending ? (\n              'Processing...'\n            ) : (\n              <>\n                <Check className=\"w-4 h-4 mr-1.5\" />\n                Purchase {selectedPack?.label ?? ''}\n              </>\n            )}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/billing.d.ts

@@ -0,0 +1 @@
+export * from './billing/index';

package/dist/billing.js

@@ -0,0 +1 @@
+export * from './billing/index.js';

package/dist/blog-editor/BlogTiptapEditor.d.ts

@@ -0,0 +1,13 @@
+import { type Editor } from '@tiptap/react';
+import { type BlogTypographySettings, type ReaderTheme } from '@withpotter/lib/blog/density';
+export interface BlogTiptapEditorProps {
+    initialHtml: string;
+    onUpdate: (html: string) => void;
+    onReady?: (editor: Editor) => void;
+    uploadImage: (file: File) => Promise<string>;
+    placeholder?: string;
+    readerTheme?: ReaderTheme;
+    typography?: BlogTypographySettings;
+    denseParagraphIndexes?: number[];
+}
+export declare function BlogTiptapEditor({ initialHtml, onUpdate, onReady, uploadImage, placeholder, readerTheme, typography, denseParagraphIndexes, }: BlogTiptapEditorProps): import("react").JSX.Element;