npm - @burdenoff/microfe-billing - Versions diffs - 2026.731.1 → 2026.801.1 - Mend

@burdenoff/microfe-billing 2026.731.1 → 2026.801.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

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

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

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

@@ -8,7 +8,7 @@ import { useDefaultDashboardAccount as a } from "../../dashboard/hooks/useDashbo
 import "../../dashboard/hooks/index.js";
 import { AddPaymentMethodModal as o } from "../../dashboard/components/AddPaymentMethodModal.js";
 import { useCallback as s, useEffect as c, useState as l } from "react";
-import { useLocation as u } from "react-router-dom";
+import { useLocation as u } from "react-router";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { IllustratedEmptyState as m, PagePurpose as h } from "@burdenoff/fe-libs/ui";

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

	@@ -1 +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 { useCallback, useEffect, useState, type FC } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useDefaultDashboardAccount } from '../../dashboard/hooks';\nimport { AccessDenied, PageHeader } 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';\nimport { PagePurpose, IllustratedEmptyState } from '@burdenoff/fe-libs/ui';\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 { navigate, basePath } = useBilling();\n const { pathname } = useLocation();\n const { billingAccount, paymentMethods, isLoading } = useDefaultDashboardAccount();\n const [showAddModal, setShowAddModal] = useState(false);\n\n // basePath-aware path join, mirroring OverviewPage's navigateTo helper.\n const toFullPath = useCallback(\n (path: string) => {\n if (basePath && basePath !== '/') {\n const base = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;\n return `${base}/${path}`;\n }\n return `/${path}`;\n },\n [basePath]\n );\n\n // Navigate (basePath-aware) to the dedicated add-payment-method route.\n const navigateToAdd = useCallback(() => {\n navigate(toFullPath('payment-methods/add'));\n }, [navigate, toFullPath]);\n\n // The /payment-methods/add route renders this same page; open the add modal\n // automatically when landing there so the route is actually functional.\n useEffect(() => {\n if (pathname.replace(/\\/+$/, '').endsWith('/payment-methods/add')) {\n setShowAddModal(true);\n }\n }, [pathname]);\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-bg-sunken 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-bg-sunken 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={navigateToAdd}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors\"\n >\n {tr('billing.paymentMethods.add', 'Add payment method')}\n </button>\n )\n }\n />\n\n <PagePurpose>\n {tr(\n 'billing.paymentMethods.purpose',\n 'Save and manage the cards and payment options used to pay invoices, subscriptions and one-off purchases. Add a method, mark one as default for automatic billing, or remove ones you no longer use.'\n )}\n </PagePurpose>\n\n {/ Payment Methods List /}\n {paymentMethods.length === 0 ? (\n <IllustratedEmptyState\n illustration=\"empty-generic\"\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-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90\"\n >\n Add Payment Method\n </button>\n ) : undefined\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={() => {\n setShowAddModal(false);\n // If we arrived via the /add route, return to the list URL.\n if (pathname.replace(/\\/+$/, '').endsWith('/payment-methods/add')) {\n navigate(toFullPath('payment-methods'));\n }\n }}\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 if (pathname.replace(/\\/+$/, '').endsWith('/payment-methods/add')) {\n navigate(toFullPath('payment-methods'));\n }\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-bg-surface p-4 ${\n method.isDefault ? 'border-primary' : 'border-border-subtle'\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-text-primary\">\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-action-primary-bg/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-text-secondary'}`}\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-subtle\">\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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"}
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 { useCallback, useEffect, useState, type FC } from 'react';\nimport { useLocation } from 'react-router';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useDefaultDashboardAccount } from '../../dashboard/hooks';\nimport { AccessDenied, PageHeader } 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';\nimport { PagePurpose, IllustratedEmptyState } from '@burdenoff/fe-libs/ui';\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 { navigate, basePath } = useBilling();\n const { pathname } = useLocation();\n const { billingAccount, paymentMethods, isLoading } = useDefaultDashboardAccount();\n const [showAddModal, setShowAddModal] = useState(false);\n\n // basePath-aware path join, mirroring OverviewPage's navigateTo helper.\n const toFullPath = useCallback(\n (path: string) => {\n if (basePath && basePath !== '/') {\n const base = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;\n return `${base}/${path}`;\n }\n return `/${path}`;\n },\n [basePath]\n );\n\n // Navigate (basePath-aware) to the dedicated add-payment-method route.\n const navigateToAdd = useCallback(() => {\n navigate(toFullPath('payment-methods/add'));\n }, [navigate, toFullPath]);\n\n // The /payment-methods/add route renders this same page; open the add modal\n // automatically when landing there so the route is actually functional.\n useEffect(() => {\n if (pathname.replace(/\\/+$/, '').endsWith('/payment-methods/add')) {\n setShowAddModal(true);\n }\n }, [pathname]);\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-bg-sunken 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-bg-sunken 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={navigateToAdd}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors\"\n >\n {tr('billing.paymentMethods.add', 'Add payment method')}\n </button>\n )\n }\n />\n\n <PagePurpose>\n {tr(\n 'billing.paymentMethods.purpose',\n 'Save and manage the cards and payment options used to pay invoices, subscriptions and one-off purchases. Add a method, mark one as default for automatic billing, or remove ones you no longer use.'\n )}\n </PagePurpose>\n\n {/ Payment Methods List /}\n {paymentMethods.length === 0 ? (\n <IllustratedEmptyState\n illustration=\"empty-generic\"\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-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90\"\n >\n Add Payment Method\n </button>\n ) : undefined\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={() => {\n setShowAddModal(false);\n // If we arrived via the /add route, return to the list URL.\n if (pathname.replace(/\\/+$/, '').endsWith('/payment-methods/add')) {\n navigate(toFullPath('payment-methods'));\n }\n }}\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 if (pathname.replace(/\\/+$/, '').endsWith('/payment-methods/add')) {\n navigate(toFullPath('payment-methods'));\n }\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-bg-surface p-4 ${\n method.isDefault ? 'border-primary' : 'border-border-subtle'\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-text-primary\">\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-action-primary-bg/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-text-secondary'}`}\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-subtle\">\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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"}

package/dist/billing/modules/billing/pages/TransactionsPage.js CHANGED Viewed

@@ -14,7 +14,7 @@ import { useTransactions as p } from "../hooks/useTransactions.js";
 import "../hooks/index.js";
 import { useEffect as m, useRef as h, useState as g } from "react";
 import { ArrowLeft as _, Calendar as v, CheckCircle as y, ChevronLeft as b, ChevronRight as x, CreditCard as S, Eye as C, FileText as w, Mail as T, MoreHorizontal as E, Wallet as D, XCircle as O } from "lucide-react";
-import { useParams as k } from "react-router-dom";
+import { useParams as k } from "react-router";
 import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
 import { useI18n as ee } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { Dialog as N, DialogContent as P, DialogFooter as F, DialogHeader as I, DialogTitle as L, EmphasisPanel as R, IllustratedEmptyState as z, PagePurpose as B, ResponsiveTable as V } from "@burdenoff/fe-libs/ui";

