@burdenoff/microfe-billing 2026.517.1 → 2026.517.2

package/dist/billing/modules/subscriptions/pages/SubscriptionsListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubscriptionsListPage.js","names":[],"sources":["../../../../../src/billing/modules/subscriptions/pages/SubscriptionsListPage.tsx"],"sourcesContent":["/**\n * Subscriptions Module - Subscriptions List Page\n * Displays paginated subscriptions for the selected billing account\n */\n\nimport { useState, type FC } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBillingAccounts, usePaginatedSubscriptions } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { BillingSubscription, SubscriptionStatus, BillingAccount } from '../../../shared/types';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport {\n  formatCurrency,\n  formatDate,\n  formatPlanDuration,\n  formatSubscriptionStatus,\n} from '../../../shared/utils/format';\nimport { getSubscriptionStatusColor, getStatusBadgeClasses } from '../../../shared/utils/status';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ntype FilterStatus = 'all' | 'active' | 'canceled' | 'inactive';\n\n// Statuses that count as \"inactive\" (historical/past subscriptions)\nconst INACTIVE_STATUSES = ['expired', 'upgraded'] as const;\n\nconst PAGE_SIZE = 10;\n\nexport const SubscriptionsListPage: 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 { orgId } = useBilling();\n\n  // Fetch all billing accounts for the selector\n  const { billingAccounts, isLoading: isLoadingAccounts } = useBillingAccounts();\n\n  // State\n  const {\n    selectedAccountId: selectedBillingAccountId,\n    setSelectedAccountId: setSelectedBillingAccountId,\n  } = useBillingAccountSelection({\n    orgId,\n    billingAccounts,\n    syncFromUrl: true,\n    urlParamName: 'billingAccountId',\n  });\n\n  const [isAccountSelectorOpen, setIsAccountSelectorOpen] = useState(false);\n  const [filterStatus, setFilterStatus] = useState<FilterStatus>('all');\n  const [searchQuery, setSearchQuery] = useState('');\n  const [currentPage, setCurrentPage] = useState(1);\n\n  // Fetch paginated subscriptions for selected billing account\n  const {\n    subscriptions,\n    activeSubscriptions,\n    totalCount,\n    totalPages,\n    isLoading: isLoadingSubscriptions,\n    error,\n    refetch,\n  } = usePaginatedSubscriptions(selectedBillingAccountId ?? undefined, currentPage, PAGE_SIZE);\n\n  // Get selected billing account info from the list\n  const selectedBillingAccount = billingAccounts.find((a) => a.id === selectedBillingAccountId);\n\n  // Handle account selection\n  const handleSelectAccount = (account: BillingAccount) => {\n    setSelectedBillingAccountId(account.id);\n    setIsAccountSelectorOpen(false);\n    setCurrentPage(1); // Reset to first page when switching accounts\n  };\n\n  // Handle page change\n  const handlePageChange = (newPage: number) => {\n    setCurrentPage(newPage);\n  };\n\n  // Filter subscriptions (client-side filtering for status and search)\n  const filteredSubscriptions = subscriptions.filter((subscription) => {\n    // Status filter\n    if (filterStatus !== 'all') {\n      if (filterStatus === 'inactive') {\n        if (\n          !INACTIVE_STATUSES.includes(subscription.status as (typeof INACTIVE_STATUSES)[number])\n        ) {\n          return false;\n        }\n      } else if (subscription.status !== filterStatus) {\n        return false;\n      }\n    }\n\n    // Search filter\n    if (searchQuery) {\n      const query = searchQuery.toLowerCase();\n      const planName = subscription.plan?.name?.toLowerCase() || '';\n      return planName.includes(query) || subscription.id.toLowerCase().includes(query);\n    }\n\n    return true;\n  });\n\n  const isLoading = isLoadingAccounts || isLoadingSubscriptions;\n\n  // Permission check\n  if (!permissions.canViewSubscriptions) {\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=\"w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center\">\n            <svg\n              className=\"w-6 h-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\">Access Denied</h2>\n          <p className=\"text-sm text-muted-foreground max-w-sm\">\n            You don&apos;t have permission to view subscriptions.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Loading state\n  if (isLoading && !selectedBillingAccount) {\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=\"space-y-4\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"border border-border rounded-lg p-6\">\n              <div className=\"flex items-center gap-4\">\n                <div className=\"h-12 w-12 bg-muted animate-pulse rounded\" />\n                <div className=\"flex-1 space-y-2\">\n                  <div className=\"h-5 w-32 bg-muted animate-pulse rounded\" />\n                  <div className=\"h-4 w-48 bg-muted animate-pulse rounded\" />\n                </div>\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=\"w-12 h-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center\">\n            <svg\n              className=\"w-6 h-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\">Failed to load subscriptions</h2>\n          <p className=\"text-sm text-muted-foreground\">{error.message}</p>\n          <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.subscriptions.title', 'Subscriptions')}\n          </h1>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {tr('billing.subscriptions.subtitle', 'Manage your active and past subscriptions')}\n          </p>\n        </div>\n\n        {permissions.canCreateSubscription && (\n          <button\n            onClick={() => navigateTo('/plans')}\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=\"w-4 h-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            New Subscription\n          </button>\n        )}\n      </div>\n\n      {/* Account Selector (if multiple accounts) */}\n      {billingAccounts.length > 1 && (\n        <div className=\"relative\">\n          <button\n            onClick={() => setIsAccountSelectorOpen(!isAccountSelectorOpen)}\n            className=\"w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border rounded-lg bg-card hover:bg-muted/50 transition-colors\"\n          >\n            <div className=\"flex items-center gap-3\">\n              <div className=\"w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center\">\n                <svg\n                  className=\"w-4 h-4 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=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                  />\n                </svg>\n              </div>\n              <div className=\"text-left\">\n                <p className=\"text-sm font-medium text-foreground\">\n                  {selectedBillingAccount?.name || 'Select Account'}\n                </p>\n                <p className=\"text-xs text-muted-foreground\">{selectedBillingAccount?.email}</p>\n              </div>\n            </div>\n            <svg\n              className={`w-4 h-4 text-muted-foreground transition-transform ${isAccountSelectorOpen ? 'rotate-180' : ''}`}\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 9l-7 7-7-7\"\n              />\n            </svg>\n          </button>\n\n          {isAccountSelectorOpen && (\n            <>\n              <div className=\"fixed inset-0 z-10\" onClick={() => setIsAccountSelectorOpen(false)} />\n              <div className=\"absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto\">\n                {billingAccounts.map((account) => (\n                  <button\n                    key={account.id}\n                    onClick={() => handleSelectAccount(account)}\n                    className=\"w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors\"\n                  >\n                    <div className=\"flex items-center gap-3 min-w-0\">\n                      <div className=\"w-8 h-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0\">\n                        <svg\n                          className=\"w-4 h-4 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=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                          />\n                        </svg>\n                      </div>\n                      <div className=\"text-left min-w-0\">\n                        <p className=\"text-sm font-medium text-foreground truncate\">\n                          {account.name}\n                        </p>\n                        <p className=\"text-xs text-muted-foreground truncate\">{account.email}</p>\n                      </div>\n                    </div>\n                    {selectedBillingAccount?.id === account.id && (\n                      <svg\n                        className=\"w-4 h-4 text-primary flex-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                    )}\n                  </button>\n                ))}\n              </div>\n            </>\n          )}\n        </div>\n      )}\n\n      {/* Account Summary */}\n      {selectedBillingAccount && (\n        <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n          <div className=\"border border-border rounded-lg bg-card p-4\">\n            <p className=\"text-sm text-muted-foreground\">Account</p>\n            <p className=\"text-lg font-semibold text-foreground mt-1\">\n              {selectedBillingAccount.name}\n            </p>\n          </div>\n          <div className=\"border border-border rounded-lg bg-card p-4\">\n            <p className=\"text-sm text-muted-foreground\">Active Subscriptions</p>\n            <p className=\"text-lg font-semibold text-status-success-text mt-1\">\n              {activeSubscriptions.length}\n            </p>\n          </div>\n          <div className=\"border border-border rounded-lg bg-card p-4\">\n            <p className=\"text-sm text-muted-foreground\">Credit Balance</p>\n            <p className=\"text-lg font-semibold text-foreground mt-1\">\n              {(selectedBillingAccount.creditAmount || 0).toLocaleString()} Credits\n            </p>\n          </div>\n        </div>\n      )}\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border\">\n        {/* Status Filter */}\n        <div className=\"inline-flex rounded-lg border border-border p-1 bg-muted/50\">\n          {(['all', 'active', 'canceled', 'inactive'] as FilterStatus[]).map((status) => (\n            <button\n              key={status}\n              onClick={() => setFilterStatus(status)}\n              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors capitalize ${\n                filterStatus === status\n                  ? 'bg-background text-foreground shadow-sm'\n                  : 'text-muted-foreground hover:text-foreground'\n              }`}\n            >\n              {status === 'inactive' ? 'Inactive' : status}\n            </button>\n          ))}\n        </div>\n\n        {/* Search */}\n        <div className=\"relative flex-1 min-w-[200px] max-w-md\">\n          <svg\n            className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 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=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n            />\n          </svg>\n          <input\n            type=\"text\"\n            placeholder={tr('billing.subscriptions.searchPlaceholder', 'Search subscriptions...')}\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            className=\"w-full pl-[3.25rem] pr-4 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent\"\n          />\n        </div>\n\n        {/* Total Count */}\n        <div className=\"text-sm text-muted-foreground\">\n          {totalCount} subscription{totalCount !== 1 ? 's' : ''} total\n        </div>\n      </div>\n\n      {/* Subscriptions List */}\n      {filteredSubscriptions.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg\">\n          <div className=\"w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4\">\n            <svg\n              className=\"w-6 h-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=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-foreground\">\n            {tr('billing.subscriptions.noSubscriptionsFound', 'No subscriptions found')}\n          </h3>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {filterStatus !== 'all' || searchQuery\n              ? 'No subscriptions match your filters.'\n              : \"You don't have any subscriptions yet.\"}\n          </p>\n          {permissions.canCreateSubscription && filterStatus === 'all' && !searchQuery && (\n            <button\n              onClick={() => navigateTo('/plans')}\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              Browse Plans\n            </button>\n          )}\n        </div>\n      ) : (\n        <div className=\"space-y-4\">\n          {filteredSubscriptions.map((subscription) => (\n            <SubscriptionCard\n              key={subscription.id}\n              subscription={subscription}\n              onView={() =>\n                navigateTo(\n                  withBillingAccountId(\n                    `/subscriptions/${subscription.id}`,\n                    subscription.billingAccountId\n                  )\n                )\n              }\n              canCancel={permissions.canCancelSubscription}\n            />\n          ))}\n        </div>\n      )}\n\n      {/* Pagination */}\n      {totalPages > 1 && (\n        <div className=\"flex items-center justify-center gap-2 pt-4\">\n          <button\n            onClick={() => handlePageChange(currentPage - 1)}\n            disabled={currentPage === 1}\n            className=\"px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors\"\n          >\n            <svg className=\"w-4 h-4\" 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\n          <div className=\"flex items-center gap-1\">\n            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => {\n              // Show first, last, current, and adjacent pages\n              const showPage =\n                page === 1 || page === totalPages || Math.abs(page - currentPage) <= 1;\n\n              // Show ellipsis\n              const showEllipsisBefore = page === currentPage - 2 && currentPage > 3;\n              const showEllipsisAfter = page === currentPage + 2 && currentPage < totalPages - 2;\n\n              if (showEllipsisBefore || showEllipsisAfter) {\n                return (\n                  <span key={page} className=\"px-2 text-muted-foreground\">\n                    ...\n                  </span>\n                );\n              }\n\n              if (!showPage) return null;\n\n              return (\n                <button\n                  key={page}\n                  onClick={() => handlePageChange(page)}\n                  className={`px-3 py-1.5 text-sm rounded-md transition-colors ${\n                    page === currentPage\n                      ? 'bg-primary text-primary-foreground'\n                      : 'border border-border hover:bg-muted'\n                  }`}\n                >\n                  {page}\n                </button>\n              );\n            })}\n          </div>\n\n          <button\n            onClick={() => handlePageChange(currentPage + 1)}\n            disabled={currentPage === totalPages}\n            className=\"px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Subscription Card Component\n// ============================================================================\n\ninterface SubscriptionCardProps {\n  subscription: BillingSubscription;\n  onView: () => void;\n  canCancel: boolean;\n}\n\nconst SubscriptionCard: FC<SubscriptionCardProps> = ({\n  subscription,\n  onView,\n  canCancel: _canCancel,\n}) => {\n  const plan = subscription.plan;\n  const statusColor = getSubscriptionStatusColor(subscription.status);\n  const isActive = subscription.status === ('active' as SubscriptionStatus);\n\n  // Calculate days remaining\n  const endDate = new Date(subscription.endDate);\n  const now = new Date();\n  const daysRemaining = Math.max(\n    0,\n    Math.ceil((endDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))\n  );\n\n  return (\n    <div\n      className=\"border border-border rounded-lg bg-card hover:shadow-md transition-shadow cursor-pointer\"\n      onClick={onView}\n    >\n      <div className=\"p-6\">\n        <div className=\"flex flex-col sm:flex-row sm:items-center gap-4\">\n          {/* Plan Icon */}\n          <div className=\"w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0\">\n            <svg\n              className=\"w-6 h-6 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=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"\n              />\n            </svg>\n          </div>\n\n          {/* Subscription Info */}\n          <div className=\"flex-1 min-w-0\">\n            <div className=\"flex items-center gap-2 flex-wrap\">\n              <h3 className=\"font-semibold text-foreground\">{plan?.name || 'Unknown Plan'}</h3>\n              <span\n                className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n              >\n                {formatSubscriptionStatus(subscription.status)}\n              </span>\n            </div>\n            <div className=\"flex items-center gap-4 mt-1 text-sm text-muted-foreground\">\n              <span>\n                {plan ? formatCurrency(plan.price, plan.currency) : '—'} /{' '}\n                {plan ? formatPlanDuration(plan.duration) : '—'}\n              </span>\n              <span className=\"hidden sm:inline\">•</span>\n              <span className=\"hidden sm:inline\">\n                Started {formatDate(subscription.startDate, 'short')}\n              </span>\n            </div>\n          </div>\n\n          {/* Right Side Info */}\n          <div className=\"flex items-center gap-4\">\n            {isActive && (\n              <div className=\"text-right\">\n                <p className=\"text-sm font-medium text-foreground\">{daysRemaining} days</p>\n                <p className=\"text-xs text-muted-foreground\">remaining</p>\n              </div>\n            )}\n            <button\n              onClick={(e) => {\n                e.stopPropagation();\n                onView();\n              }}\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          </div>\n        </div>\n\n        {/* Additional Info */}\n        {subscription.addonSubscriptions && subscription.addonSubscriptions.length > 0 && (\n          <div className=\"mt-4 pt-4 border-t border-border\">\n            <p className=\"text-sm text-muted-foreground\">\n              {subscription.addonSubscriptions.length} addon\n              {subscription.addonSubscriptions.length !== 1 ? 's' : ''} attached\n            </p>\n          </div>\n        )}\n\n        {/* Cancellation Info */}\n        {subscription.canceledAt && (\n          <div className=\"mt-4 pt-4 border-t border-border\">\n            <p className=\"text-sm text-muted-foreground\">\n              Canceled on {formatDate(subscription.canceledAt)}\n              {subscription.cancellationReason && <span> — {subscription.cancellationReason}</span>}\n            </p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SubscriptionsListPage.js","names":[],"sources":["../../../../../src/billing/modules/subscriptions/pages/SubscriptionsListPage.tsx"],"sourcesContent":["/**\n * Subscriptions Module - Subscriptions List Page\n * Displays paginated subscriptions for the selected billing account\n */\n\nimport { useState, useEffect, useRef, type FC } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBillingAccounts, usePaginatedSubscriptions } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { BillingSubscription, SubscriptionStatus, BillingAccount } from '../../../shared/types';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport {\n  formatCurrency,\n  formatDate,\n  formatPlanDuration,\n  formatSubscriptionStatus,\n} from '../../../shared/utils/format';\nimport { getSubscriptionStatusColor, getStatusBadgeClasses } from '../../../shared/utils/status';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ntype FilterStatus = 'all' | 'active' | 'canceled' | 'inactive';\n\n// Statuses that count as \"inactive\" (historical/past subscriptions)\nconst INACTIVE_STATUSES = ['expired', 'upgraded'] as const;\n\nconst PAGE_SIZE = 10;\n\nexport const SubscriptionsListPage: 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 { orgId } = useBilling();\n\n  // Fetch all billing accounts for the selector\n  const { billingAccounts, isLoading: isLoadingAccounts } = useBillingAccounts();\n\n  // State\n  const {\n    selectedAccountId: selectedBillingAccountId,\n    setSelectedAccountId: setSelectedBillingAccountId,\n  } = useBillingAccountSelection({\n    orgId,\n    billingAccounts,\n    syncFromUrl: true,\n    urlParamName: 'billingAccountId',\n  });\n\n  const [isAccountSelectorOpen, setIsAccountSelectorOpen] = useState(false);\n  const [filterStatus, setFilterStatus] = useState<FilterStatus>('all');\n  const [searchQuery, setSearchQuery] = useState('');\n  const [debouncedSearch, setDebouncedSearch] = useState('');\n  const [currentPage, setCurrentPage] = useState(1);\n  const debounceTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  useEffect(() => {\n    clearTimeout(debounceTimer.current);\n    debounceTimer.current = setTimeout(() => {\n      setDebouncedSearch(searchQuery);\n      setCurrentPage(1);\n    }, 400);\n    return () => clearTimeout(debounceTimer.current);\n  }, [searchQuery]);\n\n  // Fetch paginated subscriptions for selected billing account\n  const {\n    subscriptions,\n    activeSubscriptions,\n    totalCount,\n    totalPages,\n    isLoading: isLoadingSubscriptions,\n    error,\n    refetch,\n  } = usePaginatedSubscriptions(\n    selectedBillingAccountId ?? undefined,\n    currentPage,\n    PAGE_SIZE,\n    debouncedSearch || undefined\n  );\n\n  // Get selected billing account info from the list\n  const selectedBillingAccount = billingAccounts.find((a) => a.id === selectedBillingAccountId);\n\n  // Handle account selection\n  const handleSelectAccount = (account: BillingAccount) => {\n    setSelectedBillingAccountId(account.id);\n    setIsAccountSelectorOpen(false);\n    setCurrentPage(1); // Reset to first page when switching accounts\n  };\n\n  // Handle page change\n  const handlePageChange = (newPage: number) => {\n    setCurrentPage(newPage);\n  };\n\n  // Client-side status filter only; search is handled by the backend\n  const filteredSubscriptions = subscriptions.filter((subscription) => {\n    if (filterStatus === 'all') return true;\n    if (filterStatus === 'inactive') {\n      return INACTIVE_STATUSES.includes(subscription.status as (typeof INACTIVE_STATUSES)[number]);\n    }\n    return subscription.status === filterStatus;\n  });\n\n  const isLoading = isLoadingAccounts || isLoadingSubscriptions;\n\n  // Permission check\n  if (!permissions.canViewSubscriptions) {\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=\"w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center\">\n            <svg\n              className=\"w-6 h-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\">Access Denied</h2>\n          <p className=\"text-sm text-muted-foreground max-w-sm\">\n            You don&apos;t have permission to view subscriptions.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Loading state\n  if (isLoading && !selectedBillingAccount) {\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=\"space-y-4\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"border border-border rounded-lg p-6\">\n              <div className=\"flex items-center gap-4\">\n                <div className=\"h-12 w-12 bg-muted animate-pulse rounded\" />\n                <div className=\"flex-1 space-y-2\">\n                  <div className=\"h-5 w-32 bg-muted animate-pulse rounded\" />\n                  <div className=\"h-4 w-48 bg-muted animate-pulse rounded\" />\n                </div>\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=\"w-12 h-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center\">\n            <svg\n              className=\"w-6 h-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\">Failed to load subscriptions</h2>\n          <p className=\"text-sm text-muted-foreground\">{error.message}</p>\n          <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.subscriptions.title', 'Subscriptions')}\n          </h1>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {tr('billing.subscriptions.subtitle', 'Manage your active and past subscriptions')}\n          </p>\n        </div>\n\n        {permissions.canCreateSubscription && (\n          <button\n            onClick={() => navigateTo('/plans')}\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=\"w-4 h-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            New Subscription\n          </button>\n        )}\n      </div>\n\n      {/* Account Selector (if multiple accounts) */}\n      {billingAccounts.length > 1 && (\n        <div className=\"relative\">\n          <button\n            onClick={() => setIsAccountSelectorOpen(!isAccountSelectorOpen)}\n            className=\"w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border rounded-lg bg-card hover:bg-muted/50 transition-colors\"\n          >\n            <div className=\"flex items-center gap-3\">\n              <div className=\"w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center\">\n                <svg\n                  className=\"w-4 h-4 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=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                  />\n                </svg>\n              </div>\n              <div className=\"text-left\">\n                <p className=\"text-sm font-medium text-foreground\">\n                  {selectedBillingAccount?.name || 'Select Account'}\n                </p>\n                <p className=\"text-xs text-muted-foreground\">{selectedBillingAccount?.email}</p>\n              </div>\n            </div>\n            <svg\n              className={`w-4 h-4 text-muted-foreground transition-transform ${isAccountSelectorOpen ? 'rotate-180' : ''}`}\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 9l-7 7-7-7\"\n              />\n            </svg>\n          </button>\n\n          {isAccountSelectorOpen && (\n            <>\n              <div className=\"fixed inset-0 z-10\" onClick={() => setIsAccountSelectorOpen(false)} />\n              <div className=\"absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto\">\n                {billingAccounts.map((account) => (\n                  <button\n                    key={account.id}\n                    onClick={() => handleSelectAccount(account)}\n                    className=\"w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors\"\n                  >\n                    <div className=\"flex items-center gap-3 min-w-0\">\n                      <div className=\"w-8 h-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0\">\n                        <svg\n                          className=\"w-4 h-4 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=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                          />\n                        </svg>\n                      </div>\n                      <div className=\"text-left min-w-0\">\n                        <p className=\"text-sm font-medium text-foreground truncate\">\n                          {account.name}\n                        </p>\n                        <p className=\"text-xs text-muted-foreground truncate\">{account.email}</p>\n                      </div>\n                    </div>\n                    {selectedBillingAccount?.id === account.id && (\n                      <svg\n                        className=\"w-4 h-4 text-primary flex-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                    )}\n                  </button>\n                ))}\n              </div>\n            </>\n          )}\n        </div>\n      )}\n\n      {/* Account Summary */}\n      {selectedBillingAccount && (\n        <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n          <div className=\"border border-border rounded-lg bg-card p-4\">\n            <p className=\"text-sm text-muted-foreground\">Account</p>\n            <p className=\"text-lg font-semibold text-foreground mt-1\">\n              {selectedBillingAccount.name}\n            </p>\n          </div>\n          <div className=\"border border-border rounded-lg bg-card p-4\">\n            <p className=\"text-sm text-muted-foreground\">Active Subscriptions</p>\n            <p className=\"text-lg font-semibold text-status-success-text mt-1\">\n              {activeSubscriptions.length}\n            </p>\n          </div>\n          <div className=\"border border-border rounded-lg bg-card p-4\">\n            <p className=\"text-sm text-muted-foreground\">Credit Balance</p>\n            <p className=\"text-lg font-semibold text-foreground mt-1\">\n              {(selectedBillingAccount.creditAmount || 0).toLocaleString()} Credits\n            </p>\n          </div>\n        </div>\n      )}\n\n      {/* Filters */}\n      <div className=\"flex flex-col sm:flex-row flex-wrap items-stretch sm:items-center gap-3 sm:gap-4 pb-4 border-b border-border\">\n        {/* Status Filter */}\n        <div className=\"inline-flex rounded-lg border border-border p-1 bg-muted/50 flex-wrap\">\n          {(['all', 'active', 'canceled', 'inactive'] as FilterStatus[]).map((status) => (\n            <button\n              key={status}\n              onClick={() => setFilterStatus(status)}\n              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors capitalize ${\n                filterStatus === status\n                  ? 'bg-background text-foreground shadow-sm'\n                  : 'text-muted-foreground hover:text-foreground'\n              }`}\n            >\n              {status === 'inactive' ? 'Inactive' : status}\n            </button>\n          ))}\n        </div>\n\n        {/* Search */}\n        <div className=\"relative flex-1 min-w-0 w-full sm:max-w-md\">\n          <svg\n            className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 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=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n            />\n          </svg>\n          <input\n            type=\"text\"\n            placeholder={tr('billing.subscriptions.searchPlaceholder', 'Search subscriptions...')}\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            className=\"w-full pl-[3.25rem] pr-4 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent\"\n          />\n        </div>\n\n        {/* Total Count */}\n        <div className=\"text-sm text-muted-foreground\">\n          {totalCount} subscription{totalCount !== 1 ? 's' : ''} total\n        </div>\n      </div>\n\n      {/* Subscriptions List */}\n      {filteredSubscriptions.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg\">\n          <div className=\"w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4\">\n            <svg\n              className=\"w-6 h-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=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-foreground\">\n            {tr('billing.subscriptions.noSubscriptionsFound', 'No subscriptions found')}\n          </h3>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {filterStatus !== 'all' || debouncedSearch\n              ? 'No subscriptions match your filters.'\n              : \"You don't have any subscriptions yet.\"}\n          </p>\n          {permissions.canCreateSubscription && filterStatus === 'all' && !debouncedSearch && (\n            <button\n              onClick={() => navigateTo('/plans')}\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              Browse Plans\n            </button>\n          )}\n        </div>\n      ) : (\n        <div className=\"space-y-4\">\n          {filteredSubscriptions.map((subscription) => (\n            <SubscriptionCard\n              key={subscription.id}\n              subscription={subscription}\n              onView={() =>\n                navigateTo(\n                  withBillingAccountId(\n                    `/subscriptions/${subscription.id}`,\n                    subscription.billingAccountId\n                  )\n                )\n              }\n              canCancel={permissions.canCancelSubscription}\n            />\n          ))}\n        </div>\n      )}\n\n      {/* Pagination */}\n      {totalPages > 1 && (\n        <div className=\"flex items-center justify-center gap-2 pt-4\">\n          <button\n            onClick={() => handlePageChange(currentPage - 1)}\n            disabled={currentPage === 1}\n            className=\"px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors\"\n          >\n            <svg className=\"w-4 h-4\" 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\n          <div className=\"flex items-center gap-1\">\n            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => {\n              // Show first, last, current, and adjacent pages\n              const showPage =\n                page === 1 || page === totalPages || Math.abs(page - currentPage) <= 1;\n\n              // Show ellipsis\n              const showEllipsisBefore = page === currentPage - 2 && currentPage > 3;\n              const showEllipsisAfter = page === currentPage + 2 && currentPage < totalPages - 2;\n\n              if (showEllipsisBefore || showEllipsisAfter) {\n                return (\n                  <span key={page} className=\"px-2 text-muted-foreground\">\n                    ...\n                  </span>\n                );\n              }\n\n              if (!showPage) return null;\n\n              return (\n                <button\n                  key={page}\n                  onClick={() => handlePageChange(page)}\n                  className={`px-3 py-1.5 text-sm rounded-md transition-colors ${\n                    page === currentPage\n                      ? 'bg-primary text-primary-foreground'\n                      : 'border border-border hover:bg-muted'\n                  }`}\n                >\n                  {page}\n                </button>\n              );\n            })}\n          </div>\n\n          <button\n            onClick={() => handlePageChange(currentPage + 1)}\n            disabled={currentPage === totalPages}\n            className=\"px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Subscription Card Component\n// ============================================================================\n\ninterface SubscriptionCardProps {\n  subscription: BillingSubscription;\n  onView: () => void;\n  canCancel: boolean;\n}\n\nconst SubscriptionCard: FC<SubscriptionCardProps> = ({\n  subscription,\n  onView,\n  canCancel: _canCancel,\n}) => {\n  const plan = subscription.plan;\n  const statusColor = getSubscriptionStatusColor(subscription.status);\n  const isActive = subscription.status === ('active' as SubscriptionStatus);\n\n  // Calculate days remaining\n  const endDate = new Date(subscription.endDate);\n  const now = new Date();\n  const daysRemaining = Math.max(\n    0,\n    Math.ceil((endDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))\n  );\n\n  return (\n    <div\n      className=\"border border-border rounded-lg bg-card hover:shadow-md transition-shadow cursor-pointer\"\n      onClick={onView}\n    >\n      <div className=\"p-6\">\n        <div className=\"flex flex-col sm:flex-row sm:items-center gap-4\">\n          {/* Plan Icon */}\n          <div className=\"w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0\">\n            <svg\n              className=\"w-6 h-6 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=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"\n              />\n            </svg>\n          </div>\n\n          {/* Subscription Info */}\n          <div className=\"flex-1 min-w-0\">\n            <div className=\"flex items-center gap-2 flex-wrap\">\n              <h3 className=\"font-semibold text-foreground\">{plan?.name || 'Unknown Plan'}</h3>\n              <span\n                className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n              >\n                {formatSubscriptionStatus(subscription.status)}\n              </span>\n            </div>\n            <div className=\"flex items-center gap-4 mt-1 text-sm text-muted-foreground\">\n              <span>\n                {plan ? formatCurrency(plan.price, plan.currency) : '—'} /{' '}\n                {plan ? formatPlanDuration(plan.duration) : '—'}\n              </span>\n              <span className=\"hidden sm:inline\">•</span>\n              <span className=\"hidden sm:inline\">\n                Started {formatDate(subscription.startDate, 'short')}\n              </span>\n            </div>\n          </div>\n\n          {/* Right Side Info */}\n          <div className=\"flex items-center gap-4\">\n            {isActive && (\n              <div className=\"text-right\">\n                <p className=\"text-sm font-medium text-foreground\">{daysRemaining} days</p>\n                <p className=\"text-xs text-muted-foreground\">remaining</p>\n              </div>\n            )}\n            <button\n              onClick={(e) => {\n                e.stopPropagation();\n                onView();\n              }}\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          </div>\n        </div>\n\n        {/* Additional Info */}\n        {subscription.addonSubscriptions && subscription.addonSubscriptions.length > 0 && (\n          <div className=\"mt-4 pt-4 border-t border-border\">\n            <p className=\"text-sm text-muted-foreground\">\n              {subscription.addonSubscriptions.length} addon\n              {subscription.addonSubscriptions.length !== 1 ? 's' : ''} attached\n            </p>\n          </div>\n        )}\n\n        {/* Cancellation Info */}\n        {subscription.canceledAt && (\n          <div className=\"mt-4 pt-4 border-t border-border\">\n            <p className=\"text-sm text-muted-foreground\">\n              Canceled on {formatDate(subscription.canceledAt)}\n              {subscription.cancellationReason && <span> — {subscription.cancellationReason}</span>}\n            </p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/usage/hooks/useUsage.d.ts

