@burdenoff/microfe-billing 2026.510.114

package/dist/billing/modules/plans/pages/PlansListPage.js

@@ -0,0 +1,438 @@
+import { AccessDenied as e } from "../../../shared/components/AccessDenied.js";
+import { ServerError as t } from "../../../shared/components/ServerError.js";
+import "../../../shared/components/index.js";
+import { PricingModel as n } from "../../../shared/types/graphql.js";
+import { formatCurrency as r, formatPlanDuration as i, formatPlanDurationLabel as a } from "../../../shared/utils/format.js";
+import { isServerError as o } from "../../../shared/utils/error.js";
+import "../../../shared/utils/index.js";
+import { useBillingPermissions as s } from "../../../hooks/useBillingPermissions.js";
+import { useBillingNavigate as c } from "../../../hooks/useBillingNavigate.js";
+import { getDisplayPrice as l, useDefaultBillingCurrency as u } from "../../../hooks/useDefaultBillingCurrency.js";
+import { usePlanMutations as d, usePlans as f } from "../hooks/usePlans.js";
+import "../hooks/index.js";
+import { useMemo as p, useState as m } from "react";
+import { 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/plans/pages/PlansListPage.tsx
+function v(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) {
+		if (!n.quota) continue;
+		let e = n.quota.id, r = n.quota.limits?.value ?? 0, i = t.get(e);
+		i ? i.totalValue += r : t.set(e, {
+			quotaId: e,
+			name: n.quota.name ?? "Unknown Quota",
+			totalValue: r
+		});
+	}
+	return Array.from(t.values());
+}
+var y = () => {
+	let { t: n } = _(), r = (e, t) => {
+		let r = n(e);
+		return r === e ? t : r;
+	}, i = c(), a = s(), { plans: l, isLoading: u, error: p, refetch: v } = f(), { togglePlan: y, isToggling: S } = d(), [C, w] = m("grid"), [T, E] = m(!1), [D, O] = m("all");
+	if (!a.canViewPlans) return /* @__PURE__ */ h(e, { message: r("billing.plans.noViewPermission", "You don't have permission to view pricing plans.") });
+	let k = l.filter((e) => !(!T && !e.isActive || D !== "all" && e.duration !== D)), A = async (e) => {
+		if (a.canManagePlans) try {
+			await y(e.id, !e.isActive), await v();
+		} catch (e) {
+			console.error("Failed to toggle plan:", e);
+		}
+	}, j = (e) => {
+		i(`/checkout/${e.id}`);
+	}, M = (e) => {
+		i(`/plans/${e.id}`);
+	};
+	return u && l.length === 0 ? /* @__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: "grid grid-cols-1 md:grid-cols-3 gap-6",
+			children: [
+				1,
+				2,
+				3
+			].map((e) => /* @__PURE__ */ g("div", {
+				className: "border border-border rounded-lg p-6 space-y-4",
+				children: [
+					/* @__PURE__ */ h("div", { className: "h-6 w-24 bg-muted animate-pulse rounded" }),
+					/* @__PURE__ */ h("div", { className: "h-8 w-32 bg-muted animate-pulse rounded" }),
+					/* @__PURE__ */ h("div", {
+						className: "space-y-2",
+						children: [
+							1,
+							2,
+							3,
+							4
+						].map((e) => /* @__PURE__ */ h("div", { className: "h-4 w-full bg-muted animate-pulse rounded" }, e))
+					})
+				]
+			}, e))
+		})]
+	}) : p ? o(p) ? /* @__PURE__ */ h("div", {
+		className: "p-6",
+		children: /* @__PURE__ */ h(t, {
+			title: r("billing.plans.serverUnavailable", "Server Unavailable"),
+			message: r("billing.plans.serverUnavailableMessage", "Unable to load pricing plans. The server might be down or experiencing issues."),
+			onRetry: () => v(),
+			showRetry: !0
+		})
+	}) : /* @__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: r("billing.plans.failedToLoad", "Failed to load plans")
+				}),
+				/* @__PURE__ */ h("p", {
+					className: "text-sm text-muted-foreground",
+					children: p.message
+				}),
+				/* @__PURE__ */ h("button", {
+					onClick: () => v(),
+					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.plans.title", "Pricing Plans")
+				}), /* @__PURE__ */ h("p", {
+					className: "text-sm text-muted-foreground mt-1",
+					children: r("billing.plans.subtitle", "Choose the plan that best fits your needs")
+				})] }), a.canManagePlans && /* @__PURE__ */ g("button", {
+					onClick: () => i("/plans/new"),
+					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"
+						})
+					}), "Create Plan"]
+				})]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border",
+				children: [
+					/* @__PURE__ */ g("div", {
+						className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
+						children: [
+							/* @__PURE__ */ h("button", {
+								onClick: () => O("all"),
+								className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${D === "all" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+								children: "All"
+							}),
+							/* @__PURE__ */ h("button", {
+								onClick: () => O("monthly"),
+								className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${D === "monthly" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+								children: "Monthly"
+							}),
+							/* @__PURE__ */ h("button", {
+								onClick: () => O("yearly"),
+								className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${D === "yearly" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+								children: "Yearly"
+							})
+						]
+					}),
+					a.canManagePlans && /* @__PURE__ */ g("label", {
+						className: "flex items-center gap-2 text-sm cursor-pointer",
+						children: [/* @__PURE__ */ h("input", {
+							type: "checkbox",
+							checked: T,
+							onChange: (e) => E(e.target.checked),
+							className: "w-4 h-4 rounded border-border text-primary focus:ring-primary"
+						}), /* @__PURE__ */ h("span", {
+							className: "text-muted-foreground",
+							children: r("billing.plans.showInactive", "Show inactive plans")
+						})]
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "ml-auto inline-flex rounded-lg border border-border p-1 bg-muted/50",
+						children: [/* @__PURE__ */ h("button", {
+							onClick: () => w("grid"),
+							className: `p-1.5 rounded-md transition-colors ${C === "grid" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+							title: "Grid view",
+							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: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
+								})
+							})
+						}), /* @__PURE__ */ h("button", {
+							onClick: () => w("list"),
+							className: `p-1.5 rounded-md transition-colors ${C === "list" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+							title: "List view",
+							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: "M4 6h16M4 12h16M4 18h16"
+								})
+							})
+						})]
+					})
+				]
+			}),
+			k.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: "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__ */ h("h3", {
+						className: "text-lg font-medium text-foreground",
+						children: r("billing.plans.noPlansFound", "No plans found")
+					}),
+					/* @__PURE__ */ h("p", {
+						className: "text-sm text-muted-foreground mt-1",
+						children: T ? r("billing.plans.noPlansFiltered", "No plans match your current filters.") : r("billing.plans.noActivePlans", "There are no active plans available.")
+					}),
+					a.canManagePlans && /* @__PURE__ */ h("button", {
+						onClick: () => i("/plans/new"),
+						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: r("billing.plans.createFirstPlan", "Create your first plan")
+					})
+				]
+			}) : C === "grid" ? /* @__PURE__ */ h("div", {
+				className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
+				children: k.map((e) => /* @__PURE__ */ h(b, {
+					plan: e,
+					onSelect: j,
+					onView: M,
+					onToggle: A,
+					canSelect: a.canCreateSubscription,
+					canManage: a.canManagePlans,
+					isToggling: S
+				}, e.id))
+			}) : /* @__PURE__ */ h("div", {
+				className: "space-y-3",
+				children: k.map((e) => /* @__PURE__ */ h(x, {
+					plan: e,
+					onSelect: j,
+					onView: M,
+					onToggle: A,
+					canSelect: a.canCreateSubscription,
+					canManage: a.canManagePlans,
+					isToggling: S
+				}, e.id))
+			})
+		]
+	});
+}, b = ({ plan: e, onSelect: t, onView: o, onToggle: s, canSelect: c, canManage: d, isToggling: f }) => {
+	let m = u(), _ = p(() => v(e.features || []), [e.features]);
+	return /* @__PURE__ */ g("div", {
+		className: `relative border rounded-lg p-6 transition-all hover:shadow-md flex flex-col h-full ${e.isActive ? "border-border bg-card" : "border-dashed border-muted-foreground/30 bg-muted/30"}`,
+		children: [
+			!e.isActive && /* @__PURE__ */ h("span", {
+				className: "absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-muted text-muted-foreground rounded",
+				children: "Inactive"
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "mb-4",
+				children: [/* @__PURE__ */ h("h3", {
+					className: "text-xl font-bold text-foreground",
+					children: e.name
+				}), /* @__PURE__ */ h("span", {
+					className: "text-sm text-muted-foreground",
+					children: a(e.duration)
+				})]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "flex items-baseline gap-1 mb-1",
+				children: [/* @__PURE__ */ h("span", {
+					className: "text-3xl font-bold text-foreground",
+					children: (() => {
+						let t = e.pricingModel === n.PER_SEAT && e.pricePerSeat ? {
+							price: e.pricePerSeat,
+							currency: e.currency
+						} : {
+							price: e.price,
+							currency: e.currency
+						}, { price: i, currency: a } = l(t.price, t.currency, e.currencyPrices, m);
+						return r(i, a);
+					})()
+				}), /* @__PURE__ */ g("span", {
+					className: "text-muted-foreground",
+					children: ["/ ", i(e.duration)]
+				})]
+			}),
+			e.pricingModel === n.PER_SEAT && /* @__PURE__ */ g("p", {
+				className: "text-xs text-muted-foreground mb-4",
+				children: ["per seat", e.minSeats ? ` · min ${e.minSeats} seat${e.minSeats === 1 ? "" : "s"}` : ""]
+			}),
+			e.pricingModel !== n.PER_SEAT && /* @__PURE__ */ h("div", { className: "mb-6" }),
+			_.length > 0 && /* @__PURE__ */ g("ul", {
+				className: "space-y-2 mb-6",
+				children: [_.slice(0, 5).map((e) => /* @__PURE__ */ g("li", {
+					className: "flex items-center justify-between text-sm",
+					children: [/* @__PURE__ */ g("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ h("svg", {
+							className: "w-5 h-5 text-status-success-text 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"
+							})
+						}), /* @__PURE__ */ h("span", {
+							className: "text-foreground",
+							children: e.name
+						})]
+					}), /* @__PURE__ */ h("span", {
+						className: "font-medium text-foreground",
+						children: e.totalValue.toLocaleString()
+					})]
+				}, e.quotaId)), _.length > 5 && /* @__PURE__ */ g("li", {
+					className: "text-sm text-muted-foreground pl-7",
+					children: [
+						"+",
+						_.length - 5,
+						" more quotas"
+					]
+				})]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "space-y-2 pt-4 border-t border-border mt-auto",
+				children: [c && e.isActive && /* @__PURE__ */ h("button", {
+					onClick: () => t(e),
+					className: "w-full px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					children: "Select Plan"
+				}), /* @__PURE__ */ g("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ h("button", {
+						onClick: () => o(e),
+						className: "flex-1 px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+						children: "View Details"
+					}), d && /* @__PURE__ */ h("button", {
+						onClick: () => s(e),
+						disabled: f,
+						className: `px-4 py-2 text-sm font-medium border border-border rounded-md transition-colors ${e.isActive ? "text-destructive hover:bg-destructive/10" : "text-status-success-text hover:bg-status-success-bg-subtle"}`,
+						children: e.isActive ? "Deactivate" : "Activate"
+					})]
+				})]
+			})
+		]
+	});
+}, x = ({ plan: e, onSelect: t, onView: n, onToggle: a, canSelect: o, canManage: s, isToggling: c }) => {
+	let d = u(), f = p(() => v(e.features || []), [e.features]);
+	return /* @__PURE__ */ g("div", {
+		className: `flex items-center gap-4 p-4 border rounded-lg transition-all hover:shadow-sm ${e.isActive ? "border-border bg-card" : "border-dashed border-muted-foreground/30 bg-muted/30"}`,
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ g("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ h("h3", {
+						className: "font-semibold text-foreground truncate",
+						children: e.name
+					}), !e.isActive && /* @__PURE__ */ h("span", {
+						className: "px-2 py-0.5 text-xs font-medium bg-muted text-muted-foreground rounded",
+						children: "Inactive"
+					})]
+				}), /* @__PURE__ */ g("p", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						f.length,
+						" quota",
+						f.length === 1 ? "" : "s",
+						" included"
+					]
+				})]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "text-right",
+				children: [/* @__PURE__ */ h("div", {
+					className: "font-semibold text-foreground",
+					children: (() => {
+						let { price: t, currency: n } = l(e.price, e.currency, e.currencyPrices, d);
+						return r(t, n);
+					})()
+				}), /* @__PURE__ */ g("div", {
+					className: "text-sm text-muted-foreground",
+					children: ["per ", i(e.duration)]
+				})]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "flex items-center gap-2",
+				children: [
+					o && e.isActive && /* @__PURE__ */ h("button", {
+						onClick: () => t(e),
+						className: "px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+						children: "Select"
+					}),
+					/* @__PURE__ */ h("button", {
+						onClick: () => n(e),
+						className: "px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+						children: "View"
+					}),
+					s && /* @__PURE__ */ h("button", {
+						onClick: () => a(e),
+						disabled: c,
+						className: `px-3 py-1.5 text-sm font-medium border border-border rounded-md transition-colors ${e.isActive ? "text-destructive hover:bg-destructive/10" : "text-status-success-text hover:bg-status-success-bg-subtle"}`,
+						children: e.isActive ? "Deactivate" : "Activate"
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { y as PlansListPage };
+
+//# sourceMappingURL=PlansListPage.js.map

package/dist/billing/modules/plans/pages/PlansListPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlansListPage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlansListPage.tsx"],"sourcesContent":["/**\n * Plans Module - Plans List Page\n * Displays all available pricing plans\n */\n\nimport { useState, useMemo, type FC } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlans, usePlanMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, ServerError } from '../../../shared/components';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n  isServerError,\n} from '../../../shared/utils';\nimport type { Plan, PlanDuration, PlanFeature } from '../../../shared/types';\nimport { PricingModel } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  useDefaultBillingCurrency,\n  getDisplayPrice,\n} from '../../../hooks/useDefaultBillingCurrency';\n\ntype ViewMode = 'grid' | 'list';\n\n/**\n * Combined quota info for display\n */\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  totalValue: number;\n}\n\n/**\n * Combines duplicate quotas by quota ID and aggregates their values\n */\nfunction combineQuotas(features: PlanFeature[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n\n  for (const feature of features) {\n    if (!feature.quota) continue;\n\n    const quotaId = feature.quota.id;\n    const limits = feature.quota.limits as { value?: number } | null;\n    const limitValue = limits?.value ?? 0;\n\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        totalValue: limitValue,\n      });\n    }\n  }\n\n  return Array.from(quotaMap.values());\n}\n\nexport const PlansListPage: 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 { plans, isLoading, error, refetch } = usePlans();\n  const { togglePlan, isToggling } = usePlanMutations();\n\n  const [viewMode, setViewMode] = useState<ViewMode>('grid');\n  const [showInactive, setShowInactive] = useState(false);\n  const [billingInterval, setBillingInterval] = useState<PlanDuration | 'all'>('all');\n\n  // Permission check\n  if (!permissions.canViewPlans) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.plans.noViewPermission',\n          \"You don't have permission to view pricing plans.\"\n        )}\n      />\n    );\n  }\n\n  // Filter plans\n  const filteredPlans = plans.filter((plan) => {\n    if (!showInactive && !plan.isActive) return false;\n    if (billingInterval !== 'all' && plan.duration !== billingInterval) return false;\n    return true;\n  });\n\n  const handleTogglePlan = async (plan: Plan) => {\n    if (!permissions.canManagePlans) return;\n    try {\n      await togglePlan(plan.id, !plan.isActive);\n      await refetch();\n    } catch (err) {\n      console.error('Failed to toggle plan:', err);\n    }\n  };\n\n  const handleSelectPlan = (plan: Plan) => {\n    navigateTo(`/checkout/${plan.id}`);\n  };\n\n  const handleViewPlan = (plan: Plan) => {\n    navigateTo(`/plans/${plan.id}`);\n  };\n\n  // Loading state\n  if (isLoading && plans.length === 0) {\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=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"border border-border rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-24 bg-muted animate-pulse rounded\" />\n              <div className=\"h-8 w-32 bg-muted animate-pulse rounded\" />\n              <div className=\"space-y-2\">\n                {[1, 2, 3, 4].map((j) => (\n                  <div key={j} className=\"h-4 w-full bg-muted animate-pulse rounded\" />\n                ))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Error state - show server error component for 500 errors\n  if (error) {\n    if (isServerError(error)) {\n      return (\n        <div className=\"p-6\">\n          <ServerError\n            title={tr('billing.plans.serverUnavailable', 'Server Unavailable')}\n            message={tr(\n              'billing.plans.serverUnavailableMessage',\n              'Unable to load pricing plans. The server might be down or experiencing issues.'\n            )}\n            onRetry={() => refetch()}\n            showRetry\n          />\n        </div>\n      );\n    }\n    // Generic error for non-server errors\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\">\n            {tr('billing.plans.failedToLoad', 'Failed to load plans')}\n          </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.plans.title', 'Pricing Plans')}\n          </h1>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {tr('billing.plans.subtitle', 'Choose the plan that best fits your needs')}\n          </p>\n        </div>\n\n        {permissions.canManagePlans && (\n          <button\n            onClick={() => navigateTo('/plans/new')}\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            Create Plan\n          </button>\n        )}\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border\">\n        {/* Billing Interval Toggle */}\n        <div className=\"inline-flex rounded-lg border border-border p-1 bg-muted/50\">\n          <button\n            onClick={() => setBillingInterval('all')}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              billingInterval === 'all'\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n          >\n            All\n          </button>\n          <button\n            onClick={() => setBillingInterval('monthly' as PlanDuration)}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              billingInterval === 'monthly'\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n          >\n            Monthly\n          </button>\n          <button\n            onClick={() => setBillingInterval('yearly' as PlanDuration)}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              billingInterval === 'yearly'\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n          >\n            Yearly\n          </button>\n        </div>\n\n        {/* Show Inactive Toggle */}\n        {permissions.canManagePlans && (\n          <label className=\"flex items-center gap-2 text-sm cursor-pointer\">\n            <input\n              type=\"checkbox\"\n              checked={showInactive}\n              onChange={(e) => setShowInactive(e.target.checked)}\n              className=\"w-4 h-4 rounded border-border text-primary focus:ring-primary\"\n            />\n            <span className=\"text-muted-foreground\">\n              {tr('billing.plans.showInactive', 'Show inactive plans')}\n            </span>\n          </label>\n        )}\n\n        {/* View Mode Toggle */}\n        <div className=\"ml-auto inline-flex rounded-lg border border-border p-1 bg-muted/50\">\n          <button\n            onClick={() => setViewMode('grid')}\n            className={`p-1.5 rounded-md transition-colors ${\n              viewMode === 'grid'\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n            title=\"Grid view\"\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=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\"\n              />\n            </svg>\n          </button>\n          <button\n            onClick={() => setViewMode('list')}\n            className={`p-1.5 rounded-md transition-colors ${\n              viewMode === 'list'\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n            title=\"List view\"\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=\"M4 6h16M4 12h16M4 18h16\"\n              />\n            </svg>\n          </button>\n        </div>\n      </div>\n\n      {/* Plans Grid/List */}\n      {filteredPlans.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=\"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          <h3 className=\"text-lg font-medium text-foreground\">\n            {tr('billing.plans.noPlansFound', 'No plans found')}\n          </h3>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {showInactive\n              ? tr('billing.plans.noPlansFiltered', 'No plans match your current filters.')\n              : tr('billing.plans.noActivePlans', 'There are no active plans available.')}\n          </p>\n          {permissions.canManagePlans && (\n            <button\n              onClick={() => navigateTo('/plans/new')}\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              {tr('billing.plans.createFirstPlan', 'Create your first plan')}\n            </button>\n          )}\n        </div>\n      ) : viewMode === 'grid' ? (\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n          {filteredPlans.map((plan) => (\n            <PlanCard\n              key={plan.id}\n              plan={plan}\n              onSelect={handleSelectPlan}\n              onView={handleViewPlan}\n              onToggle={handleTogglePlan}\n              canSelect={permissions.canCreateSubscription}\n              canManage={permissions.canManagePlans}\n              isToggling={isToggling}\n            />\n          ))}\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {filteredPlans.map((plan) => (\n            <PlanRow\n              key={plan.id}\n              plan={plan}\n              onSelect={handleSelectPlan}\n              onView={handleViewPlan}\n              onToggle={handleTogglePlan}\n              canSelect={permissions.canCreateSubscription}\n              canManage={permissions.canManagePlans}\n              isToggling={isToggling}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Plan Card Component\n// ============================================================================\n\ninterface PlanCardProps {\n  plan: Plan;\n  onSelect: (plan: Plan) => void;\n  onView: (plan: Plan) => void;\n  onToggle: (plan: Plan) => void;\n  canSelect: boolean;\n  canManage: boolean;\n  isToggling: boolean;\n}\n\nconst PlanCard: FC<PlanCardProps> = ({\n  plan,\n  onSelect,\n  onView,\n  onToggle,\n  canSelect,\n  canManage,\n  isToggling,\n}) => {\n  const displayCurrency = useDefaultBillingCurrency();\n  const combinedQuotas = useMemo(() => {\n    const features = plan.features || [];\n    return combineQuotas(features);\n  }, [plan.features]);\n\n  return (\n    <div\n      className={`relative border rounded-lg p-6 transition-all hover:shadow-md flex flex-col h-full ${\n        plan.isActive\n          ? 'border-border bg-card'\n          : 'border-dashed border-muted-foreground/30 bg-muted/30'\n      }`}\n    >\n      {/* Status Badge */}\n      {!plan.isActive && (\n        <span className=\"absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-muted text-muted-foreground rounded\">\n          Inactive\n        </span>\n      )}\n\n      {/* Plan Name */}\n      <div className=\"mb-4\">\n        <h3 className=\"text-xl font-bold text-foreground\">{plan.name}</h3>\n        <span className=\"text-sm text-muted-foreground\">\n          {formatPlanDurationLabel(plan.duration)}\n        </span>\n      </div>\n\n      {/* Price */}\n      <div className=\"flex items-baseline gap-1 mb-1\">\n        <span className=\"text-3xl font-bold text-foreground\">\n          {(() => {\n            const base =\n              plan.pricingModel === PricingModel.PER_SEAT && plan.pricePerSeat\n                ? { price: plan.pricePerSeat, currency: plan.currency }\n                : { price: plan.price, currency: plan.currency };\n            const { price, currency } = getDisplayPrice(\n              base.price,\n              base.currency,\n              plan.currencyPrices as Record<string, number> | null,\n              displayCurrency\n            );\n            return formatCurrency(price, currency);\n          })()}\n        </span>\n        <span className=\"text-muted-foreground\">/ {formatPlanDuration(plan.duration)}</span>\n      </div>\n      {plan.pricingModel === PricingModel.PER_SEAT && (\n        <p className=\"text-xs text-muted-foreground mb-4\">\n          per seat\n          {plan.minSeats ? ` · min ${plan.minSeats} seat${plan.minSeats !== 1 ? 's' : ''}` : ''}\n        </p>\n      )}\n      {plan.pricingModel !== PricingModel.PER_SEAT && <div className=\"mb-6\" />}\n\n      {/* Features - Combined Quotas */}\n      {combinedQuotas.length > 0 && (\n        <ul className=\"space-y-2 mb-6\">\n          {combinedQuotas.slice(0, 5).map((quota) => (\n            <li key={quota.quotaId} className=\"flex items-center justify-between text-sm\">\n              <div className=\"flex items-center gap-2\">\n                <svg\n                  className=\"w-5 h-5 text-status-success-text 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                <span className=\"text-foreground\">{quota.name}</span>\n              </div>\n              <span className=\"font-medium text-foreground\">\n                {quota.totalValue.toLocaleString()}\n              </span>\n            </li>\n          ))}\n          {combinedQuotas.length > 5 && (\n            <li className=\"text-sm text-muted-foreground pl-7\">\n              +{combinedQuotas.length - 5} more quotas\n            </li>\n          )}\n        </ul>\n      )}\n\n      {/* Actions - pushed to bottom with mt-auto */}\n      <div className=\"space-y-2 pt-4 border-t border-border mt-auto\">\n        {canSelect && plan.isActive && (\n          <button\n            onClick={() => onSelect(plan)}\n            className=\"w-full px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n          >\n            Select Plan\n          </button>\n        )}\n        <div className=\"flex gap-2\">\n          <button\n            onClick={() => onView(plan)}\n            className=\"flex-1 px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n          >\n            View Details\n          </button>\n          {canManage && (\n            <button\n              onClick={() => onToggle(plan)}\n              disabled={isToggling}\n              className={`px-4 py-2 text-sm font-medium border border-border rounded-md transition-colors ${\n                plan.isActive\n                  ? 'text-destructive hover:bg-destructive/10'\n                  : 'text-status-success-text hover:bg-status-success-bg-subtle'\n              }`}\n            >\n              {plan.isActive ? 'Deactivate' : 'Activate'}\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\n// ============================================================================\n// Plan Row Component (List View)\n// ============================================================================\n\ninterface PlanRowProps {\n  plan: Plan;\n  onSelect: (plan: Plan) => void;\n  onView: (plan: Plan) => void;\n  onToggle: (plan: Plan) => void;\n  canSelect: boolean;\n  canManage: boolean;\n  isToggling: boolean;\n}\n\nconst PlanRow: FC<PlanRowProps> = ({\n  plan,\n  onSelect,\n  onView,\n  onToggle,\n  canSelect,\n  canManage,\n  isToggling,\n}) => {\n  const displayCurrency = useDefaultBillingCurrency();\n  const combinedQuotas = useMemo(() => {\n    const features = plan.features || [];\n    return combineQuotas(features);\n  }, [plan.features]);\n\n  return (\n    <div\n      className={`flex items-center gap-4 p-4 border rounded-lg transition-all hover:shadow-sm ${\n        plan.isActive\n          ? 'border-border bg-card'\n          : 'border-dashed border-muted-foreground/30 bg-muted/30'\n      }`}\n    >\n      {/* Plan Info */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2\">\n          <h3 className=\"font-semibold text-foreground truncate\">{plan.name}</h3>\n          {!plan.isActive && (\n            <span className=\"px-2 py-0.5 text-xs font-medium bg-muted text-muted-foreground rounded\">\n              Inactive\n            </span>\n          )}\n        </div>\n        <p className=\"text-sm text-muted-foreground\">\n          {combinedQuotas.length} quota{combinedQuotas.length !== 1 ? 's' : ''} included\n        </p>\n      </div>\n\n      {/* Price */}\n      <div className=\"text-right\">\n        <div className=\"font-semibold text-foreground\">\n          {(() => {\n            const { price, currency } = getDisplayPrice(\n              plan.price,\n              plan.currency,\n              plan.currencyPrices as Record<string, number> | null,\n              displayCurrency\n            );\n            return formatCurrency(price, currency);\n          })()}\n        </div>\n        <div className=\"text-sm text-muted-foreground\">per {formatPlanDuration(plan.duration)}</div>\n      </div>\n\n      {/* Actions */}\n      <div className=\"flex items-center gap-2\">\n        {canSelect && plan.isActive && (\n          <button\n            onClick={() => onSelect(plan)}\n            className=\"px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n          >\n            Select\n          </button>\n        )}\n        <button\n          onClick={() => onView(plan)}\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        {canManage && (\n          <button\n            onClick={() => onToggle(plan)}\n            disabled={isToggling}\n            className={`px-3 py-1.5 text-sm font-medium border border-border rounded-md transition-colors ${\n              plan.isActive\n                ? 'text-destructive hover:bg-destructive/10'\n                : 'text-status-success-text hover:bg-status-success-bg-subtle'\n            }`}\n          >\n            {plan.isActive ? 'Deactivate' : 'Activate'}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAsCA,SAAS,EAAc,GAA0C;CAC/D,IAAM,oBAAW,IAAI,KAA4B;AAEjD,MAAK,IAAM,KAAW,GAAU;AAC9B,MAAI,CAAC,EAAQ,MAAO;EAEpB,IAAM,IAAU,EAAQ,MAAM,IAExB,IADS,EAAQ,MAAM,QACF,SAAS,GAE9B,IAAW,EAAS,IAAI,EAAQ;AACtC,EAAI,IACF,EAAS,cAAc,IAEvB,EAAS,IAAI,GAAS;GACpB;GACA,MAAM,EAAQ,MAAM,QAAQ;GAC5B,YAAY;GACb,CAAC;;AAIN,QAAO,MAAM,KAAK,EAAS,QAAQ,CAAC;;AAGtC,IAAa,UAA0B;CACrC,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,IAAa,GAAoB,EACjC,IAAc,GAAuB,EACrC,EAAE,UAAO,cAAW,UAAO,eAAY,GAAU,EACjD,EAAE,eAAY,kBAAe,GAAkB,EAE/C,CAAC,GAAU,KAAe,EAAmB,OAAO,EACpD,CAAC,GAAc,KAAmB,EAAS,GAAM,EACjD,CAAC,GAAiB,KAAsB,EAA+B,MAAM;AAGnF,KAAI,CAAC,EAAY,aACf,QACE,kBAAC,GAAD,EACE,SAAS,EACP,kCACA,mDACD,EACD,CAAA;CAKN,IAAM,IAAgB,EAAM,QAAQ,MAElC,EADI,CAAC,KAAgB,CAAC,EAAK,YACvB,MAAoB,SAAS,EAAK,aAAa,GAEnD,EAEI,IAAmB,OAAO,MAAe;AACxC,QAAY,eACjB,KAAI;AAEF,GADA,MAAM,EAAW,EAAK,IAAI,CAAC,EAAK,SAAS,EACzC,MAAM,GAAS;WACR,GAAK;AACZ,WAAQ,MAAM,0BAA0B,EAAI;;IAI1C,KAAoB,MAAe;AACvC,IAAW,aAAa,EAAK,KAAK;IAG9B,KAAkB,MAAe;AACrC,IAAW,UAAU,EAAK,KAAK;;AA4EjC,QAxEI,KAAa,EAAM,WAAW,IAE9B,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA,EAC3D,kBAAC,OAAD;GAAK,WAAU;aACZ;IAAC;IAAG;IAAG;IAAE,CAAC,KAAK,MACd,kBAAC,OAAD;IAAa,WAAU;cAAvB;KACE,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA;KAC3D,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA;KAC3D,kBAAC,OAAD;MAAK,WAAU;gBACZ;OAAC;OAAG;OAAG;OAAG;OAAE,CAAC,KAAK,MACjB,kBAAC,OAAD,EAAa,WAAU,6CAA8C,EAA3D,EAA2D,CACrE;MACE,CAAA;KACF;MARI,EAQJ,CACN;GACE,CAAA,CACF;MAKN,IACE,EAAc,EAAM,GAEpB,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,OAAO,EAAG,mCAAmC,qBAAqB;GAClE,SAAS,EACP,0CACA,iFACD;GACD,eAAe,GAAS;GACxB,WAAA;GACA,CAAA;EACE,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,SAAQ;MACR,QAAO;gBAEP,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA;KACF,CAAA;IACN,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,8BAA8B,uBAAuB;KACtD,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eAAiC,EAAM;KAAY,CAAA;IAChE,kBAAC,UAAD;KACE,eAAe,GAAS;KACxB,WAAU;eACX;KAEQ,CAAA;IACL;;EACF,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,uBAAuB,gBAAgB;KACxC,CAAA,EACL,kBAAC,KAAD;KAAG,WAAU;eACV,EAAG,0BAA0B,4CAA4C;KACxE,CAAA,CACA,EAAA,CAAA,EAEL,EAAY,kBACX,kBAAC,UAAD;KACE,eAAe,EAAW,aAAa;KACvC,WAAU;eAFZ,CAIE,kBAAC,OAAD;MAAK,WAAU;MAAU,MAAK;MAAO,SAAQ;MAAY,QAAO;gBAC9D,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA,EAAA,cAEC;OAEP;;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf;KAEE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,UAAD;QACE,eAAe,EAAmB,MAAM;QACxC,WAAW,gEACT,MAAoB,QAChB,4CACA;kBAEP;QAEQ,CAAA;OACT,kBAAC,UAAD;QACE,eAAe,EAAmB,UAA0B;QAC5D,WAAW,gEACT,MAAoB,YAChB,4CACA;kBAEP;QAEQ,CAAA;OACT,kBAAC,UAAD;QACE,eAAe,EAAmB,SAAyB;QAC3D,WAAW,gEACT,MAAoB,WAChB,4CACA;kBAEP;QAEQ,CAAA;OACL;;KAGL,EAAY,kBACX,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,SAAS;OACT,WAAW,MAAM,EAAgB,EAAE,OAAO,QAAQ;OAClD,WAAU;OACV,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAG,8BAA8B,sBAAsB;OACnD,CAAA,CACD;;KAIV,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,eAAe,EAAY,OAAO;OAClC,WAAW,sCACT,MAAa,SACT,4CACA;OAEN,OAAM;iBAEN,kBAAC,OAAD;QAAK,WAAU;QAAU,MAAK;QAAO,SAAQ;QAAY,QAAO;kBAC9D,kBAAC,QAAD;SACE,eAAc;SACd,gBAAe;SACf,aAAa;SACb,GAAE;SACF,CAAA;QACE,CAAA;OACC,CAAA,EACT,kBAAC,UAAD;OACE,eAAe,EAAY,OAAO;OAClC,WAAW,sCACT,MAAa,SACT,4CACA;OAEN,OAAM;iBAEN,kBAAC,OAAD;QAAK,WAAU;QAAU,MAAK;QAAO,SAAQ;QAAY,QAAO;kBAC9D,kBAAC,QAAD;SACE,eAAc;SACd,gBAAe;SACf,aAAa;SACb,GAAE;SACF,CAAA;QACE,CAAA;OACC,CAAA,CACL;;KACF;;GAGL,EAAc,WAAW,IACxB,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD;OACE,WAAU;OACV,MAAK;OACL,SAAQ;OACR,QAAO;iBAEP,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,aAAa;QACb,GAAE;QACF,CAAA;OACE,CAAA;MACF,CAAA;KACN,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,8BAA8B,iBAAiB;MAChD,CAAA;KACL,kBAAC,KAAD;MAAG,WAAU;gBACV,IACG,EAAG,iCAAiC,uCAAuC,GAC3E,EAAG,+BAA+B,uCAAuC;MAC3E,CAAA;KACH,EAAY,kBACX,kBAAC,UAAD;MACE,eAAe,EAAW,aAAa;MACvC,WAAU;gBAET,EAAG,iCAAiC,yBAAyB;MACvD,CAAA;KAEP;QACJ,MAAa,SACf,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAc,KAAK,MAClB,kBAAC,GAAD;KAEQ;KACN,UAAU;KACV,QAAQ;KACR,UAAU;KACV,WAAW,EAAY;KACvB,WAAW,EAAY;KACX;KACZ,EARK,EAAK,GAQV,CACF;IACE,CAAA,GAEN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAc,KAAK,MAClB,kBAAC,GAAD;KAEQ;KACN,UAAU;KACV,QAAQ;KACR,UAAU;KACV,WAAW,EAAY;KACvB,WAAW,EAAY;KACX;KACZ,EARK,EAAK,GAQV,CACF;IACE,CAAA;GAEJ;;GAkBJ,KAA+B,EACnC,SACA,aACA,WACA,aACA,cACA,cACA,oBACI;CACJ,IAAM,IAAkB,GAA2B,EAC7C,IAAiB,QAEd,EADU,EAAK,YAAY,EAAE,CACN,EAC7B,CAAC,EAAK,SAAS,CAAC;AAEnB,QACE,kBAAC,OAAD;EACE,WAAW,sFACT,EAAK,WACD,0BACA;YAJR;GAQG,CAAC,EAAK,YACL,kBAAC,QAAD;IAAM,WAAU;cAA8F;IAEvG,CAAA;GAIT,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAAqC,EAAK;KAAU,CAAA,EAClE,kBAAC,QAAD;KAAM,WAAU;eACb,EAAwB,EAAK,SAAS;KAClC,CAAA,CACH;;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;sBACN;MACN,IAAM,IACJ,EAAK,iBAAiB,EAAa,YAAY,EAAK,eAChD;OAAE,OAAO,EAAK;OAAc,UAAU,EAAK;OAAU,GACrD;OAAE,OAAO,EAAK;OAAO,UAAU,EAAK;OAAU,EAC9C,EAAE,UAAO,gBAAa,EAC1B,EAAK,OACL,EAAK,UACL,EAAK,gBACL,EACD;AACD,aAAO,EAAe,GAAO,EAAS;SACpC;KACC,CAAA,EACP,kBAAC,QAAD;KAAM,WAAU;eAAhB,CAAwC,MAAG,EAAmB,EAAK,SAAS,CAAQ;OAChF;;GACL,EAAK,iBAAiB,EAAa,YAClC,kBAAC,KAAD;IAAG,WAAU;cAAb,CAAkD,YAE/C,EAAK,WAAW,UAAU,EAAK,SAAS,OAAO,EAAK,aAAa,IAAU,KAAN,QAAa,GACjF;;GAEL,EAAK,iBAAiB,EAAa,YAAY,kBAAC,OAAD,EAAK,WAAU,QAAS,CAAA;GAGvE,EAAe,SAAS,KACvB,kBAAC,MAAD;IAAI,WAAU;cAAd,CACG,EAAe,MAAM,GAAG,EAAE,CAAC,KAAK,MAC/B,kBAAC,MAAD;KAAwB,WAAU;eAAlC,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OACE,WAAU;OACV,MAAK;OACL,SAAQ;OACR,QAAO;iBAEP,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,aAAa;QACb,GAAE;QACF,CAAA;OACE,CAAA,EACN,kBAAC,QAAD;OAAM,WAAU;iBAAmB,EAAM;OAAY,CAAA,CACjD;SACN,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAM,WAAW,gBAAgB;MAC7B,CAAA,CACJ;OApBI,EAAM,QAoBV,CACL,EACD,EAAe,SAAS,KACvB,kBAAC,MAAD;KAAI,WAAU;eAAd;MAAmD;MAC/C,EAAe,SAAS;MAAE;MACzB;OAEJ;;GAIP,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,KAAa,EAAK,YACjB,kBAAC,UAAD;KACE,eAAe,EAAS,EAAK;KAC7B,WAAU;eACX;KAEQ,CAAA,EAEX,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,eAAe,EAAO,EAAK;MAC3B,WAAU;gBACX;MAEQ,CAAA,EACR,KACC,kBAAC,UAAD;MACE,eAAe,EAAS,EAAK;MAC7B,UAAU;MACV,WAAW,mFACT,EAAK,WACD,6CACA;gBAGL,EAAK,WAAW,eAAe;MACzB,CAAA,CAEP;OACF;;GACF;;GAkBJ,KAA6B,EACjC,SACA,aACA,WACA,aACA,cACA,cACA,oBACI;CACJ,IAAM,IAAkB,GAA2B,EAC7C,IAAiB,QAEd,EADU,EAAK,YAAY,EAAE,CACN,EAC7B,CAAC,EAAK,SAAS,CAAC;AAEnB,QACE,kBAAC,OAAD;EACE,WAAW,gFACT,EAAK,WACD,0BACA;YAJR;GAQE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAA0C,EAAK;MAAU,CAAA,EACtE,CAAC,EAAK,YACL,kBAAC,QAAD;MAAM,WAAU;gBAAyE;MAElF,CAAA,CAEL;QACN,kBAAC,KAAD;KAAG,WAAU;eAAb;MACG,EAAe;MAAO;MAAO,EAAe,WAAW,IAAU,KAAN;MAAS;MACnE;OACA;;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;sBACL;MACN,IAAM,EAAE,UAAO,gBAAa,EAC1B,EAAK,OACL,EAAK,UACL,EAAK,gBACL,EACD;AACD,aAAO,EAAe,GAAO,EAAS;SACpC;KACA,CAAA,EACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CAA+C,QAAK,EAAmB,EAAK,SAAS,CAAO;OACxF;;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,KAAa,EAAK,YACjB,kBAAC,UAAD;MACE,eAAe,EAAS,EAAK;MAC7B,WAAU;gBACX;MAEQ,CAAA;KAEX,kBAAC,UAAD;MACE,eAAe,EAAO,EAAK;MAC3B,WAAU;gBACX;MAEQ,CAAA;KACR,KACC,kBAAC,UAAD;MACE,eAAe,EAAS,EAAK;MAC7B,UAAU;MACV,WAAW,qFACT,EAAK,WACD,6CACA;gBAGL,EAAK,WAAW,eAAe;MACzB,CAAA;KAEP;;GACF"}

