npm - @burdenoff/microfe-billing - Versions diffs - 2026.614.1 → 2026.623.2 - Mend

@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (135) hide show

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

@@ -72,11 +72,11 @@ var d = () => {
 					})
 				}),
 				/* @__PURE__ */ l("div", {
-					className: "border border-border rounded-lg bg-card overflow-hidden",
+					className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
 					children: [/* @__PURE__ */ c("div", {
-						className: "p-4 border-b border-border bg-muted/30",
+						className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
 						children: /* @__PURE__ */ c("h2", {
-							className: "font-semibold text-foreground",
+							className: "font-semibold text-text-primary",
 							children: "Basic Information"
 						})
 					}), /* @__PURE__ */ l("div", {
@@ -85,7 +85,7 @@ var d = () => {
 							/* @__PURE__ */ l("div", { children: [
 								/* @__PURE__ */ c("label", {
 									htmlFor: "name",
-									className: "block text-sm font-medium text-foreground mb-1",
+									className: "block text-sm font-medium text-text-primary mb-1",
 									children: "Quota Key *"
 								}),
 								/* @__PURE__ */ c("input", {
@@ -93,12 +93,12 @@ var d = () => {
 									type: "text",
 									value: _,
 									onChange: (e) => v(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 font-mono text-sm",
+									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-muted-foreground mt-1",
+									className: "text-xs text-text-muted mt-1",
 									children: [
 										"Internal machine key, must match the ",
 										/* @__PURE__ */ c("code", { children: "quotaName" }),
@@ -112,7 +112,7 @@ var d = () => {
 							/* @__PURE__ */ l("div", { children: [
 								/* @__PURE__ */ c("label", {
 									htmlFor: "displayName",
-									className: "block text-sm font-medium text-foreground mb-1",
+									className: "block text-sm font-medium text-text-primary mb-1",
 									children: "Display Name *"
 								}),
 								/* @__PURE__ */ c("input", {
@@ -120,19 +120,19 @@ var d = () => {
 									type: "text",
 									value: y,
 									onChange: (e) => b(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",
+									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-muted-foreground mt-1",
+									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-foreground mb-1",
+									className: "block text-sm font-medium text-text-primary mb-1",
 									children: "Description"
 								}),
 								/* @__PURE__ */ c("textarea", {
@@ -140,25 +140,25 @@ var d = () => {
 									value: x,
 									onChange: (e) => S(e.target.value),
 									rows: 2,
-									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 resize-none",
+									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-muted-foreground mt-1",
+									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-foreground mb-1",
+									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 rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+									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"
@@ -168,7 +168,7 @@ var d = () => {
 									})]
 								}),
 								/* @__PURE__ */ c("p", {
-									className: "text-xs text-muted-foreground mt-1",
+									className: "text-xs text-text-muted mt-1",
 									children: k === r.POOLED ? "Shared across all products" : "Specific to individual products"
 								})
 							] }),
@@ -179,27 +179,27 @@ var d = () => {
 									type: "checkbox",
 									checked: j,
 									onChange: (e) => M(e.target.checked),
-									className: "size-4 rounded border-border text-primary focus:ring-primary"
+									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-foreground",
+									className: "text-sm font-medium text-text-primary",
 									children: "Reusable Quota"
 								}), /* @__PURE__ */ c("p", {
-									className: "text-xs text-muted-foreground",
+									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",
-									className: "block text-sm font-medium text-foreground mb-1",
+									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),
-									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",
+									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,
@@ -216,7 +216,7 @@ var d = () => {
 									]
 								}),
 								/* @__PURE__ */ c("p", {
-									className: "text-xs text-muted-foreground mt-1",
+									className: "text-xs text-text-muted mt-1",
 									children: "How often the quota usage counter is reset to zero"
 								})
 							] })
@@ -224,11 +224,11 @@ var d = () => {
 					})]
 				}),
 				/* @__PURE__ */ l("div", {
-					className: "border border-border rounded-lg bg-card overflow-hidden",
+					className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
 					children: [/* @__PURE__ */ c("div", {
-						className: "p-4 border-b border-border bg-muted/30",
+						className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
 						children: /* @__PURE__ */ c("h2", {
-							className: "font-semibold text-foreground",
+							className: "font-semibold text-text-primary",
 							children: "Limits Configuration"
 						})
 					}), /* @__PURE__ */ l("div", {
@@ -236,13 +236,13 @@ var d = () => {
 						children: [
 							/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
 								htmlFor: "limitType",
-								className: "block text-sm font-medium text-foreground mb-1",
+								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 rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+								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",
@@ -265,7 +265,7 @@ var d = () => {
 							/* @__PURE__ */ l("div", { children: [
 								/* @__PURE__ */ c("label", {
 									htmlFor: "limitValue",
-									className: "block text-sm font-medium text-foreground mb-1",
+									className: "block text-sm font-medium text-text-primary mb-1",
 									children: "Limit Value *"
 								}),
 								/* @__PURE__ */ c("input", {
@@ -274,19 +274,19 @@ var d = () => {
 									min: "0",
 									value: T,
 									onChange: (e) => E(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",
+									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-muted-foreground mt-1",
+									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-foreground mb-1",
+									className: "block text-sm font-medium text-text-primary mb-1",
 									children: "Unit *"
 								}),
 								/* @__PURE__ */ c("input", {
@@ -294,12 +294,12 @@ var d = () => {
 									type: "text",
 									value: D,
 									onChange: (e) => O(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",
+									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-muted-foreground mt-1",
+									className: "text-xs text-text-muted mt-1",
 									children: "The unit of measurement displayed with usage values (e.g., \"2/6 bots\")"
 								})
 							] })
@@ -311,12 +311,12 @@ var d = () => {
 					children: [/* @__PURE__ */ c("button", {
 						type: "submit",
 						disabled: g,
-						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",
+						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 text-foreground rounded-md hover:bg-muted transition-colors",
+						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"
 					})]
 				})

package/dist/billing/modules/quota/pages/QuotaTemplateCreatePage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QuotaTemplateCreatePage.js","names":[],"sources":["../../../../../src/billing/modules/quota/pages/QuotaTemplateCreatePage.tsx"],"sourcesContent":["/*\n Quota Module - Quota Template Create Page\n * Form to create a new quota template\n /\n\nimport { useState, type FC, type FormEvent } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useQuotaTemplateMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport { QuotaType, QuotaResetPeriod, type CreateQuotaInput } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const QuotaTemplateCreatePage: 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 { createQuota, isCreating } = useQuotaTemplateMutations();\n\n // Form state\n const [name, setName] = useState('');\n const [displayName, setDisplayName] = useState('');\n const [description, setDescription] = useState('');\n const [limitType, setLimitType] = useState('numeric');\n const [limitValue, setLimitValue] = useState('');\n const [unit, setUnit] = useState('');\n const [quotaType, setQuotaType] = useState<QuotaType>(QuotaType.PRODUCT_SPECIFIC);\n const [reusable, setReusable] = useState(false);\n const [resetPeriod, setResetPeriod] = useState<QuotaResetPeriod>(QuotaResetPeriod.NEVER);\n const [error, setError] = useState<string \| null>(null);\n const [success, setSuccess] = useState(false);\n\n // Permission check\n if (!permissions.canManageQuotas) {\n return <AccessDenied message=\"You don't have permission to create quotas.\" />;\n }\n\n const handleSubmit = async (e: FormEvent) => {\n e.preventDefault();\n setError(null);\n setSuccess(false);\n\n // Validation\n if (!name.trim()) {\n setError('Quota name is required');\n return;\n }\n if (!limitValue \|\| isNaN(Number(limitValue)) \|\| Number(limitValue) < 0) {\n setError('Valid limit value is required');\n return;\n }\n if (!unit.trim()) {\n setError('Unit is required (e.g., bots, GB, seats)');\n return;\n }\n\n const input: CreateQuotaInput = {\n name: name.trim(),\n limits: {\n type: limitType,\n value: Number(limitValue),\n unit: unit.trim(),\n },\n quotaType,\n reusable,\n resetPeriod,\n context: {\n displayName: displayName.trim() \|\| name.trim(),\n description: description.trim(),\n },\n };\n\n try {\n await createQuota(input);\n setSuccess(true);\n // Navigate back after short delay\n setTimeout(() => navigateTo('/quotas'), 1500);\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to create quota');\n }\n };\n\n return (\n <div className=\"space-y-6 p-6\">\n <PageHeader title=\"Create New Quota\" description=\"Set up a new quota template\" />\n\n <form onSubmit={handleSubmit} className=\"max-w-2xl space-y-6\">\n {/ Error/Success Messages /}\n {error && (\n <div className=\"p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg\">\n <p className=\"text-sm text-status-error-text\">{error}</p>\n </div>\n )}\n {success && (\n <div className=\"p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg\">\n <p className=\"text-sm text-status-success-text\">\n Quota created successfully! Redirecting…\n </p>\n </div>\n )}\n\n {/ Basic Info /}\n <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n <div className=\"p-4 border-b border-border bg-muted/30\">\n <h2 className=\"font-semibold text-foreground\">Basic Information</h2>\n </div>\n <div className=\"p-4 space-y-4\">\n {/ Machine Key (name) /}\n <div>\n <label htmlFor=\"name\" className=\"block text-sm font-medium text-foreground mb-1\">\n Quota Key \n </label>\n <input\n id=\"name\"\n type=\"text\"\n value={name}\n onChange={(e) => setName(e.target.value)}\n 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 font-mono text-sm\"\n placeholder=\"e.g., sessions-started, tunnels-created\"\n required\n />\n <p className=\"text-xs text-muted-foreground mt-1\">\n Internal machine key, must match the <code>quotaName</code> used in{' '}\n <code>@usage</code> directives. Never shown to users.\n </p>\n </div>\n\n {/* Display Name /}\n <div>\n <label\n htmlFor=\"displayName\"\n className=\"block text-sm font-medium text-foreground mb-1\"\n >\n Display Name \n </label>\n <input\n id=\"displayName\"\n type=\"text\"\n value={displayName}\n onChange={(e) => setDisplayName(e.target.value)}\n 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\"\n placeholder=\"e.g., Tunnels, Session Starts, Webhooks\"\n required\n />\n <p className=\"text-xs text-muted-foreground mt-1\">\n Human-readable name shown to users in billing and usage UI.\n </p>\n </div>\n\n {/* Description /}\n <div>\n <label\n htmlFor=\"description\"\n className=\"block text-sm font-medium text-foreground mb-1\"\n >\n Description\n </label>\n <textarea\n id=\"description\"\n value={description}\n onChange={(e) => setDescription(e.target.value)}\n rows={2}\n 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 resize-none\"\n placeholder=\"e.g., Active tunnels created through VibeControls (slot freed on delete)\"\n />\n <p className=\"text-xs text-muted-foreground mt-1\">\n Short explanation shown in billing and usage detail views.\n </p>\n </div>\n\n {/ Quota Type /}\n <div>\n <label htmlFor=\"quotaType\" className=\"block text-sm font-medium text-foreground mb-1\">\n Quota Type \n </label>\n <select\n id=\"quotaType\"\n value={quotaType}\n onChange={(e) => setQuotaType(e.target.value as QuotaType)}\n 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\"\n >\n <option value={QuotaType.PRODUCT_SPECIFIC}>Product Specific</option>\n <option value={QuotaType.POOLED}>Pooled</option>\n </select>\n <p className=\"text-xs text-muted-foreground mt-1\">\n {quotaType === QuotaType.POOLED\n ? 'Shared across all products'\n : 'Specific to individual products'}\n </p>\n </div>\n\n {/* Reusable /}\n <div className=\"flex items-center gap-3\">\n <input\n id=\"reusable\"\n type=\"checkbox\"\n checked={reusable}\n onChange={(e) => setReusable(e.target.checked)}\n className=\"size-4 rounded border-border text-primary focus:ring-primary\"\n />\n <div>\n <label htmlFor=\"reusable\" className=\"text-sm font-medium text-foreground\">\n Reusable Quota\n </label>\n <p className=\"text-xs text-muted-foreground\">\n Enable for quotas like seats or bots that can be freed up\n </p>\n </div>\n </div>\n\n {/ Reset Period /}\n <div>\n <label\n htmlFor=\"resetPeriod\"\n className=\"block text-sm font-medium text-foreground mb-1\"\n >\n Reset Period\n </label>\n <select\n id=\"resetPeriod\"\n value={resetPeriod}\n onChange={(e) => setResetPeriod(e.target.value as QuotaResetPeriod)}\n 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\"\n >\n <option value={QuotaResetPeriod.NEVER}>Never (one-time limit)</option>\n <option value={QuotaResetPeriod.DAILY}>Daily (resets every day)</option>\n <option value={QuotaResetPeriod.MONTHLY}>Monthly (resets every month)</option>\n </select>\n <p className=\"text-xs text-muted-foreground mt-1\">\n How often the quota usage counter is reset to zero\n </p>\n </div>\n </div>\n </div>\n\n {/ Limits Configuration /}\n <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n <div className=\"p-4 border-b border-border bg-muted/30\">\n <h2 className=\"font-semibold text-foreground\">Limits Configuration</h2>\n </div>\n <div className=\"p-4 space-y-4\">\n {/ Limit Type /}\n <div>\n <label htmlFor=\"limitType\" className=\"block text-sm font-medium text-foreground mb-1\">\n Limit Type \n </label>\n <select\n id=\"limitType\"\n value={limitType}\n onChange={(e) => setLimitType(e.target.value)}\n 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\"\n >\n <option value=\"numeric\">Numeric (count)</option>\n <option value=\"storage\">Storage (bytes)</option>\n <option value=\"duration\">Duration (seconds)</option>\n <option value=\"percentage\">Percentage</option>\n </select>\n </div>\n\n {/* Limit Value /}\n <div>\n <label\n htmlFor=\"limitValue\"\n className=\"block text-sm font-medium text-foreground mb-1\"\n >\n Limit Value \n </label>\n <input\n id=\"limitValue\"\n type=\"number\"\n min=\"0\"\n value={limitValue}\n onChange={(e) => setLimitValue(e.target.value)}\n 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\"\n placeholder=\"1000\"\n required\n />\n <p className=\"text-xs text-muted-foreground mt-1\">\n The maximum limit value for this quota\n </p>\n </div>\n\n {/* Unit /}\n <div>\n <label htmlFor=\"unit\" className=\"block text-sm font-medium text-foreground mb-1\">\n Unit \n </label>\n <input\n id=\"unit\"\n type=\"text\"\n value={unit}\n onChange={(e) => setUnit(e.target.value)}\n 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\"\n placeholder=\"e.g., bots, GB, MB, seats, workflow runs\"\n required\n />\n <p className=\"text-xs text-muted-foreground mt-1\">\n The unit of measurement displayed with usage values (e.g., "2/6 bots")\n </p>\n </div>\n </div>\n </div>\n\n {/* Actions */}\n <div className=\"flex items-center gap-3 pt-4\">\n <button\n type=\"submit\"\n disabled={isCreating}\n 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\"\n >\n {isCreating\n ? tr('billing.quota.creating', 'Creating...')\n : tr('billing.quota.createQuota', 'Create Quota')}\n </button>\n <button\n type=\"button\"\n onClick={() => navigateTo('/quotas')}\n className=\"px-6 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n >\n Cancel\n </button>\n </div>\n </form>\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"QuotaTemplateCreatePage.js","names":[],"sources":["../../../../../src/billing/modules/quota/pages/QuotaTemplateCreatePage.tsx"],"sourcesContent":["/*\n Quota Module - Quota Template Create Page\n * Form to create a new quota template\n /\n\nimport { useState, type FC, type FormEvent } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useQuotaTemplateMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport { QuotaType, QuotaResetPeriod, type CreateQuotaInput } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const QuotaTemplateCreatePage: 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 { createQuota, isCreating } = useQuotaTemplateMutations();\n\n // Form state\n const [name, setName] = useState('');\n const [displayName, setDisplayName] = useState('');\n const [description, setDescription] = useState('');\n const [limitType, setLimitType] = useState('numeric');\n const [limitValue, setLimitValue] = useState('');\n const [unit, setUnit] = useState('');\n const [quotaType, setQuotaType] = useState<QuotaType>(QuotaType.PRODUCT_SPECIFIC);\n const [reusable, setReusable] = useState(false);\n const [resetPeriod, setResetPeriod] = useState<QuotaResetPeriod>(QuotaResetPeriod.NEVER);\n const [error, setError] = useState<string \| null>(null);\n const [success, setSuccess] = useState(false);\n\n // Permission check\n if (!permissions.canManageQuotas) {\n return <AccessDenied message=\"You don't have permission to create quotas.\" />;\n }\n\n const handleSubmit = async (e: FormEvent) => {\n e.preventDefault();\n setError(null);\n setSuccess(false);\n\n // Validation\n if (!name.trim()) {\n setError('Quota name is required');\n return;\n }\n if (!limitValue \|\| isNaN(Number(limitValue)) \|\| Number(limitValue) < 0) {\n setError('Valid limit value is required');\n return;\n }\n if (!unit.trim()) {\n setError('Unit is required (e.g., bots, GB, seats)');\n return;\n }\n\n const input: CreateQuotaInput = {\n name: name.trim(),\n limits: {\n type: limitType,\n value: Number(limitValue),\n unit: unit.trim(),\n },\n quotaType,\n reusable,\n resetPeriod,\n context: {\n displayName: displayName.trim() \|\| name.trim(),\n description: description.trim(),\n },\n };\n\n try {\n await createQuota(input);\n setSuccess(true);\n // Navigate back after short delay\n setTimeout(() => navigateTo('/quotas'), 1500);\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to create quota');\n }\n };\n\n return (\n <div className=\"space-y-6 p-6\">\n <PageHeader title=\"Create New Quota\" description=\"Set up a new quota template\" />\n\n <form onSubmit={handleSubmit} className=\"max-w-2xl space-y-6\">\n {/ Error/Success Messages /}\n {error && (\n <div className=\"p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg\">\n <p className=\"text-sm text-status-error-text\">{error}</p>\n </div>\n )}\n {success && (\n <div className=\"p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg\">\n <p className=\"text-sm text-status-success-text\">\n Quota created successfully! Redirecting…\n </p>\n </div>\n )}\n\n {/ Basic Info /}\n <div className=\"border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n <h2 className=\"font-semibold text-text-primary\">Basic Information</h2>\n </div>\n <div className=\"p-4 space-y-4\">\n {/ Machine Key (name) /}\n <div>\n <label htmlFor=\"name\" className=\"block text-sm font-medium text-text-primary mb-1\">\n Quota Key \n </label>\n <input\n id=\"name\"\n type=\"text\"\n value={name}\n onChange={(e) => setName(e.target.value)}\n 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\"\n placeholder=\"e.g., sessions-started, tunnels-created\"\n required\n />\n <p className=\"text-xs text-text-muted mt-1\">\n Internal machine key, must match the <code>quotaName</code> used in{' '}\n <code>@usage</code> directives. Never shown to users.\n </p>\n </div>\n\n {/* Display Name /}\n <div>\n <label\n htmlFor=\"displayName\"\n className=\"block text-sm font-medium text-text-primary mb-1\"\n >\n Display Name \n </label>\n <input\n id=\"displayName\"\n type=\"text\"\n value={displayName}\n onChange={(e) => setDisplayName(e.target.value)}\n 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)]\"\n placeholder=\"e.g., Tunnels, Session Starts, Webhooks\"\n required\n />\n <p className=\"text-xs text-text-muted mt-1\">\n Human-readable name shown to users in billing and usage UI.\n </p>\n </div>\n\n {/* Description /}\n <div>\n <label\n htmlFor=\"description\"\n className=\"block text-sm font-medium text-text-primary mb-1\"\n >\n Description\n </label>\n <textarea\n id=\"description\"\n value={description}\n onChange={(e) => setDescription(e.target.value)}\n rows={2}\n 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\"\n placeholder=\"e.g., Active tunnels created through VibeControls (slot freed on delete)\"\n />\n <p className=\"text-xs text-text-muted mt-1\">\n Short explanation shown in billing and usage detail views.\n </p>\n </div>\n\n {/ Quota Type /}\n <div>\n <label\n htmlFor=\"quotaType\"\n className=\"block text-sm font-medium text-text-primary mb-1\"\n >\n Quota Type \n </label>\n <select\n id=\"quotaType\"\n value={quotaType}\n onChange={(e) => setQuotaType(e.target.value as QuotaType)}\n 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)]\"\n >\n <option value={QuotaType.PRODUCT_SPECIFIC}>Product Specific</option>\n <option value={QuotaType.POOLED}>Pooled</option>\n </select>\n <p className=\"text-xs text-text-muted mt-1\">\n {quotaType === QuotaType.POOLED\n ? 'Shared across all products'\n : 'Specific to individual products'}\n </p>\n </div>\n\n {/* Reusable /}\n <div className=\"flex items-center gap-3\">\n <input\n id=\"reusable\"\n type=\"checkbox\"\n checked={reusable}\n onChange={(e) => setReusable(e.target.checked)}\n className=\"size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]\"\n />\n <div>\n <label htmlFor=\"reusable\" className=\"text-sm font-medium text-text-primary\">\n Reusable Quota\n </label>\n <p className=\"text-xs text-text-muted\">\n Enable for quotas like seats or bots that can be freed up\n </p>\n </div>\n </div>\n\n {/ Reset Period /}\n <div>\n <label\n htmlFor=\"resetPeriod\"\n className=\"block text-sm font-medium text-text-primary mb-1\"\n >\n Reset Period\n </label>\n <select\n id=\"resetPeriod\"\n value={resetPeriod}\n onChange={(e) => setResetPeriod(e.target.value as QuotaResetPeriod)}\n 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)]\"\n >\n <option value={QuotaResetPeriod.NEVER}>Never (one-time limit)</option>\n <option value={QuotaResetPeriod.DAILY}>Daily (resets every day)</option>\n <option value={QuotaResetPeriod.MONTHLY}>Monthly (resets every month)</option>\n </select>\n <p className=\"text-xs text-text-muted mt-1\">\n How often the quota usage counter is reset to zero\n </p>\n </div>\n </div>\n </div>\n\n {/ Limits Configuration /}\n <div className=\"border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n <h2 className=\"font-semibold text-text-primary\">Limits Configuration</h2>\n </div>\n <div className=\"p-4 space-y-4\">\n {/ Limit Type /}\n <div>\n <label\n htmlFor=\"limitType\"\n className=\"block text-sm font-medium text-text-primary mb-1\"\n >\n Limit Type \n </label>\n <select\n id=\"limitType\"\n value={limitType}\n onChange={(e) => setLimitType(e.target.value)}\n 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)]\"\n >\n <option value=\"numeric\">Numeric (count)</option>\n <option value=\"storage\">Storage (bytes)</option>\n <option value=\"duration\">Duration (seconds)</option>\n <option value=\"percentage\">Percentage</option>\n </select>\n </div>\n\n {/* Limit Value /}\n <div>\n <label\n htmlFor=\"limitValue\"\n className=\"block text-sm font-medium text-text-primary mb-1\"\n >\n Limit Value \n </label>\n <input\n id=\"limitValue\"\n type=\"number\"\n min=\"0\"\n value={limitValue}\n onChange={(e) => setLimitValue(e.target.value)}\n 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)]\"\n placeholder=\"1000\"\n required\n />\n <p className=\"text-xs text-text-muted mt-1\">The maximum limit value for this quota</p>\n </div>\n\n {/* Unit /}\n <div>\n <label htmlFor=\"unit\" className=\"block text-sm font-medium text-text-primary mb-1\">\n Unit \n </label>\n <input\n id=\"unit\"\n type=\"text\"\n value={unit}\n onChange={(e) => setUnit(e.target.value)}\n 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)]\"\n placeholder=\"e.g., bots, GB, MB, seats, workflow runs\"\n required\n />\n <p className=\"text-xs text-text-muted mt-1\">\n The unit of measurement displayed with usage values (e.g., "2/6 bots")\n </p>\n </div>\n </div>\n </div>\n\n {/* Actions */}\n <div className=\"flex items-center gap-3 pt-4\">\n <button\n type=\"submit\"\n disabled={isCreating}\n 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\"\n >\n {isCreating\n ? tr('billing.quota.creating', 'Creating...')\n : tr('billing.quota.createQuota', 'Create Quota')}\n </button>\n <button\n type=\"button\"\n onClick={() => navigateTo('/quotas')}\n className=\"px-6 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n >\n Cancel\n </button>\n </div>\n </form>\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/billing/modules/quota/pages/QuotaTemplateDetailPage.js CHANGED Viewed

@@ -21,7 +21,7 @@ var p = () => {
 	if (!_.canViewQuotas) return /* @__PURE__ */ u(e, { message: "You don't have permission to view quota details." });
 	if (y) return /* @__PURE__ */ d("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ u("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ d("div", {
+		children: [/* @__PURE__ */ u("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ d("div", {
 			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
 			children: [/* @__PURE__ */ u("div", {
 				className: "lg:col-span-2 space-y-4",
@@ -29,8 +29,8 @@ var p = () => {
 					1,
 					2,
 					3
-				].map((e) => /* @__PURE__ */ u("div", { className: "h-24 bg-muted animate-pulse rounded" }, e))
-			}), /* @__PURE__ */ u("div", { className: "h-64 bg-muted animate-pulse rounded" })]
+				].map((e) => /* @__PURE__ */ u("div", { className: "h-24 bg-bg-sunken animate-pulse rounded" }, e))
+			}), /* @__PURE__ */ u("div", { className: "h-64 bg-bg-sunken animate-pulse rounded" })]
 		})]
 	});
 	if (b && i(b)) return /* @__PURE__ */ u("div", {
@@ -48,9 +48,9 @@ var p = () => {
 			className: "text-center space-y-4",
 			children: [
 				/* @__PURE__ */ u("div", {
-					className: "size-12 mx-auto rounded-full bg-muted flex items-center justify-center",
+					className: "size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center",
 					children: /* @__PURE__ */ u("svg", {
-						className: "size-6 text-muted-foreground",
+						className: "size-6 text-text-muted",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -63,17 +63,17 @@ var p = () => {
 					})
 				}),
 				/* @__PURE__ */ u("h2", {
-					className: "text-lg font-semibold text-foreground",
+					className: "text-lg font-semibold text-text-primary",
 					children: m("billing.quota.quotaNotFound", "Quota not found")
 				}),
 				/* @__PURE__ */ u("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-muted",
 					children: "The quota you're looking for doesn't exist or has been removed."
 				}),
 				/* @__PURE__ */ u("button", {
 					type: "button",
 					onClick: () => g("/quotas"),
-					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors",
 					children: "Back to Quotas"
 				})
 			]
@@ -97,11 +97,11 @@ var p = () => {
 				className: "lg:col-span-2 space-y-6",
 				children: [
 					/* @__PURE__ */ d("div", {
-						className: "border border-border rounded-lg bg-card overflow-hidden",
+						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
 						children: [/* @__PURE__ */ u("div", {
-							className: "p-4 border-b border-border bg-muted/30",
+							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
 							children: /* @__PURE__ */ u("h2", {
-								className: "font-semibold text-foreground",
+								className: "font-semibold text-text-primary",
 								children: m("billing.quota.limitsConfig", "Limits Configuration")
 							})
 						}), /* @__PURE__ */ u("div", {
@@ -110,24 +110,24 @@ var p = () => {
 								className: "grid grid-cols-3 gap-6",
 								children: [
 									/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-muted",
 										children: "Limit Type"
 									}), /* @__PURE__ */ u("p", {
-										className: "text-lg font-semibold text-foreground capitalize mt-1",
+										className: "text-lg font-semibold text-text-primary capitalize mt-1",
 										children: E
 									})] }),
 									/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-muted",
 										children: "Limit Value"
 									}), /* @__PURE__ */ u("p", {
-										className: "text-lg font-semibold text-foreground mt-1",
+										className: "text-lg font-semibold text-text-primary mt-1",
 										children: D.toLocaleString()
 									})] }),
 									/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-muted",
 										children: "Unit"
 									}), /* @__PURE__ */ u("p", {
-										className: "text-lg font-semibold text-foreground mt-1",
+										className: "text-lg font-semibold text-text-primary mt-1",
 										children: O || "-"
 									})] })
 								]
@@ -135,54 +135,54 @@ var p = () => {
 						})]
 					}),
 					/* @__PURE__ */ d("div", {
-						className: "border border-border rounded-lg bg-card overflow-hidden",
+						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
 						children: [/* @__PURE__ */ u("div", {
-							className: "p-4 border-b border-border bg-muted/30",
+							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
 							children: /* @__PURE__ */ u("h2", {
-								className: "font-semibold text-foreground",
+								className: "font-semibold text-text-primary",
 								children: m("billing.quota.properties", "Properties")
 							})
 						}), /* @__PURE__ */ d("div", {
 							className: "p-6 space-y-4",
 							children: [/* @__PURE__ */ d("div", {
-								className: "flex items-center justify-between p-3 border border-border rounded-lg",
+								className: "flex items-center justify-between p-3 border border-border-subtle rounded-lg",
 								children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
-									className: "font-medium text-foreground",
+									className: "font-medium text-text-primary",
 									children: "Quota Type"
 								}), /* @__PURE__ */ u("p", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-muted",
 									children: v.quotaType === "POOLED" ? "Shared across all products" : "Specific to individual products"
 								})] }), /* @__PURE__ */ u("span", {
-									className: `px-3 py-1 text-sm font-medium rounded ${v.quotaType === "POOLED" ? "bg-status-info-bg-subtle text-status-info-text" : "bg-accent-purple-subtle text-accent-purple"}`,
+									className: `px-3 py-1 text-sm font-medium rounded ${v.quotaType === "POOLED" ? "bg-status-info-bg-subtle text-status-info-text" : "bg-accent-purple-subtle text-text-primary"}`,
 									children: v.quotaType === "POOLED" ? "Pooled" : "Product Specific"
 								})]
 							}), /* @__PURE__ */ d("div", {
-								className: "flex items-center justify-between p-3 border border-border rounded-lg",
+								className: "flex items-center justify-between p-3 border border-border-subtle rounded-lg",
 								children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
-									className: "font-medium text-foreground",
+									className: "font-medium text-text-primary",
 									children: "Reusable"
 								}), /* @__PURE__ */ u("p", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-muted",
 									children: v.reusable ? "Quota can be freed up and reused (e.g., seats, bots)" : "Quota is consumed permanently (e.g., API calls, storage)"
 								})] }), /* @__PURE__ */ u("span", {
-									className: `px-3 py-1 text-sm font-medium rounded ${v.reusable ? "bg-status-success-bg-subtle text-status-success-text" : "bg-muted text-muted-foreground"}`,
+									className: `px-3 py-1 text-sm font-medium rounded ${v.reusable ? "bg-status-success-bg-subtle text-status-success-text" : "bg-bg-sunken text-text-muted"}`,
 									children: v.reusable ? "Yes" : "No"
 								})]
 							})]
 						})]
 					}),
 					/* @__PURE__ */ d("div", {
-						className: "border border-border rounded-lg bg-card overflow-hidden",
+						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
 						children: [/* @__PURE__ */ u("div", {
-							className: "p-4 border-b border-border bg-muted/30",
+							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
 							children: /* @__PURE__ */ u("h2", {
-								className: "font-semibold text-foreground",
+								className: "font-semibold text-text-primary",
 								children: "Limits (Raw JSON)"
 							})
 						}), /* @__PURE__ */ u("div", {
 							className: "p-4",
 							children: /* @__PURE__ */ u("pre", {
-								className: "text-sm text-foreground bg-muted/50 p-4 rounded-lg overflow-auto",
+								className: "text-sm text-text-primary bg-bg-sunken/50 p-4 rounded-lg overflow-auto",
 								children: JSON.stringify(v.limits, null, 2)
 							})
 						})]
@@ -192,11 +192,11 @@ var p = () => {
 				className: "space-y-6",
 				children: [
 					/* @__PURE__ */ d("div", {
-						className: "border border-border rounded-lg bg-card overflow-hidden",
+						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
 						children: [/* @__PURE__ */ u("div", {
-							className: "p-4 border-b border-border bg-muted/30",
+							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
 							children: /* @__PURE__ */ u("h2", {
-								className: "font-semibold text-foreground",
+								className: "font-semibold text-text-primary",
 								children: "Status"
 							})
 						}), /* @__PURE__ */ d("div", {
@@ -205,30 +205,30 @@ var p = () => {
 								/* @__PURE__ */ d("div", {
 									className: "flex items-center justify-between",
 									children: [/* @__PURE__ */ u("span", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-muted",
 										children: "Status"
 									}), /* @__PURE__ */ u("span", {
-										className: `px-2 py-1 text-xs font-medium rounded ${v.isActive ? "bg-status-success-bg-subtle text-status-success-text" : "bg-muted text-muted-foreground"}`,
+										className: `px-2 py-1 text-xs font-medium rounded ${v.isActive ? "bg-status-success-bg-subtle text-status-success-text" : "bg-bg-sunken text-text-muted"}`,
 										children: v.isActive ? "Active" : "Inactive"
 									})]
 								}),
 								/* @__PURE__ */ d("div", {
 									className: "flex items-center justify-between",
 									children: [/* @__PURE__ */ u("span", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-muted",
 										children: "Created"
 									}), /* @__PURE__ */ u("span", {
-										className: "text-sm font-medium text-foreground",
+										className: "text-sm font-medium text-text-primary",
 										children: r(v.createdAt, "short")
 									})]
 								}),
 								/* @__PURE__ */ d("div", {
 									className: "flex items-center justify-between",
 									children: [/* @__PURE__ */ u("span", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-muted",
 										children: "Updated"
 									}), /* @__PURE__ */ u("span", {
-										className: "text-sm font-medium text-foreground",
+										className: "text-sm font-medium text-text-primary",
 										children: r(v.updatedAt, "short")
 									})]
 								})
@@ -236,11 +236,11 @@ var p = () => {
 						})]
 					}),
 					_.canManageQuotas && /* @__PURE__ */ d("div", {
-						className: "border border-border rounded-lg bg-card overflow-hidden",
+						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
 						children: [/* @__PURE__ */ u("div", {
-							className: "p-4 border-b border-border bg-muted/30",
+							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
 							children: /* @__PURE__ */ u("h2", {
-								className: "font-semibold text-foreground",
+								className: "font-semibold text-text-primary",
 								children: "Actions"
 							})
 						}), /* @__PURE__ */ d("div", {
@@ -248,13 +248,13 @@ var p = () => {
 							children: [/* @__PURE__ */ u("button", {
 								type: "button",
 								onClick: () => g(`/quotas/${v.id}/edit`),
-								className: "w-full px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+								className: "w-full px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors",
 								children: "Edit Quota"
 							}), /* @__PURE__ */ u("button", {
 								type: "button",
 								onClick: w,
 								disabled: C,
-								className: `w-full px-4 py-2 text-sm font-medium border border-border rounded-md transition-colors disabled:opacity-50 ${v.isActive ? "text-destructive hover:bg-destructive/10" : "text-status-success-text hover:bg-status-success-bg-subtle"}`,
+								className: `w-full px-4 py-2 text-sm font-medium border border-border-subtle rounded-md transition-colors disabled:opacity-50 ${v.isActive ? "text-status-error-text hover:bg-status-error-bg-subtle" : "text-status-success-text hover:bg-status-success-bg-subtle"}`,
 								children: C ? "Processing..." : v.isActive ? "Deactivate Quota" : "Activate Quota"
 							})]
 						})]
@@ -262,7 +262,7 @@ var p = () => {
 					/* @__PURE__ */ u("button", {
 						type: "button",
 						onClick: () => g("/quotas"),
-						className: "w-full px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+						className: "w-full px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
 						children: "Back to Quotas"
 					})
 				]