@@ -27,6 +27,7 @@ interface QuotaAssignmentSummary {
     usagePercentage: number;
     noLimit: boolean;
     subscriptionId?: string;
+    context?: Record<string, unknown> | null;
     recentUsages: Array<{
         id: string;
         amount: number;
@@ -42,6 +43,8 @@ interface QuotaAssignmentSummary {
  */
 export interface AggregatedQuota {
     name: string;
+    displayName?: string;
+    description?: string;
     unit: string;
     totalLimit: number;
     totalUsed: number;

package/dist/billing/modules/usage/hooks/useUsage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useUsage.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/usage/hooks/useUsage.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useUsage.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/usage/hooks/useUsage.ts"],"names":[],"mappings":"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"}

package/dist/billing/modules/usage/hooks/useUsage.js

@@ -31,9 +31,11 @@ function h(e) {
 	}
 	let n = [];
 	for (let [e, r] of t) {
-		let t = r.reduce((e, t) => e + (t.limit || 0), 0), i = r.reduce((e, t) => e + (t.used || 0), 0), a = r.reduce((e, t) => e + (t.limitLeft || 0), 0), o = t === 0 && r.every((e) => e.noLimit || (e.limit || 0) === 0), s = o || t === 0 ? 0 : i / t * 100, c = m(s, a), l = r[0]?.reusable || !1, u = r[0]?.unit || "";
+		let t = r.reduce((e, t) => e + (t.limit || 0), 0), i = r.reduce((e, t) => e + (t.used || 0), 0), a = r.reduce((e, t) => e + (t.limitLeft || 0), 0), o = t === 0 && r.every((e) => e.noLimit || (e.limit || 0) === 0), s = o || t === 0 ? 0 : i / t * 100, c = m(s, a), l = r[0]?.reusable || !1, u = r[0]?.unit || "", d = r[0]?.context, f = typeof d?.displayName == "string" ? d.displayName : void 0, p = typeof d?.description == "string" ? d.description : void 0;
 		n.push({
 			name: e,
+			displayName: f,
+			description: p,
 			unit: u,
 			totalLimit: o ? 0 : t,
 			totalUsed: i,
@@ -118,6 +120,7 @@ function y(e, t = {}) {
 				usagePercentage: a,
 				noLimit: t.limits?.type !== "number" && t.limits?.type !== "numeric",
 				subscriptionId: e.id,
+				context: t.context,
 				recentUsages: [],
 				createdAt: t.createdAt,
 				endtime: t.endtime

package/dist/billing/modules/usage/hooks/useUsage.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUsage.js","names":[],"sources":["../../../../../src/billing/modules/usage/hooks/useUsage.ts"],"sourcesContent":["/**\n * Usage Module - Hooks\n * Custom hooks for usage data fetching and mutations\n */\n\nimport { useMemo, useCallback, useState, useEffect } from 'react';\nimport {\n  useGetUsageDashboardQuery,\n  useGetBillingAccountQuotasSummaryForUsageQuery,\n  useGetSubscriptionsWithQuotasQuery,\n  useGetPastSubscriptionsWithQuotasQuery,\n  useGetBillingAccountsForUsageQuery,\n  useGetQuotaAnalyticsForUsageQuery,\n  type GetPastSubscriptionsWithQuotasQuery,\n} from '../../../../generated/global-operations';\nimport {\n  useGetUsageRecordsQuery,\n  type GetUsageRecordsQuery,\n  type GetUsageRecordsQueryVariables,\n} from '../../../../generated/wspace-operations';\nimport { useGatewayClient } from '@burdenoff/fe-libs/shared/graphql';\nimport { AnalyticsPeriod, QuotaStatus } from '../../../shared/types';\nimport type { UsageDashboard } from '../../../shared/types';\n\n// ============================================================================\n// Dashboard Hook\n// ============================================================================\n\ninterface UseUsageDashboardParams {\n  billingAccountId?: string;\n  period?: AnalyticsPeriod;\n}\n\ninterface UseUsageDashboardResult {\n  dashboard: UsageDashboard | null;\n  isLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\nexport function useUsageDashboard({\n  billingAccountId,\n  period = AnalyticsPeriod.LAST_30_DAYS,\n}: UseUsageDashboardParams): UseUsageDashboardResult {\n  const { data, loading, error, refetch } = useGetUsageDashboardQuery({\n    variables: { billingAccountId: billingAccountId!, period },\n    skip: !billingAccountId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    dashboard: data?.getUsageDashboard ?? null,\n    isLoading: loading,\n    error: error ?? null,\n    refetch,\n  };\n}\n\n// ============================================================================\n// Enhanced Usage Page Hooks\n// ============================================================================\n\n/**\n * Quota assignment from the API\n */\ninterface QuotaAssignmentSummary {\n  id: string;\n  name: string;\n  unit: string;\n  quotaType: 'POOLED' | 'PRODUCT_SPECIFIC';\n  reusable: boolean;\n  limit: number;\n  limitLeft: number;\n  used: number;\n  usagePercentage: number;\n  noLimit: boolean;\n  subscriptionId?: string;\n  recentUsages: Array<{\n    id: string;\n    amount: number;\n    description: string;\n    timestamp: string;\n    tags?: Record<string, unknown>;\n  }>;\n  createdAt: string;\n  endtime: string;\n}\n\n/**\n * Aggregated quota for display (multiple quota assignments with same name combined)\n */\nexport interface AggregatedQuota {\n  name: string;\n  unit: string;\n  totalLimit: number;\n  totalUsed: number;\n  usagePercentage: number;\n  status: QuotaStatus;\n  quotaCount: number;\n  noLimit: boolean;\n  reusable: boolean;\n  quotaAssignments: QuotaAssignmentSummary[];\n}\n\n/**\n * Subscription with aggregated quotas\n */\nexport interface SubscriptionWithAggregatedQuotas {\n  id: string;\n  status: string;\n  planName?: string;\n  productId?: string;\n  createdAt: string;\n  aggregatedQuotas: AggregatedQuota[];\n}\n\n/**\n * Helper function to calculate quota status based on usage percentage\n */\nfunction calculateQuotaStatus(usagePercentage: number, limitLeft: number): QuotaStatus {\n  if (limitLeft <= 0) return QuotaStatus.EXHAUSTED;\n  if (usagePercentage >= 90) return QuotaStatus.CRITICAL;\n  if (usagePercentage >= 75) return QuotaStatus.WARNING;\n  return QuotaStatus.HEALTHY;\n}\n\n/**\n * Helper function to aggregate quotas by name\n */\nfunction aggregateQuotasByName(quotas: QuotaAssignmentSummary[]): AggregatedQuota[] {\n  const grouped = new Map<string, QuotaAssignmentSummary[]>();\n\n  for (const quota of quotas) {\n    const existing = grouped.get(quota.name) || [];\n    existing.push(quota);\n    grouped.set(quota.name, existing);\n  }\n\n  const aggregated: AggregatedQuota[] = [];\n\n  for (const [name, assignments] of grouped) {\n    // Sum up limits and usage first\n    const totalLimit = assignments.reduce((sum, q) => sum + (q.limit || 0), 0);\n    const totalUsed = assignments.reduce((sum, q) => sum + (q.used || 0), 0);\n    const totalLimitLeft = assignments.reduce((sum, q) => sum + (q.limitLeft || 0), 0);\n\n    // Check if there's actually no limit (ignore noLimit flag if there's a numeric limit)\n    // Only treat as unlimited if totalLimit is 0 or all assignments explicitly have noLimit AND no numeric limit\n    const hasNoLimit =\n      totalLimit === 0 && assignments.every((q) => q.noLimit || (q.limit || 0) === 0);\n\n    // Calculate percentage\n    const usagePercentage = hasNoLimit || totalLimit === 0 ? 0 : (totalUsed / totalLimit) * 100;\n\n    // Get status\n    const status = calculateQuotaStatus(usagePercentage, totalLimitLeft);\n\n    // Get reusable and unit from first assignment (should be same for all with same name)\n    const reusable = assignments[0]?.reusable || false;\n    const unit = assignments[0]?.unit || '';\n\n    aggregated.push({\n      name,\n      unit,\n      totalLimit: hasNoLimit ? 0 : totalLimit,\n      totalUsed,\n      usagePercentage,\n      status,\n      quotaCount: assignments.length,\n      noLimit: hasNoLimit,\n      reusable,\n      quotaAssignments: assignments,\n    });\n  }\n\n  // Sort by status priority (critical first) then by usage percentage\n  const statusPriority: Record<QuotaStatus, number> = {\n    EXHAUSTED: 0,\n    CRITICAL: 1,\n    WARNING: 2,\n    HEALTHY: 3,\n    INACTIVE: 4,\n  };\n\n  return aggregated.sort((a, b) => {\n    const priorityDiff = statusPriority[a.status] - statusPriority[b.status];\n    if (priorityDiff !== 0) return priorityDiff;\n    return b.usagePercentage - a.usagePercentage;\n  });\n}\n\n/**\n * Hook to get billing accounts for the selector\n */\ninterface UseBillingAccountsForUsageResult {\n  billingAccounts: Array<{\n    id: string;\n    name: string;\n    email: string;\n    currency: string;\n    creditAmount: number;\n    isActive: boolean;\n    isDefault: boolean;\n  }>;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useBillingAccountsForUsage(): UseBillingAccountsForUsageResult {\n  const { data, loading, error } = useGetBillingAccountsForUsageQuery({\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    billingAccounts: data?.getBillingAccountsByOrg ?? [],\n    isLoading: loading,\n    error: error ?? null,\n  };\n}\n\n/**\n * Hook to get billing account quotas summary with aggregation\n * Only returns pooled quotas - subscription quotas come from useSubscriptionsWithQuotas\n */\ninterface UseBillingAccountQuotasSummaryResult {\n  pooledQuotas: AggregatedQuota[];\n  isLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\nexport function useBillingAccountQuotasSummary(\n  billingAccountId: string | undefined,\n  productId?: string\n): UseBillingAccountQuotasSummaryResult {\n  const { data, loading, error, refetch } = useGetBillingAccountQuotasSummaryForUsageQuery({\n    variables: { billingAccountId: billingAccountId!, productId },\n    skip: !billingAccountId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const pooledQuotas = useMemo(() => {\n    if (!data?.getBillingAccountQuotasSummary) {\n      return [];\n    }\n\n    const summary = data.getBillingAccountQuotasSummary;\n    return aggregateQuotasByName(summary.pooledQuotas || []);\n  }, [data]);\n\n  return {\n    pooledQuotas,\n    isLoading: loading,\n    error: error ?? null,\n    refetch,\n  };\n}\n\n/**\n * Subscription from the API\n */\ninterface SubscriptionQuota {\n  id: string;\n  name: string;\n  limits: { type: string; value: number; unit?: string; originalValue?: number };\n  currentUsageSum: number;\n  usageCount: number;\n  createdAt: string;\n  endtime: string;\n}\n\ninterface SubscriptionFromAPI {\n  id: string;\n  status: string;\n  createdAt: string;\n  quotas: SubscriptionQuota[];\n}\n\n/**\n * Hook to get subscriptions with their quotas grouped by status\n * Uses lazy loading for past subscriptions and supports backend search\n */\ntype ViewMode = 'active' | 'past' | 'all';\n\nconst PAST_SUBSCRIPTIONS_PAGE_SIZE = 10;\n\ninterface UseSubscriptionsWithQuotasOptions {\n  searchQuery?: string;\n  viewMode?: ViewMode;\n}\n\ninterface UseSubscriptionsWithQuotasResult {\n  activeSubscriptions: SubscriptionWithAggregatedQuotas[];\n  pastSubscriptions: SubscriptionWithAggregatedQuotas[];\n  isLoading: boolean;\n  isPastSubscriptionsLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n  // Pagination for past subscriptions\n  loadMorePastSubscriptions: () => void;\n  hasMorePastSubscriptions: boolean;\n  isLoadingMorePast: boolean;\n  pastSubscriptionsCount: number;\n}\n\nexport function useSubscriptionsWithQuotas(\n  billingAccountId: string | undefined,\n  options: UseSubscriptionsWithQuotasOptions = {}\n): UseSubscriptionsWithQuotasResult {\n  const { searchQuery, viewMode = 'active' } = options;\n\n  // Determine which subscriptions to fetch based on viewMode\n  const shouldFetchActive = viewMode === 'active' || viewMode === 'all';\n  const shouldFetchPast = viewMode === 'past' || viewMode === 'all';\n\n  // Query for active subscriptions\n  const { data, loading, error, refetch } = useGetSubscriptionsWithQuotasQuery({\n    variables: {\n      billingAccountId: billingAccountId!,\n      searchQuery: searchQuery || null,\n    },\n    skip: !billingAccountId || !shouldFetchActive,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  // Query for past subscriptions with pagination - only when viewMode is 'past' or 'all'\n  const {\n    data: pastData,\n    loading: pastLoading,\n    refetch: refetchPast,\n    fetchMore: fetchMorePast,\n  } = useGetPastSubscriptionsWithQuotasQuery({\n    variables: {\n      billingAccountId: billingAccountId!,\n      searchQuery: searchQuery || null,\n      page: 1,\n      pageSize: PAST_SUBSCRIPTIONS_PAGE_SIZE,\n    },\n    skip: !billingAccountId || !shouldFetchPast,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  // Track if we're loading more past subscriptions\n  const [isLoadingMorePast, setIsLoadingMorePast] = useState(false);\n  const [currentPastPage, setCurrentPastPage] = useState(1);\n\n  // Helper function to process subscription data\n  const processSubscription = useCallback(\n    (sub: SubscriptionFromAPI): SubscriptionWithAggregatedQuotas => {\n      const quotaSummaries: QuotaAssignmentSummary[] = (sub.quotas || []).map((q) => {\n        const limit = q.limits?.value || 0;\n        const used = q.currentUsageSum || 0;\n        const limitLeft = Math.max(0, limit - used);\n        const usagePercentage = limit > 0 ? (used / limit) * 100 : 0;\n        const unit = q.limits?.unit || '';\n\n        return {\n          id: q.id,\n          name: q.name,\n          unit,\n          quotaType: 'PRODUCT_SPECIFIC' as const,\n          reusable: false,\n          limit,\n          limitLeft,\n          used,\n          usagePercentage,\n          noLimit: q.limits?.type !== 'number' && q.limits?.type !== 'numeric',\n          subscriptionId: sub.id,\n          recentUsages: [],\n          createdAt: q.createdAt,\n          endtime: q.endtime,\n        };\n      });\n\n      return {\n        id: sub.id,\n        status: sub.status,\n        createdAt: sub.createdAt,\n        aggregatedQuotas: aggregateQuotasByName(quotaSummaries),\n      };\n    },\n    []\n  );\n\n  // Process active subscriptions\n  const activeSubscriptions = useMemo(() => {\n    if (!data?.getSubscriptionUsageOverview) {\n      return [];\n    }\n\n    const subscriptions: SubscriptionFromAPI[] = data.getSubscriptionUsageOverview;\n    return subscriptions.map(processSubscription);\n  }, [data, processSubscription]);\n\n  // Process past subscriptions\n  const pastSubscriptions = useMemo(() => {\n    if (!pastData?.getSubscriptionUsageOverview) {\n      return [];\n    }\n\n    const subscriptions: SubscriptionFromAPI[] =\n      pastData.getSubscriptionUsageOverview.subscriptions || pastData.getSubscriptionUsageOverview;\n    return subscriptions.map(processSubscription);\n  }, [pastData, processSubscription]);\n\n  // Get pagination info for past subscriptions\n  const pastSubscriptionsPagination = useMemo(() => {\n    const overview = pastData?.getSubscriptionUsageOverview;\n    if (!overview) {\n      return { totalCount: 0, hasMore: false };\n    }\n    // If it's the new paginated format\n    if (overview.totalCount !== undefined) {\n      return {\n        totalCount: overview.totalCount,\n        hasMore: pastSubscriptions.length < overview.totalCount,\n      };\n    }\n    // Legacy format - assume there might be more if we got a full page\n    return {\n      totalCount: pastSubscriptions.length,\n      hasMore: pastSubscriptions.length >= PAST_SUBSCRIPTIONS_PAGE_SIZE * currentPastPage,\n    };\n  }, [pastData, pastSubscriptions.length, currentPastPage]);\n\n  // Reset page when search query or viewMode changes\n  useEffect(() => {\n    setCurrentPastPage(1);\n  }, [searchQuery, viewMode]);\n\n  // Load more past subscriptions\n  const loadMorePastSubscriptions = useCallback(async () => {\n    if (!fetchMorePast || isLoadingMorePast || !pastSubscriptionsPagination.hasMore) return;\n\n    setIsLoadingMorePast(true);\n    const nextPage = currentPastPage + 1;\n\n    try {\n      await fetchMorePast({\n        variables: {\n          page: nextPage,\n          pageSize: PAST_SUBSCRIPTIONS_PAGE_SIZE,\n        },\n        updateQuery: (\n          prev: GetPastSubscriptionsWithQuotasQuery,\n          { fetchMoreResult }: { fetchMoreResult: GetPastSubscriptionsWithQuotasQuery }\n        ) => {\n          if (!fetchMoreResult) return prev;\n\n          const prevSubs = prev?.getSubscriptionUsageOverview ?? [];\n          const newSubs = fetchMoreResult?.getSubscriptionUsageOverview ?? [];\n\n          return {\n            getSubscriptionUsageOverview: [...prevSubs, ...newSubs],\n          };\n        },\n      });\n      setCurrentPastPage(nextPage);\n    } catch (err) {\n      console.error('Failed to load more past subscriptions:', err);\n    } finally {\n      setIsLoadingMorePast(false);\n    }\n  }, [fetchMorePast, isLoadingMorePast, pastSubscriptionsPagination.hasMore, currentPastPage]);\n\n  const combinedRefetch = useCallback(() => {\n    setCurrentPastPage(1);\n    if (shouldFetchActive) refetch();\n    if (shouldFetchPast) refetchPast();\n  }, [shouldFetchActive, shouldFetchPast, refetch, refetchPast]);\n\n  return {\n    activeSubscriptions,\n    pastSubscriptions,\n    isLoading: shouldFetchActive ? loading : false,\n    isPastSubscriptionsLoading: shouldFetchPast ? pastLoading : false,\n    error: error ?? null,\n    refetch: combinedRefetch,\n    // Pagination for past subscriptions\n    loadMorePastSubscriptions,\n    hasMorePastSubscriptions: pastSubscriptionsPagination.hasMore,\n    isLoadingMorePast,\n    pastSubscriptionsCount: pastSubscriptionsPagination.totalCount,\n  };\n}\n\n/**\n * Hook to get quota usage details for drill-down using cursor-based pagination.\n *\n * The activity-svc API is cursor-based (limit / cursor → items / hasNextPage / nextCursor).\n * Callers should maintain a cursor stack:\n *   - push nextCursor to go forward\n *   - pop to go back\n *   - pass null as cursor for the first page\n */\nexport interface QuotaUsageDetail {\n  id: string;\n  amount: number;\n  description: string;\n  tags?: Record<string, unknown>;\n  productId?: string;\n  userId?: string;\n  timestamp: string;\n  lastUpdated?: string;\n}\n\ninterface UseQuotaUsageDetailsResult {\n  usages: QuotaUsageDetail[];\n  hasNextPage: boolean;\n  nextCursor: string | null;\n  isLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\ntype UsageRecord = GetUsageRecordsQuery['getUsageRecords']['items'][number];\n\nexport function buildUsageRecordsVariables(\n  quotaAssignmentId: string | undefined,\n  pageSize: number,\n  cursor: string | null,\n  workspaceId?: string\n): GetUsageRecordsQueryVariables {\n  return {\n    filters: {\n      quotaAssignmentId,\n      workspaceId,\n    },\n    pagination: {\n      limit: pageSize,\n      ...(cursor ? { cursor } : {}),\n    },\n  };\n}\n\nexport function mapUsageRecordToQuotaUsageDetail(record: UsageRecord): QuotaUsageDetail {\n  return {\n    id: record.id,\n    amount: record.amount,\n    description: record.description ?? '',\n    tags: (record.metadata as Record<string, unknown>) ?? {},\n    productId: record.productId,\n    userId: record.userId ?? undefined,\n    timestamp: record.createdAt,\n    lastUpdated: record.createdAt,\n  };\n}\n\nexport function useQuotaUsageDetails(\n  quotaAssignmentId: string | undefined,\n  pageSize: number = 20,\n  cursor: string | null = null,\n  workspaceId?: string\n): UseQuotaUsageDetailsResult {\n  // Query workspace gateway directly — usage records live in wspace-activity-svc.\n  // Uses the dedicated workspace Apollo client so it doesn't conflict with the\n  // shell's global Apollo client used by all other billing queries.\n  const wsClient = useGatewayClient('workspace');\n  const { data, loading, error, refetch } = useGetUsageRecordsQuery({\n    client: wsClient,\n    variables: buildUsageRecordsVariables(quotaAssignmentId, pageSize, cursor, workspaceId),\n    skip: !quotaAssignmentId || !workspaceId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const items: GetUsageRecordsQuery['getUsageRecords']['items'] =\n    data?.getUsageRecords?.items ?? [];\n\n  return {\n    usages: items.map(mapUsageRecordToQuotaUsageDetail),\n    hasNextPage: data?.getUsageRecords?.hasNextPage ?? false,\n    nextCursor: data?.getUsageRecords?.nextCursor ?? null,\n    isLoading: loading,\n    error: error ?? null,\n    refetch,\n  };\n}\n\n/**\n * Hook to get quota analytics\n */\ninterface UseQuotaAnalyticsResult {\n  analytics: {\n    dailyUsage: Array<{ date: string; usage: number; count: number }>;\n    usageByType: Array<{ resourceType: string; usage: number; count: number; percentage: number }>;\n    trends?: {\n      growthRate?: number;\n      predictedUsage?: number;\n      averageDailyUsage?: number;\n    };\n    peakUsage?: {\n      maxDailyUsage: number;\n      peakDate: string;\n      peakHour?: number;\n    };\n  } | null;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useQuotaAnalytics(\n  quotaAssignmentId: string | undefined,\n  period: AnalyticsPeriod = AnalyticsPeriod.LAST_30_DAYS\n): UseQuotaAnalyticsResult {\n  const { data, loading, error } = useGetQuotaAnalyticsForUsageQuery({\n    variables: { quotaAssignmentId: quotaAssignmentId!, period },\n    skip: !quotaAssignmentId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    analytics: data?.getQuotaAnalytics ?? null,\n    isLoading: loading,\n    error: error ?? null,\n  };\n}\n\n/**\n * Combined hook for the enhanced usage page\n */\ninterface UseEnhancedUsagePageParams {\n  billingAccountId: string | undefined;\n  period?: AnalyticsPeriod;\n  searchQuery?: string;\n  viewMode?: ViewMode;\n}\n\ninterface UseEnhancedUsagePageResult {\n  // Dashboard overview\n  dashboard: UsageDashboard | null;\n\n  // Pooled quotas (subscription quotas come from subscriptions directly)\n  pooledQuotas: AggregatedQuota[];\n\n  // Subscriptions with their quotas\n  activeSubscriptions: SubscriptionWithAggregatedQuotas[];\n  pastSubscriptions: SubscriptionWithAggregatedQuotas[];\n\n  // Loading states\n  isLoading: boolean;\n  isPastSubscriptionsLoading: boolean;\n  error: Error | null;\n\n  // Actions\n  refetch: () => void;\n\n  // Pagination for past subscriptions\n  loadMorePastSubscriptions: () => void;\n  hasMorePastSubscriptions: boolean;\n  isLoadingMorePast: boolean;\n  pastSubscriptionsCount: number;\n}\n\nexport function useEnhancedUsagePage({\n  billingAccountId,\n  period = AnalyticsPeriod.LAST_30_DAYS,\n  searchQuery,\n  viewMode = 'active',\n}: UseEnhancedUsagePageParams): UseEnhancedUsagePageResult {\n  // Dashboard for overview stats\n  const dashboardResult = useUsageDashboard({\n    billingAccountId,\n    period,\n  });\n\n  // Quotas summary with aggregation\n  const quotasSummaryResult = useBillingAccountQuotasSummary(billingAccountId);\n\n  // Subscriptions with quotas - passes searchQuery and viewMode to backend\n  const subscriptionsResult = useSubscriptionsWithQuotas(billingAccountId, {\n    searchQuery,\n    viewMode,\n  });\n\n  const refetch = useCallback(() => {\n    dashboardResult.refetch();\n    quotasSummaryResult.refetch();\n    subscriptionsResult.refetch();\n  }, [dashboardResult, quotasSummaryResult, subscriptionsResult]);\n\n  return {\n    dashboard: dashboardResult.dashboard,\n    pooledQuotas: quotasSummaryResult.pooledQuotas,\n    activeSubscriptions: subscriptionsResult.activeSubscriptions,\n    pastSubscriptions: subscriptionsResult.pastSubscriptions,\n    isLoading:\n      dashboardResult.isLoading || quotasSummaryResult.isLoading || subscriptionsResult.isLoading,\n    isPastSubscriptionsLoading: subscriptionsResult.isPastSubscriptionsLoading,\n    error: dashboardResult.error || quotasSummaryResult.error || subscriptionsResult.error,\n    refetch,\n    // Pagination for past subscriptions\n    loadMorePastSubscriptions: subscriptionsResult.loadMorePastSubscriptions,\n    hasMorePastSubscriptions: subscriptionsResult.hasMorePastSubscriptions,\n    isLoadingMorePast: subscriptionsResult.isLoadingMorePast,\n    pastSubscriptionsCount: subscriptionsResult.pastSubscriptionsCount,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useUsage.js","names":[],"sources":["../../../../../src/billing/modules/usage/hooks/useUsage.ts"],"sourcesContent":["/**\n * Usage Module - Hooks\n * Custom hooks for usage data fetching and mutations\n */\n\nimport { useMemo, useCallback, useState, useEffect } from 'react';\nimport {\n  useGetUsageDashboardQuery,\n  useGetBillingAccountQuotasSummaryForUsageQuery,\n  useGetSubscriptionsWithQuotasQuery,\n  useGetPastSubscriptionsWithQuotasQuery,\n  useGetBillingAccountsForUsageQuery,\n  useGetQuotaAnalyticsForUsageQuery,\n  type GetPastSubscriptionsWithQuotasQuery,\n} from '../../../../generated/global-operations';\nimport {\n  useGetUsageRecordsQuery,\n  type GetUsageRecordsQuery,\n  type GetUsageRecordsQueryVariables,\n} from '../../../../generated/wspace-operations';\nimport { useGatewayClient } from '@burdenoff/fe-libs/shared/graphql';\nimport { AnalyticsPeriod, QuotaStatus } from '../../../shared/types';\nimport type { UsageDashboard } from '../../../shared/types';\n\n// ============================================================================\n// Dashboard Hook\n// ============================================================================\n\ninterface UseUsageDashboardParams {\n  billingAccountId?: string;\n  period?: AnalyticsPeriod;\n}\n\ninterface UseUsageDashboardResult {\n  dashboard: UsageDashboard | null;\n  isLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\nexport function useUsageDashboard({\n  billingAccountId,\n  period = AnalyticsPeriod.LAST_30_DAYS,\n}: UseUsageDashboardParams): UseUsageDashboardResult {\n  const { data, loading, error, refetch } = useGetUsageDashboardQuery({\n    variables: { billingAccountId: billingAccountId!, period },\n    skip: !billingAccountId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    dashboard: data?.getUsageDashboard ?? null,\n    isLoading: loading,\n    error: error ?? null,\n    refetch,\n  };\n}\n\n// ============================================================================\n// Enhanced Usage Page Hooks\n// ============================================================================\n\n/**\n * Quota assignment from the API\n */\ninterface QuotaAssignmentSummary {\n  id: string;\n  name: string;\n  unit: string;\n  quotaType: 'POOLED' | 'PRODUCT_SPECIFIC';\n  reusable: boolean;\n  limit: number;\n  limitLeft: number;\n  used: number;\n  usagePercentage: number;\n  noLimit: boolean;\n  subscriptionId?: string;\n  context?: Record<string, unknown> | null;\n  recentUsages: Array<{\n    id: string;\n    amount: number;\n    description: string;\n    timestamp: string;\n    tags?: Record<string, unknown>;\n  }>;\n  createdAt: string;\n  endtime: string;\n}\n\n/**\n * Aggregated quota for display (multiple quota assignments with same name combined)\n */\nexport interface AggregatedQuota {\n  name: string;\n  displayName?: string;\n  description?: string;\n  unit: string;\n  totalLimit: number;\n  totalUsed: number;\n  usagePercentage: number;\n  status: QuotaStatus;\n  quotaCount: number;\n  noLimit: boolean;\n  reusable: boolean;\n  quotaAssignments: QuotaAssignmentSummary[];\n}\n\n/**\n * Subscription with aggregated quotas\n */\nexport interface SubscriptionWithAggregatedQuotas {\n  id: string;\n  status: string;\n  planName?: string;\n  productId?: string;\n  createdAt: string;\n  aggregatedQuotas: AggregatedQuota[];\n}\n\n/**\n * Helper function to calculate quota status based on usage percentage\n */\nfunction calculateQuotaStatus(usagePercentage: number, limitLeft: number): QuotaStatus {\n  if (limitLeft <= 0) return QuotaStatus.EXHAUSTED;\n  if (usagePercentage >= 90) return QuotaStatus.CRITICAL;\n  if (usagePercentage >= 75) return QuotaStatus.WARNING;\n  return QuotaStatus.HEALTHY;\n}\n\n/**\n * Helper function to aggregate quotas by name\n */\nfunction aggregateQuotasByName(quotas: QuotaAssignmentSummary[]): AggregatedQuota[] {\n  const grouped = new Map<string, QuotaAssignmentSummary[]>();\n\n  for (const quota of quotas) {\n    const existing = grouped.get(quota.name) || [];\n    existing.push(quota);\n    grouped.set(quota.name, existing);\n  }\n\n  const aggregated: AggregatedQuota[] = [];\n\n  for (const [name, assignments] of grouped) {\n    // Sum up limits and usage first\n    const totalLimit = assignments.reduce((sum, q) => sum + (q.limit || 0), 0);\n    const totalUsed = assignments.reduce((sum, q) => sum + (q.used || 0), 0);\n    const totalLimitLeft = assignments.reduce((sum, q) => sum + (q.limitLeft || 0), 0);\n\n    // Check if there's actually no limit (ignore noLimit flag if there's a numeric limit)\n    // Only treat as unlimited if totalLimit is 0 or all assignments explicitly have noLimit AND no numeric limit\n    const hasNoLimit =\n      totalLimit === 0 && assignments.every((q) => q.noLimit || (q.limit || 0) === 0);\n\n    // Calculate percentage\n    const usagePercentage = hasNoLimit || totalLimit === 0 ? 0 : (totalUsed / totalLimit) * 100;\n\n    // Get status\n    const status = calculateQuotaStatus(usagePercentage, totalLimitLeft);\n\n    // Get reusable, unit, and display info from first assignment\n    const reusable = assignments[0]?.reusable || false;\n    const unit = assignments[0]?.unit || '';\n    const ctx = assignments[0]?.context;\n    const displayName = typeof ctx?.displayName === 'string' ? ctx.displayName : undefined;\n    const description = typeof ctx?.description === 'string' ? ctx.description : undefined;\n\n    aggregated.push({\n      name,\n      displayName,\n      description,\n      unit,\n      totalLimit: hasNoLimit ? 0 : totalLimit,\n      totalUsed,\n      usagePercentage,\n      status,\n      quotaCount: assignments.length,\n      noLimit: hasNoLimit,\n      reusable,\n      quotaAssignments: assignments,\n    });\n  }\n\n  // Sort by status priority (critical first) then by usage percentage\n  const statusPriority: Record<QuotaStatus, number> = {\n    EXHAUSTED: 0,\n    CRITICAL: 1,\n    WARNING: 2,\n    HEALTHY: 3,\n    INACTIVE: 4,\n  };\n\n  return aggregated.sort((a, b) => {\n    const priorityDiff = statusPriority[a.status] - statusPriority[b.status];\n    if (priorityDiff !== 0) return priorityDiff;\n    return b.usagePercentage - a.usagePercentage;\n  });\n}\n\n/**\n * Hook to get billing accounts for the selector\n */\ninterface UseBillingAccountsForUsageResult {\n  billingAccounts: Array<{\n    id: string;\n    name: string;\n    email: string;\n    currency: string;\n    creditAmount: number;\n    isActive: boolean;\n    isDefault: boolean;\n  }>;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useBillingAccountsForUsage(): UseBillingAccountsForUsageResult {\n  const { data, loading, error } = useGetBillingAccountsForUsageQuery({\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    billingAccounts: data?.getBillingAccountsByOrg ?? [],\n    isLoading: loading,\n    error: error ?? null,\n  };\n}\n\n/**\n * Hook to get billing account quotas summary with aggregation\n * Only returns pooled quotas - subscription quotas come from useSubscriptionsWithQuotas\n */\ninterface UseBillingAccountQuotasSummaryResult {\n  pooledQuotas: AggregatedQuota[];\n  isLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\nexport function useBillingAccountQuotasSummary(\n  billingAccountId: string | undefined,\n  productId?: string\n): UseBillingAccountQuotasSummaryResult {\n  const { data, loading, error, refetch } = useGetBillingAccountQuotasSummaryForUsageQuery({\n    variables: { billingAccountId: billingAccountId!, productId },\n    skip: !billingAccountId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const pooledQuotas = useMemo(() => {\n    if (!data?.getBillingAccountQuotasSummary) {\n      return [];\n    }\n\n    const summary = data.getBillingAccountQuotasSummary;\n    return aggregateQuotasByName(summary.pooledQuotas || []);\n  }, [data]);\n\n  return {\n    pooledQuotas,\n    isLoading: loading,\n    error: error ?? null,\n    refetch,\n  };\n}\n\n/**\n * Subscription from the API\n */\ninterface SubscriptionQuota {\n  id: string;\n  name: string;\n  limits: { type: string; value: number; unit?: string; originalValue?: number };\n  context?: Record<string, unknown> | null;\n  currentUsageSum: number;\n  usageCount: number;\n  createdAt: string;\n  endtime: string;\n}\n\ninterface SubscriptionFromAPI {\n  id: string;\n  status: string;\n  createdAt: string;\n  quotas: SubscriptionQuota[];\n}\n\n/**\n * Hook to get subscriptions with their quotas grouped by status\n * Uses lazy loading for past subscriptions and supports backend search\n */\ntype ViewMode = 'active' | 'past' | 'all';\n\nconst PAST_SUBSCRIPTIONS_PAGE_SIZE = 10;\n\ninterface UseSubscriptionsWithQuotasOptions {\n  searchQuery?: string;\n  viewMode?: ViewMode;\n}\n\ninterface UseSubscriptionsWithQuotasResult {\n  activeSubscriptions: SubscriptionWithAggregatedQuotas[];\n  pastSubscriptions: SubscriptionWithAggregatedQuotas[];\n  isLoading: boolean;\n  isPastSubscriptionsLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n  // Pagination for past subscriptions\n  loadMorePastSubscriptions: () => void;\n  hasMorePastSubscriptions: boolean;\n  isLoadingMorePast: boolean;\n  pastSubscriptionsCount: number;\n}\n\nexport function useSubscriptionsWithQuotas(\n  billingAccountId: string | undefined,\n  options: UseSubscriptionsWithQuotasOptions = {}\n): UseSubscriptionsWithQuotasResult {\n  const { searchQuery, viewMode = 'active' } = options;\n\n  // Determine which subscriptions to fetch based on viewMode\n  const shouldFetchActive = viewMode === 'active' || viewMode === 'all';\n  const shouldFetchPast = viewMode === 'past' || viewMode === 'all';\n\n  // Query for active subscriptions\n  const { data, loading, error, refetch } = useGetSubscriptionsWithQuotasQuery({\n    variables: {\n      billingAccountId: billingAccountId!,\n      searchQuery: searchQuery || null,\n    },\n    skip: !billingAccountId || !shouldFetchActive,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  // Query for past subscriptions with pagination - only when viewMode is 'past' or 'all'\n  const {\n    data: pastData,\n    loading: pastLoading,\n    refetch: refetchPast,\n    fetchMore: fetchMorePast,\n  } = useGetPastSubscriptionsWithQuotasQuery({\n    variables: {\n      billingAccountId: billingAccountId!,\n      searchQuery: searchQuery || null,\n      page: 1,\n      pageSize: PAST_SUBSCRIPTIONS_PAGE_SIZE,\n    },\n    skip: !billingAccountId || !shouldFetchPast,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  // Track if we're loading more past subscriptions\n  const [isLoadingMorePast, setIsLoadingMorePast] = useState(false);\n  const [currentPastPage, setCurrentPastPage] = useState(1);\n\n  // Helper function to process subscription data\n  const processSubscription = useCallback(\n    (sub: SubscriptionFromAPI): SubscriptionWithAggregatedQuotas => {\n      const quotaSummaries: QuotaAssignmentSummary[] = (sub.quotas || []).map((q) => {\n        const limit = q.limits?.value || 0;\n        const used = q.currentUsageSum || 0;\n        const limitLeft = Math.max(0, limit - used);\n        const usagePercentage = limit > 0 ? (used / limit) * 100 : 0;\n        const unit = q.limits?.unit || '';\n\n        return {\n          id: q.id,\n          name: q.name,\n          unit,\n          quotaType: 'PRODUCT_SPECIFIC' as const,\n          reusable: false,\n          limit,\n          limitLeft,\n          used,\n          usagePercentage,\n          noLimit: q.limits?.type !== 'number' && q.limits?.type !== 'numeric',\n          subscriptionId: sub.id,\n          context: q.context,\n          recentUsages: [],\n          createdAt: q.createdAt,\n          endtime: q.endtime,\n        };\n      });\n\n      return {\n        id: sub.id,\n        status: sub.status,\n        createdAt: sub.createdAt,\n        aggregatedQuotas: aggregateQuotasByName(quotaSummaries),\n      };\n    },\n    []\n  );\n\n  // Process active subscriptions\n  const activeSubscriptions = useMemo(() => {\n    if (!data?.getSubscriptionUsageOverview) {\n      return [];\n    }\n\n    const subscriptions: SubscriptionFromAPI[] = data.getSubscriptionUsageOverview;\n    return subscriptions.map(processSubscription);\n  }, [data, processSubscription]);\n\n  // Process past subscriptions\n  const pastSubscriptions = useMemo(() => {\n    if (!pastData?.getSubscriptionUsageOverview) {\n      return [];\n    }\n\n    const subscriptions: SubscriptionFromAPI[] =\n      pastData.getSubscriptionUsageOverview.subscriptions || pastData.getSubscriptionUsageOverview;\n    return subscriptions.map(processSubscription);\n  }, [pastData, processSubscription]);\n\n  // Get pagination info for past subscriptions\n  const pastSubscriptionsPagination = useMemo(() => {\n    const overview = pastData?.getSubscriptionUsageOverview;\n    if (!overview) {\n      return { totalCount: 0, hasMore: false };\n    }\n    // If it's the new paginated format\n    if (overview.totalCount !== undefined) {\n      return {\n        totalCount: overview.totalCount,\n        hasMore: pastSubscriptions.length < overview.totalCount,\n      };\n    }\n    // Legacy format - assume there might be more if we got a full page\n    return {\n      totalCount: pastSubscriptions.length,\n      hasMore: pastSubscriptions.length >= PAST_SUBSCRIPTIONS_PAGE_SIZE * currentPastPage,\n    };\n  }, [pastData, pastSubscriptions.length, currentPastPage]);\n\n  // Reset page when search query or viewMode changes\n  useEffect(() => {\n    setCurrentPastPage(1);\n  }, [searchQuery, viewMode]);\n\n  // Load more past subscriptions\n  const loadMorePastSubscriptions = useCallback(async () => {\n    if (!fetchMorePast || isLoadingMorePast || !pastSubscriptionsPagination.hasMore) return;\n\n    setIsLoadingMorePast(true);\n    const nextPage = currentPastPage + 1;\n\n    try {\n      await fetchMorePast({\n        variables: {\n          page: nextPage,\n          pageSize: PAST_SUBSCRIPTIONS_PAGE_SIZE,\n        },\n        updateQuery: (\n          prev: GetPastSubscriptionsWithQuotasQuery,\n          { fetchMoreResult }: { fetchMoreResult: GetPastSubscriptionsWithQuotasQuery }\n        ) => {\n          if (!fetchMoreResult) return prev;\n\n          const prevSubs = prev?.getSubscriptionUsageOverview ?? [];\n          const newSubs = fetchMoreResult?.getSubscriptionUsageOverview ?? [];\n\n          return {\n            getSubscriptionUsageOverview: [...prevSubs, ...newSubs],\n          };\n        },\n      });\n      setCurrentPastPage(nextPage);\n    } catch (err) {\n      console.error('Failed to load more past subscriptions:', err);\n    } finally {\n      setIsLoadingMorePast(false);\n    }\n  }, [fetchMorePast, isLoadingMorePast, pastSubscriptionsPagination.hasMore, currentPastPage]);\n\n  const combinedRefetch = useCallback(() => {\n    setCurrentPastPage(1);\n    if (shouldFetchActive) refetch();\n    if (shouldFetchPast) refetchPast();\n  }, [shouldFetchActive, shouldFetchPast, refetch, refetchPast]);\n\n  return {\n    activeSubscriptions,\n    pastSubscriptions,\n    isLoading: shouldFetchActive ? loading : false,\n    isPastSubscriptionsLoading: shouldFetchPast ? pastLoading : false,\n    error: error ?? null,\n    refetch: combinedRefetch,\n    // Pagination for past subscriptions\n    loadMorePastSubscriptions,\n    hasMorePastSubscriptions: pastSubscriptionsPagination.hasMore,\n    isLoadingMorePast,\n    pastSubscriptionsCount: pastSubscriptionsPagination.totalCount,\n  };\n}\n\n/**\n * Hook to get quota usage details for drill-down using cursor-based pagination.\n *\n * The activity-svc API is cursor-based (limit / cursor → items / hasNextPage / nextCursor).\n * Callers should maintain a cursor stack:\n *   - push nextCursor to go forward\n *   - pop to go back\n *   - pass null as cursor for the first page\n */\nexport interface QuotaUsageDetail {\n  id: string;\n  amount: number;\n  description: string;\n  tags?: Record<string, unknown>;\n  productId?: string;\n  userId?: string;\n  timestamp: string;\n  lastUpdated?: string;\n}\n\ninterface UseQuotaUsageDetailsResult {\n  usages: QuotaUsageDetail[];\n  hasNextPage: boolean;\n  nextCursor: string | null;\n  isLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\ntype UsageRecord = GetUsageRecordsQuery['getUsageRecords']['items'][number];\n\nexport function buildUsageRecordsVariables(\n  quotaAssignmentId: string | undefined,\n  pageSize: number,\n  cursor: string | null,\n  workspaceId?: string\n): GetUsageRecordsQueryVariables {\n  return {\n    filters: {\n      quotaAssignmentId,\n      workspaceId,\n    },\n    pagination: {\n      limit: pageSize,\n      ...(cursor ? { cursor } : {}),\n    },\n  };\n}\n\nexport function mapUsageRecordToQuotaUsageDetail(record: UsageRecord): QuotaUsageDetail {\n  return {\n    id: record.id,\n    amount: record.amount,\n    description: record.description ?? '',\n    tags: (record.metadata as Record<string, unknown>) ?? {},\n    productId: record.productId,\n    userId: record.userId ?? undefined,\n    timestamp: record.createdAt,\n    lastUpdated: record.createdAt,\n  };\n}\n\nexport function useQuotaUsageDetails(\n  quotaAssignmentId: string | undefined,\n  pageSize: number = 20,\n  cursor: string | null = null,\n  workspaceId?: string\n): UseQuotaUsageDetailsResult {\n  // Query workspace gateway directly — usage records live in wspace-activity-svc.\n  // Uses the dedicated workspace Apollo client so it doesn't conflict with the\n  // shell's global Apollo client used by all other billing queries.\n  const wsClient = useGatewayClient('workspace');\n  const { data, loading, error, refetch } = useGetUsageRecordsQuery({\n    client: wsClient,\n    variables: buildUsageRecordsVariables(quotaAssignmentId, pageSize, cursor, workspaceId),\n    skip: !quotaAssignmentId || !workspaceId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const items: GetUsageRecordsQuery['getUsageRecords']['items'] =\n    data?.getUsageRecords?.items ?? [];\n\n  return {\n    usages: items.map(mapUsageRecordToQuotaUsageDetail),\n    hasNextPage: data?.getUsageRecords?.hasNextPage ?? false,\n    nextCursor: data?.getUsageRecords?.nextCursor ?? null,\n    isLoading: loading,\n    error: error ?? null,\n    refetch,\n  };\n}\n\n/**\n * Hook to get quota analytics\n */\ninterface UseQuotaAnalyticsResult {\n  analytics: {\n    dailyUsage: Array<{ date: string; usage: number; count: number }>;\n    usageByType: Array<{ resourceType: string; usage: number; count: number; percentage: number }>;\n    trends?: {\n      growthRate?: number;\n      predictedUsage?: number;\n      averageDailyUsage?: number;\n    };\n    peakUsage?: {\n      maxDailyUsage: number;\n      peakDate: string;\n      peakHour?: number;\n    };\n  } | null;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useQuotaAnalytics(\n  quotaAssignmentId: string | undefined,\n  period: AnalyticsPeriod = AnalyticsPeriod.LAST_30_DAYS\n): UseQuotaAnalyticsResult {\n  const { data, loading, error } = useGetQuotaAnalyticsForUsageQuery({\n    variables: { quotaAssignmentId: quotaAssignmentId!, period },\n    skip: !quotaAssignmentId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    analytics: data?.getQuotaAnalytics ?? null,\n    isLoading: loading,\n    error: error ?? null,\n  };\n}\n\n/**\n * Combined hook for the enhanced usage page\n */\ninterface UseEnhancedUsagePageParams {\n  billingAccountId: string | undefined;\n  period?: AnalyticsPeriod;\n  searchQuery?: string;\n  viewMode?: ViewMode;\n}\n\ninterface UseEnhancedUsagePageResult {\n  // Dashboard overview\n  dashboard: UsageDashboard | null;\n\n  // Pooled quotas (subscription quotas come from subscriptions directly)\n  pooledQuotas: AggregatedQuota[];\n\n  // Subscriptions with their quotas\n  activeSubscriptions: SubscriptionWithAggregatedQuotas[];\n  pastSubscriptions: SubscriptionWithAggregatedQuotas[];\n\n  // Loading states\n  isLoading: boolean;\n  isPastSubscriptionsLoading: boolean;\n  error: Error | null;\n\n  // Actions\n  refetch: () => void;\n\n  // Pagination for past subscriptions\n  loadMorePastSubscriptions: () => void;\n  hasMorePastSubscriptions: boolean;\n  isLoadingMorePast: boolean;\n  pastSubscriptionsCount: number;\n}\n\nexport function useEnhancedUsagePage({\n  billingAccountId,\n  period = AnalyticsPeriod.LAST_30_DAYS,\n  searchQuery,\n  viewMode = 'active',\n}: UseEnhancedUsagePageParams): UseEnhancedUsagePageResult {\n  // Dashboard for overview stats\n  const dashboardResult = useUsageDashboard({\n    billingAccountId,\n    period,\n  });\n\n  // Quotas summary with aggregation\n  const quotasSummaryResult = useBillingAccountQuotasSummary(billingAccountId);\n\n  // Subscriptions with quotas - passes searchQuery and viewMode to backend\n  const subscriptionsResult = useSubscriptionsWithQuotas(billingAccountId, {\n    searchQuery,\n    viewMode,\n  });\n\n  const refetch = useCallback(() => {\n    dashboardResult.refetch();\n    quotasSummaryResult.refetch();\n    subscriptionsResult.refetch();\n  }, [dashboardResult, quotasSummaryResult, subscriptionsResult]);\n\n  return {\n    dashboard: dashboardResult.dashboard,\n    pooledQuotas: quotasSummaryResult.pooledQuotas,\n    activeSubscriptions: subscriptionsResult.activeSubscriptions,\n    pastSubscriptions: subscriptionsResult.pastSubscriptions,\n    isLoading:\n      dashboardResult.isLoading || quotasSummaryResult.isLoading || subscriptionsResult.isLoading,\n    isPastSubscriptionsLoading: subscriptionsResult.isPastSubscriptionsLoading,\n    error: dashboardResult.error || quotasSummaryResult.error || subscriptionsResult.error,\n    refetch,\n    // Pagination for past subscriptions\n    loadMorePastSubscriptions: subscriptionsResult.loadMorePastSubscriptions,\n    hasMorePastSubscriptions: subscriptionsResult.hasMorePastSubscriptions,\n    isLoadingMorePast: subscriptionsResult.isLoadingMorePast,\n    pastSubscriptionsCount: subscriptionsResult.pastSubscriptionsCount,\n  };\n}\n"],"mappings":"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"}

package/dist/billing/modules/usage/pages/UsagePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UsagePage.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/usage/pages/UsagePage.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAoD,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAmmBlF,eAAO,MAAM,SAAS,EAAE,EAmkBvB,CAAC"}
+{"version":3,"file":"UsagePage.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/usage/pages/UsagePage.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAoD,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AA0mBlF,eAAO,MAAM,SAAS,EAAE,EAmkBvB,CAAC"}

package/dist/billing/modules/usage/pages/UsagePage.js

@@ -90,21 +90,32 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 		className: "cursor-pointer hover:bg-muted/40 transition-colors border-b border-border last:border-b-0",
 		children: [
 			/* @__PURE__ */ k("td", {
-				className: "px-4 py-3 min-w-[180px]",
-				children: [/* @__PURE__ */ O("span", {
-					className: "text-sm font-medium text-primary hover:underline capitalize",
-					children: e.name.replace(/_/g, " ")
-				}), e.quotaCount > 1 && /* @__PURE__ */ k("span", {
-					className: "block text-xs text-muted-foreground mt-0.5",
-					children: [e.quotaCount, " assignments"]
-				})]
+				className: "px-4 py-3",
+				children: [
+					/* @__PURE__ */ O("span", {
+						className: "text-sm font-medium text-primary hover:underline capitalize",
+						children: e.displayName || e.name.replace(/_/g, " ")
+					}),
+					/* @__PURE__ */ O("span", {
+						className: "block text-xs font-mono text-muted-foreground mt-0.5",
+						children: e.name
+					}),
+					e.description && /* @__PURE__ */ O("span", {
+						className: "block text-xs text-muted-foreground mt-0.5 max-w-[220px] truncate",
+						children: e.description
+					}),
+					e.quotaCount > 1 && /* @__PURE__ */ k("span", {
+						className: "block text-xs text-muted-foreground mt-0.5",
+						children: [e.quotaCount, " assignments"]
+					})
+				]
 			}),
 			t !== void 0 && /* @__PURE__ */ O("td", {
 				className: "px-4 py-3 text-sm text-muted-foreground whitespace-nowrap",
 				children: t
 			}),
 			/* @__PURE__ */ O("td", {
-				className: "px-4 py-3 min-w-[180px]",
+				className: "px-4 py-3",
 				children: /* @__PURE__ */ k("div", {
 					className: "space-y-1.5",
 					children: [/* @__PURE__ */ k("span", {
@@ -246,18 +257,29 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 						children: [/* @__PURE__ */ O(te, {
 							status: a.status,
 							className: "w-5 h-5"
-						}), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("h2", {
-							id: "quota-detail-title",
-							className: "text-lg font-semibold capitalize",
-							children: a.name.replace(/_/g, " ")
-						}), /* @__PURE__ */ k("p", {
-							className: "text-sm text-muted-foreground",
-							children: [
-								a.quotaCount,
-								" quota assignment",
-								a.quotaCount === 1 ? "" : "s"
-							]
-						})] })]
+						}), /* @__PURE__ */ k("div", { children: [
+							/* @__PURE__ */ O("h2", {
+								id: "quota-detail-title",
+								className: "text-lg font-semibold capitalize",
+								children: a.displayName || a.name.replace(/_/g, " ")
+							}),
+							/* @__PURE__ */ O("p", {
+								className: "text-xs font-mono text-muted-foreground",
+								children: a.name
+							}),
+							a.description && /* @__PURE__ */ O("p", {
+								className: "text-sm text-muted-foreground mt-0.5",
+								children: a.description
+							}),
+							/* @__PURE__ */ k("p", {
+								className: "text-sm text-muted-foreground mt-0.5",
+								children: [
+									a.quotaCount,
+									" quota assignment",
+									a.quotaCount === 1 ? "" : "s"
+								]
+							})
+						] })]
 					}), /* @__PURE__ */ O("button", {
 						onClick: o,
 						className: "p-1 rounded-md hover:bg-muted/50 transition-colors",
@@ -540,7 +562,7 @@ var te = ({ status: e, className: n = "w-4 h-4" }) => {
 					children: [I.length > 1 && /* @__PURE__ */ O("select", {
 						value: L || "",
 						onChange: (e) => c(e.target.value),
-						className: "px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary min-w-[200px]",
+						className: "px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary w-full sm:min-w-[200px]",
 						children: I.map((e) => /* @__PURE__ */ O("option", {
 							value: e.id,
 							children: e.name