@burdenoff/microfe-billing 2026.526.1 → 2026.528.1

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

@@ -1 +1 @@
-{"version":3,"file":"InvoiceDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/billing/pages/InvoiceDetailPage.tsx"],"sourcesContent":["/**\n * Billing Module - Invoice Detail Page\n * Displays detailed information about a single invoice\n */\n\nimport { type FC, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport { useInvoice, useInvoiceMutations } from '../hooks/useInvoices';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useGetDefaultBillingAccountDashboardQuery } from '../../../../generated/global-operations';\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 { InvoiceStatus } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const InvoiceDetailPage: 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 { invoiceId } = useParams<{ invoiceId: string }>();\n  const navigateTo = useBillingNavigate();\n  const { orgId } = useBilling();\n  const permissions = useBillingPermissions();\n  const { selectedAccountId } = useBillingAccountSelection({\n    orgId,\n    syncFromUrl: true,\n    urlParamName: 'billingAccountId',\n  });\n  const { data: defaultBillingAccountData } = useGetDefaultBillingAccountDashboardQuery({\n    fetchPolicy: 'cache-first',\n  });\n  const billingAccountId =\n    selectedAccountId ?? defaultBillingAccountData?.getDefaultBillingAccount?.id ?? undefined;\n  const { invoice, isLoading, error, refetch } = useInvoice(invoiceId, billingAccountId);\n  const { payInvoice, voidInvoice, isPaying, isVoiding } = useInvoiceMutations();\n  const defaultPaymentMethodId =\n    defaultBillingAccountData?.getDefaultBillingAccount?.defaultPaymentMethod;\n\n  // Action error state\n  const [actionError, setActionError] = useState<string | null>(null);\n\n  // Handle pay invoice\n  const handlePayInvoice = async () => {\n    if (!invoice) return;\n    if (!defaultPaymentMethodId) {\n      setActionError('Add and set a default payment method before paying this invoice.');\n      return;\n    }\n\n    if (!billingAccountId) {\n      setActionError('No billing account context');\n      return;\n    }\n    setActionError(null);\n    try {\n      await payInvoice(invoice.id, defaultPaymentMethodId, billingAccountId);\n      await refetch();\n    } catch (err) {\n      setActionError(err instanceof Error ? err.message : 'Failed to pay invoice');\n    }\n  };\n\n  // Handle void invoice\n  const handleVoidInvoice = async () => {\n    if (!invoice) return;\n    if (!billingAccountId) {\n      setActionError('No billing account context');\n      return;\n    }\n\n    setActionError(null);\n    try {\n      await voidInvoice(invoice.id, billingAccountId);\n      await refetch();\n    } catch (err) {\n      setActionError(err instanceof Error ? err.message : 'Failed to void invoice');\n    }\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=\"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\">\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) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"h-10 w-10 bg-muted animate-pulse rounded\" />\n          <div className=\"space-y-2\">\n            <div className=\"h-8 w-48 bg-muted animate-pulse rounded\" />\n            <div className=\"h-4 w-32 bg-muted animate-pulse rounded\" />\n          </div>\n        </div>\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-6\">\n            <div className=\"border border-border rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-32 bg-muted animate-pulse rounded\" />\n              <div className=\"h-4 w-full bg-muted animate-pulse rounded\" />\n              <div className=\"h-4 w-3/4 bg-muted animate-pulse rounded\" />\n            </div>\n            <div className=\"border border-border rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-24 bg-muted animate-pulse rounded\" />\n              {[1, 2, 3].map((i) => (\n                <div key={i} className=\"flex items-center gap-4\">\n                  <div className=\"h-4 flex-1 bg-muted animate-pulse rounded\" />\n                  <div className=\"h-4 w-16 bg-muted animate-pulse rounded\" />\n                  <div className=\"h-4 w-16 bg-muted animate-pulse rounded\" />\n                  <div className=\"h-4 w-20 bg-muted animate-pulse rounded\" />\n                </div>\n              ))}\n            </div>\n          </div>\n          <div className=\"space-y-6\">\n            <div className=\"border border-border rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-24 bg-muted animate-pulse rounded\" />\n              {[1, 2, 3, 4].map((i) => (\n                <div key={i} className=\"space-y-1\">\n                  <div className=\"h-3 w-20 bg-muted animate-pulse rounded\" />\n                  <div className=\"h-4 w-28 bg-muted animate-pulse rounded\" />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error || !invoice) {\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\">\n            {tr('billing.invoices.invoiceNotFound', 'Invoice not found')}\n          </h2>\n          <p className=\"text-sm text-muted-foreground\">\n            {error?.message ||\n              tr(\n                'billing.invoices.invoiceNotFoundMessage',\n                'The invoice you are looking for does not exist.'\n              )}\n          </p>\n          <div className=\"flex items-center justify-center gap-3\">\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            <button\n              onClick={() => navigateTo(withBillingAccountId('/invoices', billingAccountId))}\n              className=\"px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n            >\n              Back to Invoices\n            </button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  const statusColor = getInvoiceStatusColor(invoice.status);\n  const isOpen = invoice.status === ('OPEN' as InvoiceStatus);\n  const isDraft = invoice.status === ('DRAFT' as InvoiceStatus);\n  const items = invoice.items || [];\n  const amountDue = invoice.total - invoice.amountPaid;\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"flex items-start gap-4\">\n          <button\n            onClick={() => navigateTo(withBillingAccountId('/invoices', billingAccountId))}\n            className=\"p-2 -ml-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors\"\n          >\n            <svg className=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n          <div>\n            <div className=\"flex items-center gap-3\">\n              <h1 className=\"text-2xl font-bold text-foreground\">\n                Invoice {formatInvoiceNumber(invoice.invoiceNumber)}\n              </h1>\n              <span\n                className={`px-2 py-1 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n              >\n                {formatInvoiceStatus(invoice.status)}\n              </span>\n            </div>\n            <p className=\"text-sm text-muted-foreground mt-1\">\n              Created {formatDate(invoice.createdAt, 'short')}\n              {invoice.dueDate && ` · Due ${formatDate(invoice.dueDate, 'short')}`}\n            </p>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2 flex-wrap\">\n          {invoice.pdfUrl && (\n            <a\n              href={invoice.pdfUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n            >\n              Download PDF\n            </a>\n          )}\n          {invoice.invoiceUrl && (\n            <a\n              href={invoice.invoiceUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n            >\n              View on Portal\n            </a>\n          )}\n          {isOpen && permissions.canPayInvoice && (\n            <button\n              onClick={handlePayInvoice}\n              disabled={isPaying || !defaultPaymentMethodId}\n              className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50\"\n            >\n              {!defaultPaymentMethodId\n                ? 'Default Payment Method Required'\n                : isPaying\n                  ? 'Processing...'\n                  : 'Pay Invoice'}\n            </button>\n          )}\n          {(isOpen || isDraft) && permissions.canVoidInvoice && (\n            <button\n              onClick={handleVoidInvoice}\n              disabled={isVoiding}\n              className=\"px-4 py-2 text-sm font-medium border border-border text-destructive rounded-md hover:bg-destructive/10 transition-colors disabled:opacity-50\"\n            >\n              {isVoiding\n                ? tr('billing.invoices.voiding', 'Voiding...')\n                : tr('billing.invoices.voidInvoice', 'Void Invoice')}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Action Error */}\n      {actionError && (\n        <div className=\"p-3 bg-destructive/10 border border-destructive/20 rounded-md\">\n          <p className=\"text-sm text-destructive\">{actionError}</p>\n        </div>\n      )}\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Line Items */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n            <div className=\"p-6 border-b border-border bg-muted/30\">\n              <h2 className=\"text-lg font-semibold text-foreground\">\n                {tr('billing.invoices.lineItems', 'Line Items')} ({items.length})\n              </h2>\n            </div>\n            {items.length === 0 ? (\n              <div className=\"p-6\">\n                <p className=\"text-sm text-muted-foreground\">\n                  {tr('billing.invoices.noLineItems', 'No line items on this invoice.')}\n                </p>\n              </div>\n            ) : (\n              <div className=\"overflow-x-auto\">\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                        Description\n                      </th>\n                      <th className=\"text-right px-4 py-3 text-sm font-medium text-muted-foreground\">\n                        Qty\n                      </th>\n                      <th className=\"text-right px-4 py-3 text-sm font-medium text-muted-foreground\">\n                        Unit Price\n                      </th>\n                      <th className=\"text-right px-4 py-3 text-sm font-medium text-muted-foreground\">\n                        Amount\n                      </th>\n                    </tr>\n                  </thead>\n                  <tbody className=\"divide-y divide-border\">\n                    {items.map((item) => (\n                      <tr key={item.id} className=\"hover:bg-muted/30 transition-colors\">\n                        <td className=\"px-4 py-4 text-sm text-foreground\">{item.description}</td>\n                        <td className=\"px-4 py-4 text-sm text-muted-foreground text-right\">\n                          {item.quantity}\n                        </td>\n                        <td className=\"px-4 py-4 text-sm text-muted-foreground text-right\">\n                          {formatCurrency(item.unitPrice, invoice.currency)}\n                        </td>\n                        <td className=\"px-4 py-4 text-sm font-medium text-foreground text-right\">\n                          {formatCurrency(item.amount, invoice.currency)}\n                        </td>\n                      </tr>\n                    ))}\n                  </tbody>\n                </table>\n              </div>\n            )}\n\n            {/* Totals */}\n            <div className=\"border-t border-border p-4\">\n              <div className=\"max-w-xs ml-auto space-y-2\">\n                <div className=\"flex items-center justify-between text-sm\">\n                  <span className=\"text-muted-foreground\">\n                    {tr('billing.invoices.subtotal', 'Subtotal')}\n                  </span>\n                  <span className=\"text-foreground\">\n                    {formatCurrency(invoice.subtotal, invoice.currency)}\n                  </span>\n                </div>\n                <div className=\"flex items-center justify-between text-sm\">\n                  <span className=\"text-muted-foreground\">{tr('billing.invoices.tax', 'Tax')}</span>\n                  <span className=\"text-foreground\">\n                    {formatCurrency(invoice.tax, invoice.currency)}\n                  </span>\n                </div>\n                <div className=\"flex items-center justify-between text-sm font-semibold border-t border-border pt-2\">\n                  <span className=\"text-foreground\">{tr('billing.invoices.total', 'Total')}</span>\n                  <span className=\"text-foreground\">\n                    {formatCurrency(invoice.total, invoice.currency)}\n                  </span>\n                </div>\n                {invoice.amountPaid > 0 && (\n                  <div className=\"flex items-center justify-between text-sm\">\n                    <span className=\"text-muted-foreground\">\n                      {tr('billing.invoices.amountPaid', 'Amount Paid')}\n                    </span>\n                    <span className=\"text-status-success-text\">\n                      -{formatCurrency(invoice.amountPaid, invoice.currency)}\n                    </span>\n                  </div>\n                )}\n                {amountDue > 0 && (\n                  <div className=\"flex items-center justify-between text-sm font-semibold border-t border-border pt-2\">\n                    <span className=\"text-foreground\">\n                      {tr('billing.invoices.amountDue', 'Amount Due')}\n                    </span>\n                    <span className=\"text-status-warning-text\">\n                      {formatCurrency(amountDue, invoice.currency)}\n                    </span>\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n\n          {/* Subscription Info */}\n          {invoice.subscription && (\n            <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n              <div className=\"p-6 border-b border-border bg-muted/30\">\n                <h2 className=\"text-lg font-semibold text-foreground\">\n                  {tr('billing.invoices.subscription', 'Subscription')}\n                </h2>\n              </div>\n              <div className=\"p-6 space-y-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div>\n                    <p className=\"font-medium text-foreground\">\n                      {invoice.subscription.plan?.name || 'Unknown Plan'}\n                    </p>\n                    <p className=\"text-sm text-muted-foreground mt-0.5\">\n                      Subscription ID:{' '}\n                      <span className=\"font-mono text-xs\">{invoice.subscription.id}</span>\n                    </p>\n                  </div>\n                  <button\n                    onClick={() =>\n                      navigateTo(\n                        withBillingAccountId(\n                          `/subscriptions/${invoice.subscription!.id}`,\n                          billingAccountId\n                        )\n                      )\n                    }\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                </div>\n              </div>\n            </div>\n          )}\n\n          {/* Payment Info */}\n          {invoice.payment && (\n            <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n              <div className=\"p-6 border-b border-border bg-muted/30\">\n                <h2 className=\"text-lg font-semibold text-foreground\">\n                  {tr('billing.invoices.payment', 'Payment')}\n                </h2>\n              </div>\n              <div className=\"p-6\">\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div>\n                    <p className=\"text-sm text-muted-foreground\">Payment ID</p>\n                    <p className=\"font-mono text-sm text-foreground mt-0.5 break-all\">\n                      {invoice.payment.id}\n                    </p>\n                  </div>\n                  <div>\n                    <p className=\"text-sm text-muted-foreground\">Amount</p>\n                    <p className=\"text-sm text-foreground mt-0.5\">\n                      {formatCurrency(invoice.payment.amount, invoice.payment.currency)}\n                    </p>\n                  </div>\n                  <div>\n                    <p className=\"text-sm text-muted-foreground\">Status</p>\n                    <p className=\"text-sm text-foreground mt-0.5 capitalize\">\n                      {invoice.payment.status.toLowerCase()}\n                    </p>\n                  </div>\n                  <div>\n                    <p className=\"text-sm text-muted-foreground\">Method</p>\n                    <p className=\"text-sm text-foreground mt-0.5 capitalize\">\n                      {invoice.payment.method.toLowerCase().replace(/_/g, ' ')}\n                    </p>\n                  </div>\n                  {invoice.payment.provider && (\n                    <div>\n                      <p className=\"text-sm text-muted-foreground\">Provider</p>\n                      <p className=\"text-sm text-foreground mt-0.5 capitalize\">\n                        {invoice.payment.provider}\n                      </p>\n                    </div>\n                  )}\n                  {invoice.payment.paidAt && (\n                    <div>\n                      <p className=\"text-sm text-muted-foreground\">Paid At</p>\n                      <p className=\"text-sm text-foreground mt-0.5\">\n                        {formatDate(invoice.payment.paidAt, 'short')}\n                      </p>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Invoice Summary */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n            <div className=\"p-6 border-b border-border bg-muted/30\">\n              <h2 className=\"text-lg font-semibold text-foreground\">\n                {tr('billing.invoices.details', 'Details')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Invoice ID</p>\n                <p className=\"font-mono text-sm text-foreground mt-0.5 break-all\">{invoice.id}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Invoice Number</p>\n                <p className=\"text-sm text-foreground mt-0.5\">\n                  {formatInvoiceNumber(invoice.invoiceNumber)}\n                </p>\n              </div>\n              {invoice.itemDescription && (\n                <div>\n                  <p className=\"text-sm text-muted-foreground\">Description</p>\n                  <p className=\"text-sm text-foreground mt-0.5\">{invoice.itemDescription}</p>\n                </div>\n              )}\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Status</p>\n                <span\n                  className={`inline-flex mt-0.5 px-2 py-1 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n                >\n                  {formatInvoiceStatus(invoice.status)}\n                </span>\n              </div>\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Currency</p>\n                <p className=\"text-sm text-foreground mt-0.5\">{invoice.currency}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Total</p>\n                <p className=\"text-sm font-semibold text-foreground mt-0.5\">\n                  {formatCurrency(invoice.total, invoice.currency)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Amount Paid</p>\n                <p className=\"text-sm text-status-success-text mt-0.5\">\n                  {formatCurrency(invoice.amountPaid, invoice.currency)}\n                </p>\n              </div>\n              {amountDue > 0 && (\n                <div>\n                  <p className=\"text-sm text-muted-foreground\">Amount Due</p>\n                  <p className=\"text-sm font-semibold text-status-warning-text mt-0.5\">\n                    {formatCurrency(amountDue, invoice.currency)}\n                  </p>\n                </div>\n              )}\n            </div>\n          </div>\n\n          {/* Dates */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n            <div className=\"p-6 border-b border-border bg-muted/30\">\n              <h2 className=\"text-lg font-semibold text-foreground\">\n                {tr('billing.invoices.dates', 'Dates')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Created</p>\n                <p className=\"text-sm text-foreground mt-0.5\">{formatDate(invoice.createdAt)}</p>\n              </div>\n              {invoice.dueDate && (\n                <div>\n                  <p className=\"text-sm text-muted-foreground\">Due Date</p>\n                  <p className=\"text-sm text-foreground mt-0.5\">{formatDate(invoice.dueDate)}</p>\n                </div>\n              )}\n              {invoice.paidAt && (\n                <div>\n                  <p className=\"text-sm text-muted-foreground\">Paid At</p>\n                  <p className=\"text-sm text-foreground mt-0.5\">{formatDate(invoice.paidAt)}</p>\n                </div>\n              )}\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Last Updated</p>\n                <p className=\"text-sm text-foreground mt-0.5\">{formatDate(invoice.updatedAt)}</p>\n              </div>\n            </div>\n          </div>\n\n          {/* Organization */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n            <div className=\"p-6 border-b border-border bg-muted/30\">\n              <h2 className=\"text-lg font-semibold text-foreground\">\n                {tr('billing.invoices.organization', 'Organization')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Organization ID</p>\n                <p className=\"font-mono text-sm text-foreground mt-0.5 break-all\">\n                  {invoice.orgId}\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAwBA,IAAa,UAA8B;CACzC,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,EAAE,iBAAc,GAAkC,EAClD,IAAa,GAAoB,EACjC,EAAE,aAAU,GAAY,EACxB,IAAc,GAAuB,EACrC,EAAE,yBAAsB,EAA2B;EACvD;EACA,aAAa;EACb,cAAc;EACf,CAAC,EACI,EAAE,MAAM,MAA8B,EAA0C,EACpF,aAAa,eACd,CAAC,EACI,IACJ,KAAqB,GAA2B,0BAA0B,MAAM,KAAA,GAC5E,EAAE,YAAS,cAAW,UAAO,eAAY,EAAW,GAAW,EAAiB,EAChF,EAAE,eAAY,gBAAa,aAAU,iBAAc,GAAqB,EACxE,IACJ,GAA2B,0BAA0B,sBAGjD,CAAC,GAAa,KAAkB,EAAwB,KAAK,EAG7D,IAAmB,YAAY;AAC9B,SACL;OAAI,CAAC,GAAwB;AAC3B,MAAe,mEAAmE;AAClF;;AAGF,OAAI,CAAC,GAAkB;AACrB,MAAe,6BAA6B;AAC5C;;AAEF,KAAe,KAAK;AACpB,OAAI;AAEF,IADA,MAAM,EAAW,EAAQ,IAAI,GAAwB,EAAiB,EACtE,MAAM,GAAS;YACR,GAAK;AACZ,MAAe,aAAe,QAAQ,EAAI,UAAU,wBAAwB;;;IAK1E,IAAoB,YAAY;AAC/B,SACL;OAAI,CAAC,GAAkB;AACrB,MAAe,6BAA6B;AAC5C;;AAGF,KAAe,KAAK;AACpB,OAAI;AAEF,IADA,MAAM,EAAY,EAAQ,IAAI,EAAiB,EAC/C,MAAM,GAAS;YACR,GAAK;AACZ,MAAe,aAAe,QAAQ,EAAI,UAAU,yBAAyB;;;;AAKjF,KAAI,CAAC,EAAY,gBACf,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,SAAQ;MACR,QAAO;gBAEP,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA;KACF,CAAA;IACN,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,8BAA8B,gBAAgB;KAC/C,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eACV,EAAG,qCAAqC,8CAA8C;KACrF,CAAA;IACA;;EACF,CAAA;AAKV,KAAI,EACF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD,EAAK,WAAU,4CAA6C,CAAA,EAC5D,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA,EAC3D,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA,CACvD;MACF;MACN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA;MAC3D,kBAAC,OAAD,EAAK,WAAU,6CAA8C,CAAA;MAC7D,kBAAC,OAAD,EAAK,WAAU,4CAA6C,CAAA;MACxD;QACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA,EAC1D;MAAC;MAAG;MAAG;MAAE,CAAC,KAAK,MACd,kBAAC,OAAD;MAAa,WAAU;gBAAvB;OACE,kBAAC,OAAD,EAAK,WAAU,6CAA8C,CAAA;OAC7D,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA;OAC3D,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA;OAC3D,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA;OACvD;QALI,EAKJ,CACN,CACE;OACF;OACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA,EAC1D;MAAC;MAAG;MAAG;MAAG;MAAE,CAAC,KAAK,MACjB,kBAAC,OAAD;MAAa,WAAU;gBAAvB,CACE,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA,EAC3D,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA,CACvD;QAHI,EAGJ,CACN,CACE;;IACF,CAAA,CACF;KACF;;AAKV,KAAI,KAAS,CAAC,EACZ,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,SAAQ;MACR,QAAO;gBAEP,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA;KACF,CAAA;IACN,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,oCAAoC,oBAAoB;KACzD,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eACV,GAAO,WACN,EACE,2CACA,kDACD;KACD,CAAA;IACJ,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,eAAe,GAAS;MACxB,WAAU;gBACX;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,eAAe,EAAW,EAAqB,aAAa,EAAiB,CAAC;MAC9E,WAAU;gBACX;MAEQ,CAAA,CACL;;IACF;;EACF,CAAA;CAIV,IAAM,IAAc,EAAsB,EAAQ,OAAO,EACnD,IAAS,EAAQ,WAAY,QAC7B,IAAU,EAAQ,WAAY,SAC9B,IAAQ,EAAQ,SAAS,EAAE,EAC3B,IAAY,EAAQ,QAAQ,EAAQ;AAE1C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,eAAe,EAAW,EAAqB,aAAa,EAAiB,CAAC;MAC9E,WAAU;gBAEV,kBAAC,OAAD;OAAK,WAAU;OAAU,MAAK;OAAO,SAAQ;OAAY,QAAO;iBAC9D,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,aAAa;QACb,GAAE;QACF,CAAA;OACE,CAAA;MACC,CAAA,EACT,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBAAd,CAAmD,YACxC,EAAoB,EAAQ,cAAc,CAChD;UACL,kBAAC,QAAD;OACE,WAAW,yCAAyC,EAAsB,EAAY;iBAErF,EAAoB,EAAQ,OAAO;OAC/B,CAAA,CACH;SACN,kBAAC,KAAD;MAAG,WAAU;gBAAb;OAAkD;OACvC,EAAW,EAAQ,WAAW,QAAQ;OAC9C,EAAQ,WAAW,UAAU,EAAW,EAAQ,SAAS,QAAQ;OAChE;QACA,EAAA,CAAA,CACF;QAEN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,EAAQ,UACP,kBAAC,KAAD;OACE,MAAM,EAAQ;OACd,QAAO;OACP,KAAI;OACJ,WAAU;iBACX;OAEG,CAAA;MAEL,EAAQ,cACP,kBAAC,KAAD;OACE,MAAM,EAAQ;OACd,QAAO;OACP,KAAI;OACJ,WAAU;iBACX;OAEG,CAAA;MAEL,KAAU,EAAY,iBACrB,kBAAC,UAAD;OACE,SAAS;OACT,UAAU,KAAY,CAAC;OACvB,WAAU;iBAER,IAEE,IACE,kBACA,gBAHF;OAIG,CAAA;OAET,KAAU,MAAY,EAAY,kBAClC,kBAAC,UAAD;OACE,SAAS;OACT,UAAU;OACV,WAAU;iBAET,IACG,EAAG,4BAA4B,aAAa,GAC5C,EAAG,gCAAgC,eAAe;OAC/C,CAAA;MAEP;OACF;;GAGL,KACC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,KAAD;KAAG,WAAU;eAA4B;KAAgB,CAAA;IACrD,CAAA;GAGR,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEE,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,MAAD;UAAI,WAAU;oBAAd;WACG,EAAG,8BAA8B,aAAa;WAAC;WAAG,EAAM;WAAO;WAC7D;;SACD,CAAA;QACL,EAAM,WAAW,IAChB,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAG,gCAAgC,iCAAiC;UACnE,CAAA;SACA,CAAA,GAEN,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CACE,kBAAC,SAAD;WAAO,WAAU;qBACf,kBAAC,MAAD,EAAA,UAAA;YACE,kBAAC,MAAD;aAAI,WAAU;uBAAgE;aAEzE,CAAA;YACL,kBAAC,MAAD;aAAI,WAAU;uBAAiE;aAE1E,CAAA;YACL,kBAAC,MAAD;aAAI,WAAU;uBAAiE;aAE1E,CAAA;YACL,kBAAC,MAAD;aAAI,WAAU;uBAAiE;aAE1E,CAAA;YACF,EAAA,CAAA;WACC,CAAA,EACR,kBAAC,SAAD;WAAO,WAAU;qBACd,EAAM,KAAK,MACV,kBAAC,MAAD;YAAkB,WAAU;sBAA5B;aACE,kBAAC,MAAD;cAAI,WAAU;wBAAqC,EAAK;cAAiB,CAAA;aACzE,kBAAC,MAAD;cAAI,WAAU;wBACX,EAAK;cACH,CAAA;aACL,kBAAC,MAAD;cAAI,WAAU;wBACX,EAAe,EAAK,WAAW,EAAQ,SAAS;cAC9C,CAAA;aACL,kBAAC,MAAD;cAAI,WAAU;wBACX,EAAe,EAAK,QAAQ,EAAQ,SAAS;cAC3C,CAAA;aACF;cAXI,EAAK,GAWT,CACL;WACI,CAAA,CACF;;SACJ,CAAA;QAIR,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,OAAD;UAAK,WAAU;oBAAf;WACE,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAG,6BAA6B,WAAW;aACvC,CAAA,EACP,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAe,EAAQ,UAAU,EAAQ,SAAS;aAC9C,CAAA,CACH;;WACN,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,QAAD;aAAM,WAAU;uBAAyB,EAAG,wBAAwB,MAAM;aAAQ,CAAA,EAClF,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAe,EAAQ,KAAK,EAAQ,SAAS;aACzC,CAAA,CACH;;WACN,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,QAAD;aAAM,WAAU;uBAAmB,EAAG,0BAA0B,QAAQ;aAAQ,CAAA,EAChF,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAe,EAAQ,OAAO,EAAQ,SAAS;aAC3C,CAAA,CACH;;WACL,EAAQ,aAAa,KACpB,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAG,+BAA+B,cAAc;aAC5C,CAAA,EACP,kBAAC,QAAD;aAAM,WAAU;uBAAhB,CAA2C,KACvC,EAAe,EAAQ,YAAY,EAAQ,SAAS,CACjD;eACH;;WAEP,IAAY,KACX,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAG,8BAA8B,aAAa;aAC1C,CAAA,EACP,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAe,GAAW,EAAQ,SAAS;aACvC,CAAA,CACH;;WAEJ;;SACF,CAAA;QACF;;MAGL,EAAQ,gBACP,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,iCAAiC,eAAe;SACjD,CAAA;QACD,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAQ,aAAa,MAAM,QAAQ;UAClC,CAAA,EACJ,kBAAC,KAAD;UAAG,WAAU;oBAAb;WAAoD;WACjC;WACjB,kBAAC,QAAD;YAAM,WAAU;sBAAqB,EAAQ,aAAa;YAAU,CAAA;WAClE;YACA,EAAA,CAAA,EACN,kBAAC,UAAD;UACE,eACE,EACE,EACE,kBAAkB,EAAQ,aAAc,MACxC,EACD,CACF;UAEH,WAAU;oBACX;UAEQ,CAAA,CACL;;QACF,CAAA,CACF;;MAIP,EAAQ,WACP,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,4BAA4B,UAAU;SACvC,CAAA;QACD,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAgC;WAAc,CAAA,EAC3D,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAQ,QAAQ;WACf,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAgC;WAAU,CAAA,EACvD,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAe,EAAQ,QAAQ,QAAQ,EAAQ,QAAQ,SAAS;WAC/D,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAgC;WAAU,CAAA,EACvD,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAQ,QAAQ,OAAO,aAAa;WACnC,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAgC;WAAU,CAAA,EACvD,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAQ,QAAQ,OAAO,aAAa,CAAC,QAAQ,MAAM,IAAI;WACtD,CAAA,CACA,EAAA,CAAA;UACL,EAAQ,QAAQ,YACf,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAgC;WAAY,CAAA,EACzD,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAQ,QAAQ;WACf,CAAA,CACA,EAAA,CAAA;UAEP,EAAQ,QAAQ,UACf,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAgC;WAAW,CAAA,EACxD,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAW,EAAQ,QAAQ,QAAQ,QAAQ;WAC1C,CAAA,CACA,EAAA,CAAA;UAEJ;;QACF,CAAA,CACF;;MAEJ;QAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,4BAA4B,UAAU;SACvC,CAAA;QACD,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAgC;UAAc,CAAA,EAC3D,kBAAC,KAAD;UAAG,WAAU;oBAAsD,EAAQ;UAAO,CAAA,CAC9E,EAAA,CAAA;SACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAgC;UAAkB,CAAA,EAC/D,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAoB,EAAQ,cAAc;UACzC,CAAA,CACA,EAAA,CAAA;SACL,EAAQ,mBACP,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAgC;UAAe,CAAA,EAC5D,kBAAC,KAAD;UAAG,WAAU;oBAAkC,EAAQ;UAAoB,CAAA,CACvE,EAAA,CAAA;SAER,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAgC;UAAU,CAAA,EACvD,kBAAC,QAAD;UACE,WAAW,4DAA4D,EAAsB,EAAY;oBAExG,EAAoB,EAAQ,OAAO;UAC/B,CAAA,CACH,EAAA,CAAA;SACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAgC;UAAY,CAAA,EACzD,kBAAC,KAAD;UAAG,WAAU;oBAAkC,EAAQ;UAAa,CAAA,CAChE,EAAA,CAAA;SACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAgC;UAAS,CAAA,EACtD,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAe,EAAQ,OAAO,EAAQ,SAAS;UAC9C,CAAA,CACA,EAAA,CAAA;SACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAgC;UAAe,CAAA,EAC5D,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAe,EAAQ,YAAY,EAAQ,SAAS;UACnD,CAAA,CACA,EAAA,CAAA;SACL,IAAY,KACX,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAgC;UAAc,CAAA,EAC3D,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAe,GAAW,EAAQ,SAAS;UAC1C,CAAA,CACA,EAAA,CAAA;SAEJ;UACF;;MAGN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,0BAA0B,QAAQ;SACnC,CAAA;QACD,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAgC;UAAW,CAAA,EACxD,kBAAC,KAAD;UAAG,WAAU;oBAAkC,EAAW,EAAQ,UAAU;UAAK,CAAA,CAC7E,EAAA,CAAA;SACL,EAAQ,WACP,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAgC;UAAY,CAAA,EACzD,kBAAC,KAAD;UAAG,WAAU;oBAAkC,EAAW,EAAQ,QAAQ;UAAK,CAAA,CAC3E,EAAA,CAAA;SAEP,EAAQ,UACP,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAgC;UAAW,CAAA,EACxD,kBAAC,KAAD;UAAG,WAAU;oBAAkC,EAAW,EAAQ,OAAO;UAAK,CAAA,CAC1E,EAAA,CAAA;SAER,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAgC;UAAgB,CAAA,EAC7D,kBAAC,KAAD;UAAG,WAAU;oBAAkC,EAAW,EAAQ,UAAU;UAAK,CAAA,CAC7E,EAAA,CAAA;SACF;UACF;;MAGN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,iCAAiC,eAAe;SACjD,CAAA;QACD,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAAgC;SAAmB,CAAA,EAChE,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAQ;SACP,CAAA,CACA,EAAA,CAAA;QACF,CAAA,CACF;;MACF;OACF;;GACF"}
+{"version":3,"file":"InvoiceDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/billing/pages/InvoiceDetailPage.tsx"],"sourcesContent":["/**\n * Billing Module - Invoice Detail Page\n * Displays detailed information about a single invoice\n */\n\nimport { type FC, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport { useInvoice, useInvoiceMutations } from '../hooks/useInvoices';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useGetDefaultBillingAccountDashboardQuery } from '../../../../generated/global-operations';\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 { InvoiceStatus } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const InvoiceDetailPage: 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 { invoiceId } = useParams<{ invoiceId: string }>();\n  const navigateTo = useBillingNavigate();\n  const { orgId } = useBilling();\n  const permissions = useBillingPermissions();\n  const { selectedAccountId } = useBillingAccountSelection({\n    orgId,\n    syncFromUrl: true,\n    urlParamName: 'billingAccountId',\n  });\n  const { data: defaultBillingAccountData } = useGetDefaultBillingAccountDashboardQuery({\n    fetchPolicy: 'cache-first',\n  });\n  const billingAccountId =\n    selectedAccountId ?? defaultBillingAccountData?.getDefaultBillingAccount?.id ?? undefined;\n  const { invoice, isLoading, error, refetch } = useInvoice(invoiceId, billingAccountId);\n  const { payInvoice, voidInvoice, isPaying, isVoiding } = useInvoiceMutations();\n  const defaultPaymentMethodId =\n    defaultBillingAccountData?.getDefaultBillingAccount?.defaultPaymentMethod;\n\n  // Action error state\n  const [actionError, setActionError] = useState<string | null>(null);\n\n  // Handle pay invoice\n  const handlePayInvoice = async () => {\n    if (!invoice) return;\n    if (!defaultPaymentMethodId) {\n      setActionError('Add and set a default payment method before paying this invoice.');\n      return;\n    }\n\n    if (!billingAccountId) {\n      setActionError('No billing account context');\n      return;\n    }\n    setActionError(null);\n    try {\n      await payInvoice(invoice.id, defaultPaymentMethodId, billingAccountId);\n      await refetch();\n    } catch (err) {\n      setActionError(err instanceof Error ? err.message : 'Failed to pay invoice');\n    }\n  };\n\n  // Handle void invoice\n  const handleVoidInvoice = async () => {\n    if (!invoice) return;\n    if (!billingAccountId) {\n      setActionError('No billing account context');\n      return;\n    }\n\n    setActionError(null);\n    try {\n      await voidInvoice(invoice.id, billingAccountId);\n      await refetch();\n    } catch (err) {\n      setActionError(err instanceof Error ? err.message : 'Failed to void invoice');\n    }\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) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"size-10 bg-muted animate-pulse rounded\" />\n          <div className=\"space-y-2\">\n            <div className=\"h-8 w-48 bg-muted animate-pulse rounded\" />\n            <div className=\"h-4 w-32 bg-muted animate-pulse rounded\" />\n          </div>\n        </div>\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-6\">\n            <div className=\"border border-border rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-32 bg-muted animate-pulse rounded\" />\n              <div className=\"h-4 w-full bg-muted animate-pulse rounded\" />\n              <div className=\"h-4 w-3/4 bg-muted animate-pulse rounded\" />\n            </div>\n            <div className=\"border border-border rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-24 bg-muted animate-pulse rounded\" />\n              {[1, 2, 3].map((i) => (\n                <div key={i} className=\"flex items-center gap-4\">\n                  <div className=\"h-4 flex-1 bg-muted animate-pulse rounded\" />\n                  <div className=\"h-4 w-16 bg-muted animate-pulse rounded\" />\n                  <div className=\"h-4 w-16 bg-muted animate-pulse rounded\" />\n                  <div className=\"h-4 w-20 bg-muted animate-pulse rounded\" />\n                </div>\n              ))}\n            </div>\n          </div>\n          <div className=\"space-y-6\">\n            <div className=\"border border-border rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-24 bg-muted animate-pulse rounded\" />\n              {[1, 2, 3, 4].map((i) => (\n                <div key={i} className=\"space-y-1\">\n                  <div className=\"h-3 w-20 bg-muted animate-pulse rounded\" />\n                  <div className=\"h-4 w-28 bg-muted animate-pulse rounded\" />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error || !invoice) {\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.invoiceNotFound', 'Invoice not found')}\n          </h2>\n          <p className=\"text-sm text-muted-foreground\">\n            {error?.message ||\n              tr(\n                'billing.invoices.invoiceNotFoundMessage',\n                'The invoice you are looking for does not exist.'\n              )}\n          </p>\n          <div className=\"flex items-center justify-center gap-3\">\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            <button\n              type=\"button\"\n              onClick={() => navigateTo(withBillingAccountId('/invoices', billingAccountId))}\n              className=\"px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n            >\n              Back to Invoices\n            </button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  const statusColor = getInvoiceStatusColor(invoice.status);\n  const isOpen = invoice.status === ('OPEN' as InvoiceStatus);\n  const isDraft = invoice.status === ('DRAFT' as InvoiceStatus);\n  const items = invoice.items || [];\n  const amountDue = invoice.total - invoice.amountPaid;\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"flex items-start gap-4\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(withBillingAccountId('/invoices', billingAccountId))}\n            className=\"p-2 -ml-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors\"\n          >\n            <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n          <div>\n            <div className=\"flex items-center gap-3\">\n              <h1 className=\"text-2xl font-bold text-foreground\">\n                Invoice {formatInvoiceNumber(invoice.invoiceNumber)}\n              </h1>\n              <span\n                className={`px-2 py-1 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n              >\n                {formatInvoiceStatus(invoice.status)}\n              </span>\n            </div>\n            <p className=\"text-sm text-muted-foreground mt-1\">\n              Created {formatDate(invoice.createdAt, 'short')}\n              {invoice.dueDate && ` · Due ${formatDate(invoice.dueDate, 'short')}`}\n            </p>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2 flex-wrap\">\n          {invoice.pdfUrl && (\n            <a\n              href={invoice.pdfUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n            >\n              Download PDF\n            </a>\n          )}\n          {invoice.invoiceUrl && (\n            <a\n              href={invoice.invoiceUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n            >\n              View on Portal\n            </a>\n          )}\n          {isOpen && permissions.canPayInvoice && (\n            <button\n              type=\"button\"\n              onClick={handlePayInvoice}\n              disabled={isPaying || !defaultPaymentMethodId}\n              className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50\"\n            >\n              {!defaultPaymentMethodId\n                ? 'Default Payment Method Required'\n                : isPaying\n                  ? 'Processing...'\n                  : 'Pay Invoice'}\n            </button>\n          )}\n          {(isOpen || isDraft) && permissions.canVoidInvoice && (\n            <button\n              type=\"button\"\n              onClick={handleVoidInvoice}\n              disabled={isVoiding}\n              className=\"px-4 py-2 text-sm font-medium border border-border text-destructive rounded-md hover:bg-destructive/10 transition-colors disabled:opacity-50\"\n            >\n              {isVoiding\n                ? tr('billing.invoices.voiding', 'Voiding...')\n                : tr('billing.invoices.voidInvoice', 'Void Invoice')}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Action Error */}\n      {actionError && (\n        <div className=\"p-3 bg-destructive/10 border border-destructive/20 rounded-md\">\n          <p className=\"text-sm text-destructive\">{actionError}</p>\n        </div>\n      )}\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Line Items */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n            <div className=\"p-6 border-b border-border bg-muted/30\">\n              <h2 className=\"text-lg font-semibold text-foreground\">\n                {tr('billing.invoices.lineItems', 'Line Items')} ({items.length})\n              </h2>\n            </div>\n            {items.length === 0 ? (\n              <div className=\"p-6\">\n                <p className=\"text-sm text-muted-foreground\">\n                  {tr('billing.invoices.noLineItems', 'No line items on this invoice.')}\n                </p>\n              </div>\n            ) : (\n              <div className=\"overflow-x-auto\">\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                        Description\n                      </th>\n                      <th className=\"text-right px-4 py-3 text-sm font-medium text-muted-foreground\">\n                        Qty\n                      </th>\n                      <th className=\"text-right px-4 py-3 text-sm font-medium text-muted-foreground\">\n                        Unit Price\n                      </th>\n                      <th className=\"text-right px-4 py-3 text-sm font-medium text-muted-foreground\">\n                        Amount\n                      </th>\n                    </tr>\n                  </thead>\n                  <tbody className=\"divide-y divide-border\">\n                    {items.map((item) => (\n                      <tr key={item.id} className=\"hover:bg-muted/30 transition-colors\">\n                        <td className=\"p-4 text-sm text-foreground\">{item.description}</td>\n                        <td className=\"p-4 text-sm text-muted-foreground text-right\">\n                          {item.quantity}\n                        </td>\n                        <td className=\"p-4 text-sm text-muted-foreground text-right\">\n                          {formatCurrency(item.unitPrice, invoice.currency)}\n                        </td>\n                        <td className=\"p-4 text-sm font-medium text-foreground text-right\">\n                          {formatCurrency(item.amount, invoice.currency)}\n                        </td>\n                      </tr>\n                    ))}\n                  </tbody>\n                </table>\n              </div>\n            )}\n\n            {/* Totals */}\n            <div className=\"border-t border-border p-4\">\n              <div className=\"max-w-xs ml-auto space-y-2\">\n                <div className=\"flex items-center justify-between text-sm\">\n                  <span className=\"text-muted-foreground\">\n                    {tr('billing.invoices.subtotal', 'Subtotal')}\n                  </span>\n                  <span className=\"text-foreground\">\n                    {formatCurrency(invoice.subtotal, invoice.currency)}\n                  </span>\n                </div>\n                <div className=\"flex items-center justify-between text-sm\">\n                  <span className=\"text-muted-foreground\">{tr('billing.invoices.tax', 'Tax')}</span>\n                  <span className=\"text-foreground\">\n                    {formatCurrency(invoice.tax, invoice.currency)}\n                  </span>\n                </div>\n                <div className=\"flex items-center justify-between text-sm font-semibold border-t border-border pt-2\">\n                  <span className=\"text-foreground\">{tr('billing.invoices.total', 'Total')}</span>\n                  <span className=\"text-foreground\">\n                    {formatCurrency(invoice.total, invoice.currency)}\n                  </span>\n                </div>\n                {invoice.amountPaid > 0 && (\n                  <div className=\"flex items-center justify-between text-sm\">\n                    <span className=\"text-muted-foreground\">\n                      {tr('billing.invoices.amountPaid', 'Amount Paid')}\n                    </span>\n                    <span className=\"text-status-success-text\">\n                      -{formatCurrency(invoice.amountPaid, invoice.currency)}\n                    </span>\n                  </div>\n                )}\n                {amountDue > 0 && (\n                  <div className=\"flex items-center justify-between text-sm font-semibold border-t border-border pt-2\">\n                    <span className=\"text-foreground\">\n                      {tr('billing.invoices.amountDue', 'Amount Due')}\n                    </span>\n                    <span className=\"text-status-warning-text\">\n                      {formatCurrency(amountDue, invoice.currency)}\n                    </span>\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n\n          {/* Subscription Info */}\n          {invoice.subscription && (\n            <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n              <div className=\"p-6 border-b border-border bg-muted/30\">\n                <h2 className=\"text-lg font-semibold text-foreground\">\n                  {tr('billing.invoices.subscription', 'Subscription')}\n                </h2>\n              </div>\n              <div className=\"p-6 space-y-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div>\n                    <p className=\"font-medium text-foreground\">\n                      {invoice.subscription.plan?.name || 'Unknown Plan'}\n                    </p>\n                    <p className=\"text-sm text-muted-foreground mt-0.5\">\n                      Subscription ID:{' '}\n                      <span className=\"font-mono text-xs\">{invoice.subscription.id}</span>\n                    </p>\n                  </div>\n                  <button\n                    type=\"button\"\n                    onClick={() =>\n                      navigateTo(\n                        withBillingAccountId(\n                          `/subscriptions/${invoice.subscription!.id}`,\n                          billingAccountId\n                        )\n                      )\n                    }\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                </div>\n              </div>\n            </div>\n          )}\n\n          {/* Payment Info */}\n          {invoice.payment && (\n            <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n              <div className=\"p-6 border-b border-border bg-muted/30\">\n                <h2 className=\"text-lg font-semibold text-foreground\">\n                  {tr('billing.invoices.payment', 'Payment')}\n                </h2>\n              </div>\n              <div className=\"p-6\">\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div>\n                    <p className=\"text-sm text-muted-foreground\">Payment ID</p>\n                    <p className=\"font-mono text-sm text-foreground mt-0.5 break-all\">\n                      {invoice.payment.id}\n                    </p>\n                  </div>\n                  <div>\n                    <p className=\"text-sm text-muted-foreground\">Amount</p>\n                    <p className=\"text-sm text-foreground mt-0.5\">\n                      {formatCurrency(invoice.payment.amount, invoice.payment.currency)}\n                    </p>\n                  </div>\n                  <div>\n                    <p className=\"text-sm text-muted-foreground\">Status</p>\n                    <p className=\"text-sm text-foreground mt-0.5 capitalize\">\n                      {invoice.payment.status.toLowerCase()}\n                    </p>\n                  </div>\n                  <div>\n                    <p className=\"text-sm text-muted-foreground\">Method</p>\n                    <p className=\"text-sm text-foreground mt-0.5 capitalize\">\n                      {invoice.payment.method.toLowerCase().replace(/_/g, ' ')}\n                    </p>\n                  </div>\n                  {invoice.payment.provider && (\n                    <div>\n                      <p className=\"text-sm text-muted-foreground\">Provider</p>\n                      <p className=\"text-sm text-foreground mt-0.5 capitalize\">\n                        {invoice.payment.provider}\n                      </p>\n                    </div>\n                  )}\n                  {invoice.payment.paidAt && (\n                    <div>\n                      <p className=\"text-sm text-muted-foreground\">Paid At</p>\n                      <p className=\"text-sm text-foreground mt-0.5\">\n                        {formatDate(invoice.payment.paidAt, 'short')}\n                      </p>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Invoice Summary */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n            <div className=\"p-6 border-b border-border bg-muted/30\">\n              <h2 className=\"text-lg font-semibold text-foreground\">\n                {tr('billing.invoices.details', 'Details')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Invoice ID</p>\n                <p className=\"font-mono text-sm text-foreground mt-0.5 break-all\">{invoice.id}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Invoice Number</p>\n                <p className=\"text-sm text-foreground mt-0.5\">\n                  {formatInvoiceNumber(invoice.invoiceNumber)}\n                </p>\n              </div>\n              {invoice.itemDescription && (\n                <div>\n                  <p className=\"text-sm text-muted-foreground\">Description</p>\n                  <p className=\"text-sm text-foreground mt-0.5\">{invoice.itemDescription}</p>\n                </div>\n              )}\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Status</p>\n                <span\n                  className={`inline-flex mt-0.5 px-2 py-1 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n                >\n                  {formatInvoiceStatus(invoice.status)}\n                </span>\n              </div>\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Currency</p>\n                <p className=\"text-sm text-foreground mt-0.5\">{invoice.currency}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Total</p>\n                <p className=\"text-sm font-semibold text-foreground mt-0.5\">\n                  {formatCurrency(invoice.total, invoice.currency)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Amount Paid</p>\n                <p className=\"text-sm text-status-success-text mt-0.5\">\n                  {formatCurrency(invoice.amountPaid, invoice.currency)}\n                </p>\n              </div>\n              {amountDue > 0 && (\n                <div>\n                  <p className=\"text-sm text-muted-foreground\">Amount Due</p>\n                  <p className=\"text-sm font-semibold text-status-warning-text mt-0.5\">\n                    {formatCurrency(amountDue, invoice.currency)}\n                  </p>\n                </div>\n              )}\n            </div>\n          </div>\n\n          {/* Dates */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n            <div className=\"p-6 border-b border-border bg-muted/30\">\n              <h2 className=\"text-lg font-semibold text-foreground\">\n                {tr('billing.invoices.dates', 'Dates')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Created</p>\n                <p className=\"text-sm text-foreground mt-0.5\">{formatDate(invoice.createdAt)}</p>\n              </div>\n              {invoice.dueDate && (\n                <div>\n                  <p className=\"text-sm text-muted-foreground\">Due Date</p>\n                  <p className=\"text-sm text-foreground mt-0.5\">{formatDate(invoice.dueDate)}</p>\n                </div>\n              )}\n              {invoice.paidAt && (\n                <div>\n                  <p className=\"text-sm text-muted-foreground\">Paid At</p>\n                  <p className=\"text-sm text-foreground mt-0.5\">{formatDate(invoice.paidAt)}</p>\n                </div>\n              )}\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Last Updated</p>\n                <p className=\"text-sm text-foreground mt-0.5\">{formatDate(invoice.updatedAt)}</p>\n              </div>\n            </div>\n          </div>\n\n          {/* Organization */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n            <div className=\"p-6 border-b border-border bg-muted/30\">\n              <h2 className=\"text-lg font-semibold text-foreground\">\n                {tr('billing.invoices.organization', 'Organization')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-muted-foreground\">Organization ID</p>\n                <p className=\"font-mono text-sm text-foreground mt-0.5 break-all\">\n                  {invoice.orgId}\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -45,7 +45,7 @@ var b = () => {
 				className: "border border-border rounded-lg p-4",
 				children: /* @__PURE__ */ v("div", {
 					className: "flex items-center gap-4",
-					children: [/* @__PURE__ */ _("div", { className: "h-10 w-10 bg-muted animate-pulse rounded" }), /* @__PURE__ */ v("div", {
+					children: [/* @__PURE__ */ _("div", { className: "size-10 bg-muted animate-pulse rounded" }), /* @__PURE__ */ v("div", {
 						className: "flex-1 space-y-2",
 						children: [/* @__PURE__ */ _("div", { className: "h-4 w-32 bg-muted animate-pulse rounded" }), /* @__PURE__ */ _("div", { className: "h-3 w-48 bg-muted animate-pulse rounded" })]
 					})]
@@ -58,9 +58,9 @@ var b = () => {
 			className: "text-center space-y-4",
 			children: [
 				/* @__PURE__ */ _("div", {
-					className: "w-12 h-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
+					className: "size-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
 					children: /* @__PURE__ */ _("svg", {
-						className: "w-6 h-6 text-destructive",
+						className: "size-6 text-destructive",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -81,6 +81,7 @@ var b = () => {
 					children: B.message
 				}),
 				/* @__PURE__ */ _("button", {
+					type: "button",
 					onClick: () => V(),
 					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
 					children: "Try Again"
@@ -128,6 +129,7 @@ var b = () => {
 						"DRAFT",
 						"VOID"
 					].map((e) => /* @__PURE__ */ _("button", {
+						type: "button",
 						onClick: () => {
 							k(e), F(1);
 						},
@@ -137,7 +139,7 @@ var b = () => {
 				}), /* @__PURE__ */ v("div", {
 					className: "relative flex-1 min-w-0 w-full sm:max-w-md",
 					children: [/* @__PURE__ */ _("svg", {
-						className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground",
+						className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -160,9 +162,9 @@ var b = () => {
 				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
 				children: [
 					/* @__PURE__ */ _("div", {
-						className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4",
+						className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
 						children: /* @__PURE__ */ _("svg", {
-							className: "w-6 h-6 text-muted-foreground",
+							className: "size-6 text-muted-foreground",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -244,11 +246,13 @@ var b = () => {
 				}), /* @__PURE__ */ v("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ _("button", {
+						type: "button",
 						onClick: () => F((e) => Math.max(1, e - 1)),
 						disabled: P <= 1,
 						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",
 						children: "Previous"
 					}), /* @__PURE__ */ _("button", {
+						type: "button",
 						onClick: () => F((e) => Math.min(R, e + 1)),
 						disabled: P >= R,
 						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",
@@ -263,9 +267,9 @@ var b = () => {
 			className: "text-center space-y-2",
 			children: [
 				/* @__PURE__ */ _("div", {
-					className: "w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center",
+					className: "size-12 mx-auto rounded-full bg-muted flex items-center justify-center",
 					children: /* @__PURE__ */ _("svg", {
-						className: "w-6 h-6 text-muted-foreground",
+						className: "size-6 text-muted-foreground",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -294,8 +298,9 @@ var b = () => {
 		className: "hover:bg-muted/30 transition-colors",
 		children: [
 			/* @__PURE__ */ v("td", {
-				className: "px-4 py-4",
+				className: "p-4",
 				children: [/* @__PURE__ */ _("button", {
+					type: "button",
 					onClick: s,
 					className: "font-medium text-foreground hover:text-primary transition-colors",
 					children: n(o.invoiceNumber)
@@ -305,36 +310,36 @@ var b = () => {
 				})]
 			}),
 			/* @__PURE__ */ _("td", {
-				className: "px-4 py-4",
+				className: "p-4",
 				children: /* @__PURE__ */ _("span", {
 					className: `inline-flex px-2 py-1 text-xs font-medium rounded ${a(f)}`,
 					children: r(o.status)
 				})
 			}),
 			u && /* @__PURE__ */ _("td", {
-				className: "px-4 py-4 hidden lg:table-cell",
+				className: "p-4 hidden lg:table-cell",
 				children: d ? /* @__PURE__ */ _("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",
 					children: d
 				}) : /* @__PURE__ */ _("span", {
 					className: "text-sm text-muted-foreground",
-					children: "—"
+					children: ", "
 				})
 			}),
 			/* @__PURE__ */ _("td", {
-				className: "px-4 py-4 text-sm text-muted-foreground hidden sm:table-cell",
+				className: "p-4 text-sm text-muted-foreground hidden sm:table-cell",
 				children: t(o.createdAt, "short")
 			}),
 			/* @__PURE__ */ _("td", {
-				className: "px-4 py-4 text-sm text-muted-foreground hidden md:table-cell",
+				className: "p-4 text-sm text-muted-foreground hidden md:table-cell",
 				children: o.dueDate ? t(o.dueDate, "short") : "—"
 			}),
 			/* @__PURE__ */ _("td", {
-				className: "px-4 py-4 text-right font-medium text-foreground",
+				className: "p-4 text-right font-medium text-foreground",
 				children: e(o.total, o.currency)
 			}),
 			/* @__PURE__ */ _("td", {
-				className: "px-4 py-4 text-right",
+				className: "p-4 text-right",
 				children: /* @__PURE__ */ v("div", {
 					className: "flex items-center justify-end gap-2",
 					children: [
@@ -345,6 +350,7 @@ var b = () => {
 							className: "px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted rounded-md transition-colors",
 							children: "View"
 						}) : /* @__PURE__ */ _("button", {
+							type: "button",
 							onClick: s,
 							className: "px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted rounded-md transition-colors",
 							children: "View"
@@ -357,10 +363,12 @@ var b = () => {
 							children: "PDF"
 						}),
 						p && c && /* @__PURE__ */ _("button", {
+							type: "button",
 							className: "px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
 							children: "Pay"
 						}),
 						(p || m) && l && /* @__PURE__ */ _("button", {
+							type: "button",
 							className: "px-3 py-1.5 text-sm font-medium text-destructive hover:bg-destructive/10 rounded-md transition-colors",
 							children: "Void"
 						})

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 { 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=\"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\">\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=\"h-10 w-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=\"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\">\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            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        {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\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              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 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.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=\"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=\"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                  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                  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=\"px-4 py-4\">\n        <button\n          onClick={onView}\n          className=\"font-medium text-foreground hover:text-primary transition-colors\"\n        >\n          {formatInvoiceNumber(invoice.invoiceNumber)}\n        </button>\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=\"px-4 py-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=\"px-4 py-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=\"px-4 py-4 text-sm text-muted-foreground hidden sm:table-cell\">\n        {formatDate(invoice.createdAt, 'short')}\n      </td>\n      <td className=\"px-4 py-4 text-sm text-muted-foreground hidden md:table-cell\">\n        {invoice.dueDate ? formatDate(invoice.dueDate, 'short') : '—'}\n      </td>\n      <td className=\"px-4 py-4 text-right font-medium text-foreground\">\n        {formatCurrency(invoice.total, invoice.currency)}\n      </td>\n      <td className=\"px-4 py-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              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 className=\"px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\">\n              Pay\n            </button>\n          )}\n          {(isOpen || isDraft) && canVoid && (\n            <button className=\"px-3 py-1.5 text-sm font-medium text-destructive hover:bg-destructive/10 rounded-md transition-colors\">\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 { 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        {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\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        <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        {(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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"}

package/dist/billing/modules/billing/pages/PaymentMethodsPage.js

@@ -46,6 +46,7 @@ var d = {
 				title: f("billing.paymentMethods.title", "Payment Methods"),
 				description: f("billing.paymentMethods.subtitle", "Manage your saved payment methods"),
 				actions: p.canManagePaymentMethods && /* @__PURE__ */ c("button", {
+					type: "button",
 					onClick: () => b(!0),
 					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
 					children: "Add Payment Method"
@@ -53,7 +54,7 @@ var d = {
 			}),
 			_.length === 0 ? /* @__PURE__ */ c(n, {
 				icon: /* @__PURE__ */ c("svg", {
-					className: "w-6 h-6 text-muted-foreground",
+					className: "size-6 text-muted-foreground",
 					fill: "none",
 					viewBox: "0 0 24 24",
 					stroke: "currentColor",
@@ -67,6 +68,7 @@ var d = {
 				title: f("billing.paymentMethods.noPaymentMethods", "No payment methods"),
 				description: f("billing.paymentMethods.noPaymentMethodsDesc", "Add a payment method to make purchases and manage subscriptions."),
 				action: p.canManagePaymentMethods && /* @__PURE__ */ c("button", {
+					type: "button",
 					onClick: () => b(!0),
 					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90",
 					children: "Add Payment Method"
@@ -132,9 +134,11 @@ var d = {
 		}), t && /* @__PURE__ */ l("div", {
 			className: "flex items-center gap-2 mt-4 pt-4 border-t border-border",
 			children: [!e.isDefault && /* @__PURE__ */ c("button", {
+				type: "button",
 				className: "text-sm text-primary hover:underline",
 				children: "Set as default"
 			}), /* @__PURE__ */ c("button", {
+				type: "button",
 				className: "text-sm text-status-error-text hover:underline ml-auto",
 				children: "Remove"
 			})]

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodsPage.js","names":[],"sources":["../../../../../src/billing/modules/billing/pages/PaymentMethodsPage.tsx"],"sourcesContent":["/**\n * Billing Module - Payment Methods Page\n * Displays and manages payment methods\n */\n\nimport { useState, type FC } from 'react';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useDefaultDashboardAccount } from '../../dashboard/hooks';\nimport { AccessDenied, PageHeader, EmptyState } from '../../../shared/components';\nimport { AddPaymentMethodModal } from '../../dashboard/components/AddPaymentMethodModal';\nimport type { PaymentMethod, PaymentMethodType } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nconst CARD_ICONS: Record<string, string> = {\n  visa: '💳',\n  mastercard: '💳',\n  amex: '💳',\n  default: '💳',\n};\n\nconst METHOD_TYPE_LABELS: Record<PaymentMethodType, string> = {\n  CREDIT_CARD: 'Credit Card',\n  DEBIT_CARD: 'Debit Card',\n  WALLET: 'Digital Wallet',\n  NETBANKING: 'Net Banking',\n  BANK_TRANSFER: 'Bank Transfer',\n  PAYPAL: 'PayPal',\n  CRYPTO: 'Cryptocurrency',\n};\n\nexport const PaymentMethodsPage: 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 permissions = useBillingPermissions();\n  const { emit } = useBillingEventEmitter();\n  const { billingAccount, paymentMethods, isLoading } = useDefaultDashboardAccount();\n  const [showAddModal, setShowAddModal] = useState(false);\n\n  if (!permissions.canViewPaymentMethods) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.paymentMethods.noViewPermission',\n          \"You don't have permission to view payment methods.\"\n        )}\n      />\n    );\n  }\n\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-muted animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"h-32 bg-muted animate-pulse rounded-lg\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={tr('billing.paymentMethods.title', 'Payment Methods')}\n        description={tr('billing.paymentMethods.subtitle', 'Manage your saved payment methods')}\n        actions={\n          permissions.canManagePaymentMethods && (\n            <button\n              onClick={() => setShowAddModal(true)}\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              Add Payment Method\n            </button>\n          )\n        }\n      />\n\n      {/* Payment Methods List */}\n      {paymentMethods.length === 0 ? (\n        <EmptyState\n          icon={\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=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n              />\n            </svg>\n          }\n          title={tr('billing.paymentMethods.noPaymentMethods', 'No payment methods')}\n          description={tr(\n            'billing.paymentMethods.noPaymentMethodsDesc',\n            'Add a payment method to make purchases and manage subscriptions.'\n          )}\n          action={\n            permissions.canManagePaymentMethods && (\n              <button\n                onClick={() => setShowAddModal(true)}\n                className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90\"\n              >\n                Add Payment Method\n              </button>\n            )\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n          {paymentMethods.map((method) => (\n            <PaymentMethodCard\n              key={method.id}\n              method={method}\n              canManage={permissions.canManagePaymentMethods}\n            />\n          ))}\n        </div>\n      )}\n\n      {/* Add Payment Method Modal (Stripe + Razorpay) */}\n      <AddPaymentMethodModal\n        isOpen={showAddModal}\n        onClose={() => setShowAddModal(false)}\n        billingAccountId={billingAccount?.id ?? ''}\n        currency={billingAccount?.currency ?? 'USD'}\n        country={billingAccount?.billingAddresses?.[0]?.country ?? undefined}\n        onSuccess={() => {\n          emit('billing.payment_method.added', {\n            route: '/billing/payment-methods',\n            entityId: billingAccount?.id,\n            source: 'payment-methods',\n          });\n          // Refetch billing account to get updated payment methods\n          setShowAddModal(false);\n        }}\n      />\n    </div>\n  );\n};\n\n// ============================================================================\n// Payment Method Card Component\n// ============================================================================\n\ninterface PaymentMethodCardProps {\n  method: PaymentMethod;\n  canManage: boolean;\n}\n\nconst PaymentMethodCard: FC<PaymentMethodCardProps> = ({ method, canManage }) => {\n  const isExpired =\n    method.expiryYear && method.expiryMonth\n      ? new Date(method.expiryYear, method.expiryMonth - 1) < new Date()\n      : false;\n\n  return (\n    <div\n      className={`border rounded-lg bg-card p-4 ${\n        method.isDefault ? 'border-primary' : 'border-border'\n      }`}\n    >\n      <div className=\"flex items-start justify-between\">\n        <div className=\"flex items-center gap-3\">\n          <span className=\"text-2xl\">{CARD_ICONS[method.brand?.toLowerCase() ?? 'default']}</span>\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <p className=\"font-medium text-foreground\">\n                {method.brand ?? METHOD_TYPE_LABELS[method.type]} •••• {method.last4}\n              </p>\n              {method.isDefault && (\n                <span className=\"px-1.5 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded\">\n                  Default\n                </span>\n              )}\n            </div>\n            {method.expiryMonth && method.expiryYear && (\n              <p\n                className={`text-sm ${isExpired ? 'text-status-error-text' : 'text-muted-foreground'}`}\n              >\n                {isExpired ? 'Expired' : 'Expires'} {method.expiryMonth}/{method.expiryYear}\n              </p>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {canManage && (\n        <div className=\"flex items-center gap-2 mt-4 pt-4 border-t border-border\">\n          {!method.isDefault && (\n            <button className=\"text-sm text-primary hover:underline\">Set as default</button>\n          )}\n          <button className=\"text-sm text-status-error-text hover:underline ml-auto\">Remove</button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAcA,IAAM,IAAqC;CACzC,MAAM;CACN,YAAY;CACZ,MAAM;CACN,SAAS;CACV,EAEK,IAAwD;CAC5D,aAAa;CACb,YAAY;CACZ,QAAQ;CACR,YAAY;CACZ,eAAe;CACf,QAAQ;CACR,QAAQ;CACT,EAEY,UAA+B;CAC1C,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,IAAc,GAAuB,EACrC,EAAE,YAAS,GAAwB,EACnC,EAAE,mBAAgB,mBAAgB,iBAAc,GAA4B,EAC5E,CAAC,GAAc,KAAmB,EAAS,GAAM;AA0BvD,QAxBK,EAAY,wBAWb,IAEA,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA,EAC3D,kBAAC,OAAD;GAAK,WAAU;aACZ;IAAC;IAAG;IAAG;IAAE,CAAC,KAAK,MACd,kBAAC,OAAD,EAAa,WAAU,0CAA2C,EAAxD,EAAwD,CAClE;GACE,CAAA,CACF;MAKR,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IACE,OAAO,EAAG,gCAAgC,kBAAkB;IAC5D,aAAa,EAAG,mCAAmC,oCAAoC;IACvF,SACE,EAAY,2BACV,kBAAC,UAAD;KACE,eAAe,EAAgB,GAAK;KACpC,WAAU;eACX;KAEQ,CAAA;IAGb,CAAA;GAGD,EAAe,WAAW,IACzB,kBAAC,GAAD;IACE,MACE,kBAAC,OAAD;KACE,WAAU;KACV,MAAK;KACL,SAAQ;KACR,QAAO;eAEP,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IAER,OAAO,EAAG,2CAA2C,qBAAqB;IAC1E,aAAa,EACX,+CACA,mEACD;IACD,QACE,EAAY,2BACV,kBAAC,UAAD;KACE,eAAe,EAAgB,GAAK;KACpC,WAAU;eACX;KAEQ,CAAA;IAGb,CAAA,GAEF,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAe,KAAK,MACnB,kBAAC,GAAD;KAEU;KACR,WAAW,EAAY;KACvB,EAHK,EAAO,GAGZ,CACF;IACE,CAAA;GAIR,kBAAC,GAAD;IACE,QAAQ;IACR,eAAe,EAAgB,GAAM;IACrC,kBAAkB,GAAgB,MAAM;IACxC,UAAU,GAAgB,YAAY;IACtC,SAAS,GAAgB,mBAAmB,IAAI,WAAW,KAAA;IAC3D,iBAAiB;AAOf,KANA,EAAK,gCAAgC;MACnC,OAAO;MACP,UAAU,GAAgB;MAC1B,QAAQ;MACT,CAAC,EAEF,EAAgB,GAAM;;IAExB,CAAA;GACE;MAtGJ,kBAAC,GAAD,EACE,SAAS,EACP,2CACA,qDACD,EACD,CAAA;GA8GF,KAAiD,EAAE,WAAQ,mBAAgB;CAC/E,IAAM,IACJ,EAAO,cAAc,EAAO,cACxB,IAAI,KAAK,EAAO,YAAY,EAAO,cAAc,EAAE,mBAAG,IAAI,MAAM,GAChE;AAEN,QACE,kBAAC,OAAD;EACE,WAAW,iCACT,EAAO,YAAY,mBAAmB;YAF1C,CAKE,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAY,EAAW,EAAO,OAAO,aAAa,IAAI;KAAkB,CAAA,EACxF,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAAb;OACG,EAAO,SAAS,EAAmB,EAAO;OAAM;OAAO,EAAO;OAC7D;SACH,EAAO,aACN,kBAAC,QAAD;MAAM,WAAU;gBAAuE;MAEhF,CAAA,CAEL;QACL,EAAO,eAAe,EAAO,cAC5B,kBAAC,KAAD;KACE,WAAW,WAAW,IAAY,2BAA2B;eAD/D;MAGG,IAAY,YAAY;MAAU;MAAE,EAAO;MAAY;MAAE,EAAO;MAC/D;OAEF,EAAA,CAAA,CACF;;GACF,CAAA,EAEL,KACC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,CAAC,EAAO,aACP,kBAAC,UAAD;IAAQ,WAAU;cAAuC;IAAuB,CAAA,EAElF,kBAAC,UAAD;IAAQ,WAAU;cAAyD;IAAe,CAAA,CACtF;KAEJ"}
+{"version":3,"file":"PaymentMethodsPage.js","names":[],"sources":["../../../../../src/billing/modules/billing/pages/PaymentMethodsPage.tsx"],"sourcesContent":["/**\n * Billing Module - Payment Methods Page\n * Displays and manages payment methods\n */\n\nimport { useState, type FC } from 'react';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useDefaultDashboardAccount } from '../../dashboard/hooks';\nimport { AccessDenied, PageHeader, EmptyState } from '../../../shared/components';\nimport { AddPaymentMethodModal } from '../../dashboard/components/AddPaymentMethodModal';\nimport type { PaymentMethod, PaymentMethodType } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nconst CARD_ICONS: Record<string, string> = {\n  visa: '💳',\n  mastercard: '💳',\n  amex: '💳',\n  default: '💳',\n};\n\nconst METHOD_TYPE_LABELS: Record<PaymentMethodType, string> = {\n  CREDIT_CARD: 'Credit Card',\n  DEBIT_CARD: 'Debit Card',\n  WALLET: 'Digital Wallet',\n  NETBANKING: 'Net Banking',\n  BANK_TRANSFER: 'Bank Transfer',\n  PAYPAL: 'PayPal',\n  CRYPTO: 'Cryptocurrency',\n};\n\nexport const PaymentMethodsPage: 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 permissions = useBillingPermissions();\n  const { emit } = useBillingEventEmitter();\n  const { billingAccount, paymentMethods, isLoading } = useDefaultDashboardAccount();\n  const [showAddModal, setShowAddModal] = useState(false);\n\n  if (!permissions.canViewPaymentMethods) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.paymentMethods.noViewPermission',\n          \"You don't have permission to view payment methods.\"\n        )}\n      />\n    );\n  }\n\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-48 bg-muted animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"h-32 bg-muted animate-pulse rounded-lg\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title={tr('billing.paymentMethods.title', 'Payment Methods')}\n        description={tr('billing.paymentMethods.subtitle', 'Manage your saved payment methods')}\n        actions={\n          permissions.canManagePaymentMethods && (\n            <button\n              type=\"button\"\n              onClick={() => setShowAddModal(true)}\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              Add Payment Method\n            </button>\n          )\n        }\n      />\n\n      {/* Payment Methods List */}\n      {paymentMethods.length === 0 ? (\n        <EmptyState\n          icon={\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=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n              />\n            </svg>\n          }\n          title={tr('billing.paymentMethods.noPaymentMethods', 'No payment methods')}\n          description={tr(\n            'billing.paymentMethods.noPaymentMethodsDesc',\n            'Add a payment method to make purchases and manage subscriptions.'\n          )}\n          action={\n            permissions.canManagePaymentMethods && (\n              <button\n                type=\"button\"\n                onClick={() => setShowAddModal(true)}\n                className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90\"\n              >\n                Add Payment Method\n              </button>\n            )\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n          {paymentMethods.map((method) => (\n            <PaymentMethodCard\n              key={method.id}\n              method={method}\n              canManage={permissions.canManagePaymentMethods}\n            />\n          ))}\n        </div>\n      )}\n\n      {/* Add Payment Method Modal (Stripe + Razorpay) */}\n      <AddPaymentMethodModal\n        isOpen={showAddModal}\n        onClose={() => setShowAddModal(false)}\n        billingAccountId={billingAccount?.id ?? ''}\n        currency={billingAccount?.currency ?? 'USD'}\n        country={billingAccount?.billingAddresses?.[0]?.country ?? undefined}\n        onSuccess={() => {\n          emit('billing.payment_method.added', {\n            route: '/billing/payment-methods',\n            entityId: billingAccount?.id,\n            source: 'payment-methods',\n          });\n          // Refetch billing account to get updated payment methods\n          setShowAddModal(false);\n        }}\n      />\n    </div>\n  );\n};\n\n// ============================================================================\n// Payment Method Card Component\n// ============================================================================\n\ninterface PaymentMethodCardProps {\n  method: PaymentMethod;\n  canManage: boolean;\n}\n\nconst PaymentMethodCard: FC<PaymentMethodCardProps> = ({ method, canManage }) => {\n  const isExpired =\n    method.expiryYear && method.expiryMonth\n      ? new Date(method.expiryYear, method.expiryMonth - 1) < new Date()\n      : false;\n\n  return (\n    <div\n      className={`border rounded-lg bg-card p-4 ${\n        method.isDefault ? 'border-primary' : 'border-border'\n      }`}\n    >\n      <div className=\"flex items-start justify-between\">\n        <div className=\"flex items-center gap-3\">\n          <span className=\"text-2xl\">{CARD_ICONS[method.brand?.toLowerCase() ?? 'default']}</span>\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <p className=\"font-medium text-foreground\">\n                {method.brand ?? METHOD_TYPE_LABELS[method.type]} •••• {method.last4}\n              </p>\n              {method.isDefault && (\n                <span className=\"px-1.5 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded\">\n                  Default\n                </span>\n              )}\n            </div>\n            {method.expiryMonth && method.expiryYear && (\n              <p\n                className={`text-sm ${isExpired ? 'text-status-error-text' : 'text-muted-foreground'}`}\n              >\n                {isExpired ? 'Expired' : 'Expires'} {method.expiryMonth}/{method.expiryYear}\n              </p>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {canManage && (\n        <div className=\"flex items-center gap-2 mt-4 pt-4 border-t border-border\">\n          {!method.isDefault && (\n            <button type=\"button\" className=\"text-sm text-primary hover:underline\">\n              Set as default\n            </button>\n          )}\n          <button type=\"button\" className=\"text-sm text-status-error-text hover:underline ml-auto\">\n            Remove\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}