@burdenoff/microfe-billing 2026.624.3 → 2026.625.2

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

@@ -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-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., &quot;2/6 bots&quot;)\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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"}
+{"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., &quot;2/6 bots&quot;)\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

@@ -97,7 +97,7 @@ var p = () => {
 				className: "lg:col-span-2 space-y-6",
 				children: [
 					/* @__PURE__ */ d("div", {
-						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+						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", {
@@ -135,7 +135,7 @@ var p = () => {
 						})]
 					}),
 					/* @__PURE__ */ d("div", {
-						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+						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", {
@@ -172,7 +172,7 @@ var p = () => {
 						})]
 					}),
 					/* @__PURE__ */ d("div", {
-						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+						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", {
@@ -192,7 +192,7 @@ var p = () => {
 				className: "space-y-6",
 				children: [
 					/* @__PURE__ */ d("div", {
-						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+						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", {
@@ -236,7 +236,7 @@ var p = () => {
 						})]
 					}),
 					_.canManageQuotas && /* @__PURE__ */ d("div", {
-						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+						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", {

package/dist/billing/modules/quota/pages/QuotaTemplateDetailPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuotaTemplateDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/quota/pages/QuotaTemplateDetailPage.tsx"],"sourcesContent":["/**\n * Quota Module - Quota Template Detail Page\n * Displays detailed information about a specific quota template\n */\n\nimport { type FC } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useQuotaTemplate, useQuotaTemplateMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader, ServerError } from '../../../shared/components';\nimport { formatDate } from '../../../shared/utils/format';\nimport { isServerError } from '../../../shared/utils';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const QuotaTemplateDetailPage: 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 { quotaId } = useParams<{ quotaId: string }>();\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { quota, isLoading, error, refetch } = useQuotaTemplate(quotaId);\n  const { toggleQuota, isToggling } = useQuotaTemplateMutations();\n\n  // Permission check\n  if (!permissions.canViewQuotas) {\n    return <AccessDenied message=\"You don't have permission to view quota details.\" />;\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-4\">\n            {[1, 2, 3].map((i) => (\n              <div key={i} className=\"h-24 bg-bg-sunken animate-pulse rounded\" />\n            ))}\n          </div>\n          <div className=\"h-64 bg-bg-sunken animate-pulse rounded\" />\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title=\"Server Unavailable\"\n          message=\"Unable to load quota details. The server might be down or experiencing issues.\"\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  // Not found state\n  if (!quota) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <div className=\"size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-text-muted\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.quota.quotaNotFound', 'Quota not found')}\n          </h2>\n          <p className=\"text-sm text-text-muted\">\n            The quota you&apos;re looking for doesn&apos;t exist or has been removed.\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/quotas')}\n            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\"\n          >\n            Back to Quotas\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const handleToggle = async () => {\n    try {\n      await toggleQuota(quota.id, !quota.isActive);\n      refetch();\n    } catch (err) {\n      console.error('Failed to toggle quota:', err);\n    }\n  };\n\n  const limits = quota.limits as { type?: string; value?: number; unit?: string } | null;\n  const limitType = limits?.type ?? 'unknown';\n  const limitValue = limits?.value ?? 0;\n  const limitUnit = limits?.unit ?? '';\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={quota.name}\n        description={`${quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'} quota template`}\n      />\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Limits Card */}\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\">\n                {tr('billing.quota.limitsConfig', 'Limits Configuration')}\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              <div className=\"grid grid-cols-3 gap-6\">\n                <div>\n                  <p className=\"text-sm text-text-muted\">Limit Type</p>\n                  <p className=\"text-lg font-semibold text-text-primary capitalize mt-1\">\n                    {limitType}\n                  </p>\n                </div>\n                <div>\n                  <p className=\"text-sm text-text-muted\">Limit Value</p>\n                  <p className=\"text-lg font-semibold text-text-primary mt-1\">\n                    {limitValue.toLocaleString()}\n                  </p>\n                </div>\n                <div>\n                  <p className=\"text-sm text-text-muted\">Unit</p>\n                  <p className=\"text-lg font-semibold text-text-primary mt-1\">{limitUnit || '-'}</p>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* Properties Card */}\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\">\n                {tr('billing.quota.properties', 'Properties')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div className=\"flex items-center justify-between p-3 border border-border-subtle rounded-lg\">\n                <div>\n                  <p className=\"font-medium text-text-primary\">Quota Type</p>\n                  <p className=\"text-sm text-text-muted\">\n                    {quota.quotaType === 'POOLED'\n                      ? 'Shared across all products'\n                      : 'Specific to individual products'}\n                  </p>\n                </div>\n                <span\n                  className={`px-3 py-1 text-sm font-medium rounded ${\n                    quota.quotaType === 'POOLED'\n                      ? 'bg-status-info-bg-subtle text-status-info-text'\n                      : 'bg-accent-purple-subtle text-text-primary'\n                  }`}\n                >\n                  {quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'}\n                </span>\n              </div>\n\n              <div className=\"flex items-center justify-between p-3 border border-border-subtle rounded-lg\">\n                <div>\n                  <p className=\"font-medium text-text-primary\">Reusable</p>\n                  <p className=\"text-sm text-text-muted\">\n                    {quota.reusable\n                      ? 'Quota can be freed up and reused (e.g., seats, bots)'\n                      : 'Quota is consumed permanently (e.g., API calls, storage)'}\n                  </p>\n                </div>\n                <span\n                  className={`px-3 py-1 text-sm font-medium rounded ${\n                    quota.reusable\n                      ? 'bg-status-success-bg-subtle text-status-success-text'\n                      : 'bg-bg-sunken text-text-muted'\n                  }`}\n                >\n                  {quota.reusable ? 'Yes' : 'No'}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          {/* Raw Limits JSON */}\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 (Raw JSON)</h2>\n            </div>\n            <div className=\"p-4\">\n              <pre className=\"text-sm text-text-primary bg-bg-sunken/50 p-4 rounded-lg overflow-auto\">\n                {JSON.stringify(quota.limits, null, 2)}\n              </pre>\n            </div>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Status Card */}\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\">Status</h2>\n            </div>\n            <div className=\"p-4 space-y-4\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-text-muted\">Status</span>\n                <span\n                  className={`px-2 py-1 text-xs font-medium rounded ${\n                    quota.isActive\n                      ? 'bg-status-success-bg-subtle text-status-success-text'\n                      : 'bg-bg-sunken text-text-muted'\n                  }`}\n                >\n                  {quota.isActive ? 'Active' : 'Inactive'}\n                </span>\n              </div>\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-text-muted\">Created</span>\n                <span className=\"text-sm font-medium text-text-primary\">\n                  {formatDate(quota.createdAt, 'short')}\n                </span>\n              </div>\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-text-muted\">Updated</span>\n                <span className=\"text-sm font-medium text-text-primary\">\n                  {formatDate(quota.updatedAt, 'short')}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          {/* Actions Card */}\n          {permissions.canManageQuotas && (\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\">Actions</h2>\n              </div>\n              <div className=\"p-4 space-y-2\">\n                <button\n                  type=\"button\"\n                  onClick={() => navigateTo(`/quotas/${quota.id}/edit`)}\n                  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\"\n                >\n                  Edit Quota\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={handleToggle}\n                  disabled={isToggling}\n                  className={`w-full px-4 py-2 text-sm font-medium border border-border-subtle rounded-md transition-colors disabled:opacity-50 ${\n                    quota.isActive\n                      ? 'text-status-error-text hover:bg-status-error-bg-subtle'\n                      : 'text-status-success-text hover:bg-status-success-bg-subtle'\n                  }`}\n                >\n                  {isToggling\n                    ? 'Processing...'\n                    : quota.isActive\n                      ? 'Deactivate Quota'\n                      : 'Activate Quota'}\n                </button>\n              </div>\n            </div>\n          )}\n\n          {/* Back Button */}\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/quotas')}\n            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\"\n          >\n            Back to Quotas\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"QuotaTemplateDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/quota/pages/QuotaTemplateDetailPage.tsx"],"sourcesContent":["/**\n * Quota Module - Quota Template Detail Page\n * Displays detailed information about a specific quota template\n */\n\nimport { type FC } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useQuotaTemplate, useQuotaTemplateMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader, ServerError } from '../../../shared/components';\nimport { formatDate } from '../../../shared/utils/format';\nimport { isServerError } from '../../../shared/utils';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const QuotaTemplateDetailPage: 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 { quotaId } = useParams<{ quotaId: string }>();\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { quota, isLoading, error, refetch } = useQuotaTemplate(quotaId);\n  const { toggleQuota, isToggling } = useQuotaTemplateMutations();\n\n  // Permission check\n  if (!permissions.canViewQuotas) {\n    return <AccessDenied message=\"You don't have permission to view quota details.\" />;\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-4\">\n            {[1, 2, 3].map((i) => (\n              <div key={i} className=\"h-24 bg-bg-sunken animate-pulse rounded\" />\n            ))}\n          </div>\n          <div className=\"h-64 bg-bg-sunken animate-pulse rounded\" />\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title=\"Server Unavailable\"\n          message=\"Unable to load quota details. The server might be down or experiencing issues.\"\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  // Not found state\n  if (!quota) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <div className=\"size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-text-muted\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.quota.quotaNotFound', 'Quota not found')}\n          </h2>\n          <p className=\"text-sm text-text-muted\">\n            The quota you&apos;re looking for doesn&apos;t exist or has been removed.\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/quotas')}\n            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\"\n          >\n            Back to Quotas\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const handleToggle = async () => {\n    try {\n      await toggleQuota(quota.id, !quota.isActive);\n      refetch();\n    } catch (err) {\n      console.error('Failed to toggle quota:', err);\n    }\n  };\n\n  const limits = quota.limits as { type?: string; value?: number; unit?: string } | null;\n  const limitType = limits?.type ?? 'unknown';\n  const limitValue = limits?.value ?? 0;\n  const limitUnit = limits?.unit ?? '';\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={quota.name}\n        description={`${quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'} quota template`}\n      />\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Limits Card */}\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\">\n                {tr('billing.quota.limitsConfig', 'Limits Configuration')}\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              <div className=\"grid grid-cols-3 gap-6\">\n                <div>\n                  <p className=\"text-sm text-text-muted\">Limit Type</p>\n                  <p className=\"text-lg font-semibold text-text-primary capitalize mt-1\">\n                    {limitType}\n                  </p>\n                </div>\n                <div>\n                  <p className=\"text-sm text-text-muted\">Limit Value</p>\n                  <p className=\"text-lg font-semibold text-text-primary mt-1\">\n                    {limitValue.toLocaleString()}\n                  </p>\n                </div>\n                <div>\n                  <p className=\"text-sm text-text-muted\">Unit</p>\n                  <p className=\"text-lg font-semibold text-text-primary mt-1\">{limitUnit || '-'}</p>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* Properties Card */}\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\">\n                {tr('billing.quota.properties', 'Properties')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div className=\"flex items-center justify-between p-3 border border-border-subtle rounded-lg\">\n                <div>\n                  <p className=\"font-medium text-text-primary\">Quota Type</p>\n                  <p className=\"text-sm text-text-muted\">\n                    {quota.quotaType === 'POOLED'\n                      ? 'Shared across all products'\n                      : 'Specific to individual products'}\n                  </p>\n                </div>\n                <span\n                  className={`px-3 py-1 text-sm font-medium rounded ${\n                    quota.quotaType === 'POOLED'\n                      ? 'bg-status-info-bg-subtle text-status-info-text'\n                      : 'bg-accent-purple-subtle text-text-primary'\n                  }`}\n                >\n                  {quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'}\n                </span>\n              </div>\n\n              <div className=\"flex items-center justify-between p-3 border border-border-subtle rounded-lg\">\n                <div>\n                  <p className=\"font-medium text-text-primary\">Reusable</p>\n                  <p className=\"text-sm text-text-muted\">\n                    {quota.reusable\n                      ? 'Quota can be freed up and reused (e.g., seats, bots)'\n                      : 'Quota is consumed permanently (e.g., API calls, storage)'}\n                  </p>\n                </div>\n                <span\n                  className={`px-3 py-1 text-sm font-medium rounded ${\n                    quota.reusable\n                      ? 'bg-status-success-bg-subtle text-status-success-text'\n                      : 'bg-bg-sunken text-text-muted'\n                  }`}\n                >\n                  {quota.reusable ? 'Yes' : 'No'}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          {/* Raw Limits JSON */}\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 (Raw JSON)</h2>\n            </div>\n            <div className=\"p-4\">\n              <pre className=\"text-sm text-text-primary bg-bg-sunken/50 p-4 rounded-lg overflow-auto\">\n                {JSON.stringify(quota.limits, null, 2)}\n              </pre>\n            </div>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Status Card */}\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\">Status</h2>\n            </div>\n            <div className=\"p-4 space-y-4\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-text-muted\">Status</span>\n                <span\n                  className={`px-2 py-1 text-xs font-medium rounded ${\n                    quota.isActive\n                      ? 'bg-status-success-bg-subtle text-status-success-text'\n                      : 'bg-bg-sunken text-text-muted'\n                  }`}\n                >\n                  {quota.isActive ? 'Active' : 'Inactive'}\n                </span>\n              </div>\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-text-muted\">Created</span>\n                <span className=\"text-sm font-medium text-text-primary\">\n                  {formatDate(quota.createdAt, 'short')}\n                </span>\n              </div>\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm text-text-muted\">Updated</span>\n                <span className=\"text-sm font-medium text-text-primary\">\n                  {formatDate(quota.updatedAt, 'short')}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          {/* Actions Card */}\n          {permissions.canManageQuotas && (\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\">Actions</h2>\n              </div>\n              <div className=\"p-4 space-y-2\">\n                <button\n                  type=\"button\"\n                  onClick={() => navigateTo(`/quotas/${quota.id}/edit`)}\n                  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\"\n                >\n                  Edit Quota\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={handleToggle}\n                  disabled={isToggling}\n                  className={`w-full px-4 py-2 text-sm font-medium border border-border-subtle rounded-md transition-colors disabled:opacity-50 ${\n                    quota.isActive\n                      ? 'text-status-error-text hover:bg-status-error-bg-subtle'\n                      : 'text-status-success-text hover:bg-status-success-bg-subtle'\n                  }`}\n                >\n                  {isToggling\n                    ? 'Processing...'\n                    : quota.isActive\n                      ? 'Deactivate Quota'\n                      : 'Activate Quota'}\n                </button>\n              </div>\n            </div>\n          )}\n\n          {/* Back Button */}\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/quotas')}\n            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\"\n          >\n            Back to Quotas\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -104,7 +104,7 @@ var h = () => {
 					})
 				}),
 				/* @__PURE__ */ p("div", {
-					className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+					className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
 					children: [/* @__PURE__ */ f("div", {
 						className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
 						children: /* @__PURE__ */ f("h2", {
@@ -256,7 +256,7 @@ var h = () => {
 					})]
 				}),
 				/* @__PURE__ */ p("div", {
-					className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+					className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
 					children: [/* @__PURE__ */ f("div", {
 						className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
 						children: /* @__PURE__ */ f("h2", {

package/dist/billing/modules/quota/pages/QuotaTemplateEditPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuotaTemplateEditPage.js","names":[],"sources":["../../../../../src/billing/modules/quota/pages/QuotaTemplateEditPage.tsx"],"sourcesContent":["/**\n * Quota Module - Quota Template Edit Page\n * Form to edit an existing quota template\n */\n\nimport { useState, useEffect, type FC, type FormEvent } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useQuotaTemplate, useQuotaTemplateMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader, ServerError } from '../../../shared/components';\nimport { isServerError } from '../../../shared/utils';\nimport { QuotaResetPeriod, type UpdateQuotaInput } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const QuotaTemplateEditPage: 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 { quotaId } = useParams<{ quotaId: string }>();\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const {\n    quota,\n    isLoading: isQuotaLoading,\n    error: quotaError,\n    refetch,\n  } = useQuotaTemplate(quotaId);\n  const { updateQuota, isUpdating } = 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 [reusable, setReusable] = useState(false);\n  const [resetPeriod, setResetPeriod] = useState<QuotaResetPeriod>(QuotaResetPeriod.NEVER);\n  const [isActive, setIsActive] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Populate form when quota data loads\n  useEffect(() => {\n    if (quota) {\n      setName(quota.name ?? '');\n      setReusable(quota.reusable ?? false);\n      setResetPeriod(quota.resetPeriod ?? QuotaResetPeriod.NEVER);\n      setIsActive(quota.isActive ?? true);\n\n      const limits = quota.limits as { type?: string; value?: number; unit?: string } | null;\n      setLimitType(limits?.type ?? 'numeric');\n      setLimitValue(String(limits?.value ?? ''));\n      setUnit(limits?.unit ?? '');\n\n      const ctx = quota.context as { displayName?: string; description?: string } | null;\n      setDisplayName(ctx?.displayName ?? '');\n      setDescription(ctx?.description ?? '');\n    }\n  }, [quota]);\n\n  // Permission check\n  if (!permissions.canManageQuotas) {\n    return <AccessDenied message=\"You don't have permission to edit quotas.\" />;\n  }\n\n  // Loading state\n  if (isQuotaLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"max-w-2xl space-y-4\">\n          {[1, 2, 3, 4].map((i) => (\n            <div key={i} className=\"h-16 bg-bg-sunken animate-pulse rounded\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (quotaError && isServerError(quotaError)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title=\"Server Unavailable\"\n          message=\"Unable to load quota. The server might be down or experiencing issues.\"\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  if (!quota) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">Quota not found</h2>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/quotas')}\n            className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover\"\n          >\n            Back to Quotas\n          </button>\n        </div>\n      </div>\n    );\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: UpdateQuotaInput = {\n      id: quotaId!,\n      name: name.trim(),\n      limits: {\n        type: limitType,\n        value: Number(limitValue),\n        unit: unit.trim(),\n      },\n      reusable,\n      isActive,\n      resetPeriod,\n      context: {\n        displayName: displayName.trim() || name.trim(),\n        description: description.trim(),\n      },\n    };\n\n    try {\n      await updateQuota(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo(`/quotas/${quotaId}`), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to update quota');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={`Edit Quota: ${(quota.context as { displayName?: string } | null)?.displayName ?? quota.name}`}\n        description=\"Update the quota template configuration\"\n      />\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 updated 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 (read-only) */}\n            <div>\n              <label className=\"block text-sm font-medium text-text-primary mb-1\">Quota Type</label>\n              <div className=\"px-3 py-2 border border-border-subtle rounded-md bg-bg-sunken/50 text-text-muted\">\n                {quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'}\n                <span className=\"text-xs ml-2\">(cannot be changed)</span>\n              </div>\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\n            {/* Status */}\n            <div className=\"flex items-center gap-3\">\n              <input\n                id=\"isActive\"\n                type=\"checkbox\"\n                checked={isActive}\n                onChange={(e) => setIsActive(e.target.checked)}\n                className=\"size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]\"\n              />\n              <label htmlFor=\"isActive\" className=\"text-sm font-medium text-text-primary\">\n                Quota is active\n              </label>\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., &quot;2/6 bots&quot;)\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={isUpdating}\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            {isUpdating\n              ? tr('billing.quota.saving', 'Saving...')\n              : tr('billing.quota.saveChanges', 'Save Changes')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/quotas/${quotaId}`)}\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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"}
+{"version":3,"file":"QuotaTemplateEditPage.js","names":[],"sources":["../../../../../src/billing/modules/quota/pages/QuotaTemplateEditPage.tsx"],"sourcesContent":["/**\n * Quota Module - Quota Template Edit Page\n * Form to edit an existing quota template\n */\n\nimport { useState, useEffect, type FC, type FormEvent } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useQuotaTemplate, useQuotaTemplateMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader, ServerError } from '../../../shared/components';\nimport { isServerError } from '../../../shared/utils';\nimport { QuotaResetPeriod, type UpdateQuotaInput } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const QuotaTemplateEditPage: 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 { quotaId } = useParams<{ quotaId: string }>();\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const {\n    quota,\n    isLoading: isQuotaLoading,\n    error: quotaError,\n    refetch,\n  } = useQuotaTemplate(quotaId);\n  const { updateQuota, isUpdating } = 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 [reusable, setReusable] = useState(false);\n  const [resetPeriod, setResetPeriod] = useState<QuotaResetPeriod>(QuotaResetPeriod.NEVER);\n  const [isActive, setIsActive] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Populate form when quota data loads\n  useEffect(() => {\n    if (quota) {\n      setName(quota.name ?? '');\n      setReusable(quota.reusable ?? false);\n      setResetPeriod(quota.resetPeriod ?? QuotaResetPeriod.NEVER);\n      setIsActive(quota.isActive ?? true);\n\n      const limits = quota.limits as { type?: string; value?: number; unit?: string } | null;\n      setLimitType(limits?.type ?? 'numeric');\n      setLimitValue(String(limits?.value ?? ''));\n      setUnit(limits?.unit ?? '');\n\n      const ctx = quota.context as { displayName?: string; description?: string } | null;\n      setDisplayName(ctx?.displayName ?? '');\n      setDescription(ctx?.description ?? '');\n    }\n  }, [quota]);\n\n  // Permission check\n  if (!permissions.canManageQuotas) {\n    return <AccessDenied message=\"You don't have permission to edit quotas.\" />;\n  }\n\n  // Loading state\n  if (isQuotaLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"max-w-2xl space-y-4\">\n          {[1, 2, 3, 4].map((i) => (\n            <div key={i} className=\"h-16 bg-bg-sunken animate-pulse rounded\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (quotaError && isServerError(quotaError)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title=\"Server Unavailable\"\n          message=\"Unable to load quota. The server might be down or experiencing issues.\"\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  if (!quota) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">Quota not found</h2>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/quotas')}\n            className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover\"\n          >\n            Back to Quotas\n          </button>\n        </div>\n      </div>\n    );\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: UpdateQuotaInput = {\n      id: quotaId!,\n      name: name.trim(),\n      limits: {\n        type: limitType,\n        value: Number(limitValue),\n        unit: unit.trim(),\n      },\n      reusable,\n      isActive,\n      resetPeriod,\n      context: {\n        displayName: displayName.trim() || name.trim(),\n        description: description.trim(),\n      },\n    };\n\n    try {\n      await updateQuota(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo(`/quotas/${quotaId}`), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to update quota');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={`Edit Quota: ${(quota.context as { displayName?: string } | null)?.displayName ?? quota.name}`}\n        description=\"Update the quota template configuration\"\n      />\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 updated 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 (read-only) */}\n            <div>\n              <label className=\"block text-sm font-medium text-text-primary mb-1\">Quota Type</label>\n              <div className=\"px-3 py-2 border border-border-subtle rounded-md bg-bg-sunken/50 text-text-muted\">\n                {quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'}\n                <span className=\"text-xs ml-2\">(cannot be changed)</span>\n              </div>\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\n            {/* Status */}\n            <div className=\"flex items-center gap-3\">\n              <input\n                id=\"isActive\"\n                type=\"checkbox\"\n                checked={isActive}\n                onChange={(e) => setIsActive(e.target.checked)}\n                className=\"size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]\"\n              />\n              <label htmlFor=\"isActive\" className=\"text-sm font-medium text-text-primary\">\n                Quota is active\n              </label>\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., &quot;2/6 bots&quot;)\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={isUpdating}\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            {isUpdating\n              ? tr('billing.quota.saving', 'Saving...')\n              : tr('billing.quota.saveChanges', 'Save Changes')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/quotas/${quotaId}`)}\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/QuotaTemplatesListPage.js

@@ -188,7 +188,7 @@ var f = () => {
 				]
 			}),
 			O.length === 0 ? /* @__PURE__ */ u("div", {
-				className: "flex flex-col items-center justify-center py-16 border border-dashed border-border-subtle rounded-card bg-bg-surface",
+				className: "flex flex-col items-center justify-center py-16 border border-dashed border-border-seam rounded-card bg-bg-surface",
 				children: [
 					/* @__PURE__ */ l("div", {
 						className: "size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4",

package/dist/billing/modules/quota/pages/QuotaTemplatesListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuotaTemplatesListPage.js","names":[],"sources":["../../../../../src/billing/modules/quota/pages/QuotaTemplatesListPage.tsx"],"sourcesContent":["/**\n * Quota Module - Quota Templates List Page\n * Displays all available quota templates for admin management\n */\n\nimport { useState, type FC } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useQuotaTemplates, useQuotaTemplateMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport { formatDate } from '../../../shared/utils/format';\nimport type { Quota, QuotaType } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ntype ViewMode = 'grid' | 'list';\n\nexport const QuotaTemplatesListPage: 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 { quotas, isLoading, error, refetch } = useQuotaTemplates();\n  const { toggleQuota, isToggling } = useQuotaTemplateMutations();\n\n  const [viewMode, setViewMode] = useState<ViewMode>('grid');\n  const [showInactive, setShowInactive] = useState(false);\n  const [quotaTypeFilter, setQuotaTypeFilter] = useState<QuotaType | 'all'>('all');\n\n  // Permission check\n  if (!permissions.canViewQuotas) {\n    return <AccessDenied message=\"You don't have permission to view quotas.\" />;\n  }\n\n  // Filter quotas\n  const filteredQuotas = quotas.filter((quota) => {\n    if (!showInactive && !quota.isActive) return false;\n    if (quotaTypeFilter !== 'all' && quota.quotaType !== quotaTypeFilter) return false;\n    return true;\n  });\n\n  const handleToggleQuota = async (quota: Quota) => {\n    if (!permissions.canManageQuotas) return;\n    try {\n      await toggleQuota(quota.id, !quota.isActive);\n      await refetch();\n    } catch (err) {\n      console.error('Failed to toggle quota:', err);\n    }\n  };\n\n  const handleViewQuota = (quota: Quota) => {\n    navigateTo(`/quotas/${quota.id}`);\n  };\n\n  const handleEditQuota = (quota: Quota) => {\n    navigateTo(`/quotas/${quota.id}/edit`);\n  };\n\n  // Loading state\n  if (isLoading && quotas.length === 0) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-32 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"space-y-2\">\n                {[1, 2].map((j) => (\n                  <div key={j} className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n                ))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <div className=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-status-error-text\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.quota.failedToLoad', 'Failed to load quotas')}\n          </h2>\n          <p className=\"text-sm text-text-muted\">{error.message}</p>\n          <button\n            type=\"button\"\n            onClick={() => refetch()}\n            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\"\n          >\n            Try Again\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <PageHeader\n          title={tr('billing.quota.quotaTemplatesTitle', 'Quota Templates')}\n          description=\"Manage quota templates that can be assigned to plans and addons\"\n        />\n\n        {permissions.canManageQuotas && (\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/quotas/new')}\n            className=\"inline-flex items-center gap-2 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\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 4v16m8-8H4\"\n              />\n            </svg>\n            Create Quota\n          </button>\n        )}\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border-subtle\">\n        {/* Quota Type Toggle */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken/50\">\n          <button\n            type=\"button\"\n            onClick={() => setQuotaTypeFilter('all')}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              quotaTypeFilter === 'all'\n                ? 'bg-bg-surface text-text-primary shadow-sm'\n                : 'text-text-muted hover:text-text-primary'\n            }`}\n          >\n            All\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setQuotaTypeFilter('POOLED' as QuotaType)}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              quotaTypeFilter === 'POOLED'\n                ? 'bg-bg-surface text-text-primary shadow-sm'\n                : 'text-text-muted hover:text-text-primary'\n            }`}\n          >\n            Pooled\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setQuotaTypeFilter('PRODUCT_SPECIFIC' as QuotaType)}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              quotaTypeFilter === 'PRODUCT_SPECIFIC'\n                ? 'bg-bg-surface text-text-primary shadow-sm'\n                : 'text-text-muted hover:text-text-primary'\n            }`}\n          >\n            Product Specific\n          </button>\n        </div>\n\n        {/* Show Inactive Toggle */}\n        {permissions.canManageQuotas && (\n          <label className=\"flex items-center gap-2 text-sm cursor-pointer\">\n            <input\n              type=\"checkbox\"\n              checked={showInactive}\n              onChange={(e) => setShowInactive(e.target.checked)}\n              className=\"size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]\"\n            />\n            <span className=\"text-text-muted\">\n              {tr('billing.quota.showInactive', 'Show inactive quotas')}\n            </span>\n          </label>\n        )}\n\n        {/* View Mode Toggle */}\n        <div className=\"ml-auto inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken/50\">\n          <button\n            type=\"button\"\n            onClick={() => setViewMode('grid')}\n            className={`p-1.5 rounded-md transition-colors ${\n              viewMode === 'grid'\n                ? 'bg-bg-surface text-text-primary shadow-sm'\n                : 'text-text-muted hover:text-text-primary'\n            }`}\n            title=\"Grid view\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\"\n              />\n            </svg>\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setViewMode('list')}\n            className={`p-1.5 rounded-md transition-colors ${\n              viewMode === 'list'\n                ? 'bg-bg-surface text-text-primary shadow-sm'\n                : 'text-text-muted hover:text-text-primary'\n            }`}\n            title=\"List view\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M4 6h16M4 12h16M4 18h16\"\n              />\n            </svg>\n          </button>\n        </div>\n      </div>\n\n      {/* Quotas Grid/List */}\n      {filteredQuotas.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center py-16 border border-dashed border-border-subtle rounded-card bg-bg-surface\">\n          <div className=\"size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n            <svg\n              className=\"size-6 text-text-muted\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-text-primary\">\n            {tr('billing.quota.noQuotasFound', 'No quotas found')}\n          </h3>\n          <p className=\"text-sm text-text-muted mt-1\">\n            {showInactive\n              ? 'No quotas match your current filters.'\n              : 'There are no active quotas available.'}\n          </p>\n          {permissions.canManageQuotas && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/quotas/new')}\n              className=\"mt-4 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\"\n            >\n              Create your first quota\n            </button>\n          )}\n        </div>\n      ) : viewMode === 'grid' ? (\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n          {filteredQuotas.map((quota) => (\n            <QuotaCard\n              key={quota.id}\n              quota={quota}\n              onView={handleViewQuota}\n              onEdit={handleEditQuota}\n              onToggle={handleToggleQuota}\n              canManage={permissions.canManageQuotas}\n              isToggling={isToggling}\n            />\n          ))}\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {filteredQuotas.map((quota) => (\n            <QuotaRow\n              key={quota.id}\n              quota={quota}\n              onView={handleViewQuota}\n              onEdit={handleEditQuota}\n              onToggle={handleToggleQuota}\n              canManage={permissions.canManageQuotas}\n              isToggling={isToggling}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Quota Card Component\n// ============================================================================\n\ninterface QuotaCardProps {\n  quota: Quota;\n  onView: (quota: Quota) => void;\n  onEdit: (quota: Quota) => void;\n  onToggle: (quota: Quota) => void;\n  canManage: boolean;\n  isToggling: boolean;\n}\n\nconst QuotaCard: FC<QuotaCardProps> = ({\n  quota,\n  onView,\n  onEdit,\n  onToggle,\n  canManage,\n  isToggling,\n}) => {\n  const limits = quota.limits as { type?: string; value?: number; unit?: string } | null;\n  const limitType = limits?.type ?? 'unknown';\n  const limitValue = limits?.value ?? 0;\n  const limitUnit = limits?.unit ?? '';\n\n  return (\n    <div\n      className={`relative border rounded-card p-6 shadow-[var(--shadow-elevation-1)] transition-all duration-200 hover:border-border-strong hover:shadow-[var(--shadow-elevation-2)] flex flex-col h-full ${\n        quota.isActive\n          ? 'border-border-subtle bg-bg-surface'\n          : 'border-dashed border-text-muted/30 bg-bg-sunken/30'\n      }`}\n    >\n      {/* Status Badge */}\n      {!quota.isActive && (\n        <span className=\"absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-bg-sunken text-text-muted rounded\">\n          Inactive\n        </span>\n      )}\n\n      {/* Quota Icon */}\n      <div className=\"size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n        <svg\n          className=\"size-5 text-text-link\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\n          />\n        </svg>\n      </div>\n\n      {/* Quota Name */}\n      <div className=\"mb-4\">\n        <h3 className=\"text-lg font-bold text-text-primary\">{quota.name}</h3>\n        <div className=\"flex items-center gap-2 mt-1\">\n          <span\n            className={`px-2 py-0.5 text-xs font-medium rounded ${\n              quota.quotaType === 'POOLED'\n                ? 'bg-status-info-bg-subtle text-status-info-text'\n                : 'bg-accent-purple-subtle text-text-primary'\n            }`}\n          >\n            {quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'}\n          </span>\n          {quota.reusable && (\n            <span className=\"px-2 py-0.5 text-xs font-medium bg-status-success-bg-subtle text-status-success-text rounded\">\n              Reusable\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Limits Info */}\n      <div className=\"space-y-2 mb-4 flex-1\">\n        <div className=\"flex items-center justify-between text-sm\">\n          <span className=\"text-text-muted\">Limit Type:</span>\n          <span className=\"font-medium text-text-primary capitalize\">{limitType}</span>\n        </div>\n        <div className=\"flex items-center justify-between text-sm\">\n          <span className=\"text-text-muted\">Value:</span>\n          <span className=\"font-semibold text-text-primary\">\n            {limitValue.toLocaleString()}\n            {limitUnit && ` ${limitUnit}`}\n          </span>\n        </div>\n      </div>\n\n      {/* Created Date */}\n      <div className=\"py-3 border-t border-border-subtle text-sm text-text-muted\">\n        Created {formatDate(quota.createdAt, 'short')}\n      </div>\n\n      {/* Actions */}\n      <div className=\"space-y-2 pt-4 border-t border-border-subtle\">\n        <button\n          type=\"button\"\n          onClick={() => onView(quota)}\n          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\"\n        >\n          View Details\n        </button>\n        {canManage && (\n          <div className=\"flex gap-2\">\n            <button\n              type=\"button\"\n              onClick={() => onEdit(quota)}\n              className=\"flex-1 px-3 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n            >\n              Edit\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onToggle(quota)}\n              disabled={isToggling}\n              className={`px-3 py-2 text-sm font-medium border border-border-subtle rounded-md transition-colors ${\n                quota.isActive\n                  ? 'text-status-error-text hover:bg-status-error-bg-subtle'\n                  : 'text-status-success-text hover:bg-status-success-bg-subtle'\n              }`}\n            >\n              {quota.isActive ? 'Deactivate' : 'Activate'}\n            </button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\n// ============================================================================\n// Quota Row Component (List View)\n// ============================================================================\n\ninterface QuotaRowProps {\n  quota: Quota;\n  onView: (quota: Quota) => void;\n  onEdit: (quota: Quota) => void;\n  onToggle: (quota: Quota) => void;\n  canManage: boolean;\n  isToggling: boolean;\n}\n\nconst QuotaRow: FC<QuotaRowProps> = ({\n  quota,\n  onView,\n  onEdit,\n  onToggle,\n  canManage,\n  isToggling,\n}) => {\n  const limits = quota.limits as { type?: string; value?: number; unit?: string } | null;\n  const limitType = limits?.type ?? 'unknown';\n  const limitValue = limits?.value ?? 0;\n  const limitUnit = limits?.unit ?? '';\n\n  return (\n    <div\n      className={`flex items-center gap-4 p-4 border rounded-card shadow-[var(--shadow-elevation-1)] transition-all duration-200 hover:border-border-strong hover:shadow-[var(--shadow-elevation-2)] ${\n        quota.isActive\n          ? 'border-border-subtle bg-bg-surface'\n          : 'border-dashed border-text-muted/30 bg-bg-sunken/30'\n      }`}\n    >\n      {/* Quota Icon */}\n      <div className=\"size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center shrink-0\">\n        <svg\n          className=\"size-5 text-text-link\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\n          />\n        </svg>\n      </div>\n\n      {/* Quota Info */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2 flex-wrap\">\n          <h3 className=\"font-semibold text-text-primary truncate\">{quota.name}</h3>\n          {!quota.isActive && (\n            <span className=\"px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-muted rounded\">\n              Inactive\n            </span>\n          )}\n          <span\n            className={`px-2 py-0.5 text-xs font-medium rounded ${\n              quota.quotaType === 'POOLED'\n                ? 'bg-status-info-bg-subtle text-status-info-text'\n                : 'bg-accent-purple-subtle text-text-primary'\n            }`}\n          >\n            {quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'}\n          </span>\n        </div>\n        <p className=\"text-sm text-text-muted\">\n          <span className=\"capitalize\">{limitType}</span> limit: {limitValue.toLocaleString()}\n          {limitUnit && ` ${limitUnit}`}\n          {quota.reusable && ' (Reusable)'}\n        </p>\n      </div>\n\n      {/* Actions */}\n      <div className=\"flex items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={() => onView(quota)}\n          className=\"px-3 py-1.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n        >\n          View\n        </button>\n        {canManage && (\n          <>\n            <button\n              type=\"button\"\n              onClick={() => onEdit(quota)}\n              className=\"px-3 py-1.5 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n            >\n              Edit\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onToggle(quota)}\n              disabled={isToggling}\n              className={`px-3 py-1.5 text-sm font-medium border border-border-subtle rounded-md transition-colors ${\n                quota.isActive\n                  ? 'text-status-error-text hover:bg-status-error-bg-subtle'\n                  : 'text-status-success-text hover:bg-status-success-bg-subtle'\n              }`}\n            >\n              {quota.isActive ? 'Deactivate' : 'Activate'}\n            </button>\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"QuotaTemplatesListPage.js","names":[],"sources":["../../../../../src/billing/modules/quota/pages/QuotaTemplatesListPage.tsx"],"sourcesContent":["/**\n * Quota Module - Quota Templates List Page\n * Displays all available quota templates for admin management\n */\n\nimport { useState, type FC } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useQuotaTemplates, useQuotaTemplateMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport { formatDate } from '../../../shared/utils/format';\nimport type { Quota, QuotaType } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ntype ViewMode = 'grid' | 'list';\n\nexport const QuotaTemplatesListPage: 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 { quotas, isLoading, error, refetch } = useQuotaTemplates();\n  const { toggleQuota, isToggling } = useQuotaTemplateMutations();\n\n  const [viewMode, setViewMode] = useState<ViewMode>('grid');\n  const [showInactive, setShowInactive] = useState(false);\n  const [quotaTypeFilter, setQuotaTypeFilter] = useState<QuotaType | 'all'>('all');\n\n  // Permission check\n  if (!permissions.canViewQuotas) {\n    return <AccessDenied message=\"You don't have permission to view quotas.\" />;\n  }\n\n  // Filter quotas\n  const filteredQuotas = quotas.filter((quota) => {\n    if (!showInactive && !quota.isActive) return false;\n    if (quotaTypeFilter !== 'all' && quota.quotaType !== quotaTypeFilter) return false;\n    return true;\n  });\n\n  const handleToggleQuota = async (quota: Quota) => {\n    if (!permissions.canManageQuotas) return;\n    try {\n      await toggleQuota(quota.id, !quota.isActive);\n      await refetch();\n    } catch (err) {\n      console.error('Failed to toggle quota:', err);\n    }\n  };\n\n  const handleViewQuota = (quota: Quota) => {\n    navigateTo(`/quotas/${quota.id}`);\n  };\n\n  const handleEditQuota = (quota: Quota) => {\n    navigateTo(`/quotas/${quota.id}/edit`);\n  };\n\n  // Loading state\n  if (isLoading && quotas.length === 0) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-32 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"space-y-2\">\n                {[1, 2].map((j) => (\n                  <div key={j} className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n                ))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <div className=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-status-error-text\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.quota.failedToLoad', 'Failed to load quotas')}\n          </h2>\n          <p className=\"text-sm text-text-muted\">{error.message}</p>\n          <button\n            type=\"button\"\n            onClick={() => refetch()}\n            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\"\n          >\n            Try Again\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <PageHeader\n          title={tr('billing.quota.quotaTemplatesTitle', 'Quota Templates')}\n          description=\"Manage quota templates that can be assigned to plans and addons\"\n        />\n\n        {permissions.canManageQuotas && (\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/quotas/new')}\n            className=\"inline-flex items-center gap-2 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\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 4v16m8-8H4\"\n              />\n            </svg>\n            Create Quota\n          </button>\n        )}\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border-subtle\">\n        {/* Quota Type Toggle */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken/50\">\n          <button\n            type=\"button\"\n            onClick={() => setQuotaTypeFilter('all')}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              quotaTypeFilter === 'all'\n                ? 'bg-bg-surface text-text-primary shadow-sm'\n                : 'text-text-muted hover:text-text-primary'\n            }`}\n          >\n            All\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setQuotaTypeFilter('POOLED' as QuotaType)}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              quotaTypeFilter === 'POOLED'\n                ? 'bg-bg-surface text-text-primary shadow-sm'\n                : 'text-text-muted hover:text-text-primary'\n            }`}\n          >\n            Pooled\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setQuotaTypeFilter('PRODUCT_SPECIFIC' as QuotaType)}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              quotaTypeFilter === 'PRODUCT_SPECIFIC'\n                ? 'bg-bg-surface text-text-primary shadow-sm'\n                : 'text-text-muted hover:text-text-primary'\n            }`}\n          >\n            Product Specific\n          </button>\n        </div>\n\n        {/* Show Inactive Toggle */}\n        {permissions.canManageQuotas && (\n          <label className=\"flex items-center gap-2 text-sm cursor-pointer\">\n            <input\n              type=\"checkbox\"\n              checked={showInactive}\n              onChange={(e) => setShowInactive(e.target.checked)}\n              className=\"size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]\"\n            />\n            <span className=\"text-text-muted\">\n              {tr('billing.quota.showInactive', 'Show inactive quotas')}\n            </span>\n          </label>\n        )}\n\n        {/* View Mode Toggle */}\n        <div className=\"ml-auto inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken/50\">\n          <button\n            type=\"button\"\n            onClick={() => setViewMode('grid')}\n            className={`p-1.5 rounded-md transition-colors ${\n              viewMode === 'grid'\n                ? 'bg-bg-surface text-text-primary shadow-sm'\n                : 'text-text-muted hover:text-text-primary'\n            }`}\n            title=\"Grid view\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\"\n              />\n            </svg>\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setViewMode('list')}\n            className={`p-1.5 rounded-md transition-colors ${\n              viewMode === 'list'\n                ? 'bg-bg-surface text-text-primary shadow-sm'\n                : 'text-text-muted hover:text-text-primary'\n            }`}\n            title=\"List view\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M4 6h16M4 12h16M4 18h16\"\n              />\n            </svg>\n          </button>\n        </div>\n      </div>\n\n      {/* Quotas Grid/List */}\n      {filteredQuotas.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center py-16 border border-dashed border-border-seam rounded-card bg-bg-surface\">\n          <div className=\"size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n            <svg\n              className=\"size-6 text-text-muted\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-text-primary\">\n            {tr('billing.quota.noQuotasFound', 'No quotas found')}\n          </h3>\n          <p className=\"text-sm text-text-muted mt-1\">\n            {showInactive\n              ? 'No quotas match your current filters.'\n              : 'There are no active quotas available.'}\n          </p>\n          {permissions.canManageQuotas && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/quotas/new')}\n              className=\"mt-4 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\"\n            >\n              Create your first quota\n            </button>\n          )}\n        </div>\n      ) : viewMode === 'grid' ? (\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n          {filteredQuotas.map((quota) => (\n            <QuotaCard\n              key={quota.id}\n              quota={quota}\n              onView={handleViewQuota}\n              onEdit={handleEditQuota}\n              onToggle={handleToggleQuota}\n              canManage={permissions.canManageQuotas}\n              isToggling={isToggling}\n            />\n          ))}\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {filteredQuotas.map((quota) => (\n            <QuotaRow\n              key={quota.id}\n              quota={quota}\n              onView={handleViewQuota}\n              onEdit={handleEditQuota}\n              onToggle={handleToggleQuota}\n              canManage={permissions.canManageQuotas}\n              isToggling={isToggling}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Quota Card Component\n// ============================================================================\n\ninterface QuotaCardProps {\n  quota: Quota;\n  onView: (quota: Quota) => void;\n  onEdit: (quota: Quota) => void;\n  onToggle: (quota: Quota) => void;\n  canManage: boolean;\n  isToggling: boolean;\n}\n\nconst QuotaCard: FC<QuotaCardProps> = ({\n  quota,\n  onView,\n  onEdit,\n  onToggle,\n  canManage,\n  isToggling,\n}) => {\n  const limits = quota.limits as { type?: string; value?: number; unit?: string } | null;\n  const limitType = limits?.type ?? 'unknown';\n  const limitValue = limits?.value ?? 0;\n  const limitUnit = limits?.unit ?? '';\n\n  return (\n    <div\n      className={`relative border rounded-card p-6 shadow-[var(--shadow-elevation-1)] transition-all duration-200 hover:border-border-strong hover:shadow-[var(--shadow-elevation-2)] flex flex-col h-full ${\n        quota.isActive\n          ? 'border-border-subtle bg-bg-surface'\n          : 'border-dashed border-text-muted/30 bg-bg-sunken/30'\n      }`}\n    >\n      {/* Status Badge */}\n      {!quota.isActive && (\n        <span className=\"absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-bg-sunken text-text-muted rounded\">\n          Inactive\n        </span>\n      )}\n\n      {/* Quota Icon */}\n      <div className=\"size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n        <svg\n          className=\"size-5 text-text-link\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\n          />\n        </svg>\n      </div>\n\n      {/* Quota Name */}\n      <div className=\"mb-4\">\n        <h3 className=\"text-lg font-bold text-text-primary\">{quota.name}</h3>\n        <div className=\"flex items-center gap-2 mt-1\">\n          <span\n            className={`px-2 py-0.5 text-xs font-medium rounded ${\n              quota.quotaType === 'POOLED'\n                ? 'bg-status-info-bg-subtle text-status-info-text'\n                : 'bg-accent-purple-subtle text-text-primary'\n            }`}\n          >\n            {quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'}\n          </span>\n          {quota.reusable && (\n            <span className=\"px-2 py-0.5 text-xs font-medium bg-status-success-bg-subtle text-status-success-text rounded\">\n              Reusable\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Limits Info */}\n      <div className=\"space-y-2 mb-4 flex-1\">\n        <div className=\"flex items-center justify-between text-sm\">\n          <span className=\"text-text-muted\">Limit Type:</span>\n          <span className=\"font-medium text-text-primary capitalize\">{limitType}</span>\n        </div>\n        <div className=\"flex items-center justify-between text-sm\">\n          <span className=\"text-text-muted\">Value:</span>\n          <span className=\"font-semibold text-text-primary\">\n            {limitValue.toLocaleString()}\n            {limitUnit && ` ${limitUnit}`}\n          </span>\n        </div>\n      </div>\n\n      {/* Created Date */}\n      <div className=\"py-3 border-t border-border-subtle text-sm text-text-muted\">\n        Created {formatDate(quota.createdAt, 'short')}\n      </div>\n\n      {/* Actions */}\n      <div className=\"space-y-2 pt-4 border-t border-border-subtle\">\n        <button\n          type=\"button\"\n          onClick={() => onView(quota)}\n          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\"\n        >\n          View Details\n        </button>\n        {canManage && (\n          <div className=\"flex gap-2\">\n            <button\n              type=\"button\"\n              onClick={() => onEdit(quota)}\n              className=\"flex-1 px-3 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n            >\n              Edit\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onToggle(quota)}\n              disabled={isToggling}\n              className={`px-3 py-2 text-sm font-medium border border-border-subtle rounded-md transition-colors ${\n                quota.isActive\n                  ? 'text-status-error-text hover:bg-status-error-bg-subtle'\n                  : 'text-status-success-text hover:bg-status-success-bg-subtle'\n              }`}\n            >\n              {quota.isActive ? 'Deactivate' : 'Activate'}\n            </button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\n// ============================================================================\n// Quota Row Component (List View)\n// ============================================================================\n\ninterface QuotaRowProps {\n  quota: Quota;\n  onView: (quota: Quota) => void;\n  onEdit: (quota: Quota) => void;\n  onToggle: (quota: Quota) => void;\n  canManage: boolean;\n  isToggling: boolean;\n}\n\nconst QuotaRow: FC<QuotaRowProps> = ({\n  quota,\n  onView,\n  onEdit,\n  onToggle,\n  canManage,\n  isToggling,\n}) => {\n  const limits = quota.limits as { type?: string; value?: number; unit?: string } | null;\n  const limitType = limits?.type ?? 'unknown';\n  const limitValue = limits?.value ?? 0;\n  const limitUnit = limits?.unit ?? '';\n\n  return (\n    <div\n      className={`flex items-center gap-4 p-4 border rounded-card shadow-[var(--shadow-elevation-1)] transition-all duration-200 hover:border-border-strong hover:shadow-[var(--shadow-elevation-2)] ${\n        quota.isActive\n          ? 'border-border-subtle bg-bg-surface'\n          : 'border-dashed border-text-muted/30 bg-bg-sunken/30'\n      }`}\n    >\n      {/* Quota Icon */}\n      <div className=\"size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center shrink-0\">\n        <svg\n          className=\"size-5 text-text-link\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\n          />\n        </svg>\n      </div>\n\n      {/* Quota Info */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2 flex-wrap\">\n          <h3 className=\"font-semibold text-text-primary truncate\">{quota.name}</h3>\n          {!quota.isActive && (\n            <span className=\"px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-muted rounded\">\n              Inactive\n            </span>\n          )}\n          <span\n            className={`px-2 py-0.5 text-xs font-medium rounded ${\n              quota.quotaType === 'POOLED'\n                ? 'bg-status-info-bg-subtle text-status-info-text'\n                : 'bg-accent-purple-subtle text-text-primary'\n            }`}\n          >\n            {quota.quotaType === 'POOLED' ? 'Pooled' : 'Product Specific'}\n          </span>\n        </div>\n        <p className=\"text-sm text-text-muted\">\n          <span className=\"capitalize\">{limitType}</span> limit: {limitValue.toLocaleString()}\n          {limitUnit && ` ${limitUnit}`}\n          {quota.reusable && ' (Reusable)'}\n        </p>\n      </div>\n\n      {/* Actions */}\n      <div className=\"flex items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={() => onView(quota)}\n          className=\"px-3 py-1.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n        >\n          View\n        </button>\n        {canManage && (\n          <>\n            <button\n              type=\"button\"\n              onClick={() => onEdit(quota)}\n              className=\"px-3 py-1.5 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n            >\n              Edit\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onToggle(quota)}\n              disabled={isToggling}\n              className={`px-3 py-1.5 text-sm font-medium border border-border-subtle rounded-md transition-colors ${\n                quota.isActive\n                  ? 'text-status-error-text hover:bg-status-error-bg-subtle'\n                  : 'text-status-success-text hover:bg-status-success-bg-subtle'\n              }`}\n            >\n              {quota.isActive ? 'Deactivate' : 'Activate'}\n            </button>\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}