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