@burdenoff/microfe-billing 2026.510.114

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

@@ -0,0 +1,529 @@
+import { useBilling as e } from "../../../providers/BillingProvider.js";
+import { useBillingAccountSelection as t } from "../../../hooks/useBillingAccountSelection.js";
+import { formatCurrency as n, formatDate as r, formatPlanDuration as i, formatSubscriptionStatus as a } from "../../../shared/utils/format.js";
+import { getStatusBadgeClasses as o, getSubscriptionStatusColor as s } from "../../../shared/utils/status.js";
+import { useBillingPermissions as c } from "../../../hooks/useBillingPermissions.js";
+import { useBillingNavigate as l } from "../../../hooks/useBillingNavigate.js";
+import { withBillingAccountId as u } from "../../../shared/utils/navigation.js";
+import { useBillingAccounts as d, usePaginatedSubscriptions as f } from "../hooks/useSubscriptions.js";
+import "../hooks/index.js";
+import { useState as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useI18n as _ } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/subscriptions/pages/SubscriptionsListPage.tsx
+var v = ["expired", "upgraded"], y = 10, b = () => {
+	let { t: n } = _(), r = (e, t) => {
+		let r = n(e);
+		return r === e ? t : r;
+	}, i = l(), a = c(), { orgId: o } = e(), { billingAccounts: s, isLoading: b } = d(), { selectedAccountId: S, setSelectedAccountId: C } = t({
+		orgId: o,
+		billingAccounts: s,
+		syncFromUrl: !0,
+		urlParamName: "billingAccountId"
+	}), [w, T] = p(!1), [E, D] = p("all"), [O, k] = p(""), [A, j] = p(1), { subscriptions: M, activeSubscriptions: N, totalCount: P, totalPages: F, isLoading: I, error: L, refetch: R } = f(S ?? void 0, A, y), z = s.find((e) => e.id === S), B = (e) => {
+		C(e.id), T(!1), j(1);
+	}, V = (e) => {
+		j(e);
+	}, H = M.filter((e) => {
+		if (E !== "all") {
+			if (E === "inactive") {
+				if (!v.includes(e.status)) return !1;
+			} else if (e.status !== E) return !1;
+		}
+		if (O) {
+			let t = O.toLowerCase();
+			return (e.plan?.name?.toLowerCase() || "").includes(t) || e.id.toLowerCase().includes(t);
+		}
+		return !0;
+	}), U = b || I;
+	return a.canViewSubscriptions ? U && !z ? /* @__PURE__ */ g("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ h("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ h("div", {
+			className: "space-y-4",
+			children: [
+				1,
+				2,
+				3
+			].map((e) => /* @__PURE__ */ h("div", {
+				className: "border border-border rounded-lg p-6",
+				children: /* @__PURE__ */ g("div", {
+					className: "flex items-center gap-4",
+					children: [/* @__PURE__ */ h("div", { className: "h-12 w-12 bg-muted animate-pulse rounded" }), /* @__PURE__ */ g("div", {
+						className: "flex-1 space-y-2",
+						children: [/* @__PURE__ */ h("div", { className: "h-5 w-32 bg-muted animate-pulse rounded" }), /* @__PURE__ */ h("div", { className: "h-4 w-48 bg-muted animate-pulse rounded" })]
+					})]
+				})
+			}, e))
+		})]
+	}) : L ? /* @__PURE__ */ h("div", {
+		className: "flex items-center justify-center h-full min-h-[400px]",
+		children: /* @__PURE__ */ g("div", {
+			className: "text-center space-y-4",
+			children: [
+				/* @__PURE__ */ h("div", {
+					className: "w-12 h-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
+					children: /* @__PURE__ */ h("svg", {
+						className: "w-6 h-6 text-destructive",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ h("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+						})
+					})
+				}),
+				/* @__PURE__ */ h("h2", {
+					className: "text-lg font-semibold text-foreground",
+					children: "Failed to load subscriptions"
+				}),
+				/* @__PURE__ */ h("p", {
+					className: "text-sm text-muted-foreground",
+					children: L.message
+				}),
+				/* @__PURE__ */ h("button", {
+					onClick: () => R(),
+					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					children: "Try Again"
+				})
+			]
+		})
+	}) : /* @__PURE__ */ g("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("h1", {
+					className: "text-2xl font-bold text-foreground",
+					children: r("billing.subscriptions.title", "Subscriptions")
+				}), /* @__PURE__ */ h("p", {
+					className: "text-sm text-muted-foreground mt-1",
+					children: r("billing.subscriptions.subtitle", "Manage your active and past subscriptions")
+				})] }), a.canCreateSubscription && /* @__PURE__ */ g("button", {
+					onClick: () => i("/plans"),
+					className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					children: [/* @__PURE__ */ h("svg", {
+						className: "w-4 h-4",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ h("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M12 4v16m8-8H4"
+						})
+					}), "New Subscription"]
+				})]
+			}),
+			s.length > 1 && /* @__PURE__ */ g("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ g("button", {
+					onClick: () => T(!w),
+					className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border rounded-lg bg-card hover:bg-muted/50 transition-colors",
+					children: [/* @__PURE__ */ g("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ h("div", {
+							className: "w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center",
+							children: /* @__PURE__ */ h("svg", {
+								className: "w-4 h-4 text-primary",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								children: /* @__PURE__ */ h("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									strokeWidth: 2,
+									d: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+								})
+							})
+						}), /* @__PURE__ */ g("div", {
+							className: "text-left",
+							children: [/* @__PURE__ */ h("p", {
+								className: "text-sm font-medium text-foreground",
+								children: z?.name || "Select Account"
+							}), /* @__PURE__ */ h("p", {
+								className: "text-xs text-muted-foreground",
+								children: z?.email
+							})]
+						})]
+					}), /* @__PURE__ */ h("svg", {
+						className: `w-4 h-4 text-muted-foreground transition-transform ${w ? "rotate-180" : ""}`,
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ h("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M19 9l-7 7-7-7"
+						})
+					})]
+				}), w && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("div", {
+					className: "fixed inset-0 z-10",
+					onClick: () => T(!1)
+				}), /* @__PURE__ */ h("div", {
+					className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto",
+					children: s.map((e) => /* @__PURE__ */ g("button", {
+						onClick: () => B(e),
+						className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors",
+						children: [/* @__PURE__ */ g("div", {
+							className: "flex items-center gap-3 min-w-0",
+							children: [/* @__PURE__ */ h("div", {
+								className: "w-8 h-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0",
+								children: /* @__PURE__ */ h("svg", {
+									className: "w-4 h-4 text-muted-foreground",
+									fill: "none",
+									viewBox: "0 0 24 24",
+									stroke: "currentColor",
+									children: /* @__PURE__ */ h("path", {
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										strokeWidth: 2,
+										d: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+									})
+								})
+							}), /* @__PURE__ */ g("div", {
+								className: "text-left min-w-0",
+								children: [/* @__PURE__ */ h("p", {
+									className: "text-sm font-medium text-foreground truncate",
+									children: e.name
+								}), /* @__PURE__ */ h("p", {
+									className: "text-xs text-muted-foreground truncate",
+									children: e.email
+								})]
+							})]
+						}), z?.id === e.id && /* @__PURE__ */ h("svg", {
+							className: "w-4 h-4 text-primary flex-shrink-0",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ h("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M5 13l4 4L19 7"
+							})
+						})]
+					}, e.id))
+				})] })]
+			}),
+			z && /* @__PURE__ */ g("div", {
+				className: "grid grid-cols-1 sm:grid-cols-3 gap-4",
+				children: [
+					/* @__PURE__ */ g("div", {
+						className: "border border-border rounded-lg bg-card p-4",
+						children: [/* @__PURE__ */ h("p", {
+							className: "text-sm text-muted-foreground",
+							children: "Account"
+						}), /* @__PURE__ */ h("p", {
+							className: "text-lg font-semibold text-foreground mt-1",
+							children: z.name
+						})]
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "border border-border rounded-lg bg-card p-4",
+						children: [/* @__PURE__ */ h("p", {
+							className: "text-sm text-muted-foreground",
+							children: "Active Subscriptions"
+						}), /* @__PURE__ */ h("p", {
+							className: "text-lg font-semibold text-status-success-text mt-1",
+							children: N.length
+						})]
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "border border-border rounded-lg bg-card p-4",
+						children: [/* @__PURE__ */ h("p", {
+							className: "text-sm text-muted-foreground",
+							children: "Credit Balance"
+						}), /* @__PURE__ */ g("p", {
+							className: "text-lg font-semibold text-foreground mt-1",
+							children: [(z.creditAmount || 0).toLocaleString(), " Credits"]
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border",
+				children: [
+					/* @__PURE__ */ h("div", {
+						className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
+						children: [
+							"all",
+							"active",
+							"canceled",
+							"inactive"
+						].map((e) => /* @__PURE__ */ h("button", {
+							onClick: () => D(e),
+							className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors capitalize ${E === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+							children: e === "inactive" ? "Inactive" : e
+						}, e))
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "relative flex-1 min-w-[200px] max-w-md",
+						children: [/* @__PURE__ */ h("svg", {
+							className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ h("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+							})
+						}), /* @__PURE__ */ h("input", {
+							type: "text",
+							placeholder: r("billing.subscriptions.searchPlaceholder", "Search subscriptions..."),
+							value: O,
+							onChange: (e) => k(e.target.value),
+							className: "w-full pl-[3.25rem] pr-4 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"
+						})]
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							P,
+							" subscription",
+							P === 1 ? "" : "s",
+							" total"
+						]
+					})
+				]
+			}),
+			H.length === 0 ? /* @__PURE__ */ g("div", {
+				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+				children: [
+					/* @__PURE__ */ h("div", {
+						className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4",
+						children: /* @__PURE__ */ h("svg", {
+							className: "w-6 h-6 text-muted-foreground",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ h("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+							})
+						})
+					}),
+					/* @__PURE__ */ h("h3", {
+						className: "text-lg font-medium text-foreground",
+						children: r("billing.subscriptions.noSubscriptionsFound", "No subscriptions found")
+					}),
+					/* @__PURE__ */ h("p", {
+						className: "text-sm text-muted-foreground mt-1",
+						children: E !== "all" || O ? "No subscriptions match your filters." : "You don't have any subscriptions yet."
+					}),
+					a.canCreateSubscription && E === "all" && !O && /* @__PURE__ */ h("button", {
+						onClick: () => i("/plans"),
+						className: "mt-4 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+						children: "Browse Plans"
+					})
+				]
+			}) : /* @__PURE__ */ h("div", {
+				className: "space-y-4",
+				children: H.map((e) => /* @__PURE__ */ h(x, {
+					subscription: e,
+					onView: () => i(u(`/subscriptions/${e.id}`, e.billingAccountId)),
+					canCancel: a.canCancelSubscription
+				}, e.id))
+			}),
+			F > 1 && /* @__PURE__ */ g("div", {
+				className: "flex items-center justify-center gap-2 pt-4",
+				children: [
+					/* @__PURE__ */ h("button", {
+						onClick: () => V(A - 1),
+						disabled: A === 1,
+						className: "px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors",
+						children: /* @__PURE__ */ h("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ h("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M15 19l-7-7 7-7"
+							})
+						})
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "flex items-center gap-1",
+						children: Array.from({ length: F }, (e, t) => t + 1).map((e) => {
+							let t = e === 1 || e === F || Math.abs(e - A) <= 1, n = e === A - 2 && A > 3, r = e === A + 2 && A < F - 2;
+							return n || r ? /* @__PURE__ */ h("span", {
+								className: "px-2 text-muted-foreground",
+								children: "..."
+							}, e) : t ? /* @__PURE__ */ h("button", {
+								onClick: () => V(e),
+								className: `px-3 py-1.5 text-sm rounded-md transition-colors ${e === A ? "bg-primary text-primary-foreground" : "border border-border hover:bg-muted"}`,
+								children: e
+							}, e) : null;
+						})
+					}),
+					/* @__PURE__ */ h("button", {
+						onClick: () => V(A + 1),
+						disabled: A === F,
+						className: "px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors",
+						children: /* @__PURE__ */ h("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ h("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M9 5l7 7-7 7"
+							})
+						})
+					})
+				]
+			})
+		]
+	}) : /* @__PURE__ */ h("div", {
+		className: "flex items-center justify-center h-full min-h-[400px]",
+		children: /* @__PURE__ */ g("div", {
+			className: "text-center space-y-2",
+			children: [
+				/* @__PURE__ */ h("div", {
+					className: "w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center",
+					children: /* @__PURE__ */ h("svg", {
+						className: "w-6 h-6 text-muted-foreground",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ h("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+						})
+					})
+				}),
+				/* @__PURE__ */ h("h2", {
+					className: "text-lg font-semibold text-foreground",
+					children: "Access Denied"
+				}),
+				/* @__PURE__ */ h("p", {
+					className: "text-sm text-muted-foreground max-w-sm",
+					children: "You don't have permission to view subscriptions."
+				})
+			]
+		})
+	});
+}, x = ({ subscription: e, onView: t, canCancel: c }) => {
+	let l = e.plan, u = s(e.status), d = e.status === "active", f = new Date(e.endDate), p = /* @__PURE__ */ new Date(), m = Math.max(0, Math.ceil((f.getTime() - p.getTime()) / (1e3 * 60 * 60 * 24)));
+	return /* @__PURE__ */ h("div", {
+		className: "border border-border rounded-lg bg-card hover:shadow-md transition-shadow cursor-pointer",
+		onClick: t,
+		children: /* @__PURE__ */ g("div", {
+			className: "p-6",
+			children: [
+				/* @__PURE__ */ g("div", {
+					className: "flex flex-col sm:flex-row sm:items-center gap-4",
+					children: [
+						/* @__PURE__ */ h("div", {
+							className: "w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0",
+							children: /* @__PURE__ */ h("svg", {
+								className: "w-6 h-6 text-primary",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								children: /* @__PURE__ */ h("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									strokeWidth: 2,
+									d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+								})
+							})
+						}),
+						/* @__PURE__ */ g("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ g("div", {
+								className: "flex items-center gap-2 flex-wrap",
+								children: [/* @__PURE__ */ h("h3", {
+									className: "font-semibold text-foreground",
+									children: l?.name || "Unknown Plan"
+								}), /* @__PURE__ */ h("span", {
+									className: `px-2 py-0.5 text-xs font-medium rounded ${o(u)}`,
+									children: a(e.status)
+								})]
+							}), /* @__PURE__ */ g("div", {
+								className: "flex items-center gap-4 mt-1 text-sm text-muted-foreground",
+								children: [
+									/* @__PURE__ */ g("span", { children: [
+										l ? n(l.price, l.currency) : "—",
+										" /",
+										" ",
+										l ? i(l.duration) : "—"
+									] }),
+									/* @__PURE__ */ h("span", {
+										className: "hidden sm:inline",
+										children: "•"
+									}),
+									/* @__PURE__ */ g("span", {
+										className: "hidden sm:inline",
+										children: ["Started ", r(e.startDate, "short")]
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ g("div", {
+							className: "flex items-center gap-4",
+							children: [d && /* @__PURE__ */ g("div", {
+								className: "text-right",
+								children: [/* @__PURE__ */ g("p", {
+									className: "text-sm font-medium text-foreground",
+									children: [m, " days"]
+								}), /* @__PURE__ */ h("p", {
+									className: "text-xs text-muted-foreground",
+									children: "remaining"
+								})]
+							}), /* @__PURE__ */ h("button", {
+								onClick: (e) => {
+									e.stopPropagation(), t();
+								},
+								className: "px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+								children: "View"
+							})]
+						})
+					]
+				}),
+				e.addonSubscriptions && e.addonSubscriptions.length > 0 && /* @__PURE__ */ h("div", {
+					className: "mt-4 pt-4 border-t border-border",
+					children: /* @__PURE__ */ g("p", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							e.addonSubscriptions.length,
+							" addon",
+							e.addonSubscriptions.length === 1 ? "" : "s",
+							" attached"
+						]
+					})
+				}),
+				e.canceledAt && /* @__PURE__ */ h("div", {
+					className: "mt-4 pt-4 border-t border-border",
+					children: /* @__PURE__ */ g("p", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							"Canceled on ",
+							r(e.canceledAt),
+							e.cancellationReason && /* @__PURE__ */ g("span", { children: [" — ", e.cancellationReason] })
+						]
+					})
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { b as SubscriptionsListPage };
+
+//# sourceMappingURL=SubscriptionsListPage.js.map

package/dist/billing/modules/subscriptions/pages/SubscriptionsListPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionsListPage.js","names":[],"sources":["../../../../../src/billing/modules/subscriptions/pages/SubscriptionsListPage.tsx"],"sourcesContent":["/**\n * Subscriptions Module - Subscriptions List Page\n * Displays paginated subscriptions for the selected billing account\n */\n\nimport { useState, type FC } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBillingAccounts, usePaginatedSubscriptions } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { BillingSubscription, SubscriptionStatus, BillingAccount } from '../../../shared/types';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport {\n  formatCurrency,\n  formatDate,\n  formatPlanDuration,\n  formatSubscriptionStatus,\n} from '../../../shared/utils/format';\nimport { getSubscriptionStatusColor, getStatusBadgeClasses } from '../../../shared/utils/status';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ntype FilterStatus = 'all' | 'active' | 'canceled' | 'inactive';\n\n// Statuses that count as \"inactive\" (historical/past subscriptions)\nconst INACTIVE_STATUSES = ['expired', 'upgraded'] as const;\n\nconst PAGE_SIZE = 10;\n\nexport const SubscriptionsListPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { orgId } = useBilling();\n\n  // Fetch all billing accounts for the selector\n  const { billingAccounts, isLoading: isLoadingAccounts } = useBillingAccounts();\n\n  // State\n  const {\n    selectedAccountId: selectedBillingAccountId,\n    setSelectedAccountId: setSelectedBillingAccountId,\n  } = useBillingAccountSelection({\n    orgId,\n    billingAccounts,\n    syncFromUrl: true,\n    urlParamName: 'billingAccountId',\n  });\n\n  const [isAccountSelectorOpen, setIsAccountSelectorOpen] = useState(false);\n  const [filterStatus, setFilterStatus] = useState<FilterStatus>('all');\n  const [searchQuery, setSearchQuery] = useState('');\n  const [currentPage, setCurrentPage] = useState(1);\n\n  // Fetch paginated subscriptions for selected billing account\n  const {\n    subscriptions,\n    activeSubscriptions,\n    totalCount,\n    totalPages,\n    isLoading: isLoadingSubscriptions,\n    error,\n    refetch,\n  } = usePaginatedSubscriptions(selectedBillingAccountId ?? undefined, currentPage, PAGE_SIZE);\n\n  // Get selected billing account info from the list\n  const selectedBillingAccount = billingAccounts.find((a) => a.id === selectedBillingAccountId);\n\n  // Handle account selection\n  const handleSelectAccount = (account: BillingAccount) => {\n    setSelectedBillingAccountId(account.id);\n    setIsAccountSelectorOpen(false);\n    setCurrentPage(1); // Reset to first page when switching accounts\n  };\n\n  // Handle page change\n  const handlePageChange = (newPage: number) => {\n    setCurrentPage(newPage);\n  };\n\n  // Filter subscriptions (client-side filtering for status and search)\n  const filteredSubscriptions = subscriptions.filter((subscription) => {\n    // Status filter\n    if (filterStatus !== 'all') {\n      if (filterStatus === 'inactive') {\n        if (\n          !INACTIVE_STATUSES.includes(subscription.status as (typeof INACTIVE_STATUSES)[number])\n        ) {\n          return false;\n        }\n      } else if (subscription.status !== filterStatus) {\n        return false;\n      }\n    }\n\n    // Search filter\n    if (searchQuery) {\n      const query = searchQuery.toLowerCase();\n      const planName = subscription.plan?.name?.toLowerCase() || '';\n      return planName.includes(query) || subscription.id.toLowerCase().includes(query);\n    }\n\n    return true;\n  });\n\n  const isLoading = isLoadingAccounts || isLoadingSubscriptions;\n\n  // Permission check\n  if (!permissions.canViewSubscriptions) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <div className=\"w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center\">\n            <svg\n              className=\"w-6 h-6 text-muted-foreground\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n          <p className=\"text-sm text-muted-foreground max-w-sm\">\n            You don&apos;t have permission to view subscriptions.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Loading state\n  if (isLoading && !selectedBillingAccount) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-muted animate-pulse rounded\" />\n        <div className=\"space-y-4\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"border border-border rounded-lg p-6\">\n              <div className=\"flex items-center gap-4\">\n                <div className=\"h-12 w-12 bg-muted animate-pulse rounded\" />\n                <div className=\"flex-1 space-y-2\">\n                  <div className=\"h-5 w-32 bg-muted animate-pulse rounded\" />\n                  <div className=\"h-4 w-48 bg-muted animate-pulse rounded\" />\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <div className=\"w-12 h-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center\">\n            <svg\n              className=\"w-6 h-6 text-destructive\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-foreground\">Failed to load subscriptions</h2>\n          <p className=\"text-sm text-muted-foreground\">{error.message}</p>\n          <button\n            onClick={() => refetch()}\n            className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n          >\n            Try Again\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-bold text-foreground\">\n            {tr('billing.subscriptions.title', 'Subscriptions')}\n          </h1>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {tr('billing.subscriptions.subtitle', 'Manage your active and past subscriptions')}\n          </p>\n        </div>\n\n        {permissions.canCreateSubscription && (\n          <button\n            onClick={() => navigateTo('/plans')}\n            className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 4v16m8-8H4\"\n              />\n            </svg>\n            New Subscription\n          </button>\n        )}\n      </div>\n\n      {/* Account Selector (if multiple accounts) */}\n      {billingAccounts.length > 1 && (\n        <div className=\"relative\">\n          <button\n            onClick={() => setIsAccountSelectorOpen(!isAccountSelectorOpen)}\n            className=\"w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border rounded-lg bg-card hover:bg-muted/50 transition-colors\"\n          >\n            <div className=\"flex items-center gap-3\">\n              <div className=\"w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center\">\n                <svg\n                  className=\"w-4 h-4 text-primary\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                  />\n                </svg>\n              </div>\n              <div className=\"text-left\">\n                <p className=\"text-sm font-medium text-foreground\">\n                  {selectedBillingAccount?.name || 'Select Account'}\n                </p>\n                <p className=\"text-xs text-muted-foreground\">{selectedBillingAccount?.email}</p>\n              </div>\n            </div>\n            <svg\n              className={`w-4 h-4 text-muted-foreground transition-transform ${isAccountSelectorOpen ? 'rotate-180' : ''}`}\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M19 9l-7 7-7-7\"\n              />\n            </svg>\n          </button>\n\n          {isAccountSelectorOpen && (\n            <>\n              <div className=\"fixed inset-0 z-10\" onClick={() => setIsAccountSelectorOpen(false)} />\n              <div className=\"absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto\">\n                {billingAccounts.map((account) => (\n                  <button\n                    key={account.id}\n                    onClick={() => handleSelectAccount(account)}\n                    className=\"w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors\"\n                  >\n                    <div className=\"flex items-center gap-3 min-w-0\">\n                      <div className=\"w-8 h-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0\">\n                        <svg\n                          className=\"w-4 h-4 text-muted-foreground\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                          />\n                        </svg>\n                      </div>\n                      <div className=\"text-left min-w-0\">\n                        <p className=\"text-sm font-medium text-foreground truncate\">\n                          {account.name}\n                        </p>\n                        <p className=\"text-xs text-muted-foreground truncate\">{account.email}</p>\n                      </div>\n                    </div>\n                    {selectedBillingAccount?.id === account.id && (\n                      <svg\n                        className=\"w-4 h-4 text-primary flex-shrink-0\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          strokeWidth={2}\n                          d=\"M5 13l4 4L19 7\"\n                        />\n                      </svg>\n                    )}\n                  </button>\n                ))}\n              </div>\n            </>\n          )}\n        </div>\n      )}\n\n      {/* Account Summary */}\n      {selectedBillingAccount && (\n        <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n          <div className=\"border border-border rounded-lg bg-card p-4\">\n            <p className=\"text-sm text-muted-foreground\">Account</p>\n            <p className=\"text-lg font-semibold text-foreground mt-1\">\n              {selectedBillingAccount.name}\n            </p>\n          </div>\n          <div className=\"border border-border rounded-lg bg-card p-4\">\n            <p className=\"text-sm text-muted-foreground\">Active Subscriptions</p>\n            <p className=\"text-lg font-semibold text-status-success-text mt-1\">\n              {activeSubscriptions.length}\n            </p>\n          </div>\n          <div className=\"border border-border rounded-lg bg-card p-4\">\n            <p className=\"text-sm text-muted-foreground\">Credit Balance</p>\n            <p className=\"text-lg font-semibold text-foreground mt-1\">\n              {(selectedBillingAccount.creditAmount || 0).toLocaleString()} Credits\n            </p>\n          </div>\n        </div>\n      )}\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border\">\n        {/* Status Filter */}\n        <div className=\"inline-flex rounded-lg border border-border p-1 bg-muted/50\">\n          {(['all', 'active', 'canceled', 'inactive'] as FilterStatus[]).map((status) => (\n            <button\n              key={status}\n              onClick={() => setFilterStatus(status)}\n              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors capitalize ${\n                filterStatus === status\n                  ? 'bg-background text-foreground shadow-sm'\n                  : 'text-muted-foreground hover:text-foreground'\n              }`}\n            >\n              {status === 'inactive' ? 'Inactive' : status}\n            </button>\n          ))}\n        </div>\n\n        {/* Search */}\n        <div className=\"relative flex-1 min-w-[200px] max-w-md\">\n          <svg\n            className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n            />\n          </svg>\n          <input\n            type=\"text\"\n            placeholder={tr('billing.subscriptions.searchPlaceholder', 'Search subscriptions...')}\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            className=\"w-full pl-[3.25rem] pr-4 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\"\n          />\n        </div>\n\n        {/* Total Count */}\n        <div className=\"text-sm text-muted-foreground\">\n          {totalCount} subscription{totalCount !== 1 ? 's' : ''} total\n        </div>\n      </div>\n\n      {/* Subscriptions List */}\n      {filteredSubscriptions.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg\">\n          <div className=\"w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4\">\n            <svg\n              className=\"w-6 h-6 text-muted-foreground\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-foreground\">\n            {tr('billing.subscriptions.noSubscriptionsFound', 'No subscriptions found')}\n          </h3>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {filterStatus !== 'all' || searchQuery\n              ? 'No subscriptions match your filters.'\n              : \"You don't have any subscriptions yet.\"}\n          </p>\n          {permissions.canCreateSubscription && filterStatus === 'all' && !searchQuery && (\n            <button\n              onClick={() => navigateTo('/plans')}\n              className=\"mt-4 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n            >\n              Browse Plans\n            </button>\n          )}\n        </div>\n      ) : (\n        <div className=\"space-y-4\">\n          {filteredSubscriptions.map((subscription) => (\n            <SubscriptionCard\n              key={subscription.id}\n              subscription={subscription}\n              onView={() =>\n                navigateTo(\n                  withBillingAccountId(\n                    `/subscriptions/${subscription.id}`,\n                    subscription.billingAccountId\n                  )\n                )\n              }\n              canCancel={permissions.canCancelSubscription}\n            />\n          ))}\n        </div>\n      )}\n\n      {/* Pagination */}\n      {totalPages > 1 && (\n        <div className=\"flex items-center justify-center gap-2 pt-4\">\n          <button\n            onClick={() => handlePageChange(currentPage - 1)}\n            disabled={currentPage === 1}\n            className=\"px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n\n          <div className=\"flex items-center gap-1\">\n            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => {\n              // Show first, last, current, and adjacent pages\n              const showPage =\n                page === 1 || page === totalPages || Math.abs(page - currentPage) <= 1;\n\n              // Show ellipsis\n              const showEllipsisBefore = page === currentPage - 2 && currentPage > 3;\n              const showEllipsisAfter = page === currentPage + 2 && currentPage < totalPages - 2;\n\n              if (showEllipsisBefore || showEllipsisAfter) {\n                return (\n                  <span key={page} className=\"px-2 text-muted-foreground\">\n                    ...\n                  </span>\n                );\n              }\n\n              if (!showPage) return null;\n\n              return (\n                <button\n                  key={page}\n                  onClick={() => handlePageChange(page)}\n                  className={`px-3 py-1.5 text-sm rounded-md transition-colors ${\n                    page === currentPage\n                      ? 'bg-primary text-primary-foreground'\n                      : 'border border-border hover:bg-muted'\n                  }`}\n                >\n                  {page}\n                </button>\n              );\n            })}\n          </div>\n\n          <button\n            onClick={() => handlePageChange(currentPage + 1)}\n            disabled={currentPage === totalPages}\n            className=\"px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Subscription Card Component\n// ============================================================================\n\ninterface SubscriptionCardProps {\n  subscription: BillingSubscription;\n  onView: () => void;\n  canCancel: boolean;\n}\n\nconst SubscriptionCard: FC<SubscriptionCardProps> = ({\n  subscription,\n  onView,\n  canCancel: _canCancel,\n}) => {\n  const plan = subscription.plan;\n  const statusColor = getSubscriptionStatusColor(subscription.status);\n  const isActive = subscription.status === ('active' as SubscriptionStatus);\n\n  // Calculate days remaining\n  const endDate = new Date(subscription.endDate);\n  const now = new Date();\n  const daysRemaining = Math.max(\n    0,\n    Math.ceil((endDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))\n  );\n\n  return (\n    <div\n      className=\"border border-border rounded-lg bg-card hover:shadow-md transition-shadow cursor-pointer\"\n      onClick={onView}\n    >\n      <div className=\"p-6\">\n        <div className=\"flex flex-col sm:flex-row sm:items-center gap-4\">\n          {/* Plan Icon */}\n          <div className=\"w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0\">\n            <svg\n              className=\"w-6 h-6 text-primary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"\n              />\n            </svg>\n          </div>\n\n          {/* Subscription Info */}\n          <div className=\"flex-1 min-w-0\">\n            <div className=\"flex items-center gap-2 flex-wrap\">\n              <h3 className=\"font-semibold text-foreground\">{plan?.name || 'Unknown Plan'}</h3>\n              <span\n                className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n              >\n                {formatSubscriptionStatus(subscription.status)}\n              </span>\n            </div>\n            <div className=\"flex items-center gap-4 mt-1 text-sm text-muted-foreground\">\n              <span>\n                {plan ? formatCurrency(plan.price, plan.currency) : '—'} /{' '}\n                {plan ? formatPlanDuration(plan.duration) : '—'}\n              </span>\n              <span className=\"hidden sm:inline\">•</span>\n              <span className=\"hidden sm:inline\">\n                Started {formatDate(subscription.startDate, 'short')}\n              </span>\n            </div>\n          </div>\n\n          {/* Right Side Info */}\n          <div className=\"flex items-center gap-4\">\n            {isActive && (\n              <div className=\"text-right\">\n                <p className=\"text-sm font-medium text-foreground\">{daysRemaining} days</p>\n                <p className=\"text-xs text-muted-foreground\">remaining</p>\n              </div>\n            )}\n            <button\n              onClick={(e) => {\n                e.stopPropagation();\n                onView();\n              }}\n              className=\"px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n            >\n              View\n            </button>\n          </div>\n        </div>\n\n        {/* Additional Info */}\n        {subscription.addonSubscriptions && subscription.addonSubscriptions.length > 0 && (\n          <div className=\"mt-4 pt-4 border-t border-border\">\n            <p className=\"text-sm text-muted-foreground\">\n              {subscription.addonSubscriptions.length} addon\n              {subscription.addonSubscriptions.length !== 1 ? 's' : ''} attached\n            </p>\n          </div>\n        )}\n\n        {/* Cancellation Info */}\n        {subscription.canceledAt && (\n          <div className=\"mt-4 pt-4 border-t border-border\">\n            <p className=\"text-sm text-muted-foreground\">\n              Canceled on {formatDate(subscription.canceledAt)}\n              {subscription.cancellationReason && <span> — {subscription.cancellationReason}</span>}\n            </p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/subscriptions/pages/UpgradeSubscriptionPage.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+
+export declare const UpgradeSubscriptionPage: FC;
+//# sourceMappingURL=UpgradeSubscriptionPage.d.ts.map

package/dist/billing/modules/subscriptions/pages/UpgradeSubscriptionPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UpgradeSubscriptionPage.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/subscriptions/pages/UpgradeSubscriptionPage.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAyNnD,eAAO,MAAM,uBAAuB,EAAE,EAwYrC,CAAC"}