@burdenoff/microfe-billing 2026.1013.3 → 2026.1013.4

package/dist/billing/modules/plans/pages/PlanEditPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlanEditPage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanEditPage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Edit Page\n * Form to edit an existing plan\n */\n\nimport { useState, useEffect, type FC, type FormEvent } from 'react';\nimport { useParams } from 'react-router';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlan, usePlanMutations, useQuotas } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport {\n  AccessDenied,\n  CurrencyPriceOverridesEditor,\n  PageHeader,\n  ServerError,\n} from '../../../shared/components';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { getPlanFeatureQuantity, isServerError } from '../../../shared/utils';\nimport {\n  PlanDuration,\n  type CurrencyPriceOverrideInput,\n  type UpdatePlanInput,\n} from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface QuotaAllocation {\n  quotaId: string;\n  quantity: number;\n}\n\nexport const PlanEditPage: 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 { planId } = useParams<{ planId: string }>();\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { plan, isLoading: isPlanLoading, error: planError, refetch } = usePlan(planId);\n  const { quotas, isLoading: isQuotasLoading } = useQuotas({ onlyActive: true });\n  const { updatePlan, isUpdating } = usePlanMutations();\n\n  // Form state\n  const [name, setName] = useState('');\n  const [price, setPrice] = useState('');\n  const [currency, setCurrency] = useState('USD');\n  const [duration, setDuration] = useState<PlanDuration>(PlanDuration.MONTHLY);\n  const [isActive, setIsActive] = useState(true);\n  const [isPurchasable, setIsPurchasable] = useState(true);\n  const [quotaAllocations, setQuotaAllocations] = useState<QuotaAllocation[]>([]);\n  const [currencyPriceOverrides, setCurrencyPriceOverrides] = useState<\n    CurrencyPriceOverrideInput[]\n  >([]);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Populate form when plan data loads\n  useEffect(() => {\n    if (plan) {\n      setName(plan.name ?? '');\n      setPrice(String(plan.price ?? ''));\n      setCurrency(plan.currency ?? 'USD');\n      setDuration(plan.duration ?? PlanDuration.MONTHLY);\n      setIsActive(plan.isActive ?? true);\n      setIsPurchasable(plan.isPurchasable ?? true);\n      // Pre-populate currency price overrides so existing prices are preserved on save\n      if (plan.currencyPrices && typeof plan.currencyPrices === 'object') {\n        const existing = plan.currencyPrices as Record<string, number>;\n        setCurrencyPriceOverrides(\n          Object.entries(existing)\n            .filter(([, v]) => typeof v === 'number')\n            .map(([currency, amount]) => ({ currency, amount }))\n        );\n      }\n      // Extract quota allocations from features\n      if (plan.features && plan.features.length > 0) {\n        const allocations: QuotaAllocation[] = [];\n        const quotaMap = new Map<string, number>();\n\n        for (const feature of plan.features) {\n          if (feature.quota?.id) {\n            const quotaId = feature.quota.id;\n            // SubscriptionFeature now stores per-plan override in context.quantity.\n            // Fall back to quota.limits.value for legacy autoseeded plans.\n            const value = getPlanFeatureQuantity(feature) || 1;\n            quotaMap.set(quotaId, value);\n          }\n        }\n\n        for (const [quotaId, quantity] of quotaMap) {\n          allocations.push({ quotaId, quantity });\n        }\n\n        setQuotaAllocations(allocations);\n      }\n    }\n  }, [plan]);\n\n  // Permission check\n  if (!permissions.canManagePlans) {\n    return (\n      <AccessDenied\n        message={tr('billing.plans.noEditPermission', \"You don't have permission to edit plans.\")}\n      />\n    );\n  }\n\n  // Loading state\n  if (isPlanLoading || isQuotasLoading) {\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, 5].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 (planError && isServerError(planError)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title={tr('billing.plans.serverUnavailable', 'Server Unavailable')}\n          message={tr(\n            'billing.plans.serverUnavailableLoadPlan',\n            'Unable to load plan. The server might be down or experiencing issues.'\n          )}\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  if (!plan) {\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\">\n            {tr('billing.plans.planNotFound', 'Plan not found')}\n          </h2>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\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 Plans\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const handleAddQuota = () => {\n    // Add new quota at the top with empty quotaId (placeholder)\n    setQuotaAllocations([{ quotaId: '', quantity: 1 }, ...quotaAllocations]);\n  };\n\n  const handleRemoveQuota = (index: number) => {\n    setQuotaAllocations(quotaAllocations.filter((_, i) => i !== index));\n  };\n\n  const handleQuotaChange = (\n    index: number,\n    field: 'quotaId' | 'quantity',\n    value: string | number\n  ) => {\n    const updated = [...quotaAllocations];\n    if (field === 'quotaId') {\n      updated[index].quotaId = value as string;\n    } else {\n      updated[index].quantity = Number(value);\n    }\n    setQuotaAllocations(updated);\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('Plan name is required');\n      return;\n    }\n    if (!price || isNaN(Number(price)) || Number(price) < 0) {\n      setError('Valid price is required');\n      return;\n    }\n    if (quotaAllocations.length === 0) {\n      setError('At least one quota is required');\n      return;\n    }\n    // Check for unselected quotas\n    const unselectedQuotas = quotaAllocations.filter((a) => a.quotaId === '');\n    if (unselectedQuotas.length > 0) {\n      setError('Please select a quota for all allocations');\n      return;\n    }\n\n    const input: UpdatePlanInput = {\n      id: planId!,\n      name: name.trim(),\n      price: Number(price),\n      currency,\n      duration,\n      isActive,\n      isPurchasable,\n      quotas: quotaAllocations.map((a) => ({\n        quotaId: a.quotaId,\n        quantity: a.quantity,\n      })),\n      ...(currencyPriceOverrides.length > 0 ? { currencyPriceOverrides } : {}),\n    };\n\n    try {\n      await updatePlan(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo(`/plans/${planId}`), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to update plan');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={`Edit Plan: ${plan.name}`}\n        description={tr(\n          'billing.plans.editPlanDesc',\n          'Update the plan details and quota allocations'\n        )}\n      />\n\n      <PagePurpose>\n        {tr(\n          'billing.plans.editPurpose',\n          \"Update this plan's price, currency/seat pricing and the quotas it grants. Changes apply to new subscriptions; existing subscribers keep the terms they signed up with until they renew or change plans.\"\n        )}\n      </PagePurpose>\n\n      <form onSubmit={handleSubmit} className=\"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              {tr('billing.plans.updateSuccess', 'Plan updated successfully! Redirecting...')}\n            </p>\n          </div>\n        )}\n\n        {/* Two-column layout on desktop */}\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n          {/* Basic Info */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\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.plans.basicInfo', 'Basic Information')}\n              </h2>\n            </div>\n            <div className=\"p-4 space-y-4\">\n              {/* Name */}\n              <div>\n                <label htmlFor=\"name\" className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('billing.plans.planNameLabel', 'Plan Name')} *\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)]\"\n                  placeholder={tr('billing.plans.planNamePlaceholder', 'e.g., Pro Plan')}\n                  required\n                />\n              </div>\n\n              {/* Price & Currency */}\n              <div className=\"grid grid-cols-2 gap-4\">\n                <div>\n                  <label\n                    htmlFor=\"price\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.plans.priceLabel', 'Price')} *\n                  </label>\n                  <input\n                    id=\"price\"\n                    type=\"number\"\n                    step=\"0.01\"\n                    min=\"0\"\n                    value={price}\n                    onChange={(e) => setPrice(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=\"49.99\"\n                    required\n                  />\n                </div>\n                <div>\n                  <label\n                    htmlFor=\"currency\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.plans.currencyLabel', 'Currency')} *\n                  </label>\n                  <select\n                    id=\"currency\"\n                    value={currency}\n                    onChange={(e) => setCurrency(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=\"USD\">USD ($)</option>\n                    <option value=\"EUR\">EUR</option>\n                    <option value=\"GBP\">GBP</option>\n                    <option value=\"INR\">INR</option>\n                    <option value=\"AUD\">AUD</option>\n                    <option value=\"CAD\">CAD</option>\n                    <option value=\"JPY\">JPY</option>\n                    <option value=\"SGD\">SGD</option>\n                  </select>\n                </div>\n              </div>\n\n              {/* Duration */}\n              <div>\n                <label\n                  htmlFor=\"duration\"\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr('billing.plans.billingPeriodLabel', 'Billing Period')} *\n                </label>\n                <select\n                  id=\"duration\"\n                  value={duration}\n                  onChange={(e) => setDuration(e.target.value as PlanDuration)}\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={PlanDuration.MONTHLY}>Monthly</option>\n                  <option value={PlanDuration.YEARLY}>Yearly</option>\n                </select>\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                  {tr('billing.plans.planIsActive', 'Plan is active')}\n                </label>\n              </div>\n\n              {/* Purchasable toggle */}\n              <div className=\"flex items-start justify-between gap-4 pt-1\">\n                <div>\n                  <p className=\"text-sm font-medium text-text-primary\">\n                    {tr('billing.plans.isPurchasableLabel', 'Publicly purchasable')}\n                  </p>\n                  <p className=\"text-xs text-text-muted mt-0.5\">\n                    {isPurchasable\n                      ? tr(\n                          'billing.plans.isPurchasableOn',\n                          'Visible on pricing page — users can subscribe directly.'\n                        )\n                      : tr(\n                          'billing.plans.isPurchasableOff',\n                          'Internal / custom plan — hidden from pricing page, assign via API only.'\n                        )}\n                  </p>\n                </div>\n                <button\n                  type=\"button\"\n                  role=\"switch\"\n                  aria-checked={isPurchasable}\n                  onClick={() => setIsPurchasable((v) => !v)}\n                  className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:ring-offset-2 ${\n                    isPurchasable ? 'bg-action-primary-bg' : 'bg-text-muted/30'\n                  }`}\n                >\n                  <span\n                    className={`inline-block h-5 w-5 transform rounded-full bg-bg-surface shadow transition-transform ${\n                      isPurchasable ? 'translate-x-5' : 'translate-x-0'\n                    }`}\n                  />\n                </button>\n              </div>\n            </div>\n          </div>\n\n          {/* Quota Allocations */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.plans.quotaAllocations', 'Quota Allocations')}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={handleAddQuota}\n                className=\"px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors\"\n              >\n                + Add Quota\n              </button>\n            </div>\n            <div className=\"p-4 space-y-3\">\n              {quotaAllocations.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr(\n                    'billing.plans.noQuotasAllocated',\n                    'No quotas allocated. Click \"Add Quota\" to add one.'\n                  )}\n                </p>\n              ) : (\n                quotaAllocations.map((allocation, index) => {\n                  const selectedQuota = quotas.find((q) => q.id === allocation.quotaId);\n                  const limits = selectedQuota?.limits as { type?: string; value?: number } | null;\n                  const limitType = limits?.type ?? 'unknown';\n\n                  return (\n                    <div\n                      key={index}\n                      className=\"p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3\"\n                    >\n                      <div className=\"flex items-center gap-3\">\n                        <select\n                          value={allocation.quotaId}\n                          onChange={(e) => handleQuotaChange(index, 'quotaId', e.target.value)}\n                          className={`flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${\n                            allocation.quotaId === '' ? 'text-text-muted' : 'text-text-primary'\n                          }`}\n                        >\n                          <option value=\"\" disabled>\n                            {tr('billing.plans.selectQuota', 'Select a quota...')}\n                          </option>\n                          {quotas.map((quota) => (\n                            <option key={quota.id} value={quota.id}>\n                              {quota.name}\n                            </option>\n                          ))}\n                        </select>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleRemoveQuota(index)}\n                          className=\"p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors\"\n                          title=\"Remove quota\"\n                        >\n                          <svg\n                            className=\"size-5\"\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=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                            />\n                          </svg>\n                        </button>\n                      </div>\n\n                      {/* Quota Info - only show when quota is selected */}\n                      {selectedQuota && (\n                        <>\n                          <div className=\"flex items-center justify-between text-sm\">\n                            <span className=\"capitalize text-text-muted\">Type: {limitType}</span>\n                          </div>\n\n                          {/* Limit value — allocation.quantity is the absolute limit */}\n                          <div className=\"flex items-center gap-2\">\n                            <label className=\"text-sm text-text-muted\">\n                              {tr('billing.plans.limit', 'Limit')}:\n                            </label>\n                            <input\n                              type=\"number\"\n                              min=\"1\"\n                              value={allocation.quantity}\n                              onChange={(e) => handleQuotaChange(index, 'quantity', e.target.value)}\n                              className=\"w-36 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center\"\n                            />\n                          </div>\n                        </>\n                      )}\n                    </div>\n                  );\n                })\n              )}\n            </div>\n          </div>\n        </div>\n\n        <CurrencyPriceOverridesEditor\n          overrides={currencyPriceOverrides}\n          onChange={setCurrencyPriceOverrides}\n        />\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.plans.saving', 'Saving...')\n              : tr('billing.plans.saveChanges', 'Save Changes')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/plans/${planId}`)}\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":"PlanEditPage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanEditPage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Edit Page\n * Form to edit an existing plan\n */\n\nimport { useState, useEffect, type FC, type FormEvent } from 'react';\nimport { useParams } from 'react-router';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlan, usePlanMutations, useQuotas } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport {\n  AccessDenied,\n  CurrencyPriceOverridesEditor,\n  PageHeader,\n  ServerError,\n} from '../../../shared/components';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { getPlanFeatureQuantity, isServerError } from '../../../shared/utils';\nimport {\n  PlanDuration,\n  type CurrencyPriceOverrideInput,\n  type UpdatePlanInput,\n} from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface QuotaAllocation {\n  quotaId: string;\n  quantity: number;\n}\n\nexport const PlanEditPage: 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 { planId } = useParams<{ planId: string }>();\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { plan, isLoading: isPlanLoading, error: planError, refetch } = usePlan(planId);\n  const { quotas, isLoading: isQuotasLoading } = useQuotas({ onlyActive: true });\n  const { updatePlan, isUpdating } = usePlanMutations();\n\n  // Form state\n  const [name, setName] = useState('');\n  const [price, setPrice] = useState('');\n  const [currency, setCurrency] = useState('USD');\n  const [duration, setDuration] = useState<PlanDuration>(PlanDuration.MONTHLY);\n  const [isActive, setIsActive] = useState(true);\n  const [isPurchasable, setIsPurchasable] = useState(true);\n  const [quotaAllocations, setQuotaAllocations] = useState<QuotaAllocation[]>([]);\n  const [currencyPriceOverrides, setCurrencyPriceOverrides] = useState<\n    CurrencyPriceOverrideInput[]\n  >([]);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Populate form when plan data loads\n  useEffect(() => {\n    if (plan) {\n      setName(plan.name ?? '');\n      setPrice(String(plan.price ?? ''));\n      setCurrency(plan.currency ?? 'USD');\n      setDuration(plan.duration ?? PlanDuration.MONTHLY);\n      setIsActive(plan.isActive ?? true);\n      setIsPurchasable(plan.isPurchasable ?? true);\n      // Pre-populate currency price overrides so existing prices are preserved on save\n      if (plan.currencyPrices && typeof plan.currencyPrices === 'object') {\n        const existing = plan.currencyPrices as Record<string, number>;\n        setCurrencyPriceOverrides(\n          Object.entries(existing)\n            .filter(([, v]) => typeof v === 'number')\n            .map(([currency, amount]) => ({ currency, amount }))\n        );\n      }\n      // Extract quota allocations from features\n      if (plan.features && plan.features.length > 0) {\n        const allocations: QuotaAllocation[] = [];\n        const quotaMap = new Map<string, number>();\n\n        for (const feature of plan.features) {\n          if (feature.quota?.id) {\n            const quotaId = feature.quota.id;\n            // SubscriptionFeature now stores per-plan override in context.quantity.\n            // Fall back to quota.limits.value for legacy autoseeded plans.\n            const value = getPlanFeatureQuantity(feature) || 1;\n            quotaMap.set(quotaId, value);\n          }\n        }\n\n        for (const [quotaId, quantity] of quotaMap) {\n          allocations.push({ quotaId, quantity });\n        }\n\n        setQuotaAllocations(allocations);\n      }\n    }\n  }, [plan]);\n\n  // Permission check\n  if (!permissions.canManagePlans) {\n    return (\n      <AccessDenied\n        message={tr('billing.plans.noEditPermission', \"You don't have permission to edit plans.\")}\n      />\n    );\n  }\n\n  // Loading state\n  if (isPlanLoading || isQuotasLoading) {\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, 5].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 (planError && isServerError(planError)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title={tr('billing.plans.serverUnavailable', 'Server Unavailable')}\n          message={tr(\n            'billing.plans.serverUnavailableLoadPlan',\n            'Unable to load plan. The server might be down or experiencing issues.'\n          )}\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  if (!plan) {\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\">\n            {tr('billing.plans.planNotFound', 'Plan not found')}\n          </h2>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\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 Plans\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const handleAddQuota = () => {\n    // Add new quota at the top with empty quotaId (placeholder)\n    setQuotaAllocations([{ quotaId: '', quantity: 1 }, ...quotaAllocations]);\n  };\n\n  const handleRemoveQuota = (index: number) => {\n    setQuotaAllocations(quotaAllocations.filter((_, i) => i !== index));\n  };\n\n  const handleQuotaChange = (\n    index: number,\n    field: 'quotaId' | 'quantity',\n    value: string | number\n  ) => {\n    const updated = [...quotaAllocations];\n    if (field === 'quotaId') {\n      updated[index].quotaId = value as string;\n    } else {\n      updated[index].quantity = Number(value);\n    }\n    setQuotaAllocations(updated);\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('Plan name is required');\n      return;\n    }\n    if (!price || isNaN(Number(price)) || Number(price) < 0) {\n      setError('Valid price is required');\n      return;\n    }\n    if (quotaAllocations.length === 0) {\n      setError('At least one quota is required');\n      return;\n    }\n    // Check for unselected quotas\n    const unselectedQuotas = quotaAllocations.filter((a) => a.quotaId === '');\n    if (unselectedQuotas.length > 0) {\n      setError('Please select a quota for all allocations');\n      return;\n    }\n\n    const input: UpdatePlanInput = {\n      id: planId!,\n      name: name.trim(),\n      price: Number(price),\n      currency,\n      duration,\n      isActive,\n      isPurchasable,\n      quotas: quotaAllocations.map((a) => ({\n        quotaId: a.quotaId,\n        quantity: a.quantity,\n      })),\n      ...(currencyPriceOverrides.length > 0 ? { currencyPriceOverrides } : {}),\n    };\n\n    try {\n      await updatePlan(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo(`/plans/${planId}`), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to update plan');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={`Edit Plan: ${plan.name}`}\n        description={tr(\n          'billing.plans.editPlanDesc',\n          'Update the plan details and quota allocations'\n        )}\n      />\n\n      <PagePurpose>\n        {tr(\n          'billing.plans.editPurpose',\n          \"Update this plan's price, currency/seat pricing and the quotas it grants. Changes apply to new subscriptions; existing subscribers keep the terms they signed up with until they renew or change plans.\"\n        )}\n      </PagePurpose>\n\n      <form onSubmit={handleSubmit} className=\"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              {tr('billing.plans.updateSuccess', 'Plan updated successfully! Redirecting...')}\n            </p>\n          </div>\n        )}\n\n        {/* Two-column layout on desktop */}\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n          {/* Basic Info */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\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.plans.basicInfo', 'Basic Information')}\n              </h2>\n            </div>\n            <div className=\"p-4 space-y-4\">\n              {/* Name */}\n              <div>\n                <label htmlFor=\"name\" className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('billing.plans.planNameLabel', 'Plan Name')} *\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)]\"\n                  placeholder={tr('billing.plans.planNamePlaceholder', 'e.g., Pro Plan')}\n                  required\n                />\n              </div>\n\n              {/* Price & Currency */}\n              <div className=\"grid grid-cols-2 gap-4\">\n                <div>\n                  <label\n                    htmlFor=\"price\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.plans.priceLabel', 'Price')} *\n                  </label>\n                  <input\n                    id=\"price\"\n                    type=\"number\"\n                    step=\"0.01\"\n                    min=\"0\"\n                    value={price}\n                    onChange={(e) => setPrice(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=\"49.99\"\n                    required\n                  />\n                </div>\n                <div>\n                  <label\n                    htmlFor=\"currency\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    {tr('billing.plans.currencyLabel', 'Currency')} *\n                  </label>\n                  <select\n                    id=\"currency\"\n                    value={currency}\n                    onChange={(e) => setCurrency(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)] scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary\"\n                  >\n                    <option value=\"USD\">USD ($)</option>\n                    <option value=\"EUR\">EUR</option>\n                    <option value=\"GBP\">GBP</option>\n                    <option value=\"INR\">INR</option>\n                    <option value=\"AUD\">AUD</option>\n                    <option value=\"CAD\">CAD</option>\n                    <option value=\"JPY\">JPY</option>\n                    <option value=\"SGD\">SGD</option>\n                  </select>\n                </div>\n              </div>\n\n              {/* Duration */}\n              <div>\n                <label\n                  htmlFor=\"duration\"\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr('billing.plans.billingPeriodLabel', 'Billing Period')} *\n                </label>\n                <select\n                  id=\"duration\"\n                  value={duration}\n                  onChange={(e) => setDuration(e.target.value as PlanDuration)}\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)] scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary\"\n                >\n                  <option value={PlanDuration.MONTHLY}>Monthly</option>\n                  <option value={PlanDuration.YEARLY}>Yearly</option>\n                </select>\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                  {tr('billing.plans.planIsActive', 'Plan is active')}\n                </label>\n              </div>\n\n              {/* Purchasable toggle */}\n              <div className=\"flex items-start justify-between gap-4 pt-1\">\n                <div>\n                  <p className=\"text-sm font-medium text-text-primary\">\n                    {tr('billing.plans.isPurchasableLabel', 'Publicly purchasable')}\n                  </p>\n                  <p className=\"text-xs text-text-muted mt-0.5\">\n                    {isPurchasable\n                      ? tr(\n                          'billing.plans.isPurchasableOn',\n                          'Visible on pricing page — users can subscribe directly.'\n                        )\n                      : tr(\n                          'billing.plans.isPurchasableOff',\n                          'Internal / custom plan — hidden from pricing page, assign via API only.'\n                        )}\n                  </p>\n                </div>\n                <button\n                  type=\"button\"\n                  role=\"switch\"\n                  aria-checked={isPurchasable}\n                  onClick={() => setIsPurchasable((v) => !v)}\n                  className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:ring-offset-2 ${\n                    isPurchasable ? 'bg-action-primary-bg' : 'bg-text-muted/30'\n                  }`}\n                >\n                  <span\n                    className={`inline-block h-5 w-5 transform rounded-full bg-bg-surface shadow transition-transform ${\n                      isPurchasable ? 'translate-x-5' : 'translate-x-0'\n                    }`}\n                  />\n                </button>\n              </div>\n            </div>\n          </div>\n\n          {/* Quota Allocations */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit\">\n            <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between\">\n              <h2 className=\"font-semibold text-text-primary\">\n                {tr('billing.plans.quotaAllocations', 'Quota Allocations')}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={handleAddQuota}\n                className=\"px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors\"\n              >\n                + Add Quota\n              </button>\n            </div>\n            <div className=\"p-4 space-y-3\">\n              {quotaAllocations.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr(\n                    'billing.plans.noQuotasAllocated',\n                    'No quotas allocated. Click \"Add Quota\" to add one.'\n                  )}\n                </p>\n              ) : (\n                quotaAllocations.map((allocation, index) => {\n                  const selectedQuota = quotas.find((q) => q.id === allocation.quotaId);\n                  const limits = selectedQuota?.limits as { type?: string; value?: number } | null;\n                  const limitType = limits?.type ?? 'unknown';\n\n                  return (\n                    <div\n                      key={index}\n                      className=\"p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3\"\n                    >\n                      <div className=\"flex items-center gap-3\">\n                        <select\n                          value={allocation.quotaId}\n                          onChange={(e) => handleQuotaChange(index, 'quotaId', e.target.value)}\n                          className={`flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${\n                            allocation.quotaId === '' ? 'text-text-muted' : 'text-text-primary'\n                          }`}\n                        >\n                          <option value=\"\" disabled>\n                            {tr('billing.plans.selectQuota', 'Select a quota...')}\n                          </option>\n                          {quotas.map((quota) => (\n                            <option key={quota.id} value={quota.id}>\n                              {quota.name}\n                            </option>\n                          ))}\n                        </select>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleRemoveQuota(index)}\n                          className=\"p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-md transition-colors\"\n                          title=\"Remove quota\"\n                        >\n                          <svg\n                            className=\"size-5\"\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=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                            />\n                          </svg>\n                        </button>\n                      </div>\n\n                      {/* Quota Info - only show when quota is selected */}\n                      {selectedQuota && (\n                        <>\n                          <div className=\"flex items-center justify-between text-sm\">\n                            <span className=\"capitalize text-text-muted\">Type: {limitType}</span>\n                          </div>\n\n                          {/* Limit value — allocation.quantity is the absolute limit */}\n                          <div className=\"flex items-center gap-2\">\n                            <label className=\"text-sm text-text-muted\">\n                              {tr('billing.plans.limit', 'Limit')}:\n                            </label>\n                            <input\n                              type=\"number\"\n                              min=\"1\"\n                              value={allocation.quantity}\n                              onChange={(e) => handleQuotaChange(index, 'quantity', e.target.value)}\n                              className=\"w-36 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center\"\n                            />\n                          </div>\n                        </>\n                      )}\n                    </div>\n                  );\n                })\n              )}\n            </div>\n          </div>\n        </div>\n\n        <CurrencyPriceOverridesEditor\n          overrides={currencyPriceOverrides}\n          onChange={setCurrencyPriceOverrides}\n        />\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.plans.saving', 'Saving...')\n              : tr('billing.plans.saveChanges', 'Save Changes')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/plans/${planId}`)}\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/QuotaTemplateCreatePage.js

