@burdenoff/microfe-billing 2026.526.1 → 2026.528.1

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

@@ -8,7 +8,7 @@ import { AlertCircle as p, AlertTriangle as m, CheckCircle as h, ChevronDown as
 import { Fragment as D, jsx as O, jsxs as k } 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 A = ({ status: e, className: n = "w-4 h-4" }) => {
+var A = ({ status: e, className: n = "size-4" }) => {
 	switch (e) {
 		case "EXHAUSTED": return /* @__PURE__ */ O(E, { className: `${n} ${t.error.icon}` });
 		case "CRITICAL": return /* @__PURE__ */ O(m, { className: `${n} ${t.error.icon}` });
@@ -67,6 +67,7 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 		gray: t.neutral.icon
 	};
 	return /* @__PURE__ */ k("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__ */ k("div", {
@@ -189,11 +190,12 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 		className: "border border-border rounded-lg bg-card overflow-hidden",
 		children: [
 			/* @__PURE__ */ k("button", {
+				type: "button",
 				onClick: () => a(!i),
 				className: "w-full flex items-center justify-between p-4 hover:bg-muted/50 transition-colors",
 				children: [/* @__PURE__ */ k("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ O(S, { className: "w-5 h-5 text-primary" }), /* @__PURE__ */ k("div", {
+					children: [/* @__PURE__ */ O(S, { className: "size-5 text-primary" }), /* @__PURE__ */ k("div", {
 						className: "text-left",
 						children: [/* @__PURE__ */ k("div", {
 							className: "flex items-center gap-2",
@@ -213,7 +215,7 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 							]
 						})]
 					})]
-				}), O(i ? g : v, { className: "w-5 h-5 text-muted-foreground" })]
+				}), O(i ? g : v, { className: "size-5 text-muted-foreground" })]
 			}),
 			i && e.aggregatedQuotas.length > 0 && /* @__PURE__ */ O("div", {
 				className: "border-t border-border",
@@ -256,7 +258,7 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ O(A, {
 							status: a.status,
-							className: "w-5 h-5"
+							className: "size-5"
 						}), /* @__PURE__ */ k("div", { children: [
 							/* @__PURE__ */ O("h2", {
 								id: "quota-detail-title",
@@ -281,10 +283,11 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 							})
 						] })]
 					}), /* @__PURE__ */ O("button", {
+						type: "button",
 						onClick: o,
 						className: "p-1 rounded-md hover:bg-muted/50 transition-colors",
 						"aria-label": "Close quota details",
-						children: /* @__PURE__ */ O(T, { className: "w-5 h-5" })
+						children: /* @__PURE__ */ O(T, { className: "size-5" })
 					})]
 				}),
 				/* @__PURE__ */ k("div", {
@@ -333,7 +336,7 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 									className: `flex items-center justify-between px-3 py-2.5 ${a ? "bg-muted/30" : s ? t.warning.bg : "bg-background"}`,
 									children: [/* @__PURE__ */ k("div", {
 										className: "flex items-center gap-2",
-										children: [s && !a && /* @__PURE__ */ O("span", { className: `w-2 h-2 rounded-full ${t.warning.dot} animate-pulse` }), /* @__PURE__ */ k("div", {
+										children: [s && !a && /* @__PURE__ */ O("span", { className: `size-2 rounded-full ${t.warning.dot} animate-pulse` }), /* @__PURE__ */ k("div", {
 											className: "flex flex-col",
 											children: [/* @__PURE__ */ O("span", {
 												className: `text-sm ${a ? "text-muted-foreground" : "text-foreground"}`,
@@ -411,7 +414,7 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 						}),
 						a.isCollectorBased ? /* @__PURE__ */ O("p", {
 							className: "text-sm text-muted-foreground text-center py-6",
-							children: "Usage is tracked via system metrics — individual event records are not available for this quota."
+							children: "Usage is tracked via system metrics, individual event records are not available for this quota."
 						}) : b ? /* @__PURE__ */ O("div", {
 							className: "space-y-2",
 							children: [
@@ -449,22 +452,24 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 							className: "flex items-center justify-center gap-2 mt-4",
 							children: [
 								/* @__PURE__ */ O("button", {
+									type: "button",
 									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__ */ O(_, { className: "w-4 h-4" })
+									children: /* @__PURE__ */ O(_, { className: "size-4" })
 								}),
 								/* @__PURE__ */ k("span", {
 									className: "text-sm text-muted-foreground",
 									children: ["Page ", d]
 								}),
 								/* @__PURE__ */ O("button", {
+									type: "button",
 									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__ */ O(v, { className: "w-4 h-4" })
+									children: /* @__PURE__ */ O(v, { className: "size-4" })
 								})
 							]
 						})
@@ -473,6 +478,7 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 				/* @__PURE__ */ O("div", {
 					className: "sticky bottom-0 bg-background border-t border-border p-4",
 					children: /* @__PURE__ */ O("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",
 						children: "Close"
@@ -530,8 +536,8 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 			className: "text-center space-y-2",
 			children: [
 				/* @__PURE__ */ O("div", {
-					className: "w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center",
-					children: /* @__PURE__ */ O(m, { className: "w-6 h-6 text-muted-foreground" })
+					className: "size-12 mx-auto rounded-full bg-muted flex items-center justify-center",
+					children: /* @__PURE__ */ O(m, { className: "size-6 text-muted-foreground" })
 				}),
 				/* @__PURE__ */ O("h2", {
 					className: "text-lg font-semibold text-foreground",
@@ -566,8 +572,8 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 			className: "text-center space-y-4",
 			children: [
 				/* @__PURE__ */ O("div", {
-					className: "w-12 h-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
-					children: /* @__PURE__ */ O(m, { className: "w-6 h-6 text-destructive" })
+					className: "size-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
+					children: /* @__PURE__ */ O(m, { className: "size-6 text-destructive" })
 				}),
 				/* @__PURE__ */ O("h2", {
 					className: "text-lg font-semibold text-foreground",
@@ -578,6 +584,7 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 					children: U.message
 				}),
 				/* @__PURE__ */ O("button", {
+					type: "button",
 					onClick: () => W(),
 					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"
@@ -608,10 +615,11 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 							children: e.name
 						}, e.id))
 					}), /* @__PURE__ */ O("button", {
+						type: "button",
 						onClick: () => W(),
 						className: "p-2 border border-border rounded-md hover:bg-muted/50 transition-colors",
 						title: "Refresh",
-						children: /* @__PURE__ */ O(C, { className: "w-4 h-4" })
+						children: /* @__PURE__ */ O(C, { className: "size-4" })
 					})]
 				})]
 			}),
@@ -621,7 +629,7 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 					/* @__PURE__ */ k("div", {
 						className: "relative flex-1 max-w-md",
 						children: [
-							/* @__PURE__ */ O(w, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }),
+							/* @__PURE__ */ O(w, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }),
 							/* @__PURE__ */ O("input", {
 								type: "text",
 								value: b,
@@ -630,29 +638,33 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 								className: "w-full pl-9 pr-3 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
 							}),
 							(b || fe) && /* @__PURE__ */ O("button", {
+								type: "button",
 								onClick: () => E(""),
 								className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted/50",
-								children: fe ? /* @__PURE__ */ O(C, { className: "w-3 h-3 text-muted-foreground animate-spin" }) : /* @__PURE__ */ O(T, { className: "w-3 h-3 text-muted-foreground" })
+								children: fe ? /* @__PURE__ */ O(C, { className: "size-3 text-muted-foreground animate-spin" }) : /* @__PURE__ */ O(T, { className: "size-3 text-muted-foreground" })
 							})
 						]
 					}),
 					/* @__PURE__ */ k("div", {
 						className: "flex items-center bg-muted/50 rounded-lg p-1 border border-border",
 						children: [/* @__PURE__ */ k("button", {
+							type: "button",
 							onClick: () => F("active"),
 							className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${P === "active" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"}`,
-							children: [/* @__PURE__ */ O(S, { className: "w-3.5 h-3.5" }), "Active"]
+							children: [/* @__PURE__ */ O(S, { className: "size-3.5" }), "Active"]
 						}), /* @__PURE__ */ k("button", {
+							type: "button",
 							onClick: () => F("past"),
 							disabled: H && P !== "past",
 							className: `flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-all ${P === "past" ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"} ${H && P !== "past" ? "opacity-70" : ""}`,
-							children: [H && P === "past" ? /* @__PURE__ */ O(C, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ O(y, { className: "w-3.5 h-3.5" }), "Past"]
+							children: [H && P === "past" ? /* @__PURE__ */ O(C, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ O(y, { className: "size-3.5" }), "Past"]
 						})]
 					}),
 					Q && /* @__PURE__ */ k("button", {
+						type: "button",
 						onClick: pe,
 						className: "flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground border border-border rounded-md hover:bg-muted/50 transition-colors",
-						children: [/* @__PURE__ */ O(T, { className: "w-3 h-3" }), "Clear filters"]
+						children: [/* @__PURE__ */ O(T, { className: "size-3" }), "Clear filters"]
 					})
 				]
 			}),
@@ -673,7 +685,7 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 					/* @__PURE__ */ O(N, {
 						label: "Total Quotas",
 						value: R.totalQuotas,
-						icon: /* @__PURE__ */ O(x, { className: "w-5 h-5" }),
+						icon: /* @__PURE__ */ O(x, { className: "size-5" }),
 						color: "blue",
 						isActive: j === "all",
 						onClick: () => M("all")
@@ -681,7 +693,7 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 					/* @__PURE__ */ O(N, {
 						label: "Healthy",
 						value: R.healthyQuotas,
-						icon: /* @__PURE__ */ O(h, { className: "w-5 h-5" }),
+						icon: /* @__PURE__ */ O(h, { className: "size-5" }),
 						color: "emerald",
 						isActive: j === "healthy",
 						onClick: () => $("healthy")
@@ -689,7 +701,7 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 					/* @__PURE__ */ O(N, {
 						label: "Warning",
 						value: R.warningQuotas,
-						icon: /* @__PURE__ */ O(p, { className: "w-5 h-5" }),
+						icon: /* @__PURE__ */ O(p, { className: "size-5" }),
 						color: "amber",
 						isActive: j === "warning",
 						onClick: () => $("warning")
@@ -697,7 +709,7 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 					/* @__PURE__ */ O(N, {
 						label: "Critical / Exhausted",
 						value: R.criticalQuotas + R.exhaustedQuotas,
-						icon: /* @__PURE__ */ O(m, { className: "w-5 h-5" }),
+						icon: /* @__PURE__ */ O(m, { className: "size-5" }),
 						color: "red",
 						isActive: j === "critical",
 						onClick: () => $("critical")
@@ -734,7 +746,7 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 			}),
 			Z.active.length > 0 && /* @__PURE__ */ k("section", { children: [/* @__PURE__ */ k("h2", {
 				className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
-				children: [/* @__PURE__ */ O(S, { className: "w-5 h-5 text-primary" }), P === "all" ? "Active Subscription Quotas" : "Subscription Quotas"]
+				children: [/* @__PURE__ */ O(S, { className: "size-5 text-primary" }), P === "all" ? "Active Subscription Quotas" : "Subscription Quotas"]
 			}), /* @__PURE__ */ O("div", {
 				className: "space-y-4",
 				children: Z.active.map((e) => /* @__PURE__ */ O(re, {
@@ -746,7 +758,7 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 			Z.past.length > 0 && /* @__PURE__ */ k("section", { children: [/* @__PURE__ */ k("h2", {
 				className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
 				children: [
-					/* @__PURE__ */ O(y, { className: "w-5 h-5 text-muted-foreground" }),
+					/* @__PURE__ */ O(y, { className: "size-5 text-muted-foreground" }),
 					"Past Subscription Quotas",
 					/* @__PURE__ */ O("span", {
 						className: "text-xs font-normal text-muted-foreground",
@@ -771,17 +783,18 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 				}, e.id)), G && /* @__PURE__ */ O("div", {
 					className: "flex justify-center pt-2",
 					children: /* @__PURE__ */ O("button", {
+						type: "button",
 						onClick: ue,
 						disabled: de,
 						className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground border border-border rounded-md hover:bg-muted/50 transition-colors disabled:opacity-50",
-						children: de ? /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(C, { className: "w-4 h-4 animate-spin" }), "Loading..."] }) : /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(g, { className: "w-4 h-4" }), "Load more past subscriptions"] })
+						children: de ? /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(C, { className: "size-4 animate-spin" }), "Loading…"] }) : /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(g, { className: "size-4" }), "Load more past subscriptions"] })
 					})
 				})]
 			})] }),
 			P !== "past" && J.length > 0 && /* @__PURE__ */ k("section", { children: [/* @__PURE__ */ k("h2", {
 				className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
 				children: [
-					/* @__PURE__ */ O(x, { className: `w-5 h-5 ${t.info.icon}` }),
+					/* @__PURE__ */ O(x, { className: `size-5 ${t.info.icon}` }),
 					"Pooled Quotas",
 					/* @__PURE__ */ O("span", {
 						className: "text-xs font-normal text-muted-foreground",
@@ -797,8 +810,8 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
 				children: [
 					/* @__PURE__ */ O("div", {
-						className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4",
-						children: /* @__PURE__ */ O(x, { className: "w-6 h-6 text-muted-foreground" })
+						className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
+						children: /* @__PURE__ */ O(x, { className: "size-6 text-muted-foreground" })
 					}),
 					/* @__PURE__ */ O("h3", {
 						className: "text-lg font-medium text-foreground",
@@ -814,8 +827,8 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
 				children: [
 					/* @__PURE__ */ O("div", {
-						className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4",
-						children: /* @__PURE__ */ O(y, { className: "w-6 h-6 text-muted-foreground" })
+						className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
+						children: /* @__PURE__ */ O(y, { className: "size-6 text-muted-foreground" })
 					}),
 					/* @__PURE__ */ O("h3", {
 						className: "text-lg font-medium text-foreground",
@@ -826,6 +839,7 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 						children: "You don't have any canceled, expired, or upgraded subscriptions yet."
 					}),
 					/* @__PURE__ */ O("button", {
+						type: "button",
 						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"
@@ -844,11 +858,11 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
 				children: [
 					/* @__PURE__ */ O("div", {
-						className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4",
+						className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
 						children: j !== "all" && !b ? /* @__PURE__ */ O(A, {
 							status: j === "healthy" ? "HEALTHY" : j === "warning" ? "WARNING" : "CRITICAL",
-							className: "w-6 h-6"
-						}) : /* @__PURE__ */ O(w, { className: "w-6 h-6 text-muted-foreground" })
+							className: "size-6"
+						}) : /* @__PURE__ */ O(w, { className: "size-6 text-muted-foreground" })
 					}),
 					/* @__PURE__ */ O("h3", {
 						className: "text-lg font-medium text-foreground",
@@ -882,10 +896,12 @@ var A = ({ status: e, className: n = "w-4 h-4" }) => {
 					/* @__PURE__ */ k("div", {
 						className: "flex gap-2 mt-4",
 						children: [/* @__PURE__ */ O("button", {
+							type: "button",
 							onClick: pe,
 							className: "px-4 py-2 text-sm font-medium border border-border rounded-md hover:bg-muted/50 transition-colors",
 							children: j === "all" ? "Clear filters" : "Show all quotas"
 						}), P === "active" && b && /* @__PURE__ */ O("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"