npm - @burdenoff/microfe-billing - Versions diffs - 2026.625.3 → 2026.625.5 - Mend

@burdenoff/microfe-billing 2026.625.3 → 2026.625.5

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 (98) hide show

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-seam 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-seam 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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"}
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 { PagePurpose } from '@burdenoff/fe-libs/ui';\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 <PagePurpose>\n Define a reusable limit — its name, type (pooled or product-specific), unit and default\n value — that you can then attach to any number of plans and add-ons. Build the template once\n here instead of redefining the same limit on every plan.\n </PagePurpose>\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-seam 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-seam 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

@@ -12,14 +12,15 @@ import "../hooks/index.js";
 import { useParams as l } from "react-router-dom";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import { useI18n as f } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { EmphasisPanel as p, PagePurpose as m } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/quota/pages/QuotaTemplateDetailPage.tsx
-var p = () => {
-	let { t: p } = f(), m = (e, t) => {
-		let n = p(e);
+var h = () => {
+	let { t: h } = f(), g = (e, t) => {
+		let n = h(e);
 		return n === e ? t : n;
-	}, { quotaId: h } = l(), g = o(), _ = a(), { quota: v, isLoading: y, error: b, refetch: x } = s(h), { toggleQuota: S, isToggling: C } = c();
-	if (!_.canViewQuotas) return /* @__PURE__ */ u(e, { message: "You don't have permission to view quota details." });
-	if (y) return /* @__PURE__ */ d("div", {
+	}, { quotaId: _ } = l(), v = o(), y = a(), { quota: b, isLoading: x, error: S, refetch: C } = s(_), { toggleQuota: w, isToggling: T } = c();
+	if (!y.canViewQuotas) return /* @__PURE__ */ u(e, { message: "You don't have permission to view quota details." });
+	if (x) return /* @__PURE__ */ d("div", {
 		className: "space-y-6 p-6",
 		children: [/* @__PURE__ */ u("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ d("div", {
 			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
@@ -33,16 +34,16 @@ var p = () => {
 			}), /* @__PURE__ */ u("div", { className: "h-64 bg-bg-sunken animate-pulse rounded" })]
 		})]
 	});
-	if (b && i(b)) return /* @__PURE__ */ u("div", {
+	if (S && i(S)) return /* @__PURE__ */ u("div", {
 		className: "p-6",
 		children: /* @__PURE__ */ u(n, {
 			title: "Server Unavailable",
 			message: "Unable to load quota details. The server might be down or experiencing issues.",
-			onRetry: () => x(),
+			onRetry: () => C(),
 			showRetry: !0
 		})
 	});
-	if (!v) return /* @__PURE__ */ u("div", {
+	if (!b) return /* @__PURE__ */ u("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
 		children: /* @__PURE__ */ d("div", {
 			className: "text-center space-y-4",
@@ -64,7 +65,7 @@ var p = () => {
 				}),
 				/* @__PURE__ */ u("h2", {
 					className: "text-lg font-semibold text-text-primary",
-					children: m("billing.quota.quotaNotFound", "Quota not found")
+					children: g("billing.quota.quotaNotFound", "Quota not found")
 				}),
 				/* @__PURE__ */ u("p", {
 					className: "text-sm text-text-muted",
@@ -72,205 +73,209 @@ var p = () => {
 				}),
 				/* @__PURE__ */ u("button", {
 					type: "button",
-					onClick: () => g("/quotas"),
+					onClick: () => v("/quotas"),
 					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"
 				})
 			]
 		})
 	});
-	let w = async () => {
+	let E = async () => {
 		try {
-			await S(v.id, !v.isActive), x();
+			await w(b.id, !b.isActive), C();
 		} catch (e) {
 			console.error("Failed to toggle quota:", e);
 		}
-	}, T = v.limits, E = T?.type ?? "unknown", D = T?.value ?? 0, O = T?.unit ?? "";
+	}, D = b.limits, O = D?.type ?? "unknown", k = D?.value ?? 0, A = D?.unit ?? "";
 	return /* @__PURE__ */ d("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ u(t, {
-			title: v.name,
-			description: `${v.quotaType === "POOLED" ? "Pooled" : "Product Specific"} quota template`
-		}), /* @__PURE__ */ d("div", {
-			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-			children: [/* @__PURE__ */ d("div", {
-				className: "lg:col-span-2 space-y-6",
-				children: [
-					/* @__PURE__ */ d("div", {
-						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
-						children: [/* @__PURE__ */ u("div", {
-							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
-							children: /* @__PURE__ */ u("h2", {
-								className: "font-semibold text-text-primary",
-								children: m("billing.quota.limitsConfig", "Limits Configuration")
-							})
-						}), /* @__PURE__ */ u("div", {
-							className: "p-6",
-							children: /* @__PURE__ */ d("div", {
-								className: "grid grid-cols-3 gap-6",
-								children: [
-									/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
-										className: "text-sm text-text-muted",
-										children: "Limit Type"
+		children: [
+			/* @__PURE__ */ u(t, {
+				title: b.name,
+				description: `${b.quotaType === "POOLED" ? "Pooled" : "Product Specific"} quota template`
+			}),
+			/* @__PURE__ */ u(m, { children: g("billing.quota.detailPurpose", "Everything about this quota template — its limit configuration, type and where it is used. Review it here to understand what plans and add-ons referencing it will grant, before editing or attaching it elsewhere.") }),
+			/* @__PURE__ */ d("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+				children: [/* @__PURE__ */ d("div", {
+					className: "lg:col-span-2 space-y-6",
+					children: [
+						/* @__PURE__ */ d(p, {
+							className: "overflow-hidden p-0",
+							children: [/* @__PURE__ */ u("div", {
+								className: "p-4 border-b border-border-subtle",
+								children: /* @__PURE__ */ u("h2", {
+									className: "font-semibold text-text-primary",
+									children: g("billing.quota.limitsConfig", "Limits Configuration")
+								})
+							}), /* @__PURE__ */ u("div", {
+								className: "p-6",
+								children: /* @__PURE__ */ d("div", {
+									className: "grid grid-cols-3 gap-6",
+									children: [
+										/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+											className: "text-sm text-text-muted",
+											children: "Limit Type"
+										}), /* @__PURE__ */ u("p", {
+											className: "text-lg font-semibold text-text-primary capitalize mt-1",
+											children: O
+										})] }),
+										/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+											className: "text-sm text-text-muted",
+											children: "Limit Value"
+										}), /* @__PURE__ */ u("p", {
+											className: "text-lg font-semibold text-text-primary mt-1",
+											children: k.toLocaleString()
+										})] }),
+										/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+											className: "text-sm text-text-muted",
+											children: "Unit"
+										}), /* @__PURE__ */ u("p", {
+											className: "text-lg font-semibold text-text-primary mt-1",
+											children: A || "-"
+										})] })
+									]
+								})
+							})]
+						}),
+						/* @__PURE__ */ d("div", {
+							className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+							children: [/* @__PURE__ */ u("div", {
+								className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
+								children: /* @__PURE__ */ u("h2", {
+									className: "font-semibold text-text-primary",
+									children: g("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-subtle rounded-lg",
+									children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+										className: "font-medium text-text-primary",
+										children: "Quota Type"
 									}), /* @__PURE__ */ u("p", {
-										className: "text-lg font-semibold text-text-primary capitalize mt-1",
-										children: E
-									})] }),
-									/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
 										className: "text-sm text-text-muted",
-										children: "Limit Value"
+										children: b.quotaType === "POOLED" ? "Shared across all products" : "Specific to individual products"
+									})] }), /* @__PURE__ */ u("span", {
+										className: `px-3 py-1 text-sm font-medium rounded ${b.quotaType === "POOLED" ? "bg-status-info-bg-subtle text-status-info-text" : "bg-accent-purple-subtle text-text-primary"}`,
+										children: b.quotaType === "POOLED" ? "Pooled" : "Product Specific"
+									})]
+								}), /* @__PURE__ */ d("div", {
+									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-text-primary",
+										children: "Reusable"
 									}), /* @__PURE__ */ u("p", {
-										className: "text-lg font-semibold text-text-primary mt-1",
-										children: D.toLocaleString()
-									})] }),
-									/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
 										className: "text-sm text-text-muted",
