@burdenoff/microfe-billing 2026.601.6 → 2026.604.2

package/dist/billing/modules/subscriptions/pages/SubscriptionDetailPage.js

@@ -3,59 +3,60 @@ import { useBillingEventEmitter as t } from "../../../hooks/useBillingEventEmitt
 import { useBillingAccountSelection as n } from "../../../hooks/useBillingAccountSelection.js";
 import { PricingModel as r } from "../../../shared/types/graphql.js";
 import { formatCurrency as i, formatDate as a, formatPercentage as o, formatPlanDuration as s, formatSubscriptionStatus as ee } from "../../../shared/utils/format.js";
-import { getQuotaProgressColor as c, getStatusBadgeClasses as l, getSubscriptionStatusColor as u } from "../../../shared/utils/status.js";
-import { useBillingPermissions as te } from "../../../hooks/useBillingPermissions.js";
-import { useGetDefaultBillingAccountDashboardQuery as d } from "../../../../generated/global-operations.js";
-import { useBillingNavigate as f } from "../../../hooks/useBillingNavigate.js";
-import { withBillingAccountId as p } from "../../../shared/utils/navigation.js";
-import { useSubscription as m, useSubscriptionMutations as h } from "../hooks/useSubscriptions.js";
+import { getQuotaProgressColor as c, getStatusBadgeClasses as te, getSubscriptionStatusColor as ne } from "../../../shared/utils/status.js";
+import { useBillingPermissions as l } from "../../../hooks/useBillingPermissions.js";
+import { useGetDefaultBillingAccountDashboardQuery as u } from "../../../../generated/global-operations.js";
+import { useBillingNavigate as re } from "../../../hooks/useBillingNavigate.js";
+import { withBillingAccountId as d } from "../../../shared/utils/navigation.js";
+import { WorkspaceQuotaAssignmentModal as ie } from "../../checkout/components/WorkspaceQuotaAssignmentModal.js";
+import { useSubscription as f, useSubscriptionMutations as p } from "../hooks/useSubscriptions.js";
 import "../hooks/index.js";
