@burdenoff/microfe-billing 2026.625.4 → 2026.625.5

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

@@ -8,14 +8,15 @@ import { useCallback as f, useDeferredValue as p, useMemo as m, useState as h }
 import { AlertCircle as g, AlertTriangle as _, CheckCircle as v, ChevronDown as y, ChevronLeft as b, ChevronRight as x, Clock as S, Info as C, Layers as w, Package as T, RefreshCw as E, Search as ee, 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";
+import { IllustratedEmptyState as M, PagePurpose as ne } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/usage/pages/UsagePage.tsx
-function M(e, t) {
+function N(e, t) {
 	if (t?.displayName && typeof t.displayName == "string") return t.displayName;
 	if (t?.label && typeof t.label == "string") return t.label;
 	let n = e.split(".");
 	return (n.length > 1 ? n.slice(1) : n).map((e) => e.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase())).join(" ");
 }
-var ne = ({ status: e, className: n = "size-4" }) => {
+var P = ({ status: e, className: n = "size-4" }) => {
 	switch (e) {
 		case "EXHAUSTED": return /* @__PURE__ */ A(O, { className: `${n} ${t.error.icon}` });
 		case "CRITICAL": return /* @__PURE__ */ A(_, { className: `${n} ${t.error.icon}` });
@@ -23,7 +24,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 		case "HEALTHY": return /* @__PURE__ */ A(v, { className: `${n} ${t.success.icon}` });
 		default: return /* @__PURE__ */ A(C, { className: `${n} ${t.neutral.icon}` });
 	}
-}, N = ({ status: e }) => /* @__PURE__ */ A("span", {
+}, F = ({ status: e }) => /* @__PURE__ */ A("span", {
 	className: `px-2 py-0.5 text-xs font-medium rounded-full ${{
 		EXHAUSTED: `${t.error.bg} ${t.error.text}`,
 		CRITICAL: `${t.error.bg} ${t.error.text}`,
@@ -32,7 +33,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 		INACTIVE: `${t.neutral.bg} ${t.neutral.text}`
 	}[e]}`,
 	children: e
-}), P = ({ percentage: e, status: n }) => {
+}), I = ({ percentage: e, status: n }) => {
 	let r = Math.min(100, Math.max(0, e));
 	return /* @__PURE__ */ A("div", {
 		className: "w-full bg-bg-sunken rounded-full h-2.5 overflow-hidden",
@@ -47,7 +48,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 			style: { width: `${r}%` }
 		})
 	});
-}, F = ({ label: e, value: n, icon: r, color: i, isActive: a, onClick: o }) => {
+}, L = ({ label: e, value: n, icon: r, color: i, isActive: a, onClick: o }) => {
 	let s = {
 		blue: t.info,
 		emerald: t.success,
@@ -83,7 +84,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 			children: n
 		})]
 	});
-}, I = ({ quota: e, planLabel: t, onClick: n }) => {
+}, R = ({ quota: e, planLabel: t, onClick: n }) => {
 	let r = e.totalLimit != null && e.totalLimit > 0 && !e.noLimit;
 	return /* @__PURE__ */ j("tr", {
 		onClick: n,
@@ -126,7 +127,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 							r ? i(e.totalLimit) : "∞",
 							e.unit ? ` ${e.unit}` : ""
 						]
-					}), /* @__PURE__ */ A(P, {
+					}), /* @__PURE__ */ A(I, {
 						percentage: r ? e.usagePercentage : 0,
 						status: e.status
 					})]
@@ -138,7 +139,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 			}),
 			/* @__PURE__ */ A("td", {
 				className: "px-4 py-3",
-				children: /* @__PURE__ */ A(N, { status: e.status })
+				children: /* @__PURE__ */ A(F, { status: e.status })
 			})
 		]
 	});
@@ -170,7 +171,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 					children: "Status"
 				})
 			]