-										children: "Unit"
-									}), /* @__PURE__ */ u("p", {
-										className: "text-lg font-semibold text-text-primary mt-1",
-										children: O || "-"
-									})] })
-								]
-							})
-						})]
-					}),
-					/* @__PURE__ */ d("div", {
-						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
-						children: [/* @__PURE__ */ u("div", {
-							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
-							children: /* @__PURE__ */ u("h2", {
-								className: "font-semibold text-text-primary",
-								children: m("billing.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-subtle rounded-lg",
-								children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
-									className: "font-medium text-text-primary",
-									children: "Quota Type"
-								}), /* @__PURE__ */ u("p", {
-									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-text-primary"}`,
-									children: v.quotaType === "POOLED" ? "Pooled" : "Product Specific"
+										children: b.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 ${b.reusable ? "bg-status-success-bg-subtle text-status-success-text" : "bg-bg-sunken text-text-muted"}`,
+										children: b.reusable ? "Yes" : "No"
+									})]
 								})]
+							})]
+						}),
+						/* @__PURE__ */ d("div", {
+							className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+							children: [/* @__PURE__ */ u("div", {
+								className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
+								children: /* @__PURE__ */ u("h2", {
+									className: "font-semibold text-text-primary",
+									children: "Limits (Raw JSON)"
+								})
+							}), /* @__PURE__ */ u("div", {
+								className: "p-4",
+								children: /* @__PURE__ */ u("pre", {
+									className: "text-sm text-text-primary bg-bg-sunken/50 p-4 rounded-lg overflow-auto",
+									children: JSON.stringify(b.limits, null, 2)
+								})
+							})]
+						})
+					]
+				}), /* @__PURE__ */ d("div", {
+					className: "space-y-6",
+					children: [
+						/* @__PURE__ */ d("div", {
+							className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+							children: [/* @__PURE__ */ u("div", {
+								className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
+								children: /* @__PURE__ */ u("h2", {
+									className: "font-semibold text-text-primary",
+									children: "Status"
+								})
 							}), /* @__PURE__ */ d("div", {
-								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-text-primary",
-									children: "Reusable"
-								}), /* @__PURE__ */ u("p", {
-									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-bg-sunken text-text-muted"}`,
-									children: v.reusable ? "Yes" : "No"
-								})]
+								className: "p-4 space-y-4",
+								children: [
+									/* @__PURE__ */ d("div", {
+										className: "flex items-center justify-between",
+										children: [/* @__PURE__ */ u("span", {
+											className: "text-sm text-text-muted",
+											children: "Status"
+										}), /* @__PURE__ */ u("span", {
+											className: `px-2 py-1 text-xs font-medium rounded ${b.isActive ? "bg-status-success-bg-subtle text-status-success-text" : "bg-bg-sunken text-text-muted"}`,
+											children: b.isActive ? "Active" : "Inactive"
+										})]
+									}),
+									/* @__PURE__ */ d("div", {
+										className: "flex items-center justify-between",
+										children: [/* @__PURE__ */ u("span", {
+											className: "text-sm text-text-muted",
+											children: "Created"
+										}), /* @__PURE__ */ u("span", {
+											className: "text-sm font-medium text-text-primary",
+											children: r(b.createdAt, "short")
+										})]
+									}),
+									/* @__PURE__ */ d("div", {
+										className: "flex items-center justify-between",
+										children: [/* @__PURE__ */ u("span", {
+											className: "text-sm text-text-muted",
+											children: "Updated"
+										}), /* @__PURE__ */ u("span", {
+											className: "text-sm font-medium text-text-primary",
+											children: r(b.updatedAt, "short")
+										})]
+									})
+								]
 							})]
-						})]
-					}),
-					/* @__PURE__ */ d("div", {
-						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
-						children: [/* @__PURE__ */ u("div", {
-							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
-							children: /* @__PURE__ */ u("h2", {
-								className: "font-semibold text-text-primary",
-								children: "Limits (Raw JSON)"
-							})
-						}), /* @__PURE__ */ u("div", {
-							className: "p-4",
-							children: /* @__PURE__ */ u("pre", {
-								className: "text-sm text-text-primary bg-bg-sunken/50 p-4 rounded-lg overflow-auto",
-								children: JSON.stringify(v.limits, null, 2)
-							})
-						})]
-					})
-				]
-			}), /* @__PURE__ */ d("div", {
-				className: "space-y-6",
-				children: [
-					/* @__PURE__ */ d("div", {
-						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
-						children: [/* @__PURE__ */ u("div", {
-							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
-							children: /* @__PURE__ */ u("h2", {
-								className: "font-semibold text-text-primary",
-								children: "Status"
-							})
-						}), /* @__PURE__ */ d("div", {
-							className: "p-4 space-y-4",
-							children: [
-								/* @__PURE__ */ d("div", {
-									className: "flex items-center justify-between",
-									children: [/* @__PURE__ */ u("span", {
-										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-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-text-muted",
-										children: "Created"
-									}), /* @__PURE__ */ u("span", {
-										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-text-muted",
-										children: "Updated"
-									}), /* @__PURE__ */ u("span", {
-										className: "text-sm font-medium text-text-primary",
-										children: r(v.updatedAt, "short")
-									})]
+						}),
+						y.canManageQuotas && /* @__PURE__ */ d("div", {
+							className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+							children: [/* @__PURE__ */ u("div", {
+								className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
+								children: /* @__PURE__ */ u("h2", {
+									className: "font-semibold text-text-primary",
+									children: "Actions"
 								})
-							]
-						})]
-					}),
-					_.canManageQuotas && /* @__PURE__ */ d("div", {
-						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
-						children: [/* @__PURE__ */ u("div", {
-							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
-							children: /* @__PURE__ */ u("h2", {
-								className: "font-semibold text-text-primary",
-								children: "Actions"
-							})
-						}), /* @__PURE__ */ d("div", {
-							className: "p-4 space-y-2",
-							children: [/* @__PURE__ */ u("button", {
-								type: "button",
-								onClick: () => g(`/quotas/${v.id}/edit`),
-								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-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"
+							}), /* @__PURE__ */ d("div", {
+								className: "p-4 space-y-2",
+								children: [/* @__PURE__ */ u("button", {
+									type: "button",
+									onClick: () => v(`/quotas/${b.id}/edit`),
+									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: E,
+									disabled: T,
+									className: `w-full px-4 py-2 text-sm font-medium border border-border-subtle rounded-md transition-colors disabled:opacity-50 ${b.isActive ? "text-status-error-text hover:bg-status-error-bg-subtle" : "text-status-success-text hover:bg-status-success-bg-subtle"}`,
+									children: T ? "Processing..." : b.isActive ? "Deactivate Quota" : "Activate Quota"
+								})]
 							})]
-						})]
-					}),
-					/* @__PURE__ */ u("button", {
-						type: "button",
-						onClick: () => g("/quotas"),
-						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"
-					})
-				]
-			})]
-		})]
+						}),
+						/* @__PURE__ */ u("button", {
+							type: "button",
+							onClick: () => v("/quotas"),
+							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"
+						})
+					]
+				})]
+			})
+		]
 	});
 };
 //#endregion
-export { p as QuotaTemplateDetailPage };
+export { h as QuotaTemplateDetailPage };
 //# sourceMappingURL=QuotaTemplateDetailPage.js.map