-import { ManageSeatsModal as g } from "../components/ManageSeatsModal.js";
-import { useState as _ } from "react";
-import { useParams as ne } from "react-router-dom";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import { useI18n as b } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { ManageSeatsModal as m } from "../components/ManageSeatsModal.js";
+import { useState as h } from "react";
+import { useParams as g } from "react-router-dom";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useI18n as ae } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/billing/modules/subscriptions/pages/SubscriptionDetailPage.tsx
-var x = () => {
-	let { t: o } = b(), c = (e, t) => {
+var y = () => {
+	let { t: o } = ae(), c = (e, t) => {
 		let n = o(e);
 		return n === e ? t : n;
-	}, { subscriptionId: x } = ne(), E = f(), { emit: re } = t(), { orgId: ie } = e(), D = te(), { selectedAccountId: ae } = n({
-		orgId: ie,
+	}, { subscriptionId: y } = g(), w = re(), { emit: oe } = t(), { orgId: se } = e(), T = l(), { selectedAccountId: ce } = n({
+		orgId: se,
 		syncFromUrl: !0,
 		urlParamName: "billingAccountId"
-	}), { data: oe } = d({ fetchPolicy: "cache-first" }), O = ae ?? oe?.getDefaultBillingAccount?.id ?? void 0, { subscription: k, isLoading: se, error: A, refetch: j } = m(x, O), { cancelSubscription: M, isCanceling: N, updateSubscriptionSeats: P, isUpdatingSeats: F } = h(), [I, L] = _(!1), [R, z] = _(!1), [B, V] = _(""), [H, U] = _(null), W = async () => {
-		if (k) {
-			U(null);
+	}), { data: le } = u({ fetchPolicy: "cache-first" }), E = ce ?? le?.getDefaultBillingAccount?.id ?? void 0, { subscription: D, isLoading: ue, error: O, refetch: k } = f(y, E), { cancelSubscription: A, isCanceling: j, updateSubscriptionSeats: M, isUpdatingSeats: N } = p(), { workspaceId: P } = e(), [F, I] = h(!1), [L, R] = h(!1), [z, B] = h(!1), [V, H] = h(""), [U, W] = h(null), de = async () => {
+		if (D) {
+			W(null);
 			try {
-				await M({
-					billingAccountId: O ?? k.billingAccountId,
-					subscriptionId: k.id,
-					reason: B || "User requested cancellation"
-				}), re("billing.subscription.cancelled", {
+				await A({
+					billingAccountId: E ?? D.billingAccountId,
+					subscriptionId: D.id,
+					reason: V || "User requested cancellation"
+				}), oe("billing.subscription.cancelled", {
 					route: "/billing/subscriptions",
-					entityId: k.id,
+					entityId: D.id,
 					source: "subscription-detail",
-					reason: B || "User requested cancellation"
-				}), L(!1), V(""), await j();
+					reason: V || "User requested cancellation"
+				}), I(!1), H(""), await k();
 			} catch (e) {
-				U(e instanceof Error ? e.message : "Failed to cancel subscription");
+				W(e instanceof Error ? e.message : "Failed to cancel subscription");
 			}
 		}
 	};
-	if (!D.canViewSubscriptions) return /* @__PURE__ */ v("div", {
+	if (!T.canViewSubscriptions) return /* @__PURE__ */ _("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ y("div", {
+		children: /* @__PURE__ */ v("div", {
 			className: "text-center space-y-2",
 			children: [
-				/* @__PURE__ */ v("div", {
+				/* @__PURE__ */ _("div", {
 					className: "size-12 mx-auto rounded-full bg-muted flex items-center justify-center",
-					children: /* @__PURE__ */ v("svg", {
+					children: /* @__PURE__ */ _("svg", {
 						className: "size-6 text-muted-foreground",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ v("path", {
+						children: /* @__PURE__ */ _("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
@@ -63,46 +64,46 @@ var x = () => {
 						})
 					})
 				}),
-				/* @__PURE__ */ v("h2", {
+				/* @__PURE__ */ _("h2", {
 					className: "text-lg font-semibold text-foreground",
 					children: "Access Denied"
 				}),
-				/* @__PURE__ */ v("p", {
+				/* @__PURE__ */ _("p", {
 					className: "text-sm text-muted-foreground max-w-sm",
 					children: "You don't have permission to view this subscription."
 				})
 			]
 		})
 	});
-	if (se) return /* @__PURE__ */ y("div", {
+	if (ue) return /* @__PURE__ */ v("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ y("div", {
+		children: [/* @__PURE__ */ v("div", {
 			className: "flex items-center gap-4",
-			children: [/* @__PURE__ */ v("div", { className: "size-10 bg-muted animate-pulse rounded" }), /* @__PURE__ */ v("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" })]
-		}), /* @__PURE__ */ v("div", {
+			children: [/* @__PURE__ */ _("div", { className: "size-10 bg-muted animate-pulse rounded" }), /* @__PURE__ */ _("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" })]
+		}), /* @__PURE__ */ _("div", {
 			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-			children: /* @__PURE__ */ v("div", {
+			children: /* @__PURE__ */ _("div", {
 				className: "lg:col-span-2 space-y-6",
-				children: /* @__PURE__ */ y("div", {
+				children: /* @__PURE__ */ v("div", {
 					className: "border border-border rounded-lg p-6 space-y-4",
-					children: [/* @__PURE__ */ v("div", { className: "h-6 w-32 bg-muted animate-pulse rounded" }), /* @__PURE__ */ v("div", { className: "h-4 w-full bg-muted animate-pulse rounded" })]
+					children: [/* @__PURE__ */ _("div", { className: "h-6 w-32 bg-muted animate-pulse rounded" }), /* @__PURE__ */ _("div", { className: "h-4 w-full bg-muted animate-pulse rounded" })]
 				})
 			})
 		})]
 	});
-	if (A || !k) return /* @__PURE__ */ v("div", {
+	if (O || !D) return /* @__PURE__ */ _("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ y("div", {
+		children: /* @__PURE__ */ v("div", {
 			className: "text-center space-y-4",
 			children: [
-				/* @__PURE__ */ v("div", {
+				/* @__PURE__ */ _("div", {
 					className: "size-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
-					children: /* @__PURE__ */ v("svg", {
+					children: /* @__PURE__ */ _("svg", {
 						className: "size-6 text-destructive",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ v("path", {
+						children: /* @__PURE__ */ _("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
@@ -110,124 +111,124 @@ var x = () => {
 						})
 					})
 				}),
-				/* @__PURE__ */ v("h2", {
+				/* @__PURE__ */ _("h2", {
 					className: "text-lg font-semibold text-foreground",
 					children: c("billing.subscriptions.notFound", "Subscription not found")
 				}),
-				/* @__PURE__ */ v("p", {
+				/* @__PURE__ */ _("p", {
 					className: "text-sm text-muted-foreground",
-					children: A?.message || "The subscription you are looking for does not exist."
+					children: O?.message || "The subscription you are looking for does not exist."
 				}),
-				/* @__PURE__ */ v("button", {
+				/* @__PURE__ */ _("button", {
 					type: "button",
-					onClick: () => E(p("/subscriptions", O)),
+					onClick: () => w(d("/subscriptions", E)),
 					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
 					children: "Back to Subscriptions"
 				})
 			]
 		})
 	});
-	let G = k.plan, K = k.quotas || [], q = k.addonSubscriptions || [], J = k.transactions || [], Y = k.history || [], ce = u(k.status), X = k.status === "active", Z = new Date(k.endDate), le = new Date(k.startDate), ue = /* @__PURE__ */ new Date(), Q = Math.ceil((Z.getTime() - le.getTime()) / (1e3 * 60 * 60 * 24)), $ = Math.max(0, Math.ceil((Z.getTime() - ue.getTime()) / (1e3 * 60 * 60 * 24))), de = Math.round((Q - $) / Q * 100);
-	return /* @__PURE__ */ y("div", {
+	let G = D.plan, K = D.quotas || [], q = D.addonSubscriptions || [], J = D.transactions || [], Y = D.history || [], fe = ne(D.status), X = D.status === "active", Z = new Date(D.endDate), pe = new Date(D.startDate), me = /* @__PURE__ */ new Date(), Q = Math.ceil((Z.getTime() - pe.getTime()) / (1e3 * 60 * 60 * 24)), $ = Math.max(0, Math.ceil((Z.getTime() - me.getTime()) / (1e3 * 60 * 60 * 24))), he = Math.round((Q - $) / Q * 100);
+	return /* @__PURE__ */ v("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ v("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
-				children: [/* @__PURE__ */ y("div", {
+				children: [/* @__PURE__ */ v("div", {
 					className: "flex items-start gap-4",
-					children: [/* @__PURE__ */ v("button", {
+					children: [/* @__PURE__ */ _("button", {
 						type: "button",
-						onClick: () => E(p("/subscriptions", O)),
+						onClick: () => w(d("/subscriptions", E)),
 						className: "p-2 -ml-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors",
-						children: /* @__PURE__ */ v("svg", {
+						children: /* @__PURE__ */ _("svg", {
 							className: "size-5",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
-							children: /* @__PURE__ */ v("path", {
+							children: /* @__PURE__ */ _("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
 								d: "M15 19l-7-7 7-7"
 							})
 						})
-					}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ y("div", {
+					}), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ v("h1", {
+						children: [/* @__PURE__ */ _("h1", {
 							className: "text-2xl font-bold text-foreground",
 							children: G?.name || "Subscription"
-						}), /* @__PURE__ */ v("span", {
-							className: `px-2 py-1 text-xs font-medium rounded ${l(ce)}`,
-							children: ee(k.status)
+						}), /* @__PURE__ */ _("span", {
+							className: `px-2 py-1 text-xs font-medium rounded ${te(fe)}`,
+							children: ee(D.status)
 						})]
-					}), /* @__PURE__ */ v("p", {
+					}), /* @__PURE__ */ _("p", {
 						className: "text-sm text-muted-foreground mt-1",
-						children: G?.pricingModel === r.PER_SEAT && G.pricePerSeat ? `${i(G.pricePerSeat, G.currency)} / seat / ${s(G.duration)} · ${k.seatCount ?? G.minSeats ?? 1} seats = ${i(G.pricePerSeat * (k.seatCount ?? G.minSeats ?? 1), G.currency)} / ${s(G.duration)}` : G ? `${i(G.price, G.currency)} / ${s(G.duration)}` : "Unknown plan"
+						children: G?.pricingModel === r.PER_SEAT && G.pricePerSeat ? `${i(G.pricePerSeat, G.currency)} / seat / ${s(G.duration)} · ${D.seatCount ?? G.minSeats ?? 1} seats = ${i(G.pricePerSeat * (D.seatCount ?? G.minSeats ?? 1), G.currency)} / ${s(G.duration)}` : G ? `${i(G.price, G.currency)} / ${s(G.duration)}` : "Unknown plan"
 					})] })]
-				}), /* @__PURE__ */ y("div", {
+				}), /* @__PURE__ */ v("div", {
 					className: "flex items-center gap-2",
 					children: [
-						X && D.canUpdateSubscription && G?.pricingModel === r.PER_SEAT && /* @__PURE__ */ v("button", {
+						X && T.canUpdateSubscription && G?.pricingModel === r.PER_SEAT && /* @__PURE__ */ _("button", {
 							type: "button",
-							onClick: () => z(!0),
+							onClick: () => R(!0),
 							className: "px-4 py-2 text-sm font-medium border border-border rounded-md hover:bg-accent text-foreground transition-colors",
 							children: "Manage Seats"
 						}),
-						X && D.canUpdateSubscription && /* @__PURE__ */ v("button", {
+						X && T.canUpdateSubscription && /* @__PURE__ */ _("button", {
 							type: "button",
-							onClick: () => E(p(`/subscriptions/${k.id}/upgrade`, O ?? k.billingAccountId)),
+							onClick: () => w(d(`/subscriptions/${D.id}/upgrade`, E ?? D.billingAccountId)),
 							className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
 							children: "Change Plan"
 						}),
-						X && D.canCancelSubscription && !k.canceledAt && /* @__PURE__ */ v("button", {
+						X && T.canCancelSubscription && !D.canceledAt && /* @__PURE__ */ _("button", {
 							type: "button",
-							onClick: () => L(!0),
-							disabled: N,
+							onClick: () => I(!0),
+							disabled: j,
 							className: "px-4 py-2 text-sm font-medium border border-border text-destructive rounded-md hover:bg-destructive/10 transition-colors disabled:opacity-50",
-							children: N ? "Canceling..." : "Cancel Subscription"
+							children: j ? "Canceling..." : "Cancel Subscription"
 						}),
-						k.canceledAt && /* @__PURE__ */ v("span", {
+						D.canceledAt && /* @__PURE__ */ _("span", {
 							className: "px-4 py-2 text-sm font-medium text-status-warning-text bg-status-warning-bg-subtle rounded-md",
 							children: "Cancellation Scheduled"
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ v("div", {
 				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ y("div", {
+				children: [/* @__PURE__ */ v("div", {
 					className: "lg:col-span-2 space-y-6",
 					children: [
-						X && /* @__PURE__ */ y("div", {
+						X && /* @__PURE__ */ v("div", {
 							className: "border border-border rounded-lg bg-card p-6",
-							children: [/* @__PURE__ */ y("div", {
+							children: [/* @__PURE__ */ v("div", {
 								className: "flex items-center justify-between mb-4",
-								children: [/* @__PURE__ */ v("h2", {
+								children: [/* @__PURE__ */ _("h2", {
 									className: "text-lg font-semibold text-foreground",
 									children: "Current Period"
-								}), /* @__PURE__ */ y("span", {
+								}), /* @__PURE__ */ v("span", {
 									className: "text-sm text-muted-foreground",
 									children: [$, " days remaining"]
 								})]
-							}), /* @__PURE__ */ y("div", {
+							}), /* @__PURE__ */ v("div", {
 								className: "space-y-2",
-								children: [/* @__PURE__ */ v("div", {
+								children: [/* @__PURE__ */ _("div", {
 									className: "h-2 rounded-full bg-muted overflow-hidden",
-									children: /* @__PURE__ */ v("div", {
+									children: /* @__PURE__ */ _("div", {
 										className: "h-full bg-primary transition-all duration-300",
-										style: { width: `${de}%` }
+										style: { width: `${he}%` }
 									})
-								}), /* @__PURE__ */ y("div", {
+								}), /* @__PURE__ */ v("div", {
 									className: "flex items-center justify-between text-sm text-muted-foreground",
-									children: [/* @__PURE__ */ v("span", { children: a(k.startDate, "short") }), /* @__PURE__ */ v("span", { children: a(k.endDate, "short") })]
+									children: [/* @__PURE__ */ _("span", { children: a(D.startDate, "short") }), /* @__PURE__ */ _("span", { children: a(D.endDate, "short") })]
 								})]
 							})]
 						}),
-						/* @__PURE__ */ y("div", {
+						/* @__PURE__ */ v("div", {
 							className: "border border-border rounded-lg bg-card overflow-hidden",
-							children: [/* @__PURE__ */ v("div", {
+							children: [/* @__PURE__ */ _("div", {
 								className: "p-6 border-b border-border bg-muted/30",
-								children: /* @__PURE__ */ y("h2", {
+								children: /* @__PURE__ */ v("h2", {
 									className: "text-lg font-semibold text-foreground",
 									children: [
 										"Quota Usage (",
@@ -235,22 +236,82 @@ var x = () => {
 										")"
 									]
 								})
-							}), /* @__PURE__ */ v("div", {
+							}), /* @__PURE__ */ _("div", {
 								className: "p-6",
-								children: K.length === 0 ? /* @__PURE__ */ v("p", {
+								children: K.length === 0 ? /* @__PURE__ */ _("p", {
 									className: "text-sm text-muted-foreground",
 									children: "No quotas assigned to this subscription."
-								}) : /* @__PURE__ */ v("div", {
+								}) : /* @__PURE__ */ _("div", {
 									className: "space-y-4",
-									children: K.map((e) => /* @__PURE__ */ v(S, { quota: e }, e.id))
+									children: K.map((e) => /* @__PURE__ */ _(b, { quota: e }, e.id))
 								})
 							})]
 						}),
-						q.length > 0 && /* @__PURE__ */ y("div", {
+						X && P && (() => {
+							let e = D.assignedWorkspaceId ?? null;
+							return /* @__PURE__ */ v("div", {
+								className: "border border-border rounded-lg bg-card overflow-hidden",
+								children: [
+									/* @__PURE__ */ v("div", {
+										className: "p-6 border-b border-border bg-muted/30 flex items-center justify-between",
+										children: [/* @__PURE__ */ _("h2", {
+											className: "text-lg font-semibold text-foreground",
+											children: "Workspace Quota Assignment"
+										}), !e && /* @__PURE__ */ _("button", {
+											type: "button",
+											onClick: () => B(!0),
+											className: "px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+											children: "Assign to Workspace"
+										})]
+									}),
+									/* @__PURE__ */ _("div", {
+										className: "p-6",
+										children: e ? /* @__PURE__ */ v("p", {
+											className: "text-sm text-muted-foreground",
+											children: [
+												"Workspace quotas are active on workspace",
+												" ",
+												/* @__PURE__ */ _("span", {
+													className: "font-medium text-foreground font-mono text-xs",
+													children: e
+												}),
+												"."
+											]
+										}) : /* @__PURE__ */ v("p", {
+											className: "text-sm text-muted-foreground",
+											children: [
+												"The workspace quotas included in this plan haven't been activated yet. Click",
+												" ",
+												/* @__PURE__ */ _("span", {
+													className: "font-medium text-foreground",
+													children: "Assign to Workspace"
+												}),
+												" to activate them."
+											]
+										})
+									}),
+									z && /* @__PURE__ */ _(ie, {
+										billingAccountId: E ?? D.billingAccountId,
+										subscriptionId: D.id,
+										quotas: [],
+										workspaces: [{
+											id: P,
+											name: "Current workspace"
+										}],
+										currentWorkspaceId: P,
+										onAssigned: () => {
+											B(!1), k();
+										},
+										onSkip: () => B(!1)
+									})
+								]
+							});
+						})(),
+						q.length > 0 && /* @__PURE__ */ v("div", {
 							className: "border border-border rounded-lg bg-card overflow-hidden",
-							children: [/* @__PURE__ */ v("div", {
+							children: [/* @__PURE__ */ _("div", {
 								className: "p-6 border-b border-border bg-muted/30",
-								children: /* @__PURE__ */ y("h2", {
+								children: /* @__PURE__ */ v("h2", {
 									className: "text-lg font-semibold text-foreground",
 									children: [
 										"Addons (",
@@ -258,31 +319,31 @@ var x = () => {
 										")"
 									]
 								})
-							}), /* @__PURE__ */ v("div", {
+							}), /* @__PURE__ */ _("div", {
 								className: "p-6",
-								children: /* @__PURE__ */ v("div", {
+								children: /* @__PURE__ */ _("div", {
 									className: "space-y-3",
-									children: q.map((e) => /* @__PURE__ */ v(C, { addonSubscription: e }, e.id))
+									children: q.map((e) => /* @__PURE__ */ _(x, { addonSubscription: e }, e.id))
 								})
 							})]
 						}),
-						J.length > 0 && /* @__PURE__ */ y("div", {
+						J.length > 0 && /* @__PURE__ */ v("div", {
 							className: "border border-border rounded-lg bg-card overflow-hidden",
 							children: [
-								/* @__PURE__ */ v("div", {
+								/* @__PURE__ */ _("div", {
 									className: "p-6 border-b border-border bg-muted/30",
-									children: /* @__PURE__ */ v("h2", {
+									children: /* @__PURE__ */ _("h2", {
 										className: "text-lg font-semibold text-foreground",
 										children: "Recent Transactions"
 									})
 								}),
-								/* @__PURE__ */ v("div", {
+								/* @__PURE__ */ _("div", {
 									className: "divide-y divide-border",
-									children: J.slice(0, 5).map((e) => /* @__PURE__ */ v(w, { transaction: e }, e.id))
+									children: J.slice(0, 5).map((e) => /* @__PURE__ */ _(S, { transaction: e }, e.id))
 								}),
-								J.length > 5 && /* @__PURE__ */ v("div", {
+								J.length > 5 && /* @__PURE__ */ _("div", {
 									className: "p-4 text-center border-t border-border",
-									children: /* @__PURE__ */ v("button", {
+									children: /* @__PURE__ */ _("button", {
 										type: "button",
 										className: "text-sm text-primary hover:underline",
 										children: "View all transactions"
@@ -291,169 +352,169 @@ var x = () => {
 							]
 						})
 					]
-				}), /* @__PURE__ */ y("div", {
+				}), /* @__PURE__ */ v("div", {
 					className: "space-y-6",
-					children: [/* @__PURE__ */ y("div", {
+					children: [/* @__PURE__ */ v("div", {
 						className: "border border-border rounded-lg bg-card overflow-hidden",
-						children: [/* @__PURE__ */ v("div", {
+						children: [/* @__PURE__ */ _("div", {
 							className: "p-6 border-b border-border bg-muted/30",
-							children: /* @__PURE__ */ v("h2", {
+							children: /* @__PURE__ */ _("h2", {
 								className: "text-lg font-semibold text-foreground",
 								children: "Details"
 							})
-						}), /* @__PURE__ */ y("div", {
+						}), /* @__PURE__ */ v("div", {
 							className: "p-6 space-y-4",
 							children: [
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-muted-foreground",
 									children: "Subscription ID"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "font-mono text-sm text-foreground mt-0.5 break-all",
-									children: k.id
+									children: D.id
 								})] }),
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-muted-foreground",
 									children: "Plan"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "text-sm text-foreground mt-0.5",
 									children: G?.name || "Unknown"
 								})] }),
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-muted-foreground",
 									children: "Billing Account"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "text-sm text-foreground mt-0.5",
-									children: k.billingAccount?.name || "Unknown"
+									children: D.billingAccount?.name || "Unknown"
 								})] }),
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-muted-foreground",
 									children: "Start Date"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "text-sm text-foreground mt-0.5",
-									children: a(k.startDate)
+									children: a(D.startDate)
 								})] }),
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-muted-foreground",
 									children: "End Date"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "text-sm text-foreground mt-0.5",
-									children: a(k.endDate)
+									children: a(D.endDate)
 								})] }),
-								k.nextBillingDate && /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								D.nextBillingDate && /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-muted-foreground",
 									children: "Next Billing"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "text-sm text-foreground mt-0.5",
-									children: a(k.nextBillingDate)
+									children: a(D.nextBillingDate)
 								})] }),
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-muted-foreground",
 									children: "Auto Renewal"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "text-sm text-foreground mt-0.5",
-									children: k.autoRenewal ? "Enabled" : "Disabled"
+									children: D.autoRenewal ? "Enabled" : "Disabled"
 								})] }),
-								k.paymentGateway && /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								D.paymentGateway && /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-muted-foreground",
 									children: "Payment Gateway"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "text-sm text-foreground mt-0.5 capitalize",
-									children: k.paymentGateway
+									children: D.paymentGateway
 								})] })
 							]
 						})]
-					}), Y.length > 0 && /* @__PURE__ */ y("div", {
+					}), Y.length > 0 && /* @__PURE__ */ v("div", {
 						className: "border border-border rounded-lg bg-card overflow-hidden",
-						children: [/* @__PURE__ */ v("div", {
+						children: [/* @__PURE__ */ _("div", {
 							className: "p-6 border-b border-border bg-muted/30",
-							children: /* @__PURE__ */ v("h2", {
+							children: /* @__PURE__ */ _("h2", {
 								className: "text-lg font-semibold text-foreground",
 								children: "History"
 							})
-						}), /* @__PURE__ */ v("div", {
+						}), /* @__PURE__ */ _("div", {
 							className: "p-6",
-							children: /* @__PURE__ */ v("div", {
+							children: /* @__PURE__ */ _("div", {
 								className: "space-y-3",
-								children: Y.slice(0, 5).map((e) => /* @__PURE__ */ v(T, { item: e }, e.id))
+								children: Y.slice(0, 5).map((e) => /* @__PURE__ */ _(C, { item: e }, e.id))
 							})
 						})]
 					})]
 				})]
 			}),
-			R && k && /* @__PURE__ */ v(g, {
-				subscription: k,
-				onClose: () => z(!1),
+			L && D && /* @__PURE__ */ _(m, {
+				subscription: D,
+				onClose: () => R(!1),
 				onConfirm: async (e) => {
-					await P({
-						subscriptionId: k.id,
+					await M({
+						subscriptionId: D.id,
 						seatCount: e
-					}), await j();
+					}), await k();
 				},
-				isLoading: F
+				isLoading: N
 			}),
-			I && /* @__PURE__ */ y("div", {
+			F && /* @__PURE__ */ v("div", {
 				className: "fixed inset-0 z-50 flex items-center justify-center",
-				children: [/* @__PURE__ */ v("div", {
+				children: [/* @__PURE__ */ _("div", {
 					className: "absolute inset-0 bg-overlay-scrim",
-					onClick: () => L(!1)
-				}), /* @__PURE__ */ y("div", {
+					onClick: () => I(!1)
+				}), /* @__PURE__ */ v("div", {
 					className: "relative bg-card border border-border rounded-lg shadow-lg w-full max-w-md mx-4 p-6",
 					role: "dialog",
 					"aria-modal": "true",
 					"aria-labelledby": "cancel-subscription-title",
 					children: [
-						/* @__PURE__ */ v("h3", {
+						/* @__PURE__ */ _("h3", {
 							id: "cancel-subscription-title",
 							className: "text-lg font-semibold text-foreground mb-2",
 							children: "Cancel Subscription"
 						}),
-						/* @__PURE__ */ y("p", {
+						/* @__PURE__ */ v("p", {
 							className: "text-sm text-muted-foreground mb-4",
 							children: [
 								"Are you sure you want to cancel this subscription? Your subscription will remain active until",
 								" ",
-								/* @__PURE__ */ v("span", {
+								/* @__PURE__ */ _("span", {
 									className: "font-medium text-foreground",
-									children: a(k.endDate)
+									children: a(D.endDate)
 								}),
 								", but will not renew automatically."
 							]
 						}),
-						/* @__PURE__ */ y("div", {
+						/* @__PURE__ */ v("div", {
 							className: "mb-4",
-							children: [/* @__PURE__ */ v("label", {
+							children: [/* @__PURE__ */ _("label", {
 								className: "block text-sm font-medium text-foreground mb-1",
 								children: "Reason for cancellation (optional)"
-							}), /* @__PURE__ */ v("textarea", {
-								value: B,
-								onChange: (e) => V(e.target.value),
+							}), /* @__PURE__ */ _("textarea", {
+								value: V,
+								onChange: (e) => H(e.target.value),
 								placeholder: "Please share why you're canceling...",
 								className: "w-full px-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 focus:border-transparent resize-none",
 								rows: 3
 							})]
 						}),
-						H && /* @__PURE__ */ v("div", {
+						U && /* @__PURE__ */ _("div", {
 							className: "mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md",
-							children: /* @__PURE__ */ v("p", {
+							children: /* @__PURE__ */ _("p", {
 								className: "text-sm text-destructive",
-								children: H
+								children: U
 							})
 						}),
-						/* @__PURE__ */ y("div", {
+						/* @__PURE__ */ v("div", {
 							className: "flex items-center justify-end gap-3",
-							children: [/* @__PURE__ */ v("button", {
+							children: [/* @__PURE__ */ _("button", {
 								type: "button",
 								onClick: () => {
-									L(!1), V(""), U(null);
+									I(!1), H(""), W(null);
 								},
 								className: "px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors",
 								children: "Keep Subscription"
-							}), /* @__PURE__ */ v("button", {
+							}), /* @__PURE__ */ _("button", {
 								type: "button",
-								onClick: W,
-								disabled: N,
+								onClick: de,
+								disabled: j,
 								className: "px-4 py-2 text-sm font-medium bg-destructive text-destructive-foreground rounded-md hover:bg-destructive/90 transition-colors disabled:opacity-50",
-								children: N ? "Canceling..." : "Confirm Cancellation"
+								children: j ? "Canceling..." : "Confirm Cancellation"
 							})]
 						})
 					]
@@ -461,17 +522,17 @@ var x = () => {
 			})
 		]
 	});
-}, S = ({ quota: e }) => {
+}, b = ({ quota: e }) => {
 	let t = e.limits?.value || 0, n = e.currentUsageSum || 0, r = t > 0 ? Math.min(100, n / t * 100) : 0;
-	return /* @__PURE__ */ y("div", {
+	return /* @__PURE__ */ v("div", {
 		className: "p-4 rounded-lg bg-muted/30",
 		children: [
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ v("div", {
 				className: "flex items-center justify-between mb-2",
-				children: [/* @__PURE__ */ v("span", {
+				children: [/* @__PURE__ */ _("span", {
 					className: "font-medium text-foreground",
 					children: e.name
-				}), /* @__PURE__ */ y("span", {
+				}), /* @__PURE__ */ v("span", {
 					className: "text-sm text-muted-foreground",
 					children: [
 						n,
@@ -480,80 +541,80 @@ var x = () => {
 					]
 				})]
 			}),
-			t > 0 && /* @__PURE__ */ v("div", {
+			t > 0 && /* @__PURE__ */ _("div", {
 				className: "h-2 rounded-full bg-muted overflow-hidden",
-				children: /* @__PURE__ */ v("div", {
+				children: /* @__PURE__ */ _("div", {
 					className: `h-full transition-all duration-300 ${c(r)}`,
 					style: { width: `${r}%` }
 				})
 			}),
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ v("div", {
 				className: "flex items-center justify-between mt-2 text-xs text-muted-foreground",
-				children: [/* @__PURE__ */ v("span", { children: e.quotaType }), /* @__PURE__ */ y("span", { children: [o(r), " used"] })]
+				children: [/* @__PURE__ */ _("span", { children: e.quotaType }), /* @__PURE__ */ v("span", { children: [o(r), " used"] })]
 			})
 		]
 	});
-}, C = ({ addonSubscription: e }) => {
+}, x = ({ addonSubscription: e }) => {
 	let t = e.addon;
-	return /* @__PURE__ */ y("div", {
+	return /* @__PURE__ */ v("div", {
 		className: "flex items-center justify-between p-3 rounded-lg bg-muted/30",
-		children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+		children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 			className: "font-medium text-foreground",
 			children: t?.name || "Unknown Addon"
-		}), /* @__PURE__ */ y("p", {
+		}), /* @__PURE__ */ v("p", {
 			className: "text-sm text-muted-foreground",
 			children: ["Qty: ", e.quantity]
-		})] }), t && /* @__PURE__ */ v("p", {
+		})] }), t && /* @__PURE__ */ _("p", {
 			className: "text-sm font-medium text-foreground",
 			children: i(t.price * e.quantity, t.currency)
 		})]
 	});
-}, w = ({ transaction: e }) => /* @__PURE__ */ y("div", {
+}, S = ({ transaction: e }) => /* @__PURE__ */ v("div", {
 	className: "flex items-center justify-between px-6 py-4",
-	children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+	children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 		className: "font-medium text-foreground capitalize",
 		children: e.type
-	}), /* @__PURE__ */ v("p", {
+	}), /* @__PURE__ */ _("p", {
 		className: "text-sm text-muted-foreground",
 		children: a(e.createdAt, "short")
-	})] }), /* @__PURE__ */ y("div", {
+	})] }), /* @__PURE__ */ v("div", {
 		className: "text-right",
-		children: [/* @__PURE__ */ y("p", {
+		children: [/* @__PURE__ */ v("p", {
 			className: `font-medium ${e.type === "refund" ? "text-status-error-text" : "text-foreground"}`,
 			children: [e.type === "refund" ? "-" : "", i(e.amount, e.currency)]
-		}), /* @__PURE__ */ v("p", {
+		}), /* @__PURE__ */ _("p", {
 			className: "text-sm text-muted-foreground capitalize",
 			children: e.status
 		})]
 	})]
-}), T = ({ item: e }) => /* @__PURE__ */ y("div", {
+}), C = ({ item: e }) => /* @__PURE__ */ v("div", {
 	className: "flex items-start gap-3",
-	children: [/* @__PURE__ */ v("div", { className: "size-2 rounded-full bg-muted-foreground mt-2 shrink-0" }), /* @__PURE__ */ y("div", { children: [
-		/* @__PURE__ */ y("p", {
+	children: [/* @__PURE__ */ _("div", { className: "size-2 rounded-full bg-muted-foreground mt-2 shrink-0" }), /* @__PURE__ */ v("div", { children: [
+		/* @__PURE__ */ v("p", {
 			className: "text-sm text-foreground",
 			children: [
-				/* @__PURE__ */ v("span", {
+				/* @__PURE__ */ _("span", {
 					className: "capitalize",
 					children: e.fromStatus
 				}),
 				" → ",
-				/* @__PURE__ */ v("span", {
+				/* @__PURE__ */ _("span", {
 					className: "capitalize font-medium",
 					children: e.toStatus
 				})
 			]
 		}),
-		e.reason && /* @__PURE__ */ v("p", {
+		e.reason && /* @__PURE__ */ _("p", {
 			className: "text-xs text-muted-foreground mt-0.5",
 			children: e.reason
 		}),
-		/* @__PURE__ */ v("p", {
+		/* @__PURE__ */ _("p", {
 			className: "text-xs text-muted-foreground mt-0.5",
 			children: a(e.createdAt, "short")
 		})
 	] })]
 });
 //#endregion
-export { x as SubscriptionDetailPage };
+export { y as SubscriptionDetailPage };
 
 //# sourceMappingURL=SubscriptionDetailPage.js.map