-		}) }), /* @__PURE__ */ A("tbody", { children: e.map((e) => /* @__PURE__ */ A(I, {
+		}) }), /* @__PURE__ */ A("tbody", { children: e.map((e) => /* @__PURE__ */ A(R, {
 			quota: e,
 			planLabel: n ? t : void 0,
 			onClick: () => r(e)
@@ -259,7 +260,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 					className: "sticky top-0 bg-bg-elevated border-b border-border-subtle p-4 flex items-center justify-between",
 					children: [/* @__PURE__ */ j("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ A(ne, {
+						children: [/* @__PURE__ */ A(P, {
 							status: n.status,
 							className: "size-5"
 						}), /* @__PURE__ */ j("div", { children: [
@@ -303,9 +304,9 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 								children: [/* @__PURE__ */ A("span", {
 									className: "text-sm text-text-secondary",
 									children: "Usage"
-								}), /* @__PURE__ */ A(N, { status: n.status })]
+								}), /* @__PURE__ */ A(F, { status: n.status })]
 							}),
-							/* @__PURE__ */ A(P, {
+							/* @__PURE__ */ A(I, {
 								percentage: n.usagePercentage,
 								status: n.status
 							}),
@@ -491,7 +492,7 @@ var ne = ({ status: e, className: n = "size-4" }) => {
 		})]
 	});
 };
-function L(e, t) {
+function z(e, t) {
 	return t ? n.HEALTHY : e >= 100 ? n.EXHAUSTED : e >= 90 ? n.CRITICAL : e >= 75 ? n.WARNING : n.HEALTHY;
 }
 var oe = ({ workspaceId: e }) => {
@@ -511,7 +512,7 @@ var oe = ({ workspaceId: e }) => {
 				totalUsed: i,
 				totalRemaining: a,
 				usagePercentage: o,
-				status: L(o, n),
+				status: z(o, n),
 				hasLive: t.some((e) => e.liveStatus !== null),
 				hasMultiple: t.length > 1
 			};
@@ -546,22 +547,10 @@ var oe = ({ workspaceId: e }) => {
 			})
 		]
 	});
-	if (r.length === 0) return /* @__PURE__ */ j("div", {
-		className: "text-center py-12 space-y-2",
-		children: [
-			/* @__PURE__ */ A("div", {
-				className: "size-12 mx-auto rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-2",
-				children: /* @__PURE__ */ A(w, { className: "size-6 text-text-link" })
-			}),
-			/* @__PURE__ */ A("h3", {
-				className: "text-base font-semibold text-text-primary",
-				children: "No workspace quotas assigned"
-			}),
-			/* @__PURE__ */ A("p", {
-				className: "text-sm text-text-secondary max-w-sm mx-auto",
-				children: "Quotas are assigned to this workspace after a successful purchase. If you have an active subscription, contact support."
-			})
-		]
+	if (r.length === 0) return /* @__PURE__ */ A(M, {
+		illustration: "empty-data",
+		title: "No workspace quotas assigned",
+		description: "Quotas are assigned to this workspace after a successful purchase. If you have an active subscription, contact support."
 	});
 	let y = u.filter((e) => e.status === n.HEALTHY).length, b = u.filter((e) => e.status === n.WARNING).length, S = u.filter((e) => e.status === n.CRITICAL || e.status === n.EXHAUSTED).length;
 	return /* @__PURE__ */ j("div", {
@@ -663,7 +652,7 @@ var oe = ({ workspaceId: e }) => {
 											children: [e.hasMultiple && /* @__PURE__ */ A(x, { className: `size-4 text-text-muted shrink-0 transition-transform duration-150 ${t ? "rotate-90" : ""}` }), /* @__PURE__ */ j("div", { children: [
 												/* @__PURE__ */ A("div", {
 													className: "font-medium text-text-primary",
-													children: M(e.quotaName)
+													children: N(e.quotaName)
 												}),
 												/* @__PURE__ */ A("div", {
 													className: "text-xs font-mono text-text-muted mt-0.5",
@@ -706,7 +695,7 @@ var oe = ({ workspaceId: e }) => {
 														i(e.totalLimit)
 													]
 												})]
-											}), !e.noLimit && /* @__PURE__ */ A(P, {
+											}), !e.noLimit && /* @__PURE__ */ A(I, {
 												percentage: e.usagePercentage,
 												status: e.status
 											})]
@@ -721,11 +710,11 @@ var oe = ({ workspaceId: e }) => {
 									}),
 									/* @__PURE__ */ A("td", {
 										className: "px-4 py-3",
-										children: /* @__PURE__ */ A(N, { status: e.status })
+										children: /* @__PURE__ */ A(F, { status: e.status })
 									})
 								]
 							}, e.quotaName), t && e.items.map((e) => {
-								let t = L(e.usagePercentage, e.assignment.noLimit);
+								let t = z(e.usagePercentage, e.assignment.noLimit);
 								return /* @__PURE__ */ j("tr", {
 									className: "bg-bg-sunken/50 border-t border-dashed border-border-subtle",
 									children: [
@@ -760,7 +749,7 @@ var oe = ({ workspaceId: e }) => {
 										}),
 										/* @__PURE__ */ A("td", {
 											className: "px-4 py-2.5",
-											children: /* @__PURE__ */ A(N, { status: t })
+											children: /* @__PURE__ */ A(F, { status: t })
 										})
 									]
 								}, e.assignment.id);
@@ -775,48 +764,48 @@ var oe = ({ workspaceId: e }) => {
 			})
 		]
 	});
