@burdenoff/microfe-billing 2026.531.3 → 2026.531.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/billing/modules/usage/pages/UsagePage.js +319 -299
  2. package/dist/billing/modules/usage/pages/UsagePage.js.map +1 -1
  3. package/package.json +1 -1
package/dist/billing/modules/usage/pages/UsagePage.js CHANGED
@@ -3,20 +3,20 @@ import { statusTokens as t } from "../../../shared/utils/tokens.js";
3
3
  import { formatDateTime as n, formatNumber as r, formatRelativeTime as i } from "../../../shared/utils/format.js";
4
4
  import { useBillingPermissions as a } from "../../../hooks/useBillingPermissions.js";
5
5
  import { useBillingAccountsForUsage as o, useEnhancedUsagePage as s, useQuotaUsageDetails as c, useWorkspaceQuotaHistory as l } from "../hooks/useUsage.js";
6
- import { useCallback as u, useDeferredValue as ee, useMemo as d, useState as f } from "react";
7
- import { AlertCircle as p, AlertTriangle as m, CheckCircle as h, ChevronDown as g, ChevronLeft as _, ChevronRight as v, Clock as y, Info as b, Layers as x, Package as S, RefreshCw as C, Search as w, X as T, XCircle as E } from "lucide-react";
8
- import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
9
- import { useI18n as te } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
6
+ import { useCallback as u, useDeferredValue as d, useMemo as f, useState as p } from "react";
7
+ 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";
8
+ import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
9
+ import { useI18n as ee } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
10
10
  //#region src/billing/modules/usage/pages/UsagePage.tsx
