@burdenoff/microfe-billing 2026.625.3 → 2026.625.5

package/dist/billing/modules/dashboard/pages/OverviewPage.js

@@ -24,110 +24,110 @@ import { useCallback as a, useEffect as o, useState as s } from "react";
 import { Activity as he, ArrowRight as ge, Building2 as c, Check as l, ChevronDown as _e, Coins as ve, Crown as ye, Loader2 as be, Plus as u, Receipt as xe, RefreshCw as Se, Sparkles as Ce, Wallet as d } from "lucide-react";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 import { useI18n as we } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AuroraBackground as h, Button as Te, CTAOverflowMenu as Ee, GlassCard as De, GradientText as g, IllustratedEmptyState as Oe } from "@burdenoff/fe-libs/ui";
+import { AuroraBackground as h, Button as Te, CTAOverflowMenu as Ee, GlassCard as De, GradientText as g, IllustratedEmptyState as Oe, PagePurpose as ke } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/dashboard/pages/OverviewPage.tsx
 var _ = () => {
 	let { t: _ } = we(), v = (e, t) => {
 		let n = _(e);
 		return n === e ? t : n;
-	}, { navigate: y, basePath: b, orgId: x, productId: ke } = e(), S = ae(), { emit: C } = te(), [w, Ae] = s(() => ne(x)), [T, E] = s(!1), [D, O] = s(null), [k, A] = s(!1), [je, Me] = s(!1), [j, M] = s(0), [N, P] = s(!1), { billingAccounts: F, currentAccount: I, paymentMethods: L, activeSubscriptions: R, hasActiveSubscription: z, recommendedAddons: Ne, isLoading: B, error: V, refetchAll: H } = se(w, ke), U = I?.id, Pe = B, W = a((e) => {
-		Ae(e), re(x, e);
-	}, [x]), { addToCart: G, isInCart: K, getCartItem: q, updateQuantity: J, removeFromCart: Y } = pe(), { createBillingAccount: X, setBillingAddress: Fe, setDefaultPaymentMethod: Ie, deletePaymentMethod: Le, isCreatingAccount: Re } = oe();
+	}, { navigate: y, basePath: b, orgId: x, productId: Ae } = e(), S = ae(), { emit: C } = te(), [w, je] = s(() => ne(x)), [T, E] = s(!1), [D, O] = s(null), [k, A] = s(!1), [Me, j] = s(!1), [M, N] = s(0), [P, F] = s(!1), { billingAccounts: I, currentAccount: L, paymentMethods: R, activeSubscriptions: z, hasActiveSubscription: B, recommendedAddons: Ne, isLoading: V, error: H, refetchAll: U } = se(w, Ae), W = L?.id, Pe = V, G = a((e) => {
+		je(e), re(x, e);
+	}, [x]), { addToCart: K, isInCart: q, getCartItem: J, updateQuantity: Y, removeFromCart: X } = pe(), { createBillingAccount: Fe, setBillingAddress: Ie, setDefaultPaymentMethod: Le, deletePaymentMethod: Re, isCreatingAccount: ze } = oe();
 	o(() => {
-		M(0), P(!1);
-	}, [U, R.length]), o(() => {
-		w && F.length > 0 && (F.some((e) => e.id === w) || W(null));
+		N(0), F(!1);
+	}, [W, z.length]), o(() => {
+		w && I.length > 0 && (I.some((e) => e.id === w) || G(null));
 	}, [
-		F,
+		I,
 		w,
-		W
+		G
 	]), o(() => {
-		!w && F.length > 0 && W((F.find((e) => e.isDefault) ?? F[0]).id);
+		!w && I.length > 0 && G((I.find((e) => e.isDefault) ?? I[0]).id);
 	}, [
-		F,
+		I,
 		w,
-		W
+		G
 	]);
