@burdenoff/microfe-billing 2026.625.3 → 2026.625.5

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

@@ -11,14 +11,15 @@ import "../hooks/index.js";
 import { useState as c } from "react";
 import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 import { useI18n as f } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { PagePurpose as p } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/plans/pages/PlanCreatePage.tsx
-var p = () => {
-	let { t: p } = f(), m = (e, t) => {
-		let n = p(e);
+var m = () => {
+	let { t: m } = f(), h = (e, t) => {
+		let n = m(e);
 		return n === e ? t : n;
-	}, h = a(), g = i(), { quotas: _, isLoading: v } = s({ onlyActive: !0 }), { createPlan: y, isCreating: b } = o(), [x, S] = c(""), [C, w] = c(""), [T, E] = c("USD"), [D, O] = c(r.MONTHLY), [k, A] = c(""), [j, M] = c(!0), [N, P] = c([]), [F, I] = c([]), [L, R] = c(null), [z, B] = c(!1);
-	if (!g.canManagePlans) return /* @__PURE__ */ u(e, { message: m("billing.plans.noCreatePermission", "You don't have permission to create plans.") });
-	if (v) return /* @__PURE__ */ d("div", {
+	}, g = a(), _ = i(), { quotas: v, isLoading: y } = s({ onlyActive: !0 }), { createPlan: b, isCreating: x } = o(), [S, C] = c(""), [w, T] = c(""), [E, D] = c("USD"), [O, k] = c(r.MONTHLY), [A, j] = c(""), [M, N] = c(!0), [P, F] = c([]), [I, L] = c([]), [R, z] = c(null), [B, V] = c(!1);
+	if (!_.canManagePlans) return /* @__PURE__ */ u(e, { message: h("billing.plans.noCreatePermission", "You don't have permission to create plans.") });
+	if (y) return /* @__PURE__ */ d("div", {
 		className: "space-y-6 p-6",
 		children: [/* @__PURE__ */ u("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ u("div", {
 			className: "max-w-2xl space-y-4",
@@ -31,356 +32,360 @@ var p = () => {
 			].map((e) => /* @__PURE__ */ u("div", { className: "h-16 bg-bg-sunken animate-pulse rounded" }, e))
 		})]
 	});
-	let V = () => {
-		P([{
+	let H = () => {
+		F([{
 			quotaId: "",
 			quantity: 1
-		}, ...N]);
-	}, H = (e) => {
-		P(N.filter((t, n) => n !== e));
-	}, U = (e, t, n) => {
-		let r = [...N];
-		t === "quotaId" ? r[e].quotaId = n : r[e].quantity = Number(n), P(r);
+		}, ...P]);
+	}, U = (e) => {
+		F(P.filter((t, n) => n !== e));
+	}, W = (e, t, n) => {
+		let r = [...P];
+		t === "quotaId" ? r[e].quotaId = n : r[e].quantity = Number(n), F(r);
 	};
 	return /* @__PURE__ */ d("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ u(t, {
-			title: m("billing.plans.createNewPlan", "Create New Plan"),
-			description: m("billing.plans.createNewPlanDesc", "Set up a new pricing plan with quotas")
-		}), /* @__PURE__ */ d("form", {
-			onSubmit: async (e) => {
-				if (e.preventDefault(), R(null), B(!1), !x.trim()) {
-					R("Plan name is required");
-					return;
-				}
-				if (!C || isNaN(Number(C)) || Number(C) < 0) {
-					R("Valid price is required");
-					return;
-				}
-				if (!k.trim()) {
-					R("Product ID is required");
-					return;
-				}
-				if (N.length === 0) {
-					R("At least one quota is required");
-					return;
-				}
-				if (N.filter((e) => e.quotaId === "").length > 0) {
-					R("Please select a quota for all allocations");
-					return;
-				}
-				let t = {
-					name: x.trim(),
-					price: Number(C),
-					currency: T,
-					duration: D,
-					productId: k.trim(),
-					isPurchasable: j,
-					quotas: N.map((e) => ({
-						quotaId: e.quotaId,
-						quantity: e.quantity
-					})),
-					...F.length > 0 ? { currencyPriceOverrides: F } : {}
-				};
-				try {
-					await y(t), B(!0), setTimeout(() => h("/plans"), 1500);
-				} catch (e) {
-					R(e instanceof Error ? e.message : "Failed to create plan");
-				}
-			},
-			className: "space-y-6",
-			children: [
-				L && /* @__PURE__ */ u("div", {
-					className: "p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg",
-					children: /* @__PURE__ */ u("p", {
-						className: "text-sm text-status-error-text",
-						children: L
-					})
-				}),
-				z && /* @__PURE__ */ u("div", {
-					className: "p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg",
-					children: /* @__PURE__ */ u("p", {
-						className: "text-sm text-status-success-text",
-						children: m("billing.plans.createSuccess", "Plan created successfully! Redirecting...")
-					})
-				}),
-				/* @__PURE__ */ d("div", {
-					className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
-					children: [/* @__PURE__ */ d("div", {
-						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
-						children: [/* @__PURE__ */ u("div", {
-							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
-							children: /* @__PURE__ */ u("h2", {
-								className: "font-semibold text-text-primary",
-								children: m("billing.plans.basicInfo", "Basic Information")
-							})
-						}), /* @__PURE__ */ d("div", {
-							className: "p-4 space-y-4",
-							children: [
-								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
-									htmlFor: "name",
-									className: "block text-sm font-medium text-text-primary mb-1",
-									children: [m("billing.plans.planNameLabel", "Plan Name"), " *"]
-								}), /* @__PURE__ */ u("input", {
-									id: "name",
-									type: "text",
-									value: x,
-									onChange: (e) => S(e.target.value),
-									className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-									placeholder: m("billing.plans.planNamePlaceholder", "e.g., Pro Plan"),
-									required: !0
-								})] }),
-								/* @__PURE__ */ d("div", { children: [
-									/* @__PURE__ */ d("label", {
-										htmlFor: "productId",
+		children: [
+			/* @__PURE__ */ u(t, {
+				title: h("billing.plans.createNewPlan", "Create New Plan"),
+				description: h("billing.plans.createNewPlanDesc", "Set up a new pricing plan with quotas")
+			}),
+			/* @__PURE__ */ u(p, { children: h("billing.plans.createPurpose", "Define a new subscription tier customers can buy — its price and billing period, optional per-currency and per-seat pricing, and the quotas it includes. Once active, it appears on the Plans page for purchase.") }),
+			/* @__PURE__ */ d("form", {
+				onSubmit: async (e) => {
+					if (e.preventDefault(), z(null), V(!1), !S.trim()) {
+						z("Plan name is required");
+						return;
+					}
+					if (!w || isNaN(Number(w)) || Number(w) < 0) {
+						z("Valid price is required");
+						return;
+					}
+					if (!A.trim()) {
+						z("Product ID is required");
+						return;
+					}
+					if (P.length === 0) {
+						z("At least one quota is required");
+						return;
+					}
+					if (P.filter((e) => e.quotaId === "").length > 0) {
+						z("Please select a quota for all allocations");
+						return;
+					}
+					let t = {
+						name: S.trim(),
+						price: Number(w),
+						currency: E,
+						duration: O,
+						productId: A.trim(),
+						isPurchasable: M,
+						quotas: P.map((e) => ({
+							quotaId: e.quotaId,
+							quantity: e.quantity
+						})),
+						...I.length > 0 ? { currencyPriceOverrides: I } : {}
+					};
+					try {
+						await b(t), V(!0), setTimeout(() => g("/plans"), 1500);
+					} catch (e) {
+						z(e instanceof Error ? e.message : "Failed to create plan");
+					}
+				},
+				className: "space-y-6",
+				children: [
+					R && /* @__PURE__ */ u("div", {
+						className: "p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg",
+						children: /* @__PURE__ */ u("p", {
+							className: "text-sm text-status-error-text",
+							children: R
+						})
+					}),
+					B && /* @__PURE__ */ u("div", {
+						className: "p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg",
+						children: /* @__PURE__ */ u("p", {
+							className: "text-sm text-status-success-text",
+							children: h("billing.plans.createSuccess", "Plan created successfully! Redirecting...")
+						})
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
+						children: [/* @__PURE__ */ d("div", {
+							className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
+							children: [/* @__PURE__ */ u("div", {
+								className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
+								children: /* @__PURE__ */ u("h2", {
+									className: "font-semibold text-text-primary",
+									children: h("billing.plans.basicInfo", "Basic Information")
+								})
+							}), /* @__PURE__ */ d("div", {
+								className: "p-4 space-y-4",
+								children: [
+									/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+										htmlFor: "name",
 										className: "block text-sm font-medium text-text-primary mb-1",
-										children: [m("billing.plans.productId", "Product ID"), " *"]
-									}),
-									/* @__PURE__ */ u("input", {
-										id: "productId",
+										children: [h("billing.plans.planNameLabel", "Plan Name"), " *"]
+									}), /* @__PURE__ */ u("input", {
+										id: "name",
 										type: "text",
-										value: k,
-										onChange: (e) => A(e.target.value),
+										value: S,
+										onChange: (e) => C(e.target.value),
 										className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-										placeholder: m("billing.plans.productIdPlaceholder", "e.g., prod_abc123"),
+										placeholder: h("billing.plans.planNamePlaceholder", "e.g., Pro Plan"),
 										required: !0
+									})] }),
+									/* @__PURE__ */ d("div", { children: [
+										/* @__PURE__ */ d("label", {
+											htmlFor: "productId",
+											className: "block text-sm font-medium text-text-primary mb-1",
+											children: [h("billing.plans.productId", "Product ID"), " *"]
+										}),
+										/* @__PURE__ */ u("input", {
+											id: "productId",
+											type: "text",
+											value: A,
+											onChange: (e) => j(e.target.value),
+											className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+											placeholder: h("billing.plans.productIdPlaceholder", "e.g., prod_abc123"),
+											required: !0
+										}),
+										/* @__PURE__ */ u("p", {
+											className: "text-xs text-text-muted mt-1",
+											children: h("billing.plans.productIdDesc", "The product this plan belongs to")
+										})
+									] }),
+									/* @__PURE__ */ d("div", {
+										className: "grid grid-cols-2 gap-4",
+										children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+											htmlFor: "price",
+											className: "block text-sm font-medium text-text-primary mb-1",
+											children: [h("billing.plans.priceLabel", "Price"), " *"]
+										}), /* @__PURE__ */ u("input", {
+											id: "price",
+											type: "number",
+											step: "0.01",
+											min: "0",
+											value: w,
+											onChange: (e) => T(e.target.value),
+											className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+											placeholder: "49.99",
+											required: !0
+										})] }), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+											htmlFor: "currency",
+											className: "block text-sm font-medium text-text-primary mb-1",
+											children: [h("billing.plans.currencyLabel", "Currency"), " *"]
+										}), /* @__PURE__ */ d("select", {
+											id: "currency",
+											value: E,
+											onChange: (e) => D(e.target.value),
+											className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+											children: [
+												/* @__PURE__ */ u("option", {
+													value: "USD",
+													children: "USD ($)"
+												}),
+												/* @__PURE__ */ u("option", {
+													value: "EUR",
+													children: "EUR"
+												}),
+												/* @__PURE__ */ u("option", {
+													value: "GBP",
+													children: "GBP"
+												}),
+												/* @__PURE__ */ u("option", {
+													value: "INR",
+													children: "INR"
+												}),
+												/* @__PURE__ */ u("option", {
+													value: "AUD",
+													children: "AUD"
+												}),
+												/* @__PURE__ */ u("option", {
+													value: "CAD",
+													children: "CAD"
+												}),
+												/* @__PURE__ */ u("option", {
+													value: "JPY",
+													children: "JPY"
+												}),
+												/* @__PURE__ */ u("option", {
+													value: "SGD",
+													children: "SGD"
+												})
+											]
+										})] })]
 									}),
-									/* @__PURE__ */ u("p", {
-										className: "text-xs text-text-muted mt-1",
-										children: m("billing.plans.productIdDesc", "The product this plan belongs to")
-									})
-								] }),
-								/* @__PURE__ */ d("div", {
-									className: "grid grid-cols-2 gap-4",
-									children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
-										htmlFor: "price",
+									/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+										htmlFor: "duration",
 										className: "block text-sm font-medium text-text-primary mb-1",
-										children: [m("billing.plans.priceLabel", "Price"), " *"]
-									}), /* @__PURE__ */ u("input", {
-										id: "price",
-										type: "number",
-										step: "0.01",
-										min: "0",
-										value: C,
-										onChange: (e) => w(e.target.value),
-										className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-										placeholder: "49.99",
-										required: !0
-									})] }), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
-										htmlFor: "currency",
-										className: "block text-sm font-medium text-text-primary mb-1",
-										children: [m("billing.plans.currencyLabel", "Currency"), " *"]
+										children: [h("billing.plans.billingPeriodLabel", "Billing Period"), " *"]
 									}), /* @__PURE__ */ d("select", {
-										id: "currency",
-										value: T,
-										onChange: (e) => E(e.target.value),
+										id: "duration",
+										value: O,
+										onChange: (e) => k(e.target.value),
 										className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-										children: [
-											/* @__PURE__ */ u("option", {
-												value: "USD",
-												children: "USD ($)"
-											}),
-											/* @__PURE__ */ u("option", {
-												value: "EUR",
-												children: "EUR"
-											}),
-											/* @__PURE__ */ u("option", {
-												value: "GBP",
-												children: "GBP"
-											}),
-											/* @__PURE__ */ u("option", {
-												value: "INR",
-												children: "INR"
-											}),
-											/* @__PURE__ */ u("option", {
-												value: "AUD",
-												children: "AUD"
-											}),
-											/* @__PURE__ */ u("option", {
-												value: "CAD",
-												children: "CAD"
-											}),
-											/* @__PURE__ */ u("option", {
-												value: "JPY",
-												children: "JPY"
-											}),
-											/* @__PURE__ */ u("option", {
-												value: "SGD",
-												children: "SGD"
-											})
-										]
-									})] })]
-								}),
-								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
-									htmlFor: "duration",
-									className: "block text-sm font-medium text-text-primary mb-1",
-									children: [m("billing.plans.billingPeriodLabel", "Billing Period"), " *"]
-								}), /* @__PURE__ */ d("select", {
-									id: "duration",
-									value: D,
-									onChange: (e) => O(e.target.value),
-									className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-									children: [/* @__PURE__ */ u("option", {
-										value: r.MONTHLY,
-										children: "Monthly"
-									}), /* @__PURE__ */ u("option", {
-										value: r.YEARLY,
-										children: "Yearly"
-									})]
-								})] }),
-								/* @__PURE__ */ d("div", {
-									className: "flex items-start justify-between gap-4 pt-1",
-									children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
-										className: "text-sm font-medium text-text-primary",
-										children: m("billing.plans.isPurchasableLabel", "Publicly purchasable")
-									}), /* @__PURE__ */ u("p", {
-										className: "text-xs text-text-muted mt-0.5",
-										children: j ? m("billing.plans.isPurchasableOn", "Visible on pricing page — users can subscribe directly.") : m("billing.plans.isPurchasableOff", "Internal / custom plan — hidden from pricing page, assign via API only.")
-									})] }), /* @__PURE__ */ u("button", {
-										type: "button",
-										role: "switch",
-										"aria-checked": j,
-										onClick: () => M((e) => !e),
-										className: `relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:ring-offset-2 ${j ? "bg-action-primary-bg" : "bg-text-muted/30"}`,
-										children: /* @__PURE__ */ u("span", { className: `inline-block h-5 w-5 transform rounded-full bg-bg-surface shadow transition-transform ${j ? "translate-x-5" : "translate-x-0"}` })
-									})]
-								})
-							]
-						})]
-					}), /* @__PURE__ */ d("div", {
-						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
-						children: [/* @__PURE__ */ d("div", {
-							className: "p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between",
-							children: [/* @__PURE__ */ d("h2", {
-								className: "font-semibold text-text-primary",
-								children: [m("billing.plans.quotaAllocations", "Quota Allocations"), " *"]
-							}), /* @__PURE__ */ u("button", {
-								type: "button",
-								onClick: V,
-								disabled: _.length === 0,
-								className: "px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors disabled:opacity-50",
-								children: "+ Add Quota"
-							})]
-						}), /* @__PURE__ */ u("div", {
-							className: "p-4 space-y-3",
-							children: _.length === 0 ? /* @__PURE__ */ u("p", {
-								className: "text-sm text-text-muted",
-								children: m("billing.plans.noQuotasAvailable", "No quotas available. Please create quotas first.")
-							}) : N.length === 0 ? /* @__PURE__ */ u("p", {
-								className: "text-sm text-text-muted",
-								children: m("billing.plans.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
-							}) : N.map((e, t) => {
-								let n = _.find((t) => t.id === e.quotaId), r = n?.limits, i = r?.value ?? 0, a = r?.type ?? "unknown", o = i * e.quantity;
-								return /* @__PURE__ */ d("div", {
-									className: "p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3",
-									children: [/* @__PURE__ */ d("div", {
-										className: "flex items-center gap-3",
-										children: [/* @__PURE__ */ d("select", {
-											value: e.quotaId,
-											onChange: (e) => U(t, "quotaId", e.target.value),
-											className: `flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${e.quotaId === "" ? "text-text-muted" : "text-text-primary"}`,
-											children: [/* @__PURE__ */ u("option", {
-												value: "",
-												disabled: !0,
-												children: m("billing.plans.selectQuota", "Select a quota...")
-											}), _.map((e) => /* @__PURE__ */ u("option", {
-												value: e.id,
-												children: e.name
-											}, e.id))]
-										}), /* @__PURE__ */ u("button", {
+										children: [/* @__PURE__ */ u("option", {
+											value: r.MONTHLY,
+											children: "Monthly"
+										}), /* @__PURE__ */ u("option", {
+											value: r.YEARLY,
+											children: "Yearly"
+										})]
+									})] }),
+									/* @__PURE__ */ d("div", {
+										className: "flex items-start justify-between gap-4 pt-1",
+										children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+											className: "text-sm font-medium text-text-primary",
+											children: h("billing.plans.isPurchasableLabel", "Publicly purchasable")
+										}), /* @__PURE__ */ u("p", {
+											className: "text-xs text-text-muted mt-0.5",
+											children: M ? h("billing.plans.isPurchasableOn", "Visible on pricing page — users can subscribe directly.") : h("billing.plans.isPurchasableOff", "Internal / custom plan — hidden from pricing page, assign via API only.")
+										})] }), /* @__PURE__ */ u("button", {
 											type: "button",
-											onClick: () => H(t),
-											className: "p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors",
-											title: "Remove quota",
-											children: /* @__PURE__ */ u("svg", {
-												className: "size-5",
-												fill: "none",
-												viewBox: "0 0 24 24",
-												stroke: "currentColor",
-												children: /* @__PURE__ */ u("path", {
-													strokeLinecap: "round",
-													strokeLinejoin: "round",
-													strokeWidth: 2,
-													d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-												})
-											})
+											role: "switch",
+											"aria-checked": M,
+											onClick: () => N((e) => !e),
+											className: `relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:ring-offset-2 ${M ? "bg-action-primary-bg" : "bg-text-muted/30"}`,
+											children: /* @__PURE__ */ u("span", { className: `inline-block h-5 w-5 transform rounded-full bg-bg-surface shadow transition-transform ${M ? "translate-x-5" : "translate-x-0"}` })
 										})]
-									}), n && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", {
-										className: "flex items-center justify-between text-sm",
-										children: /* @__PURE__ */ d("div", {
-											className: "text-text-muted",
-											children: [
-												/* @__PURE__ */ d("span", {
-													className: "capitalize",
-													children: ["Type: ", a]
-												}),
-												/* @__PURE__ */ u("span", {
-													className: "mx-2",
-													children: "•"
-												}),
-												/* @__PURE__ */ d("span", { children: [
-													"Value per unit:",
-													" ",
-													/* @__PURE__ */ u("span", {
-														className: "font-medium text-text-primary",
-														children: i.toLocaleString()
-													})
-												] })
-											]
-										})
-									}), /* @__PURE__ */ d("div", {
-										className: "flex items-center gap-4",
+									})
+								]
+							})]
+						}), /* @__PURE__ */ d("div", {
+							className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
+							children: [/* @__PURE__ */ d("div", {
+								className: "p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between",
+								children: [/* @__PURE__ */ d("h2", {
+									className: "font-semibold text-text-primary",
+									children: [h("billing.plans.quotaAllocations", "Quota Allocations"), " *"]
+								}), /* @__PURE__ */ u("button", {
+									type: "button",
+									onClick: H,
+									disabled: v.length === 0,
+									className: "px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors disabled:opacity-50",
+									children: "+ Add Quota"
+								})]
+							}), /* @__PURE__ */ u("div", {
+								className: "p-4 space-y-3",
+								children: v.length === 0 ? /* @__PURE__ */ u("p", {
+									className: "text-sm text-text-muted",
+									children: h("billing.plans.noQuotasAvailable", "No quotas available. Please create quotas first.")
+								}) : P.length === 0 ? /* @__PURE__ */ u("p", {
+									className: "text-sm text-text-muted",
+									children: h("billing.plans.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
+								}) : P.map((e, t) => {
+									let n = v.find((t) => t.id === e.quotaId), r = n?.limits, i = r?.value ?? 0, a = r?.type ?? "unknown", o = i * e.quantity;
+									return /* @__PURE__ */ d("div", {
+										className: "p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3",
 										children: [/* @__PURE__ */ d("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ d("label", {
-												className: "text-sm text-text-muted",
-												children: [m("billing.plans.quantity", "Quantity"), ":"]
-											}), /* @__PURE__ */ u("input", {
-												type: "number",
-												min: "1",
-												value: e.quantity,
-												onChange: (e) => U(t, "quantity", e.target.value),
-												className: "w-24 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center"
+											className: "flex items-center gap-3",
+											children: [/* @__PURE__ */ d("select", {
+												value: e.quotaId,
+												onChange: (e) => W(t, "quotaId", e.target.value),
+												className: `flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${e.quotaId === "" ? "text-text-muted" : "text-text-primary"}`,
+												children: [/* @__PURE__ */ u("option", {
+													value: "",
+													disabled: !0,
+													children: h("billing.plans.selectQuota", "Select a quota...")
+												}), v.map((e) => /* @__PURE__ */ u("option", {
+													value: e.id,
+													children: e.name
+												}, e.id))]
+											}), /* @__PURE__ */ u("button", {
+												type: "button",
+												onClick: () => U(t),
+												className: "p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors",
+												title: "Remove quota",
+												children: /* @__PURE__ */ u("svg", {
+													className: "size-5",
+													fill: "none",
+													viewBox: "0 0 24 24",
+													stroke: "currentColor",
+													children: /* @__PURE__ */ u("path", {
+														strokeLinecap: "round",
+														strokeLinejoin: "round",
+														strokeWidth: 2,
+														d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+													})
+												})
 											})]
-										}), /* @__PURE__ */ d("div", {
-											className: "flex items-center gap-2 text-sm",
-											children: [/* @__PURE__ */ u("span", {
+										}), n && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", {
+											className: "flex items-center justify-between text-sm",
+											children: /* @__PURE__ */ d("div", {
 												className: "text-text-muted",
-												children: "="
-											}), /* @__PURE__ */ d("span", {
-												className: "font-semibold text-status-success-text",
-												children: [o.toLocaleString(), " total"]
+												children: [
+													/* @__PURE__ */ d("span", {
+														className: "capitalize",
+														children: ["Type: ", a]
+													}),
+													/* @__PURE__ */ u("span", {
+														className: "mx-2",
+														children: "•"
+													}),
+													/* @__PURE__ */ d("span", { children: [
+														"Value per unit:",
+														" ",
+														/* @__PURE__ */ u("span", {
+															className: "font-medium text-text-primary",
+															children: i.toLocaleString()
+														})
+													] })
+												]
+											})
+										}), /* @__PURE__ */ d("div", {
+											className: "flex items-center gap-4",
+											children: [/* @__PURE__ */ d("div", {
+												className: "flex items-center gap-2",
+												children: [/* @__PURE__ */ d("label", {
+													className: "text-sm text-text-muted",
+													children: [h("billing.plans.quantity", "Quantity"), ":"]
+												}), /* @__PURE__ */ u("input", {
+													type: "number",
+													min: "1",
+													value: e.quantity,
+													onChange: (e) => W(t, "quantity", e.target.value),
+													className: "w-24 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center"
+												})]
+											}), /* @__PURE__ */ d("div", {
+												className: "flex items-center gap-2 text-sm",
+												children: [/* @__PURE__ */ u("span", {
+													className: "text-text-muted",
+													children: "="
+												}), /* @__PURE__ */ d("span", {
+													className: "font-semibold text-status-success-text",
+													children: [o.toLocaleString(), " total"]
+												})]
 											})]
-										})]
-									})] })]
-								}, t);
-							})
+										})] })]
+									}, t);
+								})
+							})]
 						})]