package/dist/billing/modules/billing/pages/TransactionsPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TransactionsPage.js","names":[],"sources":["../../../../../src/billing/modules/billing/pages/TransactionsPage.tsx"],"sourcesContent":["/*\n Billing Module - Transactions Page\n * Displays all billing transactions for a specific billing account\n /\n\nimport { useState, useRef, useEffect, type FC } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n ArrowLeft,\n MoreHorizontal,\n Eye,\n FileText,\n CreditCard,\n Mail,\n Wallet,\n ChevronLeft,\n ChevronRight,\n Calendar,\n CheckCircle,\n XCircle,\n} from 'lucide-react';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useTransactions } from '../hooks';\nimport { nativeImpact, nativeOpenUrl } from '../../../../utils/nativeBridge';\nimport { AccessDenied, PageHeader, EmptyState, ServerError } from '../../../shared/components';\nimport { formatCurrency, formatDateTime, isServerError } from '../../../shared/utils';\nimport { getTransactionStatusColor, getStatusBadgeClasses } from '../../../shared/utils/status';\nimport type { Transaction, TransactionType } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n ResponsiveTable,\n type ResponsiveTableColumn,\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogFooter,\n IllustratedEmptyState,\n PagePurpose,\n EmphasisPanel,\n} from '@burdenoff/fe-libs/ui';\n\ntype FilterType = 'all' \| TransactionType;\n\nconst TYPE_LABELS: Record<TransactionType, string> = {\n payment: 'Payment',\n refund: 'Refund',\n adjustment: 'Adjustment',\n};\n\n// Helper to get label for transaction type (case-insensitive)\nconst getTypeLabel = (type: string): string => {\n const normalized = type.toLowerCase() as TransactionType;\n return TYPE_LABELS[normalized] ?? type;\n};\n\n// Transaction Actions Dropdown Component\ninterface TransactionActionsDropdownProps {\n transaction: Transaction;\n onViewDetails: () => void;\n onViewInvoice: () => void;\n hasInvoiceUrl: boolean;\n}\n\nconst TransactionActionsDropdown: FC<TransactionActionsDropdownProps> = ({\n transaction,\n onViewDetails,\n onViewInvoice,\n hasInvoiceUrl,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const dropdownRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n return (\n <div className=\"relative overflow-visible\" ref={dropdownRef}>\n <button\n type=\"button\"\n onClick={() => setIsOpen(!isOpen)}\n className=\"p-1.5 rounded-md hover:bg-bg-sunken/50 transition-colors\"\n aria-label=\"Transaction actions\"\n >\n <MoreHorizontal className=\"size-4 text-text-secondary\" />\n </button>\n\n {isOpen && (\n <div className=\"absolute right-0 top-full mt-1 z-50 min-w-[160px] bg-popover border border-border-subtle rounded-md shadow-lg py-1\">\n <button\n type=\"button\"\n onClick={() => {\n onViewDetails();\n setIsOpen(false);\n }}\n className=\"w-full flex items-center gap-2 px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken/50 transition-colors whitespace-nowrap\"\n >\n <Eye className=\"size-4\" />\n View Details\n </button>\n {transaction.type === 'payment' && hasInvoiceUrl && (\n <button\n type=\"button\"\n onClick={() => {\n onViewInvoice();\n setIsOpen(false);\n }}\n className=\"w-full flex items-center gap-2 px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken/50 transition-colors whitespace-nowrap\"\n >\n <FileText className=\"size-4\" />\n View Invoice\n </button>\n )}\n </div>\n )}\n </div>\n );\n};\n\n// Transaction Details Modal Component\ninterface TransactionDetailsModalProps {\n transaction: Transaction \| null;\n onClose: () => void;\n onViewInvoice?: (transaction: Transaction) => void;\n invoiceUrl?: string \| null;\n invoiceProvider?: string \| null;\n}\n\nconst TransactionDetailsModal: FC<TransactionDetailsModalProps> = ({\n transaction,\n onClose,\n onViewInvoice,\n invoiceUrl,\n invoiceProvider,\n}) => {\n if (!transaction) return null;\n\n // Extract tax information from metadata\n const metadata = transaction.metadata as Record<string, unknown> \| null;\n const subtotal = metadata?.subtotal as number \| undefined;\n const taxAmount = metadata?.taxAmount as number \| undefined;\n const taxRate = metadata?.taxRate as number \| undefined;\n const taxType = metadata?.taxType as string \| undefined;\n const total = metadata?.total as number \| undefined;\n const invoiceNumber = metadata?.invoiceNumber as string \| undefined;\n const invoiceStatus = metadata?.invoiceStatus as string \| undefined;\n\n // Extract refund-specific information\n const isRefund = transaction.type === 'refund';\n const refundRecordId = metadata?.refundRecordId as string \| undefined;\n const originalTransactionId = metadata?.originalTransactionId as string \| undefined;\n const creditNoteId = metadata?.creditNoteId as string \| undefined;\n const creditNoteNumber = metadata?.creditNoteNumber as string \| undefined;\n const creditNotePdfUrl = metadata?.creditNotePdfUrl as string \| undefined;\n const refundReason = metadata?.reason as string \| undefined;\n const purchaseType = metadata?.purchaseType as string \| undefined;\n const purchaseDetail = metadata?.purchaseDetail as string \| undefined;\n\n // Determine if we should show tax breakdown\n const showTaxBreakdown = total && taxAmount !== undefined && taxAmount > 0;\n\n return (\n <Dialog open={!!transaction} onOpenChange={(open) => !open && onClose()}>\n <DialogContent className=\"max-w-md max-h-[90vh] overflow-auto p-0\">\n <DialogHeader className=\"p-4 border-b border-border-subtle\">\n <DialogTitle className=\"text-lg font-semibold\">Transaction Details</DialogTitle>\n </DialogHeader>\n\n <div className=\"p-4 space-y-4\">\n <div className=\"grid grid-cols-2 gap-4\">\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Transaction ID</p>\n <p className=\"text-sm font-mono break-all\">{transaction.id}</p>\n </div>\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Type</p>\n <p className=\"text-sm capitalize\">{getTypeLabel(transaction.type)}</p>\n </div>\n </div>\n\n {/ Amount Section with Tax Breakdown /}\n <div className=\"space-y-2\">\n {showTaxBreakdown ? (\n <>\n <div className=\"flex justify-between text-sm\">\n <span className=\"text-text-secondary\">Subtotal</span>\n <span>\n {formatCurrency(subtotal \|\| transaction.amount, transaction.currency)}\n </span>\n </div>\n {taxAmount > 0 && (\n <div className=\"flex justify-between text-sm\">\n <span className=\"text-text-secondary\">\n {taxType \|\| 'Tax'} {taxRate ? `(${(taxRate 100).toFixed(0)}%)` : ''}\n </span>\n <span>{formatCurrency(taxAmount, transaction.currency)}</span>\n </div>\n )}\n <div className=\"flex justify-between text-sm font-semibold border-t border-border-subtle pt-2\">\n <span>Total</span>\n <span className={transaction.type === 'refund' ? 'text-status-error-text' : ''}>\n {transaction.type === 'refund' ? '-' : ''}\n {formatCurrency(total, transaction.currency)}\n </span>\n </div>\n </>\n ) : (\n <div className=\"grid grid-cols-2 gap-4\">\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Amount</p>\n <p\n className={`text-sm font-medium ${transaction.type === 'refund' ? 'text-status-error-text' : ''}`}\n >\n {transaction.type === 'refund' ? '-' : ''}\n {formatCurrency(total \|\| transaction.amount, transaction.currency)}\n </p>\n </div>\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Status</p>\n <span\n className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(\n getTransactionStatusColor(transaction.status)\n )}`}\n >\n {transaction.status}\n </span>\n </div>\n </div>\n )}\n </div>\n\n {/* Status (if tax breakdown shown) /}\n {showTaxBreakdown && (\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Status</p>\n <span\n className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(\n getTransactionStatusColor(transaction.status)\n )}`}\n >\n {transaction.status}\n </span>\n </div>\n )}\n\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Date & Time</p>\n <p className=\"text-sm\">{formatDateTime(transaction.createdAt)}</p>\n </div>\n\n {transaction.description && (\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Description</p>\n <p className=\"text-sm\">{transaction.description}</p>\n </div>\n )}\n\n {/ Invoice Information /}\n {invoiceNumber && (\n <div className=\"p-3 bg-bg-sunken/50 rounded-lg space-y-2\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Invoice</p>\n <p className=\"text-sm font-mono\">{invoiceNumber}</p>\n </div>\n {invoiceStatus && (\n <span\n className={`px-2 py-0.5 text-xs font-medium rounded ${\n invoiceStatus === 'PAID'\n ? 'bg-status-success-bg-subtle text-status-success-text'\n : 'bg-status-warning-bg-subtle text-status-warning-text'\n }`}\n >\n {invoiceStatus}\n </span>\n )}\n </div>\n {invoiceProvider && (\n <p className=\"text-xs text-text-secondary\">Provider: {invoiceProvider}</p>\n )}\n {invoiceUrl && onViewInvoice && (\n <button\n type=\"button\"\n onClick={() => onViewInvoice(transaction)}\n className=\"flex items-center gap-2 text-sm text-primary hover:underline\"\n >\n <FileText className=\"size-4\" />\n View Invoice\n </button>\n )}\n </div>\n )}\n\n {/ Fallback invoice button if no invoice number but URL exists /}\n {!invoiceNumber && invoiceUrl && onViewInvoice && (\n <div className=\"p-3 bg-bg-sunken/50 rounded-lg\">\n <button\n type=\"button\"\n onClick={() => onViewInvoice(transaction)}\n className=\"flex items-center gap-2 text-sm text-primary hover:underline\"\n >\n <FileText className=\"size-4\" />\n View Invoice {invoiceProvider && `(${invoiceProvider})`}\n </button>\n </div>\n )}\n\n {/ Refund-Specific Information /}\n {isRefund && (creditNoteId \|\| refundReason \|\| purchaseType) && (\n <div className=\"p-3 bg-status-error-bg-subtle/20 border border-border-subtle rounded-lg space-y-3\">\n <div className=\"flex items-center gap-2\">\n <div className=\"size-1.5 rounded-full bg-status-error-bg\" />\n <p className=\"text-sm font-semibold text-status-error-text\">Refund Information</p>\n </div>\n\n {/ Credit Note Section /}\n {creditNoteNumber && (\n <div className=\"space-y-2\">\n <div>\n <p className=\"text-xs text-status-error-text mb-1\">Credit Note</p>\n <p className=\"text-sm font-mono text-status-error-text\">{creditNoteNumber}</p>\n </div>\n {creditNotePdfUrl && (\n <button\n type=\"button\"\n onClick={() => {\n void nativeImpact('light');\n void nativeOpenUrl(creditNotePdfUrl);\n }}\n className=\"flex items-center gap-2 text-sm text-status-error-text hover:underline\"\n >\n <FileText className=\"size-4\" />\n Download Credit Note PDF\n </button>\n )}\n </div>\n )}\n\n {/ Purchase Type & Detail /}\n {purchaseType && (\n <div>\n <p className=\"text-xs text-status-error-text mb-1\">Purchase Type</p>\n <p className=\"text-sm text-status-error-text\">\n {purchaseType}\n {purchaseDetail && ` - ${purchaseDetail}`}\n </p>\n </div>\n )}\n\n {/ Refund Reason /}\n {refundReason && (\n <div>\n <p className=\"text-xs text-status-error-text mb-1\">Reason</p>\n <p className=\"text-sm text-status-error-text\">{refundReason}</p>\n </div>\n )}\n\n {/ Original Transaction Reference /}\n {originalTransactionId && (\n <div>\n <p className=\"text-xs text-status-error-text mb-1\">Original Transaction</p>\n <p className=\"text-sm font-mono text-status-error-text break-all\">\n {originalTransactionId}\n </p>\n </div>\n )}\n\n {/ Refund Record ID /}\n {refundRecordId && (\n <div>\n <p className=\"text-xs text-status-error-text mb-1\">Refund Record ID</p>\n <p className=\"text-sm font-mono text-status-error-text break-all\">\n {refundRecordId}\n </p>\n </div>\n )}\n </div>\n )}\n\n {transaction.stripePaymentId && (\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Stripe Payment ID</p>\n <p className=\"text-sm font-mono break-all\">{transaction.stripePaymentId}</p>\n </div>\n )}\n\n {transaction.razorpayPaymentId && (\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Razorpay Payment ID</p>\n <p className=\"text-sm font-mono break-all\">{transaction.razorpayPaymentId}</p>\n </div>\n )}\n </div>\n\n <DialogFooter className=\"p-4 border-t border-border-subtle\">\n <button\n type=\"button\"\n onClick={onClose}\n className=\"w-full py-2 px-4 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors\"\n >\n Close\n </button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n );\n};\n\nexport const TransactionsPage: 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 { billingAccountId } = useParams<{ billingAccountId: string }>();\n const permissions = useBillingPermissions();\n const navigateTo = useBillingNavigate();\n const {\n billingAccount,\n transactions,\n pagination,\n isLoading,\n error,\n refetch,\n goToNextPage,\n goToPreviousPage,\n } = useTransactions(billingAccountId);\n const [filterType, setFilterType] = useState<FilterType>('all');\n const [selectedTransaction, setSelectedTransaction] = useState<Transaction \| null>(null);\n\n // Get invoice URL from transaction metadata (supports both Zoho and Stripe)\n const getInvoiceUrl = (transaction: Transaction): string \| null => {\n const metadata = transaction.metadata as Record<string, unknown> \| null;\n // Check for Zoho Books invoice first (INR payments)\n if (metadata?.zohoBooksInvoiceUrl) {\n return metadata.zohoBooksInvoiceUrl as string;\n }\n // Check for Stripe invoice (international payments)\n if (metadata?.invoiceUrl) {\n return metadata.invoiceUrl as string;\n }\n // Check for Stripe PDF (fallback)\n if (metadata?.invoicePdf) {\n return metadata.invoicePdf as string;\n }\n return null;\n };\n\n // Get total amount (with tax) from metadata if available\n const getTotalAmount = (transaction: Transaction): number => {\n const metadata = transaction.metadata as Record<string, unknown> \| null;\n // Check for total in metadata (includes tax)\n if (metadata?.total && typeof metadata.total === 'number') {\n return metadata.total;\n }\n // Fallback to transaction amount\n return transaction.amount;\n };\n\n // Get invoice provider name for display\n const getInvoiceProvider = (transaction: Transaction): string \| null => {\n const metadata = transaction.metadata as Record<string, unknown> \| null;\n if (metadata?.zohoBooksInvoiceUrl) return 'Zoho Books';\n if (metadata?.invoiceUrl \|\| metadata?.invoicePdf) return 'Stripe';\n return null;\n };\n\n const handleViewInvoice = (transaction: Transaction) => {\n const invoiceUrl = getInvoiceUrl(transaction);\n if (invoiceUrl) {\n void nativeImpact('light');\n void nativeOpenUrl(invoiceUrl);\n }\n };\n\n if (!permissions.canViewPayments) {\n return (\n <AccessDenied\n message={tr(\n 'billing.transactions.noPermission',\n \"You don't have permission to view transaction history.\"\n )}\n />\n );\n }\n\n // Show error if no billing account ID provided\n if (!billingAccountId) {\n return (\n <div className=\"p-6\">\n <EmptyState\n icon={\n <svg\n className=\"size-6 text-text-secondary\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 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 }\n title={tr('billing.transactions.noAccountSelected', 'No billing account selected')}\n description={tr(\n 'billing.transactions.noAccountSelectedDesc',\n 'Please select a billing account from the overview page to view transactions.'\n )}\n />\n </div>\n );\n }\n\n // Show server error if backend is down\n if (error && isServerError(error)) {\n return (\n <div className=\"p-6\">\n <ServerError\n title={tr('billing.transactions.serverUnavailable', 'Server Unavailable')}\n message={tr(\n 'billing.transactions.serverUnavailableMessage',\n 'Unable to load transactions. The server might be down or experiencing issues.'\n )}\n onRetry={() => refetch()}\n showRetry\n />\n </div>\n );\n }\n const filteredTransactions =\n filterType === 'all' ? transactions : transactions.filter((t) => t.type === filterType);\n\n if (isLoading) {\n return (\n <div className=\"space-y-6 p-6\">\n <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"space-y-2\">\n {[1, 2, 3, 4, 5].map((i) => (\n <div key={i} className=\"h-16 bg-bg-sunken animate-pulse rounded\" />\n ))}\n </div>\n </div>\n );\n }\n\n const transactionColumns: ResponsiveTableColumn<Transaction>[] = [\n {\n key: 'date',\n header: 'Date',\n priority: 'primary',\n cellClassName: 'whitespace-nowrap',\n cell: (transaction) => (\n <span className=\"text-sm text-text-primary\">{formatDateTime(transaction.createdAt)}</span>\n ),\n },\n {\n key: 'type',\n header: 'Type',\n cellClassName: 'whitespace-nowrap',\n cell: (transaction) => (\n <span className=\"text-sm text-text-primary capitalize\">\n {getTypeLabel(transaction.type)}\n </span>\n ),\n },\n {\n key: 'description',\n header: 'Description',\n cell: (transaction) => (\n <span className=\"text-sm text-text-secondary\">{transaction.description ?? '-'}</span>\n ),\n },\n {\n key: 'amount',\n header: 'Amount',\n headerClassName: 'text-right',\n cellClassName: 'text-right whitespace-nowrap',\n cell: (transaction) => (\n <span\n className={`text-sm font-medium tabular-nums ${\n transaction.type === 'refund' ? 'text-status-error-text' : 'text-text-primary'\n }`}\n >\n {transaction.type === 'refund' ? '-' : ''}\n {formatCurrency(getTotalAmount(transaction), transaction.currency)}\n </span>\n ),\n },\n {\n key: 'status',\n header: 'Status',\n headerClassName: 'text-center',\n cellClassName: 'text-center whitespace-nowrap',\n cell: (transaction) => (\n <span\n className={`px-1.5 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(\n getTransactionStatusColor(transaction.status)\n )}`}\n >\n {transaction.status}\n </span>\n ),\n },\n ];\n\n const renderTransactionActions = (transaction: Transaction) => (\n <TransactionActionsDropdown\n transaction={transaction}\n onViewDetails={() => setSelectedTransaction(transaction)}\n onViewInvoice={() => handleViewInvoice(transaction)}\n hasInvoiceUrl={!!getInvoiceUrl(transaction)}\n />\n );\n\n return (\n <div className=\"space-y-6 p-6\">\n {/ Back Button /}\n <button\n type=\"button\"\n onClick={() => navigateTo('/overview')}\n className=\"inline-flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n >\n <ArrowLeft className=\"size-4\" />\n Back to Overview\n </button>\n\n <PageHeader\n title={tr('billing.transactions.title', 'Transaction History')}\n description={\n billingAccount\n ? `Transactions for ${billingAccount.name}`\n : 'View all your billing transactions'\n }\n />\n\n <PagePurpose>\n {tr(\n 'billing.transactions.purpose',\n 'A complete, time-ordered ledger of money movements on this billing account — payments, refunds and adjustments. Use it to reconcile what you were charged, open the linked invoice or credit note, and see tax breakdowns for each transaction.'\n )}\n </PagePurpose>\n\n {/ Billing Account Info Card — primary emphasis zone /}\n {billingAccount && (\n <EmphasisPanel className=\"p-4\">\n <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4\">\n {/ Account Name & Status /}\n <div className=\"flex items-start gap-2\">\n <CreditCard className=\"size-4 text-text-secondary mt-0.5\" />\n <div>\n <p className=\"text-xs text-text-secondary mb-0.5\">Account</p>\n <p className=\"text-sm font-medium\">{billingAccount.name}</p>\n {billingAccount.isActive ? (\n <span className=\"inline-flex items-center gap-1 mt-1 px-1.5 py-0.5 text-xs font-medium rounded bg-status-success-bg-subtle text-status-success-text\">\n <CheckCircle className=\"size-3\" />\n Active\n </span>\n ) : (\n <span className=\"inline-flex items-center gap-1 mt-1 px-1.5 py-0.5 text-xs font-medium rounded bg-status-error-bg-subtle text-status-error-text\">\n <XCircle className=\"size-3\" />\n Inactive\n </span>\n )}\n </div>\n </div>\n\n {/ Email /}\n <div className=\"flex items-start gap-2\">\n <Mail className=\"size-4 text-text-secondary mt-0.5\" />\n <div>\n <p className=\"text-xs text-text-secondary mb-0.5\">Email</p>\n <p className=\"text-sm font-medium break-all\">\n {billingAccount.billingEmail \|\| billingAccount.email}\n </p>\n </div>\n </div>\n\n {/ Credit Balance /}\n <div className=\"flex items-start gap-2\">\n <Wallet className=\"size-4 text-text-secondary mt-0.5\" />\n <div>\n <p className=\"text-xs text-text-secondary mb-0.5\">Credits Balance</p>\n <p className=\"text-sm font-semibold text-text-primary\">\n {(billingAccount.creditAmount \|\| 0).toLocaleString()} Credits\n </p>\n </div>\n </div>\n\n {/ Tax ID /}\n <div className=\"flex items-start gap-2\">\n <FileText className=\"size-4 text-text-secondary mt-0.5\" />\n <div>\n <p className=\"text-xs text-text-secondary mb-0.5\">Tax ID</p>\n <p className=\"text-sm font-medium\">{billingAccount.taxId \|\| '-'}</p>\n </div>\n </div>\n\n {/ Account Created /}\n <div className=\"flex items-start gap-2\">\n <Calendar className=\"size-4 text-text-secondary mt-0.5\" />\n <div>\n <p className=\"text-xs text-text-secondary mb-0.5\">Member Since</p>\n <p className=\"text-sm font-medium\">\n {billingAccount.createdAt ? formatDateTime(billingAccount.createdAt) : '-'}\n </p>\n </div>\n </div>\n </div>\n </EmphasisPanel>\n )}\n\n {/ Filters /}\n <div className=\"flex items-center gap-4\">\n <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken/50\">\n {(['all', 'payment', 'refund', 'adjustment'] as FilterType[]).map((type) => (\n <button\n type=\"button\"\n key={type}\n onClick={() => setFilterType(type)}\n className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n filterType === type\n ? 'bg-bg-surface text-text-primary shadow-sm'\n : 'text-text-secondary hover:text-text-primary'\n }`}\n >\n {type === 'all' ? 'All' : TYPE_LABELS[type as TransactionType]}\n </button>\n ))}\n </div>\n </div>\n\n {/ Transactions List /}\n {filteredTransactions.length === 0 ? (\n <IllustratedEmptyState\n illustration={filterType !== 'all' ? 'empty-search' : 'empty-data'}\n title={tr('billing.transactions.noTransactionsFound', 'No transactions found')}\n description={\n filterType !== 'all'\n ? tr(\n 'billing.transactions.noTransactionsFiltered',\n 'No transactions match your filter.'\n )\n : tr(\n 'billing.transactions.noTransactionsYet',\n 'Your transaction history will appear here.'\n )\n }\n />\n ) : (\n <div className=\"border border-border-subtle rounded-lg overflow-visible\">\n <ResponsiveTable<Transaction>\n columns={transactionColumns}\n data={filteredTransactions}\n rowKey={(transaction) => transaction.id}\n rowActions={renderTransactionActions}\n />\n </div>\n )}\n\n {/ Pagination Controls /}\n {pagination.totalCount > 0 && (\n <div className=\"flex items-center justify-between border-t border-border-subtle pt-4\">\n <p className=\"text-sm text-text-secondary\">\n Showing {pagination.page pagination.pageSize + 1} to{' '}\n {Math.min((pagination.page + 1) * pagination.pageSize, pagination.totalCount)} of{' '}\n {pagination.totalCount} transactions\n </p>\n <div className=\"flex items-center gap-2\">\n <button\n type=\"button\"\n onClick={goToPreviousPage}\n disabled={!pagination.hasPrevious}\n className=\"inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n >\n <ChevronLeft className=\"size-4\" />\n Previous\n </button>\n <span className=\"text-sm text-text-secondary px-2\">\n Page {pagination.page + 1} of {Math.ceil(pagination.totalCount / pagination.pageSize)}\n </span>\n <button\n type=\"button\"\n onClick={goToNextPage}\n disabled={!pagination.hasMore}\n className=\"inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n >\n Next\n <ChevronRight className=\"size-4\" />\n </button>\n </div>\n </div>\n )}\n\n {/* Transaction Details Modal */}\n <TransactionDetailsModal\n transaction={selectedTransaction}\n onClose={() => setSelectedTransaction(null)}\n onViewInvoice={handleViewInvoice}\n invoiceUrl={selectedTransaction ? getInvoiceUrl(selectedTransaction) : null}\n invoiceProvider={selectedTransaction ? getInvoiceProvider(selectedTransaction) : null}\n />\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"TransactionsPage.js","names":[],"sources":["../../../../../src/billing/modules/billing/pages/TransactionsPage.tsx"],"sourcesContent":["/*\n Billing Module - Transactions Page\n * Displays all billing transactions for a specific billing account\n /\n\nimport { useState, useRef, useEffect, type FC } from 'react';\nimport { useParams } from 'react-router';\nimport {\n ArrowLeft,\n MoreHorizontal,\n Eye,\n FileText,\n CreditCard,\n Mail,\n Wallet,\n ChevronLeft,\n ChevronRight,\n Calendar,\n CheckCircle,\n XCircle,\n} from 'lucide-react';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useTransactions } from '../hooks';\nimport { nativeImpact, nativeOpenUrl } from '../../../../utils/nativeBridge';\nimport { AccessDenied, PageHeader, EmptyState, ServerError } from '../../../shared/components';\nimport { formatCurrency, formatDateTime, isServerError } from '../../../shared/utils';\nimport { getTransactionStatusColor, getStatusBadgeClasses } from '../../../shared/utils/status';\nimport type { Transaction, TransactionType } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n ResponsiveTable,\n type ResponsiveTableColumn,\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogFooter,\n IllustratedEmptyState,\n PagePurpose,\n EmphasisPanel,\n} from '@burdenoff/fe-libs/ui';\n\ntype FilterType = 'all' \| TransactionType;\n\nconst TYPE_LABELS: Record<TransactionType, string> = {\n payment: 'Payment',\n refund: 'Refund',\n adjustment: 'Adjustment',\n};\n\n// Helper to get label for transaction type (case-insensitive)\nconst getTypeLabel = (type: string): string => {\n const normalized = type.toLowerCase() as TransactionType;\n return TYPE_LABELS[normalized] ?? type;\n};\n\n// Transaction Actions Dropdown Component\ninterface TransactionActionsDropdownProps {\n transaction: Transaction;\n onViewDetails: () => void;\n onViewInvoice: () => void;\n hasInvoiceUrl: boolean;\n}\n\nconst TransactionActionsDropdown: FC<TransactionActionsDropdownProps> = ({\n transaction,\n onViewDetails,\n onViewInvoice,\n hasInvoiceUrl,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const dropdownRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n return (\n <div className=\"relative overflow-visible\" ref={dropdownRef}>\n <button\n type=\"button\"\n onClick={() => setIsOpen(!isOpen)}\n className=\"p-1.5 rounded-md hover:bg-bg-sunken/50 transition-colors\"\n aria-label=\"Transaction actions\"\n >\n <MoreHorizontal className=\"size-4 text-text-secondary\" />\n </button>\n\n {isOpen && (\n <div className=\"absolute right-0 top-full mt-1 z-50 min-w-[160px] bg-popover border border-border-subtle rounded-md shadow-lg py-1\">\n <button\n type=\"button\"\n onClick={() => {\n onViewDetails();\n setIsOpen(false);\n }}\n className=\"w-full flex items-center gap-2 px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken/50 transition-colors whitespace-nowrap\"\n >\n <Eye className=\"size-4\" />\n View Details\n </button>\n {transaction.type === 'payment' && hasInvoiceUrl && (\n <button\n type=\"button\"\n onClick={() => {\n onViewInvoice();\n setIsOpen(false);\n }}\n className=\"w-full flex items-center gap-2 px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken/50 transition-colors whitespace-nowrap\"\n >\n <FileText className=\"size-4\" />\n View Invoice\n </button>\n )}\n </div>\n )}\n </div>\n );\n};\n\n// Transaction Details Modal Component\ninterface TransactionDetailsModalProps {\n transaction: Transaction \| null;\n onClose: () => void;\n onViewInvoice?: (transaction: Transaction) => void;\n invoiceUrl?: string \| null;\n invoiceProvider?: string \| null;\n}\n\nconst TransactionDetailsModal: FC<TransactionDetailsModalProps> = ({\n transaction,\n onClose,\n onViewInvoice,\n invoiceUrl,\n invoiceProvider,\n}) => {\n if (!transaction) return null;\n\n // Extract tax information from metadata\n const metadata = transaction.metadata as Record<string, unknown> \| null;\n const subtotal = metadata?.subtotal as number \| undefined;\n const taxAmount = metadata?.taxAmount as number \| undefined;\n const taxRate = metadata?.taxRate as number \| undefined;\n const taxType = metadata?.taxType as string \| undefined;\n const total = metadata?.total as number \| undefined;\n const invoiceNumber = metadata?.invoiceNumber as string \| undefined;\n const invoiceStatus = metadata?.invoiceStatus as string \| undefined;\n\n // Extract refund-specific information\n const isRefund = transaction.type === 'refund';\n const refundRecordId = metadata?.refundRecordId as string \| undefined;\n const originalTransactionId = metadata?.originalTransactionId as string \| undefined;\n const creditNoteId = metadata?.creditNoteId as string \| undefined;\n const creditNoteNumber = metadata?.creditNoteNumber as string \| undefined;\n const creditNotePdfUrl = metadata?.creditNotePdfUrl as string \| undefined;\n const refundReason = metadata?.reason as string \| undefined;\n const purchaseType = metadata?.purchaseType as string \| undefined;\n const purchaseDetail = metadata?.purchaseDetail as string \| undefined;\n\n // Determine if we should show tax breakdown\n const showTaxBreakdown = total && taxAmount !== undefined && taxAmount > 0;\n\n return (\n <Dialog open={!!transaction} onOpenChange={(open) => !open && onClose()}>\n <DialogContent className=\"max-w-md max-h-[90vh] overflow-auto p-0\">\n <DialogHeader className=\"p-4 border-b border-border-subtle\">\n <DialogTitle className=\"text-lg font-semibold\">Transaction Details</DialogTitle>\n </DialogHeader>\n\n <div className=\"p-4 space-y-4\">\n <div className=\"grid grid-cols-2 gap-4\">\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Transaction ID</p>\n <p className=\"text-sm font-mono break-all\">{transaction.id}</p>\n </div>\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Type</p>\n <p className=\"text-sm capitalize\">{getTypeLabel(transaction.type)}</p>\n </div>\n </div>\n\n {/ Amount Section with Tax Breakdown /}\n <div className=\"space-y-2\">\n {showTaxBreakdown ? (\n <>\n <div className=\"flex justify-between text-sm\">\n <span className=\"text-text-secondary\">Subtotal</span>\n <span>\n {formatCurrency(subtotal \|\| transaction.amount, transaction.currency)}\n </span>\n </div>\n {taxAmount > 0 && (\n <div className=\"flex justify-between text-sm\">\n <span className=\"text-text-secondary\">\n {taxType \|\| 'Tax'} {taxRate ? `(${(taxRate 100).toFixed(0)}%)` : ''}\n </span>\n <span>{formatCurrency(taxAmount, transaction.currency)}</span>\n </div>\n )}\n <div className=\"flex justify-between text-sm font-semibold border-t border-border-subtle pt-2\">\n <span>Total</span>\n <span className={transaction.type === 'refund' ? 'text-status-error-text' : ''}>\n {transaction.type === 'refund' ? '-' : ''}\n {formatCurrency(total, transaction.currency)}\n </span>\n </div>\n </>\n ) : (\n <div className=\"grid grid-cols-2 gap-4\">\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Amount</p>\n <p\n className={`text-sm font-medium ${transaction.type === 'refund' ? 'text-status-error-text' : ''}`}\n >\n {transaction.type === 'refund' ? '-' : ''}\n {formatCurrency(total \|\| transaction.amount, transaction.currency)}\n </p>\n </div>\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Status</p>\n <span\n className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(\n getTransactionStatusColor(transaction.status)\n )}`}\n >\n {transaction.status}\n </span>\n </div>\n </div>\n )}\n </div>\n\n {/* Status (if tax breakdown shown) /}\n {showTaxBreakdown && (\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Status</p>\n <span\n className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(\n getTransactionStatusColor(transaction.status)\n )}`}\n >\n {transaction.status}\n </span>\n </div>\n )}\n\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Date & Time</p>\n <p className=\"text-sm\">{formatDateTime(transaction.createdAt)}</p>\n </div>\n\n {transaction.description && (\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Description</p>\n <p className=\"text-sm\">{transaction.description}</p>\n </div>\n )}\n\n {/ Invoice Information /}\n {invoiceNumber && (\n <div className=\"p-3 bg-bg-sunken/50 rounded-lg space-y-2\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Invoice</p>\n <p className=\"text-sm font-mono\">{invoiceNumber}</p>\n </div>\n {invoiceStatus && (\n <span\n className={`px-2 py-0.5 text-xs font-medium rounded ${\n invoiceStatus === 'PAID'\n ? 'bg-status-success-bg-subtle text-status-success-text'\n : 'bg-status-warning-bg-subtle text-status-warning-text'\n }`}\n >\n {invoiceStatus}\n </span>\n )}\n </div>\n {invoiceProvider && (\n <p className=\"text-xs text-text-secondary\">Provider: {invoiceProvider}</p>\n )}\n {invoiceUrl && onViewInvoice && (\n <button\n type=\"button\"\n onClick={() => onViewInvoice(transaction)}\n className=\"flex items-center gap-2 text-sm text-primary hover:underline\"\n >\n <FileText className=\"size-4\" />\n View Invoice\n </button>\n )}\n </div>\n )}\n\n {/ Fallback invoice button if no invoice number but URL exists /}\n {!invoiceNumber && invoiceUrl && onViewInvoice && (\n <div className=\"p-3 bg-bg-sunken/50 rounded-lg\">\n <button\n type=\"button\"\n onClick={() => onViewInvoice(transaction)}\n className=\"flex items-center gap-2 text-sm text-primary hover:underline\"\n >\n <FileText className=\"size-4\" />\n View Invoice {invoiceProvider && `(${invoiceProvider})`}\n </button>\n </div>\n )}\n\n {/ Refund-Specific Information /}\n {isRefund && (creditNoteId \|\| refundReason \|\| purchaseType) && (\n <div className=\"p-3 bg-status-error-bg-subtle/20 border border-border-subtle rounded-lg space-y-3\">\n <div className=\"flex items-center gap-2\">\n <div className=\"size-1.5 rounded-full bg-status-error-bg\" />\n <p className=\"text-sm font-semibold text-status-error-text\">Refund Information</p>\n </div>\n\n {/ Credit Note Section /}\n {creditNoteNumber && (\n <div className=\"space-y-2\">\n <div>\n <p className=\"text-xs text-status-error-text mb-1\">Credit Note</p>\n <p className=\"text-sm font-mono text-status-error-text\">{creditNoteNumber}</p>\n </div>\n {creditNotePdfUrl && (\n <button\n type=\"button\"\n onClick={() => {\n void nativeImpact('light');\n void nativeOpenUrl(creditNotePdfUrl);\n }}\n className=\"flex items-center gap-2 text-sm text-status-error-text hover:underline\"\n >\n <FileText className=\"size-4\" />\n Download Credit Note PDF\n </button>\n )}\n </div>\n )}\n\n {/ Purchase Type & Detail /}\n {purchaseType && (\n <div>\n <p className=\"text-xs text-status-error-text mb-1\">Purchase Type</p>\n <p className=\"text-sm text-status-error-text\">\n {purchaseType}\n {purchaseDetail && ` - ${purchaseDetail}`}\n </p>\n </div>\n )}\n\n {/ Refund Reason /}\n {refundReason && (\n <div>\n <p className=\"text-xs text-status-error-text mb-1\">Reason</p>\n <p className=\"text-sm text-status-error-text\">{refundReason}</p>\n </div>\n )}\n\n {/ Original Transaction Reference /}\n {originalTransactionId && (\n <div>\n <p className=\"text-xs text-status-error-text mb-1\">Original Transaction</p>\n <p className=\"text-sm font-mono text-status-error-text break-all\">\n {originalTransactionId}\n </p>\n </div>\n )}\n\n {/ Refund Record ID /}\n {refundRecordId && (\n <div>\n <p className=\"text-xs text-status-error-text mb-1\">Refund Record ID</p>\n <p className=\"text-sm font-mono text-status-error-text break-all\">\n {refundRecordId}\n </p>\n </div>\n )}\n </div>\n )}\n\n {transaction.stripePaymentId && (\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Stripe Payment ID</p>\n <p className=\"text-sm font-mono break-all\">{transaction.stripePaymentId}</p>\n </div>\n )}\n\n {transaction.razorpayPaymentId && (\n <div>\n <p className=\"text-xs text-text-secondary mb-1\">Razorpay Payment ID</p>\n <p className=\"text-sm font-mono break-all\">{transaction.razorpayPaymentId}</p>\n </div>\n )}\n </div>\n\n <DialogFooter className=\"p-4 border-t border-border-subtle\">\n <button\n type=\"button\"\n onClick={onClose}\n className=\"w-full py-2 px-4 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors\"\n >\n Close\n </button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n );\n};\n\nexport const TransactionsPage: 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 { billingAccountId } = useParams<{ billingAccountId: string }>();\n const permissions = useBillingPermissions();\n const navigateTo = useBillingNavigate();\n const {\n billingAccount,\n transactions,\n pagination,\n isLoading,\n error,\n refetch,\n goToNextPage,\n goToPreviousPage,\n } = useTransactions(billingAccountId);\n const [filterType, setFilterType] = useState<FilterType>('all');\n const [selectedTransaction, setSelectedTransaction] = useState<Transaction \| null>(null);\n\n // Get invoice URL from transaction metadata (supports both Zoho and Stripe)\n const getInvoiceUrl = (transaction: Transaction): string \| null => {\n const metadata = transaction.metadata as Record<string, unknown> \| null;\n // Check for Zoho Books invoice first (INR payments)\n if (metadata?.zohoBooksInvoiceUrl) {\n return metadata.zohoBooksInvoiceUrl as string;\n }\n // Check for Stripe invoice (international payments)\n if (metadata?.invoiceUrl) {\n return metadata.invoiceUrl as string;\n }\n // Check for Stripe PDF (fallback)\n if (metadata?.invoicePdf) {\n return metadata.invoicePdf as string;\n }\n return null;\n };\n\n // Get total amount (with tax) from metadata if available\n const getTotalAmount = (transaction: Transaction): number => {\n const metadata = transaction.metadata as Record<string, unknown> \| null;\n // Check for total in metadata (includes tax)\n if (metadata?.total && typeof metadata.total === 'number') {\n return metadata.total;\n }\n // Fallback to transaction amount\n return transaction.amount;\n };\n\n // Get invoice provider name for display\n const getInvoiceProvider = (transaction: Transaction): string \| null => {\n const metadata = transaction.metadata as Record<string, unknown> \| null;\n if (metadata?.zohoBooksInvoiceUrl) return 'Zoho Books';\n if (metadata?.invoiceUrl \|\| metadata?.invoicePdf) return 'Stripe';\n return null;\n };\n\n const handleViewInvoice = (transaction: Transaction) => {\n const invoiceUrl = getInvoiceUrl(transaction);\n if (invoiceUrl) {\n void nativeImpact('light');\n void nativeOpenUrl(invoiceUrl);\n }\n };\n\n if (!permissions.canViewPayments) {\n return (\n <AccessDenied\n message={tr(\n 'billing.transactions.noPermission',\n \"You don't have permission to view transaction history.\"\n )}\n />\n );\n }\n\n // Show error if no billing account ID provided\n if (!billingAccountId) {\n return (\n <div className=\"p-6\">\n <EmptyState\n icon={\n <svg\n className=\"size-6 text-text-secondary\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 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 }\n title={tr('billing.transactions.noAccountSelected', 'No billing account selected')}\n description={tr(\n 'billing.transactions.noAccountSelectedDesc',\n 'Please select a billing account from the overview page to view transactions.'\n )}\n />\n </div>\n );\n }\n\n // Show server error if backend is down\n if (error && isServerError(error)) {\n return (\n <div className=\"p-6\">\n <ServerError\n title={tr('billing.transactions.serverUnavailable', 'Server Unavailable')}\n message={tr(\n 'billing.transactions.serverUnavailableMessage',\n 'Unable to load transactions. The server might be down or experiencing issues.'\n )}\n onRetry={() => refetch()}\n showRetry\n />\n </div>\n );\n }\n const filteredTransactions =\n filterType === 'all' ? transactions : transactions.filter((t) => t.type === filterType);\n\n if (isLoading) {\n return (\n <div className=\"space-y-6 p-6\">\n <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"space-y-2\">\n {[1, 2, 3, 4, 5].map((i) => (\n <div key={i} className=\"h-16 bg-bg-sunken animate-pulse rounded\" />\n ))}\n </div>\n </div>\n );\n }\n\n const transactionColumns: ResponsiveTableColumn<Transaction>[] = [\n {\n key: 'date',\n header: 'Date',\n priority: 'primary',\n cellClassName: 'whitespace-nowrap',\n cell: (transaction) => (\n <span className=\"text-sm text-text-primary\">{formatDateTime(transaction.createdAt)}</span>\n ),\n },\n {\n key: 'type',\n header: 'Type',\n cellClassName: 'whitespace-nowrap',\n cell: (transaction) => (\n <span className=\"text-sm text-text-primary capitalize\">\n {getTypeLabel(transaction.type)}\n </span>\n ),\n },\n {\n key: 'description',\n header: 'Description',\n cell: (transaction) => (\n <span className=\"text-sm text-text-secondary\">{transaction.description ?? '-'}</span>\n ),\n },\n {\n key: 'amount',\n header: 'Amount',\n headerClassName: 'text-right',\n cellClassName: 'text-right whitespace-nowrap',\n cell: (transaction) => (\n <span\n className={`text-sm font-medium tabular-nums ${\n transaction.type === 'refund' ? 'text-status-error-text' : 'text-text-primary'\n }`}\n >\n {transaction.type === 'refund' ? '-' : ''}\n {formatCurrency(getTotalAmount(transaction), transaction.currency)}\n </span>\n ),\n },\n {\n key: 'status',\n header: 'Status',\n headerClassName: 'text-center',\n cellClassName: 'text-center whitespace-nowrap',\n cell: (transaction) => (\n <span\n className={`px-1.5 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(\n getTransactionStatusColor(transaction.status)\n )}`}\n >\n {transaction.status}\n </span>\n ),\n },\n ];\n\n const renderTransactionActions = (transaction: Transaction) => (\n <TransactionActionsDropdown\n transaction={transaction}\n onViewDetails={() => setSelectedTransaction(transaction)}\n onViewInvoice={() => handleViewInvoice(transaction)}\n hasInvoiceUrl={!!getInvoiceUrl(transaction)}\n />\n );\n\n return (\n <div className=\"space-y-6 p-6\">\n {/ Back Button /}\n <button\n type=\"button\"\n onClick={() => navigateTo('/overview')}\n className=\"inline-flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n >\n <ArrowLeft className=\"size-4\" />\n Back to Overview\n </button>\n\n <PageHeader\n title={tr('billing.transactions.title', 'Transaction History')}\n description={\n billingAccount\n ? `Transactions for ${billingAccount.name}`\n : 'View all your billing transactions'\n }\n />\n\n <PagePurpose>\n {tr(\n 'billing.transactions.purpose',\n 'A complete, time-ordered ledger of money movements on this billing account — payments, refunds and adjustments. Use it to reconcile what you were charged, open the linked invoice or credit note, and see tax breakdowns for each transaction.'\n )}\n </PagePurpose>\n\n {/ Billing Account Info Card — primary emphasis zone /}\n {billingAccount && (\n <EmphasisPanel className=\"p-4\">\n <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4\">\n {/ Account Name & Status /}\n <div className=\"flex items-start gap-2\">\n <CreditCard className=\"size-4 text-text-secondary mt-0.5\" />\n <div>\n <p className=\"text-xs text-text-secondary mb-0.5\">Account</p>\n <p className=\"text-sm font-medium\">{billingAccount.name}</p>\n {billingAccount.isActive ? (\n <span className=\"inline-flex items-center gap-1 mt-1 px-1.5 py-0.5 text-xs font-medium rounded bg-status-success-bg-subtle text-status-success-text\">\n <CheckCircle className=\"size-3\" />\n Active\n </span>\n ) : (\n <span className=\"inline-flex items-center gap-1 mt-1 px-1.5 py-0.5 text-xs font-medium rounded bg-status-error-bg-subtle text-status-error-text\">\n <XCircle className=\"size-3\" />\n Inactive\n </span>\n )}\n </div>\n </div>\n\n {/ Email /}\n <div className=\"flex items-start gap-2\">\n <Mail className=\"size-4 text-text-secondary mt-0.5\" />\n <div>\n <p className=\"text-xs text-text-secondary mb-0.5\">Email</p>\n <p className=\"text-sm font-medium break-all\">\n {billingAccount.billingEmail \|\| billingAccount.email}\n </p>\n </div>\n </div>\n\n {/ Credit Balance /}\n <div className=\"flex items-start gap-2\">\n <Wallet className=\"size-4 text-text-secondary mt-0.5\" />\n <div>\n <p className=\"text-xs text-text-secondary mb-0.5\">Credits Balance</p>\n <p className=\"text-sm font-semibold text-text-primary\">\n {(billingAccount.creditAmount \|\| 0).toLocaleString()} Credits\n </p>\n </div>\n </div>\n\n {/ Tax ID /}\n <div className=\"flex items-start gap-2\">\n <FileText className=\"size-4 text-text-secondary mt-0.5\" />\n <div>\n <p className=\"text-xs text-text-secondary mb-0.5\">Tax ID</p>\n <p className=\"text-sm font-medium\">{billingAccount.taxId \|\| '-'}</p>\n </div>\n </div>\n\n {/ Account Created /}\n <div className=\"flex items-start gap-2\">\n <Calendar className=\"size-4 text-text-secondary mt-0.5\" />\n <div>\n <p className=\"text-xs text-text-secondary mb-0.5\">Member Since</p>\n <p className=\"text-sm font-medium\">\n {billingAccount.createdAt ? formatDateTime(billingAccount.createdAt) : '-'}\n </p>\n </div>\n </div>\n </div>\n </EmphasisPanel>\n )}\n\n {/ Filters /}\n <div className=\"flex items-center gap-4\">\n <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken/50\">\n {(['all', 'payment', 'refund', 'adjustment'] as FilterType[]).map((type) => (\n <button\n type=\"button\"\n key={type}\n onClick={() => setFilterType(type)}\n className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n filterType === type\n ? 'bg-bg-surface text-text-primary shadow-sm'\n : 'text-text-secondary hover:text-text-primary'\n }`}\n >\n {type === 'all' ? 'All' : TYPE_LABELS[type as TransactionType]}\n </button>\n ))}\n </div>\n </div>\n\n {/ Transactions List /}\n {filteredTransactions.length === 0 ? (\n <IllustratedEmptyState\n illustration={filterType !== 'all' ? 'empty-search' : 'empty-data'}\n title={tr('billing.transactions.noTransactionsFound', 'No transactions found')}\n description={\n filterType !== 'all'\n ? tr(\n 'billing.transactions.noTransactionsFiltered',\n 'No transactions match your filter.'\n )\n : tr(\n 'billing.transactions.noTransactionsYet',\n 'Your transaction history will appear here.'\n )\n }\n />\n ) : (\n <div className=\"border border-border-subtle rounded-lg overflow-visible\">\n <ResponsiveTable<Transaction>\n columns={transactionColumns}\n data={filteredTransactions}\n rowKey={(transaction) => transaction.id}\n rowActions={renderTransactionActions}\n />\n </div>\n )}\n\n {/ Pagination Controls /}\n {pagination.totalCount > 0 && (\n <div className=\"flex items-center justify-between border-t border-border-subtle pt-4\">\n <p className=\"text-sm text-text-secondary\">\n Showing {pagination.page pagination.pageSize + 1} to{' '}\n {Math.min((pagination.page + 1) * pagination.pageSize, pagination.totalCount)} of{' '}\n {pagination.totalCount} transactions\n </p>\n <div className=\"flex items-center gap-2\">\n <button\n type=\"button\"\n onClick={goToPreviousPage}\n disabled={!pagination.hasPrevious}\n className=\"inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n >\n <ChevronLeft className=\"size-4\" />\n Previous\n </button>\n <span className=\"text-sm text-text-secondary px-2\">\n Page {pagination.page + 1} of {Math.ceil(pagination.totalCount / pagination.pageSize)}\n </span>\n <button\n type=\"button\"\n onClick={goToNextPage}\n disabled={!pagination.hasMore}\n className=\"inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n >\n Next\n <ChevronRight className=\"size-4\" />\n </button>\n </div>\n </div>\n )}\n\n {/* Transaction Details Modal */}\n <TransactionDetailsModal\n transaction={selectedTransaction}\n onClose={() => setSelectedTransaction(null)}\n onViewInvoice={handleViewInvoice}\n invoiceUrl={selectedTransaction ? getInvoiceUrl(selectedTransaction) : null}\n invoiceProvider={selectedTransaction ? getInvoiceProvider(selectedTransaction) : null}\n />\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/billing/modules/checkout/pages/CheckoutPage.js CHANGED Viewed

@@ -33,7 +33,7 @@ import "../components/index.js";
 import { buildStoreOrderCheckoutItems as je, normalizeStoreOrderCurrency as Me } from "../utils/storeOrder.js";
 import { useCallback as s, useEffect as c, useMemo as l, useRef as Ne, useState as u } from "react";
 import { ArrowLeft as Pe, ArrowRight as Fe, Blocks as Ie, CheckCircle as Le, Coins as Re, CreditCard as ze, Loader2 as d, Package as Be, Receipt as Ve, RefreshCw as He, ShoppingCart as Ue, Wallet as We, XCircle as Ge } from "lucide-react";
-import { useLocation as Ke, useParams as qe } from "react-router-dom";
+import { useLocation as Ke, useParams as qe } from "react-router";
 import { useAppShell as Je } from "@burdenoff/fe-libs/shared/providers/shell";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 import { useI18n as Ye } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";