-	let Z = R[j] || R[0] || null, Q = a((e) => {
+	let Z = z[M] || z[0] || null, Q = a((e) => {
 		let t = e;
 		b && b !== "/" && (t = `${b.endsWith("/") ? b.slice(0, -1) : b}${e.startsWith("/") ? e : `/${e}`}`), y(t);
-	}, [y, b]), ze = a(async (e, t) => {
+	}, [y, b]), Be = a(async (e, t) => {
 		O(null);
 		try {
-			let n = await X(e);
-			t && n.id && await Fe({
+			let n = await Fe(e);
+			t && n.id && await Ie({
 				billingAccountId: n.id,
 				...t
-			}), E(!1), W(n.id), C("billing.billing_account.created", {
+			}), E(!1), G(n.id), C("billing.billing_account.created", {
 				route: "/billing/overview",
 				entityId: n.id,
 				source: "overview"
-			}), await H();
+			}), await U();
 		} catch (e) {
 			O(e instanceof Error ? e.message : "Failed to create billing account");
 		}
 	}, [
-		X,
-		C,
-		H,
 		Fe,
-		W
-	]), Be = a(() => {
-		Me(!0);
+		C,
+		U,
+		Ie,
+		G
+	]), Ve = a(() => {
+		j(!0);
 	}, []), $ = a(async () => {
-		await H();
-	}, [H]), Ve = a(async () => {
+		await U();
+	}, [U]), He = a(async () => {
 		C("billing.payment_method.added", {
 			route: "/billing/overview",
-			entityId: U,
+			entityId: W,
 			source: "overview"
 		}), await $();
 	}, [
-		U,
+		W,
 		C,
 		$
-	]), He = a(async (e) => {
-		U && (await Ie(e, U), C("billing.payment_method.default_set", {
+	]), Ue = a(async (e) => {
+		W && (await Le(e, W), C("billing.payment_method.default_set", {
 			route: "/billing/overview",
 			entityId: e,
 			source: "overview"
 		}), await $());
 	}, [
-		U,
+		W,
 		C,
-		Ie,
+		Le,
 		$
-	]), Ue = a(async (e) => {
-		U && (await Le(e, U), C("billing.payment_method.deleted", {
+	]), We = a(async (e) => {
+		W && (await Re(e, W), C("billing.payment_method.deleted", {
 			route: "/billing/overview",
 			entityId: e,
 			source: "overview"
 		}), await $());
 	}, [
-		U,
-		Le,
+		W,
+		Re,
 		C,
 		$
-	]), We = a((e) => {
-		W(e.id), A(!1);
-	}, [W]), Ge = a(async () => {
-		await H();
-	}, [H]), Ke = a((e) => {
-		G(e);
-	}, [G]), qe = a((e) => K(e), [K]), Je = a((e) => q(e)?.quantity || 0, [q]), Ye = a((e, t) => {
-		t <= 0 ? Y(e) : J(e, t);
-	}, [J, Y]), Xe = a((e) => {
-		Y(e);
-	}, [Y]);
-	return S.canViewBillingAccount ? V && ie(V) && !B ? /* @__PURE__ */ p("div", {
+	]), Ge = a((e) => {
+		G(e.id), A(!1);
+	}, [G]), Ke = a(async () => {
+		await U();
+	}, [U]), qe = a((e) => {
+		K(e);
+	}, [K]), Je = a((e) => q(e), [q]), Ye = a((e) => J(e)?.quantity || 0, [J]), Xe = a((e, t) => {
+		t <= 0 ? X(e) : Y(e, t);
+	}, [Y, X]), Ze = a((e) => {
+		X(e);
+	}, [X]);
+	return S.canViewBillingAccount ? H && ie(H) && !V ? /* @__PURE__ */ p("div", {
 		className: "p-6",
 		children: /* @__PURE__ */ p(ee, {
 			title: "Server Unavailable",
 			message: "Unable to load billing overview. The server might be down or experiencing issues.",
-			onRetry: Ge,
+			onRetry: Ke,
 			showRetry: !0
 		})
-	}) : B && !I ? /* @__PURE__ */ p("div", {
+	}) : V && !L ? /* @__PURE__ */ p("div", {
 		className: "flex items-center justify-center min-h-[400px]",
 		children: /* @__PURE__ */ m("div", {
 			className: "flex flex-col items-center gap-3",
@@ -136,7 +136,7 @@ var _ = () => {
 				children: v("billing.overview.loadingInfo", "Loading billing information...")
 			})]
 		})
-	}) : !B && F.length === 0 ? /* @__PURE__ */ m("div", {
+	}) : !V && I.length === 0 ? /* @__PURE__ */ m("div", {
 		className: "px-6 lg:px-8 py-6",
 		children: [
 			/* @__PURE__ */ m("header", {
@@ -169,8 +169,8 @@ var _ = () => {
 				onClose: () => {
 					E(!1), O(null);
 				},
-				onSubmit: ze,
-				isSubmitting: Re,
+				onSubmit: Be,
+				isSubmitting: ze,
 				error: D
 			})
 		]
@@ -181,15 +181,22 @@ var _ = () => {
 				className: "relative overflow-hidden rounded-card flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4",
 				children: [
 					/* @__PURE__ */ p(h, { intensity: "subtle" }),
-					/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h1", {
-						className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
-						children: /* @__PURE__ */ p(g, { children: v("billing.overview.title", "Billing Overview") })
-					}), /* @__PURE__ */ p("p", {
-						className: "text-sm text-text-secondary mt-1",
-						children: v("billing.overview.description", "Manage your billing accounts, subscriptions, and payment methods")
-					})] }),
+					/* @__PURE__ */ m("div", { children: [
+						/* @__PURE__ */ p("h1", {
+							className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
+							children: /* @__PURE__ */ p(g, { children: v("billing.overview.title", "Billing Overview") })
+						}),
+						/* @__PURE__ */ p("p", {
+							className: "text-sm text-text-secondary mt-1",
+							children: v("billing.overview.description", "Manage your billing accounts, subscriptions, and payment methods")
+						}),
+						/* @__PURE__ */ p(ke, {
+							className: "mt-3",
+							children: v("billing.overview.purpose", "Your billing home base — see your current plan, credit balance and payment methods at a glance, and jump to transactions, usage, credits or new plans. Start here to understand what you are paying for and manage it.")
+						})
+					] }),
 					/* @__PURE__ */ p(Ee, {
-						primary: S.canManageBillingAccount && F.length > 0 ? {
+						primary: S.canManageBillingAccount && I.length > 0 ? {
 							label: v("billing.overview.newAccount", "New Account"),
 							onSelect: () => E(!0),
 							icon: /* @__PURE__ */ p(u, { className: "size-4" })
@@ -197,14 +204,14 @@ var _ = () => {
 						actions: [{
 							label: v("billing.overview.refresh", "Refresh"),
 							onSelect: () => {
-								Ge();
+								Ke();
 							},
-							icon: /* @__PURE__ */ p(Se, { className: `size-4 ${B ? "animate-spin" : ""}` })
+							icon: /* @__PURE__ */ p(Se, { className: `size-4 ${V ? "animate-spin" : ""}` })
 						}]
 					})
 				]
 			}),
-			F.length > 1 && /* @__PURE__ */ m("div", {
+			I.length > 1 && /* @__PURE__ */ m("div", {
 				className: "relative",
 				"data-tour": "billing-overview-account-selector",
 				children: [/* @__PURE__ */ m("button", {
@@ -220,10 +227,10 @@ var _ = () => {
 							className: "text-left",
 							children: [/* @__PURE__ */ p("p", {
 								className: "text-sm font-medium text-text-primary",
-								children: I?.name || v("billing.overview.selectAccount", "Select Account")
+								children: L?.name || v("billing.overview.selectAccount", "Select Account")
 							}), /* @__PURE__ */ p("p", {
 								className: "text-xs text-text-secondary",
-								children: I?.email
+								children: L?.email
 							})]
 						})]
 					}), /* @__PURE__ */ p(_e, { className: `size-4 text-text-muted transition-transform ${k ? "rotate-180" : ""}` })]
@@ -232,9 +239,9 @@ var _ = () => {
 					onClick: () => A(!1)
 				}), /* @__PURE__ */ p("div", {
 					className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-bg-elevated border border-border-seam rounded-card shadow-elevation-3 z-20 py-1 max-h-60 overflow-y-auto",
-					children: F.map((e) => /* @__PURE__ */ m("button", {
+					children: I.map((e) => /* @__PURE__ */ m("button", {
 						type: "button",
-						onClick: () => We(e),
+						onClick: () => Ge(e),
 						className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-bg-sunken transition-colors",
 						children: [/* @__PURE__ */ m("div", {
 							className: "flex items-center gap-3 min-w-0",
@@ -251,32 +258,32 @@ var _ = () => {
 									children: e.email
 								})]
 							})]
-						}), I?.id === e.id && /* @__PURE__ */ p(l, { className: "size-4 text-text-link flex-shrink-0" })]
+						}), L?.id === e.id && /* @__PURE__ */ p(l, { className: "size-4 text-text-link flex-shrink-0" })]
 					}, e.id))
 				})] })]
 			}),