package/dist/billing/modules/plans/pages/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Plans Module - Pages
+ * Re-exports all page components
+ */
+export { PlansListPage } from './PlansListPage';
+export { PlanDetailPage } from './PlanDetailPage';
+export { PlanEditPage } from './PlanEditPage';
+export { PlanCreatePage } from './PlanCreatePage';
+export { PlansBrowsePage } from './PlansBrowsePage';
+export { PlanBrowseDetailPage } from './PlanBrowseDetailPage';
+//# sourceMappingURL=index.d.ts.map

package/dist/billing/modules/plans/pages/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/plans/pages/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/billing/modules/plans/pages/index.js

@@ -0,0 +1,6 @@
+import "./PlansListPage.js";
+import "./PlanDetailPage.js";
+import "./PlanEditPage.js";
+import "./PlanCreatePage.js";
+import "./PlansBrowsePage.js";
+import "./PlanBrowseDetailPage.js";

package/dist/billing/modules/quota/hooks/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Quota Module - Hooks
+ */
+export { useQuotaTemplates, useQuotaTemplate, useQuotaTemplateMutations, } from './useQuotaTemplates';
+export { useQuotaAssignments, useQuotaAssignmentsWithAnalytics, useQuotaAnalytics, useBillingAccountQuotasSummary, useQuotaCheck, useQuotaMutations, } from './useQuota';
+//# sourceMappingURL=index.d.ts.map

