@burdenoff/microfe-billing 2026.519.1 → 2026.520.1

package/dist/billing/modules/usage/pages/UsagePage.js

@@ -2,13 +2,13 @@ import { useBilling as e } from "../../../providers/BillingProvider.js";
 import { statusTokens as t } from "../../../shared/utils/tokens.js";
 import { formatDateTime as n, formatNumber as r, formatRelativeTime as i } from "../../../shared/utils/format.js";
 import { useBillingPermissions as a } from "../../../hooks/useBillingPermissions.js";
-import { useBillingAccountsForUsage as o, useEnhancedUsagePage as s, useQuotaUsageDetails as c } from "../hooks/useUsage.js";
-import { useCallback as l, useDeferredValue as u, useMemo as d, useState as f } from "react";
+import { useBillingAccountsForUsage as o, useEnhancedUsagePage as s, useQuotaUsageDetails as c, useWorkspaceQuotaHistory as l } from "../hooks/useUsage.js";
+import { useCallback as u, useDeferredValue as ee, useMemo as d, useState as f } from "react";
 import { AlertCircle as p, AlertTriangle as m, CheckCircle as h, ChevronDown as g, ChevronLeft as _, ChevronRight as v, Clock as y, Info as b, Layers as x, Package as S, RefreshCw as C, Search as w, X as T, XCircle as E } from "lucide-react";
 import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
-import { useI18n as ee } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useI18n as te } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/billing/modules/usage/pages/UsagePage.tsx
-var te = ({ status: e, className: n = "w-4 h-4" }) => {
+var A = ({ status: e, className: n = "w-4 h-4" }) => {
 	switch (e) {
 		case "EXHAUSTED": return /* @__PURE__ */ O(E, { className: `${n} ${t.error.icon}` });
 		case "CRITICAL": return /* @__PURE__ */ O(m, { className: `${n} ${t.error.icon}` });
@@ -16,7 +16,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 		case "HEALTHY": return /* @__PURE__ */ O(h, { className: `${n} ${t.success.icon}` });
 		default: return /* @__PURE__ */ O(b, { className: `${n} ${t.neutral.icon}` });
 	}
-}, A = ({ status: e }) => /* @__PURE__ */ O("span", {
+}, j = ({ status: e }) => /* @__PURE__ */ O("span", {
 	className: `px-2 py-0.5 text-xs font-medium rounded ${{
 		EXHAUSTED: `${t.error.bg} ${t.error.text}`,
 		CRITICAL: `${t.error.bg} ${t.error.text}`,
@@ -25,7 +25,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 		INACTIVE: `${t.neutral.bg} ${t.neutral.text}`
 	}[e]}`,
 	children: e
-}), j = ({ percentage: e, status: n }) => {
+}), M = ({ percentage: e, status: n }) => {
 	let r = Math.min(100, Math.max(0, e));
 	return /* @__PURE__ */ O("div", {
 		className: "w-full bg-muted rounded-full h-2.5 overflow-hidden",
@@ -40,7 +40,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 			style: { width: `${r}%` }
 		})
 	});
-}, M = ({ label: e, value: n, icon: r, color: i, isActive: a, onClick: o }) => {
+}, N = ({ label: e, value: n, icon: r, color: i, isActive: a, onClick: o }) => {
 	let s = {
 		blue: t.info,
 		emerald: t.success,
@@ -83,7 +83,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 			children: n
 		})]
 	});
-}, N = ({ quota: e, planLabel: t, onClick: n }) => {
+}, P = ({ quota: e, planLabel: t, onClick: n }) => {
 	let i = e.totalLimit != null && e.totalLimit > 0 && !e.noLimit;
 	return /* @__PURE__ */ k("tr", {
 		onClick: n,
@@ -126,7 +126,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 							i ? r(e.totalLimit) : "∞",
 							e.unit ? ` ${e.unit}` : ""
 						]
-					}), /* @__PURE__ */ O(j, {
+					}), /* @__PURE__ */ O(M, {
 						percentage: i ? e.usagePercentage : 0,
 						status: e.status
 					})]