@@ -162,7 +162,7 @@ var f = () => {
 										id: "quotaType",
 										value: A,
 										onChange: (e) => j(e.target.value),
-										className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+										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)] scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary",
 										children: [/* @__PURE__ */ c("option", {
 											value: r.PRODUCT_SPECIFIC,
 											children: "Product Specific"
@@ -203,7 +203,7 @@ var f = () => {
 										id: "resetPeriod",
 										value: P,
 										onChange: (e) => F(e.target.value),
-										className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+										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)] scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary",
 										children: [
 											/* @__PURE__ */ c("option", {
 												value: n.NEVER,
@@ -246,7 +246,7 @@ var f = () => {
 									id: "limitType",
 									value: w,
 									onChange: (e) => T(e.target.value),
-									className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+									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)] scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary",
 									children: [
 										/* @__PURE__ */ c("option", {
 											value: "numeric",

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 { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { QuotaType, QuotaResetPeriod, type CreateQuotaInput } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const QuotaTemplateCreatePage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { createQuota, isCreating } = useQuotaTemplateMutations();\n\n  // Form state\n  const [name, setName] = useState('');\n  const [displayName, setDisplayName] = useState('');\n  const [description, setDescription] = useState('');\n  const [limitType, setLimitType] = useState('numeric');\n  const [limitValue, setLimitValue] = useState('');\n  const [unit, setUnit] = useState('');\n  const [quotaType, setQuotaType] = useState<QuotaType>(QuotaType.PRODUCT_SPECIFIC);\n  const [reusable, setReusable] = useState(false);\n  const [resetPeriod, setResetPeriod] = useState<QuotaResetPeriod>(QuotaResetPeriod.NEVER);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Permission check\n  if (!permissions.canManageQuotas) {\n    return <AccessDenied message=\"You don't have permission to create quotas.\" />;\n  }\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setSuccess(false);\n\n    // Validation\n    if (!name.trim()) {\n      setError('Quota name is required');\n      return;\n    }\n    if (!limitValue || isNaN(Number(limitValue)) || Number(limitValue) < 0) {\n      setError('Valid limit value is required');\n      return;\n    }\n    if (!unit.trim()) {\n      setError('Unit is required (e.g., bots, GB, seats)');\n      return;\n    }\n\n    const input: CreateQuotaInput = {\n      name: name.trim(),\n      limits: {\n        type: limitType,\n        value: Number(limitValue),\n        unit: unit.trim(),\n      },\n      quotaType,\n      reusable,\n      resetPeriod,\n      context: {\n        displayName: displayName.trim() || name.trim(),\n        description: description.trim(),\n      },\n    };\n\n    try {\n      await createQuota(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo('/quotas'), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to create quota');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader title=\"Create New Quota\" description=\"Set up a new quota template\" />\n\n      <PagePurpose>\n        Define a reusable limit — its name, type (pooled or product-specific), unit and default\n        value — that you can then attach to any number of plans and add-ons. Build the template once\n        here instead of redefining the same limit on every plan.\n      </PagePurpose>\n\n      <form onSubmit={handleSubmit} className=\"max-w-2xl space-y-6\">\n        {/* Error/Success Messages */}\n        {error && (\n          <div className=\"p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n          </div>\n        )}\n        {success && (\n          <div className=\"p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-success-text\">\n              Quota created successfully! Redirecting…\n            </p>\n          </div>\n        )}\n\n        {/* Basic Info */}\n        <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n          <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n            <h2 className=\"font-semibold text-text-primary\">Basic Information</h2>\n          </div>\n          <div className=\"p-4 space-y-4\">\n            {/* Machine Key (name) */}\n            <div>\n              <label htmlFor=\"name\" className=\"block text-sm font-medium text-text-primary mb-1\">\n                Quota Key *\n              </label>\n              <input\n                id=\"name\"\n                type=\"text\"\n                value={name}\n                onChange={(e) => setName(e.target.value)}\n                className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] font-mono text-sm\"\n                placeholder=\"e.g., sessions-started, tunnels-created\"\n                required\n              />\n              <p className=\"text-xs text-text-muted mt-1\">\n                Internal machine key, must match the <code>quotaName</code> used in{' '}\n                <code>@usage</code> directives. Never shown to users.\n              </p>\n            </div>\n\n            {/* Display Name */}\n            <div>\n              <label\n                htmlFor=\"displayName\"\n                className=\"block text-sm font-medium text-text-primary mb-1\"\n              >\n                Display Name *\n              </label>\n              <input\n                id=\"displayName\"\n                type=\"text\"\n                value={displayName}\n                onChange={(e) => setDisplayName(e.target.value)}\n                className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n                placeholder=\"e.g., Tunnels, Session Starts, Webhooks\"\n                required\n              />\n              <p className=\"text-xs text-text-muted mt-1\">\n                Human-readable name shown to users in billing and usage UI.\n              </p>\n            </div>\n\n            {/* Description */}\n            <div>\n              <label\n                htmlFor=\"description\"\n                className=\"block text-sm font-medium text-text-primary mb-1\"\n              >\n                Description\n              </label>\n              <textarea\n                id=\"description\"\n                value={description}\n                onChange={(e) => setDescription(e.target.value)}\n                rows={2}\n                className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none\"\n                placeholder=\"e.g., Active tunnels created through VibeControls (slot freed on delete)\"\n              />\n              <p className=\"text-xs text-text-muted mt-1\">\n                Short explanation shown in billing and usage detail views.\n              </p>\n            </div>\n\n            {/* Quota Type */}\n            <div>\n              <label\n                htmlFor=\"quotaType\"\n                className=\"block text-sm font-medium text-text-primary mb-1\"\n              >\n                Quota Type *\n              </label>\n              <select\n                id=\"quotaType\"\n                value={quotaType}\n                onChange={(e) => setQuotaType(e.target.value as QuotaType)}\n                className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n              >\n                <option value={QuotaType.PRODUCT_SPECIFIC}>Product Specific</option>\n                <option value={QuotaType.POOLED}>Pooled</option>\n              </select>\n              <p className=\"text-xs text-text-muted mt-1\">\n                {quotaType === QuotaType.POOLED\n                  ? 'Shared across all products'\n                  : 'Specific to individual products'}\n              </p>\n            </div>\n\n            {/* Reusable */}\n            <div className=\"flex items-center gap-3\">\n              <input\n                id=\"reusable\"\n                type=\"checkbox\"\n                checked={reusable}\n                onChange={(e) => setReusable(e.target.checked)}\n                className=\"size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]\"\n              />\n              <div>\n                <label htmlFor=\"reusable\" className=\"text-sm font-medium text-text-primary\">\n                  Reusable Quota\n                </label>\n                <p className=\"text-xs text-text-muted\">\n                  Enable for quotas like seats or bots that can be freed up\n                </p>\n              </div>\n            </div>\n\n            {/* Reset Period */}\n            <div>\n              <label\n                htmlFor=\"resetPeriod\"\n                className=\"block text-sm font-medium text-text-primary mb-1\"\n              >\n                Reset Period\n              </label>\n              <select\n                id=\"resetPeriod\"\n                value={resetPeriod}\n                onChange={(e) => setResetPeriod(e.target.value as QuotaResetPeriod)}\n                className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n              >\n                <option value={QuotaResetPeriod.NEVER}>Never (one-time limit)</option>\n                <option value={QuotaResetPeriod.DAILY}>Daily (resets every day)</option>\n                <option value={QuotaResetPeriod.MONTHLY}>Monthly (resets every month)</option>\n              </select>\n              <p className=\"text-xs text-text-muted mt-1\">\n                How often the quota usage counter is reset to zero\n              </p>\n            </div>\n          </div>\n        </div>\n\n        {/* Limits Configuration */}\n        <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n          <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n            <h2 className=\"font-semibold text-text-primary\">Limits Configuration</h2>\n          </div>\n          <div className=\"p-4 space-y-4\">\n            {/* Limit Type */}\n            <div>\n              <label\n                htmlFor=\"limitType\"\n                className=\"block text-sm font-medium text-text-primary mb-1\"\n              >\n                Limit Type *\n              </label>\n              <select\n                id=\"limitType\"\n                value={limitType}\n                onChange={(e) => setLimitType(e.target.value)}\n                className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n              >\n                <option value=\"numeric\">Numeric (count)</option>\n                <option value=\"storage\">Storage (bytes)</option>\n                <option value=\"duration\">Duration (seconds)</option>\n                <option value=\"percentage\">Percentage</option>\n              </select>\n            </div>\n\n            {/* Limit Value */}\n            <div>\n              <label\n                htmlFor=\"limitValue\"\n                className=\"block text-sm font-medium text-text-primary mb-1\"\n              >\n                Limit Value *\n              </label>\n              <input\n                id=\"limitValue\"\n                type=\"number\"\n                min=\"0\"\n                value={limitValue}\n                onChange={(e) => setLimitValue(e.target.value)}\n                className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n                placeholder=\"1000\"\n                required\n              />\n              <p className=\"text-xs text-text-muted mt-1\">The maximum limit value for this quota</p>\n            </div>\n\n            {/* Unit */}\n            <div>\n              <label htmlFor=\"unit\" className=\"block text-sm font-medium text-text-primary mb-1\">\n                Unit *\n              </label>\n              <input\n                id=\"unit\"\n                type=\"text\"\n                value={unit}\n                onChange={(e) => setUnit(e.target.value)}\n                className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n                placeholder=\"e.g., bots, GB, MB, seats, workflow runs\"\n                required\n              />\n              <p className=\"text-xs text-text-muted mt-1\">\n                The unit of measurement displayed with usage values (e.g., &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":";;;;;;;;;;;;;AAcA,IAAa,UAAoC;CAC/C,IAAM,EAAE,SAAM,EAAQ,GAChB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,CAAG;EACxB,OAAO,MAAe,IAAM,IAAW;CACzC,GACM,IAAa,EAAmB,GAChC,IAAc,EAAsB,GACpC,EAAE,gBAAa,kBAAe,EAA0B,GAGxD,CAAC,GAAM,KAAW,EAAS,EAAE,GAC7B,CAAC,GAAa,KAAkB,EAAS,EAAE,GAC3C,CAAC,GAAa,KAAkB,EAAS,EAAE,GAC3C,CAAC,GAAW,KAAgB,EAAS,SAAS,GAC9C,CAAC,GAAY,KAAiB,EAAS,EAAE,GACzC,CAAC,GAAM,KAAW,EAAS,EAAE,GAC7B,CAAC,GAAW,KAAgB,EAAoB,EAAU,gBAAgB,GAC1E,CAAC,GAAU,KAAe,EAAS,EAAK,GACxC,CAAC,GAAa,KAAkB,EAA2B,EAAiB,KAAK,GACjF,CAAC,GAAO,KAAY,EAAwB,IAAI,GAChD,CAAC,GAAS,KAAc,EAAS,EAAK;CAoD5C,OAjDK,EAAY,kBAkDf,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IAAY,OAAM;IAAmB,aAAY;GAA+B,CAAA;GAEhF,kBAAC,GAAD,EAAA,UAAa,gPAIA,CAAA;GAEb,kBAAC,QAAD;IAAM,UAAU,OAvDQ,MAAiB;KAM3C,IALA,EAAE,eAAe,GACjB,EAAS,IAAI,GACb,EAAW,EAAK,GAGZ,CAAC,EAAK,KAAK,GAAG;MAChB,EAAS,wBAAwB;MACjC;KACF;KACA,IAAI,CAAC,KAAc,MAAM,OAAO,CAAU,CAAC,KAAK,OAAO,CAAU,IAAI,GAAG;MACtE,EAAS,+BAA+B;MACxC;KACF;KACA,IAAI,CAAC,EAAK,KAAK,GAAG;MAChB,EAAS,0CAA0C;MACnD;KACF;KAEA,IAAM,IAA0B;MAC9B,MAAM,EAAK,KAAK;MAChB,QAAQ;OACN,MAAM;OACN,OAAO,OAAO,CAAU;OACxB,MAAM,EAAK,KAAK;MAClB;MACA;MACA;MACA;MACA,SAAS;OACP,aAAa,EAAY,KAAK,KAAK,EAAK,KAAK;OAC7C,aAAa,EAAY,KAAK;MAChC;KACF;KAEA,IAAI;MAIF,AAHA,MAAM,EAAY,CAAK,GACvB,EAAW,EAAI,GAEf,iBAAiB,EAAW,SAAS,GAAG,IAAI;KAC9C,SAAS,GAAK;MACZ,EAAS,aAAe,QAAQ,EAAI,UAAU,wBAAwB;KACxE;IACF;IAYkC,WAAU;cAAxC;KAEG,KACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,KAAD;OAAG,WAAU;iBAAkC;MAAS,CAAA;KACrD,CAAA;KAEN,KACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,KAAD;OAAG,WAAU;iBAAmC;MAE7C,CAAA;KACA,CAAA;KAIP,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,MAAD;QAAI,WAAU;kBAAkC;OAAqB,CAAA;MAClE,CAAA,GACL,kBAAC,OAAD;OAAK,WAAU;iBAAf;QAEE,kBAAC,OAAD,EAAA,UAAA;SACE,kBAAC,SAAD;UAAO,SAAQ;UAAO,WAAU;oBAAmD;SAE5E,CAAA;SACP,kBAAC,SAAD;UACE,IAAG;UACH,MAAK;UACL,OAAO;UACP,WAAW,MAAM,EAAQ,EAAE,OAAO,KAAK;UACvC,WAAU;UACV,aAAY;UACZ,UAAA;SACD,CAAA;SACD,kBAAC,KAAD;UAAG,WAAU;oBAAb;WAA4C;WACL,kBAAC,QAAD,EAAA,UAAM,YAAe,CAAA;WAAC;WAAS;WACpE,kBAAC,QAAD,EAAA,UAAM,SAAY,CAAA;WAAC;UAClB;;QACA,EAAA,CAAA;QAGL,kBAAC,OAAD,EAAA,UAAA;SACE,kBAAC,SAAD;UACE,SAAQ;UACR,WAAU;oBACX;SAEM,CAAA;SACP,kBAAC,SAAD;UACE,IAAG;UACH,MAAK;UACL,OAAO;UACP,WAAW,MAAM,EAAe,EAAE,OAAO,KAAK;UAC9C,WAAU;UACV,aAAY;UACZ,UAAA;SACD,CAAA;SACD,kBAAC,KAAD;UAAG,WAAU;oBAA+B;SAEzC,CAAA;QACA,EAAA,CAAA;QAGL,kBAAC,OAAD,EAAA,UAAA;SACE,kBAAC,SAAD;UACE,SAAQ;UACR,WAAU;oBACX;SAEM,CAAA;SACP,kBAAC,YAAD;UACE,IAAG;UACH,OAAO;UACP,WAAW,MAAM,EAAe,EAAE,OAAO,KAAK;UAC9C,MAAM;UACN,WAAU;UACV,aAAY;SACb,CAAA;SACD,kBAAC,KAAD;UAAG,WAAU;oBAA+B;SAEzC,CAAA;QACA,EAAA,CAAA;QAGL,kBAAC,OAAD,EAAA,UAAA;SACE,kBAAC,SAAD;UACE,SAAQ;UACR,WAAU;oBACX;SAEM,CAAA;SACP,kBAAC,UAAD;UACE,IAAG;UACH,OAAO;UACP,WAAW,MAAM,EAAa,EAAE,OAAO,KAAkB;UACzD,WAAU;oBAJZ,CAME,kBAAC,UAAD;WAAQ,OAAO,EAAU;qBAAkB;UAAwB,CAAA,GACnE,kBAAC,UAAD;WAAQ,OAAO,EAAU;qBAAQ;UAAc,CAAA,CACzC;;SACR,kBAAC,KAAD;UAAG,WAAU;oBACV,MAAc,EAAU,SACrB,+BACA;SACH,CAAA;QACA,EAAA,CAAA;QAGL,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,SAAD;UACE,IAAG;UACH,MAAK;UACL,SAAS;UACT,WAAW,MAAM,EAAY,EAAE,OAAO,OAAO;UAC7C,WAAU;SACX,CAAA,GACD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,SAAQ;UAAW,WAAU;oBAAwC;SAErE,CAAA,GACP,kBAAC,KAAD;UAAG,WAAU;oBAA0B;SAEpC,CAAA,CACA,EAAA,CAAA,CACF;;QAGL,kBAAC,OAAD,EAAA,UAAA;SACE,kBAAC,SAAD;UACE,SAAQ;UACR,WAAU;oBACX;SAEM,CAAA;SACP,kBAAC,UAAD;UACE,IAAG;UACH,OAAO;UACP,WAAW,MAAM,EAAe,EAAE,OAAO,KAAyB;UAClE,WAAU;oBAJZ;WAME,kBAAC,UAAD;YAAQ,OAAO,EAAiB;sBAAO;WAA8B,CAAA;WACrE,kBAAC,UAAD;YAAQ,OAAO,EAAiB;sBAAO;WAAgC,CAAA;WACvE,kBAAC,UAAD;YAAQ,OAAO,EAAiB;sBAAS;WAAoC,CAAA;UACvE;;SACR,kBAAC,KAAD;UAAG,WAAU;oBAA+B;SAEzC,CAAA;QACA,EAAA,CAAA;OACF;QACF;;KAGL,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,MAAD;QAAI,WAAU;kBAAkC;OAAwB,CAAA;MACrE,CAAA,GACL,kBAAC,OAAD;OAAK,WAAU;iBAAf;QAEE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;SACE,SAAQ;SACR,WAAU;mBACX;QAEM,CAAA,GACP,kBAAC,UAAD;SACE,IAAG;SACH,OAAO;SACP,WAAW,MAAM,EAAa,EAAE,OAAO,KAAK;SAC5C,WAAU;mBAJZ;UAME,kBAAC,UAAD;WAAQ,OAAM;qBAAU;UAAuB,CAAA;UAC/C,kBAAC,UAAD;WAAQ,OAAM;qBAAU;UAAuB,CAAA;UAC/C,kBAAC,UAAD;WAAQ,OAAM;qBAAW;UAA0B,CAAA;UACnD,kBAAC,UAAD;WAAQ,OAAM;qBAAa;UAAkB,CAAA;SACvC;UACL,EAAA,CAAA;QAGL,kBAAC,OAAD,EAAA,UAAA;SACE,kBAAC,SAAD;UACE,SAAQ;UACR,WAAU;oBACX;SAEM,CAAA;SACP,kBAAC,SAAD;UACE,IAAG;UACH,MAAK;UACL,KAAI;UACJ,OAAO;UACP,WAAW,MAAM,EAAc,EAAE,OAAO,KAAK;UAC7C,WAAU;UACV,aAAY;UACZ,UAAA;SACD,CAAA;SACD,kBAAC,KAAD;UAAG,WAAU;oBAA+B;SAAyC,CAAA;QAClF,EAAA,CAAA;QAGL,kBAAC,OAAD,EAAA,UAAA;SACE,kBAAC,SAAD;UAAO,SAAQ;UAAO,WAAU;oBAAmD;SAE5E,CAAA;SACP,kBAAC,SAAD;UACE,IAAG;UACH,MAAK;UACL,OAAO;UACP,WAAW,MAAM,EAAQ,EAAE,OAAO,KAAK;UACvC,WAAU;UACV,aAAY;UACZ,UAAA;SACD,CAAA;SACD,kBAAC,KAAD;UAAG,WAAU;oBAA+B;SAEzC,CAAA;QACA,EAAA,CAAA;OACF;QACF;;KAGL,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,MAAK;OACL,UAAU;OACV,WAAU;iBAET,IACG,EAAG,0BAA0B,aAAa,IAC1C,EAAG,6BAA6B,cAAc;MAC5C,CAAA,GACR,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAW,SAAS;OACnC,WAAU;iBACX;MAEO,CAAA,CACL;;IACD;;EACH;MA3SE,kBAAC,GAAD,EAAc,SAAQ,8CAA+C,CAAA;AA6ShF"}
+{"version":3,"file":"QuotaTemplateCreatePage.js","names":[],"sources":["../../../../../src/billing/modules/quota/pages/QuotaTemplateCreatePage.tsx"],"sourcesContent":["/**\n * Quota Module - Quota Template Create Page\n * Form to create a new quota template\n */\n\nimport { useState, type FC, type FormEvent } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useQuotaTemplateMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { QuotaType, QuotaResetPeriod, type CreateQuotaInput } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const QuotaTemplateCreatePage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { createQuota, isCreating } = useQuotaTemplateMutations();\n\n  // Form state\n  const [name, setName] = useState('');\n  const [displayName, setDisplayName] = useState('');\n  const [description, setDescription] = useState('');\n  const [limitType, setLimitType] = useState('numeric');\n  const [limitValue, setLimitValue] = useState('');\n  const [unit, setUnit] = useState('');\n  const [quotaType, setQuotaType] = useState<QuotaType>(QuotaType.PRODUCT_SPECIFIC);\n  const [reusable, setReusable] = useState(false);\n  const [resetPeriod, setResetPeriod] = useState<QuotaResetPeriod>(QuotaResetPeriod.NEVER);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Permission check\n  if (!permissions.canManageQuotas) {\n    return <AccessDenied message=\"You don't have permission to create quotas.\" />;\n  }\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setSuccess(false);\n\n    // Validation\n    if (!name.trim()) {\n      setError('Quota name is required');\n      return;\n    }\n    if (!limitValue || isNaN(Number(limitValue)) || Number(limitValue) < 0) {\n      setError('Valid limit value is required');\n      return;\n    }\n    if (!unit.trim()) {\n      setError('Unit is required (e.g., bots, GB, seats)');\n      return;\n    }\n\n    const input: CreateQuotaInput = {\n      name: name.trim(),\n      limits: {\n        type: limitType,\n        value: Number(limitValue),\n        unit: unit.trim(),\n      },\n      quotaType,\n      reusable,\n      resetPeriod,\n      context: {\n        displayName: displayName.trim() || name.trim(),\n        description: description.trim(),\n      },\n    };\n\n    try {\n      await createQuota(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo('/quotas'), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to create quota');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader title=\"Create New Quota\" description=\"Set up a new quota template\" />\n\n      <PagePurpose>\n        Define a reusable limit — its name, type (pooled or product-specific), unit and default\n        value — that you can then attach to any number of plans and add-ons. Build the template once\n        here instead of redefining the same limit on every plan.\n      </PagePurpose>\n\n      <form onSubmit={handleSubmit} className=\"max-w-2xl space-y-6\">\n        {/* Error/Success Messages */}\n        {error && (\n          <div className=\"p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n          </div>\n        )}\n        {success && (\n          <div className=\"p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-success-text\">\n              Quota created successfully! Redirecting…\n            </p>\n          </div>\n        )}\n\n        {/* Basic Info */}\n        <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n          <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n            <h2 className=\"font-semibold text-text-primary\">Basic Information</h2>\n          </div>\n          <div className=\"p-4 space-y-4\">\n            {/* Machine Key (name) */}\n            <div>\n              <label htmlFor=\"name\" className=\"block text-sm font-medium text-text-primary mb-1\">\n                Quota Key *\n              </label>\n              <input\n                id=\"name\"\n                type=\"text\"\n                value={name}\n                onChange={(e) => setName(e.target.value)}\n                className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] font-mono text-sm\"\n                placeholder=\"e.g., sessions-started, tunnels-created\"\n                required\n              />\n              <p className=\"text-xs text-text-muted mt-1\">\n                Internal machine key, must match the <code>quotaName</code> used in{' '}\n                <code>@usage</code> directives. Never shown to users.\n              </p>\n            </div>\n\n            {/* Display Name */}\n            <div>\n              <label\n                htmlFor=\"displayName\"\n                className=\"block text-sm font-medium text-text-primary mb-1\"\n              >\n                Display Name *\n              </label>\n              <input\n                id=\"displayName\"\n                type=\"text\"\n                value={displayName}\n                onChange={(e) => setDisplayName(e.target.value)}\n                className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n                placeholder=\"e.g., Tunnels, Session Starts, Webhooks\"\n                required\n              />\n              <p className=\"text-xs text-text-muted mt-1\">\n                Human-readable name shown to users in billing and usage UI.\n              </p>\n            </div>\n\n            {/* Description */}\n            <div>\n              <label\n                htmlFor=\"description\"\n                className=\"block text-sm font-medium text-text-primary mb-1\"\n              >\n                Description\n              </label>\n              <textarea\n                id=\"description\"\n                value={description}\n                onChange={(e) => setDescription(e.target.value)}\n                rows={2}\n                className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none\"\n                placeholder=\"e.g., Active tunnels created through VibeControls (slot freed on delete)\"\n              />\n              <p className=\"text-xs text-text-muted mt-1\">\n                Short explanation shown in billing and usage detail views.\n              </p>\n            </div>\n\n            {/* Quota Type */}\n            <div>\n              <label\n                htmlFor=\"quotaType\"\n                className=\"block text-sm font-medium text-text-primary mb-1\"\n              >\n                Quota Type *\n              </label>\n              <select\n                id=\"quotaType\"\n                value={quotaType}\n                onChange={(e) => setQuotaType(e.target.value as QuotaType)}\n                className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary\"\n              >\n                <option value={QuotaType.PRODUCT_SPECIFIC}>Product Specific</option>\n                <option value={QuotaType.POOLED}>Pooled</option>\n              </select>\n              <p className=\"text-xs text-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)] scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary\"\n              >\n                <option value={QuotaResetPeriod.NEVER}>Never (one-time limit)</option>\n                <option value={QuotaResetPeriod.DAILY}>Daily (resets every day)</option>\n                <option value={QuotaResetPeriod.MONTHLY}>Monthly (resets every month)</option>\n              </select>\n              <p className=\"text-xs text-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)] scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary\"\n              >\n                <option value=\"numeric\">Numeric (count)</option>\n                <option value=\"storage\">Storage (bytes)</option>\n                <option value=\"duration\">Duration (seconds)</option>\n                <option value=\"percentage\">Percentage</option>\n              </select>\n            </div>\n\n            {/* Limit Value */}\n            <div>\n              <label\n                htmlFor=\"limitValue\"\n                className=\"block text-sm font-medium text-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/QuotaTemplateEditPage.js

@@ -221,7 +221,7 @@ var g = () => {
 										id: "resetPeriod",
 										value: V,
 										onChange: (e) => H(e.target.value),
-										className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+										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)] scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary",
 										children: [
 											/* @__PURE__ */ f("option", {
 												value: r.NEVER,
@@ -278,7 +278,7 @@ var g = () => {
 									id: "limitType",
 									value: N,
 									onChange: (e) => P(e.target.value),
-									className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+									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)] scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary",
 									children: [
 										/* @__PURE__ */ f("option", {
 											value: "numeric",

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';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useQuotaTemplate, useQuotaTemplateMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader, ServerError } from '../../../shared/components';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\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      <PagePurpose>\n        Adjust this quota template&apos;s configuration. Changes apply wherever the template is\n        referenced, so review which plans and add-ons use it before changing its type or unit.\n      </PagePurpose>\n\n      <form onSubmit={handleSubmit} className=\"max-w-2xl space-y-6\">\n        {/* Error/Success Messages */}\n        {error && (\n          <div className=\"p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n          </div>\n        )}\n        {success && (\n          <div className=\"p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-success-text\">\n              Quota 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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"}
+{"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';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useQuotaTemplate, useQuotaTemplateMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader, ServerError } from '../../../shared/components';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\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      <PagePurpose>\n        Adjust this quota template&apos;s configuration. Changes apply wherever the template is\n        referenced, so review which plans and add-ons use it before changing its type or unit.\n      </PagePurpose>\n\n      <form onSubmit={handleSubmit} className=\"max-w-2xl space-y-6\">\n        {/* Error/Success Messages */}\n        {error && (\n          <div className=\"p-4 bg-status-error-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n          </div>\n        )}\n        {success && (\n          <div className=\"p-4 bg-status-success-bg-subtle border border-border-subtle rounded-lg\">\n            <p className=\"text-sm text-status-success-text\">\n              Quota 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)] scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary\"\n              >\n                <option value={QuotaResetPeriod.NEVER}>Never (one-time limit)</option>\n                <option value={QuotaResetPeriod.DAILY}>Daily (resets every day)</option>\n                <option value={QuotaResetPeriod.MONTHLY}>Monthly (resets every month)</option>\n              </select>\n              <p className=\"text-xs text-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)] scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary\"\n              >\n                <option value=\"numeric\">Numeric (count)</option>\n                <option value=\"storage\">Storage (bytes)</option>\n                <option value=\"duration\">Duration (seconds)</option>\n                <option value=\"percentage\">Percentage</option>\n              </select>\n            </div>\n\n            {/* Limit Value */}\n            <div>\n              <label\n                htmlFor=\"limitValue\"\n                className=\"block text-sm font-medium text-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/settings/pages/SettingsPage.js

@@ -393,7 +393,7 @@ var _e = () => {
 										id: "billing-account-currency",
 										value: F.currency,
 										onChange: (e) => J("currency", e.target.value),
-										className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
+										className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary",
 										children: [
 											/* @__PURE__ */ u("option", {
 												value: "USD",