@burdenoff/microfe-billing 2026.530.4 → 2026.531.2

package/dist/billing/modules/addons/pages/AddonEditPage.js

@@ -5,40 +5,50 @@ import { CurrencyPriceOverridesEditor as r } from "../../../shared/components/Cu
 import "../../../shared/components/index.js";
 import { PlanDuration as i } from "../../../shared/types/graphql.js";
 import { isServerError as a } from "../../../shared/utils/error.js";
+import { getPlanFeatureQuantity as o } from "../../../shared/utils/planFeatureQuantity.js";
 import "../../../shared/utils/index.js";
-import { useBillingPermissions as o } from "../../../hooks/useBillingPermissions.js";
-import { useBillingNavigate as s } from "../../../hooks/useBillingNavigate.js";
-import { useAddon as c, useAddonMutations as l } from "../hooks/useAddons.js";
+import { useBillingPermissions as s } from "../../../hooks/useBillingPermissions.js";
+import { useBillingNavigate as c } from "../../../hooks/useBillingNavigate.js";
+import { useAddon as l, useAddonMutations as u } from "../hooks/useAddons.js";
 import "../hooks/index.js";
-import { useQuotas as u } from "../../plans/hooks/useQuotas.js";
+import { useQuotas as d } from "../../plans/hooks/useQuotas.js";
 import "../../plans/hooks/index.js";