package/dist/billing/modules/quota/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/quota/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EACL,mBAAmB,EACnB,gCAAgC,EAChC,iBAAiB,EACjB,8BAA8B,EAC9B,aAAa,EACb,iBAAiB,GAClB,MAAM,YAAY,CAAC"}

package/dist/billing/modules/quota/hooks/index.js

@@ -0,0 +1,2 @@
+import "./useQuota.js";
+import "./useQuotaTemplates.js";

package/dist/billing/modules/quota/hooks/useQuota.d.ts

@@ -0,0 +1,102 @@
+import { QuotaAssignment, QuotaAssignmentWithAnalytics, QuotaUsageAnalytics, QuotaStatus, AnalyticsPeriod, BillingAccountQuotasSummary } from '../../../shared/types';
+
+interface UseQuotaAssignmentsOptions {
+    billingAccountId: string;
+    page?: number;
+    pageSize?: number;
+    searchQuery?: string;
+    status?: QuotaStatus[];
+    fromDate?: string;
+    toDate?: string;
+    sortBy?: string;
+    sortOrder?: 'ASC' | 'DESC';
+}
+interface UseQuotaAssignmentsResult {
+    quotaAssignments: QuotaAssignment[];
+    pagination: {
+        page: number;
+        pageSize: number;
+        totalCount: number;
+        totalPages: number;
+    };
+    isLoading: boolean;
+    error: Error | undefined;
+    refetch: () => Promise<void>;
+}
+interface UseQuotaAssignmentsWithAnalyticsResult {
+    quotaAssignments: QuotaAssignmentWithAnalytics[];
+    pagination: {
+        page: number;
+        pageSize: number;
+        totalCount: number;
+        totalPages: number;
+    };
+    isLoading: boolean;
+    error: Error | undefined;
+    refetch: () => Promise<void>;
+}
+/**
+ * Hook for fetching quota assignments
+ */
+export declare function useQuotaAssignments(options: UseQuotaAssignmentsOptions): UseQuotaAssignmentsResult;
+/**
+ * Hook for fetching quota assignments with analytics
+ */
+export declare function useQuotaAssignmentsWithAnalytics(options: UseQuotaAssignmentsOptions): UseQuotaAssignmentsWithAnalyticsResult;
+/**
+ * Hook for fetching quota analytics
+ */
+export declare function useQuotaAnalytics(quotaAssignmentId: string | undefined, period?: AnalyticsPeriod): {
+    analytics: QuotaUsageAnalytics | null;
+    isLoading: boolean;
+    error: Error | undefined;
+    refetch: () => Promise<void>;
+};
+/**
+ * Hook for fetching billing account quotas summary
+ */
+export declare function useBillingAccountQuotasSummary(billingAccountId: string | undefined, productId?: string): {
+    summary: BillingAccountQuotasSummary | null;
+    isLoading: boolean;
+    error: Error | undefined;
+    refetch: () => Promise<void>;
+};
+/**
+ * Hook for checking quota exhaustion
+ */
+export declare function useQuotaCheck(billingAccountId: string, quotaName: string, productId?: string): {
+    limitLeft: any;
+    noLimit: any;
+    isExhausted: boolean;
+    isLoading: boolean;
+    error: Error | undefined;
+};
+/**
+ * Hook for quota mutations
+ */
+export declare function useQuotaMutations(): {
+    addUsage: (params: {
+        billingAccountId: string;
+        quotaName: string;
+        value: number;
+        description: string;
+        userId?: string;
+        productId?: string;
+        hash?: string;
+        tags?: Record<string, unknown>;
+    }) => Promise<boolean>;
+    freeUpUsage: (params: {
+        billingAccountId: string;
+        quotaName: string;
+        value: number;
+        description?: string;
+        userId?: string;
+        productId?: string;
+        hash?: string;
+        tags?: Record<string, unknown>;
+    }) => Promise<boolean>;
+    isAdding: boolean;
+    isFreeing: boolean;
+};
+export {};
+//# sourceMappingURL=useQuota.d.ts.map