@mindbill/react 0.26.0 → 0.27.0

package/README.md

@@ -8,14 +8,14 @@ npm install @mindbill/react @mindbill/node
 
 ## Connected lifecycle
 
-`ConnectedBillLifecycle` starts after `BillSubmissionForm` atomically submits an immutable bill. It owns the submitted-to-closed progress rail, a read-only rendering of the exact submitted snapshot, server-owned human-readable history, packet download, EORs, payment posting, Second Bill Review, close, and reopen. The only persistent header action is **Download packet**; status-dependent actions open in a compact action sheet when MindBill makes them available.
+`ConnectedBillLifecycle` starts after `BillSubmissionForm` atomically submits an immutable bill. Its only bill input is `billId`; `getSession` returns the short-lived token. The component fetches the submitted snapshot, progress, human-readable history, EOR/remittance amounts, payments, and available actions from MindBill. Do not pass lifecycle seed data or duplicate this state in the host app. The only persistent header action is **Download packet**; status-dependent actions open in a compact action sheet when MindBill makes them available.
 
 ```tsx
 import { ConnectedBillLifecycle } from "@mindbill/react";
 
 <ConnectedBillLifecycle
   billId={billId}
-  sessionEndpoint="/api/mindbill/session"
+  getSession={getMindBillSession}
   appearance={{ preset: "qme-companion" }}
 />
 ```

package/dist/index.d.ts

@@ -808,7 +808,6 @@ declare function BillPaymentLedger({ payments, appearance, className, style }: B
 type UseBillLifecycleOptions = BillLifecycleClientOptions & {
     refreshInterval?: number;
     enabled?: boolean;
-    initialData?: BillLifecycleData | null;
 };
 type UseBillLifecycleResult = {
     billId: string;
@@ -830,7 +829,7 @@ type UseBillLifecycleResult = {
     resubmitBill: BillLifecycleClient["resubmitBill"];
     simulateSandbox: BillLifecycleClient["simulateSandbox"];
 };
-declare function useBillLifecycle({ billId: providedBillId, sessionEndpoint, getSession, apiBaseUrl, refreshInterval, enabled, initialData, fetch: fetchOverride, }: UseBillLifecycleOptions): UseBillLifecycleResult;
+declare function useBillLifecycle({ billId: providedBillId, sessionEndpoint, getSession, apiBaseUrl, refreshInterval, enabled, fetch: fetchOverride, }: UseBillLifecycleOptions): UseBillLifecycleResult;
 type ConnectedBillLifecycleProps = UseBillLifecycleOptions & {
     appearance?: MindBillReactAppearance;
     className?: string;

package/dist/index.js

@@ -3034,15 +3034,35 @@ function BillRemittanceCard({ remittance, appearance, className, style }) {
     ] }) }),
     /* @__PURE__ */ jsxs6("dl", { children: [
       /* @__PURE__ */ jsxs6("div", { children: [
-        /* @__PURE__ */ jsx6("dt", { children: "Payer reported" }),
+        /* @__PURE__ */ jsx6("dt", { children: "Amount billed" }),
+        /* @__PURE__ */ jsx6("dd", { children: currency(remittance.billedAmount) })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx6("dt", { children: "Expected" }),
+        /* @__PURE__ */ jsx6("dd", { children: currency(remittance.expectedAmount) })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx6("dt", { children: "Payer allowed" }),
+        /* @__PURE__ */ jsx6("dd", { children: remittance.payerAllowedAmount === null ? "\u2014" : currency(remittance.payerAllowedAmount) })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx6("dt", { children: "Payer reported paid" }),
         /* @__PURE__ */ jsx6("dd", { children: remittance.payerReportedPaid === null ? "\u2014" : currency(remittance.payerReportedPaid) })
       ] }),
       /* @__PURE__ */ jsxs6("div", { children: [
-        /* @__PURE__ */ jsx6("dt", { children: "Posted" }),
-        /* @__PURE__ */ jsx6("dd", { children: currency(remittance.totalPaid) })
+        /* @__PURE__ */ jsx6("dt", { children: "Payment posted" }),
+        /* @__PURE__ */ jsx6("dd", { children: currency(remittance.postedPrincipal) })
       ] }),
       /* @__PURE__ */ jsxs6("div", { children: [
-        /* @__PURE__ */ jsx6("dt", { children: "Balance" }),
+        /* @__PURE__ */ jsx6("dt", { children: "Penalty & interest" }),
+        /* @__PURE__ */ jsx6("dd", { children: currency(remittance.postedAdditional) })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx6("dt", { children: "Total received" }),
+        /* @__PURE__ */ jsx6("dd", { children: currency(remittance.totalPostedCash) })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx6("dt", { children: "Balance due" }),
         /* @__PURE__ */ jsx6("dd", { children: currency(remittance.balanceDue) })
       ] })
     ] }),