-			I && /* @__PURE__ */ m("div", {
+			L && /* @__PURE__ */ m("div", {
 				className: "grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4",
 				"data-tour": "billing-overview-stats-row",
 				children: [
 					/* @__PURE__ */ p(n, {
 						label: v("billing.overview.stats.creditBalance", "Credit Balance"),
-						value: `${(I.creditAmount || 0).toLocaleString()} Credits`,
+						value: `${(L.creditAmount || 0).toLocaleString()} Credits`,
 						icon: /* @__PURE__ */ p(d, { className: "size-5" })
 					}),
 					/* @__PURE__ */ p(n, {
 						label: v("billing.overview.stats.activePlans", "Active Plans"),
-						value: R.length > 0 ? R.length === 1 ? R[0]?.plan?.name || "1 Plan" : `${R.length} ${v("billing.overview.stats.plansSuffix", "Plans")}` : v("billing.overview.stats.none", "None"),
+						value: z.length > 0 ? z.length === 1 ? z[0]?.plan?.name || "1 Plan" : `${z.length} ${v("billing.overview.stats.plansSuffix", "Plans")}` : v("billing.overview.stats.none", "None"),
 						icon: /* @__PURE__ */ p(Se, { className: "size-5" })
 					}),
 					/* @__PURE__ */ p(n, {
 						label: v("billing.overview.stats.paymentMethods", "Payment Methods"),
-						value: L.length,
+						value: R.length,
 						icon: /* @__PURE__ */ p(c, { className: "size-5" })
 					}),
 					/* @__PURE__ */ p(n, {
 						label: v("billing.overview.stats.paymentCurrency", "Payment Currency"),
-						value: I.currency || "USD",
+						value: L.currency || "USD",
 						icon: /* @__PURE__ */ p(c, { className: "size-5" })
 					})
 				]
@@ -286,21 +293,21 @@ var _ = () => {
 				children: [/* @__PURE__ */ m("div", {
 					className: "lg:col-span-2 space-y-6",
 					children: [
-						I && /* @__PURE__ */ p(ce, {
+						L && /* @__PURE__ */ p(ce, {
 							dataTour: "billing-overview-billing-account-card",
-							account: I,
-							isDefault: I.isDefault ?? !1,
-							onEdit: () => I && Q(`/settings?billingAccountId=${I.id}`),
-							onViewTransactions: () => Q(`/transactions/${I.id}`),
-							onViewCreditTransactions: () => Q(`/creditTransactions/${I.id}`)
+							account: L,
+							isDefault: L.isDefault ?? !1,
+							onEdit: () => L && Q(`/settings?billingAccountId=${L.id}`),
+							onViewTransactions: () => Q(`/transactions/${L.id}`),
+							onViewCreditTransactions: () => Q(`/creditTransactions/${L.id}`)
 						}),
 						/* @__PURE__ */ m("div", {
 							className: "space-y-3",
-							children: [R.length > 1 && /* @__PURE__ */ m("div", {
+							children: [z.length > 1 && /* @__PURE__ */ m("div", {
 								className: "relative",
 								children: [/* @__PURE__ */ m("button", {
 									type: "button",
-									onClick: () => P(!N),
+									onClick: () => F(!P),
 									className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border-seam rounded-card bg-bg-surface hover:bg-bg-sunken hover:border-border-strong transition-all duration-200",
 									children: [/* @__PURE__ */ m("div", {
 										className: "flex items-center gap-3",
@@ -322,22 +329,22 @@ var _ = () => {
 											}), /* @__PURE__ */ m("p", {
 												className: "text-xs text-text-secondary",
 												children: [
-													R.length,
+													z.length,
 													" ",
 													v("billing.overview.activeSubscriptions", "active subscriptions")
 												]
 											})]
 										})]
-									}), /* @__PURE__ */ p(_e, { className: `size-4 text-text-muted transition-transform ${N ? "rotate-180" : ""}` })]
-								}), N && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
+									}), /* @__PURE__ */ p(_e, { className: `size-4 text-text-muted transition-transform ${P ? "rotate-180" : ""}` })]
+								}), P && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
 									className: "fixed inset-0 z-10",
-									onClick: () => P(!1)
+									onClick: () => F(!1)
 								}), /* @__PURE__ */ p("div", {
 									className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-bg-elevated border border-border-seam rounded-card shadow-elevation-3 z-20 py-1 max-h-60 overflow-y-auto",
-									children: R.map((e, t) => /* @__PURE__ */ m("button", {
+									children: z.map((e, t) => /* @__PURE__ */ m("button", {
 										type: "button",
 										onClick: () => {
-											M(t), P(!1);
+											N(t), F(!1);
 										},
 										className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-bg-sunken transition-colors",
 										children: [/* @__PURE__ */ m("div", {
@@ -362,26 +369,26 @@ var _ = () => {
 													]
 												})]
 											})]
-										}), j === t && /* @__PURE__ */ p(l, { className: "size-4 text-text-link flex-shrink-0" })]
+										}), M === t && /* @__PURE__ */ p(l, { className: "size-4 text-text-link flex-shrink-0" })]
 									}, e.id))
 								})] })]
 							}), /* @__PURE__ */ p(ue, {
 								dataTour: "billing-overview-active-subscription-card",
 								subscription: Z,
-								onViewDetails: () => Z && Q(i(`/subscriptions/${Z.id}`, Z.billingAccountId ?? I?.id)),
-								onUpgrade: () => Z && Q(i(`/subscriptions/${Z.id}/upgrade`, Z.billingAccountId ?? I?.id)),
-								onManage: () => I && Q(`/subscriptions?billingAccountId=${I.id}`),
+								onViewDetails: () => Z && Q(i(`/subscriptions/${Z.id}`, Z.billingAccountId ?? L?.id)),
+								onUpgrade: () => Z && Q(i(`/subscriptions/${Z.id}/upgrade`, Z.billingAccountId ?? L?.id)),
+								onManage: () => L && Q(`/subscriptions?billingAccountId=${L.id}`),
 								onPurchasePlan: () => Q("/plans")
 							})]
 						}),