-import { useEffect as d, useState as f } from "react";
-import { useParams as p } from "react-router-dom";
-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";
+import { useEffect as f, useState as p } from "react";
+import { useParams as m } from "react-router-dom";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useI18n as v } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/billing/modules/addons/pages/AddonEditPage.tsx
-var v = () => {
-	let { t: v } = _(), y = (e, t) => {
-		let n = v(e);
+var y = () => {
+	let { t: y } = v(), b = (e, t) => {
+		let n = y(e);
 		return n === e ? t : n;
-	}, { addonId: b } = p(), x = s(), S = o(), { addon: C, isLoading: w, error: T, refetch: E } = c(b), { quotas: D, isLoading: O } = u({ onlyActive: !0 }), { updateAddon: k, isUpdating: A } = l(), [j, M] = f(""), [N, P] = f(""), [F, I] = f("USD"), [L, R] = f(i.MONTHLY), [z, B] = f(!0), [V, H] = f([]), [U, W] = f([]), [G, K] = f(null), [q, J] = f(!1);
-	if (d(() => {
-		if (C && (M(C.name ?? ""), P(String(C.price ?? "")), I(C.currency ?? "USD"), R(C.duration ?? i.MONTHLY), B(C.isActive ?? !0), C.features && C.features.length > 0)) {
-			let e = [], t = /* @__PURE__ */ new Map();
-			for (let e of C.features) if (e.quota?.id) {
-				let n = e.quota.id, r = e.quota.limits?.value ?? 1;
-				t.set(n, (t.get(n) ?? 0) + r);
+	}, { addonId: x } = m(), S = c(), C = s(), { addon: w, isLoading: T, error: E, refetch: D } = l(x), { quotas: O, isLoading: k } = d({ onlyActive: !0 }), { updateAddon: A, isUpdating: j } = u(), [M, N] = p(""), [P, F] = p(""), [I, L] = p("USD"), [R, z] = p(i.MONTHLY), [B, V] = p(!0), [H, U] = p([]), [W, G] = p([]), [K, q] = p(null), [J, Y] = p(!1);
+	if (f(() => {
+		if (w) {
+			if (N(w.name ?? ""), F(String(w.price ?? "")), L(w.currency ?? "USD"), z(w.duration ?? i.MONTHLY), V(w.isActive ?? !0), w.currencyPrices && typeof w.currencyPrices == "object") {
+				let e = w.currencyPrices;
+				G(Object.entries(e).filter(([, e]) => typeof e == "number").map(([e, t]) => ({
+					currency: e,
+					amount: t
+				})));
+			}
+			if (w.features && w.features.length > 0) {
+				let e = [], t = /* @__PURE__ */ new Map();
+				for (let e of w.features) if (e.quota?.id) {
+					let n = e.quota.id, r = o(e);
+					t.set(n, (t.get(n) ?? 0) + r);
+				}
+				for (let [n, r] of t) e.push({
+					quotaId: n,
+					quantity: r
+				});
+				U(e);
 			}
-			for (let [n, r] of t) e.push({
-				quotaId: n,
-				quantity: r
-			});
-			H(e);
 		}
-	}, [C]), !S.canManageAddons) return /* @__PURE__ */ h(e, { message: y("billing.addons.noEditPermission", "You don't have permission to edit addons.") });
-	if (w || O) return /* @__PURE__ */ g("div", {
+	}, [w]), !C.canManageAddons) return /* @__PURE__ */ g(e, { message: b("billing.addons.noEditPermission", "You don't have permission to edit addons.") });
+	if (T || k) return /* @__PURE__ */ _("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ h("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ h("div", {
+		children: [/* @__PURE__ */ g("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ g("div", {
 			className: "max-w-2xl space-y-4",
 			children: [
 				1,
@@ -46,269 +56,269 @@ var v = () => {
 				3,
 				4,
 				5
-			].map((e) => /* @__PURE__ */ h("div", { className: "h-16 bg-muted animate-pulse rounded" }, e))
+			].map((e) => /* @__PURE__ */ g("div", { className: "h-16 bg-muted animate-pulse rounded" }, e))
 		})]
 	});
-	if (T && a(T)) return /* @__PURE__ */ h("div", {
+	if (E && a(E)) return /* @__PURE__ */ g("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ h(n, {
-			title: y("billing.addons.serverUnavailable", "Server Unavailable"),
-			message: y("billing.addons.serverUnavailableLoadAddon", "Unable to load addon. The server might be down or experiencing issues."),
-			onRetry: () => E(),
+		children: /* @__PURE__ */ g(n, {
+			title: b("billing.addons.serverUnavailable", "Server Unavailable"),
+			message: b("billing.addons.serverUnavailableLoadAddon", "Unable to load addon. The server might be down or experiencing issues."),
+			onRetry: () => D(),
 			showRetry: !0
 		})
 	});
-	if (!C) return /* @__PURE__ */ h("div", {
+	if (!w) return /* @__PURE__ */ g("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ g("div", {
+		children: /* @__PURE__ */ _("div", {
 			className: "text-center space-y-4",
-			children: [/* @__PURE__ */ h("h2", {
+			children: [/* @__PURE__ */ g("h2", {
 				className: "text-lg font-semibold text-foreground",
-				children: y("billing.addons.addonNotFound", "Addon not found")
-			}), /* @__PURE__ */ h("button", {
+				children: b("billing.addons.addonNotFound", "Addon not found")
+			}), /* @__PURE__ */ g("button", {
 				type: "button",
-				onClick: () => x("/addons"),
+				onClick: () => S("/addons"),
 				className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90",
 				children: "Back to Addons"
 			})]
 		})
 	});
-	let Y = () => {
-		H([{
+	let X = () => {
+		U([{
 			quotaId: "",
 			quantity: 1
-		}, ...V]);
-	}, X = (e) => {
-		H(V.filter((t, n) => n !== e));
-	}, Z = (e, t, n) => {
-		let r = [...V];
-		t === "quotaId" ? r[e].quotaId = n : r[e].quantity = Number(n), H(r);
+		}, ...H]);
+	}, Z = (e) => {
+		U(H.filter((t, n) => n !== e));
+	}, Q = (e, t, n) => {
+		let r = [...H];
+		t === "quotaId" ? r[e].quotaId = n : r[e].quantity = Number(n), U(r);
 	};
-	return /* @__PURE__ */ g("div", {
+	return /* @__PURE__ */ _("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ h(t, {
-			title: `Edit Addon: ${C.name}`,
-			description: y("billing.addons.editAddonDesc", "Update the addon details and quota allocations")
-		}), /* @__PURE__ */ g("form", {
+		children: [/* @__PURE__ */ g(t, {
+			title: `Edit Addon: ${w.name}`,
+			description: b("billing.addons.editAddonDesc", "Update the addon details and quota allocations")
+		}), /* @__PURE__ */ _("form", {
 			onSubmit: async (e) => {
-				if (e.preventDefault(), K(null), J(!1), !j.trim()) {
-					K("Addon name is required");
+				if (e.preventDefault(), q(null), Y(!1), !M.trim()) {
+					q("Addon name is required");
 					return;
 				}
-				if (!N || isNaN(Number(N)) || Number(N) < 0) {
-					K("Valid price is required");
+				if (!P || isNaN(Number(P)) || Number(P) < 0) {
+					q("Valid price is required");
 					return;
 				}
-				if (V.length === 0) {
-					K("At least one quota is required");
+				if (H.length === 0) {
+					q("At least one quota is required");
 					return;
 				}
-				if (V.filter((e) => e.quotaId === "").length > 0) {
-					K("Please select a quota for all allocations");
+				if (H.filter((e) => e.quotaId === "").length > 0) {
+					q("Please select a quota for all allocations");
 					return;
 				}
 				let t = {
-					id: b,
-					name: j.trim(),
-					price: Number(N),
-					currency: F,
-					duration: L,
-					isActive: z,
-					quotas: V.map((e) => ({
+					id: x,
+					name: M.trim(),
+					price: Number(P),
+					currency: I,
+					duration: R,
+					isActive: B,
+					quotas: H.map((e) => ({
 						quotaId: e.quotaId,
 						quantity: e.quantity
 					})),
-					...U.length > 0 ? { currencyPriceOverrides: U } : {}
+					...W.length > 0 ? { currencyPriceOverrides: W } : {}
 				};
 				try {
-					await k(t), J(!0), setTimeout(() => x(`/addons/${b}`), 1500);
+					await A(t), Y(!0), setTimeout(() => S(`/addons/${x}`), 1500);
 				} catch (e) {
-					K(e instanceof Error ? e.message : "Failed to update addon");
+					q(e instanceof Error ? e.message : "Failed to update addon");
 				}
 			},
 			className: "space-y-6",
 			children: [
-				G && /* @__PURE__ */ h("div", {
+				K && /* @__PURE__ */ g("div", {
 					className: "p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg",
-					children: /* @__PURE__ */ h("p", {
+					children: /* @__PURE__ */ g("p", {
 						className: "text-sm text-status-error-text",
-						children: G
+						children: K
 					})
 				}),
-				q && /* @__PURE__ */ h("div", {
+				J && /* @__PURE__ */ g("div", {
 					className: "p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg",
-					children: /* @__PURE__ */ h("p", {
+					children: /* @__PURE__ */ g("p", {
 						className: "text-sm text-status-success-text",
-						children: y("billing.addons.updateSuccess", "Addon updated successfully! Redirecting...")
+						children: b("billing.addons.updateSuccess", "Addon updated successfully! Redirecting...")
 					})
 				}),
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ _("div", {
 					className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
-					children: [/* @__PURE__ */ g("div", {
+					children: [/* @__PURE__ */ _("div", {
 						className: "border border-border rounded-lg bg-card overflow-hidden h-fit",
-						children: [/* @__PURE__ */ h("div", {
+						children: [/* @__PURE__ */ g("div", {
 							className: "p-4 border-b border-border bg-muted/30",
-							children: /* @__PURE__ */ h("h2", {
+							children: /* @__PURE__ */ g("h2", {
 								className: "font-semibold text-foreground",
-								children: y("billing.addons.basicInfo", "Basic Information")
+								children: b("billing.addons.basicInfo", "Basic Information")
 							})
-						}), /* @__PURE__ */ g("div", {
+						}), /* @__PURE__ */ _("div", {
 							className: "p-4 space-y-4",
 							children: [
-								/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
+								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
 									htmlFor: "name",
 									className: "block text-sm font-medium text-foreground mb-1",
-									children: [y("billing.addons.addonNameLabel", "Addon Name"), " *"]
-								}), /* @__PURE__ */ h("input", {
+									children: [b("billing.addons.addonNameLabel", "Addon Name"), " *"]
+								}), /* @__PURE__ */ g("input", {
 									id: "name",
 									type: "text",
-									value: j,
-									onChange: (e) => M(e.target.value),
+									value: M,
+									onChange: (e) => N(e.target.value),
 									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
-									placeholder: y("billing.addons.addonNamePlaceholder", "e.g., Extra Storage"),
+									placeholder: b("billing.addons.addonNamePlaceholder", "e.g., Extra Storage"),
 									required: !0
 								})] }),
-								/* @__PURE__ */ g("div", {
+								/* @__PURE__ */ _("div", {
 									className: "grid grid-cols-2 gap-4",
-									children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
+									children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
 										htmlFor: "price",
 										className: "block text-sm font-medium text-foreground mb-1",
-										children: [y("billing.addons.priceLabel", "Price"), " *"]
-									}), /* @__PURE__ */ h("input", {
+										children: [b("billing.addons.priceLabel", "Price"), " *"]
+									}), /* @__PURE__ */ g("input", {
 										id: "price",
 										type: "number",
 										step: "0.01",
 										min: "0",
-										value: N,
-										onChange: (e) => P(e.target.value),
+										value: P,
+										onChange: (e) => F(e.target.value),
 										className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
 										placeholder: "9.99",
 										required: !0
-									})] }), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
+									})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
 										htmlFor: "currency",
 										className: "block text-sm font-medium text-foreground mb-1",
-										children: [y("billing.addons.currencyLabel", "Currency"), " *"]
-									}), /* @__PURE__ */ g("select", {
+										children: [b("billing.addons.currencyLabel", "Currency"), " *"]
+									}), /* @__PURE__ */ _("select", {
 										id: "currency",
-										value: F,
-										onChange: (e) => I(e.target.value),
+										value: I,
+										onChange: (e) => L(e.target.value),
 										className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
 										children: [
-											/* @__PURE__ */ h("option", {
+											/* @__PURE__ */ g("option", {
 												value: "USD",
 												children: "USD ($)"
 											}),
-											/* @__PURE__ */ h("option", {
+											/* @__PURE__ */ g("option", {
 												value: "EUR",
 												children: "EUR"
 											}),
-											/* @__PURE__ */ h("option", {
+											/* @__PURE__ */ g("option", {
 												value: "GBP",
 												children: "GBP"
 											}),
-											/* @__PURE__ */ h("option", {
+											/* @__PURE__ */ g("option", {
 												value: "INR",
 												children: "INR"
 											}),
-											/* @__PURE__ */ h("option", {
+											/* @__PURE__ */ g("option", {
 												value: "AUD",
 												children: "AUD"
 											}),
-											/* @__PURE__ */ h("option", {
+											/* @__PURE__ */ g("option", {
 												value: "CAD",
 												children: "CAD"
 											}),
-											/* @__PURE__ */ h("option", {
+											/* @__PURE__ */ g("option", {
 												value: "JPY",
 												children: "JPY"
 											}),
-											/* @__PURE__ */ h("option", {
+											/* @__PURE__ */ g("option", {
 												value: "SGD",
 												children: "SGD"
 											})
 										]
 									})] })]
 								}),
-								/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
+								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
 									htmlFor: "duration",
 									className: "block text-sm font-medium text-foreground mb-1",
-									children: [y("billing.addons.billingPeriodLabel", "Billing Period"), " *"]
-								}), /* @__PURE__ */ g("select", {
+									children: [b("billing.addons.billingPeriodLabel", "Billing Period"), " *"]
+								}), /* @__PURE__ */ _("select", {
 									id: "duration",
-									value: L,
-									onChange: (e) => R(e.target.value),
+									value: R,
+									onChange: (e) => z(e.target.value),
 									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
-									children: [/* @__PURE__ */ h("option", {
+									children: [/* @__PURE__ */ g("option", {
 										value: i.MONTHLY,
 										children: "Monthly"
-									}), /* @__PURE__ */ h("option", {
+									}), /* @__PURE__ */ g("option", {
 										value: i.YEARLY,
 										children: "Yearly"
 									})]
 								})] }),
-								/* @__PURE__ */ g("div", {
+								/* @__PURE__ */ _("div", {
 									className: "flex items-center gap-3",
-									children: [/* @__PURE__ */ h("input", {
+									children: [/* @__PURE__ */ g("input", {
 										id: "isActive",
 										type: "checkbox",
-										checked: z,
-										onChange: (e) => B(e.target.checked),
+										checked: B,
+										onChange: (e) => V(e.target.checked),
 										className: "size-4 rounded border-border text-primary focus:ring-primary"
-									}), /* @__PURE__ */ h("label", {
+									}), /* @__PURE__ */ g("label", {
 										htmlFor: "isActive",
 										className: "text-sm font-medium text-foreground",
-										children: y("billing.addons.addonIsActive", "Addon is active")
+										children: b("billing.addons.addonIsActive", "Addon is active")
 									})]
 								})
 							]
 						})]
-					}), /* @__PURE__ */ g("div", {
+					}), /* @__PURE__ */ _("div", {
 						className: "border border-border rounded-lg bg-card overflow-hidden h-fit",
-						children: [/* @__PURE__ */ g("div", {
+						children: [/* @__PURE__ */ _("div", {
 							className: "p-4 border-b border-border bg-muted/30 flex items-center justify-between",
-							children: [/* @__PURE__ */ h("h2", {
+							children: [/* @__PURE__ */ g("h2", {
 								className: "font-semibold text-foreground",
-								children: y("billing.addons.quotaAllocations", "Quota Allocations")
-							}), /* @__PURE__ */ h("button", {
+								children: b("billing.addons.quotaAllocations", "Quota Allocations")
+							}), /* @__PURE__ */ g("button", {
 								type: "button",
-								onClick: Y,
+								onClick: X,
 								className: "px-3 py-1 text-sm font-medium text-primary hover:bg-primary/10 rounded-md transition-colors",
 								children: "+ Add Quota"
 							})]
-						}), /* @__PURE__ */ h("div", {
+						}), /* @__PURE__ */ g("div", {
 							className: "p-4 space-y-3",
-							children: V.length === 0 ? /* @__PURE__ */ h("p", {
+							children: H.length === 0 ? /* @__PURE__ */ g("p", {
 								className: "text-sm text-muted-foreground",
-								children: y("billing.addons.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
-							}) : V.map((e, t) => {
-								let n = D.find((t) => t.id === e.quotaId), r = n?.limits, i = r?.value ?? 0, a = r?.type ?? "unknown", o = i * e.quantity;
-								return /* @__PURE__ */ g("div", {
+								children: b("billing.addons.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
+							}) : H.map((e, t) => {
+								let n = O.find((t) => t.id === e.quotaId), r = n?.limits?.type ?? "unknown";
+								return /* @__PURE__ */ _("div", {
 									className: "p-3 border border-border rounded-lg bg-muted/20 space-y-3",
-									children: [/* @__PURE__ */ g("div", {
+									children: [/* @__PURE__ */ _("div", {
 										className: "flex items-center gap-3",
-										children: [/* @__PURE__ */ g("select", {
+										children: [/* @__PURE__ */ _("select", {
 											value: e.quotaId,
-											onChange: (e) => Z(t, "quotaId", e.target.value),
+											onChange: (e) => Q(t, "quotaId", e.target.value),
 											className: `flex-1 px-3 py-2 border border-border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-primary ${e.quotaId === "" ? "text-muted-foreground" : "text-foreground"}`,
-											children: [/* @__PURE__ */ h("option", {
+											children: [/* @__PURE__ */ g("option", {
 												value: "",
 												disabled: !0,
-												children: y("billing.addons.selectQuota", "Select a quota...")
-											}), D.map((e) => /* @__PURE__ */ h("option", {
+												children: b("billing.addons.selectQuota", "Select a quota...")
+											}), O.map((e) => /* @__PURE__ */ g("option", {
 												value: e.id,
 												children: e.name
 											}, e.id))]
-										}), /* @__PURE__ */ h("button", {
+										}), /* @__PURE__ */ g("button", {
 											type: "button",
-											onClick: () => X(t),
+											onClick: () => Z(t),
 											className: "p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors",
 											title: "Remove quota",
-											children: /* @__PURE__ */ h("svg", {
+											children: /* @__PURE__ */ g("svg", {
 												className: "size-5",
 												fill: "none",
 												viewBox: "0 0 24 24",
 												stroke: "currentColor",
-												children: /* @__PURE__ */ h("path", {
+												children: /* @__PURE__ */ g("path", {
 													strokeLinecap: "round",
 													strokeLinejoin: "round",
 													strokeWidth: 2,
@@ -316,52 +326,23 @@ var v = () => {
 												})
 											})
 										})]
-									}), n && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("div", {
+									}), n && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("div", {
 										className: "flex items-center justify-between text-sm",
-										children: /* @__PURE__ */ g("div", {
-											className: "text-muted-foreground",
-											children: [
-												/* @__PURE__ */ g("span", {
-													className: "capitalize",
-													children: ["Type: ", a]
-												}),
-												/* @__PURE__ */ h("span", {
-													className: "mx-2",
-													children: "•"
-												}),
-												/* @__PURE__ */ g("span", { children: [
-													"Value per unit:",
-													" ",
-													/* @__PURE__ */ h("span", {
-														className: "font-medium text-foreground",
-														children: i.toLocaleString()
-													})
-												] })
-											]
+										children: /* @__PURE__ */ _("span", {
+											className: "capitalize text-muted-foreground",
+											children: ["Type: ", r]
 										})
-									}), /* @__PURE__ */ g("div", {
-										className: "flex items-center gap-4",
-										children: [/* @__PURE__ */ g("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ g("label", {
-												className: "text-sm text-muted-foreground",
-												children: [y("billing.addons.quantity", "Quantity"), ":"]
-											}), /* @__PURE__ */ h("input", {
-												type: "number",
-												min: "1",
-												value: e.quantity,
-												onChange: (e) => Z(t, "quantity", e.target.value),
-												className: "w-24 px-3 py-1.5 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-center"
-											})]
-										}), /* @__PURE__ */ g("div", {
-											className: "flex items-center gap-2 text-sm",
-											children: [/* @__PURE__ */ h("span", {
-												className: "text-muted-foreground",
-												children: "="
-											}), /* @__PURE__ */ g("span", {
-												className: "font-semibold text-status-success-text",
-												children: [o.toLocaleString(), " total"]
-											})]
+									}), /* @__PURE__ */ _("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ _("label", {
+											className: "text-sm text-muted-foreground",
+											children: [b("billing.addons.limit", "Limit"), ":"]
+										}), /* @__PURE__ */ g("input", {
+											type: "number",
+											min: "1",
+											value: e.quantity,
+											onChange: (e) => Q(t, "quantity", e.target.value),
+											className: "w-36 px-3 py-1.5 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-center"
 										})]
 									})] })]
 								}, t);
@@ -369,20 +350,20 @@ var v = () => {
 						})]
 					})]
 				}),
-				/* @__PURE__ */ h(r, {
-					overrides: U,
-					onChange: W
+				/* @__PURE__ */ g(r, {
+					overrides: W,
+					onChange: G
 				}),
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ _("div", {
 					className: "flex items-center gap-3 pt-4",
-					children: [/* @__PURE__ */ h("button", {
+					children: [/* @__PURE__ */ g("button", {
 						type: "submit",
-						disabled: A,
+						disabled: j,
 						className: "px-6 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50",
-						children: A ? y("billing.addons.saving", "Saving...") : y("billing.addons.saveChanges", "Save Changes")
-					}), /* @__PURE__ */ h("button", {
+						children: j ? b("billing.addons.saving", "Saving...") : b("billing.addons.saveChanges", "Save Changes")
+					}), /* @__PURE__ */ g("button", {
 						type: "button",
-						onClick: () => x(`/addons/${b}`),
+						onClick: () => S(`/addons/${x}`),
 						className: "px-6 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
 						children: "Cancel"
 					})]
@@ -392,6 +373,6 @@ var v = () => {
 	});
 };
 //#endregion
-export { v as AddonEditPage };
+export { y as AddonEditPage };
 
 //# sourceMappingURL=AddonEditPage.js.map