@@ -138,7 +138,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 			}),
 			/* @__PURE__ */ O("td", {
 				className: "px-4 py-3",
-				children: /* @__PURE__ */ O(A, { status: e.status })
+				children: /* @__PURE__ */ O(j, { status: e.status })
 			})
 		]
 	});
@@ -170,7 +170,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 					children: "Status"
 				})
 			]
-		}) }), /* @__PURE__ */ O("tbody", { children: e.map((e) => /* @__PURE__ */ O(N, {
+		}) }), /* @__PURE__ */ O("tbody", { children: e.map((e) => /* @__PURE__ */ O(P, {
 			quota: e,
 			planLabel: n ? t : void 0,
 			onClick: () => r(e)
@@ -234,10 +234,10 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 		]
 	});
 }, ie = ({ quota: a, onClose: o }) => {
-	let [s, l] = f([null]), u = s[s.length - 1] ?? null, d = s.length, { workspaceId: p } = e(), m = a.quotaAssignments[0]?.id, { usages: h, hasNextPage: g, nextCursor: y, isLoading: b } = c(m, 10, u, p), x = () => {
-		y && l((e) => [...e, y]);
-	}, S = () => {
-		s.length > 1 && l((e) => e.slice(0, -1));
+	let [s, u] = f([null]), ee = s[s.length - 1] ?? null, d = s.length, { workspaceId: p } = e(), m = a.quotaAssignments[0]?.id, { usages: h, hasNextPage: g, nextCursor: y, isLoading: b } = c(m, 10, ee, p), { snapshots: x, isLoading: S } = l(p, a.name, 24), C = () => {
+		y && u((e) => [...e, y]);
+	}, w = () => {
+		s.length > 1 && u((e) => e.slice(0, -1));
 	};
 	return /* @__PURE__ */ k("div", {
 		className: "fixed inset-0 z-50 flex items-center justify-center",
@@ -254,7 +254,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 					className: "sticky top-0 bg-background border-b border-border p-4 flex items-center justify-between",
 					children: [/* @__PURE__ */ k("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ O(te, {
+						children: [/* @__PURE__ */ O(A, {
 							status: a.status,
 							className: "w-5 h-5"
 						}), /* @__PURE__ */ k("div", { children: [
@@ -297,9 +297,9 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 								children: [/* @__PURE__ */ O("span", {
 									className: "text-sm text-muted-foreground",
 									children: "Usage"
-								}), /* @__PURE__ */ O(A, { status: a.status })]
+								}), /* @__PURE__ */ O(j, { status: a.status })]
 							}),
-							/* @__PURE__ */ O(j, {
+							/* @__PURE__ */ O(M, {
 								percentage: a.usagePercentage,
 								status: a.status
 							}),
@@ -366,6 +366,42 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 						})]
 					})]
 				}),
+				(S || x.length > 0) && /* @__PURE__ */ k("div", {
+					className: "p-4 border-t border-border",
+					children: [/* @__PURE__ */ O("h3", {
+						className: "text-sm font-medium text-foreground mb-3",
+						children: "Live Value History"
+					}), S ? /* @__PURE__ */ O("div", {
+						className: "space-y-1.5",
+						children: [
+							1,
+							2,
+							3
+						].map((e) => /* @__PURE__ */ O("div", { className: "h-8 bg-muted animate-pulse rounded" }, e))
+					}) : /* @__PURE__ */ O("div", {
+						className: "space-y-1.5",
+						children: x.map((e) => /* @__PURE__ */ k("div", {
+							className: "flex items-center justify-between px-3 py-2 bg-muted/30 rounded-md",
+							children: [/* @__PURE__ */ O("span", {
+								className: "text-xs text-muted-foreground",
+								children: n(e.snapshotAt)
+							}), /* @__PURE__ */ k("span", {
+								className: "text-sm font-medium text-foreground tabular-nums",
+								children: [
+									r(e.value),
+									a.unit && /* @__PURE__ */ O("span", {
+										className: "text-xs text-muted-foreground ml-1",
+										children: a.unit
+									}),
+									!e.noLimit && e.limit != null && /* @__PURE__ */ k("span", {
+										className: "text-xs text-muted-foreground ml-1",
+										children: ["/ ", r(e.limit)]
+									})
+								]
+							})]
+						}, e.id))
+					})]
+				}),
 				/* @__PURE__ */ k("div", {
 					className: "p-4",
 					children: [
@@ -373,7 +409,10 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 							className: "text-sm font-medium text-foreground mb-3",
 							children: "Recent Usage"
 						}),
-						b ? /* @__PURE__ */ O("div", {
+						a.isCollectorBased ? /* @__PURE__ */ O("p", {
+							className: "text-sm text-muted-foreground text-center py-6",
+							children: "Usage is tracked via system metrics — individual event records are not available for this quota."
+						}) : b ? /* @__PURE__ */ O("div", {
 							className: "space-y-2",
 							children: [
 								1,
@@ -406,11 +445,11 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 								})]
 							}, e.id))
 						}),