@@ -3078,28 +3098,59 @@ function BillPayerContactCard({ delivery, appearance, className, style }) {
 function BillPaymentLedger({ payments, appearance, className, style }) {
   return /* @__PURE__ */ jsxs6("section", { className: classes("mb-surface mb-payments", className), style: mindBillAppearanceStyle(appearance, style), "aria-label": "Payment ledger", children: [
     /* @__PURE__ */ jsx6("style", { children: lifecycleSurfaceStyles }),
-    /* @__PURE__ */ jsxs6("header", { className: "mb-surface-heading", children: [
-      /* @__PURE__ */ jsxs6("div", { children: [
-        /* @__PURE__ */ jsx6("strong", { children: "Payments" }),
-        /* @__PURE__ */ jsx6("span", { children: "Payments posted to this bill." })
-      ] }),
-      /* @__PURE__ */ jsx6("span", { children: payments.length })
-    ] }),
-    !payments.length ? /* @__PURE__ */ jsx6("p", { className: "mb-empty", children: "No payments posted." }) : /* @__PURE__ */ jsx6("div", { className: "mb-payment-list", children: payments.map((payment) => /* @__PURE__ */ jsxs6("article", { children: [
-      /* @__PURE__ */ jsxs6("div", { children: [
-        /* @__PURE__ */ jsx6("strong", { children: currency(payment.amount) }),
-        /* @__PURE__ */ jsxs6("span", { children: [
-          humanize(payment.status || "posted"),
-          " \xB7 ",
-          payment.method.toUpperCase()
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs6("div", { children: [
-        /* @__PURE__ */ jsx6("span", { children: payment.checkNumber ? `#${payment.checkNumber}` : payment.source.toUpperCase() }),
-        /* @__PURE__ */ jsx6("span", { children: payment.depositDate || defaultFormatDate(payment.postedAt) })
-      ] }),
-      payment.note ? /* @__PURE__ */ jsx6("p", { children: payment.note }) : null
-    ] }, payment.id)) })
+    /* @__PURE__ */ jsx6("header", { className: "mb-surface-heading", children: /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsx6("strong", { children: "Payments" }),
+      /* @__PURE__ */ jsx6("span", { children: "Funds recorded against this bill." })
+    ] }) }),
+    !payments.length ? /* @__PURE__ */ jsx6("p", { className: "mb-empty", children: "No payments posted." }) : /* @__PURE__ */ jsx6("div", { className: "mb-payment-list", children: payments.map((payment) => {
+      const additional = payment.feeAmount ?? 0;
+      return /* @__PURE__ */ jsxs6("article", { children: [
+        /* @__PURE__ */ jsxs6("div", { className: "mb-payment-amount", children: [
+          /* @__PURE__ */ jsx6("strong", { children: currency(payment.amount) }),
+          /* @__PURE__ */ jsx6("span", { children: "Total received" })
+        ] }),
+        /* @__PURE__ */ jsxs6("dl", { children: [
+          /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsx6("dt", { children: "Applied to bill" }),
+            /* @__PURE__ */ jsx6("dd", { children: currency(payment.principalAmount) })
+          ] }),
+          additional > 0 ? /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsx6("dt", { children: "Penalty & interest" }),
+            /* @__PURE__ */ jsx6("dd", { children: currency(additional) })
+          ] }) : null,
+          /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsx6("dt", { children: "Method" }),
+            /* @__PURE__ */ jsx6("dd", { children: payment.method.toUpperCase() })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsx6("dt", { children: "Reference" }),
+            /* @__PURE__ */ jsx6("dd", { children: payment.checkNumber || "\u2014" })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsx6("dt", { children: "Effective date" }),
+            /* @__PURE__ */ jsx6("dd", { children: payment.receivedDate || payment.depositDate || defaultFormatDate(payment.postedAt) })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsx6("dt", { children: "Deposit date" }),
+            /* @__PURE__ */ jsx6("dd", { children: payment.depositDate || "Not recorded" })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsx6("dt", { children: "Posted" }),
+            /* @__PURE__ */ jsxs6("dd", { children: [
+              defaultFormatDate(payment.postedAt),
+              " \xB7 ",
+              payment.source.toUpperCase()
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsx6("dt", { children: "Status" }),
+            /* @__PURE__ */ jsx6("dd", { children: humanize(payment.status || "posted") })
+          ] })
+        ] }),
+        payment.feeReason ? /* @__PURE__ */ jsx6("p", { children: payment.feeReason }) : null,
+        payment.note ? /* @__PURE__ */ jsx6("p", { children: payment.note }) : null
+      ] }, payment.id);
+    }) })
   ] });
 }
 function classes(base, className) {
@@ -3118,9 +3169,9 @@ var lifecycleSurfaceStyles = `
 .mb-lifecycle-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}.mb-lifecycle-action{display:grid;gap:5px;max-width:260px}.mb-action-button{appearance:none;border:1px solid var(--mb-border);border-radius:var(--mb-control-radius,8px);background:var(--mb-surface);color:var(--mb-text);font:inherit;font-weight:700;line-height:1.2;padding:11px 15px;cursor:pointer}.mb-action-button:hover:not(:disabled){border-color:var(--mb-accent);color:var(--mb-accent)}.mb-action-button:focus-visible{outline:3px solid color-mix(in srgb,var(--mb-accent) 28%,transparent);outline-offset:2px}.mb-action-button.is-primary{background:var(--mb-accent);border-color:var(--mb-accent);color:var(--mb-accent-contrast)}.mb-action-button:disabled{cursor:not-allowed;opacity:.55}.mb-action-reason{color:var(--mb-muted);font-size:12px;line-height:1.35}
 .mb-activity-list{list-style:none;margin:0;padding:0}.mb-activity-item{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;position:relative;padding:0 0 22px}.mb-activity-item:last-child{padding-bottom:0}.mb-activity-item:not(:last-child)::before{background:var(--mb-border);content:"";left:8px;position:absolute;top:10px;bottom:0;width:1px}.mb-activity-marker{background:var(--mb-surface);border:3px solid var(--mb-accent);border-radius:999px;height:11px;margin-top:4px;position:relative;width:11px;z-index:1}.mb-activity-content{display:grid;gap:4px;min-width:0}.mb-activity-content strong{font-size:15px;line-height:1.35}.mb-activity-content p{color:var(--mb-text);font-size:14px;line-height:1.5;margin:0}.mb-activity-content span,.mb-activity-empty{color:var(--mb-muted);font-size:13px;line-height:1.45}.mb-activity-empty,.mb-empty{margin:0}
 .mb-progress-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0}.mb-progress-list li{display:grid;gap:7px;position:relative;text-align:center;color:var(--mb-muted);font-size:12px}.mb-progress-list li:not(:last-child)::after{content:"";position:absolute;left:calc(50% + 14px);right:calc(-50% + 14px);top:13px;height:2px;background:var(--mb-border)}.mb-progress-list li.is-complete:not(:last-child)::after{background:var(--mb-accent)}.mb-progress-list li>span{display:grid;place-items:center;justify-self:center;position:relative;z-index:1;width:28px;height:28px;border:2px solid var(--mb-border);border-radius:50%;background:var(--mb-surface);font-weight:800}.mb-progress-list li.is-complete>span,.mb-progress-list li.is-current>span{border-color:var(--mb-accent);background:var(--mb-accent);color:var(--mb-accent-contrast)}.mb-progress-list li.is-current{color:var(--mb-text)}
-.mb-snapshot dl,.mb-remittance dl,.mb-contacts dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0}.mb-snapshot dl>div,.mb-remittance dl>div,.mb-contacts dl>div{display:grid;gap:3px;padding:10px 14px;border-left:1px solid var(--mb-border)}.mb-snapshot dl>div:nth-child(3n+1),.mb-remittance dl>div:first-child,.mb-contacts dl>div:first-child{border-left:0}.mb-snapshot dt,.mb-remittance dt,.mb-contacts dt{color:var(--mb-muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.mb-snapshot dd,.mb-remittance dd,.mb-contacts dd{font-size:14px;font-weight:750;margin:0;overflow-wrap:anywhere}.mb-contacts a{color:var(--mb-accent)}.mb-denial{margin-top:16px;border-left:4px solid var(--mb-danger);border-radius:var(--mb-control-radius);background:color-mix(in srgb,var(--mb-danger) 8%,var(--mb-surface));padding:12px 14px}.mb-denial p{margin:4px 0 0}
-.mb-payment-list{display:grid}.mb-payment-list article{display:grid;grid-template-columns:1fr auto;gap:5px 18px;padding:12px 0;border-top:1px solid var(--mb-border)}.mb-payment-list article:first-child{border-top:0}.mb-payment-list article>div{display:grid;gap:2px}.mb-payment-list article>div:nth-child(2){text-align:right}.mb-payment-list article span{color:var(--mb-muted);font-size:12px}.mb-payment-list article p{grid-column:1/-1;margin:0;color:var(--mb-muted);font-size:13px}
-@media(max-width:700px){.mb-surface.mb-progress{padding:16px 10px}.mb-progress-list{grid-template-columns:repeat(4,minmax(0,1fr))}.mb-progress-list li{display:grid;grid-template-columns:1fr;align-items:start;gap:6px;text-align:center;font-size:10px;min-width:0}.mb-progress-list li b{font-size:10px;white-space:nowrap}.mb-progress-list li:not(:last-child)::after{left:calc(50% + 12px);right:calc(-50% + 12px);top:11px;bottom:auto;width:auto;height:2px}.mb-progress-list li>span{grid-row:auto;width:24px;height:24px;font-size:11px}.mb-snapshot dl,.mb-remittance dl,.mb-contacts dl{grid-template-columns:1fr 1fr}.mb-snapshot dl>div,.mb-remittance dl>div,.mb-contacts dl>div{border:0;border-top:1px solid var(--mb-border);padding:10px 0}.mb-snapshot dl>div:nth-child(-n+2),.mb-remittance dl>div:nth-child(-n+2),.mb-contacts dl>div:nth-child(-n+2){border-top:0}.mb-payment-list article{grid-template-columns:1fr}.mb-payment-list article>div:nth-child(2){text-align:left}}
+.mb-snapshot dl,.mb-remittance dl,.mb-contacts dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0}.mb-remittance dl{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:1px;background:var(--mb-border)}.mb-snapshot dl>div,.mb-remittance dl>div,.mb-contacts dl>div{display:grid;gap:3px;padding:10px 14px;border-left:1px solid var(--mb-border)}.mb-remittance dl>div{border:0;background:var(--mb-surface)}.mb-snapshot dl>div:nth-child(3n+1),.mb-contacts dl>div:first-child{border-left:0}.mb-snapshot dt,.mb-remittance dt,.mb-contacts dt,.mb-payment-list dt{color:var(--mb-muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.mb-snapshot dd,.mb-remittance dd,.mb-contacts dd,.mb-payment-list dd{font-size:14px;font-weight:750;margin:0;overflow-wrap:anywhere}.mb-contacts a{color:var(--mb-accent)}.mb-denial{margin-top:16px;border-left:4px solid var(--mb-danger);border-radius:var(--mb-control-radius);background:color-mix(in srgb,var(--mb-danger) 8%,var(--mb-surface));padding:12px 14px}.mb-denial p{margin:4px 0 0}
+.mb-payment-list{display:grid}.mb-payment-list article{display:grid;grid-template-columns:minmax(120px,.35fr) 1fr;gap:14px 24px;padding:16px 0;border-top:1px solid var(--mb-border)}.mb-payment-list article:first-child{border-top:0}.mb-payment-amount{display:grid;align-content:start;gap:2px}.mb-payment-amount strong{font-size:1.2rem}.mb-payment-list article>dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}.mb-payment-list article>dl>div{display:grid;align-content:start;gap:3px}.mb-payment-list article span{color:var(--mb-muted);font-size:12px}.mb-payment-list article p{grid-column:1/-1;margin:0;color:var(--mb-muted);font-size:13px}
+@media(max-width:700px){.mb-surface.mb-progress{padding:16px 10px}.mb-progress-list{grid-template-columns:repeat(4,minmax(0,1fr))}.mb-progress-list li{display:grid;grid-template-columns:1fr;align-items:start;gap:6px;text-align:center;font-size:10px;min-width:0}.mb-progress-list li b{font-size:10px;white-space:nowrap}.mb-progress-list li:not(:last-child)::after{left:calc(50% + 12px);right:calc(-50% + 12px);top:11px;bottom:auto;width:auto;height:2px}.mb-progress-list li>span{grid-row:auto;width:24px;height:24px;font-size:11px}.mb-snapshot dl,.mb-remittance dl,.mb-contacts dl{grid-template-columns:1fr 1fr}.mb-snapshot dl>div,.mb-remittance dl>div,.mb-contacts dl>div{border:0;border-top:1px solid var(--mb-border);padding:10px 0}.mb-snapshot dl>div:nth-child(-n+2),.mb-remittance dl>div:nth-child(-n+2),.mb-contacts dl>div:nth-child(-n+2){border-top:0}.mb-payment-list article{grid-template-columns:1fr}.mb-payment-list article>dl{grid-template-columns:1fr 1fr}}
 `;
 
 // src/connected-bill-lifecycle.tsx
@@ -3172,12 +3223,11 @@ function useBillLifecycle({
   apiBaseUrl = DEFAULT_API_BASE_URL2,
   refreshInterval = DEFAULT_REFRESH_INTERVAL2,
   enabled = true,
-  initialData = null,
   fetch: fetchOverride
 }) {
-  const [data, setData] = useState6(initialData);
+  const [data, setData] = useState6(null);
   const [error, setError] = useState6(null);
-  const [isLoading, setIsLoading] = useState6(enabled && !initialData);
+  const [isLoading, setIsLoading] = useState6(enabled);
   const [isRefreshing, setIsRefreshing] = useState6(false);
   const [isMutating, setIsMutating] = useState6(false);
   const mounted = useRef4(true);
@@ -3189,9 +3239,10 @@ function useBillLifecycle({
     fetch: fetchOverride
   }), [apiBaseUrl, fetchOverride, getSession, providedBillId, sessionEndpoint]);
   useEffect5(() => {
-    setData(initialData);
+    setData(null);
     setError(null);
-  }, [initialData, providedBillId]);
+    setIsLoading(enabled);
+  }, [enabled, providedBillId]);
   useEffect5(() => {
     mounted.current = true;
     return () => {
@@ -3332,14 +3383,20 @@ function ConnectedBillLifecycle({ appearance, className, style, loadingFallback,
   const [panel, setPanel] = useState6("");
   const [notice, setNotice] = useState6("");
   const [reason, setReason] = useState6("");
-  const [payment, setPayment] = useState6({ amount: 0, method: "check", checkNumber: "", depositDate: today(), note: "" });
+  const [payment, setPayment] = useState6({ amount: 0, penaltyAmount: 0, interestAmount: 0, method: "check", checkNumber: "", depositDate: today(), note: "" });
   const [review, setReview] = useState6({ reason: "", payerClaimControlNumber: "", disputedAmount: void 0, attachmentIds: [], route: "ebill" });
   const lastData = useRef4(null);
   useEffect5(() => {
     if (!data || data === lastData.current) return;
     lastData.current = data;
     onChanged?.(data);
-    setPayment((current) => ({ ...current, amount: current.amount > 0 ? current.amount : data.bill.balanceDue }));
+    const payerRemaining = data.remittance.payerReportedPaid === null ? data.bill.balanceDue : Math.max(0, data.remittance.payerReportedPaid - data.remittance.postedPrincipal);
+    setPayment((current) => ({
+      ...current,
+      amount: current.amount > 0 && current.amount <= data.bill.balanceDue ? current.amount : Math.min(data.bill.balanceDue, payerRemaining || data.bill.balanceDue),
+      penaltyAmount: 0,
+      interestAmount: 0
+    }));
     setReview((current) => ({
       ...current,
       disputedAmount: current.disputedAmount ?? data.bill.balanceDue,
@@ -3406,14 +3463,12 @@ function ConnectedBillLifecycle({ appearance, className, style, loadingFallback,
     ] }) : null,
     tab === "details" ? /* @__PURE__ */ jsxs7("div", { className: "mb-lifecycle-tabpanel", role: "tabpanel", children: [
       /* @__PURE__ */ jsx7(BillReadOnlyForm, { data, onOpenAttachment: lifecycle.openAttachment, ...appearance ? { appearance } : {} }),
+      /* @__PURE__ */ jsx7(BillRemittanceCard, { remittance: data.remittance, ...appearance ? { appearance } : {} }),
       data.eors.length ? /* @__PURE__ */ jsxs7("section", { className: "mb-lifecycle-card", id: `mb-eors-${data.bill.id}`, children: [
-        /* @__PURE__ */ jsxs7("header", { children: [
-          /* @__PURE__ */ jsxs7("div", { children: [
-            /* @__PURE__ */ jsx7("h3", { children: "Explanation of Review" }),
-            /* @__PURE__ */ jsx7("p", { children: "The payer response associated with this immutable submission." })
-          ] }),
-          /* @__PURE__ */ jsx7("span", { children: data.eors.length })
-        ] }),
+        /* @__PURE__ */ jsx7("header", { children: /* @__PURE__ */ jsxs7("div", { children: [
+          /* @__PURE__ */ jsx7("h3", { children: "Explanation of Review" }),
+          /* @__PURE__ */ jsx7("p", { children: "The payer response associated with this immutable submission." })
+        ] }) }),
         /* @__PURE__ */ jsx7("ul", { className: "mb-lifecycle-documents", children: data.eors.map((eor) => /* @__PURE__ */ jsxs7("li", { children: [
           /* @__PURE__ */ jsxs7("div", { children: [
             /* @__PURE__ */ jsx7("strong", { children: eor.filename }),
@@ -3422,6 +3477,7 @@ function ConnectedBillLifecycle({ appearance, className, style, loadingFallback,
           /* @__PURE__ */ jsx7("button", { type: "button", className: "mb-lifecycle-button secondary", onClick: () => void lifecycle.openEor(eor).catch(() => void 0), children: "View EOR" })
         ] }, eor.id)) })
       ] }) : null,
+      /* @__PURE__ */ jsx7(BillPaymentLedger, { payments: data.payments, ...appearance ? { appearance } : {} }),
       viewEor || actions.length ? /* @__PURE__ */ jsx7("button", { type: "button", className: "mb-lifecycle-button secondary mb-lifecycle-actions-trigger", onClick: () => setPanel("actions"), children: "Bill actions" }) : null
     ] }) : /* @__PURE__ */ jsx7("div", { className: "mb-lifecycle-tabpanel", role: "tabpanel", children: /* @__PURE__ */ jsx7(BillActivityTimeline, { events: data.activity, ...appearance ? { appearance } : {} }) }),
     panel === "actions" ? /* @__PURE__ */ jsx7(LifecycleDialog, { title: "Bill actions", onClose: () => setPanel(""), children: /* @__PURE__ */ jsxs7("section", { className: "mb-lifecycle-panel mb-lifecycle-action-panel", children: [
@@ -3501,13 +3557,21 @@ function ConnectedBillLifecycle({ appearance, className, style, loadingFallback,
     panel === "payment" ? /* @__PURE__ */ jsx7(LifecycleDialog, { title: "Post payment", onClose: () => setPanel(""), children: /* @__PURE__ */ jsxs7("section", { className: "mb-lifecycle-panel", children: [
       /* @__PURE__ */ jsxs7("div", { children: [
         /* @__PURE__ */ jsx7("h3", { children: "Post payment" }),
-        /* @__PURE__ */ jsx7("p", { children: "Record funds shown on the payer response." })
+        /* @__PURE__ */ jsx7("p", { children: "Record a full or partial payment, plus any penalty and interest received." })
       ] }),
       /* @__PURE__ */ jsxs7("div", { className: "mb-lifecycle-fields two", children: [
         /* @__PURE__ */ jsxs7("label", { children: [
-          /* @__PURE__ */ jsx7("span", { children: "Amount" }),
+          /* @__PURE__ */ jsx7("span", { children: "Amount applied to bill" }),
           /* @__PURE__ */ jsx7("input", { type: "number", min: "0.01", max: data.bill.balanceDue, step: "0.01", value: payment.amount || "", onChange: (event) => setPayment((current) => ({ ...current, amount: Number(event.target.value) })) })
         ] }),
+        /* @__PURE__ */ jsxs7("label", { children: [
+          /* @__PURE__ */ jsx7("span", { children: "Penalty" }),
+          /* @__PURE__ */ jsx7("input", { type: "number", min: "0", step: "0.01", value: payment.penaltyAmount || "", placeholder: "0.00", onChange: (event) => setPayment((current) => ({ ...current, penaltyAmount: Number(event.target.value) })) })
+        ] }),
+        /* @__PURE__ */ jsxs7("label", { children: [
+          /* @__PURE__ */ jsx7("span", { children: "Interest" }),
+          /* @__PURE__ */ jsx7("input", { type: "number", min: "0", step: "0.01", value: payment.interestAmount || "", placeholder: "0.00", onChange: (event) => setPayment((current) => ({ ...current, interestAmount: Number(event.target.value) })) })
+        ] }),
         /* @__PURE__ */ jsxs7("label", { children: [
           /* @__PURE__ */ jsx7("span", { children: "Method" }),
           /* @__PURE__ */ jsxs7("select", { value: payment.method, onChange: (event) => setPayment((current) => ({ ...current, method: event.target.value })), children: [
@@ -3528,9 +3592,13 @@ function ConnectedBillLifecycle({ appearance, className, style, loadingFallback,
           /* @__PURE__ */ jsx7("input", { value: payment.note, onChange: (event) => setPayment((current) => ({ ...current, note: event.target.value })) })
         ] })
       ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "mb-payment-total", children: [
+        /* @__PURE__ */ jsx7("span", { children: "Total received" }),
+        /* @__PURE__ */ jsx7("strong", { children: new Intl.NumberFormat(void 0, { style: "currency", currency: "USD" }).format(payment.amount + (payment.penaltyAmount ?? 0) + (payment.interestAmount ?? 0)) })
+      ] }),
       /* @__PURE__ */ jsxs7("div", { className: "mb-lifecycle-panel-actions", children: [
         /* @__PURE__ */ jsx7("button", { type: "button", className: "mb-lifecycle-button secondary", onClick: () => setPanel(""), children: "Cancel" }),
-        /* @__PURE__ */ jsx7("button", { type: "button", className: "mb-lifecycle-button primary", disabled: lifecycle.isMutating || payment.amount <= 0 || payment.amount > data.bill.balanceDue || !payment.depositDate, onClick: () => void complete("Payment posted.", () => lifecycle.postPayment(payment)), children: lifecycle.isMutating ? "Posting\u2026" : "Post payment" })
+        /* @__PURE__ */ jsx7("button", { type: "button", className: "mb-lifecycle-button primary", disabled: lifecycle.isMutating || payment.amount <= 0 || payment.amount > data.bill.balanceDue || (payment.penaltyAmount ?? 0) < 0 || (payment.interestAmount ?? 0) < 0 || !payment.depositDate, onClick: () => void complete("Payment posted.", () => lifecycle.postPayment(payment)), children: lifecycle.isMutating ? "Posting\u2026" : "Post payment" })
       ] })
     ] }) }) : null,
     panel === "close" || panel === "reopen" ? /* @__PURE__ */ jsx7(LifecycleDialog, { title: panel === "close" ? "Close bill" : "Reopen bill", onClose: () => setPanel(""), children: /* @__PURE__ */ jsxs7("section", { className: "mb-lifecycle-panel", children: [
@@ -3554,6 +3622,7 @@ function ConnectedBillLifecycle({ appearance, className, style, loadingFallback,
 var CONNECTED_LIFECYCLE_STYLES = `
 .mb-lifecycle-simulator{display:grid;gap:14px;padding:18px;border:1px solid #b8dadd;border-radius:var(--mb-radius,14px);background:#f2fbfb}.mb-lifecycle-simulator>div:first-child>span{color:var(--mb-accent);font-size:.72rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.mb-lifecycle-simulator h3{margin:3px 0 0;font-size:1.05rem}.mb-lifecycle-simulator p{margin:4px 0 0;color:var(--mb-muted)}.mb-lifecycle-simulator-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.mb-lifecycle-simulator-actions button{min-height:76px;border:1px solid #a9cccf;border-radius:10px;background:var(--mb-surface);color:var(--mb-text);cursor:pointer;padding:12px 14px;text-align:left;font:inherit}.mb-lifecycle-simulator-actions button:hover{border-color:var(--mb-accent);box-shadow:0 3px 14px rgba(23,108,112,.1)}.mb-lifecycle-simulator-actions button:disabled{cursor:not-allowed;opacity:.55}.mb-lifecycle-simulator-actions button strong,.mb-lifecycle-simulator-actions button span{display:block}.mb-lifecycle-simulator-actions button span{margin-top:3px;color:var(--mb-muted);font-size:.83rem}.mb-lifecycle-simulator-idle{padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.72)}
 .mb-connected-lifecycle{--mb-accent:#176c70;--mb-text:#17282d;--mb-muted:#607176;--mb-border:#d7e0df;--mb-soft:#f4f7f6;--mb-surface:#fff;display:grid;gap:18px;color:var(--mb-text);font:14px/1.45 var(--mb-font,Inter,ui-sans-serif,system-ui,sans-serif)}.mb-connected-lifecycle *{box-sizing:border-box}.mb-lifecycle-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.mb-lifecycle-title{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.mb-lifecycle-title h2{margin:0;font-size:1.7rem}.mb-lifecycle-title span{border-radius:999px;background:var(--mb-soft);padding:5px 10px;font-weight:750}.mb-lifecycle-head p{margin:3px 0 0;color:var(--mb-muted)}.mb-lifecycle-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--mb-border);border-radius:12px;background:var(--mb-surface);padding:6px}.mb-lifecycle-tabs button{min-height:46px;border:0;border-radius:8px;background:transparent;color:var(--mb-muted);font:inherit;font-size:1rem;font-weight:750;cursor:pointer}.mb-lifecycle-tabs button[aria-selected=true]{background:var(--mb-accent);color:white}.mb-lifecycle-tabpanel{display:grid;gap:18px}.mb-lifecycle-button{min-height:40px;border:1px solid var(--mb-border);border-radius:var(--mb-control-radius,8px);background:var(--mb-input,#fff);color:var(--mb-text);cursor:pointer;font:inherit;font-weight:750;padding:9px 14px}.mb-lifecycle-button.primary{border-color:var(--mb-accent);background:var(--mb-accent);color:var(--mb-accent-contrast,#fff)}.mb-lifecycle-button:disabled{cursor:not-allowed;opacity:.5}.mb-lifecycle-actions-trigger{width:100%}.mb-lifecycle-card,.mb-lifecycle-panel{padding:20px;border:1px solid var(--mb-border);border-radius:var(--mb-radius,14px);background:var(--mb-surface)}.mb-lifecycle-card header{display:flex;align-items:center;justify-content:space-between;gap:20px}.mb-lifecycle-card h3,.mb-lifecycle-panel h3{margin:0;font-size:1.08rem}.mb-lifecycle-card p,.mb-lifecycle-panel p{margin:3px 0 0;color:var(--mb-muted)}.mb-lifecycle-card header>span{display:grid;place-items:center;min-width:28px;height:28px;border-radius:999px;background:var(--mb-soft);font-weight:750}.mb-lifecycle-action-options{display:grid;gap:10px}.mb-lifecycle-action-options .mb-lifecycle-button{width:100%}.mb-lifecycle-documents{list-style:none;margin:14px 0 0;padding:0}.mb-lifecycle-documents li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--mb-border)}.mb-lifecycle-documents li>div{display:grid;gap:3px;min-width:0}.mb-lifecycle-documents li span{color:var(--mb-muted);font-size:.85rem}.mb-lifecycle-dialog-backdrop{position:fixed;z-index:2147483000;inset:0;display:grid;place-items:center;padding:20px;background:rgba(18,35,43,.56);backdrop-filter:blur(3px)}.mb-lifecycle-dialog{position:relative;width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto;outline:0}.mb-lifecycle-dialog-close{position:absolute;z-index:1;top:12px;right:12px;width:34px;height:34px;border:1px solid var(--mb-border);border-radius:8px;background:var(--mb-surface);color:var(--mb-text);cursor:pointer;font:22px/1 inherit}.mb-lifecycle-panel{display:grid;gap:17px;padding-top:24px;box-shadow:0 24px 70px rgba(18,35,43,.22)}.mb-lifecycle-panel label{display:grid;gap:6px;font-size:.85rem;font-weight:750}.mb-lifecycle-panel label small{color:var(--mb-muted);font-weight:500}.mb-lifecycle-panel input,.mb-lifecycle-panel select,.mb-lifecycle-panel textarea{width:100%;min-height:44px;border:1px solid var(--mb-border);border-radius:var(--mb-control-radius,8px);background:var(--mb-input,#fff);color:var(--mb-text);font:inherit;padding:10px 12px}.mb-lifecycle-panel textarea{min-height:100px;resize:vertical}.mb-lifecycle-fields{display:grid;gap:13px}.mb-lifecycle-fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}.mb-lifecycle-fields .full{grid-column:1/-1}.mb-lifecycle-panel-actions{display:flex;justify-content:flex-end;gap:8px}.mb-lifecycle-packet{display:grid;gap:0;margin:0;padding:0;border:0}.mb-lifecycle-packet legend{margin-bottom:7px;font-size:.85rem;font-weight:800}.mb-lifecycle-packet>label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 2px;border-top:1px solid var(--mb-border)}.mb-lifecycle-packet>label>input{width:16px;min-height:16px}.mb-lifecycle-packet>label>span{display:grid}.mb-lifecycle-packet button{border:0;background:transparent;color:var(--mb-accent);cursor:pointer;font:inherit}.mb-lifecycle-message,.mb-lifecycle-error,.mb-lifecycle-loading{padding:12px 14px;border-radius:9px}.mb-lifecycle-message.success{background:#edf9f2;color:#217449}.mb-lifecycle-message.error,.mb-lifecycle-error{background:#fff0ef;color:#9d3029}.mb-lifecycle-error{display:flex;align-items:center;gap:12px}.mb-lifecycle-error span{flex:1}.mb-lifecycle-error button{border:1px solid currentColor;border-radius:7px;background:transparent;color:inherit;padding:7px 10px}
+.mb-payment-total{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:9px;background:var(--mb-soft)}.mb-payment-total strong{font-size:1.12rem}
 @media(max-width:700px){.mb-lifecycle-head,.mb-lifecycle-actions-sheet,.mb-lifecycle-card header{align-items:stretch;flex-direction:column}.mb-lifecycle-head>.mb-lifecycle-button{width:100%}.mb-lifecycle-actions-sheet>div:last-child{justify-content:stretch}.mb-lifecycle-actions-sheet .mb-lifecycle-button{width:100%}.mb-lifecycle-fields.two{grid-template-columns:1fr}.mb-lifecycle-fields .full{grid-column:auto}.mb-lifecycle-dialog-backdrop{align-items:end;padding:0}.mb-lifecycle-dialog{max-height:92vh}.mb-lifecycle-dialog .mb-lifecycle-panel{border-radius:18px 18px 0 0}.mb-lifecycle-tabs button{font-size:.9rem}.mb-lifecycle-title h2{font-size:1.4rem}}
 `;