@burdenoff/microfe-billing 2026.601.6 → 2026.604.2

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

@@ -1,22 +1,23 @@
 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, useWorkspaceQuotaHistory as l } from "../hooks/useUsage.js";
-import { useCallback as u, useDeferredValue as d, useMemo as f, useState as p } from "react";
-import { AlertCircle as m, AlertTriangle as h, CheckCircle as g, ChevronDown as _, ChevronLeft as v, ChevronRight as y, Clock as b, Info as x, Layers as S, Package as C, RefreshCw as w, Search as T, X as E, XCircle as D } from "lucide-react";
-import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
-import { useI18n as ee } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { QuotaStatus as n } from "../../../shared/types/graphql.js";
+import { formatDateTime as r, formatNumber as i, formatRelativeTime as a } from "../../../shared/utils/format.js";
+import { useBillingPermissions as o } from "../../../hooks/useBillingPermissions.js";
+import { useBillingAccountsForUsage as s, useEnhancedUsagePage as c, useQuotaUsageDetails as l, useWorkspaceQuotaHistory as u, useWorkspaceQuotaOverview as d } from "../hooks/useUsage.js";
+import { useCallback as ee, useDeferredValue as f, useMemo as p, useState as m } from "react";
+import { AlertCircle as h, AlertTriangle as g, CheckCircle as _, ChevronDown as v, ChevronLeft as y, ChevronRight as b, Clock as x, Info as S, Layers as C, Package as w, RefreshCw as T, Search as E, X as D, XCircle as O } from "lucide-react";
+import { Fragment as k, jsx as A, jsxs as j } 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 te = ({ status: e, className: n = "size-4" }) => {
+var ne = ({ status: e, className: n = "size-4" }) => {
 	switch (e) {
-		case "EXHAUSTED": return /* @__PURE__ */ k(D, { className: `${n} ${t.error.icon}` });
-		case "CRITICAL": return /* @__PURE__ */ k(h, { className: `${n} ${t.error.icon}` });
-		case "WARNING": return /* @__PURE__ */ k(m, { className: `${n} ${t.warning.icon}` });
-		case "HEALTHY": return /* @__PURE__ */ k(g, { className: `${n} ${t.success.icon}` });
-		default: return /* @__PURE__ */ k(x, { className: `${n} ${t.neutral.icon}` });
+		case "EXHAUSTED": return /* @__PURE__ */ A(O, { className: `${n} ${t.error.icon}` });
+		case "CRITICAL": return /* @__PURE__ */ A(g, { className: `${n} ${t.error.icon}` });
+		case "WARNING": return /* @__PURE__ */ A(h, { className: `${n} ${t.warning.icon}` });
+		case "HEALTHY": return /* @__PURE__ */ A(_, { className: `${n} ${t.success.icon}` });
+		default: return /* @__PURE__ */ A(S, { className: `${n} ${t.neutral.icon}` });
 	}
-}, j = ({ status: e }) => /* @__PURE__ */ k("span", {
+}, M = ({ status: e }) => /* @__PURE__ */ A("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,11 +26,11 @@ var te = ({ status: e, className: n = "size-4" }) => {
 		INACTIVE: `${t.neutral.bg} ${t.neutral.text}`
 	}[e]}`,
 	children: e
-}), M = ({ percentage: e, status: n }) => {
+}), N = ({ percentage: e, status: n }) => {
 	let r = Math.min(100, Math.max(0, e));
-	return /* @__PURE__ */ k("div", {
+	return /* @__PURE__ */ A("div", {
 		className: "w-full bg-muted rounded-full h-2.5 overflow-hidden",
-		children: /* @__PURE__ */ k("div", {
+		children: /* @__PURE__ */ A("div", {
 			className: `h-full rounded-full transition-all duration-300 ${{
 				EXHAUSTED: t.error.dot,
 				CRITICAL: t.error.dot,
@@ -40,7 +41,7 @@ var te = ({ status: e, className: n = "size-4" }) => {
 			style: { width: `${r}%` }
 		})
 	});