-						I && /* @__PURE__ */ p(le, {
+						L && /* @__PURE__ */ p(le, {
 							dataTour: "billing-overview-payment-methods-section",
-							paymentMethods: L,
-							billingAccountId: I.id,
-							onAddPaymentMethod: Be,
-							onSetDefault: He,
-							onDelete: Ue,
-							isLoading: B
+							paymentMethods: R,
+							billingAccountId: L.id,
+							onAddPaymentMethod: Ve,
+							onSetDefault: Ue,
+							onDelete: We,
+							isLoading: V
 						})
 					]
 				}), /* @__PURE__ */ m("div", {
@@ -397,8 +404,8 @@ var _ = () => {
 							children: [
 								/* @__PURE__ */ m("button", {
 									type: "button",
-									onClick: () => I && Q(`/transactions/${I.id}`),
-									disabled: !I,
+									onClick: () => L && Q(`/transactions/${L.id}`),
+									disabled: !L,
 									className: "w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-text-primary hover:bg-bg-sunken rounded-button transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 									children: [/* @__PURE__ */ p("div", {
 										className: "size-9 rounded-lg bg-status-info-bg-subtle flex items-center justify-center",
@@ -407,8 +414,8 @@ var _ = () => {
 								}),
 								/* @__PURE__ */ m("button", {
 									type: "button",
-									onClick: () => I && Q(`/creditTransactions/${I.id}`),
-									disabled: !I,
+									onClick: () => L && Q(`/creditTransactions/${L.id}`),
+									disabled: !L,
 									className: "w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-text-primary hover:bg-bg-sunken rounded-button transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 									children: [/* @__PURE__ */ p("div", {
 										className: "size-9 rounded-lg bg-status-warning-bg-subtle flex items-center justify-center",
@@ -426,8 +433,8 @@ var _ = () => {
 								}),
 								/* @__PURE__ */ m("button", {
 									type: "button",
-									onClick: () => I && Q(`/usage?billingAccountId=${I.id}`),
-									disabled: !I,
+									onClick: () => L && Q(`/usage?billingAccountId=${L.id}`),
+									disabled: !L,
 									className: "w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-text-primary hover:bg-bg-sunken rounded-button transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 									children: [/* @__PURE__ */ p("div", {
 										className: "size-9 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center",
@@ -436,7 +443,7 @@ var _ = () => {
 								})
 							]
 						})]
-					}), !z && /* @__PURE__ */ m(De, {
+					}), !B && /* @__PURE__ */ m(De, {
 						treatment: "glass",
 						glow: !0,
 						className: "p-5",
@@ -464,15 +471,15 @@ var _ = () => {
 			/* @__PURE__ */ p(de, {
 				dataTour: "billing-overview-recommended-addons",
 				addons: Ne,
-				hasSubscription: z,
+				hasSubscription: B,
 				onViewAddon: (e) => Q(`/addons/${e}`),
 				onPurchaseAddon: (e) => Q(`/addons/${e}?action=purchase`),
 				onViewAllAddons: () => Q("/addons"),
-				onAddToCart: Ke,
-				isInCart: qe,
-				getCartQuantity: Je,
-				onUpdateQuantity: Ye,
-				onRemoveFromCart: Xe,
+				onAddToCart: qe,
+				isInCart: Je,
+				getCartQuantity: Ye,
+				onUpdateQuantity: Xe,
+				onRemoveFromCart: Ze,
 				maxAddons: 3,
 				isLoading: Pe
 			}),
@@ -482,17 +489,17 @@ var _ = () => {
 				onClose: () => {
 					E(!1), O(null);
 				},
-				onSubmit: ze,
-				isSubmitting: Re,
+				onSubmit: Be,
+				isSubmitting: ze,
 				error: D
 			}),
-			I && /* @__PURE__ */ p(fe, {
-				isOpen: je,
-				onClose: () => Me(!1),
-				billingAccountId: I.id,
-				currency: I.currency,
-				country: I.billingAddresses?.[0]?.country,
-				onSuccess: Ve
+			L && /* @__PURE__ */ p(fe, {
+				isOpen: Me,
+				onClose: () => j(!1),
+				billingAccountId: L.id,
+				currency: L.currency,
+				country: L.billingAddresses?.[0]?.country,
+				onSuccess: He
 			})
 		]
 	}) : /* @__PURE__ */ p(t, { message: "You don't have permission to view billing information." });