-						(s.length > 1 || g) && /* @__PURE__ */ k("div", {
+						!a.isCollectorBased && (s.length > 1 || g) && /* @__PURE__ */ k("div", {
 							className: "flex items-center justify-center gap-2 mt-4",
 							children: [
 								/* @__PURE__ */ O("button", {
-									onClick: S,
+									onClick: w,
 									disabled: s.length === 1,
 									className: "px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50",
 									"aria-label": "Previous usage page",
@@ -421,7 +460,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 									children: ["Page ", d]
 								}),
 								/* @__PURE__ */ O("button", {
-									onClick: x,
+									onClick: C,
 									disabled: !g,
 									className: "px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50",
 									"aria-label": "Next usage page",
@@ -442,49 +481,50 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 			]
 		})]
 	});
-}, P = () => {
-	let { t: e } = ee(), n = (t, n) => {
-		let r = e(t);
-		return r === t ? n : r;
-	}, r = a(), [i, c] = f(() => {
+}, F = () => {
+	let { t: n } = te(), r = (e, t) => {
+		let r = n(e);
+		return r === e ? t : r;
+	}, i = a(), [c, l] = f(() => {
 		if (!(typeof window > "u")) return new URLSearchParams(window.location.search).get("billingAccountId") || void 0;
-	}), [_, v] = f(null), [b, E] = f(""), [A, j] = f("all"), [N, P] = f("active"), F = u(b), { billingAccounts: I, isLoading: ae } = o(), oe = (I.find((e) => e.isDefault) ?? I[0])?.id, L = i ?? oe, { dashboard: R, pooledQuotas: z, activeSubscriptions: B, pastSubscriptions: V, isLoading: se, isPastSubscriptionsLoading: H, error: U, refetch: W, loadMorePastSubscriptions: ce, hasMorePastSubscriptions: G, isLoadingMorePast: K, pastSubscriptionsCount: le } = s({
+	}), [_, v] = f(null), [b, E] = f(""), [j, M] = f("all"), [P, F] = f("active"), ae = ee(b), { billingAccounts: I, isLoading: oe } = o(), se = (I.find((e) => e.isDefault) ?? I[0])?.id, L = c ?? se, { workspaceId: ce } = e(), { dashboard: R, pooledQuotas: z, activeSubscriptions: B, pastSubscriptions: V, isLoading: le, isPastSubscriptionsLoading: H, error: U, refetch: W, loadMorePastSubscriptions: ue, hasMorePastSubscriptions: G, isLoadingMorePast: de, pastSubscriptionsCount: K } = s({
 		billingAccountId: L,
-		searchQuery: F || void 0,
-		viewMode: N
-	}), q = l((e) => A === "all" ? !0 : A === "healthy" ? e.status === "HEALTHY" : A === "warning" ? e.status === "WARNING" : A === "critical" ? e.status === "CRITICAL" || e.status === "EXHAUSTED" : !0, [A]), J = d(() => z.filter(q), [z, q]), Y = d(() => A === "all" ? B : B.map((e) => ({
+		workspaceId: ce,
+		searchQuery: ae || void 0,
+		viewMode: P
+	}), q = u((e) => j === "all" ? !0 : j === "healthy" ? e.status === "HEALTHY" : j === "warning" ? e.status === "WARNING" : j === "critical" ? e.status === "CRITICAL" || e.status === "EXHAUSTED" : !0, [j]), J = d(() => z.filter(q), [z, q]), Y = d(() => j === "all" ? B : B.map((e) => ({
 		...e,
 		aggregatedQuotas: e.aggregatedQuotas.filter(q)
 	})).filter((e) => e.aggregatedQuotas.length > 0), [
 		B,
-		A,
+		j,
 		q
-	]), X = d(() => A === "all" ? V : V.map((e) => ({
+	]), X = d(() => j === "all" ? V : V.map((e) => ({
 		...e,
 		aggregatedQuotas: e.aggregatedQuotas.filter(q)
 	})).filter((e) => e.aggregatedQuotas.length > 0), [
 		V,
-		A,
+		j,
 		q
-	]), Z = d(() => N === "active" ? {
+	]), Z = d(() => P === "active" ? {
 		active: Y,
 		past: []
-	} : N === "past" ? {
+	} : P === "past" ? {
 		active: [],
 		past: X
 	} : {
 		active: Y,
 		past: X
 	}, [
-		N,
+		P,
 		Y,
 		X
-	]), Q = b !== "" || A !== "all", ue = F !== b, de = () => {
-		E(""), j("all");
+	]), Q = b !== "" || j !== "all", fe = ae !== b, pe = () => {
+		E(""), M("all");
 	}, $ = (e) => {
-		j((t) => t === e ? "all" : e);
+		M((t) => t === e ? "all" : e);
 	};
-	if (!r.canViewUsage) return /* @__PURE__ */ O("div", {
+	if (!i.canViewUsage) return /* @__PURE__ */ O("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
 		children: /* @__PURE__ */ k("div", {
 			className: "text-center space-y-2",
@@ -504,7 +544,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 			]
 		})
 	});
-	if ((ae || se) && !R) return /* @__PURE__ */ k("div", {
+	if ((oe || le) && !R) return /* @__PURE__ */ k("div", {
 		className: "space-y-6 p-6",
 		children: [
 			/* @__PURE__ */ O("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }),
@@ -545,7 +585,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 			]
 		})
 	});
-	let fe = I.find((e) => e.id === L);
+	let me = I.find((e) => e.id === L);
 	return /* @__PURE__ */ k("div", {
 		className: "space-y-6 p-6",
 		children: [
@@ -553,7 +593,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("h1", {
 					className: "text-2xl font-bold text-foreground",
-					children: n("billing.usage.title", "Usage")
+					children: r("billing.usage.title", "Usage")
 				}), /* @__PURE__ */ O("p", {
 					className: "text-sm text-muted-foreground mt-1",
 					children: "Monitor your resource consumption and quota usage"
@@ -561,7 +601,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 					className: "flex items-center gap-3",
 					children: [I.length > 1 && /* @__PURE__ */ O("select", {
 						value: L || "",
-						onChange: (e) => c(e.target.value),
+						onChange: (e) => l(e.target.value),
 						className: "px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary w-full sm:min-w-[200px]",
 						children: I.map((e) => /* @__PURE__ */ O("option", {
 							value: e.id,
@@ -586,101 +626,101 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 								type: "text",
 								value: b,
 								onChange: (e) => E(e.target.value),
-								placeholder: `Search ${N === "past" ? "past" : N === "all" ? "all" : "active"} quotas...`,
+								placeholder: `Search ${P === "past" ? "past" : P === "all" ? "all" : "active"} quotas...`,
 								className: "w-full pl-9 pr-3 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
 							}),
-							(b || ue) && /* @__PURE__ */ O("button", {
+							(b || fe) && /* @__PURE__ */ O("button", {
 								onClick: () => E(""),
 								className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted/50",
-								children: ue ? /* @__PURE__ */ O(C, { className: "w-3 h-3 text-muted-foreground animate-spin" }) : /* @__PURE__ */ O(T, { className: "w-3 h-3 text-muted-foreground" })
+								children: fe ? /* @__PURE__ */ O(C, { className: "w-3 h-3 text-muted-foreground animate-spin" }) : /* @__PURE__ */ O(T, { className: "w-3 h-3 text-muted-foreground" })
 							})
 						]
 					}),
 					/* @__PURE__ */ k("div", {
 						className: "flex items-center bg-muted/50 rounded-lg p-1 border border-border",
 						children: [/* @__PURE__ */ k("button", {
-							onClick: () => P("active"),
-							className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${N === "active" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"}`,
+							onClick: () => F("active"),
+							className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${P === "active" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"}`,
 							children: [/* @__PURE__ */ O(S, { className: "w-3.5 h-3.5" }), "Active"]
 						}), /* @__PURE__ */ k("button", {
-							onClick: () => P("past"),
-							disabled: H && N !== "past",
-							className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${N === "past" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"} ${H && N !== "past" ? "opacity-70" : ""}`,
-							children: [H && N === "past" ? /* @__PURE__ */ O(C, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ O(y, { className: "w-3.5 h-3.5" }), "Past"]
+							onClick: () => F("past"),
+							disabled: H && P !== "past",
+							className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${P === "past" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"} ${H && P !== "past" ? "opacity-70" : ""}`,
+							children: [H && P === "past" ? /* @__PURE__ */ O(C, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ O(y, { className: "w-3.5 h-3.5" }), "Past"]
 						})]
 					}),
 					Q && /* @__PURE__ */ k("button", {
-						onClick: de,
+						onClick: pe,
 						className: "flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground border border-border rounded-md hover:bg-muted/50 transition-colors",
 						children: [/* @__PURE__ */ O(T, { className: "w-3 h-3" }), "Clear filters"]
 					})
 				]
 			}),
-			fe && /* @__PURE__ */ k("div", {
+			me && /* @__PURE__ */ k("div", {
 				className: "text-sm text-muted-foreground",
 				children: [
 					"Viewing usage for",
 					" ",
 					/* @__PURE__ */ O("span", {
 						className: "font-medium text-foreground",
-						children: fe.name
+						children: me.name
 					})
 				]
 			}),
 			R && /* @__PURE__ */ k("div", {
 				className: "grid grid-cols-2 sm:grid-cols-4 gap-4",
 				children: [
-					/* @__PURE__ */ O(M, {
+					/* @__PURE__ */ O(N, {
 						label: "Total Quotas",
 						value: R.totalQuotas,
 						icon: /* @__PURE__ */ O(x, { className: "w-5 h-5" }),
 						color: "blue",
-						isActive: A === "all",
-						onClick: () => j("all")
+						isActive: j === "all",
+						onClick: () => M("all")
 					}),
-					/* @__PURE__ */ O(M, {
+					/* @__PURE__ */ O(N, {
 						label: "Healthy",
 						value: R.healthyQuotas,
 						icon: /* @__PURE__ */ O(h, { className: "w-5 h-5" }),
 						color: "emerald",
-						isActive: A === "healthy",
+						isActive: j === "healthy",
 						onClick: () => $("healthy")
 					}),
-					/* @__PURE__ */ O(M, {
+					/* @__PURE__ */ O(N, {
 						label: "Warning",
 						value: R.warningQuotas,
 						icon: /* @__PURE__ */ O(p, { className: "w-5 h-5" }),
 						color: "amber",
-						isActive: A === "warning",
+						isActive: j === "warning",
 						onClick: () => $("warning")
 					}),
-					/* @__PURE__ */ O(M, {
+					/* @__PURE__ */ O(N, {
 						label: "Critical / Exhausted",
 						value: R.criticalQuotas + R.exhaustedQuotas,
 						icon: /* @__PURE__ */ O(m, { className: "w-5 h-5" }),
 						color: "red",
-						isActive: A === "critical",
+						isActive: j === "critical",
 						onClick: () => $("critical")
 					})
 				]
 			}),
-			(Q || N !== "active") && /* @__PURE__ */ k("div", {
+			(Q || P !== "active") && /* @__PURE__ */ k("div", {
 				className: "flex items-center gap-2 text-sm text-muted-foreground flex-wrap",
 				children: [
 					/* @__PURE__ */ k("span", { children: [
 						"Showing",
 						" ",
-						Z.active.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + Z.past.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + (N === "past" ? 0 : J.length),
+						Z.active.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + Z.past.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + (P === "past" ? 0 : J.length),
 						" ",
 						"quotas"
 					] }),
 					/* @__PURE__ */ k("span", {
 						className: "px-2 py-0.5 bg-primary/10 text-primary rounded text-xs capitalize",
-						children: [N === "active" ? "Active" : N === "past" ? "Past" : "All", " subscriptions"]
+						children: [P === "active" ? "Active" : P === "past" ? "Past" : "All", " subscriptions"]
 					}),
-					A !== "all" && /* @__PURE__ */ O("span", {
+					j !== "all" && /* @__PURE__ */ O("span", {
 						className: "px-2 py-0.5 bg-muted rounded text-xs capitalize",
-						children: A === "critical" ? "Critical / Exhausted" : A
+						children: j === "critical" ? "Critical / Exhausted" : j
 					}),
 					b && /* @__PURE__ */ k("span", {
 						className: "px-2 py-0.5 bg-muted rounded text-xs",
@@ -694,7 +734,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 			}),
 			Z.active.length > 0 && /* @__PURE__ */ k("section", { children: [/* @__PURE__ */ k("h2", {
 				className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
-				children: [/* @__PURE__ */ O(S, { className: "w-5 h-5 text-primary" }), N === "all" ? "Active Subscription Quotas" : "Subscription Quotas"]
+				children: [/* @__PURE__ */ O(S, { className: "w-5 h-5 text-primary" }), P === "all" ? "Active Subscription Quotas" : "Subscription Quotas"]
 			}), /* @__PURE__ */ O("div", {
 				className: "space-y-4",
 				children: Z.active.map((e) => /* @__PURE__ */ O(re, {
@@ -712,13 +752,13 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 						className: "text-xs font-normal text-muted-foreground",
 						children: "(Canceled / Expired / Upgraded)"
 					}),
-					le > 0 && /* @__PURE__ */ k("span", {
+					K > 0 && /* @__PURE__ */ k("span", {
 						className: "text-xs font-normal px-2 py-0.5 bg-muted rounded-full",
 						children: [
 							Z.past.length,
 							G ? "+" : "",
 							" of ",
-							le
+							K
 						]
 					})
 				]
@@ -727,18 +767,18 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 				children: [Z.past.map((e) => /* @__PURE__ */ O(re, {
 					subscription: e,
 					onQuotaClick: v,
-					defaultExpanded: N === "past"
+					defaultExpanded: P === "past"
 				}, e.id)), G && /* @__PURE__ */ O("div", {
 					className: "flex justify-center pt-2",
 					children: /* @__PURE__ */ O("button", {
-						onClick: ce,
-						disabled: K,
+						onClick: ue,
+						disabled: de,
 						className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground border border-border rounded-md hover:bg-muted/50 transition-colors disabled:opacity-50",
-						children: K ? /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(C, { className: "w-4 h-4 animate-spin" }), "Loading..."] }) : /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(g, { className: "w-4 h-4" }), "Load more past subscriptions"] })
+						children: de ? /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(C, { className: "w-4 h-4 animate-spin" }), "Loading..."] }) : /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(g, { className: "w-4 h-4" }), "Load more past subscriptions"] })
 					})
 				})]
 			})] }),
-			N !== "past" && J.length > 0 && /* @__PURE__ */ k("section", { children: [/* @__PURE__ */ k("h2", {
+			P !== "past" && J.length > 0 && /* @__PURE__ */ k("section", { children: [/* @__PURE__ */ k("h2", {
 				className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
 				children: [
 					/* @__PURE__ */ O(x, { className: `w-5 h-5 ${t.info.icon}` }),
@@ -753,7 +793,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 				showPlanColumn: !1,
 				onQuotaClick: v
 			})] }),
-			N === "active" && B.length === 0 && z.length === 0 && !Q && /* @__PURE__ */ k("div", {
+			P === "active" && B.length === 0 && z.length === 0 && !Q && /* @__PURE__ */ k("div", {
 				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
 				children: [
 					/* @__PURE__ */ O("div", {
@@ -770,7 +810,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 					})
 				]
 			}),
-			N === "past" && V.length === 0 && !Q && !H && /* @__PURE__ */ k("div", {
+			P === "past" && V.length === 0 && !Q && !H && /* @__PURE__ */ k("div", {
 				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
 				children: [
 					/* @__PURE__ */ O("div", {
@@ -786,13 +826,13 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 						children: "You don't have any canceled, expired, or upgraded subscriptions yet."
 					}),
 					/* @__PURE__ */ O("button", {
-						onClick: () => P("active"),
+						onClick: () => F("active"),
 						className: "mt-4 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
 						children: "View active subscriptions"
 					})
 				]
 			}),
-			N === "past" && H && /* @__PURE__ */ O("div", {
+			P === "past" && H && /* @__PURE__ */ O("div", {
 				className: "space-y-4",
 				children: [
 					1,
@@ -800,23 +840,23 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 					3
 				].map((e) => /* @__PURE__ */ O("div", { className: "h-24 bg-muted animate-pulse rounded-lg" }, e))
 			}),
-			Q && Z.active.length === 0 && Z.past.length === 0 && (N === "past" || J.length === 0) && /* @__PURE__ */ k("div", {
+			Q && Z.active.length === 0 && Z.past.length === 0 && (P === "past" || J.length === 0) && /* @__PURE__ */ k("div", {
 				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
 				children: [
 					/* @__PURE__ */ O("div", {
 						className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4",
-						children: A !== "all" && !b ? /* @__PURE__ */ O(te, {
-							status: A === "healthy" ? "HEALTHY" : A === "warning" ? "WARNING" : "CRITICAL",
+						children: j !== "all" && !b ? /* @__PURE__ */ O(A, {
+							status: j === "healthy" ? "HEALTHY" : j === "warning" ? "WARNING" : "CRITICAL",
 							className: "w-6 h-6"
 						}) : /* @__PURE__ */ O(w, { className: "w-6 h-6 text-muted-foreground" })
 					}),
 					/* @__PURE__ */ O("h3", {
 						className: "text-lg font-medium text-foreground",
-						children: A !== "all" && !b ? `No ${A === "critical" ? "critical or exhausted" : A} quotas` : "No matching quotas"
+						children: j !== "all" && !b ? `No ${j === "critical" ? "critical or exhausted" : j} quotas` : "No matching quotas"
 					}),
 					/* @__PURE__ */ O("p", {
 						className: "text-sm text-muted-foreground mt-1 text-center max-w-sm",
-						children: A !== "all" && !b ? /* @__PURE__ */ k(D, { children: ["All your quotas are in a different status.", R && /* @__PURE__ */ k("span", {
+						children: j !== "all" && !b ? /* @__PURE__ */ k(D, { children: ["All your quotas are in a different status.", R && /* @__PURE__ */ k("span", {
 							className: "block mt-1",
 							children: [
 								"You have ",
@@ -830,10 +870,10 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 						})] }) : /* @__PURE__ */ k(D, { children: [
 							"No quotas match your current search or filter criteria in",
 							" ",
-							N === "past" ? "past" : N === "all" ? "any" : "active",
+							P === "past" ? "past" : P === "all" ? "any" : "active",
 							" ",
 							"subscriptions.",
-							N === "active" && !A.includes("all") && /* @__PURE__ */ O("span", {
+							P === "active" && !j.includes("all") && /* @__PURE__ */ O("span", {
 								className: "block mt-1",
 								children: "Try switching to “Past” or “All” to search across more subscriptions."
 							})
@@ -842,11 +882,11 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 					/* @__PURE__ */ k("div", {
 						className: "flex gap-2 mt-4",
 						children: [/* @__PURE__ */ O("button", {
-							onClick: de,
+							onClick: pe,
 							className: "px-4 py-2 text-sm font-medium border border-border rounded-md hover:bg-muted/50 transition-colors",
-							children: A === "all" ? "Clear filters" : "Show all quotas"
-						}), N === "active" && b && /* @__PURE__ */ O("button", {
-							onClick: () => P("all"),
+							children: j === "all" ? "Clear filters" : "Show all quotas"
+						}), P === "active" && b && /* @__PURE__ */ O("button", {
+							onClick: () => F("all"),
 							className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
 							children: "Search all"
 						})]
@@ -861,6 +901,6 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 	});
 };
 //#endregion
-export { P as UsagePage };
+export { F as UsagePage };
 
 //# sourceMappingURL=UsagePage.js.map