-}, N = ({ label: e, value: n, icon: r, color: i, isActive: a, onClick: o }) => {
+}, P = ({ label: e, value: n, icon: r, color: i, isActive: a, onClick: o }) => {
 	let s = {
 		blue: t.info,
 		emerald: t.success,
@@ -66,119 +67,119 @@ var te = ({ status: e, className: n = "size-4" }) => {
 		red: t.error.icon,
 		gray: t.neutral.icon
 	};
-	return /* @__PURE__ */ A("button", {
+	return /* @__PURE__ */ j("button", {
 		type: "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__ */ A("div", {
+		children: [/* @__PURE__ */ j("div", {
 			className: "flex items-center gap-2 mb-2",
-			children: [/* @__PURE__ */ k("span", {
+			children: [/* @__PURE__ */ A("span", {
 				className: u[i],
 				children: r
-			}), /* @__PURE__ */ k("span", {
+			}), /* @__PURE__ */ A("span", {
 				className: "text-sm text-muted-foreground",
 				children: e
 			})]
-		}), /* @__PURE__ */ k("p", {
+		}), /* @__PURE__ */ A("p", {
 			className: "text-2xl font-bold text-foreground",
 			children: n
 		})]
 	});
-}, P = ({ quota: e, planLabel: t, onClick: n }) => {
-	let i = e.totalLimit != null && e.totalLimit > 0 && !e.noLimit;
-	return /* @__PURE__ */ A("tr", {
+}, F = ({ quota: e, planLabel: t, onClick: n }) => {
+	let r = e.totalLimit != null && e.totalLimit > 0 && !e.noLimit;
+	return /* @__PURE__ */ j("tr", {
 		onClick: n,
 		className: "cursor-pointer hover:bg-muted/40 transition-colors border-b border-border last:border-b-0",
 		children: [
-			/* @__PURE__ */ A("td", {
+			/* @__PURE__ */ j("td", {
 				className: "px-4 py-3",
 				children: [
-					/* @__PURE__ */ k("span", {
+					/* @__PURE__ */ A("span", {
 						className: "text-sm font-medium text-primary hover:underline capitalize",
 						children: e.displayName || e.name.replace(/_/g, " ")
 					}),
-					/* @__PURE__ */ k("span", {
+					/* @__PURE__ */ A("span", {
 						className: "block text-xs font-mono text-muted-foreground mt-0.5",
 						children: e.name
 					}),
-					e.description && /* @__PURE__ */ k("span", {
+					e.description && /* @__PURE__ */ A("span", {
 						className: "block text-xs text-muted-foreground mt-0.5 max-w-[220px] truncate",
 						children: e.description
 					}),
-					e.quotaCount > 1 && /* @__PURE__ */ A("span", {
+					e.quotaCount > 1 && /* @__PURE__ */ j("span", {
 						className: "block text-xs text-muted-foreground mt-0.5",
 						children: [e.quotaCount, " assignments"]
 					})
 				]
 			}),
-			t !== void 0 && /* @__PURE__ */ k("td", {
+			t !== void 0 && /* @__PURE__ */ A("td", {
 				className: "px-4 py-3 text-sm text-muted-foreground whitespace-nowrap",
 				children: t
 			}),
-			/* @__PURE__ */ k("td", {
+			/* @__PURE__ */ A("td", {
 				className: "px-4 py-3",
-				children: /* @__PURE__ */ A("div", {
+				children: /* @__PURE__ */ j("div", {
 					className: "space-y-1.5",
-					children: [/* @__PURE__ */ A("span", {
+					children: [/* @__PURE__ */ j("span", {
 						className: "text-sm text-foreground tabular-nums",
 						children: [
-							r(e.totalUsed),
+							i(e.totalUsed),
 							"\xA0/\xA0",
-							i ? r(e.totalLimit) : "∞",
+							r ? i(e.totalLimit) : "∞",
 							e.unit ? ` ${e.unit}` : ""
 						]
-					}), /* @__PURE__ */ k(M, {
-						percentage: i ? e.usagePercentage : 0,
+					}), /* @__PURE__ */ A(N, {
+						percentage: r ? e.usagePercentage : 0,
 						status: e.status
 					})]
 				})
 			}),
-			/* @__PURE__ */ k("td", {
+			/* @__PURE__ */ A("td", {
 				className: "px-4 py-3 text-sm text-muted-foreground tabular-nums whitespace-nowrap",
-				children: i ? r(e.totalLimit) : "∞"
+				children: r ? i(e.totalLimit) : "∞"
 			}),
-			/* @__PURE__ */ k("td", {
+			/* @__PURE__ */ A("td", {
 				className: "px-4 py-3",
-				children: /* @__PURE__ */ k(j, { status: e.status })
+				children: /* @__PURE__ */ A(M, { status: e.status })
 			})
 		]
 	});
-}, ne = ({ quotas: e, planLabel: t, showPlanColumn: n = !0, onQuotaClick: r }) => /* @__PURE__ */ k("div", {
+}, re = ({ quotas: e, planLabel: t, showPlanColumn: n = !0, onQuotaClick: r }) => /* @__PURE__ */ A("div", {
 	className: "overflow-x-auto rounded-lg border border-border bg-card",
-	children: /* @__PURE__ */ A("table", {
+	children: /* @__PURE__ */ j("table", {
 		className: "w-full text-left",
-		children: [/* @__PURE__ */ k("thead", { children: /* @__PURE__ */ A("tr", {
+		children: [/* @__PURE__ */ A("thead", { children: /* @__PURE__ */ j("tr", {
 			className: "border-b border-border bg-muted/30",
 			children: [
-				/* @__PURE__ */ k("th", {
+				/* @__PURE__ */ A("th", {
 					className: "px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
 					children: "Quotas"
 				}),
-				n && /* @__PURE__ */ k("th", {
+				n && /* @__PURE__ */ A("th", {
 					className: "px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
 					children: "Plan"
 				}),
-				/* @__PURE__ */ k("th", {
+				/* @__PURE__ */ A("th", {
 					className: "px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
 					children: "Current Usage"
 				}),
-				/* @__PURE__ */ k("th", {
+				/* @__PURE__ */ A("th", {
 					className: "px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
 					children: "Limit"
 				}),
-				/* @__PURE__ */ k("th", {
+				/* @__PURE__ */ A("th", {
 					className: "px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
 					children: "Status"
 				})
 			]
-		}) }), /* @__PURE__ */ k("tbody", { children: e.map((e) => /* @__PURE__ */ k(P, {
+		}) }), /* @__PURE__ */ A("tbody", { children: e.map((e) => /* @__PURE__ */ A(F, {
 			quota: e,
 			planLabel: n ? t : void 0,
 			onClick: () => r(e)
 		}, e.name)) })]
 	})
-}), F = ({ subscription: e, onQuotaClick: n, defaultExpanded: r = !0 }) => {
-	let [i, a] = p(r), o = {
+}), ie = ({ subscription: e, onQuotaClick: n, defaultExpanded: r = !0 }) => {
+	let [i, a] = m(r), o = {
 		active: `${t.success.bg} ${t.success.text}`,
 		trialing: `${t.info.bg} ${t.info.text}`,
 		past_due: `${t.warning.bg} ${t.warning.text}`,
@@ -186,27 +187,27 @@ var te = ({ status: e, className: n = "size-4" }) => {
 		expired: `${t.neutral.bg} ${t.neutral.text}`,
 		upgraded: `${t.primary.bg} ${t.primary.text}`
 	};
-	return /* @__PURE__ */ A("div", {
+	return /* @__PURE__ */ j("div", {
 		className: "border border-border rounded-lg bg-card overflow-hidden",
 		children: [
-			/* @__PURE__ */ A("button", {
+			/* @__PURE__ */ j("button", {
 				type: "button",
 				onClick: () => a(!i),
 				className: "w-full flex items-center justify-between p-4 hover:bg-muted/50 transition-colors",
-				children: [/* @__PURE__ */ A("div", {
+				children: [/* @__PURE__ */ j("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ k(C, { className: "size-5 text-primary" }), /* @__PURE__ */ A("div", {
+					children: [/* @__PURE__ */ A(w, { className: "size-5 text-primary" }), /* @__PURE__ */ j("div", {
 						className: "text-left",
-						children: [/* @__PURE__ */ A("div", {
+						children: [/* @__PURE__ */ j("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ k("span", {
+							children: [/* @__PURE__ */ A("span", {
 								className: "font-medium text-foreground",
 								children: "Subscription"
-							}), /* @__PURE__ */ k("span", {
+							}), /* @__PURE__ */ A("span", {
 								className: `px-2 py-0.5 text-xs font-medium rounded capitalize ${o[e.status.toLowerCase()] || o.active}`,
 								children: e.status
 							})]
-						}), /* @__PURE__ */ A("p", {
+						}), /* @__PURE__ */ j("p", {
 							className: "text-xs text-muted-foreground",
 							children: [
 								e.aggregatedQuotas.length,
@@ -215,150 +216,150 @@ var te = ({ status: e, className: n = "size-4" }) => {
 							]
 						})]
 					})]
-				}), k(i ? _ : y, { className: "size-5 text-muted-foreground" })]
+				}), A(i ? v : b, { className: "size-5 text-muted-foreground" })]
 			}),
-			i && e.aggregatedQuotas.length > 0 && /* @__PURE__ */ k("div", {
+			i && e.aggregatedQuotas.length > 0 && /* @__PURE__ */ A("div", {
 				className: "border-t border-border",
-				children: /* @__PURE__ */ k(ne, {
+				children: /* @__PURE__ */ A(re, {
 					quotas: e.aggregatedQuotas,
 					planLabel: e.planName || e.productId || void 0,
 					showPlanColumn: !!(e.planName || e.productId),
 					onQuotaClick: n
 				})
 			}),
-			i && e.aggregatedQuotas.length === 0 && /* @__PURE__ */ k("div", {
+			i && e.aggregatedQuotas.length === 0 && /* @__PURE__ */ A("div", {
 				className: "border-t border-border p-6 text-center",
-				children: /* @__PURE__ */ k("p", {
+				children: /* @__PURE__ */ A("p", {
 					className: "text-sm text-muted-foreground",
 					children: "No quotas assigned to this subscription"
 				})
 			})
 		]
 	});
-}, re = ({ quota: a, onClose: o }) => {
-	let [s, u] = p([null]), d = s[s.length - 1] ?? null, f = s.length, { workspaceId: m } = e(), h = a.quotaAssignments[0]?.id, { usages: g, hasNextPage: _, nextCursor: b, isLoading: x } = c(h, 10, d, m), { snapshots: S, isLoading: C } = l(m, a.name, 24), w = () => {
-		b && u((e) => [...e, b]);
-	}, T = () => {
-		s.length > 1 && u((e) => e.slice(0, -1));
+}, ae = ({ quota: n, onClose: o }) => {
+	let [s, c] = m([null]), d = s[s.length - 1] ?? null, ee = s.length, { workspaceId: f } = e(), p = n.quotaAssignments[0]?.id, { usages: h, hasNextPage: g, nextCursor: _, isLoading: v } = l(p, 10, d, f), { snapshots: x, isLoading: S } = u(f, n.name, 24), C = () => {
+		_ && c((e) => [...e, _]);
+	}, w = () => {
+		s.length > 1 && c((e) => e.slice(0, -1));
 	};
-	return /* @__PURE__ */ A("div", {
+	return /* @__PURE__ */ j("div", {
 		className: "fixed inset-0 z-50 flex items-center justify-center",
-		children: [/* @__PURE__ */ k("div", {
+		children: [/* @__PURE__ */ A("div", {
 			className: "absolute inset-0 bg-overlay-scrim",
 			onClick: o
-		}), /* @__PURE__ */ A("div", {
+		}), /* @__PURE__ */ j("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__ */ A("div", {
+				/* @__PURE__ */ j("div", {
 					className: "sticky top-0 bg-background border-b border-border p-4 flex items-center justify-between",
-					children: [/* @__PURE__ */ A("div", {
+					children: [/* @__PURE__ */ j("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ k(te, {
-							status: a.status,
+						children: [/* @__PURE__ */ A(ne, {
+							status: n.status,
 							className: "size-5"
-						}), /* @__PURE__ */ A("div", { children: [
-							/* @__PURE__ */ k("h2", {
+						}), /* @__PURE__ */ j("div", { children: [
+							/* @__PURE__ */ A("h2", {
 								id: "quota-detail-title",
 								className: "text-lg font-semibold capitalize",
-								children: a.displayName || a.name.replace(/_/g, " ")
+								children: n.displayName || n.name.replace(/_/g, " ")
 							}),
-							/* @__PURE__ */ k("p", {
+							/* @__PURE__ */ A("p", {
 								className: "text-xs font-mono text-muted-foreground",
-								children: a.name
+								children: n.name
 							}),
-							a.description && /* @__PURE__ */ k("p", {
+							n.description && /* @__PURE__ */ A("p", {
 								className: "text-sm text-muted-foreground mt-0.5",
-								children: a.description
+								children: n.description
 							}),
-							/* @__PURE__ */ A("p", {
+							/* @__PURE__ */ j("p", {
 								className: "text-sm text-muted-foreground mt-0.5",
 								children: [
-									a.quotaCount,
+									n.quotaCount,
 									" quota assignment",
-									a.quotaCount === 1 ? "" : "s"
+									n.quotaCount === 1 ? "" : "s"
 								]
 							})
 						] })]
-					}), /* @__PURE__ */ k("button", {
+					}), /* @__PURE__ */ A("button", {
 						type: "button",
 						onClick: o,
 						className: "p-1 rounded-md hover:bg-muted/50 transition-colors",
 						"aria-label": "Close quota details",
-						children: /* @__PURE__ */ k(E, { className: "size-5" })
+						children: /* @__PURE__ */ A(D, { className: "size-5" })
 					})]
 				}),
-				/* @__PURE__ */ A("div", {
+				/* @__PURE__ */ j("div", {
 					className: "p-4 border-b border-border",
-					children: [/* @__PURE__ */ A("div", {
+					children: [/* @__PURE__ */ j("div", {
 						className: "mb-4",
 						children: [
-							/* @__PURE__ */ A("div", {
+							/* @__PURE__ */ j("div", {
 								className: "flex items-center justify-between mb-2",
-								children: [/* @__PURE__ */ k("span", {
+								children: [/* @__PURE__ */ A("span", {
 									className: "text-sm text-muted-foreground",
 									children: "Usage"
-								}), /* @__PURE__ */ k(j, { status: a.status })]
+								}), /* @__PURE__ */ A(M, { status: n.status })]
 							}),
-							/* @__PURE__ */ k(M, {
-								percentage: a.usagePercentage,
-								status: a.status
+							/* @__PURE__ */ A(N, {
+								percentage: n.usagePercentage,
+								status: n.status
 							}),
-							/* @__PURE__ */ A("div", {
+							/* @__PURE__ */ j("div", {
 								className: "flex items-center justify-between mt-2 text-sm",
-								children: [/* @__PURE__ */ A("span", {
+								children: [/* @__PURE__ */ j("span", {
 									className: "font-medium",
 									children: [
-										r(a.totalUsed),
+										i(n.totalUsed),
 										" /",
 										" ",
-										a.totalLimit != null && a.totalLimit > 0 ? r(a.totalLimit) : "∞",
-										a.unit && ` ${a.unit}`
+										n.totalLimit != null && n.totalLimit > 0 ? i(n.totalLimit) : "∞",
+										n.unit && ` ${n.unit}`
 									]
-								}), /* @__PURE__ */ k("span", {
+								}), /* @__PURE__ */ A("span", {
 									className: "text-muted-foreground",
-									children: a.totalLimit != null && a.totalLimit > 0 ? `${Math.round(a.usagePercentage)}% used` : "Unlimited"
+									children: n.totalLimit != null && n.totalLimit > 0 ? `${Math.round(n.usagePercentage)}% used` : "Unlimited"
 								})]
 							})
 						]
-					}), a.quotaCount > 1 && /* @__PURE__ */ A("div", {
+					}), n.quotaCount > 1 && /* @__PURE__ */ j("div", {
 						className: "mt-4",
-						children: [/* @__PURE__ */ k("h3", {
+						children: [/* @__PURE__ */ A("h3", {
 							className: "text-sm font-medium text-foreground mb-3",
 							children: "Quota Breakdown"
-						}), /* @__PURE__ */ k("div", {
+						}), /* @__PURE__ */ A("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__ */ A("div", {
+							children: [...n.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, r = /* @__PURE__ */ new Date(), a = n && n < r, o = n ? Math.ceil((n.getTime() - r.getTime()) / (1440 * 60 * 1e3)) : null, s = o !== null && o > 0 && o <= 7;
+								return /* @__PURE__ */ j("div", {
 									className: `flex items-center justify-between px-3 py-2.5 ${a ? "bg-muted/30" : s ? t.warning.bg : "bg-background"}`,
-									children: [/* @__PURE__ */ A("div", {
+									children: [/* @__PURE__ */ j("div", {
 										className: "flex items-center gap-2",
-										children: [s && !a && /* @__PURE__ */ k("span", { className: `size-2 rounded-full ${t.warning.dot} animate-pulse` }), /* @__PURE__ */ A("div", {
+										children: [s && !a && /* @__PURE__ */ A("span", { className: `size-2 rounded-full ${t.warning.dot} animate-pulse` }), /* @__PURE__ */ j("div", {
 											className: "flex flex-col",
-											children: [/* @__PURE__ */ k("span", {
+											children: [/* @__PURE__ */ A("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__ */ k("span", {
+											}), /* @__PURE__ */ A("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__ */ k("div", {
+									}), /* @__PURE__ */ A("div", {
 										className: "text-right",
-										children: /* @__PURE__ */ A("span", {
+										children: /* @__PURE__ */ j("span", {
 											className: `text-sm font-semibold ${a ? "text-muted-foreground" : "text-foreground"}`,
-											children: [r(e.used), /* @__PURE__ */ A("span", {
+											children: [i(e.used), /* @__PURE__ */ j("span", {
 												className: "text-muted-foreground font-normal",
 												children: [
 													" / ",
-													e.limit != null && e.limit > 0 ? r(e.limit) : "∞",
+													e.limit != null && e.limit > 0 ? i(e.limit) : "∞",
 													e.unit && ` ${e.unit}`
 												]
 											})]
@@ -369,115 +370,115 @@ var te = ({ status: e, className: n = "size-4" }) => {
 						})]
 					})]
 				}),
-				(C || S.length > 0) && /* @__PURE__ */ A("div", {
+				(S || x.length > 0) && /* @__PURE__ */ j("div", {
 					className: "p-4 border-t border-border",
-					children: [/* @__PURE__ */ k("h3", {
+					children: [/* @__PURE__ */ A("h3", {
 						className: "text-sm font-medium text-foreground mb-3",
 						children: "Live Value History"
-					}), C ? /* @__PURE__ */ k("div", {
+					}), S ? /* @__PURE__ */ A("div", {
 						className: "space-y-1.5",
 						children: [
 							1,
 							2,
 							3
-						].map((e) => /* @__PURE__ */ k("div", { className: "h-8 bg-muted animate-pulse rounded" }, e))
-					}) : /* @__PURE__ */ k("div", {
+						].map((e) => /* @__PURE__ */ A("div", { className: "h-8 bg-muted animate-pulse rounded" }, e))
+					}) : /* @__PURE__ */ A("div", {
 						className: "space-y-1.5",
-						children: S.map((e) => /* @__PURE__ */ A("div", {
+						children: x.map((e) => /* @__PURE__ */ j("div", {
 							className: "flex items-center justify-between px-3 py-2 bg-muted/30 rounded-md",
-							children: [/* @__PURE__ */ k("span", {
+							children: [/* @__PURE__ */ A("span", {
 								className: "text-xs text-muted-foreground",
-								children: n(e.snapshotAt)
-							}), /* @__PURE__ */ A("span", {
+								children: r(e.snapshotAt)
+							}), /* @__PURE__ */ j("span", {
 								className: "text-sm font-medium text-foreground tabular-nums",
 								children: [
-									r(e.value),
-									a.unit && /* @__PURE__ */ k("span", {
+									i(e.value),
+									n.unit && /* @__PURE__ */ A("span", {
 										className: "text-xs text-muted-foreground ml-1",
-										children: a.unit
+										children: n.unit
 									}),
-									!e.noLimit && e.limit != null && /* @__PURE__ */ A("span", {
+									!e.noLimit && e.limit != null && /* @__PURE__ */ j("span", {
 										className: "text-xs text-muted-foreground ml-1",
-										children: ["/ ", r(e.limit)]
+										children: ["/ ", i(e.limit)]
 									})
 								]
 							})]
 						}, e.id))
 					})]
 				}),
-				/* @__PURE__ */ A("div", {
+				/* @__PURE__ */ j("div", {
 					className: "p-4",
 					children: [
-						/* @__PURE__ */ k("h3", {
+						/* @__PURE__ */ A("h3", {
 							className: "text-sm font-medium text-foreground mb-3",
 							children: "Recent Usage"
 						}),
-						a.isCollectorBased ? /* @__PURE__ */ k("p", {
+						n.isCollectorBased ? /* @__PURE__ */ A("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."
-						}) : x ? /* @__PURE__ */ k("div", {
+						}) : v ? /* @__PURE__ */ A("div", {
 							className: "space-y-2",
 							children: [
 								1,
 								2,
 								3
-							].map((e) => /* @__PURE__ */ k("div", { className: "h-12 bg-muted animate-pulse rounded" }, e))
-						}) : g.length === 0 ? /* @__PURE__ */ k("p", {
+							].map((e) => /* @__PURE__ */ A("div", { className: "h-12 bg-muted animate-pulse rounded" }, e))
+						}) : h.length === 0 ? /* @__PURE__ */ A("p", {
 							className: "text-sm text-muted-foreground text-center py-6",
 							children: "No usage records found"
-						}) : /* @__PURE__ */ k("div", {
+						}) : /* @__PURE__ */ A("div", {
 							className: "space-y-2",
-							children: g.map((e) => /* @__PURE__ */ A("div", {
+							children: h.map((e) => /* @__PURE__ */ j("div", {
 								className: "flex items-center justify-between p-3 border border-border rounded-lg",
-								children: [/* @__PURE__ */ A("div", {
+								children: [/* @__PURE__ */ j("div", {
 									className: "flex-1 min-w-0",
-									children: [/* @__PURE__ */ k("p", {
+									children: [/* @__PURE__ */ A("p", {
 										className: "text-sm font-medium text-foreground",
 										children: e.description || "Usage recorded"
-									}), /* @__PURE__ */ A("p", {
+									}), /* @__PURE__ */ j("p", {
 										className: "text-xs text-muted-foreground",
 										children: [
-											i(e.timestamp),
+											a(e.timestamp),
 											" • ",
-											n(e.timestamp)
+											r(e.timestamp)
 										]
 									})]
-								}), /* @__PURE__ */ k("span", {
+								}), /* @__PURE__ */ A("span", {
 									className: "text-sm font-medium text-foreground ml-4",
-									children: r(e.amount)
+									children: i(e.amount)
 								})]
 							}, e.id))
 						}),
-						!a.isCollectorBased && (s.length > 1 || _) && /* @__PURE__ */ A("div", {
+						!n.isCollectorBased && (s.length > 1 || g) && /* @__PURE__ */ j("div", {
 							className: "flex items-center justify-center gap-2 mt-4",
 							children: [
-								/* @__PURE__ */ k("button", {
+								/* @__PURE__ */ A("button", {
 									type: "button",
-									onClick: T,
+									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",
-									children: /* @__PURE__ */ k(v, { className: "size-4" })
+									children: /* @__PURE__ */ A(y, { className: "size-4" })
 								}),
-								/* @__PURE__ */ A("span", {
+								/* @__PURE__ */ j("span", {
 									className: "text-sm text-muted-foreground",
-									children: ["Page ", f]
+									children: ["Page ", ee]
 								}),
-								/* @__PURE__ */ k("button", {
+								/* @__PURE__ */ A("button", {
 									type: "button",
-									onClick: w,
-									disabled: !_,
+									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",
-									children: /* @__PURE__ */ k(y, { className: "size-4" })
+									children: /* @__PURE__ */ A(b, { className: "size-4" })
 								})
 							]
 						})
 					]
 				}),
-				/* @__PURE__ */ k("div", {
+				/* @__PURE__ */ A("div", {
 					className: "sticky bottom-0 bg-background border-t border-border p-4",
-					children: /* @__PURE__ */ k("button", {
+					children: /* @__PURE__ */ A("button", {
 						type: "button",
 						onClick: o,
 						className: "w-full py-2 px-4 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
@@ -487,454 +488,689 @@ var te = ({ status: e, className: n = "size-4" }) => {
 			]
 		})]
 	});
-}, I = () => {
-	let { t: n } = ee(), r = (e, t) => {
+};
+function I(e, t) {
+	return t ? n.HEALTHY : e >= 100 ? n.EXHAUSTED : e >= 90 ? n.CRITICAL : e >= 75 ? n.WARNING : n.HEALTHY;
+}
+var oe = ({ workspaceId: e }) => {
+	let { overview: n, isLoading: r, error: a, refetch: o } = d(e);
+	if (r && n.length === 0) return /* @__PURE__ */ A("div", {
+		className: "space-y-3",
+		children: [
+			1,
+			2,
+			3
+		].map((e) => /* @__PURE__ */ A("div", { className: "h-16 bg-muted animate-pulse rounded-lg" }, e))
+	});
+	if (a) return /* @__PURE__ */ j("div", {
+		className: "text-center py-8 space-y-2",
+		children: [
+			/* @__PURE__ */ A(g, { className: "size-8 text-destructive mx-auto" }),
+			/* @__PURE__ */ A("p", {
+				className: "text-sm text-muted-foreground",
+				children: a.message
+			}),
+			/* @__PURE__ */ A("button", {
+				type: "button",
+				onClick: () => o(),
+				className: "px-3 py-1.5 text-sm border border-border rounded-md hover:bg-muted/50 transition-colors",
+				children: "Retry"
+			})
+		]
+	});
+	if (n.length === 0) return /* @__PURE__ */ j("div", {
+		className: "text-center py-12 space-y-2",
+		children: [
+			/* @__PURE__ */ A(C, { className: "size-10 text-muted-foreground mx-auto opacity-40" }),
+			/* @__PURE__ */ A("h3", {
+				className: "text-base font-medium text-foreground",
+				children: "No workspace quotas assigned"
+			}),
+			/* @__PURE__ */ A("p", {
+				className: "text-sm text-muted-foreground max-w-sm mx-auto",
+				children: "Quotas are assigned to this workspace after a successful purchase. If you have an active subscription, contact support."
+			})
+		]
+	});
+	let s = n.filter((e) => I(e.usagePercentage, e.assignment.noLimit) === "HEALTHY").length, c = n.filter((e) => I(e.usagePercentage, e.assignment.noLimit) === "WARNING").length, l = n.filter((e) => {
+		let t = I(e.usagePercentage, e.assignment.noLimit);
+		return t === "CRITICAL" || t === "EXHAUSTED";
+	}).length;
+	return /* @__PURE__ */ j("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ j("div", {
+				className: "grid grid-cols-3 gap-3",
+				children: [
+					/* @__PURE__ */ j("div", {
+						className: `border rounded-lg p-3 ${t.success.bg} ${t.success.border}`,
+						children: [/* @__PURE__ */ j("div", {
+							className: "flex items-center gap-1.5 mb-1",
+							children: [/* @__PURE__ */ A(_, { className: `size-4 ${t.success.icon}` }), /* @__PURE__ */ A("span", {
+								className: "text-xs text-muted-foreground",
+								children: "Healthy"
+							})]
+						}), /* @__PURE__ */ A("p", {
+							className: "text-xl font-bold text-foreground",
+							children: s
+						})]
+					}),
+					/* @__PURE__ */ j("div", {
+						className: `border rounded-lg p-3 ${t.warning.bg} ${t.warning.border}`,
+						children: [/* @__PURE__ */ j("div", {
+							className: "flex items-center gap-1.5 mb-1",
+							children: [/* @__PURE__ */ A(h, { className: `size-4 ${t.warning.icon}` }), /* @__PURE__ */ A("span", {
+								className: "text-xs text-muted-foreground",
+								children: "Warning"
+							})]
+						}), /* @__PURE__ */ A("p", {
+							className: "text-xl font-bold text-foreground",
+							children: c
+						})]
+					}),
+					/* @__PURE__ */ j("div", {
+						className: `border rounded-lg p-3 ${t.error.bg} ${t.error.border}`,
+						children: [/* @__PURE__ */ j("div", {
+							className: "flex items-center gap-1.5 mb-1",
+							children: [/* @__PURE__ */ A(O, { className: `size-4 ${t.error.icon}` }), /* @__PURE__ */ A("span", {
+								className: "text-xs text-muted-foreground",
+								children: "Critical / Exhausted"
+							})]
+						}), /* @__PURE__ */ A("p", {
+							className: "text-xl font-bold text-foreground",
+							children: l
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "border border-border rounded-lg overflow-hidden",
+				children: /* @__PURE__ */ j("table", {
+					className: "w-full text-sm",
+					children: [/* @__PURE__ */ A("thead", { children: /* @__PURE__ */ j("tr", {
+						className: "border-b border-border bg-muted/30",
+						children: [
+							/* @__PURE__ */ A("th", {
+								className: "text-left px-4 py-3 font-medium text-muted-foreground",
+								children: "Quota"
+							}),
+							/* @__PURE__ */ A("th", {
+								className: "text-left px-4 py-3 font-medium text-muted-foreground hidden sm:table-cell",
+								children: "Product"
+							}),
+							/* @__PURE__ */ A("th", {
+								className: "text-left px-4 py-3 font-medium text-muted-foreground hidden md:table-cell",
+								children: "Mode"
+							}),
+							/* @__PURE__ */ A("th", {
+								className: "text-left px-4 py-3 font-medium text-muted-foreground",
+								children: "Usage"
+							}),
+							/* @__PURE__ */ A("th", {
+								className: "text-left px-4 py-3 font-medium text-muted-foreground hidden sm:table-cell",
+								children: "Limit"
+							}),
+							/* @__PURE__ */ A("th", {
+								className: "text-left px-4 py-3 font-medium text-muted-foreground",
+								children: "Status"
+							})
+						]
+					}) }), /* @__PURE__ */ A("tbody", {
+						className: "divide-y divide-border",
+						children: n.map((e) => {
+							let { assignment: t, liveStatus: n, effectiveUsed: r, remaining: a, usagePercentage: o } = e, s = I(o, t.noLimit), c = n !== null;
+							return /* @__PURE__ */ j("tr", {
+								className: "hover:bg-muted/20 transition-colors",
+								children: [
+									/* @__PURE__ */ j("td", {
+										className: "px-4 py-3",
+										children: [/* @__PURE__ */ A("div", {
+											className: "font-medium text-foreground",
+											children: t.quotaName
+										}), c && /* @__PURE__ */ j("div", {
+											className: "text-xs text-muted-foreground mt-0.5",
+											children: ["Live · ", new Date(n.scrapedAt).toLocaleTimeString()]
+										})]
+									}),
+									/* @__PURE__ */ A("td", {
+										className: "px-4 py-3 hidden sm:table-cell",
+										children: /* @__PURE__ */ A("span", {
+											className: "text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded",
+											children: t.productId
+										})
+									}),
+									/* @__PURE__ */ A("td", {
+										className: "px-4 py-3 hidden md:table-cell",
+										children: /* @__PURE__ */ A("span", {
+											className: "text-xs text-muted-foreground capitalize",
+											children: t.quotaMode
+										})
+									}),
+									/* @__PURE__ */ A("td", {
+										className: "px-4 py-3",
+										children: /* @__PURE__ */ j("div", {
+											className: "space-y-1.5",
+											children: [/* @__PURE__ */ j("div", {
+												className: "text-foreground",
+												children: [i(r), !t.noLimit && t.limit != null && /* @__PURE__ */ j("span", {
+													className: "text-muted-foreground",
+													children: [
+														" ",
+														"/ ",
+														i(t.limit)
+													]
+												})]
+											}), !t.noLimit && /* @__PURE__ */ A(N, {
+												percentage: o,
+												status: s
+											})]
+										})
+									}),
+									/* @__PURE__ */ A("td", {
+										className: "px-4 py-3 hidden sm:table-cell text-foreground",
+										children: t.noLimit ? /* @__PURE__ */ A("span", {
+											className: "text-muted-foreground",
+											children: "Unlimited"
+										}) : i(a ?? 0)
+									}),
+									/* @__PURE__ */ A("td", {
+										className: "px-4 py-3",
+										children: /* @__PURE__ */ A(M, { status: s })
+									})
+								]
+							}, t.id);
+						})
+					})]
+				})
+			}),
+			/* @__PURE__ */ j("p", {
+				className: "text-xs text-muted-foreground",
+				children: [
+					"Workspace quotas are sourced from the activity service.",
+					" ",
+					n.some((e) => e.liveStatus) && "Live values are updated every ~60 seconds."
+				]
+			})
+		]
+	});
+}, L = () => {
+	let { t: n } = te(), r = (e, t) => {
 		let r = n(e);
 		return r === e ? t : r;
-	}, i = a(), [c, l] = p(() => {
+	}, i = o(), [a, l] = m(() => {
 		if (!(typeof window > "u")) return new URLSearchParams(window.location.search).get("billingAccountId") || void 0;
-	}), [v, y] = p(null), [x, j] = p(""), [M, P] = p("all"), [I, L] = p("active"), ie = d(x), { billingAccounts: R, isLoading: ae } = o(), oe = (R.find((e) => e.isDefault) ?? R[0])?.id, z = c ?? oe, { workspaceId: se, navigate: ce } = e(), { dashboard: B, pooledQuotas: V, activeSubscriptions: H, pastSubscriptions: U, isLoading: le, isPastSubscriptionsLoading: W, error: G, refetch: ue, loadMorePastSubscriptions: de, hasMorePastSubscriptions: fe, isLoadingMorePast: pe, pastSubscriptionsCount: K } = s({
-		billingAccountId: z,
-		workspaceId: se,
-		searchQuery: ie || void 0,
-		viewMode: I
-	}), q = u((e) => M === "all" ? !0 : M === "healthy" ? e.status === "HEALTHY" : M === "warning" ? e.status === "WARNING" : M === "critical" ? e.status === "CRITICAL" || e.status === "EXHAUSTED" : !0, [M]), J = f(() => V.filter(q), [V, q]), Y = f(() => M === "all" ? H : H.map((e) => ({
+	}), [u, d] = m(null), [y, b] = m(""), [S, M] = m("all"), [N, F] = m("active"), I = f(y), { billingAccounts: L, isLoading: se } = s(), ce = (L.find((e) => e.isDefault) ?? L[0])?.id, R = a ?? ce, { workspaceId: z, navigate: le } = e(), [B, ue] = m("workspace"), { dashboard: V, pooledQuotas: H, activeSubscriptions: U, pastSubscriptions: W, isLoading: de, isPastSubscriptionsLoading: G, error: fe, refetch: pe, loadMorePastSubscriptions: me, hasMorePastSubscriptions: he, isLoadingMorePast: ge, pastSubscriptionsCount: _e } = c({
+		billingAccountId: R,
+		workspaceId: z,
+		searchQuery: I || void 0,
+		viewMode: N
+	}), K = ee((e) => S === "all" ? !0 : S === "healthy" ? e.status === "HEALTHY" : S === "warning" ? e.status === "WARNING" : S === "critical" ? e.status === "CRITICAL" || e.status === "EXHAUSTED" : !0, [S]), q = p(() => H.filter(K), [H, K]), J = p(() => S === "all" ? U : U.map((e) => ({
 		...e,
-		aggregatedQuotas: e.aggregatedQuotas.filter(q)
+		aggregatedQuotas: e.aggregatedQuotas.filter(K)
 	})).filter((e) => e.aggregatedQuotas.length > 0), [
-		H,
-		M,
-		q
-	]), X = f(() => M === "all" ? U : U.map((e) => ({
+		U,
+		S,
+		K
+	]), Y = p(() => S === "all" ? W : W.map((e) => ({
 		...e,
-		aggregatedQuotas: e.aggregatedQuotas.filter(q)
+		aggregatedQuotas: e.aggregatedQuotas.filter(K)
 	})).filter((e) => e.aggregatedQuotas.length > 0), [
-		U,
-		M,
-		q
-	]), Z = f(() => I === "active" ? {
-		active: Y,
+		W,
+		S,
+		K
+	]), X = p(() => N === "active" ? {
+		active: J,
 		past: []
-	} : I === "past" ? {
+	} : N === "past" ? {
 		active: [],
-		past: X
+		past: Y
 	} : {
-		active: Y,
-		past: X
+		active: J,
+		past: Y
 	}, [
-		I,
-		Y,
-		X
-	]), Q = x !== "" || M !== "all", me = ie !== x, he = () => {
-		j(""), P("all");
+		N,
+		J,
+		Y
+	]), Z = y !== "" || S !== "all", Q = I !== y, ve = () => {
+		b(""), M("all");
 	}, $ = (e) => {
-		P((t) => t === e ? "all" : e);
+		M((t) => t === e ? "all" : e);
 	};
-	if (!i.canViewUsage) return /* @__PURE__ */ k("div", {
+	if (!i.canViewUsage) return /* @__PURE__ */ A("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ A("div", {
+		children: /* @__PURE__ */ j("div", {
 			className: "text-center space-y-2",
 			children: [
-				/* @__PURE__ */ k("div", {
+				/* @__PURE__ */ A("div", {
 					className: "size-12 mx-auto rounded-full bg-muted flex items-center justify-center",
-					children: /* @__PURE__ */ k(h, { className: "size-6 text-muted-foreground" })
+					children: /* @__PURE__ */ A(g, { className: "size-6 text-muted-foreground" })
 				}),
-				/* @__PURE__ */ k("h2", {
+				/* @__PURE__ */ A("h2", {
 					className: "text-lg font-semibold text-foreground",
 					children: "Access Denied"
 				}),
-				/* @__PURE__ */ k("p", {
+				/* @__PURE__ */ A("p", {
 					className: "text-sm text-muted-foreground max-w-sm",
 					children: "You don't have permission to view usage data."
 				})
 			]
 		})
 	});
-	if ((ae || le) && !B) return /* @__PURE__ */ A("div", {
+	if ((se || de) && !V) return /* @__PURE__ */ j("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ k("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }),
-			/* @__PURE__ */ k("div", {
+			/* @__PURE__ */ A("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }),
+			/* @__PURE__ */ A("div", {
 				className: "grid grid-cols-2 sm:grid-cols-4 gap-4",
 				children: [
 					1,
 					2,
 					3,
 					4
-				].map((e) => /* @__PURE__ */ k("div", { className: "h-24 bg-muted animate-pulse rounded-lg" }, e))
+				].map((e) => /* @__PURE__ */ A("div", { className: "h-24 bg-muted animate-pulse rounded-lg" }, e))
 			}),
-			/* @__PURE__ */ k("div", { className: "h-64 bg-muted animate-pulse rounded-lg" })
+			/* @__PURE__ */ A("div", { className: "h-64 bg-muted animate-pulse rounded-lg" })
 		]
 	});
-	if (G) return /* @__PURE__ */ k("div", {
+	if (fe) return /* @__PURE__ */ A("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ A("div", {
+		children: /* @__PURE__ */ j("div", {
 			className: "text-center space-y-4",
 			children: [
-				/* @__PURE__ */ k("div", {
+				/* @__PURE__ */ A("div", {
 					className: "size-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
-					children: /* @__PURE__ */ k(h, { className: "size-6 text-destructive" })
+					children: /* @__PURE__ */ A(g, { className: "size-6 text-destructive" })
 				}),
-				/* @__PURE__ */ k("h2", {
+				/* @__PURE__ */ A("h2", {
 					className: "text-lg font-semibold text-foreground",
 					children: "Failed to load usage data"
 				}),
-				/* @__PURE__ */ k("p", {
+				/* @__PURE__ */ A("p", {
 					className: "text-sm text-muted-foreground",
-					children: G.message
+					children: fe.message
 				}),
-				/* @__PURE__ */ k("button", {
+				/* @__PURE__ */ A("button", {
 					type: "button",
-					onClick: () => ue(),
+					onClick: () => pe(),
 					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 ge = R.find((e) => e.id === z);
-	return /* @__PURE__ */ A("div", {
+	let ye = L.find((e) => e.id === R);
+	return /* @__PURE__ */ j("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ A("div", {
+			/* @__PURE__ */ j("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("h1", {
+				children: [/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("h1", {
 					className: "text-2xl font-bold text-foreground",
 					children: r("billing.usage.title", "Usage")
-				}), /* @__PURE__ */ k("p", {
+				}), /* @__PURE__ */ A("p", {
 					className: "text-sm text-muted-foreground mt-1",
 					children: "Monitor your resource consumption and quota usage"
-				})] }), /* @__PURE__ */ A("div", {
+				})] }), /* @__PURE__ */ j("div", {
 					className: "flex items-center gap-3",
-					children: [R.length > 1 && /* @__PURE__ */ k("select", {
-						value: z || "",
-						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: R.map((e) => /* @__PURE__ */ k("option", {
-							value: e.id,
-							children: e.name
-						}, e.id))
-					}), /* @__PURE__ */ k("button", {
-						type: "button",
-						onClick: () => ue(),
-						className: "p-2 border border-border rounded-md hover:bg-muted/50 transition-colors",
-						title: "Refresh",
-						children: /* @__PURE__ */ k(w, { className: "size-4" })
-					})]
-				})]
-			}),
-			/* @__PURE__ */ A("div", {
-				className: "flex flex-col gap-3 sm:flex-row sm:items-center",
-				children: [
-					/* @__PURE__ */ A("div", {
-						className: "relative flex-1 max-w-md",
-						children: [
-							/* @__PURE__ */ k(T, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }),
-							/* @__PURE__ */ k("input", {
-								type: "text",
-								value: x,
-								onChange: (e) => j(e.target.value),
-								placeholder: `Search ${I === "past" ? "past" : I === "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"
-							}),
-							(x || me) && /* @__PURE__ */ k("button", {
+					children: [
+						/* @__PURE__ */ j("div", {
+							className: "flex items-center bg-muted/50 rounded-lg p-1 border border-border",
+							children: [/* @__PURE__ */ j("button", {
 								type: "button",
-								onClick: () => j(""),
-								className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted/50",
-								children: me ? /* @__PURE__ */ k(w, { className: "size-3 text-muted-foreground animate-spin" }) : /* @__PURE__ */ k(E, { className: "size-3 text-muted-foreground" })
-							})
-						]
-					}),
-					/* @__PURE__ */ A("div", {
-						className: "flex items-center bg-muted/50 rounded-lg p-1 border border-border",
-						children: [/* @__PURE__ */ A("button", {
-							type: "button",
-							onClick: () => L("active"),
-							className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${I === "active" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"}`,
-							children: [/* @__PURE__ */ k(C, { className: "size-3.5" }), "Active"]
-						}), /* @__PURE__ */ A("button", {
+								onClick: () => ue("workspace"),
+								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${B === "workspace" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"}`,
+								children: [/* @__PURE__ */ A(C, { className: "size-3.5" }), "Workspace"]
+							}), /* @__PURE__ */ j("button", {
+								type: "button",
+								onClick: () => ue("global"),
+								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${B === "global" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"}`,
+								children: [/* @__PURE__ */ A(w, { className: "size-3.5" }), "Global"]
+							})]
+						}),
+						B === "global" && L.length > 1 && /* @__PURE__ */ A("select", {
+							value: R || "",
+							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: L.map((e) => /* @__PURE__ */ A("option", {
+								value: e.id,
+								children: e.name
+							}, e.id))
+						}),
+						/* @__PURE__ */ A("button", {
 							type: "button",
-							onClick: () => L("past"),
-							disabled: W && I !== "past",
-							className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${I === "past" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"} ${W && I !== "past" ? "opacity-70" : ""}`,
-							children: [W && I === "past" ? /* @__PURE__ */ k(w, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ k(b, { className: "size-3.5" }), "Past"]
-						})]
-					}),
-					Q && /* @__PURE__ */ A("button", {
-						type: "button",
-						onClick: he,
-						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__ */ k(E, { className: "size-3" }), "Clear filters"]
-					})
-				]
-			}),
-			ge && /* @__PURE__ */ A("div", {
-				className: "text-sm text-muted-foreground",
-				children: [
-					"Viewing usage for",
-					" ",
-					/* @__PURE__ */ k("span", {
-						className: "font-medium text-foreground",
-						children: ge.name
-					})
-				]
-			}),
-			B && /* @__PURE__ */ A("div", {
-				className: "grid grid-cols-2 sm:grid-cols-4 gap-4",
-				children: [
-					/* @__PURE__ */ k(N, {
-						label: "Total Quotas",
-						value: B.totalQuotas,
-						icon: /* @__PURE__ */ k(S, { className: "size-5" }),
-						color: "blue",
-						isActive: M === "all",
-						onClick: () => P("all")
-					}),
-					/* @__PURE__ */ k(N, {
-						label: "Healthy",
-						value: B.healthyQuotas,
-						icon: /* @__PURE__ */ k(g, { className: "size-5" }),
-						color: "emerald",
-						isActive: M === "healthy",
-						onClick: () => $("healthy")
-					}),
-					/* @__PURE__ */ k(N, {
-						label: "Warning",
-						value: B.warningQuotas,
-						icon: /* @__PURE__ */ k(m, { className: "size-5" }),
-						color: "amber",
-						isActive: M === "warning",
-						onClick: () => $("warning")
-					}),
-					/* @__PURE__ */ k(N, {
-						label: "Critical / Exhausted",
-						value: B.criticalQuotas + B.exhaustedQuotas,
-						icon: /* @__PURE__ */ k(h, { className: "size-5" }),
-						color: "red",
-						isActive: M === "critical",
-						onClick: () => $("critical")
-					})
-				]
-			}),
-			B && (B.warningQuotas > 0 || B.criticalQuotas > 0 || B.exhaustedQuotas > 0) && /* @__PURE__ */ A("div", {
-				className: `flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between p-4 rounded-lg border ${B.criticalQuotas > 0 || B.exhaustedQuotas > 0 ? `${t.error.bg} ${t.error.border}` : `${t.warning.bg} ${t.warning.border}`}`,
-				children: [/* @__PURE__ */ A("div", {
-					className: "flex items-center gap-3",
-					children: [B.criticalQuotas > 0 || B.exhaustedQuotas > 0 ? /* @__PURE__ */ k(D, { className: `size-5 shrink-0 ${t.error.icon}` }) : /* @__PURE__ */ k(m, { className: `size-5 shrink-0 ${t.warning.icon}` }), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
-						className: `text-sm font-medium ${B.criticalQuotas > 0 || B.exhaustedQuotas > 0 ? t.error.text : t.warning.text}`,
-						children: B.criticalQuotas > 0 || B.exhaustedQuotas > 0 ? `${B.criticalQuotas + B.exhaustedQuotas} quota${B.criticalQuotas + B.exhaustedQuotas === 1 ? "" : "s"} exhausted or critical` : `${B.warningQuotas} quota${B.warningQuotas === 1 ? "" : "s"} approaching the limit`
-					}), /* @__PURE__ */ k("p", {
-						className: "text-xs text-muted-foreground mt-0.5",
-						children: "Contact support to request a quota increase for your plan."
-					})] })]
-				}), /* @__PURE__ */ k("button", {
-					type: "button",
-					onClick: () => ce("/support/tickets"),
-					className: `shrink-0 px-4 py-2 text-sm font-medium rounded-md border transition-colors ${B.criticalQuotas > 0 || B.exhaustedQuotas > 0 ? "bg-destructive text-destructive-foreground border-destructive hover:bg-destructive/90" : "border-status-warning-border text-status-warning-text hover:bg-status-warning-bg-subtle"}`,
-					children: "Request more quota"
-				})]
-			}),
-			(Q || I !== "active") && /* @__PURE__ */ A("div", {
-				className: "flex items-center gap-2 text-sm text-muted-foreground flex-wrap",
-				children: [
-					/* @__PURE__ */ A("span", { children: [
-						"Showing",
-						" ",
-						Z.active.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + Z.past.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + (I === "past" ? 0 : J.length),
-						" ",
-						"quotas"
-					] }),
-					/* @__PURE__ */ A("span", {
-						className: "px-2 py-0.5 bg-primary/10 text-primary rounded text-xs capitalize",
-						children: [I === "active" ? "Active" : I === "past" ? "Past" : "All", " subscriptions"]
-					}),
-					M !== "all" && /* @__PURE__ */ k("span", {
-						className: "px-2 py-0.5 bg-muted rounded text-xs capitalize",
-						children: M === "critical" ? "Critical / Exhausted" : M
-					}),
-					x && /* @__PURE__ */ A("span", {
-						className: "px-2 py-0.5 bg-muted rounded text-xs",
-						children: [
-							"“",
-							x,
-							"”"
-						]
-					})
-				]
-			}),
-			Z.active.length > 0 && /* @__PURE__ */ A("section", { children: [/* @__PURE__ */ A("h2", {
-				className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
-				children: [/* @__PURE__ */ k(C, { className: "size-5 text-primary" }), I === "all" ? "Active Subscription Quotas" : "Subscription Quotas"]
-			}), /* @__PURE__ */ k("div", {
-				className: "space-y-4",
-				children: Z.active.map((e) => /* @__PURE__ */ k(F, {
-					subscription: e,
-					onQuotaClick: y,
-					defaultExpanded: !0
-				}, e.id))
-			})] }),
-			Z.past.length > 0 && /* @__PURE__ */ A("section", { children: [/* @__PURE__ */ A("h2", {
-				className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
-				children: [
-					/* @__PURE__ */ k(b, { className: "size-5 text-muted-foreground" }),
-					"Past Subscription Quotas",
-					/* @__PURE__ */ k("span", {
-						className: "text-xs font-normal text-muted-foreground",
-						children: "(Canceled / Expired / Upgraded)"
-					}),
-					K > 0 && /* @__PURE__ */ A("span", {
-						className: "text-xs font-normal px-2 py-0.5 bg-muted rounded-full",
-						children: [
-							Z.past.length,
-							fe ? "+" : "",
-							" of ",
-							K
-						]
-					})
-				]
-			}), /* @__PURE__ */ A("div", {
-				className: "space-y-4",
-				children: [Z.past.map((e) => /* @__PURE__ */ k(F, {
-					subscription: e,
-					onQuotaClick: y,
-					defaultExpanded: I === "past"
-				}, e.id)), fe && /* @__PURE__ */ k("div", {
-					className: "flex justify-center pt-2",
-					children: /* @__PURE__ */ k("button", {
-						type: "button",
-						onClick: de,
-						disabled: pe,
-						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: pe ? /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k(w, { className: "size-4 animate-spin" }), "Loading…"] }) : /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k(_, { className: "size-4" }), "Load more past subscriptions"] })
-					})
+							onClick: () => B === "workspace" ? void 0 : pe(),
+							className: "p-2 border border-border rounded-md hover:bg-muted/50 transition-colors",
+							title: "Refresh",
+							children: /* @__PURE__ */ A(T, { className: "size-4" })
+						})
+					]
 				})]
-			})] }),
-			I !== "past" && J.length > 0 && /* @__PURE__ */ A("section", { children: [/* @__PURE__ */ A("h2", {
-				className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
-				children: [
-					/* @__PURE__ */ k(S, { className: `size-5 ${t.info.icon}` }),
-					"Pooled Quotas",
-					/* @__PURE__ */ k("span", {
-						className: "text-xs font-normal text-muted-foreground",
-						children: "(Shared across all products)"
-					})
-				]
-			}), /* @__PURE__ */ k(ne, {
-				quotas: J,
-				showPlanColumn: !1,
-				onQuotaClick: y
-			})] }),
-			I === "active" && H.length === 0 && V.length === 0 && !Q && /* @__PURE__ */ A("div", {
-				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
-				children: [
-					/* @__PURE__ */ k("div", {
-						className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
-						children: /* @__PURE__ */ k(S, { className: "size-6 text-muted-foreground" })
-					}),
-					/* @__PURE__ */ k("h3", {
-						className: "text-lg font-medium text-foreground",
-						children: "No active quotas found"
-					}),
-					/* @__PURE__ */ k("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."
-					})
-				]
-			}),
-			I === "past" && U.length === 0 && !Q && !W && /* @__PURE__ */ A("div", {
-				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
-				children: [
-					/* @__PURE__ */ k("div", {
-						className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
-						children: /* @__PURE__ */ k(b, { className: "size-6 text-muted-foreground" })
-					}),
-					/* @__PURE__ */ k("h3", {
-						className: "text-lg font-medium text-foreground",
-						children: "No past subscriptions"
-					}),
-					/* @__PURE__ */ k("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__ */ k("button", {
-						type: "button",
-						onClick: () => L("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"
-					})
-				]
 			}),
-			I === "past" && W && /* @__PURE__ */ k("div", {
-				className: "space-y-4",
-				children: [
-					1,
-					2,
-					3
-				].map((e) => /* @__PURE__ */ k("div", { className: "h-24 bg-muted animate-pulse rounded-lg" }, e))
+			B === "workspace" && z && /* @__PURE__ */ A(oe, { workspaceId: z }),
+			B === "workspace" && !z && /* @__PURE__ */ A("div", {
+				className: "text-center py-12 text-muted-foreground text-sm",
+				children: "No workspace context available."
 			}),
-			Q && Z.active.length === 0 && Z.past.length === 0 && (I === "past" || J.length === 0) && /* @__PURE__ */ A("div", {
-				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
-				children: [
-					/* @__PURE__ */ k("div", {
-						className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
-						children: M !== "all" && !x ? /* @__PURE__ */ k(te, {
-							status: M === "healthy" ? "HEALTHY" : M === "warning" ? "WARNING" : "CRITICAL",
-							className: "size-6"
-						}) : /* @__PURE__ */ k(T, { className: "size-6 text-muted-foreground" })
-					}),
-					/* @__PURE__ */ k("h3", {
-						className: "text-lg font-medium text-foreground",
-						children: M !== "all" && !x ? `No ${M === "critical" ? "critical or exhausted" : M} quotas` : "No matching quotas"
-					}),
-					/* @__PURE__ */ k("p", {
-						className: "text-sm text-muted-foreground mt-1 text-center max-w-sm",
-						children: M !== "all" && !x ? /* @__PURE__ */ A(O, { children: ["All your quotas are in a different status.", B && /* @__PURE__ */ A("span", {
-							className: "block mt-1",
+			B === "global" && /* @__PURE__ */ j(k, { children: [
+				/* @__PURE__ */ j("div", {
+					className: "flex flex-col gap-3 sm:flex-row sm:items-center",
+					children: [
+						/* @__PURE__ */ j("div", {
+							className: "relative flex-1 max-w-md",
 							children: [
-								"You have ",
-								B.healthyQuotas,
-								" healthy, ",
-								B.warningQuotas,
-								" warning, and ",
-								B.criticalQuotas + B.exhaustedQuotas,
-								" critical quotas."
+								/* @__PURE__ */ A(E, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }),
+								/* @__PURE__ */ A("input", {
+									type: "text",
+									value: y,
+									onChange: (e) => b(e.target.value),
+									placeholder: `Search ${N === "past" ? "past" : N === "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"
+								}),
+								(y || Q) && /* @__PURE__ */ A("button", {
+									type: "button",
+									onClick: () => b(""),
+									className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted/50",
+									children: Q ? /* @__PURE__ */ A(T, { className: "size-3 text-muted-foreground animate-spin" }) : /* @__PURE__ */ A(D, { className: "size-3 text-muted-foreground" })
+								})
 							]
-						})] }) : /* @__PURE__ */ A(O, { children: [
-							"No quotas match your current search or filter criteria in",
+						}),
+						/* @__PURE__ */ j("div", {
+							className: "flex items-center bg-muted/50 rounded-lg p-1 border border-border",
+							children: [/* @__PURE__ */ j("button", {
+								type: "button",
+								onClick: () => F("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"}`,
+								children: [/* @__PURE__ */ A(w, { className: "size-3.5" }), "Active"]
+							}), /* @__PURE__ */ j("button", {
+								type: "button",
+								onClick: () => F("past"),
+								disabled: G && 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"} ${G && N !== "past" ? "opacity-70" : ""}`,
+								children: [G && N === "past" ? /* @__PURE__ */ A(T, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ A(x, { className: "size-3.5" }), "Past"]
+							})]
+						}),
+						Z && /* @__PURE__ */ j("button", {
+							type: "button",
+							onClick: ve,
+							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__ */ A(D, { className: "size-3" }), "Clear filters"]
+						})
+					]
+				}),
+				ye && /* @__PURE__ */ j("div", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						"Viewing usage for",
+						" ",
+						/* @__PURE__ */ A("span", {
+							className: "font-medium text-foreground",
+							children: ye.name
+						})
+					]
+				}),
+				V && /* @__PURE__ */ j("div", {
+					className: "grid grid-cols-2 sm:grid-cols-4 gap-4",
+					children: [
+						/* @__PURE__ */ A(P, {
+							label: "Total Quotas",
+							value: V.totalQuotas,
+							icon: /* @__PURE__ */ A(C, { className: "size-5" }),
+							color: "blue",
+							isActive: S === "all",
+							onClick: () => M("all")
+						}),
+						/* @__PURE__ */ A(P, {
+							label: "Healthy",
+							value: V.healthyQuotas,
+							icon: /* @__PURE__ */ A(_, { className: "size-5" }),
+							color: "emerald",
+							isActive: S === "healthy",
+							onClick: () => $("healthy")
+						}),
+						/* @__PURE__ */ A(P, {
+							label: "Warning",
+							value: V.warningQuotas,
+							icon: /* @__PURE__ */ A(h, { className: "size-5" }),
+							color: "amber",
+							isActive: S === "warning",
+							onClick: () => $("warning")
+						}),
+						/* @__PURE__ */ A(P, {
+							label: "Critical / Exhausted",
+							value: V.criticalQuotas + V.exhaustedQuotas,
+							icon: /* @__PURE__ */ A(g, { className: "size-5" }),
+							color: "red",
+							isActive: S === "critical",
+							onClick: () => $("critical")
+						})
+					]
+				}),
+				V && (V.warningQuotas > 0 || V.criticalQuotas > 0 || V.exhaustedQuotas > 0) && /* @__PURE__ */ j("div", {
+					className: `flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between p-4 rounded-lg border ${V.criticalQuotas > 0 || V.exhaustedQuotas > 0 ? `${t.error.bg} ${t.error.border}` : `${t.warning.bg} ${t.warning.border}`}`,
+					children: [/* @__PURE__ */ j("div", {
+						className: "flex items-center gap-3",
+						children: [V.criticalQuotas > 0 || V.exhaustedQuotas > 0 ? /* @__PURE__ */ A(O, { className: `size-5 shrink-0 ${t.error.icon}` }) : /* @__PURE__ */ A(h, { className: `size-5 shrink-0 ${t.warning.icon}` }), /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+							className: `text-sm font-medium ${V.criticalQuotas > 0 || V.exhaustedQuotas > 0 ? t.error.text : t.warning.text}`,
+							children: V.criticalQuotas > 0 || V.exhaustedQuotas > 0 ? `${V.criticalQuotas + V.exhaustedQuotas} quota${V.criticalQuotas + V.exhaustedQuotas === 1 ? "" : "s"} exhausted or critical` : `${V.warningQuotas} quota${V.warningQuotas === 1 ? "" : "s"} approaching the limit`
+						}), /* @__PURE__ */ A("p", {
+							className: "text-xs text-muted-foreground mt-0.5",
+							children: "Contact support to request a quota increase for your plan."
+						})] })]
+					}), /* @__PURE__ */ A("button", {
+						type: "button",
+						onClick: () => le("/support/tickets"),
+						className: `shrink-0 px-4 py-2 text-sm font-medium rounded-md border transition-colors ${V.criticalQuotas > 0 || V.exhaustedQuotas > 0 ? "bg-destructive text-destructive-foreground border-destructive hover:bg-destructive/90" : "border-status-warning-border text-status-warning-text hover:bg-status-warning-bg-subtle"}`,
+						children: "Request more quota"
+					})]
+				}),
+				(Z || N !== "active") && /* @__PURE__ */ j("div", {
+					className: "flex items-center gap-2 text-sm text-muted-foreground flex-wrap",
+					children: [
+						/* @__PURE__ */ j("span", { children: [
+							"Showing",
 							" ",
-							I === "past" ? "past" : I === "all" ? "any" : "active",
+							X.active.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + X.past.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + (N === "past" ? 0 : q.length),
 							" ",
-							"subscriptions.",
-							I === "active" && !M.includes("all") && /* @__PURE__ */ k("span", {
-								className: "block mt-1",
-								children: "Try switching to “Past” or “All” to search across more subscriptions."
-							})
-						] })
-					}),
-					/* @__PURE__ */ A("div", {
-						className: "flex gap-2 mt-4",
-						children: [/* @__PURE__ */ k("button", {
+							"quotas"
+						] }),
+						/* @__PURE__ */ j("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"
+							]
+						}),
+						S !== "all" && /* @__PURE__ */ A("span", {
+							className: "px-2 py-0.5 bg-muted rounded text-xs capitalize",
+							children: S === "critical" ? "Critical / Exhausted" : S
+						}),
+						y && /* @__PURE__ */ j("span", {
+							className: "px-2 py-0.5 bg-muted rounded text-xs",
+							children: [
+								"“",
+								y,
+								"”"
+							]
+						})
+					]
+				}),
+				X.active.length > 0 && /* @__PURE__ */ j("section", { children: [/* @__PURE__ */ j("h2", {
+					className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
+					children: [/* @__PURE__ */ A(w, { className: "size-5 text-primary" }), N === "all" ? "Active Subscription Quotas" : "Subscription Quotas"]
+				}), /* @__PURE__ */ A("div", {
+					className: "space-y-4",
+					children: X.active.map((e) => /* @__PURE__ */ A(ie, {
+						subscription: e,
+						onQuotaClick: d,
+						defaultExpanded: !0
+					}, e.id))
+				})] }),
+				X.past.length > 0 && /* @__PURE__ */ j("section", { children: [/* @__PURE__ */ j("h2", {
+					className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ A(x, { className: "size-5 text-muted-foreground" }),
+						"Past Subscription Quotas",
+						/* @__PURE__ */ A("span", {
+							className: "text-xs font-normal text-muted-foreground",
+							children: "(Canceled / Expired / Upgraded)"
+						}),
+						_e > 0 && /* @__PURE__ */ j("span", {
+							className: "text-xs font-normal px-2 py-0.5 bg-muted rounded-full",
+							children: [
+								X.past.length,
+								he ? "+" : "",
+								" of ",
+								_e
+							]
+						})
+					]
+				}), /* @__PURE__ */ j("div", {
+					className: "space-y-4",
+					children: [X.past.map((e) => /* @__PURE__ */ A(ie, {
+						subscription: e,
+						onQuotaClick: d,
+						defaultExpanded: N === "past"
+					}, e.id)), he && /* @__PURE__ */ A("div", {
+						className: "flex justify-center pt-2",
+						children: /* @__PURE__ */ A("button", {
 							type: "button",
-							onClick: he,
-							className: "px-4 py-2 text-sm font-medium border border-border rounded-md hover:bg-muted/50 transition-colors",
-							children: M === "all" ? "Clear filters" : "Show all quotas"
-						}), I === "active" && x && /* @__PURE__ */ k("button", {
+							onClick: me,
+							disabled: ge,
+							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: ge ? /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(T, { className: "size-4 animate-spin" }), "Loading…"] }) : /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(v, { className: "size-4" }), "Load more past subscriptions"] })
+						})
+					})]
+				})] }),
+				N !== "past" && q.length > 0 && /* @__PURE__ */ j("section", { children: [/* @__PURE__ */ j("h2", {
+					className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ A(C, { className: `size-5 ${t.info.icon}` }),
+						"Pooled Quotas",
+						/* @__PURE__ */ A("span", {
+							className: "text-xs font-normal text-muted-foreground",
+							children: "(Shared across all products)"
+						})
+					]
+				}), /* @__PURE__ */ A(re, {
+					quotas: q,
+					showPlanColumn: !1,
+					onQuotaClick: d
+				})] }),
+				N === "active" && U.length === 0 && H.length === 0 && !Z && /* @__PURE__ */ j("div", {
+					className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+					children: [
+						/* @__PURE__ */ A("div", {
+							className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
+							children: /* @__PURE__ */ A(C, { className: "size-6 text-muted-foreground" })
+						}),
+						/* @__PURE__ */ A("h3", {
+							className: "text-lg font-medium text-foreground",
+							children: "No active quotas found"
+						}),
+						/* @__PURE__ */ A("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."
+						})
+					]
+				}),
+				N === "past" && W.length === 0 && !Z && !G && /* @__PURE__ */ j("div", {
+					className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+					children: [
+						/* @__PURE__ */ A("div", {
+							className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
+							children: /* @__PURE__ */ A(x, { className: "size-6 text-muted-foreground" })
+						}),
+						/* @__PURE__ */ A("h3", {
+							className: "text-lg font-medium text-foreground",
+							children: "No past subscriptions"
+						}),
+						/* @__PURE__ */ A("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__ */ A("button", {
 							type: "button",
-							onClick: () => L("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"
-						})]
-					})
-				]
-			}),
-			v && /* @__PURE__ */ k(re, {
-				quota: v,
-				onClose: () => y(null)
+							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" && G && /* @__PURE__ */ A("div", {
+					className: "space-y-4",
+					children: [
+						1,
+						2,
+						3
+					].map((e) => /* @__PURE__ */ A("div", { className: "h-24 bg-muted animate-pulse rounded-lg" }, e))
+				}),
+				Z && X.active.length === 0 && X.past.length === 0 && (N === "past" || q.length === 0) && /* @__PURE__ */ j("div", {
+					className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+					children: [
+						/* @__PURE__ */ A("div", {
+							className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
+							children: S !== "all" && !y ? /* @__PURE__ */ A(ne, {
+								status: S === "healthy" ? "HEALTHY" : S === "warning" ? "WARNING" : "CRITICAL",
+								className: "size-6"
+							}) : /* @__PURE__ */ A(E, { className: "size-6 text-muted-foreground" })
+						}),
+						/* @__PURE__ */ A("h3", {
+							className: "text-lg font-medium text-foreground",
+							children: S !== "all" && !y ? `No ${S === "critical" ? "critical or exhausted" : S} quotas` : "No matching quotas"
+						}),
+						/* @__PURE__ */ A("p", {
+							className: "text-sm text-muted-foreground mt-1 text-center max-w-sm",
+							children: S !== "all" && !y ? /* @__PURE__ */ j(k, { children: ["All your quotas are in a different status.", V && /* @__PURE__ */ j("span", {
+								className: "block mt-1",
+								children: [
+									"You have ",
+									V.healthyQuotas,
+									" healthy, ",
+									V.warningQuotas,
+									" ",
+									"warning, and ",
+									V.criticalQuotas + V.exhaustedQuotas,
+									" ",
+									"critical quotas."
+								]
+							})] }) : /* @__PURE__ */ j(k, { children: [
+								"No quotas match your current search or filter criteria in",
+								" ",
+								N === "past" ? "past" : N === "all" ? "any" : "active",
+								" ",
+								"subscriptions.",
+								N === "active" && !S.includes("all") && /* @__PURE__ */ A("span", {
+									className: "block mt-1",
+									children: "Try switching to “Past” or “All” to search across more subscriptions."
+								})
+							] })
+						}),
+						/* @__PURE__ */ j("div", {
+							className: "flex gap-2 mt-4",
+							children: [/* @__PURE__ */ A("button", {
+								type: "button",
+								onClick: ve,
+								className: "px-4 py-2 text-sm font-medium border border-border rounded-md hover:bg-muted/50 transition-colors",
+								children: S === "all" ? "Clear filters" : "Show all quotas"
+							}), N === "active" && y && /* @__PURE__ */ A("button", {
+								type: "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"
+							})]
+						})
+					]
+				})
+			] }),
+			u && /* @__PURE__ */ A(ae, {
+				quota: u,
+				onClose: () => d(null)
 			})
 		]
 	});
 };
 //#endregion
-export { I as UsagePage };
+export { L as UsagePage };
 
 //# sourceMappingURL=UsagePage.js.map