@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

package/dist/billing/modules/addons/pages/AddonsListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddonsListPage.js","names":[],"sources":["../../../../../src/billing/modules/addons/pages/AddonsListPage.tsx"],"sourcesContent":["/**\n * Addons Module - Addons List Page\n * Displays all available addons with cart functionality\n */\n\nimport { useState, useMemo, type FC } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { ShoppingCart, Plus, Minus, Trash2, X } from 'lucide-react';\nimport { useAddons, useAddonMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useAddonCartStore } from '../store/addonCartStore';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n} from '../../../shared/utils/format';\nimport type { Addon, PlanDuration, SubscriptionFeatures } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useDefaultBillingCurrency } from '../../../hooks/useDefaultBillingCurrency';\nimport { getPlanFeatureQuantity } from '../../../shared/utils/planFeatureQuantity';\n\ntype ViewMode = 'grid' | 'list';\n\n/**\n * Combined quota info for display\n */\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  totalValue: number;\n}\n\n/**\n * Combines duplicate quotas by quota ID and aggregates their values\n */\nfunction combineQuotas(features: SubscriptionFeatures[]): 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 limitValue = getPlanFeatureQuantity(feature);\n\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        totalValue: limitValue,\n      });\n    }\n  }\n\n  return Array.from(quotaMap.values());\n}\n\n/**\n * Get the display price and currency for an addon\n * Uses currencyPrices if available, otherwise falls back to base price\n */\nfunction getAddonDisplayPrice(\n  addon: Addon,\n  displayCurrency: string = 'USD'\n): { price: number; currency: string } {\n  // If currencyPrices exists and has the requested currency, use it\n  if (addon.currencyPrices && typeof addon.currencyPrices === 'object') {\n    const currencyPricesObj = addon.currencyPrices as Record<string, number>;\n    if (currencyPricesObj[displayCurrency]) {\n      return {\n        price: currencyPricesObj[displayCurrency],\n        currency: displayCurrency,\n      };\n    }\n  }\n\n  // Fallback to base USD price\n  return {\n    price: addon.price,\n    currency: addon.currency || 'USD',\n  };\n}\n\nexport const AddonsListPage: 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 { addons, isLoading, error, refetch } = useAddons();\n  const { toggleAddon, isToggling } = useAddonMutations();\n  const { addToCart, removeFromCart, updateQuantity, isInCart, getCartItem } = useAddonCartStore();\n\n  const [viewMode, setViewMode] = useState<ViewMode>('grid');\n  const [showInactive, setShowInactive] = useState(false);\n  const [billingInterval, setBillingInterval] = useState<PlanDuration | 'all'>('all');\n  const displayCurrency = useDefaultBillingCurrency();\n\n  // Permission check\n  if (!permissions.canViewAddons) {\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-muted flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-muted-foreground\"\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-foreground\">\n            {tr('billing.accessDenied.title', 'Access Denied')}\n          </h2>\n          <p className=\"text-sm text-muted-foreground max-w-sm\">\n            {tr('billing.addons.noViewPermission', \"You don't have permission to view addons.\")}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Filter addons\n  const filteredAddons = addons.filter((addon) => {\n    if (!showInactive && !addon.isActive) return false;\n    if (billingInterval !== 'all' && addon.duration !== billingInterval) return false;\n    return true;\n  });\n\n  const handleToggleAddon = async (addon: Addon) => {\n    if (!permissions.canManageAddons) return;\n    try {\n      await toggleAddon(addon.id, !addon.isActive);\n      await refetch();\n    } catch (err) {\n      console.error('Failed to toggle addon:', err);\n    }\n  };\n\n  const handleViewAddon = (addon: Addon) => {\n    navigateTo(`/addons/${addon.id}`);\n  };\n\n  const handleEditAddon = (addon: Addon) => {\n    navigateTo(`/addons/${addon.id}/edit`);\n  };\n\n  // Loading state\n  if (isLoading && addons.length === 0) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-muted animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"border border-border rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-24 bg-muted animate-pulse rounded\" />\n              <div className=\"h-8 w-32 bg-muted animate-pulse rounded\" />\n              <div className=\"space-y-2\">\n                {[1, 2, 3].map((j) => (\n                  <div key={j} className=\"h-4 w-full bg-muted animate-pulse rounded\" />\n                ))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <div className=\"size-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-destructive\"\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-foreground\">\n            {tr('billing.addons.failedToLoad', 'Failed to load addons')}\n          </h2>\n          <p className=\"text-sm text-muted-foreground\">{error.message}</p>\n          <button\n            type=\"button\"\n            onClick={() => refetch()}\n            className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n          >\n            Try Again\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-bold text-foreground\">\n            {tr('billing.addons.title', 'Addons')}\n          </h1>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {tr('billing.addons.subtitle', 'Enhance your subscription with additional features')}\n          </p>\n        </div>\n\n        {permissions.canManageAddons && (\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/addons/new')}\n            className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 4v16m8-8H4\"\n              />\n            </svg>\n            Create Addon\n          </button>\n        )}\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border\">\n        {/* Billing Interval Toggle */}\n        <div className=\"inline-flex rounded-lg border border-border p-1 bg-muted/50\">\n          <button\n            type=\"button\"\n            onClick={() => setBillingInterval('all')}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              billingInterval === 'all'\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n          >\n            All\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setBillingInterval('monthly' as PlanDuration)}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              billingInterval === 'monthly'\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n          >\n            Monthly\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setBillingInterval('yearly' as PlanDuration)}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              billingInterval === 'yearly'\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n          >\n            Yearly\n          </button>\n        </div>\n\n        {/* Show Inactive Toggle */}\n        {permissions.canManageAddons && (\n          <label className=\"flex items-center gap-2 text-sm cursor-pointer\">\n            <input\n              type=\"checkbox\"\n              checked={showInactive}\n              onChange={(e) => setShowInactive(e.target.checked)}\n              className=\"size-4 rounded border-border text-primary focus:ring-primary\"\n            />\n            <span className=\"text-muted-foreground\">\n              {tr('billing.addons.showInactive', 'Show inactive addons')}\n            </span>\n          </label>\n        )}\n\n        {/* View Mode Toggle */}\n        <div className=\"ml-auto inline-flex rounded-lg border border-border p-1 bg-muted/50\">\n          <button\n            type=\"button\"\n            onClick={() => setViewMode('grid')}\n            className={`p-1.5 rounded-md transition-colors ${\n              viewMode === 'grid'\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n            title=\"Grid view\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\"\n              />\n            </svg>\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setViewMode('list')}\n            className={`p-1.5 rounded-md transition-colors ${\n              viewMode === 'list'\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n            title=\"List view\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M4 6h16M4 12h16M4 18h16\"\n              />\n            </svg>\n          </button>\n        </div>\n      </div>\n\n      {/* Addons Grid/List */}\n      {filteredAddons.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg\">\n          <div className=\"size-12 rounded-full bg-muted flex items-center justify-center mb-4\">\n            <svg\n              className=\"size-6 text-muted-foreground\"\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=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-foreground\">\n            {tr('billing.addons.noAddonsFound', 'No addons found')}\n          </h3>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {showInactive\n              ? tr('billing.addons.noAddonsFiltered', 'No addons match your current filters.')\n              : tr('billing.addons.noActiveAddons', 'There are no active addons available.')}\n          </p>\n          {permissions.canManageAddons && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/addons/new')}\n              className=\"mt-4 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n            >\n              {tr('billing.addons.createFirstAddon', 'Create your first addon')}\n            </button>\n          )}\n        </div>\n      ) : viewMode === 'grid' ? (\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n          {filteredAddons.map((addon) => {\n            const cartItem = getCartItem(addon.id);\n            return (\n              <AddonCard\n                key={addon.id}\n                addon={addon}\n                onView={handleViewAddon}\n                onEdit={handleEditAddon}\n                onToggle={handleToggleAddon}\n                canManage={permissions.canManageAddons}\n                isToggling={isToggling}\n                isInCart={isInCart(addon.id)}\n                cartQuantity={cartItem?.quantity || 0}\n                onAddToCart={addToCart}\n                onUpdateQuantity={updateQuantity}\n                onRemoveFromCart={removeFromCart}\n                displayCurrency={displayCurrency}\n              />\n            );\n          })}\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {filteredAddons.map((addon) => {\n            const cartItem = getCartItem(addon.id);\n            return (\n              <AddonRow\n                key={addon.id}\n                addon={addon}\n                onView={handleViewAddon}\n                onEdit={handleEditAddon}\n                onToggle={handleToggleAddon}\n                canManage={permissions.canManageAddons}\n                isToggling={isToggling}\n                isInCart={isInCart(addon.id)}\n                cartQuantity={cartItem?.quantity || 0}\n                onAddToCart={addToCart}\n                onUpdateQuantity={updateQuantity}\n                onRemoveFromCart={removeFromCart}\n                displayCurrency={displayCurrency}\n              />\n            );\n          })}\n        </div>\n      )}\n\n      {/* Floating Cart Drawer */}\n      <FloatingCartDrawer displayCurrency={displayCurrency} />\n    </div>\n  );\n};\n\n// ============================================================================\n// Addon Card Component\n// ============================================================================\n\ninterface AddonCardProps {\n  addon: Addon;\n  onView: (addon: Addon) => void;\n  onEdit: (addon: Addon) => void;\n  onToggle: (addon: Addon) => void;\n  canManage: boolean;\n  isToggling: boolean;\n  isInCart: boolean;\n  cartQuantity: number;\n  onAddToCart: (addon: Addon) => void;\n  onUpdateQuantity: (addonId: string, quantity: number) => void;\n  onRemoveFromCart: (addonId: string) => void;\n  displayCurrency: string;\n}\n\nconst AddonCard: FC<AddonCardProps> = ({\n  addon,\n  onView,\n  onEdit,\n  onToggle,\n  canManage,\n  displayCurrency,\n  isToggling,\n  isInCart,\n  cartQuantity,\n  onAddToCart,\n  onUpdateQuantity,\n  onRemoveFromCart,\n}) => {\n  const combinedQuotas = useMemo(() => {\n    const features = addon.features || [];\n    return combineQuotas(features);\n  }, [addon.features]);\n\n  return (\n    <div\n      className={`relative border rounded-lg p-6 transition-all hover:shadow-md flex flex-col h-full ${\n        addon.isActive\n          ? isInCart\n            ? 'border-primary bg-primary/5'\n            : 'border-border bg-card'\n          : 'border-dashed border-muted-foreground/30 bg-muted/30'\n      }`}\n    >\n      {/* Status Badge */}\n      {!addon.isActive && (\n        <span className=\"absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-muted text-muted-foreground rounded\">\n          Inactive\n        </span>\n      )}\n\n      {/* In Cart Badge */}\n      {isInCart && addon.isActive && (\n        <span className=\"absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-primary text-primary-foreground rounded\">\n          In Cart ({cartQuantity})\n        </span>\n      )}\n\n      {/* Addon Icon */}\n      <div className=\"size-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4\">\n        <svg className=\"size-5 text-primary\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\"\n          />\n        </svg>\n      </div>\n\n      {/* Addon Name */}\n      <div className=\"mb-4\">\n        <h3 className=\"text-lg font-bold text-foreground\">{addon.name}</h3>\n        <span className=\"text-sm text-muted-foreground\">\n          {formatPlanDurationLabel(addon.duration)}\n        </span>\n      </div>\n\n      {/* Price */}\n      <div className=\"flex items-baseline gap-1 mb-4\">\n        <span className=\"text-2xl font-bold text-foreground\">\n          {(() => {\n            const { price, currency } = getAddonDisplayPrice(addon, displayCurrency);\n            return formatCurrency(price, currency);\n          })()}\n        </span>\n        <span className=\"text-muted-foreground text-sm\">\n          / {formatPlanDuration(addon.duration)}\n        </span>\n      </div>\n\n      {/* Combined Quotas */}\n      {combinedQuotas.length > 0 && (\n        <ul className=\"space-y-2 mb-4\">\n          {combinedQuotas.slice(0, 4).map((quota) => (\n            <li key={quota.quotaId} className=\"flex items-center justify-between text-sm\">\n              <div className=\"flex items-center gap-2\">\n                <svg\n                  className=\"size-4 text-status-success-text shrink-0\"\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                <span className=\"text-foreground\">{quota.name}</span>\n              </div>\n              <span className=\"font-medium text-foreground\">\n                {quota.totalValue.toLocaleString()}\n              </span>\n            </li>\n          ))}\n          {combinedQuotas.length > 4 && (\n            <li className=\"text-sm text-muted-foreground pl-6\">\n              +{combinedQuotas.length - 4} more quotas\n            </li>\n          )}\n        </ul>\n      )}\n\n      {/* Actions - pushed to bottom with mt-auto */}\n      <div className=\"space-y-2 pt-4 border-t border-border mt-auto\">\n        {/* Add to Cart / Quantity Controls */}\n        {addon.isActive &&\n          (isInCart ? (\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex items-center gap-1\">\n                <button\n                  type=\"button\"\n                  onClick={() => onUpdateQuantity(addon.id, cartQuantity - 1)}\n                  className=\"p-1.5 rounded border border-border hover:bg-muted transition-colors\"\n                >\n                  <Minus className=\"size-4\" />\n                </button>\n                <span className=\"w-10 text-center font-medium\">{cartQuantity}</span>\n                <button\n                  type=\"button\"\n                  onClick={() => onUpdateQuantity(addon.id, cartQuantity + 1)}\n                  className=\"p-1.5 rounded border border-border hover:bg-muted transition-colors\"\n                >\n                  <Plus className=\"size-4\" />\n                </button>\n              </div>\n              <button\n                type=\"button\"\n                onClick={() => onRemoveFromCart(addon.id)}\n                className=\"p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors\"\n                title=\"Remove from cart\"\n              >\n                <Trash2 className=\"size-4\" />\n              </button>\n            </div>\n          ) : (\n            <button\n              type=\"button\"\n              onClick={() => onAddToCart(addon)}\n              className=\"w-full px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors flex items-center justify-center gap-2\"\n            >\n              <ShoppingCart className=\"size-4\" />\n              Add to Cart\n            </button>\n          ))}\n\n        <button\n          type=\"button\"\n          onClick={() => onView(addon)}\n          className=\"w-full px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n        >\n          View Details\n        </button>\n\n        {canManage && (\n          <div className=\"flex gap-2\">\n            <button\n              type=\"button\"\n              onClick={() => onEdit(addon)}\n              className=\"flex-1 px-3 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n            >\n              Edit\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onToggle(addon)}\n              disabled={isToggling}\n              className={`px-3 py-2 text-sm font-medium border border-border rounded-md transition-colors ${\n                addon.isActive\n                  ? 'text-destructive hover:bg-destructive/10'\n                  : 'text-status-success-text hover:bg-status-success-bg-subtle'\n              }`}\n            >\n              {addon.isActive ? 'Deactivate' : 'Activate'}\n            </button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\n// ============================================================================\n// Addon Row Component (List View)\n// ============================================================================\n\ninterface AddonRowProps {\n  addon: Addon;\n  onView: (addon: Addon) => void;\n  onEdit: (addon: Addon) => void;\n  onToggle: (addon: Addon) => void;\n  canManage: boolean;\n  isToggling: boolean;\n  isInCart: boolean;\n  cartQuantity: number;\n  onAddToCart: (addon: Addon) => void;\n  onUpdateQuantity: (addonId: string, quantity: number) => void;\n  onRemoveFromCart: (addonId: string) => void;\n  displayCurrency: string;\n}\n\nconst AddonRow: FC<AddonRowProps> = ({\n  addon,\n  onView,\n  onEdit,\n  onToggle,\n  canManage,\n  displayCurrency,\n  isToggling,\n  isInCart,\n  cartQuantity,\n  onAddToCart,\n  onUpdateQuantity,\n  onRemoveFromCart,\n}) => {\n  const combinedQuotas = useMemo(() => {\n    const features = addon.features || [];\n    return combineQuotas(features);\n  }, [addon.features]);\n\n  return (\n    <div\n      className={`flex items-center gap-4 p-4 border rounded-lg transition-all hover:shadow-sm ${\n        addon.isActive\n          ? isInCart\n            ? 'border-primary bg-primary/5'\n            : 'border-border bg-card'\n          : 'border-dashed border-muted-foreground/30 bg-muted/30'\n      }`}\n    >\n      {/* Addon Icon */}\n      <div className=\"size-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0\">\n        <svg className=\"size-5 text-primary\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\"\n          />\n        </svg>\n      </div>\n\n      {/* Addon Info */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2\">\n          <h3 className=\"font-semibold text-foreground truncate\">{addon.name}</h3>\n          {!addon.isActive && (\n            <span className=\"px-2 py-0.5 text-xs font-medium bg-muted text-muted-foreground rounded\">\n              Inactive\n            </span>\n          )}\n          {isInCart && addon.isActive && (\n            <span className=\"px-2 py-0.5 text-xs font-medium bg-primary text-primary-foreground rounded\">\n              In Cart ({cartQuantity})\n            </span>\n          )}\n        </div>\n        <p className=\"text-sm text-muted-foreground\">\n          {combinedQuotas.length} quota{combinedQuotas.length !== 1 ? 's' : ''}\n        </p>\n      </div>\n\n      {/* Price */}\n      <div className=\"text-right\">\n        <div className=\"font-semibold text-foreground\">\n          {(() => {\n            const { price, currency } = getAddonDisplayPrice(addon, displayCurrency);\n            return formatCurrency(price, currency);\n          })()}\n        </div>\n        <div className=\"text-sm text-muted-foreground\">\n          per {formatPlanDuration(addon.duration)}\n        </div>\n      </div>\n\n      {/* Cart Actions */}\n      {addon.isActive &&\n        (isInCart ? (\n          <div className=\"flex items-center gap-1\">\n            <button\n              type=\"button\"\n              onClick={() => onUpdateQuantity(addon.id, cartQuantity - 1)}\n              className=\"p-1.5 rounded border border-border hover:bg-muted transition-colors\"\n            >\n              <Minus className=\"size-4\" />\n            </button>\n            <span className=\"w-8 text-center font-medium\">{cartQuantity}</span>\n            <button\n              type=\"button\"\n              onClick={() => onUpdateQuantity(addon.id, cartQuantity + 1)}\n              className=\"p-1.5 rounded border border-border hover:bg-muted transition-colors\"\n            >\n              <Plus className=\"size-4\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onRemoveFromCart(addon.id)}\n              className=\"p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors ml-1\"\n              title=\"Remove from cart\"\n            >\n              <Trash2 className=\"size-4\" />\n            </button>\n          </div>\n        ) : (\n          <button\n            type=\"button\"\n            onClick={() => onAddToCart(addon)}\n            className=\"px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors flex items-center gap-1.5\"\n          >\n            <ShoppingCart className=\"size-4\" />\n            Add\n          </button>\n        ))}\n\n      {/* Actions */}\n      <div className=\"flex items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={() => onView(addon)}\n          className=\"px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n        >\n          View\n        </button>\n        {canManage && (\n          <>\n            <button\n              type=\"button\"\n              onClick={() => onEdit(addon)}\n              className=\"px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n            >\n              Edit\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onToggle(addon)}\n              disabled={isToggling}\n              className={`px-3 py-1.5 text-sm font-medium border border-border rounded-md transition-colors ${\n                addon.isActive\n                  ? 'text-destructive hover:bg-destructive/10'\n                  : 'text-status-success-text hover:bg-status-success-bg-subtle'\n              }`}\n            >\n              {addon.isActive ? 'Deactivate' : 'Activate'}\n            </button>\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n\n// ============================================================================\n// Floating Cart Drawer\n// ============================================================================\n\ninterface FloatingCartDrawerProps {\n  displayCurrency: string;\n}\n\nconst FloatingCartDrawer: FC<FloatingCartDrawerProps> = ({ displayCurrency }) => {\n  const navigateTo = useBillingNavigate();\n  const { items, isCartOpen, toggleCart, closeCart, removeFromCart, updateQuantity, clearCart } =\n    useAddonCartStore();\n\n  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);\n\n  if (items.length === 0 && !isCartOpen) return null;\n\n  return (\n    <>\n      {/* Floating Cart Button */}\n      {!isCartOpen && items.length > 0 && (\n        <button\n          type=\"button\"\n          onClick={toggleCart}\n          className=\"fixed bottom-6 right-6 z-50 flex items-center gap-2 px-4 py-3 bg-primary text-primary-foreground rounded-full shadow-lg hover:bg-primary/90 transition-all\"\n        >\n          <ShoppingCart className=\"size-5\" />\n          <span className=\"font-medium\">\n            {itemCount} item{itemCount !== 1 ? 's' : ''}\n          </span>\n          <span className=\"px-2 py-0.5 bg-primary-foreground/20 rounded-full text-sm\">\n            {(() => {\n              // Calculate cart total using display currency prices\n              const total = items.reduce((sum, { addon, quantity }) => {\n                const { price } = getAddonDisplayPrice(addon, displayCurrency);\n                return sum + price * quantity;\n              }, 0);\n              return formatCurrency(total, displayCurrency);\n            })()}\n          </span>\n        </button>\n      )}\n\n      {/* Cart Drawer */}\n      {isCartOpen && (\n        <div className=\"fixed inset-0 z-50 flex items-end sm:items-center justify-center\">\n          {/* Backdrop */}\n          <div className=\"absolute inset-0 bg-overlay-scrim\" onClick={closeCart} />\n\n          {/* Drawer */}\n          <div className=\"relative w-full max-w-md max-h-[80vh] bg-card border border-border rounded-t-xl sm:rounded-xl shadow-xl overflow-hidden\">\n            {/* Header */}\n            <div className=\"flex items-center justify-between px-4 py-3 border-b border-border bg-muted/30\">\n              <div className=\"flex items-center gap-2\">\n                <ShoppingCart className=\"size-5 text-foreground\" />\n                <h3 className=\"font-semibold text-foreground\">Your Cart</h3>\n                <span className=\"px-2 py-0.5 text-xs bg-primary text-primary-foreground rounded-full\">\n                  {itemCount} item{itemCount !== 1 ? 's' : ''}\n                </span>\n              </div>\n              <button\n                type=\"button\"\n                onClick={closeCart}\n                className=\"p-1.5 rounded hover:bg-muted transition-colors\"\n              >\n                <X className=\"size-5\" />\n              </button>\n            </div>\n\n            {/* Cart Items */}\n            <div className=\"overflow-y-auto max-h-[50vh] divide-y divide-border\">\n              {items.map(({ addon, quantity }) => (\n                <div key={addon.id} className=\"p-4 flex items-center gap-3\">\n                  <div className=\"size-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0\">\n                    <svg\n                      className=\"size-5 text-primary\"\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=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\"\n                      />\n                    </svg>\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <h4 className=\"font-medium text-foreground truncate\">{addon.name}</h4>\n                    <p className=\"text-sm text-muted-foreground\">\n                      {(() => {\n                        const { price, currency } = getAddonDisplayPrice(addon, displayCurrency);\n                        return formatCurrency(price, currency);\n                      })()}{' '}\n                      / {formatPlanDuration(addon.duration)}\n                    </p>\n                  </div>\n                  <div className=\"flex items-center gap-1\">\n                    <button\n                      type=\"button\"\n                      onClick={() => updateQuantity(addon.id, quantity - 1)}\n                      className=\"p-1 rounded border border-border hover:bg-muted transition-colors\"\n                    >\n                      <Minus className=\"size-3\" />\n                    </button>\n                    <span className=\"w-6 text-center text-sm font-medium\">{quantity}</span>\n                    <button\n                      type=\"button\"\n                      onClick={() => updateQuantity(addon.id, quantity + 1)}\n                      className=\"p-1 rounded border border-border hover:bg-muted transition-colors\"\n                    >\n                      <Plus className=\"size-3\" />\n                    </button>\n                  </div>\n                  <div className=\"text-right\">\n                    <p className=\"font-medium text-foreground\">\n                      {(() => {\n                        const { price, currency } = getAddonDisplayPrice(addon, displayCurrency);\n                        return formatCurrency(price * quantity, currency);\n                      })()}\n                    </p>\n                  </div>\n                  <button\n                    type=\"button\"\n                    onClick={() => removeFromCart(addon.id)}\n                    className=\"p-1.5 rounded text-destructive hover:bg-destructive/10 transition-colors\"\n                  >\n                    <Trash2 className=\"size-4\" />\n                  </button>\n                </div>\n              ))}\n            </div>\n\n            {/* Footer */}\n            <div className=\"border-t border-border p-4 space-y-3 bg-muted/20\">\n              <div className=\"flex items-center justify-between text-lg font-semibold\">\n                <span className=\"text-foreground\">Total</span>\n                <span className=\"text-foreground\">\n                  {(() => {\n                    // Calculate cart total using display currency prices\n                    const total = items.reduce((sum, { addon, quantity }) => {\n                      const { price } = getAddonDisplayPrice(addon, displayCurrency);\n                      return sum + price * quantity;\n                    }, 0);\n                    return formatCurrency(total, displayCurrency);\n                  })()}\n                </span>\n              </div>\n              <div className=\"flex gap-2\">\n                <button\n                  type=\"button\"\n                  onClick={clearCart}\n                  className=\"flex-1 px-4 py-2.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n                >\n                  Clear Cart\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    closeCart();\n                    navigateTo('/checkout/addons');\n                  }}\n                  className=\"flex-1 px-4 py-2.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n                >\n                  Checkout\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AddonsListPage.js","names":[],"sources":["../../../../../src/billing/modules/addons/pages/AddonsListPage.tsx"],"sourcesContent":["/**\n * Addons Module - Addons List Page\n * Displays all available addons with cart functionality\n */\n\nimport { useState, useMemo, type FC } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { ShoppingCart, Plus, Minus, Trash2, X } from 'lucide-react';\nimport { useAddons, useAddonMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useAddonCartStore } from '../store/addonCartStore';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n} from '../../../shared/utils/format';\nimport type { Addon, PlanDuration, SubscriptionFeatures } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useDefaultBillingCurrency } from '../../../hooks/useDefaultBillingCurrency';\nimport { getPlanFeatureQuantity } from '../../../shared/utils/planFeatureQuantity';\n\ntype ViewMode = 'grid' | 'list';\n\n/**\n * Combined quota info for display\n */\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  totalValue: number;\n}\n\n/**\n * Combines duplicate quotas by quota ID and aggregates their values\n */\nfunction combineQuotas(features: SubscriptionFeatures[]): 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 limitValue = getPlanFeatureQuantity(feature);\n\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        totalValue: limitValue,\n      });\n    }\n  }\n\n  return Array.from(quotaMap.values());\n}\n\n/**\n * Get the display price and currency for an addon\n * Uses currencyPrices if available, otherwise falls back to base price\n */\nfunction getAddonDisplayPrice(\n  addon: Addon,\n  displayCurrency: string = 'USD'\n): { price: number; currency: string } {\n  // If currencyPrices exists and has the requested currency, use it\n  if (addon.currencyPrices && typeof addon.currencyPrices === 'object') {\n    const currencyPricesObj = addon.currencyPrices as Record<string, number>;\n    if (currencyPricesObj[displayCurrency]) {\n      return {\n        price: currencyPricesObj[displayCurrency],\n        currency: displayCurrency,\n      };\n    }\n  }\n\n  // Fallback to base USD price\n  return {\n    price: addon.price,\n    currency: addon.currency || 'USD',\n  };\n}\n\nexport const AddonsListPage: 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 { addons, isLoading, error, refetch } = useAddons();\n  const { toggleAddon, isToggling } = useAddonMutations();\n  const { addToCart, removeFromCart, updateQuantity, isInCart, getCartItem } = useAddonCartStore();\n\n  const [viewMode, setViewMode] = useState<ViewMode>('grid');\n  const [showInactive, setShowInactive] = useState(false);\n  const [billingInterval, setBillingInterval] = useState<PlanDuration | 'all'>('all');\n  const displayCurrency = useDefaultBillingCurrency();\n\n  // Permission check\n  if (!permissions.canViewAddons) {\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('billing.addons.noViewPermission', \"You don't have permission to view addons.\")}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Filter addons\n  const filteredAddons = addons.filter((addon) => {\n    if (!showInactive && !addon.isActive) return false;\n    if (billingInterval !== 'all' && addon.duration !== billingInterval) return false;\n    return true;\n  });\n\n  const handleToggleAddon = async (addon: Addon) => {\n    if (!permissions.canManageAddons) return;\n    try {\n      await toggleAddon(addon.id, !addon.isActive);\n      await refetch();\n    } catch (err) {\n      console.error('Failed to toggle addon:', err);\n    }\n  };\n\n  const handleViewAddon = (addon: Addon) => {\n    navigateTo(`/addons/${addon.id}`);\n  };\n\n  const handleEditAddon = (addon: Addon) => {\n    navigateTo(`/addons/${addon.id}/edit`);\n  };\n\n  // Loading state\n  if (isLoading && addons.length === 0) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-8 w-32 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"space-y-2\">\n                {[1, 2, 3].map((j) => (\n                  <div key={j} className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n                ))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <div className=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-status-error-text\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.addons.failedToLoad', 'Failed to load addons')}\n          </h2>\n          <p className=\"text-sm text-text-muted\">{error.message}</p>\n          <button\n            type=\"button\"\n            onClick={() => refetch()}\n            className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n          >\n            Try Again\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n            {tr('billing.addons.title', 'Addons')}\n          </h1>\n          <p className=\"text-sm text-text-muted mt-1\">\n            {tr('billing.addons.subtitle', 'Enhance your subscription with additional features')}\n          </p>\n        </div>\n\n        {permissions.canManageAddons && (\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/addons/new')}\n            className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 4v16m8-8H4\"\n              />\n            </svg>\n            Create Addon\n          </button>\n        )}\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border-subtle\">\n        {/* Billing Interval Toggle */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken/50\">\n          <button\n            type=\"button\"\n            onClick={() => setBillingInterval('all')}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              billingInterval === 'all'\n                ? 'bg-bg-surface text-text-primary shadow-sm'\n                : 'text-text-muted hover:text-text-primary'\n            }`}\n          >\n            All\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setBillingInterval('monthly' as PlanDuration)}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              billingInterval === 'monthly'\n                ? 'bg-bg-surface text-text-primary shadow-sm'\n                : 'text-text-muted hover:text-text-primary'\n            }`}\n          >\n            Monthly\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setBillingInterval('yearly' as PlanDuration)}\n            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              billingInterval === 'yearly'\n                ? 'bg-bg-surface text-text-primary shadow-sm'\n                : 'text-text-muted hover:text-text-primary'\n            }`}\n          >\n            Yearly\n          </button>\n        </div>\n\n        {/* Show Inactive Toggle */}\n        {permissions.canManageAddons && (\n          <label className=\"flex items-center gap-2 text-sm cursor-pointer\">\n            <input\n              type=\"checkbox\"\n              checked={showInactive}\n              onChange={(e) => setShowInactive(e.target.checked)}\n              className=\"size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)]\"\n            />\n            <span className=\"text-text-muted\">\n              {tr('billing.addons.showInactive', 'Show inactive addons')}\n            </span>\n          </label>\n        )}\n\n        {/* View Mode Toggle */}\n        <div className=\"ml-auto inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken/50\">\n          <button\n            type=\"button\"\n            onClick={() => setViewMode('grid')}\n            className={`p-1.5 rounded-md transition-colors ${\n              viewMode === 'grid'\n                ? 'bg-bg-surface text-text-primary shadow-sm'\n                : 'text-text-muted hover:text-text-primary'\n            }`}\n            title=\"Grid view\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\"\n              />\n            </svg>\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setViewMode('list')}\n            className={`p-1.5 rounded-md transition-colors ${\n              viewMode === 'list'\n                ? 'bg-bg-surface text-text-primary shadow-sm'\n                : 'text-text-muted hover:text-text-primary'\n            }`}\n            title=\"List view\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M4 6h16M4 12h16M4 18h16\"\n              />\n            </svg>\n          </button>\n        </div>\n      </div>\n\n      {/* Addons Grid/List */}\n      {filteredAddons.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center py-16 border border-dashed border-border-subtle rounded-card bg-bg-surface\">\n          <div className=\"size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n            <svg\n              className=\"size-6 text-text-muted\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-text-primary\">\n            {tr('billing.addons.noAddonsFound', 'No addons found')}\n          </h3>\n          <p className=\"text-sm text-text-muted mt-1\">\n            {showInactive\n              ? tr('billing.addons.noAddonsFiltered', 'No addons match your current filters.')\n              : tr('billing.addons.noActiveAddons', 'There are no active addons available.')}\n          </p>\n          {permissions.canManageAddons && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/addons/new')}\n              className=\"mt-4 px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n            >\n              {tr('billing.addons.createFirstAddon', 'Create your first addon')}\n            </button>\n          )}\n        </div>\n      ) : viewMode === 'grid' ? (\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n          {filteredAddons.map((addon) => {\n            const cartItem = getCartItem(addon.id);\n            return (\n              <AddonCard\n                key={addon.id}\n                addon={addon}\n                onView={handleViewAddon}\n                onEdit={handleEditAddon}\n                onToggle={handleToggleAddon}\n                canManage={permissions.canManageAddons}\n                isToggling={isToggling}\n                isInCart={isInCart(addon.id)}\n                cartQuantity={cartItem?.quantity || 0}\n                onAddToCart={addToCart}\n                onUpdateQuantity={updateQuantity}\n                onRemoveFromCart={removeFromCart}\n                displayCurrency={displayCurrency}\n              />\n            );\n          })}\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {filteredAddons.map((addon) => {\n            const cartItem = getCartItem(addon.id);\n            return (\n              <AddonRow\n                key={addon.id}\n                addon={addon}\n                onView={handleViewAddon}\n                onEdit={handleEditAddon}\n                onToggle={handleToggleAddon}\n                canManage={permissions.canManageAddons}\n                isToggling={isToggling}\n                isInCart={isInCart(addon.id)}\n                cartQuantity={cartItem?.quantity || 0}\n                onAddToCart={addToCart}\n                onUpdateQuantity={updateQuantity}\n                onRemoveFromCart={removeFromCart}\n                displayCurrency={displayCurrency}\n              />\n            );\n          })}\n        </div>\n      )}\n\n      {/* Floating Cart Drawer */}\n      <FloatingCartDrawer displayCurrency={displayCurrency} />\n    </div>\n  );\n};\n\n// ============================================================================\n// Addon Card Component\n// ============================================================================\n\ninterface AddonCardProps {\n  addon: Addon;\n  onView: (addon: Addon) => void;\n  onEdit: (addon: Addon) => void;\n  onToggle: (addon: Addon) => void;\n  canManage: boolean;\n  isToggling: boolean;\n  isInCart: boolean;\n  cartQuantity: number;\n  onAddToCart: (addon: Addon) => void;\n  onUpdateQuantity: (addonId: string, quantity: number) => void;\n  onRemoveFromCart: (addonId: string) => void;\n  displayCurrency: string;\n}\n\nconst AddonCard: FC<AddonCardProps> = ({\n  addon,\n  onView,\n  onEdit,\n  onToggle,\n  canManage,\n  displayCurrency,\n  isToggling,\n  isInCart,\n  cartQuantity,\n  onAddToCart,\n  onUpdateQuantity,\n  onRemoveFromCart,\n}) => {\n  const combinedQuotas = useMemo(() => {\n    const features = addon.features || [];\n    return combineQuotas(features);\n  }, [addon.features]);\n\n  return (\n    <div\n      className={`relative border rounded-card p-6 shadow-[var(--shadow-elevation-1)] transition-all duration-200 hover:-translate-y-0.5 hover:border-border-strong hover:shadow-[var(--shadow-elevation-2)] flex flex-col h-full ${\n        addon.isActive\n          ? isInCart\n            ? 'border-action-primary-bg bg-[var(--color-accent-soft)]'\n            : 'border-border-subtle bg-bg-surface'\n          : 'border-dashed border-text-muted/30 bg-bg-sunken/30'\n      }`}\n    >\n      {/* Status Badge */}\n      {!addon.isActive && (\n        <span className=\"absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-bg-sunken text-text-muted rounded\">\n          Inactive\n        </span>\n      )}\n\n      {/* In Cart Badge */}\n      {isInCart && addon.isActive && (\n        <span className=\"absolute top-4 right-4 px-2 py-1 text-xs font-medium bg-action-primary-bg text-action-primary-text rounded\">\n          In Cart ({cartQuantity})\n        </span>\n      )}\n\n      {/* Addon Icon */}\n      <div className=\"size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n        <svg\n          className=\"size-5 text-text-link\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\"\n          />\n        </svg>\n      </div>\n\n      {/* Addon Name */}\n      <div className=\"mb-4\">\n        <h3 className=\"text-lg font-bold text-text-primary\">{addon.name}</h3>\n        <span className=\"text-sm text-text-muted\">{formatPlanDurationLabel(addon.duration)}</span>\n      </div>\n\n      {/* Price */}\n      <div className=\"flex items-baseline gap-1 mb-4\">\n        <span className=\"text-2xl font-bold text-text-primary\">\n          {(() => {\n            const { price, currency } = getAddonDisplayPrice(addon, displayCurrency);\n            return formatCurrency(price, currency);\n          })()}\n        </span>\n        <span className=\"text-text-muted text-sm\">/ {formatPlanDuration(addon.duration)}</span>\n      </div>\n\n      {/* Combined Quotas */}\n      {combinedQuotas.length > 0 && (\n        <ul className=\"space-y-2 mb-4\">\n          {combinedQuotas.slice(0, 4).map((quota) => (\n            <li key={quota.quotaId} className=\"flex items-center justify-between text-sm\">\n              <div className=\"flex items-center gap-2\">\n                <svg\n                  className=\"size-4 text-status-success-text shrink-0\"\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                <span className=\"text-text-primary\">{quota.name}</span>\n              </div>\n              <span className=\"font-medium text-text-primary\">\n                {quota.totalValue.toLocaleString()}\n              </span>\n            </li>\n          ))}\n          {combinedQuotas.length > 4 && (\n            <li className=\"text-sm text-text-muted pl-6\">\n              +{combinedQuotas.length - 4} more quotas\n            </li>\n          )}\n        </ul>\n      )}\n\n      {/* Actions - pushed to bottom with mt-auto */}\n      <div className=\"space-y-2 pt-4 border-t border-border-subtle mt-auto\">\n        {/* Add to Cart / Quantity Controls */}\n        {addon.isActive &&\n          (isInCart ? (\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex items-center gap-1\">\n                <button\n                  type=\"button\"\n                  onClick={() => onUpdateQuantity(addon.id, cartQuantity - 1)}\n                  className=\"p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors\"\n                >\n                  <Minus className=\"size-4\" />\n                </button>\n                <span className=\"w-10 text-center font-medium\">{cartQuantity}</span>\n                <button\n                  type=\"button\"\n                  onClick={() => onUpdateQuantity(addon.id, cartQuantity + 1)}\n                  className=\"p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors\"\n                >\n                  <Plus className=\"size-4\" />\n                </button>\n              </div>\n              <button\n                type=\"button\"\n                onClick={() => onRemoveFromCart(addon.id)}\n                className=\"p-1.5 rounded text-status-error-text hover:bg-status-error-bg-subtle transition-colors\"\n                title=\"Remove from cart\"\n              >\n                <Trash2 className=\"size-4\" />\n              </button>\n            </div>\n          ) : (\n            <button\n              type=\"button\"\n              onClick={() => onAddToCart(addon)}\n              className=\"w-full px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors flex items-center justify-center gap-2\"\n            >\n              <ShoppingCart className=\"size-4\" />\n              Add to Cart\n            </button>\n          ))}\n\n        <button\n          type=\"button\"\n          onClick={() => onView(addon)}\n          className=\"w-full px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n        >\n          View Details\n        </button>\n\n        {canManage && (\n          <div className=\"flex gap-2\">\n            <button\n              type=\"button\"\n              onClick={() => onEdit(addon)}\n              className=\"flex-1 px-3 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n            >\n              Edit\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onToggle(addon)}\n              disabled={isToggling}\n              className={`px-3 py-2 text-sm font-medium border border-border-subtle rounded-md transition-colors ${\n                addon.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              {addon.isActive ? 'Deactivate' : 'Activate'}\n            </button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\n// ============================================================================\n// Addon Row Component (List View)\n// ============================================================================\n\ninterface AddonRowProps {\n  addon: Addon;\n  onView: (addon: Addon) => void;\n  onEdit: (addon: Addon) => void;\n  onToggle: (addon: Addon) => void;\n  canManage: boolean;\n  isToggling: boolean;\n  isInCart: boolean;\n  cartQuantity: number;\n  onAddToCart: (addon: Addon) => void;\n  onUpdateQuantity: (addonId: string, quantity: number) => void;\n  onRemoveFromCart: (addonId: string) => void;\n  displayCurrency: string;\n}\n\nconst AddonRow: FC<AddonRowProps> = ({\n  addon,\n  onView,\n  onEdit,\n  onToggle,\n  canManage,\n  displayCurrency,\n  isToggling,\n  isInCart,\n  cartQuantity,\n  onAddToCart,\n  onUpdateQuantity,\n  onRemoveFromCart,\n}) => {\n  const combinedQuotas = useMemo(() => {\n    const features = addon.features || [];\n    return combineQuotas(features);\n  }, [addon.features]);\n\n  return (\n    <div\n      className={`flex items-center gap-4 p-4 border rounded-card shadow-[var(--shadow-elevation-1)] transition-all duration-200 hover:border-border-strong hover:shadow-[var(--shadow-elevation-2)] ${\n        addon.isActive\n          ? isInCart\n            ? 'border-action-primary-bg bg-[var(--color-accent-soft)]'\n            : 'border-border-subtle bg-bg-surface'\n          : 'border-dashed border-text-muted/30 bg-bg-sunken/30'\n      }`}\n    >\n      {/* Addon Icon */}\n      <div className=\"size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center shrink-0\">\n        <svg\n          className=\"size-5 text-text-link\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\"\n          />\n        </svg>\n      </div>\n\n      {/* Addon Info */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2\">\n          <h3 className=\"font-semibold text-text-primary truncate\">{addon.name}</h3>\n          {!addon.isActive && (\n            <span className=\"px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-muted rounded\">\n              Inactive\n            </span>\n          )}\n          {isInCart && addon.isActive && (\n            <span className=\"px-2 py-0.5 text-xs font-medium bg-action-primary-bg text-action-primary-text rounded\">\n              In Cart ({cartQuantity})\n            </span>\n          )}\n        </div>\n        <p className=\"text-sm text-text-muted\">\n          {combinedQuotas.length} quota{combinedQuotas.length !== 1 ? 's' : ''}\n        </p>\n      </div>\n\n      {/* Price */}\n      <div className=\"text-right\">\n        <div className=\"font-semibold text-text-primary\">\n          {(() => {\n            const { price, currency } = getAddonDisplayPrice(addon, displayCurrency);\n            return formatCurrency(price, currency);\n          })()}\n        </div>\n        <div className=\"text-sm text-text-muted\">per {formatPlanDuration(addon.duration)}</div>\n      </div>\n\n      {/* Cart Actions */}\n      {addon.isActive &&\n        (isInCart ? (\n          <div className=\"flex items-center gap-1\">\n            <button\n              type=\"button\"\n              onClick={() => onUpdateQuantity(addon.id, cartQuantity - 1)}\n              className=\"p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors\"\n            >\n              <Minus className=\"size-4\" />\n            </button>\n            <span className=\"w-8 text-center font-medium\">{cartQuantity}</span>\n            <button\n              type=\"button\"\n              onClick={() => onUpdateQuantity(addon.id, cartQuantity + 1)}\n              className=\"p-1.5 rounded border border-border-subtle hover:bg-bg-sunken transition-colors\"\n            >\n              <Plus className=\"size-4\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onRemoveFromCart(addon.id)}\n              className=\"p-1.5 rounded text-status-error-text hover:bg-status-error-bg-subtle transition-colors ml-1\"\n              title=\"Remove from cart\"\n            >\n              <Trash2 className=\"size-4\" />\n            </button>\n          </div>\n        ) : (\n          <button\n            type=\"button\"\n            onClick={() => onAddToCart(addon)}\n            className=\"px-3 py-1.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors flex items-center gap-1.5\"\n          >\n            <ShoppingCart className=\"size-4\" />\n            Add\n          </button>\n        ))}\n\n      {/* Actions */}\n      <div className=\"flex items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={() => onView(addon)}\n          className=\"px-3 py-1.5 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n        >\n          View\n        </button>\n        {canManage && (\n          <>\n            <button\n              type=\"button\"\n              onClick={() => onEdit(addon)}\n              className=\"px-3 py-1.5 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n            >\n              Edit\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onToggle(addon)}\n              disabled={isToggling}\n              className={`px-3 py-1.5 text-sm font-medium border border-border-subtle rounded-md transition-colors ${\n                addon.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              {addon.isActive ? 'Deactivate' : 'Activate'}\n            </button>\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n\n// ============================================================================\n// Floating Cart Drawer\n// ============================================================================\n\ninterface FloatingCartDrawerProps {\n  displayCurrency: string;\n}\n\nconst FloatingCartDrawer: FC<FloatingCartDrawerProps> = ({ displayCurrency }) => {\n  const navigateTo = useBillingNavigate();\n  const { items, isCartOpen, toggleCart, closeCart, removeFromCart, updateQuantity, clearCart } =\n    useAddonCartStore();\n\n  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);\n\n  if (items.length === 0 && !isCartOpen) return null;\n\n  return (\n    <>\n      {/* Floating Cart Button */}\n      {!isCartOpen && items.length > 0 && (\n        <button\n          type=\"button\"\n          onClick={toggleCart}\n          className=\"fixed bottom-6 right-6 z-50 flex items-center gap-2 px-4 py-3 bg-action-primary-bg text-action-primary-text rounded-full shadow-[var(--shadow-elevation-3)] hover:bg-action-primary-bgHover transition-all duration-200\"\n        >\n          <ShoppingCart className=\"size-5\" />\n          <span className=\"font-medium\">\n            {itemCount} item{itemCount !== 1 ? 's' : ''}\n          </span>\n          <span className=\"px-2 py-0.5 bg-[var(--color-accent-soft)] rounded-full text-sm\">\n            {(() => {\n              // Calculate cart total using display currency prices\n              const total = items.reduce((sum, { addon, quantity }) => {\n                const { price } = getAddonDisplayPrice(addon, displayCurrency);\n                return sum + price * quantity;\n              }, 0);\n              return formatCurrency(total, displayCurrency);\n            })()}\n          </span>\n        </button>\n      )}\n\n      {/* Cart Drawer */}\n      {isCartOpen && (\n        <div className=\"fixed inset-0 z-50 flex items-end sm:items-center justify-center\">\n          {/* Backdrop */}\n          <div className=\"absolute inset-0 bg-overlay-scrim\" onClick={closeCart} />\n\n          {/* Drawer */}\n          <div className=\"relative w-full max-w-md max-h-[80vh] bg-bg-elevated border border-border-subtle rounded-t-card sm:rounded-card shadow-[var(--shadow-elevation-4)] overflow-hidden\">\n            {/* Header */}\n            <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-subtle bg-bg-sunken/30\">\n              <div className=\"flex items-center gap-2\">\n                <ShoppingCart className=\"size-5 text-text-primary\" />\n                <h3 className=\"font-semibold text-text-primary\">Your Cart</h3>\n                <span className=\"px-2 py-0.5 text-xs bg-action-primary-bg text-action-primary-text rounded-full\">\n                  {itemCount} item{itemCount !== 1 ? 's' : ''}\n                </span>\n              </div>\n              <button\n                type=\"button\"\n                onClick={closeCart}\n                className=\"p-1.5 rounded hover:bg-bg-sunken transition-colors\"\n              >\n                <X className=\"size-5\" />\n              </button>\n            </div>\n\n            {/* Cart Items */}\n            <div className=\"overflow-y-auto max-h-[50vh] divide-y divide-border-subtle\">\n              {items.map(({ addon, quantity }) => (\n                <div key={addon.id} className=\"p-4 flex items-center gap-3\">\n                  <div className=\"size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center shrink-0\">\n                    <svg\n                      className=\"size-5 text-text-link\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={2}\n                        d=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\"\n                      />\n                    </svg>\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <h4 className=\"font-medium text-text-primary truncate\">{addon.name}</h4>\n                    <p className=\"text-sm text-text-muted\">\n                      {(() => {\n                        const { price, currency } = getAddonDisplayPrice(addon, displayCurrency);\n                        return formatCurrency(price, currency);\n                      })()}{' '}\n                      / {formatPlanDuration(addon.duration)}\n                    </p>\n                  </div>\n                  <div className=\"flex items-center gap-1\">\n                    <button\n                      type=\"button\"\n                      onClick={() => updateQuantity(addon.id, quantity - 1)}\n                      className=\"p-1 rounded border border-border-subtle hover:bg-bg-sunken transition-colors\"\n                    >\n                      <Minus className=\"size-3\" />\n                    </button>\n                    <span className=\"w-6 text-center text-sm font-medium\">{quantity}</span>\n                    <button\n                      type=\"button\"\n                      onClick={() => updateQuantity(addon.id, quantity + 1)}\n                      className=\"p-1 rounded border border-border-subtle hover:bg-bg-sunken transition-colors\"\n                    >\n                      <Plus className=\"size-3\" />\n                    </button>\n                  </div>\n                  <div className=\"text-right\">\n                    <p className=\"font-medium text-text-primary\">\n                      {(() => {\n                        const { price, currency } = getAddonDisplayPrice(addon, displayCurrency);\n                        return formatCurrency(price * quantity, currency);\n                      })()}\n                    </p>\n                  </div>\n                  <button\n                    type=\"button\"\n                    onClick={() => removeFromCart(addon.id)}\n                    className=\"p-1.5 rounded text-status-error-text hover:bg-status-error-bg-subtle transition-colors\"\n                  >\n                    <Trash2 className=\"size-4\" />\n                  </button>\n                </div>\n              ))}\n            </div>\n\n            {/* Footer */}\n            <div className=\"border-t border-border-subtle p-4 space-y-3 bg-bg-sunken/20\">\n              <div className=\"flex items-center justify-between text-lg font-semibold\">\n                <span className=\"text-text-primary\">Total</span>\n                <span className=\"text-text-primary\">\n                  {(() => {\n                    // Calculate cart total using display currency prices\n                    const total = items.reduce((sum, { addon, quantity }) => {\n                      const { price } = getAddonDisplayPrice(addon, displayCurrency);\n                      return sum + price * quantity;\n                    }, 0);\n                    return formatCurrency(total, displayCurrency);\n                  })()}\n                </span>\n              </div>\n              <div className=\"flex gap-2\">\n                <button\n                  type=\"button\"\n                  onClick={clearCart}\n                  className=\"flex-1 px-4 py-2.5 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n                >\n                  Clear Cart\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    closeCart();\n                    navigateTo('/checkout/addons');\n                  }}\n                  className=\"flex-1 px-4 py-2.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n                >\n                  Checkout\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/analytics/pages/AnalyticsPage.js

@@ -191,12 +191,12 @@ var j = () => {
 					children: [/* @__PURE__ */ y("button", {
 						type: "button",
 						onClick: () => I(),
-						className: "inline-flex items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted",
+						className: "inline-flex items-center justify-center gap-2 rounded-button border border-border-subtle bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
 						children: [/* @__PURE__ */ v(p, { className: "size-4" }), "Refresh"]
 					}), /* @__PURE__ */ v("select", {
 						value: C,
 						onChange: (e) => D(e.target.value),
-						className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+						className: "rounded-input border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 						children: x.map((e) => /* @__PURE__ */ v("option", {
 							value: e.value,
 							children: e.label
@@ -215,24 +215,24 @@ var j = () => {
 				})] })]
 			}),
 			P && L.length === 0 ? /* @__PURE__ */ v("div", {
-				className: "flex min-h-[320px] items-center justify-center rounded-lg border border-border bg-card",
+				className: "flex min-h-[320px] items-center justify-center rounded-lg border border-border-subtle bg-bg-surface",
 				children: /* @__PURE__ */ y("div", {
-					className: "flex flex-col items-center gap-3 text-muted-foreground",
+					className: "flex flex-col items-center gap-3 text-text-muted",
 					children: [/* @__PURE__ */ v(p, { className: "size-6 animate-spin" }), /* @__PURE__ */ v("p", {
 						className: "text-sm",
 						children: "Loading live billing analytics…"
 					})]
 				})
 			}) : L.length === 0 ? /* @__PURE__ */ y("div", {
-				className: "rounded-lg border border-dashed border-border bg-card p-8 text-center",
+				className: "rounded-lg border border-dashed border-border-subtle bg-bg-surface p-8 text-center",
 				children: [
-					/* @__PURE__ */ v(f, { className: "mx-auto size-10 text-muted-foreground" }),
+					/* @__PURE__ */ v(f, { className: "mx-auto size-10 text-text-muted" }),
 					/* @__PURE__ */ v("h2", {
-						className: "mt-4 text-lg font-semibold text-foreground",
+						className: "mt-4 text-lg font-semibold text-text-primary",
 						children: "No billing data available yet"
 					}),
 					/* @__PURE__ */ v("p", {
-						className: "mt-2 text-sm text-muted-foreground",
+						className: "mt-2 text-sm text-text-muted",
 						children: "Create a billing account and complete a subscription or payment to unlock live analytics."
 					})
 				]
@@ -289,14 +289,14 @@ var j = () => {
 				/* @__PURE__ */ y("div", {
 					className: "grid grid-cols-1 gap-6 xl:grid-cols-2",
 					children: [/* @__PURE__ */ y("section", {
-						className: "rounded-lg border border-border bg-card p-4 sm:p-6",
+						className: "rounded-card border border-border-subtle bg-bg-surface p-4 sm:p-6 shadow-[var(--shadow-elevation-1)]",
 						children: [/* @__PURE__ */ y("div", {
 							className: "mb-4 flex items-center justify-between gap-3",
 							children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h3", {
-								className: "font-semibold text-foreground",
+								className: "font-semibold text-text-primary",
 								children: "Revenue over time"
 							}), /* @__PURE__ */ v("p", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-text-muted",
 								children: "Successful payments received during the selected period."
 							})] }), /* @__PURE__ */ y("span", {
 								className: "rounded-full bg-status-info-bg-subtle px-2.5 py-1 text-xs font-medium text-status-info-text",
@@ -307,7 +307,7 @@ var j = () => {
 								]
 							})]
 						}), U.length === 0 ? /* @__PURE__ */ v("p", {
-							className: "rounded-lg bg-muted/40 p-4 text-sm text-muted-foreground",
+							className: "rounded-lg bg-bg-sunken/40 p-4 text-sm text-text-muted",
 							children: "No successful payments were recorded during this period."
 						}) : /* @__PURE__ */ v("div", {
 							className: "space-y-3",
@@ -316,37 +316,37 @@ var j = () => {
 								children: [/* @__PURE__ */ y("div", {
 									className: "flex items-center justify-between gap-3 text-sm",
 									children: [/* @__PURE__ */ v("span", {
-										className: "font-medium text-foreground",
+										className: "font-medium text-text-primary",
 										children: e.label
 									}), /* @__PURE__ */ v("span", {
-										className: "text-muted-foreground",
+										className: "text-text-muted",
 										children: A(e.value, V)
 									})]
 								}), /* @__PURE__ */ v("div", {
-									className: "h-2 rounded-full bg-muted",
+									className: "h-2 rounded-full bg-bg-sunken",
 									children: /* @__PURE__ */ v("div", {
-										className: "h-2 rounded-full bg-primary transition-[width]",
+										className: "h-2 rounded-full bg-action-primary-bg transition-[width]",
 										style: { width: `${q > 0 ? e.value / q * 100 : 0}%` }
 									})
 								})]
 							}, e.label))
 						})]
 					}), /* @__PURE__ */ y("section", {
-						className: "rounded-lg border border-border bg-card p-4 sm:p-6",
+						className: "rounded-card border border-border-subtle bg-bg-surface p-4 sm:p-6 shadow-[var(--shadow-elevation-1)]",
 						children: [/* @__PURE__ */ y("div", {
 							className: "mb-4 flex items-center justify-between gap-3",
 							children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h3", {
-								className: "font-semibold text-foreground",
+								className: "font-semibold text-text-primary",
 								children: "Subscription growth"
 							}), /* @__PURE__ */ v("p", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-text-muted",
 								children: "New subscriptions created during the selected period."
 							})] }), /* @__PURE__ */ y("span", {
 								className: "rounded-full bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text",
 								children: [W.reduce((e, t) => e + t.value, 0), " created"]
 							})]
 						}), W.length === 0 ? /* @__PURE__ */ v("p", {
-							className: "rounded-lg bg-muted/40 p-4 text-sm text-muted-foreground",
+							className: "rounded-lg bg-bg-sunken/40 p-4 text-sm text-text-muted",
 							children: "No new subscriptions were created during this period."
 						}) : /* @__PURE__ */ v("div", {
 							className: "space-y-3",
@@ -355,14 +355,14 @@ var j = () => {
 								children: [/* @__PURE__ */ y("div", {
 									className: "flex items-center justify-between gap-3 text-sm",
 									children: [/* @__PURE__ */ v("span", {
-										className: "font-medium text-foreground",
+										className: "font-medium text-text-primary",
 										children: e.label
 									}), /* @__PURE__ */ y("span", {
-										className: "text-muted-foreground",
+										className: "text-text-muted",
 										children: [e.value, " new"]
 									})]
 								}), /* @__PURE__ */ v("div", {
-									className: "h-2 rounded-full bg-muted",
+									className: "h-2 rounded-full bg-bg-sunken",
 									children: /* @__PURE__ */ v("div", {
 										className: "h-2 rounded-full bg-status-success-bg transition-[width]",
 										style: { width: `${J > 0 ? e.value / J * 100 : 0}%` }
@@ -375,57 +375,57 @@ var j = () => {
 				/* @__PURE__ */ y("div", {
 					className: "grid grid-cols-1 gap-6 xl:grid-cols-2",
 					children: [/* @__PURE__ */ y("section", {
-						className: "rounded-lg border border-border bg-card",
+						className: "rounded-card border border-border-subtle bg-bg-surface shadow-[var(--shadow-elevation-1)]",
 						children: [/* @__PURE__ */ y("div", {
-							className: "border-b border-border p-4",
+							className: "border-b border-border-subtle p-4",
 							children: [/* @__PURE__ */ v("h3", {
-								className: "font-semibold text-foreground",
+								className: "font-semibold text-text-primary",
 								children: "Revenue by plan"
 							}), /* @__PURE__ */ v("p", {
-								className: "mt-1 text-sm text-muted-foreground",
+								className: "mt-1 text-sm text-text-muted",
 								children: "Estimated monthly recurring revenue based on currently active subscriptions."
 							})]
 						}), /* @__PURE__ */ v("div", {
 							className: "p-4",
 							children: G.length === 0 ? /* @__PURE__ */ v("p", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-text-muted",
 								children: "No active plans to analyse yet."
 							}) : /* @__PURE__ */ v("div", {
 								className: "space-y-3",
 								children: G.map((e) => /* @__PURE__ */ y("div", {
 									className: "flex flex-col gap-2 rounded-lg border border-border-subtle p-3 sm:flex-row sm:items-center sm:justify-between",
 									children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-										className: "font-medium text-foreground",
+										className: "font-medium text-text-primary",
 										children: e.name
 									}), /* @__PURE__ */ y("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-muted",
 										children: [
 											e.activeSubscriptions,
 											" active subscription",
 											e.activeSubscriptions === 1 ? "" : "s"
 										]
 									})] }), /* @__PURE__ */ y("p", {
-										className: "text-sm font-semibold text-foreground",
+										className: "text-sm font-semibold text-text-primary",
 										children: [A(e.estimatedMrr, V), " / month"]
 									})]
 								}, e.name))
 							})
 						})]
 					}), /* @__PURE__ */ y("section", {
-						className: "rounded-lg border border-border bg-card",
+						className: "rounded-card border border-border-subtle bg-bg-surface shadow-[var(--shadow-elevation-1)]",
 						children: [/* @__PURE__ */ y("div", {
-							className: "border-b border-border p-4",
+							className: "border-b border-border-subtle p-4",
 							children: [/* @__PURE__ */ v("h3", {
-								className: "font-semibold text-foreground",
+								className: "font-semibold text-text-primary",
 								children: "Top customers"
 							}), /* @__PURE__ */ v("p", {
-								className: "mt-1 text-sm text-muted-foreground",
+								className: "mt-1 text-sm text-text-muted",
 								children: "Ranked by estimated monthly recurring revenue from active subscriptions."
 							})]
 						}), /* @__PURE__ */ v("div", {
 							className: "p-4",
 							children: K.length === 0 ? /* @__PURE__ */ v("p", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-text-muted",
 								children: "No customer revenue data available yet."
 							}) : /* @__PURE__ */ v("div", {
 								className: "space-y-3",
@@ -434,19 +434,19 @@ var j = () => {
 									children: [/* @__PURE__ */ y("div", {
 										className: "min-w-0",
 										children: [/* @__PURE__ */ v("p", {
-											className: "truncate font-medium text-foreground",
+											className: "truncate font-medium text-text-primary",
 											children: e.name
 										}), /* @__PURE__ */ v("p", {
-											className: "truncate text-sm text-muted-foreground",
+											className: "truncate text-sm text-text-muted",
 											children: e.email
 										})]
 									}), /* @__PURE__ */ y("div", {
 										className: "text-left sm:text-right",
 										children: [/* @__PURE__ */ y("p", {
-											className: "text-sm font-semibold text-foreground",
+											className: "text-sm font-semibold text-text-primary",
 											children: [A(e.estimatedMrr, V), " / month"]
 										}), /* @__PURE__ */ y("p", {
-											className: "text-xs text-muted-foreground",
+											className: "text-xs text-text-muted",
 											children: [
 												e.activeSubscriptions,
 												" active subscription",