-}, R = () => {
+}, se = () => {
 	let { t: n } = te(), r = (e, t) => {
 		let r = n(e);
 		return r === e ? t : r;
 	}, i = o(), [a, l] = h(() => {
 		if (!(typeof window > "u")) return new URLSearchParams(window.location.search).get("billingAccountId") || void 0;
-	}), [u, d] = h(null), [b, x] = h(""), [C, M] = h("all"), [N, P] = h("active"), I = p(b), { billingAccounts: L, isLoading: R } = s(), se = (L.find((e) => e.isDefault) ?? L[0])?.id, z = a ?? se, { workspaceId: B, navigate: ce } = e(), [V, le] = h("workspace"), { dashboard: H, pooledQuotas: U, activeSubscriptions: W, pastSubscriptions: G, isLoading: ue, isPastSubscriptionsLoading: K, error: de, refetch: fe, loadMorePastSubscriptions: pe, hasMorePastSubscriptions: me, isLoadingMorePast: he, pastSubscriptionsCount: ge } = c({
-		billingAccountId: z,
-		workspaceId: B,
+	}), [u, d] = h(null), [b, x] = h(""), [C, N] = h("all"), [P, F] = h("active"), I = p(b), { billingAccounts: R, isLoading: z } = s(), se = (R.find((e) => e.isDefault) ?? R[0])?.id, B = a ?? se, { workspaceId: V, navigate: ce } = e(), [H, le] = h("workspace"), { dashboard: U, pooledQuotas: W, activeSubscriptions: G, pastSubscriptions: K, isLoading: ue, isPastSubscriptionsLoading: q, error: de, refetch: fe, loadMorePastSubscriptions: pe, hasMorePastSubscriptions: me, isLoadingMorePast: he, pastSubscriptionsCount: ge } = c({
+		billingAccountId: B,
+		workspaceId: V,
 		searchQuery: I || void 0,
-		viewMode: N
-	}), q = f((e) => C === "all" ? !0 : C === "healthy" ? e.status === "HEALTHY" : C === "warning" ? e.status === "WARNING" : C === "critical" ? e.status === "CRITICAL" || e.status === "EXHAUSTED" : !0, [C]), J = m(() => U.filter(q), [U, q]), Y = m(() => C === "all" ? W : W.map((e) => ({
+		viewMode: P
+	}), J = f((e) => C === "all" ? !0 : C === "healthy" ? e.status === "HEALTHY" : C === "warning" ? e.status === "WARNING" : C === "critical" ? e.status === "CRITICAL" || e.status === "EXHAUSTED" : !0, [C]), Y = m(() => W.filter(J), [W, J]), X = m(() => C === "all" ? G : G.map((e) => ({
 		...e,
-		aggregatedQuotas: e.aggregatedQuotas.filter(q)
+		aggregatedQuotas: e.aggregatedQuotas.filter(J)
 	})).filter((e) => e.aggregatedQuotas.length > 0), [
-		W,
+		G,
 		C,
-		q
-	]), X = m(() => C === "all" ? G : G.map((e) => ({
+		J
+	]), Z = m(() => C === "all" ? K : K.map((e) => ({
 		...e,
-		aggregatedQuotas: e.aggregatedQuotas.filter(q)
+		aggregatedQuotas: e.aggregatedQuotas.filter(J)
 	})).filter((e) => e.aggregatedQuotas.length > 0), [
-		G,
+		K,
 		C,
-		q
-	]), Z = m(() => N === "active" ? {
-		active: Y,
+		J
+	]), Q = m(() => P === "active" ? {
+		active: X,
 		past: []
-	} : N === "past" ? {
+	} : P === "past" ? {
 		active: [],
-		past: X
+		past: Z
 	} : {
-		active: Y,
-		past: X
+		active: X,
+		past: Z
 	}, [
-		N,
-		Y,
-		X
-	]), Q = b !== "" || C !== "all", _e = I !== b, ve = () => {
-		x(""), M("all");
-	}, $ = (e) => {
-		M((t) => t === e ? "all" : e);
+		P,
+		X,
+		Z
+	]), $ = b !== "" || C !== "all", _e = I !== b, ve = () => {
+		x(""), N("all");
+	}, ye = (e) => {
+		N((t) => t === e ? "all" : e);
 	};
 	if (!i.canViewUsage) return /* @__PURE__ */ A("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
@@ -838,7 +827,7 @@ var oe = ({ workspaceId: e }) => {
 			]
 		})
 	});
-	if ((R || ue) && !H) return /* @__PURE__ */ j("div", {
+	if ((z || ue) && !U) return /* @__PURE__ */ j("div", {
 		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [
 			/* @__PURE__ */ A("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }),
@@ -880,19 +869,26 @@ var oe = ({ workspaceId: e }) => {
 			]
 		})
 	});
-	let ye = L.find((e) => e.id === z);
+	let be = R.find((e) => e.id === B);
 	return /* @__PURE__ */ j("div", {
 		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [
 			/* @__PURE__ */ j("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("h1", {
-					className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
-					children: r("billing.usage.title", "Usage")
-				}), /* @__PURE__ */ A("p", {
-					className: "text-sm text-text-secondary mt-1",
-					children: "Monitor your resource consumption and quota usage"
-				})] }), /* @__PURE__ */ j("div", {
+				children: [/* @__PURE__ */ j("div", { children: [
+					/* @__PURE__ */ A("h1", {
+						className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
+						children: r("billing.usage.title", "Usage")
+					}),
+					/* @__PURE__ */ A("p", {
+						className: "text-sm text-text-secondary mt-1",
+						children: "Monitor your resource consumption and quota usage"
+					}),
+					/* @__PURE__ */ A(ne, {
+						className: "mt-3",
+						children: r("billing.usage.purpose", "See how much of each quota you have consumed so you can avoid running out and know when to upgrade. Switch between workspace-level usage and your global per-account quotas, drill into any quota for its history, and request more capacity when something is running low.")
+					})
+				] }), /* @__PURE__ */ j("div", {
 					className: "flex items-center gap-3",
 					children: [
 						/* @__PURE__ */ j("div", {
@@ -900,27 +896,27 @@ var oe = ({ workspaceId: e }) => {
 							children: [/* @__PURE__ */ j("button", {
 								type: "button",
 								onClick: () => le("workspace"),
-								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${V === "workspace" ? "bg-bg-surface text-text-primary shadow-elevation-1 font-medium" : "text-text-secondary hover:text-text-primary"}`,
+								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${H === "workspace" ? "bg-bg-surface text-text-primary shadow-elevation-1 font-medium" : "text-text-secondary hover:text-text-primary"}`,
 								children: [/* @__PURE__ */ A(w, { className: "size-3.5" }), "Workspace"]
 							}), /* @__PURE__ */ j("button", {
 								type: "button",
 								onClick: () => le("global"),
-								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${V === "global" ? "bg-bg-surface text-text-primary shadow-elevation-1 font-medium" : "text-text-secondary hover:text-text-primary"}`,
+								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${H === "global" ? "bg-bg-surface text-text-primary shadow-elevation-1 font-medium" : "text-text-secondary hover:text-text-primary"}`,
 								children: [/* @__PURE__ */ A(T, { className: "size-3.5" }), "Global"]
 							})]
 						}),
-						V === "global" && L.length > 1 && /* @__PURE__ */ A("select", {
-							value: z || "",
+						H === "global" && R.length > 1 && /* @__PURE__ */ A("select", {
+							value: B || "",
 							onChange: (e) => l(e.target.value),
 							className: "px-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] w-full sm:min-w-[200px]",
-							children: L.map((e) => /* @__PURE__ */ A("option", {
+							children: R.map((e) => /* @__PURE__ */ A("option", {
 								value: e.id,
 								children: e.name
 							}, e.id))
 						}),
 						/* @__PURE__ */ A("button", {
 							type: "button",
-							onClick: () => V === "workspace" ? void 0 : fe(),
+							onClick: () => H === "workspace" ? void 0 : fe(),
 							className: "p-2 border border-border-subtle rounded-button text-text-secondary hover:text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-all duration-200",
 							"aria-label": "Refresh",
 							title: "Refresh",
@@ -929,12 +925,12 @@ var oe = ({ workspaceId: e }) => {
 					]
 				})]
 			}),
-			V === "workspace" && B && /* @__PURE__ */ A(oe, { workspaceId: B }),
-			V === "workspace" && !B && /* @__PURE__ */ A("div", {
+			H === "workspace" && V && /* @__PURE__ */ A(oe, { workspaceId: V }),
+			H === "workspace" && !V && /* @__PURE__ */ A("div", {
 				className: "text-center py-12 text-text-secondary text-sm",
 				children: "No workspace context available."
 			}),
-			V === "global" && /* @__PURE__ */ j(k, { children: [
+			H === "global" && /* @__PURE__ */ j(k, { children: [
 				/* @__PURE__ */ j("div", {
 					className: "flex flex-col gap-3 sm:flex-row sm:items-center",
 					children: [
@@ -946,7 +942,7 @@ var oe = ({ workspaceId: e }) => {
 									type: "text",
 									value: b,
 									onChange: (e) => x(e.target.value),
-									placeholder: `Search ${N === "past" ? "past" : N === "all" ? "all" : "active"} quotas...`,
+									placeholder: `Search ${P === "past" ? "past" : P === "all" ? "all" : "active"} quotas...`,
 									className: "w-full pl-9 pr-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								}),
 								(b || _e) && /* @__PURE__ */ A("button", {
@@ -962,18 +958,18 @@ var oe = ({ workspaceId: e }) => {
 							className: "flex items-center bg-bg-sunken rounded-lg p-1 border border-border-subtle",
 							children: [/* @__PURE__ */ j("button", {
 								type: "button",
-								onClick: () => P("active"),
-								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${N === "active" ? "bg-bg-surface text-text-primary shadow-elevation-1 font-medium" : "text-text-secondary hover:text-text-primary"}`,
+								onClick: () => F("active"),
+								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${P === "active" ? "bg-bg-surface text-text-primary shadow-elevation-1 font-medium" : "text-text-secondary hover:text-text-primary"}`,
 								children: [/* @__PURE__ */ A(T, { className: "size-3.5" }), "Active"]
 							}), /* @__PURE__ */ j("button", {
 								type: "button",
-								onClick: () => P("past"),
-								disabled: K && N !== "past",
-								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${N === "past" ? "bg-bg-surface text-text-primary shadow-elevation-1 font-medium" : "text-text-secondary hover:text-text-primary"} ${K && N !== "past" ? "opacity-70" : ""}`,
-								children: [K && N === "past" ? /* @__PURE__ */ A(E, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ A(S, { className: "size-3.5" }), "Past"]
+								onClick: () => F("past"),
+								disabled: q && P !== "past",
+								className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${P === "past" ? "bg-bg-surface text-text-primary shadow-elevation-1 font-medium" : "text-text-secondary hover:text-text-primary"} ${q && P !== "past" ? "opacity-70" : ""}`,
+								children: [q && P === "past" ? /* @__PURE__ */ A(E, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ A(S, { className: "size-3.5" }), "Past"]
 							})]
 						}),
-						Q && /* @__PURE__ */ j("button", {
+						$ && /* @__PURE__ */ j("button", {
 							type: "button",
 							onClick: ve,
 							className: "flex items-center gap-1.5 px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary border border-border-subtle rounded-button hover:bg-bg-sunken transition-colors",
@@ -981,61 +977,61 @@ var oe = ({ workspaceId: e }) => {
 						})
 					]
 				}),
-				ye && /* @__PURE__ */ j("div", {
+				be && /* @__PURE__ */ j("div", {
 					className: "text-sm text-text-secondary",
 					children: [
 						"Viewing usage for",
 						" ",
 						/* @__PURE__ */ A("span", {
 							className: "font-medium text-text-primary",
-							children: ye.name
+							children: be.name
 						})
 					]
 				}),
-				H && /* @__PURE__ */ j("div", {
+				U && /* @__PURE__ */ j("div", {
 					className: "grid grid-cols-2 sm:grid-cols-4 gap-4",
 					children: [
-						/* @__PURE__ */ A(F, {
+						/* @__PURE__ */ A(L, {
 							label: "Total Quotas",
-							value: H.totalQuotas,
+							value: U.totalQuotas,
 							icon: /* @__PURE__ */ A(w, { className: "size-5" }),
 							color: "blue",
 							isActive: C === "all",
-							onClick: () => M("all")
+							onClick: () => N("all")
 						}),
-						/* @__PURE__ */ A(F, {
+						/* @__PURE__ */ A(L, {
 							label: "Healthy",
-							value: H.healthyQuotas,
+							value: U.healthyQuotas,
 							icon: /* @__PURE__ */ A(v, { className: "size-5" }),
 							color: "emerald",
 							isActive: C === "healthy",
-							onClick: () => $("healthy")
+							onClick: () => ye("healthy")
 						}),
-						/* @__PURE__ */ A(F, {
+						/* @__PURE__ */ A(L, {
 							label: "Warning",
-							value: H.warningQuotas,
+							value: U.warningQuotas,
 							icon: /* @__PURE__ */ A(g, { className: "size-5" }),
 							color: "amber",
 							isActive: C === "warning",
-							onClick: () => $("warning")
+							onClick: () => ye("warning")
 						}),
-						/* @__PURE__ */ A(F, {
+						/* @__PURE__ */ A(L, {
 							label: "Critical / Exhausted",
-							value: H.criticalQuotas + H.exhaustedQuotas,
+							value: U.criticalQuotas + U.exhaustedQuotas,
 							icon: /* @__PURE__ */ A(_, { className: "size-5" }),
 							color: "red",
 							isActive: C === "critical",
-							onClick: () => $("critical")
+							onClick: () => ye("critical")
 						})
 					]
 				}),
-				H && (H.warningQuotas > 0 || H.criticalQuotas > 0 || H.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 ${H.criticalQuotas > 0 || H.exhaustedQuotas > 0 ? `${t.error.bg} ${t.error.border}` : `${t.warning.bg} ${t.warning.border}`}`,
+				U && (U.warningQuotas > 0 || U.criticalQuotas > 0 || U.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 ${U.criticalQuotas > 0 || U.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: [H.criticalQuotas > 0 || H.exhaustedQuotas > 0 ? /* @__PURE__ */ A(O, { className: `size-5 shrink-0 ${t.error.icon}` }) : /* @__PURE__ */ A(g, { className: `size-5 shrink-0 ${t.warning.icon}` }), /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
-							className: `text-sm font-medium ${H.criticalQuotas > 0 || H.exhaustedQuotas > 0 ? t.error.text : t.warning.text}`,
-							children: H.criticalQuotas > 0 || H.exhaustedQuotas > 0 ? `${H.criticalQuotas + H.exhaustedQuotas} quota${H.criticalQuotas + H.exhaustedQuotas === 1 ? "" : "s"} exhausted or critical` : `${H.warningQuotas} quota${H.warningQuotas === 1 ? "" : "s"} approaching the limit`
+						children: [U.criticalQuotas > 0 || U.exhaustedQuotas > 0 ? /* @__PURE__ */ A(O, { className: `size-5 shrink-0 ${t.error.icon}` }) : /* @__PURE__ */ A(g, { className: `size-5 shrink-0 ${t.warning.icon}` }), /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+							className: `text-sm font-medium ${U.criticalQuotas > 0 || U.exhaustedQuotas > 0 ? t.error.text : t.warning.text}`,
+							children: U.criticalQuotas > 0 || U.exhaustedQuotas > 0 ? `${U.criticalQuotas + U.exhaustedQuotas} quota${U.criticalQuotas + U.exhaustedQuotas === 1 ? "" : "s"} exhausted or critical` : `${U.warningQuotas} quota${U.warningQuotas === 1 ? "" : "s"} approaching the limit`
 						}), /* @__PURE__ */ A("p", {
 							className: "text-xs text-text-secondary mt-0.5",
 							children: "Contact support to request a quota increase for your plan."
@@ -1043,24 +1039,24 @@ var oe = ({ workspaceId: e }) => {
 					}), /* @__PURE__ */ A("button", {
 						type: "button",
 						onClick: () => ce("/support/tickets"),
-						className: `shrink-0 px-4 py-2 text-sm font-medium rounded-button border transition-colors duration-200 ${H.criticalQuotas > 0 || H.exhaustedQuotas > 0 ? "bg-action-danger-bg text-action-danger-text border-action-danger-bg hover:bg-action-danger-bgHover" : "border-status-warning-border text-status-warning-text hover:bg-status-warning-bg-subtle"}`,
+						className: `shrink-0 px-4 py-2 text-sm font-medium rounded-button border transition-colors duration-200 ${U.criticalQuotas > 0 || U.exhaustedQuotas > 0 ? "bg-action-danger-bg text-action-danger-text border-action-danger-bg hover:bg-action-danger-bgHover" : "border-status-warning-border text-status-warning-text hover:bg-status-warning-bg-subtle"}`,
 						children: "Request more quota"
 					})]
 				}),
-				(Q || N !== "active") && /* @__PURE__ */ j("div", {
+				($ || P !== "active") && /* @__PURE__ */ j("div", {
 					className: "flex items-center gap-2 text-sm text-text-secondary flex-wrap",
 					children: [
 						/* @__PURE__ */ j("span", { children: [
 							"Showing",
 							" ",
-							Z.active.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + Z.past.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + (N === "past" ? 0 : J.length),
+							Q.active.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + Q.past.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + (P === "past" ? 0 : Y.length),
 							" ",
 							"quotas"
 						] }),
 						/* @__PURE__ */ j("span", {
 							className: "px-2 py-0.5 bg-[var(--color-accent-soft)] text-text-link rounded text-xs capitalize",
 							children: [
-								N === "active" ? "Active" : N === "past" ? "Past" : "All",
+								P === "active" ? "Active" : P === "past" ? "Past" : "All",
 								" ",
 								"subscriptions"
 							]
@@ -1079,18 +1075,18 @@ var oe = ({ workspaceId: e }) => {
 						})
 					]
 				}),
-				Z.active.length > 0 && /* @__PURE__ */ j("section", { children: [/* @__PURE__ */ j("h2", {
+				Q.active.length > 0 && /* @__PURE__ */ j("section", { children: [/* @__PURE__ */ j("h2", {
 					className: "text-lg font-semibold text-text-primary mb-4 flex items-center gap-2",
-					children: [/* @__PURE__ */ A(T, { className: "size-5 text-text-link" }), N === "all" ? "Active Subscription Quotas" : "Subscription Quotas"]
+					children: [/* @__PURE__ */ A(T, { className: "size-5 text-text-link" }), P === "all" ? "Active Subscription Quotas" : "Subscription Quotas"]
 				}), /* @__PURE__ */ A("div", {
 					className: "space-y-4",
-					children: Z.active.map((e) => /* @__PURE__ */ A(ie, {
+					children: Q.active.map((e) => /* @__PURE__ */ A(ie, {
 						subscription: e,
 						onQuotaClick: d,
 						defaultExpanded: !0
 					}, e.id))
 				})] }),
-				Z.past.length > 0 && /* @__PURE__ */ j("section", { children: [/* @__PURE__ */ j("h2", {
+				Q.past.length > 0 && /* @__PURE__ */ j("section", { children: [/* @__PURE__ */ j("h2", {
 					className: "text-lg font-semibold text-text-primary mb-4 flex items-center gap-2",
 					children: [
 						/* @__PURE__ */ A(S, { className: "size-5 text-text-muted" }),
@@ -1102,7 +1098,7 @@ var oe = ({ workspaceId: e }) => {
 						ge > 0 && /* @__PURE__ */ j("span", {
 							className: "text-xs font-normal px-2 py-0.5 bg-bg-sunken text-text-secondary rounded-full tabular-nums",
 							children: [
-								Z.past.length,
+								Q.past.length,
 								me ? "+" : "",
 								" of ",
 								ge
@@ -1111,10 +1107,10 @@ var oe = ({ workspaceId: e }) => {
 					]
 				}), /* @__PURE__ */ j("div", {
 					className: "space-y-4",
-					children: [Z.past.map((e) => /* @__PURE__ */ A(ie, {
+					children: [Q.past.map((e) => /* @__PURE__ */ A(ie, {
 						subscription: e,
 						onQuotaClick: d,
-						defaultExpanded: N === "past"
+						defaultExpanded: P === "past"
 					}, e.id)), me && /* @__PURE__ */ A("div", {
 						className: "flex justify-center pt-2",
 						children: /* @__PURE__ */ A("button", {
@@ -1126,7 +1122,7 @@ var oe = ({ workspaceId: e }) => {
 						})
 					})]
 				})] }),
-				N !== "past" && J.length > 0 && /* @__PURE__ */ j("section", { children: [/* @__PURE__ */ j("h2", {
+				P !== "past" && Y.length > 0 && /* @__PURE__ */ j("section", { children: [/* @__PURE__ */ j("h2", {
 					className: "text-lg font-semibold text-text-primary mb-4 flex items-center gap-2",
 					children: [
 						/* @__PURE__ */ A(w, { className: `size-5 ${t.info.icon}` }),
@@ -1137,51 +1133,27 @@ var oe = ({ workspaceId: e }) => {
 						})
 					]
 				}), /* @__PURE__ */ A(re, {
-					quotas: J,
+					quotas: Y,
 					showPlanColumn: !1,
 					onQuotaClick: d
 				})] }),
-				N === "active" && W.length === 0 && U.length === 0 && !Q && /* @__PURE__ */ j("div", {
-					className: "flex flex-col items-center justify-center py-12 border border-dashed border-border-seam rounded-card",
-					children: [
-						/* @__PURE__ */ A("div", {
-							className: "size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4",
-							children: /* @__PURE__ */ A(w, { className: "size-6 text-text-link" })
-						}),
-						/* @__PURE__ */ A("h3", {
-							className: "text-base font-semibold text-text-primary",
-							children: "No active quotas found"
-						}),
-						/* @__PURE__ */ A("p", {
-							className: "text-sm text-text-secondary mt-1 text-center max-w-sm",
-							children: "Quotas will appear here once you have active subscriptions or pooled allocations."
-						})
-					]
+				P === "active" && G.length === 0 && W.length === 0 && !$ && /* @__PURE__ */ A(M, {
+					illustration: "empty-data",
+					title: "No active quotas found",
+					description: "Quotas will appear here once you have active subscriptions or pooled allocations."
 				}),
-				N === "past" && G.length === 0 && !Q && !K && /* @__PURE__ */ j("div", {
-					className: "flex flex-col items-center justify-center py-12 border border-dashed border-border-seam rounded-card",
-					children: [
-						/* @__PURE__ */ A("div", {
-							className: "size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4",
-							children: /* @__PURE__ */ A(S, { className: "size-6 text-text-link" })
-						}),
-						/* @__PURE__ */ A("h3", {
-							className: "text-base font-semibold text-text-primary",
-							children: "No past subscriptions"
-						}),
-						/* @__PURE__ */ A("p", {
-							className: "text-sm text-text-secondary 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: () => P("active"),
-							className: "mt-4 px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
-							children: "View active subscriptions"
-						})
-					]
+				P === "past" && K.length === 0 && !$ && !q && /* @__PURE__ */ A(M, {
+					illustration: "empty-data",
+					title: "No past subscriptions",
+					description: "You don't have any canceled, expired, or upgraded subscriptions yet.",
+					action: /* @__PURE__ */ A("button", {
+						type: "button",
+						onClick: () => F("active"),
+						className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
+						children: "View active subscriptions"
+					})
 				}),
-				N === "past" && K && /* @__PURE__ */ A("div", {
+				P === "past" && q && /* @__PURE__ */ A("div", {
 					className: "space-y-4",
 					children: [
 						1,
@@ -1189,62 +1161,47 @@ var oe = ({ workspaceId: e }) => {
 						3
 					].map((e) => /* @__PURE__ */ A("div", { className: "h-24 bg-bg-sunken animate-pulse rounded-card" }, e))
 				}),
-				Q && Z.active.length === 0 && Z.past.length === 0 && (N === "past" || J.length === 0) && /* @__PURE__ */ j("div", {
-					className: "flex flex-col items-center justify-center py-12 border border-dashed border-border-seam rounded-card",
-					children: [
-						/* @__PURE__ */ A("div", {
-							className: "size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4",
-							children: C !== "all" && !b ? /* @__PURE__ */ A(ne, {
-								status: C === "healthy" ? "HEALTHY" : C === "warning" ? "WARNING" : "CRITICAL",
-								className: "size-6"
-							}) : /* @__PURE__ */ A(ee, { className: "size-6 text-text-link" })
-						}),
-						/* @__PURE__ */ A("h3", {
-							className: "text-base font-semibold text-text-primary",
-							children: C !== "all" && !b ? `No ${C === "critical" ? "critical or exhausted" : C} quotas` : "No matching quotas"
-						}),
-						/* @__PURE__ */ A("p", {
-							className: "text-sm text-text-secondary mt-1 text-center max-w-sm",
-							children: C !== "all" && !b ? /* @__PURE__ */ j(k, { children: ["All your quotas are in a different status.", H && /* @__PURE__ */ j("span", {
-								className: "block mt-1",
-								children: [
-									"You have ",
-									H.healthyQuotas,
-									" healthy, ",
-									H.warningQuotas,
-									" ",
-									"warning, and ",
-									H.criticalQuotas + H.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" && !C.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-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
-								children: C === "all" ? "Clear filters" : "Show all quotas"
-							}), N === "active" && b && /* @__PURE__ */ A("button", {
-								type: "button",
-								onClick: () => P("all"),
-								className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
-								children: "Search all"
-							})]
+				$ && Q.active.length === 0 && Q.past.length === 0 && (P === "past" || Y.length === 0) && /* @__PURE__ */ A(M, {
+					illustration: "empty-search",
+					title: C !== "all" && !b ? `No ${C === "critical" ? "critical or exhausted" : C} quotas` : "No matching quotas",
+					description: C !== "all" && !b ? /* @__PURE__ */ j(k, { children: ["All your quotas are in a different status.", U && /* @__PURE__ */ j("span", {
+						className: "block mt-1",
+						children: [
+							"You have ",
+							U.healthyQuotas,
+							" healthy, ",
+							U.warningQuotas,
+							" ",
+							"warning, and ",
+							U.criticalQuotas + U.exhaustedQuotas,
+							" ",
+							"critical quotas."
+						]
+					})] }) : /* @__PURE__ */ j(k, { children: [
+						"No quotas match your current search or filter criteria in",
+						" ",
+						P === "past" ? "past" : P === "all" ? "any" : "active",
+						" ",
+						"subscriptions.",
+						P === "active" && !C.includes("all") && /* @__PURE__ */ A("span", {
+							className: "block mt-1",
+							children: "Try switching to “Past” or “All” to search across more subscriptions."
 						})
-					]
+					] }),
+					action: /* @__PURE__ */ j("div", {
+						className: "flex gap-2",
+						children: [/* @__PURE__ */ A("button", {
+							type: "button",
+							onClick: ve,
+							className: "px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
+							children: C === "all" ? "Clear filters" : "Show all quotas"
+						}), P === "active" && b && /* @__PURE__ */ A("button", {
+							type: "button",
+							onClick: () => F("all"),
+							className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
+							children: "Search all"
+						})]
+					})
 				})
 			] }),
 			u && /* @__PURE__ */ A(ae, {
@@ -1255,6 +1212,6 @@ var oe = ({ workspaceId: e }) => {
 	});
 };
 //#endregion
-export { R as UsagePage };
+export { se as UsagePage };
 
 //# sourceMappingURL=UsagePage.js.map