@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

package/dist/billing/modules/billing/pages/InvoicesListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InvoicesListPage.js","names":[],"sources":["../../../../../src/billing/modules/billing/pages/InvoicesListPage.tsx"],"sourcesContent":["/**\n * Billing Module - Invoices List Page\n * Displays all invoices for the current tenant\n */\n\nimport { useEffect, useState, useMemo, useRef, type FC } from 'react';\nimport { RotateCcw } from 'lucide-react';\nimport { useSearchParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePaginatedInvoices } from '../hooks/useInvoices';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport {\n  useGetBillingAccountsByOrgQuery,\n  type GetBillingAccountsByOrgQuery,\n} from '../../../../generated/global-operations';\n\ntype BillingAccountItem = GetBillingAccountsByOrgQuery['getBillingAccountsByOrg'][number];\nimport {\n  formatCurrency,\n  formatDate,\n  formatInvoiceStatus,\n  formatInvoiceNumber,\n} from '../../../shared/utils/format';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport { getInvoiceStatusColor, getStatusBadgeClasses } from '../../../shared/utils/status';\nimport type { Invoice, InvoiceStatus } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ntype FilterStatus = 'all' | InvoiceStatus;\n\nexport const InvoicesListPage: 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 [searchParams] = useSearchParams();\n  const urlBillingAccountId = searchParams.get('billingAccountId') ?? undefined;\n\n  const { data: accountsData } = useGetBillingAccountsByOrgQuery({ fetchPolicy: 'cache-first' });\n  const billingAccounts = accountsData?.getBillingAccountsByOrg ?? [];\n\n  // undefined = user hasn't explicitly chosen yet → auto-pick default\n  // null      = user explicitly chose \"All Accounts\"\n  // string    = user explicitly chose a specific account\n  const [explicitAccountId, setExplicitAccountId] = useState<string | null | undefined>(\n    urlBillingAccountId\n  );\n\n  useEffect(() => {\n    setExplicitAccountId(urlBillingAccountId);\n  }, [urlBillingAccountId]);\n\n  const defaultAccountId = useMemo(\n    () =>\n      (billingAccounts.find((a: BillingAccountItem) => a.isDefault) ?? billingAccounts[0])?.id ??\n      undefined,\n    [billingAccounts]\n  );\n\n  // Resolved selection: explicit choice wins; before any choice, use the default\n  const selectedAccountId: string | null =\n    explicitAccountId !== undefined ? explicitAccountId : (defaultAccountId ?? null);\n\n  const [filterStatus, setFilterStatus] = useState<FilterStatus>('all');\n  const [searchQuery, setSearchQuery] = useState('');\n  const [debouncedSearch, setDebouncedSearch] = useState('');\n  const [page, setPage] = useState(1);\n  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (debounceTimer.current) clearTimeout(debounceTimer.current);\n    debounceTimer.current = setTimeout(() => {\n      setDebouncedSearch(searchQuery);\n      setPage(1);\n    }, 400);\n    return () => {\n      if (debounceTimer.current) clearTimeout(debounceTimer.current);\n    };\n  }, [searchQuery]);\n\n  const { invoices, totalPages, isLoading, error, refetch } = usePaginatedInvoices({\n    billingAccountId: selectedAccountId ?? undefined,\n    status: filterStatus !== 'all' ? (filterStatus as InvoiceStatus) : undefined,\n    search: debouncedSearch || undefined,\n    page,\n    pageSize: 20,\n  });\n\n  // Permission check\n  if (!permissions.canViewInvoices) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <div className=\"size-12 mx-auto rounded-full bg-muted flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-muted-foreground\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-foreground\">\n            {tr('billing.accessDenied.title', 'Access Denied')}\n          </h2>\n          <p className=\"text-sm text-muted-foreground max-w-sm\">\n            {tr('billing.invoices.noViewPermission', \"You don't have permission to view invoices.\")}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Loading state\n  if (isLoading && invoices.length === 0) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-muted animate-pulse rounded\" />\n        <div className=\"space-y-3\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <div key={i} className=\"border border-border rounded-lg p-4\">\n              <div className=\"flex items-center gap-4\">\n                <div className=\"size-10 bg-muted animate-pulse rounded\" />\n                <div className=\"flex-1 space-y-2\">\n                  <div className=\"h-4 w-32 bg-muted animate-pulse rounded\" />\n                  <div className=\"h-3 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=\"size-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-destructive\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-foreground\">\n            {tr('billing.invoices.failedToLoad', 'Failed to load invoices')}\n          </h2>\n          <p className=\"text-sm text-muted-foreground\">{error.message}</p>\n          <button\n            type=\"button\"\n            onClick={() => refetch()}\n            className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n          >\n            Try Again\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-bold text-foreground\">\n            {tr('billing.invoices.title', 'Invoices')}\n          </h1>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {tr('billing.invoices.subtitle', 'View and manage your billing invoices')}\n          </p>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/refunds')}\n            className=\"inline-flex items-center gap-2 px-3 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n          >\n            <RotateCcw className=\"size-4\" />\n            {tr('billing.invoices.myRefunds', 'My Refunds')}\n          </button>\n          {billingAccounts.length > 1 && (\n            <div className=\"flex items-center gap-2\">\n              <label className=\"text-sm text-muted-foreground whitespace-nowrap\">\n                Billing Account\n              </label>\n              <select\n                value={selectedAccountId ?? ''}\n                onChange={(e) => setExplicitAccountId(e.target.value || null)}\n                className=\"text-sm border border-border rounded-md bg-background text-foreground px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary\"\n              >\n                <option value=\"\">All Accounts</option>\n                {billingAccounts.map((account: BillingAccountItem) => (\n                  <option key={account.id ?? ''} value={account.id ?? ''}>\n                    {account.name ?? account.email ?? account.id}\n                    {account.isDefault ? ' (Default)' : ''}\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n        </div>\n      </div>\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 flex-wrap\">\n          {(['all', 'OPEN', 'PAID', 'DRAFT', 'VOID'] as FilterStatus[]).map((status) => (\n            <button\n              type=\"button\"\n              key={status}\n              onClick={() => {\n                setFilterStatus(status);\n                setPage(1);\n              }}\n              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n                filterStatus === status\n                  ? 'bg-background text-foreground shadow-sm'\n                  : 'text-muted-foreground hover:text-foreground'\n              }`}\n            >\n              {status === 'all' ? 'All' : formatInvoiceStatus(status as InvoiceStatus)}\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 size-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.invoices.searchPlaceholder', 'Search by invoice number...')}\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      </div>\n\n      {/* Invoices Table */}\n      {!isLoading && invoices.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg\">\n          <div className=\"size-12 rounded-full bg-muted flex items-center justify-center mb-4\">\n            <svg\n              className=\"size-6 text-muted-foreground\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-foreground\">\n            {tr('billing.invoices.noInvoicesFound', 'No invoices found')}\n          </h3>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {filterStatus !== 'all' || debouncedSearch\n              ? tr('billing.invoices.noInvoicesFiltered', 'No invoices match your filters.')\n              : tr('billing.invoices.noInvoicesYet', \"You don't have any invoices yet.\")}\n          </p>\n        </div>\n      ) : (\n        <>\n          <div className=\"border border-border rounded-lg overflow-hidden\">\n            <table className=\"w-full\">\n              <thead className=\"bg-muted/50\">\n                <tr>\n                  <th className=\"text-left px-4 py-3 text-sm font-medium text-muted-foreground\">\n                    Invoice\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-sm font-medium text-muted-foreground\">\n                    Status\n                  </th>\n                  {!selectedAccountId && billingAccounts.length > 1 && (\n                    <th className=\"text-left px-4 py-3 text-sm font-medium text-muted-foreground hidden lg:table-cell\">\n                      Account\n                    </th>\n                  )}\n                  <th className=\"text-left px-4 py-3 text-sm font-medium text-muted-foreground hidden sm:table-cell\">\n                    Date\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-sm font-medium text-muted-foreground hidden md:table-cell\">\n                    Due Date\n                  </th>\n                  <th className=\"text-right px-4 py-3 text-sm font-medium text-muted-foreground\">\n                    Amount\n                  </th>\n                  <th className=\"text-right px-4 py-3 text-sm font-medium text-muted-foreground\">\n                    Actions\n                  </th>\n                </tr>\n              </thead>\n              <tbody className=\"divide-y divide-border\">\n                {invoices.map((invoice) => (\n                  <InvoiceRow\n                    key={invoice.id}\n                    invoice={invoice}\n                    onView={() =>\n                      navigateTo(\n                        withBillingAccountId(`/invoices/${invoice.id}`, invoice.billingAccountId)\n                      )\n                    }\n                    canPay={permissions.canPayInvoice}\n                    canVoid={permissions.canVoidInvoice}\n                    showAccount={!selectedAccountId && billingAccounts.length > 1}\n                    accountName={\n                      billingAccounts.find(\n                        (a: BillingAccountItem) => a.id === invoice.billingAccountId\n                      )?.name ?? null\n                    }\n                  />\n                ))}\n              </tbody>\n            </table>\n          </div>\n\n          {totalPages > 1 && (\n            <div className=\"flex items-center justify-between pt-2\">\n              <p className=\"text-sm text-muted-foreground\">\n                Page {page} of {totalPages}\n              </p>\n              <div className=\"flex items-center gap-2\">\n                <button\n                  type=\"button\"\n                  onClick={() => setPage((p) => Math.max(1, p - 1))}\n                  disabled={page <= 1}\n                  className=\"px-3 py-1.5 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors\"\n                >\n                  Previous\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}\n                  disabled={page >= totalPages}\n                  className=\"px-3 py-1.5 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors\"\n                >\n                  Next\n                </button>\n              </div>\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Invoice Row Component\n// ============================================================================\n\ninterface InvoiceRowProps {\n  invoice: Invoice;\n  onView: () => void;\n  canPay: boolean;\n  canVoid: boolean;\n  showAccount?: boolean;\n  accountName?: string | null;\n}\n\nconst InvoiceRow: FC<InvoiceRowProps> = ({\n  invoice,\n  onView,\n  canPay,\n  canVoid,\n  showAccount = false,\n  accountName,\n}) => {\n  const statusColor = getInvoiceStatusColor(invoice.status);\n  const isOpen = invoice.status === ('OPEN' as InvoiceStatus);\n  const isDraft = invoice.status === ('DRAFT' as InvoiceStatus);\n\n  return (\n    <tr className=\"hover:bg-muted/30 transition-colors\">\n      <td className=\"p-4\">\n        {invoice.invoiceUrl ? (\n          <a\n            href={invoice.invoiceUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"font-medium text-foreground hover:text-primary transition-colors\"\n          >\n            {formatInvoiceNumber(invoice.invoiceNumber)}\n          </a>\n        ) : (\n          <button\n            type=\"button\"\n            onClick={onView}\n            className=\"font-medium text-foreground hover:text-primary transition-colors\"\n          >\n            {formatInvoiceNumber(invoice.invoiceNumber)}\n          </button>\n        )}\n        {(invoice.itemDescription ?? invoice.subscription?.plan?.name) && (\n          <p className=\"text-sm text-muted-foreground mt-0.5\">\n            {invoice.itemDescription ?? invoice.subscription?.plan?.name}\n          </p>\n        )}\n      </td>\n      <td className=\"p-4\">\n        <span\n          className={`inline-flex px-2 py-1 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n        >\n          {formatInvoiceStatus(invoice.status)}\n        </span>\n      </td>\n      {showAccount && (\n        <td className=\"p-4 hidden lg:table-cell\">\n          {accountName ? (\n            <span className=\"inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full bg-muted text-muted-foreground border border-border\">\n              {accountName}\n            </span>\n          ) : (\n            <span className=\"text-sm text-muted-foreground\">, </span>\n          )}\n        </td>\n      )}\n      <td className=\"p-4 text-sm text-muted-foreground hidden sm:table-cell\">\n        {formatDate(invoice.createdAt, 'short')}\n      </td>\n      <td className=\"p-4 text-sm text-muted-foreground hidden md:table-cell\">\n        {invoice.dueDate ? formatDate(invoice.dueDate, 'short') : '—'}\n      </td>\n      <td className=\"p-4 text-right font-medium text-foreground\">\n        {formatCurrency(invoice.total, invoice.currency)}\n      </td>\n      <td className=\"p-4 text-right\">\n        <div className=\"flex items-center justify-end gap-2\">\n          {invoice.invoiceUrl ? (\n            <a\n              href={invoice.invoiceUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted rounded-md transition-colors\"\n            >\n              View\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              onClick={onView}\n              className=\"px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted rounded-md transition-colors\"\n            >\n              View\n            </button>\n          )}\n          {invoice.pdfUrl && (\n            <a\n              href={invoice.pdfUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"px-3 py-1.5 text-sm font-medium text-primary hover:bg-primary/10 rounded-md transition-colors\"\n            >\n              PDF\n            </a>\n          )}\n          {isOpen && canPay && (\n            <button\n              type=\"button\"\n              className=\"px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n            >\n              Pay\n            </button>\n          )}\n          {(isOpen || isDraft) && canVoid && (\n            <button\n              type=\"button\"\n              className=\"px-3 py-1.5 text-sm font-medium text-destructive hover:bg-destructive/10 rounded-md transition-colors\"\n            >\n              Void\n            </button>\n          )}\n        </div>\n      </td>\n    </tr>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"InvoicesListPage.js","names":[],"sources":["../../../../../src/billing/modules/billing/pages/InvoicesListPage.tsx"],"sourcesContent":["/**\n * Billing Module - Invoices List Page\n * Displays all invoices for the current tenant\n */\n\nimport { useEffect, useState, useMemo, useRef, type FC } from 'react';\nimport { RotateCcw } from 'lucide-react';\nimport { useSearchParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePaginatedInvoices } from '../hooks/useInvoices';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport {\n  useGetBillingAccountsByOrgQuery,\n  type GetBillingAccountsByOrgQuery,\n} from '../../../../generated/global-operations';\n\ntype BillingAccountItem = GetBillingAccountsByOrgQuery['getBillingAccountsByOrg'][number];\nimport {\n  formatCurrency,\n  formatDate,\n  formatInvoiceStatus,\n  formatInvoiceNumber,\n} from '../../../shared/utils/format';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport { getInvoiceStatusColor } from '../../../shared/utils/status';\nimport { StatusPill } from '../../../shared/ui';\nimport type { Invoice, InvoiceStatus } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ntype FilterStatus = 'all' | InvoiceStatus;\n\nexport const InvoicesListPage: 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 [searchParams] = useSearchParams();\n  const urlBillingAccountId = searchParams.get('billingAccountId') ?? undefined;\n\n  const { data: accountsData } = useGetBillingAccountsByOrgQuery({ fetchPolicy: 'cache-first' });\n  const billingAccounts = accountsData?.getBillingAccountsByOrg ?? [];\n\n  // undefined = user hasn't explicitly chosen yet → auto-pick default\n  // null      = user explicitly chose \"All Accounts\"\n  // string    = user explicitly chose a specific account\n  const [explicitAccountId, setExplicitAccountId] = useState<string | null | undefined>(\n    urlBillingAccountId\n  );\n\n  useEffect(() => {\n    setExplicitAccountId(urlBillingAccountId);\n  }, [urlBillingAccountId]);\n\n  const defaultAccountId = useMemo(\n    () =>\n      (billingAccounts.find((a: BillingAccountItem) => a.isDefault) ?? billingAccounts[0])?.id ??\n      undefined,\n    [billingAccounts]\n  );\n\n  // Resolved selection: explicit choice wins; before any choice, use the default\n  const selectedAccountId: string | null =\n    explicitAccountId !== undefined ? explicitAccountId : (defaultAccountId ?? null);\n\n  const [filterStatus, setFilterStatus] = useState<FilterStatus>('all');\n  const [searchQuery, setSearchQuery] = useState('');\n  const [debouncedSearch, setDebouncedSearch] = useState('');\n  const [page, setPage] = useState(1);\n  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (debounceTimer.current) clearTimeout(debounceTimer.current);\n    debounceTimer.current = setTimeout(() => {\n      setDebouncedSearch(searchQuery);\n      setPage(1);\n    }, 400);\n    return () => {\n      if (debounceTimer.current) clearTimeout(debounceTimer.current);\n    };\n  }, [searchQuery]);\n\n  const { invoices, totalPages, isLoading, error, refetch } = usePaginatedInvoices({\n    billingAccountId: selectedAccountId ?? undefined,\n    status: filterStatus !== 'all' ? (filterStatus as InvoiceStatus) : undefined,\n    search: debouncedSearch || undefined,\n    page,\n    pageSize: 20,\n  });\n\n  // Permission check\n  if (!permissions.canViewInvoices) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <div className=\"size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-text-secondary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.accessDenied.title', 'Access Denied')}\n          </h2>\n          <p className=\"text-sm text-text-secondary max-w-sm\">\n            {tr('billing.invoices.noViewPermission', \"You don't have permission to view invoices.\")}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Loading state\n  if (isLoading && invoices.length === 0) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"space-y-3\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <div key={i} className=\"border border-border-subtle rounded-lg p-4\">\n              <div className=\"flex items-center gap-4\">\n                <div className=\"size-10 bg-bg-sunken animate-pulse rounded\" />\n                <div className=\"flex-1 space-y-2\">\n                  <div className=\"h-4 w-32 bg-bg-sunken animate-pulse rounded\" />\n                  <div className=\"h-3 w-48 bg-bg-sunken 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=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-status-error-text\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.invoices.failedToLoad', 'Failed to load invoices')}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">{error.message}</p>\n          <button\n            type=\"button\"\n            onClick={() => refetch()}\n            className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n          >\n            Try Again\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n            {tr('billing.invoices.title', 'Invoices')}\n          </h1>\n          <p className=\"text-sm text-text-secondary mt-1\">\n            {tr('billing.invoices.subtitle', 'View and manage your billing invoices')}\n          </p>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/refunds')}\n            className=\"inline-flex items-center gap-2 px-3 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken hover:border-border-strong transition-all duration-200\"\n          >\n            <RotateCcw className=\"size-4\" />\n            {tr('billing.invoices.myRefunds', 'My Refunds')}\n          </button>\n          {billingAccounts.length > 1 && (\n            <div className=\"flex items-center gap-2\">\n              <label className=\"text-sm text-text-secondary whitespace-nowrap\">\n                Billing Account\n              </label>\n              <select\n                value={selectedAccountId ?? ''}\n                onChange={(e) => setExplicitAccountId(e.target.value || null)}\n                className=\"text-sm border border-border-subtle rounded-button bg-bg-surface text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n              >\n                <option value=\"\">All Accounts</option>\n                {billingAccounts.map((account: BillingAccountItem) => (\n                  <option key={account.id ?? ''} value={account.id ?? ''}>\n                    {account.name ?? account.email ?? account.id}\n                    {account.isDefault ? ' (Default)' : ''}\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border-subtle\">\n        {/* Status Filter */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken flex-wrap\">\n          {(['all', 'OPEN', 'PAID', 'DRAFT', 'VOID'] as FilterStatus[]).map((status) => (\n            <button\n              type=\"button\"\n              key={status}\n              onClick={() => {\n                setFilterStatus(status);\n                setPage(1);\n              }}\n              className={`px-3 py-1.5 text-sm font-medium rounded-button transition-colors ${\n                filterStatus === status\n                  ? 'bg-bg-surface text-text-primary shadow-sm'\n                  : 'text-text-secondary hover:text-text-primary'\n              }`}\n            >\n              {status === 'all' ? 'All' : formatInvoiceStatus(status as InvoiceStatus)}\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 size-4 text-text-secondary\"\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.invoices.searchPlaceholder', 'Search by invoice number...')}\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-subtle rounded-button bg-bg-surface text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent\"\n          />\n        </div>\n      </div>\n\n      {/* Invoices Table */}\n      {!isLoading && invoices.length === 0 ? (\n        <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border-subtle rounded-card\">\n          <div className=\"size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n            <svg\n              className=\"size-6 text-text-secondary\"\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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-text-primary\">\n            {tr('billing.invoices.noInvoicesFound', 'No invoices found')}\n          </h3>\n          <p className=\"text-sm text-text-secondary mt-1\">\n            {filterStatus !== 'all' || debouncedSearch\n              ? tr('billing.invoices.noInvoicesFiltered', 'No invoices match your filters.')\n              : tr('billing.invoices.noInvoicesYet', \"You don't have any invoices yet.\")}\n          </p>\n        </div>\n      ) : (\n        <>\n          <div className=\"border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n            <table className=\"w-full\">\n              <thead className=\"bg-bg-sunken\">\n                <tr>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted\">\n                    Invoice\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted\">\n                    Status\n                  </th>\n                  {!selectedAccountId && billingAccounts.length > 1 && (\n                    <th className=\"text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted hidden lg:table-cell\">\n                      Account\n                    </th>\n                  )}\n                  <th className=\"text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted hidden sm:table-cell\">\n                    Date\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted hidden md:table-cell\">\n                    Due Date\n                  </th>\n                  <th className=\"text-right px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted\">\n                    Amount\n                  </th>\n                  <th className=\"text-right px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted\">\n                    Actions\n                  </th>\n                </tr>\n              </thead>\n              <tbody className=\"divide-y divide-border-subtle\">\n                {invoices.map((invoice) => (\n                  <InvoiceRow\n                    key={invoice.id}\n                    invoice={invoice}\n                    onView={() =>\n                      navigateTo(\n                        withBillingAccountId(`/invoices/${invoice.id}`, invoice.billingAccountId)\n                      )\n                    }\n                    canPay={permissions.canPayInvoice}\n                    canVoid={permissions.canVoidInvoice}\n                    showAccount={!selectedAccountId && billingAccounts.length > 1}\n                    accountName={\n                      billingAccounts.find(\n                        (a: BillingAccountItem) => a.id === invoice.billingAccountId\n                      )?.name ?? null\n                    }\n                  />\n                ))}\n              </tbody>\n            </table>\n          </div>\n\n          {totalPages > 1 && (\n            <div className=\"flex items-center justify-between pt-2\">\n              <p className=\"text-sm text-text-secondary\">\n                Page {page} of {totalPages}\n              </p>\n              <div className=\"flex items-center gap-2\">\n                <button\n                  type=\"button\"\n                  onClick={() => setPage((p) => Math.max(1, p - 1))}\n                  disabled={page <= 1}\n                  className=\"px-3 py-1.5 text-sm font-medium border border-border-subtle rounded-button bg-bg-surface text-text-primary hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors\"\n                >\n                  Previous\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}\n                  disabled={page >= totalPages}\n                  className=\"px-3 py-1.5 text-sm font-medium border border-border-subtle rounded-button bg-bg-surface text-text-primary hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors\"\n                >\n                  Next\n                </button>\n              </div>\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Invoice Row Component\n// ============================================================================\n\ninterface InvoiceRowProps {\n  invoice: Invoice;\n  onView: () => void;\n  canPay: boolean;\n  canVoid: boolean;\n  showAccount?: boolean;\n  accountName?: string | null;\n}\n\nconst InvoiceRow: FC<InvoiceRowProps> = ({\n  invoice,\n  onView,\n  canPay,\n  canVoid,\n  showAccount = false,\n  accountName,\n}) => {\n  const statusColor = getInvoiceStatusColor(invoice.status);\n  const isOpen = invoice.status === ('OPEN' as InvoiceStatus);\n  const isDraft = invoice.status === ('DRAFT' as InvoiceStatus);\n\n  return (\n    <tr className=\"hover:bg-bg-sunken transition-colors\">\n      <td className=\"p-4\">\n        {invoice.invoiceUrl ? (\n          <a\n            href={invoice.invoiceUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"font-medium text-text-primary hover:text-text-link transition-colors\"\n          >\n            {formatInvoiceNumber(invoice.invoiceNumber)}\n          </a>\n        ) : (\n          <button\n            type=\"button\"\n            onClick={onView}\n            className=\"font-medium text-text-primary hover:text-text-link transition-colors\"\n          >\n            {formatInvoiceNumber(invoice.invoiceNumber)}\n          </button>\n        )}\n        {(invoice.itemDescription ?? invoice.subscription?.plan?.name) && (\n          <p className=\"text-sm text-text-secondary mt-0.5\">\n            {invoice.itemDescription ?? invoice.subscription?.plan?.name}\n          </p>\n        )}\n      </td>\n      <td className=\"p-4\">\n        <StatusPill status={statusColor} dot>\n          {formatInvoiceStatus(invoice.status)}\n        </StatusPill>\n      </td>\n      {showAccount && (\n        <td className=\"p-4 hidden lg:table-cell\">\n          {accountName ? (\n            <span className=\"inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full bg-bg-sunken text-text-secondary border border-border-subtle\">\n              {accountName}\n            </span>\n          ) : (\n            <span className=\"text-sm text-text-secondary\">, </span>\n          )}\n        </td>\n      )}\n      <td className=\"p-4 text-sm text-text-secondary hidden sm:table-cell\">\n        {formatDate(invoice.createdAt, 'short')}\n      </td>\n      <td className=\"p-4 text-sm text-text-secondary hidden md:table-cell\">\n        {invoice.dueDate ? formatDate(invoice.dueDate, 'short') : '—'}\n      </td>\n      <td className=\"p-4 text-right font-medium text-text-primary\">\n        {formatCurrency(invoice.total, invoice.currency)}\n      </td>\n      <td className=\"p-4 text-right\">\n        <div className=\"flex items-center justify-end gap-2\">\n          {invoice.invoiceUrl ? (\n            <a\n              href={invoice.invoiceUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"px-3 py-1.5 text-sm font-medium text-text-primary hover:bg-bg-sunken rounded-button transition-colors duration-200\"\n            >\n              View\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              onClick={onView}\n              className=\"px-3 py-1.5 text-sm font-medium text-text-primary hover:bg-bg-sunken rounded-button transition-colors duration-200\"\n            >\n              View\n            </button>\n          )}\n          {invoice.pdfUrl && (\n            <a\n              href={invoice.pdfUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"px-3 py-1.5 text-sm font-medium text-text-link hover:bg-[var(--color-accent-softHover)] rounded-button transition-colors duration-200\"\n            >\n              PDF\n            </a>\n          )}\n          {isOpen && canPay && (\n            <button\n              type=\"button\"\n              className=\"px-3 py-1.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n            >\n              Pay\n            </button>\n          )}\n          {(isOpen || isDraft) && canVoid && (\n            <button\n              type=\"button\"\n              className=\"px-3 py-1.5 text-sm font-medium text-status-error-text hover:bg-status-error-bg-subtle rounded-button transition-colors duration-200\"\n            >\n              Void\n            </button>\n          )}\n        </div>\n      </td>\n    </tr>\n  );\n};\n"],"mappings":"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"}