@burdenoff/microfe-billing 2026.624.3 → 2026.625.2

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

@@ -1 +1 @@
-{"version":3,"file":"PlanCreatePage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanCreatePage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Create Page\n * Form to create a new plan\n */\n\nimport { useState, type FC, type FormEvent } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlanMutations, useQuotas } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, CurrencyPriceOverridesEditor, PageHeader } from '../../../shared/components';\nimport {\n  PlanDuration,\n  type CreatePlanInput,\n  type CurrencyPriceOverrideInput,\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 PlanCreatePage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { quotas, isLoading: isQuotasLoading } = useQuotas({ onlyActive: true });\n  const { createPlan, isCreating } = 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 [productId, setProductId] = useState('');\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  // Permission check\n  if (!permissions.canManagePlans) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.plans.noCreatePermission',\n          \"You don't have permission to create plans.\"\n        )}\n      />\n    );\n  }\n\n  // Loading state\n  if (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  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 (!productId.trim()) {\n      setError('Product ID 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: CreatePlanInput = {\n      name: name.trim(),\n      price: Number(price),\n      currency,\n      duration,\n      productId: productId.trim(),\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 createPlan(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo('/plans'), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to create plan');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={tr('billing.plans.createNewPlan', 'Create New Plan')}\n        description={tr('billing.plans.createNewPlanDesc', 'Set up a new pricing plan with quotas')}\n      />\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.createSuccess', 'Plan created 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-subtle 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              {/* Product ID */}\n              <div>\n                <label\n                  htmlFor=\"productId\"\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr('billing.plans.productId', 'Product ID')} *\n                </label>\n                <input\n                  id=\"productId\"\n                  type=\"text\"\n                  value={productId}\n                  onChange={(e) => setProductId(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.productIdPlaceholder', 'e.g., prod_abc123')}\n                  required\n                />\n                <p className=\"text-xs text-text-muted mt-1\">\n                  {tr('billing.plans.productIdDesc', 'The product this plan belongs to')}\n                </p>\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              {/* 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-subtle 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                disabled={quotas.length === 0}\n                className=\"px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors disabled:opacity-50\"\n              >\n                + Add Quota\n              </button>\n            </div>\n            <div className=\"p-4 space-y-3\">\n              {quotas.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr(\n                    'billing.plans.noQuotasAvailable',\n                    'No quotas available. Please create quotas first.'\n                  )}\n                </p>\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 limitValue = limits?.value ?? 0;\n                  const limitType = limits?.type ?? 'unknown';\n                  const totalValue = limitValue * allocation.quantity;\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                            <div className=\"text-text-muted\">\n                              <span className=\"capitalize\">Type: {limitType}</span>\n                              <span className=\"mx-2\">•</span>\n                              <span>\n                                Value per unit:{' '}\n                                <span className=\"font-medium text-text-primary\">\n                                  {limitValue.toLocaleString()}\n                                </span>\n                              </span>\n                            </div>\n                          </div>\n\n                          {/* Quantity & Total */}\n                          <div className=\"flex items-center gap-4\">\n                            <div className=\"flex items-center gap-2\">\n                              <label className=\"text-sm text-text-muted\">\n                                {tr('billing.plans.quantity', 'Quantity')}:\n                              </label>\n                              <input\n                                type=\"number\"\n                                min=\"1\"\n                                value={allocation.quantity}\n                                onChange={(e) =>\n                                  handleQuotaChange(index, 'quantity', e.target.value)\n                                }\n                                className=\"w-24 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                            <div className=\"flex items-center gap-2 text-sm\">\n                              <span className=\"text-text-muted\">=</span>\n                              <span className=\"font-semibold text-status-success-text\">\n                                {totalValue.toLocaleString()} total\n                              </span>\n                            </div>\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={isCreating || quotas.length === 0}\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.plans.creating', 'Creating...')\n              : tr('billing.plans.createPlanBtn', 'Create Plan')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\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":"PlanCreatePage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanCreatePage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Create Page\n * Form to create a new plan\n */\n\nimport { useState, type FC, type FormEvent } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlanMutations, useQuotas } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, CurrencyPriceOverridesEditor, PageHeader } from '../../../shared/components';\nimport {\n  PlanDuration,\n  type CreatePlanInput,\n  type CurrencyPriceOverrideInput,\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 PlanCreatePage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { quotas, isLoading: isQuotasLoading } = useQuotas({ onlyActive: true });\n  const { createPlan, isCreating } = 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 [productId, setProductId] = useState('');\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  // Permission check\n  if (!permissions.canManagePlans) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.plans.noCreatePermission',\n          \"You don't have permission to create plans.\"\n        )}\n      />\n    );\n  }\n\n  // Loading state\n  if (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  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 (!productId.trim()) {\n      setError('Product ID 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: CreatePlanInput = {\n      name: name.trim(),\n      price: Number(price),\n      currency,\n      duration,\n      productId: productId.trim(),\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 createPlan(input);\n      setSuccess(true);\n      // Navigate back after short delay\n      setTimeout(() => navigateTo('/plans'), 1500);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to create plan');\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={tr('billing.plans.createNewPlan', 'Create New Plan')}\n        description={tr('billing.plans.createNewPlanDesc', 'Set up a new pricing plan with quotas')}\n      />\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.createSuccess', 'Plan created 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              {/* Product ID */}\n              <div>\n                <label\n                  htmlFor=\"productId\"\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr('billing.plans.productId', 'Product ID')} *\n                </label>\n                <input\n                  id=\"productId\"\n                  type=\"text\"\n                  value={productId}\n                  onChange={(e) => setProductId(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.productIdPlaceholder', 'e.g., prod_abc123')}\n                  required\n                />\n                <p className=\"text-xs text-text-muted mt-1\">\n                  {tr('billing.plans.productIdDesc', 'The product this plan belongs to')}\n                </p>\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              {/* 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                disabled={quotas.length === 0}\n                className=\"px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors disabled:opacity-50\"\n              >\n                + Add Quota\n              </button>\n            </div>\n            <div className=\"p-4 space-y-3\">\n              {quotas.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr(\n                    'billing.plans.noQuotasAvailable',\n                    'No quotas available. Please create quotas first.'\n                  )}\n                </p>\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 limitValue = limits?.value ?? 0;\n                  const limitType = limits?.type ?? 'unknown';\n                  const totalValue = limitValue * allocation.quantity;\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                            <div className=\"text-text-muted\">\n                              <span className=\"capitalize\">Type: {limitType}</span>\n                              <span className=\"mx-2\">•</span>\n                              <span>\n                                Value per unit:{' '}\n                                <span className=\"font-medium text-text-primary\">\n                                  {limitValue.toLocaleString()}\n                                </span>\n                              </span>\n                            </div>\n                          </div>\n\n                          {/* Quantity & Total */}\n                          <div className=\"flex items-center gap-4\">\n                            <div className=\"flex items-center gap-2\">\n                              <label className=\"text-sm text-text-muted\">\n                                {tr('billing.plans.quantity', 'Quantity')}:\n                              </label>\n                              <input\n                                type=\"number\"\n                                min=\"1\"\n                                value={allocation.quantity}\n                                onChange={(e) =>\n                                  handleQuotaChange(index, 'quantity', e.target.value)\n                                }\n                                className=\"w-24 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                            <div className=\"flex items-center gap-2 text-sm\">\n                              <span className=\"text-text-muted\">=</span>\n                              <span className=\"font-semibold text-status-success-text\">\n                                {totalValue.toLocaleString()} total\n                              </span>\n                            </div>\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={isCreating || quotas.length === 0}\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.plans.creating', 'Creating...')\n              : tr('billing.plans.createPlanBtn', 'Create Plan')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\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/plans/pages/PlanDetailPage.js

@@ -154,7 +154,7 @@ var h = () => {
 			children: [/* @__PURE__ */ f("div", {
 				className: "lg:col-span-2 space-y-6",
 				children: [/* @__PURE__ */ f("div", {
-					className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+					className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
 					children: [/* @__PURE__ */ d("div", {
 						className: "p-6 border-b border-border-subtle bg-bg-sunken/30",
 						children: /* @__PURE__ */ d("h2", {
@@ -182,7 +182,7 @@ var h = () => {
 						})]
 					})]
 				}), /* @__PURE__ */ f("div", {
-					className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+					className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
 					children: [/* @__PURE__ */ d("div", {
 						className: "p-6 border-b border-border-subtle bg-bg-sunken/30",
 						children: /* @__PURE__ */ f("h2", {
@@ -246,7 +246,7 @@ var h = () => {
 			}), /* @__PURE__ */ f("div", {
 				className: "space-y-6",
 				children: [/* @__PURE__ */ f("div", {
-					className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+					className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
 					children: [/* @__PURE__ */ d("div", {
 						className: "p-6 border-b border-border-subtle bg-bg-sunken/30",
 						children: /* @__PURE__ */ d("h2", {
@@ -301,7 +301,7 @@ var h = () => {
 						]
 					})]
 				}), /* @__PURE__ */ f("div", {
-					className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
+					className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
 					children: [/* @__PURE__ */ d("div", {
 						className: "p-6 border-b border-border-subtle bg-bg-sunken/30",
 						children: /* @__PURE__ */ d("h2", {

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

@@ -1 +1 @@
-{"version":3,"file":"PlanDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanDetailPage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Detail Page\n * Displays detailed information about a single plan\n */\n\nimport { type FC, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlan, usePlanMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n} from '../../../shared/utils/format';\nimport { getPlanFeatureQuantity } from '../../../shared/utils/planFeatureQuantity';\nimport type { PlanFeature } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\n/**\n * Combined quota info for display\n */\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  quotaType: string;\n  limitType: string;\n  totalValue: number;\n  count: number;\n}\n\n/**\n * Combines duplicate quotas by quota ID and aggregates their values\n */\nfunction combineQuotas(features: PlanFeature[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n\n  for (const feature of features) {\n    if (!feature.quota) continue;\n\n    const quotaId = feature.quota.id;\n    const limits = feature.quota.limits as { type?: string; value?: number } | null;\n    const limitType = limits?.type ?? 'unknown';\n    const limitValue = getPlanFeatureQuantity(feature);\n\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n      existing.count += 1;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        quotaType: feature.quota.quotaType ?? '',\n        limitType,\n        totalValue: limitValue,\n        count: 1,\n      });\n    }\n  }\n\n  return Array.from(quotaMap.values());\n}\n\nexport const PlanDetailPage: 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, error, refetch } = usePlan(planId);\n  const { togglePlan, isToggling } = usePlanMutations();\n\n  // Combine duplicate quotas for cleaner display (must be before any returns)\n  const combinedQuotas = useMemo(() => combineQuotas(plan?.features || []), [plan?.features]);\n\n  // Permission check\n  if (!permissions.canViewPlans) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <div className=\"size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-text-muted\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.accessDenied.title', 'Access Denied')}\n          </h2>\n          <p className=\"text-sm text-text-muted max-w-sm\">\n            {tr(\n              'billing.plans.noViewPlanPermission',\n              \"You don't have permission to view this plan.\"\n            )}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"size-10 bg-bg-sunken animate-pulse rounded\" />\n          <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        </div>\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-6\">\n            <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-32 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-3/4 bg-bg-sunken animate-pulse rounded\" />\n            </div>\n          </div>\n          <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n            <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n            <div className=\"h-10 w-full bg-bg-sunken animate-pulse rounded\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error || !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          <div className=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-status-error-text\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.plans.planNotFound', 'Plan not found')}\n          </h2>\n          <p className=\"text-sm text-text-muted\">\n            {error?.message ||\n              tr(\n                'billing.plans.planNotFoundMessage',\n                'The plan you are looking for does not exist.'\n              )}\n          </p>\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 transition-colors\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const handleToggle = async () => {\n    if (!permissions.canManagePlans) return;\n    try {\n      await togglePlan(plan.id, !plan.isActive);\n      await refetch();\n    } catch (err) {\n      console.error('Failed to toggle plan:', err);\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"flex items-start gap-4\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"p-2 -ml-2 text-text-muted hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n          >\n            <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n          <div>\n            <div className=\"flex items-center gap-3\">\n              <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n                {plan.name}\n              </h1>\n              <span\n                className={`px-2 py-1 text-xs font-medium rounded ${\n                  plan.isActive\n                    ? 'bg-status-success-bg-subtle text-status-success-text'\n                    : 'bg-bg-sunken text-text-muted'\n                }`}\n              >\n                {plan.isActive ? 'Active' : 'Inactive'}\n              </span>\n            </div>\n            <p className=\"text-sm text-text-muted mt-1\">\n              {formatPlanDurationLabel(plan.duration)} billing plan\n            </p>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {permissions.canCreateSubscription && plan.isActive && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo(`/checkout/${plan.id}`)}\n              className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n            >\n              Subscribe to Plan\n            </button>\n          )}\n          {permissions.canManagePlans && (\n            <>\n              <button\n                type=\"button\"\n                onClick={() => navigateTo(`/plans/${plan.id}/edit`)}\n                className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n              >\n                Edit Plan\n              </button>\n              <button\n                type=\"button\"\n                onClick={handleToggle}\n                disabled={isToggling}\n                className={`px-4 py-2 text-sm font-medium border border-border-subtle rounded-md transition-colors ${\n                  plan.isActive\n                    ? 'text-status-error-text hover:bg-status-error-bg-subtle'\n                    : 'text-status-success-text hover:bg-status-success-bg-subtle'\n                }`}\n              >\n                {isToggling\n                  ? tr('billing.plans.processing', 'Processing...')\n                  : plan.isActive\n                    ? tr('billing.plans.deactivate', 'Deactivate')\n                    : tr('billing.plans.activate', 'Activate')}\n              </button>\n            </>\n          )}\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Pricing Card */}\n          <div className=\"border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.pricing', 'Pricing')}\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              <div className=\"flex items-baseline gap-1\">\n                <span className=\"text-4xl font-bold text-text-primary\">\n                  {formatCurrency(plan.price, plan.currency)}\n                </span>\n                <span className=\"text-lg text-text-muted\">\n                  / {formatPlanDuration(plan.duration)}\n                </span>\n              </div>\n              <p className=\"text-sm text-text-muted mt-2\">\n                {tr('billing.plans.billed', 'Billed')}{' '}\n                {plan.duration === 'monthly'\n                  ? tr('billing.plans.everyMonth', 'every month')\n                  : tr('billing.plans.annually', 'annually')}\n              </p>\n            </div>\n          </div>\n\n          {/* Features Card */}\n          <div className=\"border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.featuresAndQuotas', 'Features & Quotas')} (\n                {combinedQuotas.length})\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              {combinedQuotas.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.noFeatures', 'No features configured for this plan.')}\n                </p>\n              ) : (\n                <ul className=\"space-y-3\">\n                  {combinedQuotas.map((quota) => (\n                    <li\n                      key={quota.quotaId}\n                      className=\"flex items-start gap-3 p-3 rounded-lg bg-bg-sunken/30\"\n                    >\n                      <div className=\"size-8 rounded-full bg-status-success-bg-subtle flex items-center justify-center shrink-0\">\n                        <svg\n                          className=\"size-4 text-status-success-text\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M5 13l4 4L19 7\"\n                          />\n                        </svg>\n                      </div>\n                      <div className=\"flex-1\">\n                        <div className=\"flex items-center justify-between\">\n                          <p className=\"font-medium text-text-primary\">{quota.name}</p>\n                          <span className=\"font-semibold text-text-primary\">\n                            {quota.totalValue.toLocaleString()}\n                          </span>\n                        </div>\n                        <div className=\"flex items-center gap-2 mt-1\">\n                          <span className=\"text-sm text-text-muted capitalize\">\n                            Type: {quota.limitType}\n                          </span>\n                          {quota.quotaType && (\n                            <span className=\"px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-muted rounded\">\n                              {quota.quotaType}\n                            </span>\n                          )}\n                        </div>\n                      </div>\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Plan Details Card */}\n          <div className=\"border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.planDetails', 'Plan Details')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.planName', 'Plan Name')}\n                </p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">{plan.name}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">{tr('billing.plans.status', 'Status')}</p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  <span\n                    className={`inline-flex items-center px-2 py-0.5 text-xs font-medium rounded ${\n                      plan.isActive\n                        ? 'bg-status-success-bg-subtle text-status-success-text'\n                        : 'bg-bg-sunken text-text-muted'\n                    }`}\n                  >\n                    {plan.isActive ? 'Active' : 'Inactive'}\n                  </span>\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">{tr('billing.plans.price', 'Price')}</p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">\n                  {formatCurrency(plan.price, plan.currency)} / {formatPlanDuration(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.currency', 'Currency')}\n                </p>\n                <p className=\"text-sm text-text-primary mt-0.5\">{plan.currency}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.billingPeriod', 'Billing Period')}\n                </p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {formatPlanDurationLabel(plan.duration)}\n                </p>\n              </div>\n            </div>\n          </div>\n\n          {/* Quick Stats Card */}\n          <div className=\"border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.statistics', 'Statistics')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div className=\"flex items-center justify-between\">\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.uniqueQuotas', 'Unique Quotas')}\n                </p>\n                <p className=\"font-semibold text-text-primary\">{combinedQuotas.length}</p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAkCA,SAAS,EAAc,GAA0C;CAC/D,IAAM,oBAAW,IAAI,KAA4B;AAEjD,MAAK,IAAM,KAAW,GAAU;AAC9B,MAAI,CAAC,EAAQ,MAAO;EAEpB,IAAM,IAAU,EAAQ,MAAM,IAExB,IADS,EAAQ,MAAM,QACH,QAAQ,WAC5B,IAAa,EAAuB,EAAQ,EAE5C,IAAW,EAAS,IAAI,EAAQ;AACtC,EAAI,KACF,EAAS,cAAc,GACvB,EAAS,SAAS,KAElB,EAAS,IAAI,GAAS;GACpB;GACA,MAAM,EAAQ,MAAM,QAAQ;GAC5B,WAAW,EAAQ,MAAM,aAAa;GACtC;GACA,YAAY;GACZ,OAAO;GACR,CAAC;;AAIN,QAAO,MAAM,KAAK,EAAS,QAAQ,CAAC;;AAGtC,IAAa,UAA2B;CACtC,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,EAAE,cAAW,GAA+B,EAC5C,IAAa,GAAoB,EACjC,IAAc,GAAuB,EACrC,EAAE,SAAM,cAAW,UAAO,eAAY,EAAQ,EAAO,EACrD,EAAE,eAAY,kBAAe,GAAkB,EAG/C,IAAiB,QAAc,EAAc,GAAM,YAAY,EAAE,CAAC,EAAE,CAAC,GAAM,SAAS,CAAC;AAiH3F,QA9GK,EAAY,eAkCb,IAEA,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD,EAAK,WAAU,8CAA+C,CAAA,EAC9D,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,CAC3D;MACN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA;MAC/D,kBAAC,OAAD,EAAK,WAAU,iDAAkD,CAAA;MACjE,kBAAC,OAAD,EAAK,WAAU,gDAAiD,CAAA;MAC5D;;IACF,CAAA,EACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,EAC/D,kBAAC,OAAD,EAAK,WAAU,kDAAmD,CAAA,CAC9D;MACF;KACF;MAKN,KAAS,CAAC,IAEV,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,SAAQ;MACR,QAAO;gBAEP,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA;KACF,CAAA;IACN,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,8BAA8B,iBAAiB;KAChD,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eACV,GAAO,WACN,EACE,qCACA,+CACD;KACD,CAAA;IACJ,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAW,SAAS;KACnC,WAAU;eACX;KAEQ,CAAA;IACL;;EACF,CAAA,GAeR,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAW,SAAS;KACnC,WAAU;eAEV,kBAAC,OAAD;MAAK,WAAU;MAAS,MAAK;MAAO,SAAQ;MAAY,QAAO;gBAC7D,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA;KACC,CAAA,EACT,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAK;MACH,CAAA,EACL,kBAAC,QAAD;MACE,WAAW,yCACT,EAAK,WACD,yDACA;gBAGL,EAAK,WAAW,WAAW;MACvB,CAAA,CACH;QACN,kBAAC,KAAD;KAAG,WAAU;eAAb,CACG,EAAwB,EAAK,SAAS,EAAC,gBACtC;OACA,EAAA,CAAA,CACF;OAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAY,yBAAyB,EAAK,YACzC,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAW,aAAa,EAAK,KAAK;KACjD,WAAU;eACX;KAEQ,CAAA,EAEV,EAAY,kBACX,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAW,UAAU,EAAK,GAAG,OAAO;KACnD,WAAU;eACX;KAEQ,CAAA,EACT,kBAAC,UAAD;KACE,MAAK;KACL,SAvEO,YAAY;AAC1B,YAAY,eACjB,KAAI;AAEF,OADA,MAAM,EAAW,EAAK,IAAI,CAAC,EAAK,SAAS,EACzC,MAAM,GAAS;eACR,GAAK;AACZ,eAAQ,MAAM,0BAA0B,EAAI;;;KAkElC,UAAU;KACV,WAAW,0FACT,EAAK,WACD,2DACA;eAGL,IACG,EAAG,4BAA4B,gBAAgB,GAC/C,EAAK,WACH,EAAG,4BAA4B,aAAa,GAC5C,EAAG,0BAA0B,WAAW;KACvC,CAAA,CACR,EAAA,CAAA,CAED;MACF;MAEN,kBAAC,OAAD;GAAK,WAAU;aAAf,CAEE,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAG,yBAAyB,UAAU;OACpC,CAAA;MACD,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAe,EAAK,OAAO,EAAK,SAAS;QACrC,CAAA,EACP,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CAA0C,MACrC,EAAmB,EAAK,SAAS,CAC/B;UACH;UACN,kBAAC,KAAD;OAAG,WAAU;iBAAb;QACG,EAAG,wBAAwB,SAAS;QAAE;QACtC,EAAK,aAAa,YACf,EAAG,4BAA4B,cAAc,GAC7C,EAAG,0BAA0B,WAAW;QAC1C;SACA;QACF;QAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,MAAD;OAAI,WAAU;iBAAd;QACG,EAAG,mCAAmC,oBAAoB;QAAC;QAC3D,EAAe;QAAO;QACpB;;MACD,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAe,WAAW,IACzB,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAG,4BAA4B,wCAAwC;OACtE,CAAA,GAEJ,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAe,KAAK,MACnB,kBAAC,MAAD;QAEE,WAAU;kBAFZ,CAIE,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,OAAD;UACE,WAAU;UACV,MAAK;UACL,SAAQ;UACR,QAAO;oBAEP,kBAAC,QAAD;WACE,eAAc;WACd,gBAAe;WACf,aAAa;WACb,GAAE;WACF,CAAA;UACE,CAAA;SACF,CAAA,EACN,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAiC,EAAM;WAAS,CAAA,EAC7D,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAM,WAAW,gBAAgB;WAC7B,CAAA,CACH;aACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAhB,CAAqD,UAC5C,EAAM,UACR;cACN,EAAM,aACL,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAM;WACF,CAAA,CAEL;YACF;WACH;UApCE,EAAM,QAoCR,CACL;OACC,CAAA;MAEH,CAAA,CACF;OACF;OAGN,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAG,6BAA6B,eAAe;OAC7C,CAAA;MACD,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAG,0BAA0B,YAAY;QACxC,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAAgD,EAAK;QAAS,CAAA,CACvE,EAAA,CAAA;OACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAA2B,EAAG,wBAAwB,SAAS;QAAK,CAAA,EACjF,kBAAC,KAAD;QAAG,WAAU;kBACX,kBAAC,QAAD;SACE,WAAW,oEACT,EAAK,WACD,yDACA;mBAGL,EAAK,WAAW,WAAW;SACvB,CAAA;QACL,CAAA,CACA,EAAA,CAAA;OACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAA2B,EAAG,uBAAuB,QAAQ;QAAK,CAAA,EAC/E,kBAAC,KAAD;QAAG,WAAU;kBAAb;SACG,EAAe,EAAK,OAAO,EAAK,SAAS;SAAC;SAAI,EAAmB,EAAK,SAAS;SAC9E;UACA,EAAA,CAAA;OACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAG,0BAA0B,WAAW;QACvC,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAAoC,EAAK;QAAa,CAAA,CAC/D,EAAA,CAAA;OACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAG,+BAA+B,iBAAiB;QAClD,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAwB,EAAK,SAAS;QACrC,CAAA,CACA,EAAA,CAAA;OACF;QACF;QAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAG,4BAA4B,aAAa;OAC1C,CAAA;MACD,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAG,8BAA8B,gBAAgB;QAChD,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAAmC,EAAe;QAAW,CAAA,CACtE;;MACF,CAAA,CACF;OACF;MACF;KACF;MA5VJ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,SAAQ;MACR,QAAO;gBAEP,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA;KACF,CAAA;IACN,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,8BAA8B,gBAAgB;KAC/C,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,sCACA,+CACD;KACC,CAAA;IACA;;EACF,CAAA"}
+{"version":3,"file":"PlanDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanDetailPage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Detail Page\n * Displays detailed information about a single plan\n */\n\nimport { type FC, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlan, usePlanMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n} from '../../../shared/utils/format';\nimport { getPlanFeatureQuantity } from '../../../shared/utils/planFeatureQuantity';\nimport type { PlanFeature } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\n/**\n * Combined quota info for display\n */\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  quotaType: string;\n  limitType: string;\n  totalValue: number;\n  count: number;\n}\n\n/**\n * Combines duplicate quotas by quota ID and aggregates their values\n */\nfunction combineQuotas(features: PlanFeature[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n\n  for (const feature of features) {\n    if (!feature.quota) continue;\n\n    const quotaId = feature.quota.id;\n    const limits = feature.quota.limits as { type?: string; value?: number } | null;\n    const limitType = limits?.type ?? 'unknown';\n    const limitValue = getPlanFeatureQuantity(feature);\n\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n      existing.count += 1;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        quotaType: feature.quota.quotaType ?? '',\n        limitType,\n        totalValue: limitValue,\n        count: 1,\n      });\n    }\n  }\n\n  return Array.from(quotaMap.values());\n}\n\nexport const PlanDetailPage: 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, error, refetch } = usePlan(planId);\n  const { togglePlan, isToggling } = usePlanMutations();\n\n  // Combine duplicate quotas for cleaner display (must be before any returns)\n  const combinedQuotas = useMemo(() => combineQuotas(plan?.features || []), [plan?.features]);\n\n  // Permission check\n  if (!permissions.canViewPlans) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <div className=\"size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-text-muted\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.accessDenied.title', 'Access Denied')}\n          </h2>\n          <p className=\"text-sm text-text-muted max-w-sm\">\n            {tr(\n              'billing.plans.noViewPlanPermission',\n              \"You don't have permission to view this plan.\"\n            )}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"size-10 bg-bg-sunken animate-pulse rounded\" />\n          <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        </div>\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-6\">\n            <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-32 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-3/4 bg-bg-sunken animate-pulse rounded\" />\n            </div>\n          </div>\n          <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n            <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n            <div className=\"h-10 w-full bg-bg-sunken animate-pulse rounded\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error || !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          <div className=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-status-error-text\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.plans.planNotFound', 'Plan not found')}\n          </h2>\n          <p className=\"text-sm text-text-muted\">\n            {error?.message ||\n              tr(\n                'billing.plans.planNotFoundMessage',\n                'The plan you are looking for does not exist.'\n              )}\n          </p>\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 transition-colors\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const handleToggle = async () => {\n    if (!permissions.canManagePlans) return;\n    try {\n      await togglePlan(plan.id, !plan.isActive);\n      await refetch();\n    } catch (err) {\n      console.error('Failed to toggle plan:', err);\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"flex items-start gap-4\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"p-2 -ml-2 text-text-muted hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n          >\n            <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n          <div>\n            <div className=\"flex items-center gap-3\">\n              <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n                {plan.name}\n              </h1>\n              <span\n                className={`px-2 py-1 text-xs font-medium rounded ${\n                  plan.isActive\n                    ? 'bg-status-success-bg-subtle text-status-success-text'\n                    : 'bg-bg-sunken text-text-muted'\n                }`}\n              >\n                {plan.isActive ? 'Active' : 'Inactive'}\n              </span>\n            </div>\n            <p className=\"text-sm text-text-muted mt-1\">\n              {formatPlanDurationLabel(plan.duration)} billing plan\n            </p>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {permissions.canCreateSubscription && plan.isActive && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo(`/checkout/${plan.id}`)}\n              className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n            >\n              Subscribe to Plan\n            </button>\n          )}\n          {permissions.canManagePlans && (\n            <>\n              <button\n                type=\"button\"\n                onClick={() => navigateTo(`/plans/${plan.id}/edit`)}\n                className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n              >\n                Edit Plan\n              </button>\n              <button\n                type=\"button\"\n                onClick={handleToggle}\n                disabled={isToggling}\n                className={`px-4 py-2 text-sm font-medium border border-border-subtle rounded-md transition-colors ${\n                  plan.isActive\n                    ? 'text-status-error-text hover:bg-status-error-bg-subtle'\n                    : 'text-status-success-text hover:bg-status-success-bg-subtle'\n                }`}\n              >\n                {isToggling\n                  ? tr('billing.plans.processing', 'Processing...')\n                  : plan.isActive\n                    ? tr('billing.plans.deactivate', 'Deactivate')\n                    : tr('billing.plans.activate', 'Activate')}\n              </button>\n            </>\n          )}\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Pricing Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.pricing', 'Pricing')}\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              <div className=\"flex items-baseline gap-1\">\n                <span className=\"text-4xl font-bold text-text-primary\">\n                  {formatCurrency(plan.price, plan.currency)}\n                </span>\n                <span className=\"text-lg text-text-muted\">\n                  / {formatPlanDuration(plan.duration)}\n                </span>\n              </div>\n              <p className=\"text-sm text-text-muted mt-2\">\n                {tr('billing.plans.billed', 'Billed')}{' '}\n                {plan.duration === 'monthly'\n                  ? tr('billing.plans.everyMonth', 'every month')\n                  : tr('billing.plans.annually', 'annually')}\n              </p>\n            </div>\n          </div>\n\n          {/* Features Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.featuresAndQuotas', 'Features & Quotas')} (\n                {combinedQuotas.length})\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              {combinedQuotas.length === 0 ? (\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.noFeatures', 'No features configured for this plan.')}\n                </p>\n              ) : (\n                <ul className=\"space-y-3\">\n                  {combinedQuotas.map((quota) => (\n                    <li\n                      key={quota.quotaId}\n                      className=\"flex items-start gap-3 p-3 rounded-lg bg-bg-sunken/30\"\n                    >\n                      <div className=\"size-8 rounded-full bg-status-success-bg-subtle flex items-center justify-center shrink-0\">\n                        <svg\n                          className=\"size-4 text-status-success-text\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M5 13l4 4L19 7\"\n                          />\n                        </svg>\n                      </div>\n                      <div className=\"flex-1\">\n                        <div className=\"flex items-center justify-between\">\n                          <p className=\"font-medium text-text-primary\">{quota.name}</p>\n                          <span className=\"font-semibold text-text-primary\">\n                            {quota.totalValue.toLocaleString()}\n                          </span>\n                        </div>\n                        <div className=\"flex items-center gap-2 mt-1\">\n                          <span className=\"text-sm text-text-muted capitalize\">\n                            Type: {quota.limitType}\n                          </span>\n                          {quota.quotaType && (\n                            <span className=\"px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-muted rounded\">\n                              {quota.quotaType}\n                            </span>\n                          )}\n                        </div>\n                      </div>\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Plan Details Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.planDetails', 'Plan Details')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.planName', 'Plan Name')}\n                </p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">{plan.name}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">{tr('billing.plans.status', 'Status')}</p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  <span\n                    className={`inline-flex items-center px-2 py-0.5 text-xs font-medium rounded ${\n                      plan.isActive\n                        ? 'bg-status-success-bg-subtle text-status-success-text'\n                        : 'bg-bg-sunken text-text-muted'\n                    }`}\n                  >\n                    {plan.isActive ? 'Active' : 'Inactive'}\n                  </span>\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">{tr('billing.plans.price', 'Price')}</p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">\n                  {formatCurrency(plan.price, plan.currency)} / {formatPlanDuration(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.currency', 'Currency')}\n                </p>\n                <p className=\"text-sm text-text-primary mt-0.5\">{plan.currency}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.billingPeriod', 'Billing Period')}\n                </p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {formatPlanDurationLabel(plan.duration)}\n                </p>\n              </div>\n            </div>\n          </div>\n\n          {/* Quick Stats Card */}\n          <div className=\"border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken/30\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.statistics', 'Statistics')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div className=\"flex items-center justify-between\">\n                <p className=\"text-sm text-text-muted\">\n                  {tr('billing.plans.uniqueQuotas', 'Unique Quotas')}\n                </p>\n                <p className=\"font-semibold text-text-primary\">{combinedQuotas.length}</p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -155,7 +155,7 @@ var y = () => {
 				/* @__PURE__ */ _("div", {
 					className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
 					children: [/* @__PURE__ */ _("div", {
-						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
+						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
 						children: [/* @__PURE__ */ g("div", {
 							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
 							children: /* @__PURE__ */ g("h2", {
@@ -290,7 +290,7 @@ var y = () => {
 							]
 						})]
 					}), /* @__PURE__ */ _("div", {
-						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
+						className: "border border-border-seam rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
 						children: [/* @__PURE__ */ _("div", {
 							className: "p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between",
 							children: [/* @__PURE__ */ g("h2", {

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-dom';\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 { 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      <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-subtle 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-subtle 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 limitValue = limits?.value ?? 0;\n                  const limitType = limits?.type ?? 'unknown';\n                  const totalValue = limitValue * allocation.quantity;\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                            <div className=\"text-text-muted\">\n                              <span className=\"capitalize\">Type: {limitType}</span>\n                              <span className=\"mx-2\">•</span>\n                              <span>\n                                Value per unit:{' '}\n                                <span className=\"font-medium text-text-primary\">\n                                  {limitValue.toLocaleString()}\n                                </span>\n                              </span>\n                            </div>\n                          </div>\n\n                          {/* Quantity & Total */}\n                          <div className=\"flex items-center gap-4\">\n                            <div className=\"flex items-center gap-2\">\n                              <label className=\"text-sm text-text-muted\">\n                                {tr('billing.plans.quantity', 'Quantity')}:\n                              </label>\n                              <input\n                                type=\"number\"\n                                min=\"1\"\n                                value={allocation.quantity}\n                                onChange={(e) =>\n                                  handleQuotaChange(index, 'quantity', e.target.value)\n                                }\n                                className=\"w-24 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                            <div className=\"flex items-center gap-2 text-sm\">\n                              <span className=\"text-text-muted\">=</span>\n                              <span className=\"font-semibold text-status-success-text\">\n                                {totalValue.toLocaleString()} total\n                              </span>\n                            </div>\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-dom';\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 { 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      <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 limitValue = limits?.value ?? 0;\n                  const limitType = limits?.type ?? 'unknown';\n                  const totalValue = limitValue * allocation.quantity;\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                            <div className=\"text-text-muted\">\n                              <span className=\"capitalize\">Type: {limitType}</span>\n                              <span className=\"mx-2\">•</span>\n                              <span>\n                                Value per unit:{' '}\n                                <span className=\"font-medium text-text-primary\">\n                                  {limitValue.toLocaleString()}\n                                </span>\n                              </span>\n                            </div>\n                          </div>\n\n                          {/* Quantity & Total */}\n                          <div className=\"flex items-center gap-4\">\n                            <div className=\"flex items-center gap-2\">\n                              <label className=\"text-sm text-text-muted\">\n                                {tr('billing.plans.quantity', 'Quantity')}:\n                              </label>\n                              <input\n                                type=\"number\"\n                                min=\"1\"\n                                value={allocation.quantity}\n                                onChange={(e) =>\n                                  handleQuotaChange(index, 'quantity', e.target.value)\n                                }\n                                className=\"w-24 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                            <div className=\"flex items-center gap-2 text-sm\">\n                              <span className=\"text-text-muted\">=</span>\n                              <span className=\"font-semibold text-status-success-text\">\n                                {totalValue.toLocaleString()} total\n                              </span>\n                            </div>\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/plans/pages/PlansBrowsePage.js

@@ -53,7 +53,7 @@ var w = () => {
 				2,
 				3
 			].map((e) => /* @__PURE__ */ b("div", {
-				className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 p-5 space-y-4",
+				className: "border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 p-5 space-y-4",
 				children: [
 					/* @__PURE__ */ y("div", { className: "h-6 w-24 bg-bg-sunken animate-pulse rounded" }),
 					/* @__PURE__ */ y("div", { className: "h-8 w-32 bg-bg-sunken animate-pulse rounded" }),
@@ -136,7 +136,7 @@ var w = () => {
 				})]
 			}),
 			S.length === 0 ? /* @__PURE__ */ b("div", {
-				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border-subtle rounded-card",
+				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border-seam rounded-card",
 				children: [
 					/* @__PURE__ */ y("div", {
 						className: "size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4",
@@ -363,7 +363,7 @@ var w = () => {
 					onClick: o,
 					className: "group inline-flex w-full items-center justify-center gap-2 rounded-button bg-action-primary-bg px-4 py-2.5 text-sm font-semibold text-action-primary-text shadow-elevation-1 transition-colors duration-200 hover:bg-action-primary-bgHover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
 					children: ["Subscribe", /* @__PURE__ */ y(g, {
-						className: "size-4 transition-transform duration-200 group-hover:translate-x-0.5",
+						className: "size-4 transition-transform duration-200",
 						"aria-hidden": "true"
 					})]
 				}), /* @__PURE__ */ y("button", {
@@ -378,7 +378,7 @@ var w = () => {
 }, k = ({ plan: e, onView: t, onSubscribe: n }) => {
 	let a = C(e.features || []), o = u();
 	return /* @__PURE__ */ b("div", {
-		className: "flex items-center gap-4 p-5 border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 transition-all duration-200 hover:border-border-strong hover:shadow-elevation-2",
+		className: "flex items-center gap-4 p-5 border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 transition-all duration-200 hover:border-border-strong hover:shadow-elevation-2",
 		children: [
 			/* @__PURE__ */ y("div", {
 				className: "size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center shrink-0",