-					})]
-				}),
-				/* @__PURE__ */ u(n, {
-					overrides: F,
-					onChange: I
-				}),
-				/* @__PURE__ */ d("div", {
-					className: "flex items-center gap-3 pt-4",
-					children: [/* @__PURE__ */ u("button", {
-						type: "submit",
-						disabled: b || _.length === 0,
-						className: "px-6 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors disabled:opacity-50",
-						children: b ? m("billing.plans.creating", "Creating...") : m("billing.plans.createPlanBtn", "Create Plan")
-					}), /* @__PURE__ */ u("button", {
-						type: "button",
-						onClick: () => h("/plans"),
-						className: "px-6 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
-						children: "Cancel"
-					})]
-				})
-			]
-		})]
+					}),
+					/* @__PURE__ */ u(n, {
+						overrides: I,
+						onChange: L
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "flex items-center gap-3 pt-4",
+						children: [/* @__PURE__ */ u("button", {
+							type: "submit",
+							disabled: x || v.length === 0,
+							className: "px-6 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors disabled:opacity-50",
+							children: x ? h("billing.plans.creating", "Creating...") : h("billing.plans.createPlanBtn", "Create Plan")
+						}), /* @__PURE__ */ u("button", {
+							type: "button",
+							onClick: () => g("/plans"),
+							className: "px-6 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
+							children: "Cancel"
+						})]
+					})
+				]
+			})
+		]
 	});
 };
 //#endregion
-export { p as PlanCreatePage };
+export { m as PlanCreatePage };
 
 //# sourceMappingURL=PlanCreatePage.js.map