@burdenoff/microfe-billing 2026.625.3 → 2026.625.5

package/dist/billing/modules/quota/pages/QuotaTemplateCreatePage.js

@@ -9,322 +9,327 @@ import "../hooks/index.js";
 import { useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { PagePurpose as d } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/quota/pages/QuotaTemplateCreatePage.tsx
-var d = () => {
-	let { t: d } = u(), f = (e, t) => {
-		let n = d(e);
+var f = () => {
+	let { t: f } = u(), p = (e, t) => {
+		let n = f(e);
 		return n === e ? t : n;
-	}, p = a(), m = i(), { createQuota: h, isCreating: g } = o(), [_, v] = s(""), [y, b] = s(""), [x, S] = s(""), [C, w] = s("numeric"), [T, E] = s(""), [D, O] = s(""), [k, A] = s(r.PRODUCT_SPECIFIC), [j, M] = s(!1), [N, P] = s(n.NEVER), [F, I] = s(null), [L, R] = s(!1);
-	return m.canManageQuotas ? /* @__PURE__ */ l("div", {
+	}, m = a(), h = i(), { createQuota: g, isCreating: _ } = o(), [v, y] = s(""), [b, x] = s(""), [S, C] = s(""), [w, T] = s("numeric"), [E, D] = s(""), [O, k] = s(""), [A, j] = s(r.PRODUCT_SPECIFIC), [M, N] = s(!1), [P, F] = s(n.NEVER), [I, L] = s(null), [R, z] = s(!1);
+	return h.canManageQuotas ? /* @__PURE__ */ l("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ c(t, {
-			title: "Create New Quota",
-			description: "Set up a new quota template"
-		}), /* @__PURE__ */ l("form", {
-			onSubmit: async (e) => {
-				if (e.preventDefault(), I(null), R(!1), !_.trim()) {
-					I("Quota name is required");
-					return;
-				}
-				if (!T || isNaN(Number(T)) || Number(T) < 0) {
-					I("Valid limit value is required");
-					return;
-				}
-				if (!D.trim()) {
-					I("Unit is required (e.g., bots, GB, seats)");
-					return;
-				}
-				let t = {
-					name: _.trim(),
-					limits: {
-						type: C,
-						value: Number(T),
-						unit: D.trim()
-					},
-					quotaType: k,
-					reusable: j,
-					resetPeriod: N,
-					context: {
-						displayName: y.trim() || _.trim(),
-						description: x.trim()
+		children: [
+			/* @__PURE__ */ c(t, {
+				title: "Create New Quota",
+				description: "Set up a new quota template"
+			}),
+			/* @__PURE__ */ c(d, { children: "Define a reusable limit — its name, type (pooled or product-specific), unit and default value — that you can then attach to any number of plans and add-ons. Build the template once here instead of redefining the same limit on every plan." }),
+			/* @__PURE__ */ l("form", {
+				onSubmit: async (e) => {
+					if (e.preventDefault(), L(null), z(!1), !v.trim()) {
+						L("Quota name is required");
+						return;
 					}
-				};
-				try {
-					await h(t), R(!0), setTimeout(() => p("/quotas"), 1500);
-				} catch (e) {
-					I(e instanceof Error ? e.message : "Failed to create quota");
-				}
-			},
-			className: "max-w-2xl space-y-6",
-			children: [
-				F && /* @__PURE__ */ c("div", {
-					className: "p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg",
-					children: /* @__PURE__ */ c("p", {
-						className: "text-sm text-status-error-text",
-						children: F
-					})
-				}),
-				L && /* @__PURE__ */ c("div", {
-					className: "p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg",
-					children: /* @__PURE__ */ c("p", {
-						className: "text-sm text-status-success-text",
-						children: "Quota created successfully! Redirecting…"
-					})
-				}),
-				/* @__PURE__ */ l("div", {
-					className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
-					children: [/* @__PURE__ */ c("div", {
-						className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
-						children: /* @__PURE__ */ c("h2", {
-							className: "font-semibold text-text-primary",
-							children: "Basic Information"
+					if (!E || isNaN(Number(E)) || Number(E) < 0) {
+						L("Valid limit value is required");
+						return;
+					}
+					if (!O.trim()) {
+						L("Unit is required (e.g., bots, GB, seats)");
+						return;
+					}
+					let t = {
+						name: v.trim(),
+						limits: {
+							type: w,
+							value: Number(E),
+							unit: O.trim()
+						},
+						quotaType: A,
+						reusable: M,
+						resetPeriod: P,
+						context: {
+							displayName: b.trim() || v.trim(),
+							description: S.trim()
+						}
+					};
+					try {
+						await g(t), z(!0), setTimeout(() => m("/quotas"), 1500);
+					} catch (e) {
+						L(e instanceof Error ? e.message : "Failed to create quota");
+					}
+				},
+				className: "max-w-2xl space-y-6",
+				children: [
+					I && /* @__PURE__ */ c("div", {
+						className: "p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg",
+						children: /* @__PURE__ */ c("p", {
+							className: "text-sm text-status-error-text",
+							children: I
 						})
-					}), /* @__PURE__ */ l("div", {
-						className: "p-4 space-y-4",
-						children: [
-							/* @__PURE__ */ l("div", { children: [
-								/* @__PURE__ */ c("label", {
-									htmlFor: "name",
-									className: "block text-sm font-medium text-text-primary mb-1",
-									children: "Quota Key *"
-								}),
-								/* @__PURE__ */ c("input", {
-									id: "name",
-									type: "text",
-									value: _,
-									onChange: (e) => v(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)] font-mono text-sm",
-									placeholder: "e.g., sessions-started, tunnels-created",
-									required: !0
-								}),
-								/* @__PURE__ */ l("p", {
-									className: "text-xs text-text-muted mt-1",
-									children: [
-										"Internal machine key, must match the ",
-										/* @__PURE__ */ c("code", { children: "quotaName" }),
-										" used in",
-										" ",
-										/* @__PURE__ */ c("code", { children: "@usage" }),
-										" directives. Never shown to users."
-									]
-								})
-							] }),
-							/* @__PURE__ */ l("div", { children: [
-								/* @__PURE__ */ c("label", {
-									htmlFor: "displayName",
-									className: "block text-sm font-medium text-text-primary mb-1",
-									children: "Display Name *"
-								}),
-								/* @__PURE__ */ c("input", {
-									id: "displayName",
-									type: "text",
-									value: y,
-									onChange: (e) => b(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: "e.g., Tunnels, Session Starts, Webhooks",
-									required: !0
-								}),
-								/* @__PURE__ */ c("p", {
-									className: "text-xs text-text-muted mt-1",
-									children: "Human-readable name shown to users in billing and usage UI."
-								})
-							] }),
-							/* @__PURE__ */ l("div", { children: [
-								/* @__PURE__ */ c("label", {
-									htmlFor: "description",
-									className: "block text-sm font-medium text-text-primary mb-1",
-									children: "Description"
-								}),
-								/* @__PURE__ */ c("textarea", {
-									id: "description",
-									value: x,
-									onChange: (e) => S(e.target.value),
-									rows: 2,
-									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)] resize-none",
-									placeholder: "e.g., Active tunnels created through VibeControls (slot freed on delete)"
-								}),
-								/* @__PURE__ */ c("p", {
-									className: "text-xs text-text-muted mt-1",
-									children: "Short explanation shown in billing and usage detail views."
-								})
-							] }),
-							/* @__PURE__ */ l("div", { children: [
-								/* @__PURE__ */ c("label", {
-									htmlFor: "quotaType",
-									className: "block text-sm font-medium text-text-primary mb-1",
-									children: "Quota Type *"
-								}),
-								/* @__PURE__ */ l("select", {
-									id: "quotaType",
-									value: k,
-									onChange: (e) => A(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__ */ c("option", {
-										value: r.PRODUCT_SPECIFIC,
-										children: "Product Specific"
-									}), /* @__PURE__ */ c("option", {
-										value: r.POOLED,
-										children: "Pooled"
-									})]
+					}),
+					R && /* @__PURE__ */ c("div", {
+						className: "p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg",
+						children: /* @__PURE__ */ c("p", {
+							className: "text-sm text-status-success-text",
+							children: "Quota created successfully! Redirecting…"
+						})
+					}),
+					/* @__PURE__ */ l("div", {
+						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+						children: [/* @__PURE__ */ c("div", {
+							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
+							children: /* @__PURE__ */ c("h2", {
+								className: "font-semibold text-text-primary",
+								children: "Basic Information"
+							})
+						}), /* @__PURE__ */ l("div", {
+							className: "p-4 space-y-4",
+							children: [
+								/* @__PURE__ */ l("div", { children: [
+									/* @__PURE__ */ c("label", {
+										htmlFor: "name",
+										className: "block text-sm font-medium text-text-primary mb-1",
+										children: "Quota Key *"
+									}),
+									/* @__PURE__ */ c("input", {
+										id: "name",
+										type: "text",
+										value: v,
+										onChange: (e) => y(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)] font-mono text-sm",
+										placeholder: "e.g., sessions-started, tunnels-created",
+										required: !0
+									}),
+									/* @__PURE__ */ l("p", {
+										className: "text-xs text-text-muted mt-1",
+										children: [
+											"Internal machine key, must match the ",
+											/* @__PURE__ */ c("code", { children: "quotaName" }),
+											" used in",
+											" ",
+											/* @__PURE__ */ c("code", { children: "@usage" }),
+											" directives. Never shown to users."
+										]
+									})
+								] }),
+								/* @__PURE__ */ l("div", { children: [
+									/* @__PURE__ */ c("label", {
+										htmlFor: "displayName",
+										className: "block text-sm font-medium text-text-primary mb-1",
+										children: "Display Name *"
+									}),
+									/* @__PURE__ */ c("input", {
+										id: "displayName",
+										type: "text",
+										value: b,
+										onChange: (e) => x(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: "e.g., Tunnels, Session Starts, Webhooks",
+										required: !0
+									}),
+									/* @__PURE__ */ c("p", {
+										className: "text-xs text-text-muted mt-1",
+										children: "Human-readable name shown to users in billing and usage UI."
+									})
+								] }),
+								/* @__PURE__ */ l("div", { children: [
+									/* @__PURE__ */ c("label", {
+										htmlFor: "description",
+										className: "block text-sm font-medium text-text-primary mb-1",
+										children: "Description"
+									}),
+									/* @__PURE__ */ c("textarea", {
+										id: "description",
+										value: S,
+										onChange: (e) => C(e.target.value),
+										rows: 2,
+										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)] resize-none",
+										placeholder: "e.g., Active tunnels created through VibeControls (slot freed on delete)"
+									}),
+									/* @__PURE__ */ c("p", {
+										className: "text-xs text-text-muted mt-1",
+										children: "Short explanation shown in billing and usage detail views."
+									})
+								] }),
+								/* @__PURE__ */ l("div", { children: [
+									/* @__PURE__ */ c("label", {
+										htmlFor: "quotaType",
+										className: "block text-sm font-medium text-text-primary mb-1",
+										children: "Quota Type *"
+									}),
+									/* @__PURE__ */ l("select", {
+										id: "quotaType",
+										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)]",
+										children: [/* @__PURE__ */ c("option", {
+											value: r.PRODUCT_SPECIFIC,
+											children: "Product Specific"
+										}), /* @__PURE__ */ c("option", {
+											value: r.POOLED,
+											children: "Pooled"
+										})]
+									}),
+									/* @__PURE__ */ c("p", {
+										className: "text-xs text-text-muted mt-1",
+										children: A === r.POOLED ? "Shared across all products" : "Specific to individual products"
+									})
+								] }),
+								/* @__PURE__ */ l("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ c("input", {
+										id: "reusable",
+										type: "checkbox",
+										checked: M,
+										onChange: (e) => N(e.target.checked),
+										className: "size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]"
+									}), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+										htmlFor: "reusable",
+										className: "text-sm font-medium text-text-primary",
+										children: "Reusable Quota"
+									}), /* @__PURE__ */ c("p", {
+										className: "text-xs text-text-muted",
+										children: "Enable for quotas like seats or bots that can be freed up"
+									})] })]
 								}),
-								/* @__PURE__ */ c("p", {
-									className: "text-xs text-text-muted mt-1",
-									children: k === r.POOLED ? "Shared across all products" : "Specific to individual products"
-								})
-							] }),
-							/* @__PURE__ */ l("div", {
-								className: "flex items-center gap-3",
-								children: [/* @__PURE__ */ c("input", {
-									id: "reusable",
-									type: "checkbox",
-									checked: j,
-									onChange: (e) => M(e.target.checked),
-									className: "size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]"
-								}), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
-									htmlFor: "reusable",
-									className: "text-sm font-medium text-text-primary",
-									children: "Reusable Quota"
-								}), /* @__PURE__ */ c("p", {
-									className: "text-xs text-text-muted",
-									children: "Enable for quotas like seats or bots that can be freed up"
-								})] })]
-							}),
-							/* @__PURE__ */ l("div", { children: [
-								/* @__PURE__ */ c("label", {
-									htmlFor: "resetPeriod",
+								/* @__PURE__ */ l("div", { children: [
+									/* @__PURE__ */ c("label", {
+										htmlFor: "resetPeriod",
+										className: "block text-sm font-medium text-text-primary mb-1",
+										children: "Reset Period"
+									}),
+									/* @__PURE__ */ l("select", {
+										id: "resetPeriod",
+										value: P,
+										onChange: (e) => F(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__ */ c("option", {
+												value: n.NEVER,
+												children: "Never (one-time limit)"
+											}),
+											/* @__PURE__ */ c("option", {
+												value: n.DAILY,
+												children: "Daily (resets every day)"
+											}),
+											/* @__PURE__ */ c("option", {
+												value: n.MONTHLY,
+												children: "Monthly (resets every month)"
+											})
+										]
+									}),
+									/* @__PURE__ */ c("p", {
+										className: "text-xs text-text-muted mt-1",
+										children: "How often the quota usage counter is reset to zero"
+									})
+								] })
+							]
+						})]
+					}),
+					/* @__PURE__ */ l("div", {
+						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+						children: [/* @__PURE__ */ c("div", {
+							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
+							children: /* @__PURE__ */ c("h2", {
+								className: "font-semibold text-text-primary",
+								children: "Limits Configuration"
+							})
+						}), /* @__PURE__ */ l("div", {
+							className: "p-4 space-y-4",
+							children: [
+								/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+									htmlFor: "limitType",
 									className: "block text-sm font-medium text-text-primary mb-1",
-									children: "Reset Period"
-								}),
-								/* @__PURE__ */ l("select", {
-									id: "resetPeriod",
-									value: N,
-									onChange: (e) => P(e.target.value),
+									children: "Limit Type *"
+								}), /* @__PURE__ */ l("select", {
+									id: "limitType",
+									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)]",
 									children: [
 										/* @__PURE__ */ c("option", {
-											value: n.NEVER,
-											children: "Never (one-time limit)"
+											value: "numeric",
+											children: "Numeric (count)"
+										}),
+										/* @__PURE__ */ c("option", {
+											value: "storage",
+											children: "Storage (bytes)"
 										}),
 										/* @__PURE__ */ c("option", {
-											value: n.DAILY,
-											children: "Daily (resets every day)"
+											value: "duration",
+											children: "Duration (seconds)"
 										}),
 										/* @__PURE__ */ c("option", {
-											value: n.MONTHLY,
-											children: "Monthly (resets every month)"
+											value: "percentage",
+											children: "Percentage"
 										})
 									]
-								}),
-								/* @__PURE__ */ c("p", {
-									className: "text-xs text-text-muted mt-1",
-									children: "How often the quota usage counter is reset to zero"
-								})
-							] })
-						]
-					})]
-				}),
-				/* @__PURE__ */ l("div", {
-					className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
-					children: [/* @__PURE__ */ c("div", {
-						className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
-						children: /* @__PURE__ */ c("h2", {
-							className: "font-semibold text-text-primary",
-							children: "Limits Configuration"
-						})
-					}), /* @__PURE__ */ l("div", {
-						className: "p-4 space-y-4",
-						children: [
-							/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
-								htmlFor: "limitType",
-								className: "block text-sm font-medium text-text-primary mb-1",
-								children: "Limit Type *"
-							}), /* @__PURE__ */ l("select", {
-								id: "limitType",
-								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)]",
-								children: [
-									/* @__PURE__ */ c("option", {
-										value: "numeric",
-										children: "Numeric (count)"
+								})] }),
+								/* @__PURE__ */ l("div", { children: [
+									/* @__PURE__ */ c("label", {
+										htmlFor: "limitValue",
+										className: "block text-sm font-medium text-text-primary mb-1",
+										children: "Limit Value *"
 									}),
-									/* @__PURE__ */ c("option", {
-										value: "storage",
-										children: "Storage (bytes)"
+									/* @__PURE__ */ c("input", {
+										id: "limitValue",
+										type: "number",
+										min: "0",
+										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)]",
+										placeholder: "1000",
+										required: !0
+									}),
+									/* @__PURE__ */ c("p", {
+										className: "text-xs text-text-muted mt-1",
+										children: "The maximum limit value for this quota"
+									})
+								] }),
+								/* @__PURE__ */ l("div", { children: [
+									/* @__PURE__ */ c("label", {
+										htmlFor: "unit",
+										className: "block text-sm font-medium text-text-primary mb-1",
+										children: "Unit *"
 									}),
-									/* @__PURE__ */ c("option", {
-										value: "duration",
-										children: "Duration (seconds)"
+									/* @__PURE__ */ c("input", {
+										id: "unit",
+										type: "text",
+										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)]",
+										placeholder: "e.g., bots, GB, MB, seats, workflow runs",
+										required: !0
 									}),
-									/* @__PURE__ */ c("option", {
-										value: "percentage",
-										children: "Percentage"
+									/* @__PURE__ */ c("p", {
+										className: "text-xs text-text-muted mt-1",
+										children: "The unit of measurement displayed with usage values (e.g., \"2/6 bots\")"
 									})
-								]
-							})] }),
-							/* @__PURE__ */ l("div", { children: [
-								/* @__PURE__ */ c("label", {
-									htmlFor: "limitValue",
-									className: "block text-sm font-medium text-text-primary mb-1",
-									children: "Limit Value *"
-								}),
-								/* @__PURE__ */ c("input", {
-									id: "limitValue",
-									type: "number",
-									min: "0",
-									value: T,
-									onChange: (e) => E(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: "1000",
-									required: !0
-								}),
-								/* @__PURE__ */ c("p", {
-									className: "text-xs text-text-muted mt-1",
-									children: "The maximum limit value for this quota"
-								})
-							] }),
-							/* @__PURE__ */ l("div", { children: [
-								/* @__PURE__ */ c("label", {
-									htmlFor: "unit",
-									className: "block text-sm font-medium text-text-primary mb-1",
-									children: "Unit *"
-								}),
-								/* @__PURE__ */ c("input", {
-									id: "unit",
-									type: "text",
-									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)]",
-									placeholder: "e.g., bots, GB, MB, seats, workflow runs",
-									required: !0
-								}),
-								/* @__PURE__ */ c("p", {
-									className: "text-xs text-text-muted mt-1",
-									children: "The unit of measurement displayed with usage values (e.g., \"2/6 bots\")"
-								})
-							] })
-						]
-					})]
-				}),
-				/* @__PURE__ */ l("div", {
-					className: "flex items-center gap-3 pt-4",
-					children: [/* @__PURE__ */ c("button", {
-						type: "submit",
-						disabled: g,
-						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: g ? f("billing.quota.creating", "Creating...") : f("billing.quota.createQuota", "Create Quota")
-					}), /* @__PURE__ */ c("button", {
-						type: "button",
-						onClick: () => p("/quotas"),
-						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__ */ l("div", {
+						className: "flex items-center gap-3 pt-4",
+						children: [/* @__PURE__ */ c("button", {
+							type: "submit",
+							disabled: _,
+							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: _ ? p("billing.quota.creating", "Creating...") : p("billing.quota.createQuota", "Create Quota")
+						}), /* @__PURE__ */ c("button", {
+							type: "button",
+							onClick: () => m("/quotas"),
+							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__ */ c(e, { message: "You don't have permission to create quotas." });
 };
 //#endregion
-export { d as QuotaTemplateCreatePage };
+export { f as QuotaTemplateCreatePage };
 
 //# sourceMappingURL=QuotaTemplateCreatePage.js.map