11
- var A = ({ status: e, className: n = "size-4" }) => {
11
+ var j = ({ status: e, className: n = "size-4" }) => {
12
12
  switch (e) {
13
- case "EXHAUSTED": return /* @__PURE__ */ O(E, { className: `${n} ${t.error.icon}` });
14
- case "CRITICAL": return /* @__PURE__ */ O(m, { className: `${n} ${t.error.icon}` });
15
- case "WARNING": return /* @__PURE__ */ O(p, { className: `${n} ${t.warning.icon}` });
16
- case "HEALTHY": return /* @__PURE__ */ O(h, { className: `${n} ${t.success.icon}` });
17
- default: return /* @__PURE__ */ O(b, { className: `${n} ${t.neutral.icon}` });
13
+ case "EXHAUSTED": return /* @__PURE__ */ k(D, { className: `${n} ${t.error.icon}` });
14
+ case "CRITICAL": return /* @__PURE__ */ k(h, { className: `${n} ${t.error.icon}` });
15
+ case "WARNING": return /* @__PURE__ */ k(m, { className: `${n} ${t.warning.icon}` });
16
+ case "HEALTHY": return /* @__PURE__ */ k(g, { className: `${n} ${t.success.icon}` });
17
+ default: return /* @__PURE__ */ k(x, { className: `${n} ${t.neutral.icon}` });
18
18
  }
19
- }, j = ({ status: e }) => /* @__PURE__ */ O("span", {
19
+ }, M = ({ status: e }) => /* @__PURE__ */ k("span", {
20
20
  className: `px-2 py-0.5 text-xs font-medium rounded ${{
21
21
  EXHAUSTED: `${t.error.bg} ${t.error.text}`,
22
22
  CRITICAL: `${t.error.bg} ${t.error.text}`,
@@ -25,11 +25,11 @@ var A = ({ status: e, className: n = "size-4" }) => {
25
25
  INACTIVE: `${t.neutral.bg} ${t.neutral.text}`
26
26
  }[e]}`,
27
27
  children: e
28
- }), M = ({ percentage: e, status: n }) => {
28
+ }), N = ({ percentage: e, status: n }) => {
29
29
  let r = Math.min(100, Math.max(0, e));
30
- return /* @__PURE__ */ O("div", {
30
+ return /* @__PURE__ */ k("div", {
31
31
  className: "w-full bg-muted rounded-full h-2.5 overflow-hidden",
32
- children: /* @__PURE__ */ O("div", {
32
+ children: /* @__PURE__ */ k("div", {
33
33
  className: `h-full rounded-full transition-all duration-300 ${{
34
34
  EXHAUSTED: t.error.dot,
35
35
  CRITICAL: t.error.dot,
@@ -40,7 +40,7 @@ var A = ({ status: e, className: n = "size-4" }) => {
40
40
  style: { width: `${r}%` }
41
41
  })
42
42
  });
43
- }, N = ({ label: e, value: n, icon: r, color: i, isActive: a, onClick: o }) => {
43
+ }, P = ({ label: e, value: n, icon: r, color: i, isActive: a, onClick: o }) => {
44
44
  let s = {
45
45
  blue: t.info,
46
46
  emerald: t.success,
@@ -66,60 +66,60 @@ var A = ({ status: e, className: n = "size-4" }) => {
66
66
  red: t.error.icon,
67
67
  gray: t.neutral.icon
68
68
  };
69
- return /* @__PURE__ */ k("button", {
69
+ return /* @__PURE__ */ A("button", {
70
70
  type: "button",
71
71
  onClick: o,
72
72
  className: `border rounded-lg p-4 w-full text-left transition-all ${c[i]} ${o ? "cursor-pointer hover:shadow-md" : ""} ${a ? l[i] : ""}`,
73
- children: [/* @__PURE__ */ k("div", {
73
+ children: [/* @__PURE__ */ A("div", {
74
74
  className: "flex items-center gap-2 mb-2",
75
- children: [/* @__PURE__ */ O("span", {
75
+ children: [/* @__PURE__ */ k("span", {
76
76
  className: u[i],
77
77
  children: r
78
- }), /* @__PURE__ */ O("span", {
78
+ }), /* @__PURE__ */ k("span", {
79
79
  className: "text-sm text-muted-foreground",
80
80
  children: e
81
81
  })]
82
- }), /* @__PURE__ */ O("p", {
82
+ }), /* @__PURE__ */ k("p", {
83
83
  className: "text-2xl font-bold text-foreground",
84
84
  children: n
85
85
  })]
86
86
  });
87
- }, P = ({ quota: e, planLabel: t, onClick: n }) => {
87
+ }, F = ({ quota: e, planLabel: t, onClick: n }) => {
88
88
  let i = e.totalLimit != null && e.totalLimit > 0 && !e.noLimit;
89
- return /* @__PURE__ */ k("tr", {
89
+ return /* @__PURE__ */ A("tr", {
90
90
  onClick: n,
91
91
  className: "cursor-pointer hover:bg-muted/40 transition-colors border-b border-border last:border-b-0",
92
92
  children: [
93
- /* @__PURE__ */ k("td", {
93
+ /* @__PURE__ */ A("td", {
94
94
  className: "px-4 py-3",
95
95
  children: [
96
- /* @__PURE__ */ O("span", {
96
+ /* @__PURE__ */ k("span", {
97
97
  className: "text-sm font-medium text-primary hover:underline capitalize",
98
98
  children: e.displayName || e.name.replace(/_/g, " ")
99
99
  }),
100
- /* @__PURE__ */ O("span", {
100
+ /* @__PURE__ */ k("span", {
101
101
  className: "block text-xs font-mono text-muted-foreground mt-0.5",
102
102
  children: e.name
103
103
  }),
104
- e.description && /* @__PURE__ */ O("span", {
104
+ e.description && /* @__PURE__ */ k("span", {
105
105
  className: "block text-xs text-muted-foreground mt-0.5 max-w-[220px] truncate",
106
106
  children: e.description
107
107
  }),
108
- e.quotaCount > 1 && /* @__PURE__ */ k("span", {
108
+ e.quotaCount > 1 && /* @__PURE__ */ A("span", {
109
109
  className: "block text-xs text-muted-foreground mt-0.5",
110
110
  children: [e.quotaCount, " assignments"]
111
111
  })
112
112
  ]
113
113
  }),
114
- t !== void 0 && /* @__PURE__ */ O("td", {
114
+ t !== void 0 && /* @__PURE__ */ k("td", {
115
115
  className: "px-4 py-3 text-sm text-muted-foreground whitespace-nowrap",
116
116
  children: t
117
117
  }),
118
- /* @__PURE__ */ O("td", {
118
+ /* @__PURE__ */ k("td", {
119
119
  className: "px-4 py-3",
120
- children: /* @__PURE__ */ k("div", {
120
+ children: /* @__PURE__ */ A("div", {
121
121
  className: "space-y-1.5",
122
- children: [/* @__PURE__ */ k("span", {
122
+ children: [/* @__PURE__ */ A("span", {
123
123
  className: "text-sm text-foreground tabular-nums",
124
124
  children: [
125
125
  r(e.totalUsed),
@@ -127,58 +127,58 @@ var A = ({ status: e, className: n = "size-4" }) => {
127
127
  i ? r(e.totalLimit) : "∞",
128
128
  e.unit ? ` ${e.unit}` : ""
129
129
  ]
130
- }), /* @__PURE__ */ O(M, {
130
+ }), /* @__PURE__ */ k(N, {
131
131
  percentage: i ? e.usagePercentage : 0,
132
132
  status: e.status
133
133
  })]
134
134
  })
135
135
  }),
136
- /* @__PURE__ */ O("td", {
136
+ /* @__PURE__ */ k("td", {
137
137
  className: "px-4 py-3 text-sm text-muted-foreground tabular-nums whitespace-nowrap",
138
138
  children: i ? r(e.totalLimit) : "∞"
139
139
  }),
140
- /* @__PURE__ */ O("td", {
140
+ /* @__PURE__ */ k("td", {
141
141
  className: "px-4 py-3",
142
- children: /* @__PURE__ */ O(j, { status: e.status })
142
+ children: /* @__PURE__ */ k(M, { status: e.status })
143
143
  })
144
144
  ]
145
145
  });
146
- }, ne = ({ quotas: e, planLabel: t, showPlanColumn: n = !0, onQuotaClick: r }) => /* @__PURE__ */ O("div", {
146
+ }, te = ({ quotas: e, planLabel: t, showPlanColumn: n = !0, onQuotaClick: r }) => /* @__PURE__ */ k("div", {
147
147
  className: "overflow-x-auto rounded-lg border border-border bg-card",
148
- children: /* @__PURE__ */ k("table", {
148
+ children: /* @__PURE__ */ A("table", {
149
149
  className: "w-full text-left",
150
- children: [/* @__PURE__ */ O("thead", { children: /* @__PURE__ */ k("tr", {
150
+ children: [/* @__PURE__ */ k("thead", { children: /* @__PURE__ */ A("tr", {
151
151
  className: "border-b border-border bg-muted/30",
152
152
  children: [
153
- /* @__PURE__ */ O("th", {
153
+ /* @__PURE__ */ k("th", {
154
154
  className: "px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
155
155
  children: "Quotas"
156
156
  }),
157
- n && /* @__PURE__ */ O("th", {
157
+ n && /* @__PURE__ */ k("th", {
158
158
  className: "px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
159
159
  children: "Plan"
160
160
  }),
161
- /* @__PURE__ */ O("th", {
161
+ /* @__PURE__ */ k("th", {
162
162
  className: "px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
163
163
  children: "Current Usage"
164
164
  }),
165
- /* @__PURE__ */ O("th", {
165
+ /* @__PURE__ */ k("th", {
166
166
  className: "px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
167
167
  children: "Limit"
168
168
  }),
169
- /* @__PURE__ */ O("th", {
169
+ /* @__PURE__ */ k("th", {
170
170
  className: "px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
171
171
  children: "Status"
172
172
  })
173
173
  ]
174
- }) }), /* @__PURE__ */ O("tbody", { children: e.map((e) => /* @__PURE__ */ O(P, {
174
+ }) }), /* @__PURE__ */ k("tbody", { children: e.map((e) => /* @__PURE__ */ k(F, {
175
175
  quota: e,
176
176
  planLabel: n ? t : void 0,
177
177
  onClick: () => r(e)
178
178
  }, e.name)) })]
179
179
  })
180
- }), re = ({ subscription: e, onQuotaClick: n, defaultExpanded: r = !0 }) => {
181
- let [i, a] = f(r), o = {
180
+ }), ne = ({ subscription: e, onQuotaClick: n, defaultExpanded: r = !0 }) => {
181
+ let [i, a] = p(r), o = {
182
182
  active: `${t.success.bg} ${t.success.text}`,
183
183
  trialing: `${t.info.bg} ${t.info.text}`,
184
184
  past_due: `${t.warning.bg} ${t.warning.text}`,
@@ -186,27 +186,27 @@ var A = ({ status: e, className: n = "size-4" }) => {
186
186
  expired: `${t.neutral.bg} ${t.neutral.text}`,
187
187
  upgraded: `${t.primary.bg} ${t.primary.text}`
188
188
  };
189
- return /* @__PURE__ */ k("div", {
189
+ return /* @__PURE__ */ A("div", {
190
190
  className: "border border-border rounded-lg bg-card overflow-hidden",
191
191
  children: [
192
- /* @__PURE__ */ k("button", {
192
+ /* @__PURE__ */ A("button", {
193
193
  type: "button",
194
194
  onClick: () => a(!i),
195
195
  className: "w-full flex items-center justify-between p-4 hover:bg-muted/50 transition-colors",
196
- children: [/* @__PURE__ */ k("div", {
196
+ children: [/* @__PURE__ */ A("div", {
197
197
  className: "flex items-center gap-3",
198
- children: [/* @__PURE__ */ O(S, { className: "size-5 text-primary" }), /* @__PURE__ */ k("div", {
198
+ children: [/* @__PURE__ */ k(C, { className: "size-5 text-primary" }), /* @__PURE__ */ A("div", {
199
199
  className: "text-left",
200
- children: [/* @__PURE__ */ k("div", {
200
+ children: [/* @__PURE__ */ A("div", {
201
201
  className: "flex items-center gap-2",
202
- children: [/* @__PURE__ */ O("span", {
202
+ children: [/* @__PURE__ */ k("span", {
203
203
  className: "font-medium text-foreground",
204
204
  children: "Subscription"
205
- }), /* @__PURE__ */ O("span", {
205
+ }), /* @__PURE__ */ k("span", {
206
206
  className: `px-2 py-0.5 text-xs font-medium rounded capitalize ${o[e.status.toLowerCase()] || o.active}`,
207
207
  children: e.status
208
208
  })]
209
- }), /* @__PURE__ */ k("p", {
209
+ }), /* @__PURE__ */ A("p", {
210
210
  className: "text-xs text-muted-foreground",
211
211
  children: [
212
212
  e.aggregatedQuotas.length,
@@ -215,65 +215,65 @@ var A = ({ status: e, className: n = "size-4" }) => {
215
215
  ]
216
216
  })]
217
217
  })]
218
- }), O(i ? g : v, { className: "size-5 text-muted-foreground" })]
218
+ }), k(i ? _ : y, { className: "size-5 text-muted-foreground" })]
219
219
  }),
220
- i && e.aggregatedQuotas.length > 0 && /* @__PURE__ */ O("div", {
220
+ i && e.aggregatedQuotas.length > 0 && /* @__PURE__ */ k("div", {
221
221
  className: "border-t border-border",
222
- children: /* @__PURE__ */ O(ne, {
222
+ children: /* @__PURE__ */ k(te, {
223
223
  quotas: e.aggregatedQuotas,
224
224
  planLabel: e.planName || e.productId || void 0,
225
225
  showPlanColumn: !!(e.planName || e.productId),
226
226
  onQuotaClick: n
227
227
  })
228
228
  }),
229
- i && e.aggregatedQuotas.length === 0 && /* @__PURE__ */ O("div", {
229
+ i && e.aggregatedQuotas.length === 0 && /* @__PURE__ */ k("div", {
230
230
  className: "border-t border-border p-6 text-center",
231
- children: /* @__PURE__ */ O("p", {
231
+ children: /* @__PURE__ */ k("p", {
232
232
  className: "text-sm text-muted-foreground",
233
233
  children: "No quotas assigned to this subscription"
234
234
  })
235
235
  })
236
236
  ]
237
237
  });
238
- }, ie = ({ quota: a, onClose: o }) => {
239
- let [s, u] = f([null]), ee = s[s.length - 1] ?? null, d = s.length, { workspaceId: p } = e(), m = a.quotaAssignments[0]?.id, { usages: h, hasNextPage: g, nextCursor: y, isLoading: b } = c(m, 10, ee, p), { snapshots: x, isLoading: S } = l(p, a.name, 24), C = () => {
240
- y && u((e) => [...e, y]);
241
- }, w = () => {
238
+ }, re = ({ quota: a, onClose: o }) => {
239
+ 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 = () => {
240
+ b && u((e) => [...e, b]);
241
+ }, T = () => {
242
242
  s.length > 1 && u((e) => e.slice(0, -1));
243
243
  };
244
- return /* @__PURE__ */ k("div", {
244
+ return /* @__PURE__ */ A("div", {
245
245
  className: "fixed inset-0 z-50 flex items-center justify-center",
246
- children: [/* @__PURE__ */ O("div", {
246
+ children: [/* @__PURE__ */ k("div", {
247
247
  className: "absolute inset-0 bg-overlay-scrim",
248
248
  onClick: o
249
- }), /* @__PURE__ */ k("div", {
249
+ }), /* @__PURE__ */ A("div", {
250
250
  className: "relative bg-background border border-border rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-auto",
251
251
  role: "dialog",
252
252
  "aria-modal": "true",
253
253
  "aria-labelledby": "quota-detail-title",
254
254
  children: [
255
- /* @__PURE__ */ k("div", {
255
+ /* @__PURE__ */ A("div", {
256
256
  className: "sticky top-0 bg-background border-b border-border p-4 flex items-center justify-between",
257
- children: [/* @__PURE__ */ k("div", {
257
+ children: [/* @__PURE__ */ A("div", {
258
258
  className: "flex items-center gap-3",
259
- children: [/* @__PURE__ */ O(A, {
259
+ children: [/* @__PURE__ */ k(j, {
260
260
  status: a.status,
261
261
  className: "size-5"
262
- }), /* @__PURE__ */ k("div", { children: [
263
- /* @__PURE__ */ O("h2", {
262
+ }), /* @__PURE__ */ A("div", { children: [
263
+ /* @__PURE__ */ k("h2", {
264
264
  id: "quota-detail-title",
265
265
  className: "text-lg font-semibold capitalize",
266
266
  children: a.displayName || a.name.replace(/_/g, " ")
267
267
  }),
268
- /* @__PURE__ */ O("p", {
268
+ /* @__PURE__ */ k("p", {
269
269
  className: "text-xs font-mono text-muted-foreground",
270
270
  children: a.name
271
271
  }),
272
- a.description && /* @__PURE__ */ O("p", {
272
+ a.description && /* @__PURE__ */ k("p", {
273
273
  className: "text-sm text-muted-foreground mt-0.5",
274
274
  children: a.description
275
275
  }),
276
- /* @__PURE__ */ k("p", {
276
+ /* @__PURE__ */ A("p", {
277
277
  className: "text-sm text-muted-foreground mt-0.5",
278
278
  children: [
279
279
  a.quotaCount,
@@ -282,33 +282,33 @@ var A = ({ status: e, className: n = "size-4" }) => {
282
282
  ]
283
283
  })
284
284
  ] })]
285
- }), /* @__PURE__ */ O("button", {
285
+ }), /* @__PURE__ */ k("button", {
286
286
  type: "button",
287
287
  onClick: o,
288
288
  className: "p-1 rounded-md hover:bg-muted/50 transition-colors",
289
289
  "aria-label": "Close quota details",
290
- children: /* @__PURE__ */ O(T, { className: "size-5" })
290
+ children: /* @__PURE__ */ k(E, { className: "size-5" })
291
291
  })]
292
292
  }),
293
- /* @__PURE__ */ k("div", {
293
+ /* @__PURE__ */ A("div", {
294
294
  className: "p-4 border-b border-border",
295
- children: [/* @__PURE__ */ k("div", {
295
+ children: [/* @__PURE__ */ A("div", {
296
296
  className: "mb-4",
297
297
  children: [
298
- /* @__PURE__ */ k("div", {
298
+ /* @__PURE__ */ A("div", {
299
299
  className: "flex items-center justify-between mb-2",
300
- children: [/* @__PURE__ */ O("span", {
300
+ children: [/* @__PURE__ */ k("span", {
301
301
  className: "text-sm text-muted-foreground",
302
302
  children: "Usage"
303
- }), /* @__PURE__ */ O(j, { status: a.status })]
303
+ }), /* @__PURE__ */ k(M, { status: a.status })]
304
304
  }),
305
- /* @__PURE__ */ O(M, {
305
+ /* @__PURE__ */ k(N, {
306
306
  percentage: a.usagePercentage,
307
307
  status: a.status
308
308
  }),
309
- /* @__PURE__ */ k("div", {
309
+ /* @__PURE__ */ A("div", {
310
310
  className: "flex items-center justify-between mt-2 text-sm",
311
- children: [/* @__PURE__ */ k("span", {
311
+ children: [/* @__PURE__ */ A("span", {
312
312
  className: "font-medium",
313
313
  children: [
314
314
  r(a.totalUsed),
@@ -317,44 +317,44 @@ var A = ({ status: e, className: n = "size-4" }) => {
317
317
  a.totalLimit != null && a.totalLimit > 0 ? r(a.totalLimit) : "∞",
318
318
  a.unit && ` ${a.unit}`
319
319
  ]
320
- }), /* @__PURE__ */ O("span", {
320
+ }), /* @__PURE__ */ k("span", {
321
321
  className: "text-muted-foreground",
322
322
  children: a.totalLimit != null && a.totalLimit > 0 ? `${Math.round(a.usagePercentage)}% used` : "Unlimited"
323
323
  })]
324
324
  })
325
325
  ]
326
- }), a.quotaCount > 1 && /* @__PURE__ */ k("div", {
326
+ }), a.quotaCount > 1 && /* @__PURE__ */ A("div", {
327
327
  className: "mt-4",
328
- children: [/* @__PURE__ */ O("h3", {
328
+ children: [/* @__PURE__ */ k("h3", {
329
329
  className: "text-sm font-medium text-foreground mb-3",
330
330
  children: "Quota Breakdown"
331
- }), /* @__PURE__ */ O("div", {
331
+ }), /* @__PURE__ */ k("div", {
332
332
  className: "border border-border rounded-lg overflow-hidden divide-y divide-border",
333
333
  children: [...a.quotaAssignments].sort((e, t) => (e.endtime ? new Date(e.endtime).getTime() : Infinity) - (t.endtime ? new Date(t.endtime).getTime() : Infinity)).map((e) => {
334
334
  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;
335
- return /* @__PURE__ */ k("div", {
335
+ return /* @__PURE__ */ A("div", {
336
336
  className: `flex items-center justify-between px-3 py-2.5 ${a ? "bg-muted/30" : s ? t.warning.bg : "bg-background"}`,
337
- children: [/* @__PURE__ */ k("div", {
337
+ children: [/* @__PURE__ */ A("div", {
338
338
  className: "flex items-center gap-2",
339
- children: [s && !a && /* @__PURE__ */ O("span", { className: `size-2 rounded-full ${t.warning.dot} animate-pulse` }), /* @__PURE__ */ k("div", {
339
+ children: [s && !a && /* @__PURE__ */ k("span", { className: `size-2 rounded-full ${t.warning.dot} animate-pulse` }), /* @__PURE__ */ A("div", {
340
340
  className: "flex flex-col",
341
- children: [/* @__PURE__ */ O("span", {
341
+ children: [/* @__PURE__ */ k("span", {
342
342
  className: `text-sm ${a ? "text-muted-foreground" : "text-foreground"}`,
343
343
  children: n ? n.toLocaleDateString("en-US", {
344
344
  month: "short",
345
345
  day: "numeric",
346
346
  year: "numeric"
347
347
  }) : "No expiry"
348
- }), /* @__PURE__ */ O("span", {
348
+ }), /* @__PURE__ */ k("span", {
349
349
  className: `text-xs ${a ? "text-destructive" : s ? t.warning.text : "text-muted-foreground"}`,
350
350
  children: a ? "Expired" : o === null ? "Never expires" : o === 0 ? "Expires today" : o === 1 ? "Expires tomorrow" : `${o} days left`
351
351
  })]
352
352
  })]
353
- }), /* @__PURE__ */ O("div", {
353
+ }), /* @__PURE__ */ k("div", {
354
354
  className: "text-right",
355
- children: /* @__PURE__ */ k("span", {
355
+ children: /* @__PURE__ */ A("span", {
356
356
  className: `text-sm font-semibold ${a ? "text-muted-foreground" : "text-foreground"}`,
357
- children: [r(e.used), /* @__PURE__ */ k("span", {
357
+ children: [r(e.used), /* @__PURE__ */ A("span", {
358
358
  className: "text-muted-foreground font-normal",
359
359
  children: [
360
360
  " / ",
@@ -369,34 +369,34 @@ var A = ({ status: e, className: n = "size-4" }) => {
369
369
  })]
370
370
  })]
371
371
  }),
372
- (S || x.length > 0) && /* @__PURE__ */ k("div", {
372
+ (C || S.length > 0) && /* @__PURE__ */ A("div", {
373
373
  className: "p-4 border-t border-border",
374
- children: [/* @__PURE__ */ O("h3", {
374
+ children: [/* @__PURE__ */ k("h3", {
375
375
  className: "text-sm font-medium text-foreground mb-3",
376
376
  children: "Live Value History"
377
- }), S ? /* @__PURE__ */ O("div", {
377
+ }), C ? /* @__PURE__ */ k("div", {
378
378
  className: "space-y-1.5",
379
379
  children: [
380
380
  1,
381
381
  2,
382
382
  3
383
- ].map((e) => /* @__PURE__ */ O("div", { className: "h-8 bg-muted animate-pulse rounded" }, e))
384
- }) : /* @__PURE__ */ O("div", {
383
+ ].map((e) => /* @__PURE__ */ k("div", { className: "h-8 bg-muted animate-pulse rounded" }, e))
384
+ }) : /* @__PURE__ */ k("div", {
385
385
  className: "space-y-1.5",
386
- children: x.map((e) => /* @__PURE__ */ k("div", {
386
+ children: S.map((e) => /* @__PURE__ */ A("div", {
387
387
  className: "flex items-center justify-between px-3 py-2 bg-muted/30 rounded-md",
388
- children: [/* @__PURE__ */ O("span", {
388
+ children: [/* @__PURE__ */ k("span", {
389
389
  className: "text-xs text-muted-foreground",
390
390
  children: n(e.snapshotAt)
391
- }), /* @__PURE__ */ k("span", {
391
+ }), /* @__PURE__ */ A("span", {
392
392
  className: "text-sm font-medium text-foreground tabular-nums",
393
393
  children: [
394
394
  r(e.value),
395
- a.unit && /* @__PURE__ */ O("span", {
395
+ a.unit && /* @__PURE__ */ k("span", {
396
396
  className: "text-xs text-muted-foreground ml-1",
397
397
  children: a.unit
398
398
  }),
399
- !e.noLimit && e.limit != null && /* @__PURE__ */ k("span", {
399
+ !e.noLimit && e.limit != null && /* @__PURE__ */ A("span", {
400
400
  className: "text-xs text-muted-foreground ml-1",
401
401
  children: ["/ ", r(e.limit)]
402
402
  })
@@ -405,36 +405,36 @@ var A = ({ status: e, className: n = "size-4" }) => {
405
405
  }, e.id))
406
406
  })]
407
407
  }),
408
- /* @__PURE__ */ k("div", {
408
+ /* @__PURE__ */ A("div", {
409
409
  className: "p-4",
410
410
  children: [
411
- /* @__PURE__ */ O("h3", {
411
+ /* @__PURE__ */ k("h3", {
412
412
  className: "text-sm font-medium text-foreground mb-3",
413
413
  children: "Recent Usage"
414
414
  }),
415
- a.isCollectorBased ? /* @__PURE__ */ O("p", {
415
+ a.isCollectorBased ? /* @__PURE__ */ k("p", {
416
416
  className: "text-sm text-muted-foreground text-center py-6",
417
417
  children: "Usage is tracked via system metrics, individual event records are not available for this quota."
418
- }) : b ? /* @__PURE__ */ O("div", {
418
+ }) : x ? /* @__PURE__ */ k("div", {
419
419
  className: "space-y-2",
420
420
  children: [
421
421
  1,
422
422
  2,
423
423
  3
424
- ].map((e) => /* @__PURE__ */ O("div", { className: "h-12 bg-muted animate-pulse rounded" }, e))
425
- }) : h.length === 0 ? /* @__PURE__ */ O("p", {
424
+ ].map((e) => /* @__PURE__ */ k("div", { className: "h-12 bg-muted animate-pulse rounded" }, e))
425
+ }) : g.length === 0 ? /* @__PURE__ */ k("p", {
426
426
  className: "text-sm text-muted-foreground text-center py-6",
427
427
  children: "No usage records found"
428
- }) : /* @__PURE__ */ O("div", {
428
+ }) : /* @__PURE__ */ k("div", {
429
429
  className: "space-y-2",
430
- children: h.map((e) => /* @__PURE__ */ k("div", {
430
+ children: g.map((e) => /* @__PURE__ */ A("div", {
431
431
  className: "flex items-center justify-between p-3 border border-border rounded-lg",
432
- children: [/* @__PURE__ */ k("div", {
432
+ children: [/* @__PURE__ */ A("div", {
433
433
  className: "flex-1 min-w-0",
434
- children: [/* @__PURE__ */ O("p", {
434
+ children: [/* @__PURE__ */ k("p", {
435
435
  className: "text-sm font-medium text-foreground",
436
436
  children: e.description || "Usage recorded"
437
- }), /* @__PURE__ */ k("p", {
437
+ }), /* @__PURE__ */ A("p", {
438
438
  className: "text-xs text-muted-foreground",
439
439
  children: [
440
440
  i(e.timestamp),
@@ -442,42 +442,42 @@ var A = ({ status: e, className: n = "size-4" }) => {
442
442
  n(e.timestamp)
443
443
  ]
444
444
  })]
445
- }), /* @__PURE__ */ O("span", {
445
+ }), /* @__PURE__ */ k("span", {
446
446
  className: "text-sm font-medium text-foreground ml-4",
447
447
  children: r(e.amount)
448
448
  })]
449
449
  }, e.id))
450
450
  }),
451
- !a.isCollectorBased && (s.length > 1 || g) && /* @__PURE__ */ k("div", {
451
+ !a.isCollectorBased && (s.length > 1 || _) && /* @__PURE__ */ A("div", {
452
452
  className: "flex items-center justify-center gap-2 mt-4",
453
453
  children: [
454
- /* @__PURE__ */ O("button", {
454
+ /* @__PURE__ */ k("button", {
455
455
  type: "button",
456
- onClick: w,
456
+ onClick: T,
457
457
  disabled: s.length === 1,
458
458
  className: "px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50",
459
459
  "aria-label": "Previous usage page",
460
- children: /* @__PURE__ */ O(_, { className: "size-4" })
460
+ children: /* @__PURE__ */ k(v, { className: "size-4" })
461
461
  }),
462
- /* @__PURE__ */ k("span", {
462
+ /* @__PURE__ */ A("span", {
463
463
  className: "text-sm text-muted-foreground",
464
- children: ["Page ", d]
464
+ children: ["Page ", f]
465
465
  }),
466
- /* @__PURE__ */ O("button", {
466
+ /* @__PURE__ */ k("button", {
467
467
  type: "button",
468
- onClick: C,
469
- disabled: !g,
468
+ onClick: w,
469
+ disabled: !_,
470
470
  className: "px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50",
471
471
  "aria-label": "Next usage page",
472
- children: /* @__PURE__ */ O(v, { className: "size-4" })
472
+ children: /* @__PURE__ */ k(y, { className: "size-4" })
473
473
  })
474
474
  ]
475
475
  })
476
476
  ]
477
477
  }),
478
- /* @__PURE__ */ O("div", {
478
+ /* @__PURE__ */ k("div", {
479
479
  className: "sticky bottom-0 bg-background border-t border-border p-4",
480
- children: /* @__PURE__ */ O("button", {
480
+ children: /* @__PURE__ */ k("button", {
481
481
  type: "button",
482
482
  onClick: o,
483
483
  className: "w-full py-2 px-4 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
@@ -487,436 +487,456 @@ var A = ({ status: e, className: n = "size-4" }) => {
487
487
  ]
488
488
  })]
489
489
  });
490
- }, F = () => {
491
- let { t: n } = te(), r = (e, t) => {
490
+ }, I = () => {
491
+ let { t: n } = ee(), r = (e, t) => {
492
492
  let r = n(e);
493
493
  return r === e ? t : r;
494
- }, i = a(), [c, l] = f(() => {
494
+ }, i = a(), [c, l] = p(() => {
495
495
  if (!(typeof window > "u")) return new URLSearchParams(window.location.search).get("billingAccountId") || void 0;
496
- }), [_, v] = f(null), [b, E] = f(""), [j, M] = f("all"), [P, F] = f("active"), ae = ee(b), { billingAccounts: I, isLoading: oe } = o(), se = (I.find((e) => e.isDefault) ?? I[0])?.id, L = c ?? se, { workspaceId: ce } = e(), { dashboard: R, pooledQuotas: z, activeSubscriptions: B, pastSubscriptions: V, isLoading: le, isPastSubscriptionsLoading: H, error: U, refetch: W, loadMorePastSubscriptions: ue, hasMorePastSubscriptions: G, isLoadingMorePast: de, pastSubscriptionsCount: K } = s({
497
- billingAccountId: L,
498
- workspaceId: ce,
499
- searchQuery: ae || void 0,
500
- viewMode: P
501
- }), q = u((e) => j === "all" ? !0 : j === "healthy" ? e.status === "HEALTHY" : j === "warning" ? e.status === "WARNING" : j === "critical" ? e.status === "CRITICAL" || e.status === "EXHAUSTED" : !0, [j]), J = d(() => z.filter(q), [z, q]), Y = d(() => j === "all" ? B : B.map((e) => ({
496
+ }), [v, y] = p(null), [x, M] = p(""), [N, F] = 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, basePath: le } = e(), ue = u((e) => {
497
+ ce(`${le}${e}`);
498
+ }, [ce, le]), { dashboard: B, pooledQuotas: V, activeSubscriptions: H, pastSubscriptions: U, isLoading: de, isPastSubscriptionsLoading: W, error: G, refetch: K, loadMorePastSubscriptions: fe, hasMorePastSubscriptions: pe, isLoadingMorePast: me, pastSubscriptionsCount: he } = s({
499
+ billingAccountId: z,
500
+ workspaceId: se,
501
+ searchQuery: ie || void 0,
502
+ viewMode: I
503
+ }), q = u((e) => N === "all" ? !0 : N === "healthy" ? e.status === "HEALTHY" : N === "warning" ? e.status === "WARNING" : N === "critical" ? e.status === "CRITICAL" || e.status === "EXHAUSTED" : !0, [N]), J = f(() => V.filter(q), [V, q]), Y = f(() => N === "all" ? H : H.map((e) => ({
502
504
  ...e,
503
505
  aggregatedQuotas: e.aggregatedQuotas.filter(q)
504
506
  })).filter((e) => e.aggregatedQuotas.length > 0), [
505
- B,
506
- j,
507
+ H,
508
+ N,
507
509
  q
508
- ]), X = d(() => j === "all" ? V : V.map((e) => ({
510
+ ]), X = f(() => N === "all" ? U : U.map((e) => ({
509
511
  ...e,
510
512
  aggregatedQuotas: e.aggregatedQuotas.filter(q)
511
513
  })).filter((e) => e.aggregatedQuotas.length > 0), [
512
- V,
513
- j,
514
+ U,
515
+ N,
514
516
  q
515
- ]), Z = d(() => P === "active" ? {
517
+ ]), Z = f(() => I === "active" ? {
516
518
  active: Y,
517
519
  past: []
518
- } : P === "past" ? {
520
+ } : I === "past" ? {
519
521
  active: [],
520
522
  past: X
521
523
  } : {
522
524
  active: Y,
523
525
  past: X
524
526
  }, [
525
- P,
527
+ I,
526
528
  Y,
527
529
  X
528
- ]), Q = b !== "" || j !== "all", fe = ae !== b, pe = () => {
529
- E(""), M("all");
530
+ ]), Q = x !== "" || N !== "all", ge = ie !== x, _e = () => {
531
+ M(""), F("all");
530
532
  }, $ = (e) => {
531
- M((t) => t === e ? "all" : e);
533
+ F((t) => t === e ? "all" : e);
532
534
  };
533
- if (!i.canViewUsage) return /* @__PURE__ */ O("div", {
535
+ if (!i.canViewUsage) return /* @__PURE__ */ k("div", {
534
536
  className: "flex items-center justify-center h-full min-h-[400px]",
535
- children: /* @__PURE__ */ k("div", {
537
+ children: /* @__PURE__ */ A("div", {
536
538
  className: "text-center space-y-2",
537
539
  children: [
538
- /* @__PURE__ */ O("div", {
540
+ /* @__PURE__ */ k("div", {
539
541
  className: "size-12 mx-auto rounded-full bg-muted flex items-center justify-center",
540
- children: /* @__PURE__ */ O(m, { className: "size-6 text-muted-foreground" })
542
+ children: /* @__PURE__ */ k(h, { className: "size-6 text-muted-foreground" })
541
543
  }),
542
- /* @__PURE__ */ O("h2", {
544
+ /* @__PURE__ */ k("h2", {
543
545
  className: "text-lg font-semibold text-foreground",
544
546
  children: "Access Denied"
545
547
  }),
546
- /* @__PURE__ */ O("p", {
548
+ /* @__PURE__ */ k("p", {
547
549
  className: "text-sm text-muted-foreground max-w-sm",
548
550
  children: "You don't have permission to view usage data."
549
551
  })
550
552
  ]
551
553
  })
552
554
  });
553
- if ((oe || le) && !R) return /* @__PURE__ */ k("div", {
555
+ if ((ae || de) && !B) return /* @__PURE__ */ A("div", {
554
556
  className: "space-y-6 p-6",
555
557
  children: [
556
- /* @__PURE__ */ O("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }),
557
- /* @__PURE__ */ O("div", {
558
+ /* @__PURE__ */ k("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }),
559
+ /* @__PURE__ */ k("div", {
558
560
  className: "grid grid-cols-2 sm:grid-cols-4 gap-4",
559
561
  children: [
560
562
  1,
561
563
  2,
562
564
  3,
563
565
  4
564
- ].map((e) => /* @__PURE__ */ O("div", { className: "h-24 bg-muted animate-pulse rounded-lg" }, e))
566
+ ].map((e) => /* @__PURE__ */ k("div", { className: "h-24 bg-muted animate-pulse rounded-lg" }, e))
565
567
  }),
566
- /* @__PURE__ */ O("div", { className: "h-64 bg-muted animate-pulse rounded-lg" })
568
+ /* @__PURE__ */ k("div", { className: "h-64 bg-muted animate-pulse rounded-lg" })
567
569
  ]
568
570
  });
569
- if (U) return /* @__PURE__ */ O("div", {
571
+ if (G) return /* @__PURE__ */ k("div", {
570
572
  className: "flex items-center justify-center h-full min-h-[400px]",
571
- children: /* @__PURE__ */ k("div", {
573
+ children: /* @__PURE__ */ A("div", {
572
574
  className: "text-center space-y-4",
573
575
  children: [
574
- /* @__PURE__ */ O("div", {
576
+ /* @__PURE__ */ k("div", {
575
577
  className: "size-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
576
- children: /* @__PURE__ */ O(m, { className: "size-6 text-destructive" })
578
+ children: /* @__PURE__ */ k(h, { className: "size-6 text-destructive" })
577
579
  }),
578
- /* @__PURE__ */ O("h2", {
580
+ /* @__PURE__ */ k("h2", {
579
581
  className: "text-lg font-semibold text-foreground",
580
582
  children: "Failed to load usage data"
581
583
  }),
582
- /* @__PURE__ */ O("p", {
584
+ /* @__PURE__ */ k("p", {
583
585
  className: "text-sm text-muted-foreground",
584
- children: U.message
586
+ children: G.message
585
587
  }),
586
- /* @__PURE__ */ O("button", {
588
+ /* @__PURE__ */ k("button", {
587
589
  type: "button",
588
- onClick: () => W(),
590
+ onClick: () => K(),
589
591
  className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
590
592
  children: "Try Again"
591
593
  })
592
594
  ]
593
595
  })
594
596
  });
595
- let me = I.find((e) => e.id === L);
596
- return /* @__PURE__ */ k("div", {
597
+ let ve = R.find((e) => e.id === z);
598
+ return /* @__PURE__ */ A("div", {
597
599
  className: "space-y-6 p-6",
598
600
  children: [
599
- /* @__PURE__ */ k("div", {
601
+ /* @__PURE__ */ A("div", {
600
602
  className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
601
- children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("h1", {
603
+ children: [/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("h1", {
602
604
  className: "text-2xl font-bold text-foreground",
603
605
  children: r("billing.usage.title", "Usage")
604
- }), /* @__PURE__ */ O("p", {
606
+ }), /* @__PURE__ */ k("p", {
605
607
  className: "text-sm text-muted-foreground mt-1",
606
608
  children: "Monitor your resource consumption and quota usage"
607
- })] }), /* @__PURE__ */ k("div", {
609
+ })] }), /* @__PURE__ */ A("div", {
608
610
  className: "flex items-center gap-3",
609
- children: [I.length > 1 && /* @__PURE__ */ O("select", {
610
- value: L || "",
611
+ children: [R.length > 1 && /* @__PURE__ */ k("select", {
612
+ value: z || "",
611
613
  onChange: (e) => l(e.target.value),
612
614
  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]",
613
- children: I.map((e) => /* @__PURE__ */ O("option", {
615
+ children: R.map((e) => /* @__PURE__ */ k("option", {
614
616
  value: e.id,
615
617
  children: e.name
616
618
  }, e.id))
617
- }), /* @__PURE__ */ O("button", {
619
+ }), /* @__PURE__ */ k("button", {
618
620
  type: "button",
619
- onClick: () => W(),
621
+ onClick: () => K(),
620
622
  className: "p-2 border border-border rounded-md hover:bg-muted/50 transition-colors",
621
623
  title: "Refresh",
622
- children: /* @__PURE__ */ O(C, { className: "size-4" })
624
+ children: /* @__PURE__ */ k(w, { className: "size-4" })
623
625
  })]
624
626
  })]
625
627
  }),
626
- /* @__PURE__ */ k("div", {
628
+ /* @__PURE__ */ A("div", {
627
629
  className: "flex flex-col gap-3 sm:flex-row sm:items-center",
628
630
  children: [
629
- /* @__PURE__ */ k("div", {
631
+ /* @__PURE__ */ A("div", {
630
632
  className: "relative flex-1 max-w-md",
631
633
  children: [
632
- /* @__PURE__ */ O(w, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }),
633
- /* @__PURE__ */ O("input", {
634
+ /* @__PURE__ */ k(T, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }),
635
+ /* @__PURE__ */ k("input", {
634
636
  type: "text",
635
- value: b,
636
- onChange: (e) => E(e.target.value),
637
- placeholder: `Search ${P === "past" ? "past" : P === "all" ? "all" : "active"} quotas...`,
637
+ value: x,
638
+ onChange: (e) => M(e.target.value),
639
+ placeholder: `Search ${I === "past" ? "past" : I === "all" ? "all" : "active"} quotas...`,
638
640
  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"
639
641
  }),
640
- (b || fe) && /* @__PURE__ */ O("button", {
642
+ (x || ge) && /* @__PURE__ */ k("button", {
641
643
  type: "button",
642
- onClick: () => E(""),
644
+ onClick: () => M(""),
643
645
  className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted/50",
644
- children: fe ? /* @__PURE__ */ O(C, { className: "size-3 text-muted-foreground animate-spin" }) : /* @__PURE__ */ O(T, { className: "size-3 text-muted-foreground" })
646
+ children: ge ? /* @__PURE__ */ k(w, { className: "size-3 text-muted-foreground animate-spin" }) : /* @__PURE__ */ k(E, { className: "size-3 text-muted-foreground" })
645
647
  })
646
648
  ]
647
649
  }),
648
- /* @__PURE__ */ k("div", {
650
+ /* @__PURE__ */ A("div", {
649
651
  className: "flex items-center bg-muted/50 rounded-lg p-1 border border-border",
650
- children: [/* @__PURE__ */ k("button", {
652
+ children: [/* @__PURE__ */ A("button", {
651
653
  type: "button",
652
- onClick: () => F("active"),
653
- 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"}`,
654
- children: [/* @__PURE__ */ O(S, { className: "size-3.5" }), "Active"]
655
- }), /* @__PURE__ */ k("button", {
654
+ onClick: () => L("active"),
655
+ 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"}`,
656
+ children: [/* @__PURE__ */ k(C, { className: "size-3.5" }), "Active"]
657
+ }), /* @__PURE__ */ A("button", {
656
658
  type: "button",
657
- onClick: () => F("past"),
658
- disabled: H && P !== "past",
659
- 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" : ""}`,
660
- children: [H && P === "past" ? /* @__PURE__ */ O(C, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ O(y, { className: "size-3.5" }), "Past"]
659
+ onClick: () => L("past"),
660
+ disabled: W && I !== "past",
661
+ 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" : ""}`,
662
+ children: [W && I === "past" ? /* @__PURE__ */ k(w, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ k(b, { className: "size-3.5" }), "Past"]
661
663
  })]
662
664
  }),
663
- Q && /* @__PURE__ */ k("button", {
665
+ Q && /* @__PURE__ */ A("button", {
664
666
  type: "button",
665
- onClick: pe,
667
+ onClick: _e,
666
668
  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",
667
- children: [/* @__PURE__ */ O(T, { className: "size-3" }), "Clear filters"]
669
+ children: [/* @__PURE__ */ k(E, { className: "size-3" }), "Clear filters"]
668
670
  })
669
671
  ]
670
672
  }),
671
- me && /* @__PURE__ */ k("div", {
673
+ ve && /* @__PURE__ */ A("div", {
672
674
  className: "text-sm text-muted-foreground",
673
675
  children: [
674
676
  "Viewing usage for",
675
677
  " ",
676
- /* @__PURE__ */ O("span", {
678
+ /* @__PURE__ */ k("span", {
677
679
  className: "font-medium text-foreground",
678
- children: me.name
680
+ children: ve.name
679
681
  })
680
682
  ]
681
683
  }),
682
- R && /* @__PURE__ */ k("div", {
684
+ B && /* @__PURE__ */ A("div", {
683
685
  className: "grid grid-cols-2 sm:grid-cols-4 gap-4",
684
686
  children: [
685
- /* @__PURE__ */ O(N, {
687
+ /* @__PURE__ */ k(P, {
686
688
  label: "Total Quotas",
687
- value: R.totalQuotas,
688
- icon: /* @__PURE__ */ O(x, { className: "size-5" }),
689
+ value: B.totalQuotas,
690
+ icon: /* @__PURE__ */ k(S, { className: "size-5" }),
689
691
  color: "blue",
690
- isActive: j === "all",
691
- onClick: () => M("all")
692
+ isActive: N === "all",
693
+ onClick: () => F("all")
692
694
  }),
693
- /* @__PURE__ */ O(N, {
695
+ /* @__PURE__ */ k(P, {
694
696
  label: "Healthy",
695
- value: R.healthyQuotas,
696
- icon: /* @__PURE__ */ O(h, { className: "size-5" }),
697
+ value: B.healthyQuotas,
698
+ icon: /* @__PURE__ */ k(g, { className: "size-5" }),
697
699
  color: "emerald",
698
- isActive: j === "healthy",
700
+ isActive: N === "healthy",
699
701
  onClick: () => $("healthy")
700
702
  }),
701
- /* @__PURE__ */ O(N, {
703
+ /* @__PURE__ */ k(P, {
702
704
  label: "Warning",
703
- value: R.warningQuotas,
704
- icon: /* @__PURE__ */ O(p, { className: "size-5" }),
705
+ value: B.warningQuotas,
706
+ icon: /* @__PURE__ */ k(m, { className: "size-5" }),
705
707
  color: "amber",
706
- isActive: j === "warning",
708
+ isActive: N === "warning",
707
709
  onClick: () => $("warning")
708
710
  }),
709
- /* @__PURE__ */ O(N, {
711
+ /* @__PURE__ */ k(P, {
710
712
  label: "Critical / Exhausted",
711
- value: R.criticalQuotas + R.exhaustedQuotas,
712
- icon: /* @__PURE__ */ O(m, { className: "size-5" }),
713
+ value: B.criticalQuotas + B.exhaustedQuotas,
714
+ icon: /* @__PURE__ */ k(h, { className: "size-5" }),
713
715
  color: "red",
714
- isActive: j === "critical",
716
+ isActive: N === "critical",
715
717
  onClick: () => $("critical")
716
718
  })
717
719
  ]
718
720
  }),
719
- (Q || P !== "active") && /* @__PURE__ */ k("div", {
721
+ B && (B.warningQuotas > 0 || B.criticalQuotas > 0 || B.exhaustedQuotas > 0) && /* @__PURE__ */ A("div", {
722
+ 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}`}`,
723
+ children: [/* @__PURE__ */ A("div", {
724
+ className: "flex items-center gap-3",
725
+ 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", {
726
+ className: `text-sm font-medium ${B.criticalQuotas > 0 || B.exhaustedQuotas > 0 ? t.error.text : t.warning.text}`,
727
+ 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`
728
+ }), /* @__PURE__ */ k("p", {
729
+ className: "text-xs text-muted-foreground mt-0.5",
730
+ children: "Contact support to request a quota increase for your plan."
731
+ })] })]
732
+ }), /* @__PURE__ */ k("button", {
733
+ type: "button",
734
+ onClick: () => ue("/support/tickets"),
735
+ 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"}`,
736
+ children: "Request more quota"
737
+ })]
738
+ }),
739
+ (Q || I !== "active") && /* @__PURE__ */ A("div", {
720
740
  className: "flex items-center gap-2 text-sm text-muted-foreground flex-wrap",
721
741
  children: [
722
- /* @__PURE__ */ k("span", { children: [
742
+ /* @__PURE__ */ A("span", { children: [
723
743
  "Showing",
724
744
  " ",
725
- Z.active.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + Z.past.reduce((e, t) => e + t.aggregatedQuotas.length, 0) + (P === "past" ? 0 : J.length),
745
+ 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),
726
746
  " ",
727
747
  "quotas"
728
748
  ] }),
729
- /* @__PURE__ */ k("span", {
749
+ /* @__PURE__ */ A("span", {
730
750
  className: "px-2 py-0.5 bg-primary/10 text-primary rounded text-xs capitalize",
731
- children: [P === "active" ? "Active" : P === "past" ? "Past" : "All", " subscriptions"]
751
+ children: [I === "active" ? "Active" : I === "past" ? "Past" : "All", " subscriptions"]
732
752
  }),
733
- j !== "all" && /* @__PURE__ */ O("span", {
753
+ N !== "all" && /* @__PURE__ */ k("span", {
734
754
  className: "px-2 py-0.5 bg-muted rounded text-xs capitalize",
735
- children: j === "critical" ? "Critical / Exhausted" : j
755
+ children: N === "critical" ? "Critical / Exhausted" : N
736
756
  }),
737
- b && /* @__PURE__ */ k("span", {
757
+ x && /* @__PURE__ */ A("span", {
738
758
  className: "px-2 py-0.5 bg-muted rounded text-xs",
739
759
  children: [
740
760
  "“",
741
- b,
761
+ x,
742
762
  "”"
743
763
  ]
744
764
  })
745
765
  ]
746
766
  }),
747
- Z.active.length > 0 && /* @__PURE__ */ k("section", { children: [/* @__PURE__ */ k("h2", {
767
+ Z.active.length > 0 && /* @__PURE__ */ A("section", { children: [/* @__PURE__ */ A("h2", {
748
768
  className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
749
- children: [/* @__PURE__ */ O(S, { className: "size-5 text-primary" }), P === "all" ? "Active Subscription Quotas" : "Subscription Quotas"]
750
- }), /* @__PURE__ */ O("div", {
769
+ children: [/* @__PURE__ */ k(C, { className: "size-5 text-primary" }), I === "all" ? "Active Subscription Quotas" : "Subscription Quotas"]
770
+ }), /* @__PURE__ */ k("div", {
751
771
  className: "space-y-4",
752
- children: Z.active.map((e) => /* @__PURE__ */ O(re, {
772
+ children: Z.active.map((e) => /* @__PURE__ */ k(ne, {
753
773
  subscription: e,
754
- onQuotaClick: v,
774
+ onQuotaClick: y,
755
775
  defaultExpanded: !0
756
776
  }, e.id))
757
777
  })] }),
758
- Z.past.length > 0 && /* @__PURE__ */ k("section", { children: [/* @__PURE__ */ k("h2", {
778
+ Z.past.length > 0 && /* @__PURE__ */ A("section", { children: [/* @__PURE__ */ A("h2", {
759
779
  className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
760
780
  children: [
761
- /* @__PURE__ */ O(y, { className: "size-5 text-muted-foreground" }),
781
+ /* @__PURE__ */ k(b, { className: "size-5 text-muted-foreground" }),
762
782
  "Past Subscription Quotas",
763
- /* @__PURE__ */ O("span", {
783
+ /* @__PURE__ */ k("span", {
764
784
  className: "text-xs font-normal text-muted-foreground",
765
785
  children: "(Canceled / Expired / Upgraded)"
766
786
  }),
767
- K > 0 && /* @__PURE__ */ k("span", {
787
+ he > 0 && /* @__PURE__ */ A("span", {
768
788
  className: "text-xs font-normal px-2 py-0.5 bg-muted rounded-full",
769
789
  children: [
770
790
  Z.past.length,
771
- G ? "+" : "",
791
+ pe ? "+" : "",
772
792
  " of ",
773
- K
793
+ he
774
794
  ]
775
795
  })
776
796
  ]
777
- }), /* @__PURE__ */ k("div", {
797
+ }), /* @__PURE__ */ A("div", {
778
798
  className: "space-y-4",
779
- children: [Z.past.map((e) => /* @__PURE__ */ O(re, {
799
+ children: [Z.past.map((e) => /* @__PURE__ */ k(ne, {
780
800
  subscription: e,
781
- onQuotaClick: v,
782
- defaultExpanded: P === "past"
783
- }, e.id)), G && /* @__PURE__ */ O("div", {
801
+ onQuotaClick: y,
802
+ defaultExpanded: I === "past"
803
+ }, e.id)), pe && /* @__PURE__ */ k("div", {
784
804
  className: "flex justify-center pt-2",
785
- children: /* @__PURE__ */ O("button", {
805
+ children: /* @__PURE__ */ k("button", {
786
806
  type: "button",
787
- onClick: ue,
788
- disabled: de,
807
+ onClick: fe,
808
+ disabled: me,
789
809
  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",
790
- 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"] })
810
+ children: me ? /* @__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"] })
791
811
  })
792
812
  })]
793
813
  })] }),
794
- P !== "past" && J.length > 0 && /* @__PURE__ */ k("section", { children: [/* @__PURE__ */ k("h2", {
814
+ I !== "past" && J.length > 0 && /* @__PURE__ */ A("section", { children: [/* @__PURE__ */ A("h2", {
795
815
  className: "text-lg font-semibold text-foreground mb-4 flex items-center gap-2",
796
816
  children: [
797
- /* @__PURE__ */ O(x, { className: `size-5 ${t.info.icon}` }),
817
+ /* @__PURE__ */ k(S, { className: `size-5 ${t.info.icon}` }),
798
818
  "Pooled Quotas",
799
- /* @__PURE__ */ O("span", {
819
+ /* @__PURE__ */ k("span", {
800
820
  className: "text-xs font-normal text-muted-foreground",
801
821
  children: "(Shared across all products)"
802
822
  })
803
823
  ]
804
- }), /* @__PURE__ */ O(ne, {
824
+ }), /* @__PURE__ */ k(te, {
805
825
  quotas: J,
806
826
  showPlanColumn: !1,
807
- onQuotaClick: v
827
+ onQuotaClick: y
808
828
  })] }),
809
- P === "active" && B.length === 0 && z.length === 0 && !Q && /* @__PURE__ */ k("div", {
829
+ I === "active" && H.length === 0 && V.length === 0 && !Q && /* @__PURE__ */ A("div", {
810
830
  className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
811
831
  children: [
812
- /* @__PURE__ */ O("div", {
832
+ /* @__PURE__ */ k("div", {
813
833
  className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
814
- children: /* @__PURE__ */ O(x, { className: "size-6 text-muted-foreground" })
834
+ children: /* @__PURE__ */ k(S, { className: "size-6 text-muted-foreground" })
815
835
  }),
816
- /* @__PURE__ */ O("h3", {
836
+ /* @__PURE__ */ k("h3", {
817
837
  className: "text-lg font-medium text-foreground",
818
838
  children: "No active quotas found"
819
839
  }),
820
- /* @__PURE__ */ O("p", {
840
+ /* @__PURE__ */ k("p", {
821
841
  className: "text-sm text-muted-foreground mt-1 text-center max-w-sm",
822
842
  children: "Quotas will appear here once you have active subscriptions or pooled allocations."
823
843
  })
824
844
  ]
825
845
  }),
826
- P === "past" && V.length === 0 && !Q && !H && /* @__PURE__ */ k("div", {
846
+ I === "past" && U.length === 0 && !Q && !W && /* @__PURE__ */ A("div", {
827
847
  className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
828
848
  children: [
829
- /* @__PURE__ */ O("div", {
849
+ /* @__PURE__ */ k("div", {
830
850
  className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
831
- children: /* @__PURE__ */ O(y, { className: "size-6 text-muted-foreground" })
851
+ children: /* @__PURE__ */ k(b, { className: "size-6 text-muted-foreground" })
832
852
  }),
833
- /* @__PURE__ */ O("h3", {
853
+ /* @__PURE__ */ k("h3", {
834
854
  className: "text-lg font-medium text-foreground",
835
855
  children: "No past subscriptions"
836
856
  }),
837
- /* @__PURE__ */ O("p", {
857
+ /* @__PURE__ */ k("p", {
838
858
  className: "text-sm text-muted-foreground mt-1 text-center max-w-sm",
839
859
  children: "You don't have any canceled, expired, or upgraded subscriptions yet."
840
860
  }),
841
- /* @__PURE__ */ O("button", {
861
+ /* @__PURE__ */ k("button", {
842
862
  type: "button",
843
- onClick: () => F("active"),
863
+ onClick: () => L("active"),
844
864
  className: "mt-4 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
845
865
  children: "View active subscriptions"
846
866
  })
847
867
  ]
848
868
  }),
849
- P === "past" && H && /* @__PURE__ */ O("div", {
869
+ I === "past" && W && /* @__PURE__ */ k("div", {
850
870
  className: "space-y-4",
851
871
  children: [
852
872
  1,
853
873
  2,
854
874
  3
855
- ].map((e) => /* @__PURE__ */ O("div", { className: "h-24 bg-muted animate-pulse rounded-lg" }, e))
875
+ ].map((e) => /* @__PURE__ */ k("div", { className: "h-24 bg-muted animate-pulse rounded-lg" }, e))
856
876
  }),
857
- Q && Z.active.length === 0 && Z.past.length === 0 && (P === "past" || J.length === 0) && /* @__PURE__ */ k("div", {
877
+ Q && Z.active.length === 0 && Z.past.length === 0 && (I === "past" || J.length === 0) && /* @__PURE__ */ A("div", {
858
878
  className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
859
879
  children: [
860
- /* @__PURE__ */ O("div", {
880
+ /* @__PURE__ */ k("div", {
861
881
  className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
862
- children: j !== "all" && !b ? /* @__PURE__ */ O(A, {
863
- status: j === "healthy" ? "HEALTHY" : j === "warning" ? "WARNING" : "CRITICAL",
882
+ children: N !== "all" && !x ? /* @__PURE__ */ k(j, {
883
+ status: N === "healthy" ? "HEALTHY" : N === "warning" ? "WARNING" : "CRITICAL",
864
884
  className: "size-6"
865
- }) : /* @__PURE__ */ O(w, { className: "size-6 text-muted-foreground" })
885
+ }) : /* @__PURE__ */ k(T, { className: "size-6 text-muted-foreground" })
866
886
  }),
867
- /* @__PURE__ */ O("h3", {
887
+ /* @__PURE__ */ k("h3", {
868
888
  className: "text-lg font-medium text-foreground",
869
- children: j !== "all" && !b ? `No ${j === "critical" ? "critical or exhausted" : j} quotas` : "No matching quotas"
889
+ children: N !== "all" && !x ? `No ${N === "critical" ? "critical or exhausted" : N} quotas` : "No matching quotas"
870
890
  }),
871
- /* @__PURE__ */ O("p", {
891
+ /* @__PURE__ */ k("p", {
872
892
  className: "text-sm text-muted-foreground mt-1 text-center max-w-sm",
873
- children: j !== "all" && !b ? /* @__PURE__ */ k(D, { children: ["All your quotas are in a different status.", R && /* @__PURE__ */ k("span", {
893
+ children: N !== "all" && !x ? /* @__PURE__ */ A(O, { children: ["All your quotas are in a different status.", B && /* @__PURE__ */ A("span", {
874
894
  className: "block mt-1",
875
895
  children: [
876
896
  "You have ",
877
- R.healthyQuotas,
897
+ B.healthyQuotas,
878
898
  " healthy, ",
879
- R.warningQuotas,
899
+ B.warningQuotas,
880
900
  " warning, and ",
881
- R.criticalQuotas + R.exhaustedQuotas,
901
+ B.criticalQuotas + B.exhaustedQuotas,
882
902
  " critical quotas."
883
903
  ]
884
- })] }) : /* @__PURE__ */ k(D, { children: [
904
+ })] }) : /* @__PURE__ */ A(O, { children: [
885
905
  "No quotas match your current search or filter criteria in",
886
906
  " ",
887
- P === "past" ? "past" : P === "all" ? "any" : "active",
907
+ I === "past" ? "past" : I === "all" ? "any" : "active",
888
908
  " ",
889
909
  "subscriptions.",
890
- P === "active" && !j.includes("all") && /* @__PURE__ */ O("span", {
910
+ I === "active" && !N.includes("all") && /* @__PURE__ */ k("span", {
891
911
  className: "block mt-1",
892
912
  children: "Try switching to “Past” or “All” to search across more subscriptions."
893
913
  })
894
914
  ] })
895
915
  }),
896
- /* @__PURE__ */ k("div", {
916
+ /* @__PURE__ */ A("div", {
897
917
  className: "flex gap-2 mt-4",
898
- children: [/* @__PURE__ */ O("button", {
918
+ children: [/* @__PURE__ */ k("button", {
899
919
  type: "button",
900
- onClick: pe,
920
+ onClick: _e,
901
921
  className: "px-4 py-2 text-sm font-medium border border-border rounded-md hover:bg-muted/50 transition-colors",
902
- children: j === "all" ? "Clear filters" : "Show all quotas"
903
- }), P === "active" && b && /* @__PURE__ */ O("button", {
922
+ children: N === "all" ? "Clear filters" : "Show all quotas"
923
+ }), I === "active" && x && /* @__PURE__ */ k("button", {
904
924
  type: "button",
905
- onClick: () => F("all"),
925
+ onClick: () => L("all"),
906
926
  className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
907
927
  children: "Search all"
908
928
  })]
909
929
  })
910
930
  ]
911
931
  }),
912
- _ && /* @__PURE__ */ O(ie, {
913
- quota: _,
914
- onClose: () => v(null)
932
+ v && /* @__PURE__ */ k(re, {
933
+ quota: v,
934
+ onClose: () => y(null)
915
935
  })
916
936
  ]
917
937
  });
918
938
  };
919
939
  //#endregion
920
- export { F as UsagePage };
940
+ export { I as UsagePage };
921
941
 
922
942
  //# sourceMappingURL=UsagePage.js.map