@burdenoff/microfe-billing 2026.510.114

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

@@ -0,0 +1,817 @@
+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 { 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 ee, X as w, XCircle as T } from "lucide-react";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { useI18n as te } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/usage/pages/UsagePage.tsx
+var k = ({ status: e, className: n = "w-4 h-4" }) => {
+	switch (e) {
+		case "EXHAUSTED": return /* @__PURE__ */ D(T, { className: `${n} ${t.error.icon}` });
+		case "CRITICAL": return /* @__PURE__ */ D(m, { className: `${n} ${t.error.icon}` });
+		case "WARNING": return /* @__PURE__ */ D(p, { className: `${n} ${t.warning.icon}` });
+		case "HEALTHY": return /* @__PURE__ */ D(h, { className: `${n} ${t.success.icon}` });
+		default: return /* @__PURE__ */ D(b, { className: `${n} ${t.neutral.icon}` });
+	}
+}, A = ({ status: e }) => /* @__PURE__ */ D("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}`,
+		WARNING: `${t.warning.bg} ${t.warning.text}`,
+		HEALTHY: `${t.success.bg} ${t.success.text}`,
+		INACTIVE: `${t.neutral.bg} ${t.neutral.text}`
+	}[e]}`,
+	children: e
+}), j = ({ percentage: e, status: n }) => {
+	let r = Math.min(100, Math.max(0, e));
+	return /* @__PURE__ */ D("div", {
+		className: "w-full bg-muted rounded-full h-2.5 overflow-hidden",
+		children: /* @__PURE__ */ D("div", {
+			className: `h-full rounded-full transition-all duration-300 ${{
+				EXHAUSTED: t.error.dot,
+				CRITICAL: t.error.dot,
+				WARNING: t.warning.dot,
+				HEALTHY: t.success.dot,
+				INACTIVE: t.neutral.dot
+			}[n]}`,
+			style: { width: `${r}%` }
+		})
+	});
+}, M = ({ label: e, value: n, icon: r, color: i, isActive: a, onClick: o }) => {
+	let s = {
+		blue: t.info,
+		emerald: t.success,
+		amber: t.warning,
+		red: t.error,
+		gray: t.neutral
+	}[i], c = {
+		blue: `${s.bg} ${s.border}`,
+		emerald: `${s.bg} ${s.border}`,
+		amber: `${s.bg} ${s.border}`,
+		red: `${s.bg} ${s.border}`,
+		gray: `${s.bg} ${s.border}`
+	}, l = {
+		blue: `ring-2 ring-offset-2 dark:ring-offset-background ${t.info.border.replace("border-", "ring-")}`,
+		emerald: `ring-2 ring-offset-2 dark:ring-offset-background ${t.success.border.replace("border-", "ring-")}`,
+		amber: `ring-2 ring-offset-2 dark:ring-offset-background ${t.warning.border.replace("border-", "ring-")}`,
+		red: `ring-2 ring-offset-2 dark:ring-offset-background ${t.error.border.replace("border-", "ring-")}`,
+		gray: `ring-2 ring-offset-2 dark:ring-offset-background ${t.neutral.border.replace("border-", "ring-")}`
+	}, u = {
+		blue: t.info.icon,
+		emerald: t.success.icon,
+		amber: t.warning.icon,
+		red: t.error.icon,
+		gray: t.neutral.icon
+	};
+	return /* @__PURE__ */ O("button", {
+		onClick: o,
+		className: `border rounded-lg p-4 w-full text-left transition-all ${c[i]} ${o ? "cursor-pointer hover:shadow-md" : ""} ${a ? l[i] : ""}`,
+		children: [/* @__PURE__ */ O("div", {
+			className: "flex items-center gap-2 mb-2",
+			children: [/* @__PURE__ */ D("span", {
+				className: u[i],
+				children: r
+			}), /* @__PURE__ */ D("span", {
+				className: "text-sm text-muted-foreground",
+				children: e
+			})]
+		}), /* @__PURE__ */ D("p", {
+			className: "text-2xl font-bold text-foreground",
+			children: n
+		})]
+	});
+}, N = ({ quota: e, onClick: t }) => {
+	let n = e.totalLimit != null && e.totalLimit > 0, i = n ? r(e.totalLimit) : "∞", a = r(e.totalUsed);
+	return /* @__PURE__ */ D("button", {
+		onClick: t,
+		className: "w-full text-left border border-border rounded-lg p-4 bg-card hover:shadow-md transition-all hover:border-primary/50",
+		children: /* @__PURE__ */ O("div", {
+			className: "flex items-start justify-between gap-4",
+			children: [/* @__PURE__ */ O("div", {
+				className: "flex-1 min-w-0",
+				children: [
+					/* @__PURE__ */ O("div", {
+						className: "flex items-center gap-2 mb-2",
+						children: [
+							/* @__PURE__ */ D(k, { status: e.status }),
+							/* @__PURE__ */ D("span", {
+								className: "font-medium text-foreground capitalize",
+								children: e.name.replace(/_/g, " ")
+							}),
+							/* @__PURE__ */ D(A, { status: e.status })
+						]
+					}),
+					/* @__PURE__ */ D("div", {
+						className: "mb-2",
+						children: /* @__PURE__ */ D(j, {
+							percentage: e.usagePercentage,
+							status: e.status
+						})
+					}),
+					/* @__PURE__ */ O("div", {
+						className: "flex items-center justify-between text-sm",
+						children: [/* @__PURE__ */ O("span", {
+							className: "text-muted-foreground",
+							children: [
+								a,
+								" / ",
+								i,
+								e.unit && ` ${e.unit}`
+							]
+						}), /* @__PURE__ */ D("span", {
+							className: "font-medium text-foreground",
+							children: n ? `${Math.round(e.usagePercentage)}%` : "-"
+						})]
+					}),
+					e.quotaCount > 1 && /* @__PURE__ */ O("p", {
+						className: "text-xs text-muted-foreground mt-2",
+						children: [
+							"Across ",
+							e.quotaCount,
+							" quota assignments"
+						]
+					})
+				]
+			}), /* @__PURE__ */ D(v, { className: "w-5 h-5 text-muted-foreground flex-shrink-0" })]
+		})
+	});
+}, P = ({ subscription: e, onQuotaClick: n, defaultExpanded: r = !0 }) => {
+	let [i, a] = f(r), o = {
+		active: `${t.success.bg} ${t.success.text}`,
+		trialing: `${t.info.bg} ${t.info.text}`,
+		past_due: `${t.warning.bg} ${t.warning.text}`,
+		canceled: `${t.neutral.bg} ${t.neutral.text}`,
+		expired: `${t.neutral.bg} ${t.neutral.text}`,
+		upgraded: `${t.primary.bg} ${t.primary.text}`
+	};
+	return /* @__PURE__ */ O("div", {
+		className: "border border-border rounded-lg bg-card overflow-hidden",
+		children: [
+			/* @__PURE__ */ O("button", {
+				onClick: () => a(!i),
+				className: "w-full flex items-center justify-between p-4 hover:bg-muted/50 transition-colors",
+				children: [/* @__PURE__ */ O("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ D(S, { className: "w-5 h-5 text-primary" }), /* @__PURE__ */ O("div", {
+						className: "text-left",
+						children: [/* @__PURE__ */ O("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ D("span", {
+								className: "font-medium text-foreground",
+								children: "Subscription"
+							}), /* @__PURE__ */ D("span", {
+								className: `px-2 py-0.5 text-xs font-medium rounded capitalize ${o[e.status.toLowerCase()] || o.active}`,
+								children: e.status
+							})]
+						}), /* @__PURE__ */ O("p", {
+							className: "text-xs text-muted-foreground",
+							children: [
+								e.aggregatedQuotas.length,
+								" quota type",
+								e.aggregatedQuotas.length === 1 ? "" : "s"
+							]
+						})]
+					})]
+				}), D(i ? g : v, { className: "w-5 h-5 text-muted-foreground" })]
+			}),
+			i && e.aggregatedQuotas.length > 0 && /* @__PURE__ */ D("div", {
+				className: "border-t border-border p-4 space-y-3",
+				children: e.aggregatedQuotas.map((e) => /* @__PURE__ */ D(N, {
+					quota: e,
+					onClick: () => n(e)
+				}, e.name))
+			}),
+			i && e.aggregatedQuotas.length === 0 && /* @__PURE__ */ D("div", {
+				className: "border-t border-border p-6 text-center",
+				children: /* @__PURE__ */ D("p", {
+					className: "text-sm text-muted-foreground",
+					children: "No quotas assigned to this subscription"
+				})
+			})
+		]
+	});
+}, ne = ({ 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));
+	};
+	return /* @__PURE__ */ O("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center",
+		children: [/* @__PURE__ */ D("div", {
+			className: "absolute inset-0 bg-overlay-scrim",
+			onClick: o
+		}), /* @__PURE__ */ O("div", {
+			className: "relative bg-background border border-border rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-auto",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": "quota-detail-title",
+			children: [
+				/* @__PURE__ */ O("div", {
+					className: "sticky top-0 bg-background border-b border-border p-4 flex items-center justify-between",
+					children: [/* @__PURE__ */ O("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ D(k, {
+							status: a.status,
+							className: "w-5 h-5"
+						}), /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("h2", {
+							id: "quota-detail-title",
+							className: "text-lg font-semibold capitalize",
+							children: a.name.replace(/_/g, " ")
+						}), /* @__PURE__ */ O("p", {
+							className: "text-sm text-muted-foreground",
+							children: [
+								a.quotaCount,
+								" quota assignment",
+								a.quotaCount === 1 ? "" : "s"
+							]
+						})] })]
+					}), /* @__PURE__ */ D("button", {
+						onClick: o,
+						className: "p-1 rounded-md hover:bg-muted/50 transition-colors",
+						"aria-label": "Close quota details",
+						children: /* @__PURE__ */ D(w, { className: "w-5 h-5" })
+					})]
+				}),
+				/* @__PURE__ */ O("div", {
+					className: "p-4 border-b border-border",
+					children: [/* @__PURE__ */ O("div", {
+						className: "mb-4",
+						children: [
+							/* @__PURE__ */ O("div", {
+								className: "flex items-center justify-between mb-2",
+								children: [/* @__PURE__ */ D("span", {
+									className: "text-sm text-muted-foreground",
+									children: "Usage"
+								}), /* @__PURE__ */ D(A, { status: a.status })]
+							}),
+							/* @__PURE__ */ D(j, {
+								percentage: a.usagePercentage,
+								status: a.status
+							}),
+							/* @__PURE__ */ O("div", {
+								className: "flex items-center justify-between mt-2 text-sm",
+								children: [/* @__PURE__ */ O("span", {
+									className: "font-medium",
+									children: [
+										r(a.totalUsed),
+										" /",
+										" ",
+										a.totalLimit != null && a.totalLimit > 0 ? r(a.totalLimit) : "∞",
+										a.unit && ` ${a.unit}`
+									]
+								}), /* @__PURE__ */ D("span", {
+									className: "text-muted-foreground",
+									children: a.totalLimit != null && a.totalLimit > 0 ? `${Math.round(a.usagePercentage)}% used` : "Unlimited"
+								})]
+							})
+						]
+					}), a.quotaCount > 1 && /* @__PURE__ */ O("div", {
+						className: "mt-4",
+						children: [/* @__PURE__ */ D("h3", {
+							className: "text-sm font-medium text-foreground mb-3",
+							children: "Quota Breakdown"
+						}), /* @__PURE__ */ D("div", {
+							className: "border border-border rounded-lg overflow-hidden divide-y divide-border",
+							children: [...a.quotaAssignments].sort((e, t) => (e.endtime ? new Date(e.endtime).getTime() : Infinity) - (t.endtime ? new Date(t.endtime).getTime() : Infinity)).map((e) => {
+								let n = e.endtime ? new Date(e.endtime) : null, i = /* @__PURE__ */ new Date(), a = n && n < i, o = n ? Math.ceil((n.getTime() - i.getTime()) / (1440 * 60 * 1e3)) : null, s = o !== null && o > 0 && o <= 7;
+								return /* @__PURE__ */ O("div", {
+									className: `flex items-center justify-between px-3 py-2.5 ${a ? "bg-muted/30" : s ? t.warning.bg : "bg-background"}`,
+									children: [/* @__PURE__ */ O("div", {
+										className: "flex items-center gap-2",
+										children: [s && !a && /* @__PURE__ */ D("span", { className: `w-2 h-2 rounded-full ${t.warning.dot} animate-pulse` }), /* @__PURE__ */ O("div", {
+											className: "flex flex-col",
+											children: [/* @__PURE__ */ D("span", {
+												className: `text-sm ${a ? "text-muted-foreground" : "text-foreground"}`,
+												children: n ? n.toLocaleDateString("en-US", {
+													month: "short",
+													day: "numeric",
+													year: "numeric"
+												}) : "No expiry"
+											}), /* @__PURE__ */ D("span", {
+												className: `text-xs ${a ? "text-destructive" : s ? t.warning.text : "text-muted-foreground"}`,
+												children: a ? "Expired" : o === null ? "Never expires" : o === 0 ? "Expires today" : o === 1 ? "Expires tomorrow" : `${o} days left`
+											})]
+										})]
+									}), /* @__PURE__ */ D("div", {
+										className: "text-right",
+										children: /* @__PURE__ */ O("span", {
+											className: `text-sm font-semibold ${a ? "text-muted-foreground" : "text-foreground"}`,
+											children: [r(e.used), /* @__PURE__ */ O("span", {
+												className: "text-muted-foreground font-normal",
+												children: [
+													" / ",
+													e.limit != null && e.limit > 0 ? r(e.limit) : "∞",
+													e.unit && ` ${e.unit}`
+												]
+											})]
+										})
+									})]
+								}, e.id);
+							})
+						})]
+					})]
+				}),
+				/* @__PURE__ */ O("div", {
+					className: "p-4",
+					children: [
+						/* @__PURE__ */ D("h3", {
+							className: "text-sm font-medium text-foreground mb-3",
+							children: "Recent Usage"
+						}),
+						b ? /* @__PURE__ */ D("div", {
+							className: "space-y-2",
+							children: [
+								1,
+								2,
+								3
+							].map((e) => /* @__PURE__ */ D("div", { className: "h-12 bg-muted animate-pulse rounded" }, e))
+						}) : h.length === 0 ? /* @__PURE__ */ D("p", {
+							className: "text-sm text-muted-foreground text-center py-6",
+							children: "No usage records found"
+						}) : /* @__PURE__ */ D("div", {
+							className: "space-y-2",
+							children: h.map((e) => /* @__PURE__ */ O("div", {
+								className: "flex items-center justify-between p-3 border border-border rounded-lg",
+								children: [/* @__PURE__ */ O("div", {
+									className: "flex-1 min-w-0",
+									children: [/* @__PURE__ */ D("p", {
+										className: "text-sm font-medium text-foreground",
+										children: e.description || "Usage recorded"
+									}), /* @__PURE__ */ O("p", {
+										className: "text-xs text-muted-foreground",
+										children: [
+											i(e.timestamp),
+											" • ",
+											n(e.timestamp)
+										]
+									})]
+								}), /* @__PURE__ */ D("span", {
+									className: "text-sm font-medium text-foreground ml-4",
+									children: r(e.amount)
+								})]
+							}, e.id))
+						}),
+						(s.length > 1 || g) && /* @__PURE__ */ O("div", {
+							className: "flex items-center justify-center gap-2 mt-4",
+							children: [
+								/* @__PURE__ */ D("button", {
+									onClick: S,
+									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",
+									children: /* @__PURE__ */ D(_, { className: "w-4 h-4" })
+								}),
+								/* @__PURE__ */ O("span", {
+									className: "text-sm text-muted-foreground",
+									children: ["Page ", d]
+								}),
+								/* @__PURE__ */ D("button", {
+									onClick: x,
+									disabled: !g,
+									className: "px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50",
+									"aria-label": "Next usage page",
+									children: /* @__PURE__ */ D(v, { className: "w-4 h-4" })
+								})
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ D("div", {
+					className: "sticky bottom-0 bg-background border-t border-border p-4",
+					children: /* @__PURE__ */ D("button", {
+						onClick: o,
+						className: "w-full py-2 px-4 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+						children: "Close"
+					})
+				})
+			]
+		})]
+	});
+}, F = () => {
+	let { t: e } = te(), n = (t, n) => {
+		let r = e(t);
+		return r === t ? n : r;
+	}, r = a(), [i, c] = f(() => {
+		if (!(typeof window > "u")) return new URLSearchParams(window.location.search).get("billingAccountId") || void 0;
+	}), [_, v] = f(null), [b, T] = f(""), [A, j] = f("all"), [F, I] = f("active"), L = u(b), { billingAccounts: R, isLoading: re } = o(), ie = (R.find((e) => e.isDefault) ?? R[0])?.id, z = i ?? ie, { dashboard: B, pooledQuotas: V, activeSubscriptions: H, pastSubscriptions: U, isLoading: ae, isPastSubscriptionsLoading: W, error: G, refetch: K, loadMorePastSubscriptions: oe, hasMorePastSubscriptions: se, isLoadingMorePast: ce, pastSubscriptionsCount: le } = s({
+		billingAccountId: z,
+		searchQuery: L || void 0,
+		viewMode: F
+	}), 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(() => V.filter(q), [V, q]), Y = d(() => A === "all" ? H : H.map((e) => ({
+		...e,
+		aggregatedQuotas: e.aggregatedQuotas.filter(q)
+	})).filter((e) => e.aggregatedQuotas.length > 0), [
+		H,
+		A,
+		q
+	]), X = d(() => A === "all" ? U : U.map((e) => ({
+		...e,
+		aggregatedQuotas: e.aggregatedQuotas.filter(q)
+	})).filter((e) => e.aggregatedQuotas.length > 0), [
+		U,
+		A,
+		q
+	]), Z = d(() => F === "active" ? {
+		active: Y,
+		past: []
+	} : F === "past" ? {
+		active: [],
+		past: X
+	} : {
+		active: Y,
+		past: X
+	}, [
+		F,
+		Y,
+		X
+	]), Q = b !== "" || A !== "all", ue = L !== b, de = () => {
+		T(""), j("all");
+	}, $ = (e) => {
+		j((t) => t === e ? "all" : e);
+	};
+	if (!r.canViewUsage) return /* @__PURE__ */ D("div", {
+		className: "flex items-center justify-center h-full min-h-[400px]",
+		children: /* @__PURE__ */ O("div", {
+			className: "text-center space-y-2",
+			children: [
+				/* @__PURE__ */ D("div", {
+					className: "w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center",
+					children: /* @__PURE__ */ D(m, { className: "w-6 h-6 text-muted-foreground" })
+				}),
+				/* @__PURE__ */ D("h2", {
+					className: "text-lg font-semibold text-foreground",
+					children: "Access Denied"
+				}),
+				/* @__PURE__ */ D("p", {
+					className: "text-sm text-muted-foreground max-w-sm",
+					children: "You don't have permission to view usage data."
+				})
+			]
+		})
+	});
+	if ((re || ae) && !B) return /* @__PURE__ */ O("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ D("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }),
+			/* @__PURE__ */ D("div", {
+				className: "grid grid-cols-2 sm:grid-cols-4 gap-4",
+				children: [
+					1,
+					2,
+					3,
+					4
+				].map((e) => /* @__PURE__ */ D("div", { className: "h-24 bg-muted animate-pulse rounded-lg" }, e))
+			}),
+			/* @__PURE__ */ D("div", { className: "h-64 bg-muted animate-pulse rounded-lg" })
+		]
+	});
+	if (G) return /* @__PURE__ */ D("div", {
+		className: "flex items-center justify-center h-full min-h-[400px]",
+		children: /* @__PURE__ */ O("div", {
+			className: "text-center space-y-4",
+			children: [
+				/* @__PURE__ */ D("div", {
+					className: "w-12 h-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
+					children: /* @__PURE__ */ D(m, { className: "w-6 h-6 text-destructive" })
+				}),
+				/* @__PURE__ */ D("h2", {
+					className: "text-lg font-semibold text-foreground",
+					children: "Failed to load usage data"
+				}),
+				/* @__PURE__ */ D("p", {
+					className: "text-sm text-muted-foreground",
+					children: G.message
+				}),
+				/* @__PURE__ */ D("button", {
+					onClick: () => K(),
+					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					children: "Try Again"
+				})
+			]
+		})
+	});
+	let fe = R.find((e) => e.id === z);
+	return /* @__PURE__ */ O("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ O("div", {
+				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("h1", {
+					className: "text-2xl font-bold text-foreground",
+					children: n("billing.usage.title", "Usage")
+				}), /* @__PURE__ */ D("p", {
+					className: "text-sm text-muted-foreground mt-1",
+					children: "Monitor your resource consumption and quota usage"
+				})] }), /* @__PURE__ */ O("div", {
+					className: "flex items-center gap-3",
+					children: [R.length > 1 && /* @__PURE__ */ D("select", {
+						value: z || "",
+						onChange: (e) => c(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 min-w-[200px]",
+						children: R.map((e) => /* @__PURE__ */ D("option", {
+							value: e.id,
+							children: e.name
+						}, e.id))
+					}), /* @__PURE__ */ D("button", {
+						onClick: () => K(),
+						className: "p-2 border border-border rounded-md hover:bg-muted/50 transition-colors",
+						title: "Refresh",
+						children: /* @__PURE__ */ D(C, { className: "w-4 h-4" })
+					})]
+				})]
+			}),
+			/* @__PURE__ */ O("div", {
+				className: "flex flex-col gap-3 sm:flex-row sm:items-center",
+				children: [
+					/* @__PURE__ */ O("div", {
+						className: "relative flex-1 max-w-md",
+						children: [
+							/* @__PURE__ */ D(ee, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }),
+							/* @__PURE__ */ D("input", {
+								type: "text",
+								value: b,
+								onChange: (e) => T(e.target.value),
+								placeholder: `Search ${F === "past" ? "past" : F === "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__ */ D("button", {
+								onClick: () => T(""),
+								className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted/50",
+								children: ue ? /* @__PURE__ */ D(C, { className: "w-3 h-3 text-muted-foreground animate-spin" }) : /* @__PURE__ */ D(w, { className: "w-3 h-3 text-muted-foreground" })
+							})
+						]
+					}),
+					/* @__PURE__ */ O("div", {
+						className: "flex items-center bg-muted/50 rounded-lg p-1 border border-border",
+						children: [/* @__PURE__ */ O("button", {
+							onClick: () => I("active"),
+							className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${F === "active" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"}`,
+							children: [/* @__PURE__ */ D(S, { className: "w-3.5 h-3.5" }), "Active"]
+						}), /* @__PURE__ */ O("button", {
+							onClick: () => I("past"),
+							disabled: W && F !== "past",
+							className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${F === "past" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"} ${W && F !== "past" ? "opacity-70" : ""}`,
+							children: [W && F === "past" ? /* @__PURE__ */ D(C, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ D(y, { className: "w-3.5 h-3.5" }), "Past"]
+						})]
+					}),
+					Q && /* @__PURE__ */ O("button", {
+						onClick: de,
+						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__ */ D(w, { className: "w-3 h-3" }), "Clear filters"]
+					})
+				]
+			}),
+			fe && /* @__PURE__ */ O("div", {
+				className: "text-sm text-muted-foreground",
+				children: [
+					"Viewing usage for",
+					" ",
+					/* @__PURE__ */ D("span", {
+						className: "font-medium text-foreground",
+						children: fe.name
+					})
+				]
+			}),
+			B && /* @__PURE__ */ O("div", {
+				className: "grid grid-cols-2 sm:grid-cols-4 gap-4",
+				children: [
+					/* @__PURE__ */ D(M, {
+						label: "Total Quotas",
+						value: B.totalQuotas,
+						icon: /* @__PURE__ */ D(x, { className: "w-5 h-5" }),
+						color: "blue",
+						isActive: A === "all",
+						onClick: () => j("all")
+					}),
+					/* @__PURE__ */ D(M, {
+						label: "Healthy",
+						value: B.healthyQuotas,
+						icon: /* @__PURE__ */ D(h, { className: "w-5 h-5" }),
+						color: "emerald",
+						isActive: A === "healthy",
+						onClick: () => $("healthy")
+					}),
+					/* @__PURE__ */ D(M, {
+						label: "Warning",
+						value: B.warningQuotas,
+						icon: /* @__PURE__ */ D(p, { className: "w-5 h-5" }),
+						color: "amber",
+						isActive: A === "warning",
+						onClick: () => $("warning")
+					}),
+					/* @__PURE__ */ D(M, {
+						label: "Critical / Exhausted",
+						value: B.criticalQuotas + B.exhaustedQuotas,
+						icon: /* @__PURE__ */ D(m, { className: "w-5 h-5" }),
+						color: "red",
+						isActive: A === "critical",
+						onClick: () => $("critical")
+					})
+				]
+			}),
+			(Q || F !== "active") && /* @__PURE__ */ O("div", {
+				className: "flex items-center gap-2 text-sm text-muted-foreground flex-wrap",
+				children: [
+					/* @__PURE__ */ O("span", { children: [
+						"Showing",
+						" ",
+						Z.active.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + Z.past.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + (F === "past" ? 0 : J.length),
+						" ",
+						"quotas"
+					] }),
+					/* @__PURE__ */ O("span", {
+						className: "px-2 py-0.5 bg-primary/10 text-primary rounded text-xs capitalize",
+						children: [F === "active" ? "Active" : F === "past" ? "Past" : "All", " subscriptions"]
+					}),
+					A !== "all" && /* @__PURE__ */ D("span", {
+						className: "px-2 py-0.5 bg-muted rounded text-xs capitalize",
+						children: A === "critical" ? "Critical / Exhausted" : A
+					}),
+					b && /* @__PURE__ */ O("span", {
+						className: "px-2 py-0.5 bg-muted rounded text-xs",
+						children: [
+							"“",
+							b,
+							"”"
+						]
+					})
+				]
+			}),
+			Z.active.length > 0 && /* @__PURE__ */ O("section", { children: [/* @__PURE__ */ O("h2", {
+				className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
+				children: [/* @__PURE__ */ D(S, { className: "w-5 h-5 text-primary" }), F === "all" ? "Active Subscription Quotas" : "Subscription Quotas"]
+			}), /* @__PURE__ */ D("div", {
+				className: "space-y-4",
+				children: Z.active.map((e) => /* @__PURE__ */ D(P, {
+					subscription: e,
+					onQuotaClick: v,
+					defaultExpanded: !0
+				}, e.id))
+			})] }),
+			Z.past.length > 0 && /* @__PURE__ */ O("section", { children: [/* @__PURE__ */ O("h2", {
+				className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ D(y, { className: "w-5 h-5 text-muted-foreground" }),
+					"Past Subscription Quotas",
+					/* @__PURE__ */ D("span", {
+						className: "text-xs font-normal text-muted-foreground",
+						children: "(Canceled / Expired / Upgraded)"
+					}),
+					le > 0 && /* @__PURE__ */ O("span", {
+						className: "text-xs font-normal px-2 py-0.5 bg-muted rounded-full",
+						children: [
+							Z.past.length,
+							se ? "+" : "",
+							" of ",
+							le
+						]
+					})
+				]
+			}), /* @__PURE__ */ O("div", {
+				className: "space-y-4",
+				children: [Z.past.map((e) => /* @__PURE__ */ D(P, {
+					subscription: e,
+					onQuotaClick: v,
+					defaultExpanded: F === "past"
+				}, e.id)), se && /* @__PURE__ */ D("div", {
+					className: "flex justify-center pt-2",
+					children: /* @__PURE__ */ D("button", {
+						onClick: oe,
+						disabled: ce,
+						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: ce ? /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(C, { className: "w-4 h-4 animate-spin" }), "Loading..."] }) : /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(g, { className: "w-4 h-4" }), "Load more past subscriptions"] })
+					})
+				})]
+			})] }),
+			F !== "past" && J.length > 0 && /* @__PURE__ */ O("section", { children: [/* @__PURE__ */ O("h2", {
+				className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ D(x, { className: `w-5 h-5 ${t.info.icon}` }),
+					"Pooled Quotas",
+					/* @__PURE__ */ D("span", {
+						className: "text-xs font-normal text-muted-foreground",
+						children: "(Shared across all products)"
+					})
+				]
+			}), /* @__PURE__ */ D("div", {
+				className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+				children: J.map((e) => /* @__PURE__ */ D(N, {
+					quota: e,
+					onClick: () => v(e)
+				}, e.name))
+			})] }),
+			F === "active" && H.length === 0 && V.length === 0 && !Q && /* @__PURE__ */ O("div", {
+				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+				children: [
+					/* @__PURE__ */ D("div", {
+						className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4",
+						children: /* @__PURE__ */ D(x, { className: "w-6 h-6 text-muted-foreground" })
+					}),
+					/* @__PURE__ */ D("h3", {
+						className: "text-lg font-medium text-foreground",
+						children: "No active quotas found"
+					}),
+					/* @__PURE__ */ D("p", {
+						className: "text-sm text-muted-foreground mt-1 text-center max-w-sm",
+						children: "Quotas will appear here once you have active subscriptions or pooled allocations."
+					})
+				]
+			}),
+			F === "past" && U.length === 0 && !Q && !W && /* @__PURE__ */ O("div", {
+				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+				children: [
+					/* @__PURE__ */ D("div", {
+						className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4",
+						children: /* @__PURE__ */ D(y, { className: "w-6 h-6 text-muted-foreground" })
+					}),
+					/* @__PURE__ */ D("h3", {
+						className: "text-lg font-medium text-foreground",
+						children: "No past subscriptions"
+					}),
+					/* @__PURE__ */ D("p", {
+						className: "text-sm text-muted-foreground mt-1 text-center max-w-sm",
+						children: "You don't have any canceled, expired, or upgraded subscriptions yet."
+					}),
+					/* @__PURE__ */ D("button", {
+						onClick: () => I("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"
+					})
+				]
+			}),
+			F === "past" && W && /* @__PURE__ */ D("div", {
+				className: "space-y-4",
+				children: [
+					1,
+					2,
+					3
+				].map((e) => /* @__PURE__ */ D("div", { className: "h-24 bg-muted animate-pulse rounded-lg" }, e))
+			}),
+			Q && Z.active.length === 0 && Z.past.length === 0 && (F === "past" || J.length === 0) && /* @__PURE__ */ O("div", {
+				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+				children: [
+					/* @__PURE__ */ D("div", {
+						className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4",
+						children: A !== "all" && !b ? /* @__PURE__ */ D(k, {
+							status: A === "healthy" ? "HEALTHY" : A === "warning" ? "WARNING" : "CRITICAL",
+							className: "w-6 h-6"
+						}) : /* @__PURE__ */ D(ee, { className: "w-6 h-6 text-muted-foreground" })
+					}),
+					/* @__PURE__ */ D("h3", {
+						className: "text-lg font-medium text-foreground",
+						children: A !== "all" && !b ? `No ${A === "critical" ? "critical or exhausted" : A} quotas` : "No matching quotas"
+					}),
+					/* @__PURE__ */ D("p", {
+						className: "text-sm text-muted-foreground mt-1 text-center max-w-sm",
+						children: A !== "all" && !b ? /* @__PURE__ */ O(E, { children: ["All your quotas are in a different status.", B && /* @__PURE__ */ O("span", {
+							className: "block mt-1",
+							children: [
+								"You have ",
+								B.healthyQuotas,
+								" healthy, ",
+								B.warningQuotas,
+								" warning, and ",
+								B.criticalQuotas + B.exhaustedQuotas,
+								" critical quotas."
+							]
+						})] }) : /* @__PURE__ */ O(E, { children: [
+							"No quotas match your current search or filter criteria in",
+							" ",
+							F === "past" ? "past" : F === "all" ? "any" : "active",
+							" ",
+							"subscriptions.",
+							F === "active" && !A.includes("all") && /* @__PURE__ */ D("span", {
+								className: "block mt-1",
+								children: "Try switching to “Past” or “All” to search across more subscriptions."
+							})
+						] })
+					}),
+					/* @__PURE__ */ O("div", {
+						className: "flex gap-2 mt-4",
+						children: [/* @__PURE__ */ D("button", {
+							onClick: de,
+							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"
+						}), F === "active" && b && /* @__PURE__ */ D("button", {
+							onClick: () => I("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"
+						})]
+					})
+				]
+			}),
+			_ && /* @__PURE__ */ D(ne, {
+				quota: _,
+				onClose: () => v(null)
+			})
+		]
+	});
+};
+//#endregion
+export { F as UsagePage };
+
+//# sourceMappingURL=UsagePage.js.map