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

@burdenoff/microfe-billing 2026.731.1 → 2026.802.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 (50) hide show

package/dist/billing/modules/billing/hooks/useRefunds.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useRefunds.js","names":[],"sources":["../../../../../src/billing/modules/billing/hooks/useRefunds.ts"],"sourcesContent":["/*\n Billing Module - useRefunds Hook\n * Provides access to refund records, statistics, and mutations\n /\n\nimport { useApolloClient } from '@apollo/client/react';\nimport { useCallback, useState, useMemo, useEffect } from 'react';\nimport {\n useGetRefundRecordsQuery,\n useGetPendingRefundsQuery,\n useGetRefundRecordQuery,\n useGetRefundStatsQuery,\n useGetUnprocessedFailedWebhooksQuery,\n useCreateRefundRecordMutation,\n useProcessRefundMutation,\n useSkipRefundMutation,\n useRetryRefundMutation,\n useCreateRefundRecordsFromFailedWebhooksMutation,\n useCreateRefundRecordFromWebhookMutation,\n GetRefundRecordsDocument,\n GetPendingRefundsDocument,\n GetRefundStatsDocument,\n GetUnprocessedFailedWebhooksDocument,\n} from '../../../../generated/global-operations';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type RefundRecordStatus = 'PENDING' \| 'PROCESSING' \| 'COMPLETED' \| 'FAILED' \| 'SKIPPED';\nexport type RefundSource =\n \| 'MANUAL'\n \| 'WEBHOOK_RECOVERY'\n \| 'SUBSCRIPTION_CANCEL'\n \| 'DUPLICATE_PAYMENT';\n\nexport interface RefundRecord {\n id: string;\n orgId: string;\n billingAccountId: string \| null;\n source: RefundSource;\n status: RefundRecordStatus;\n provider: string;\n gatewayPaymentId: string;\n gatewayOrderId: string \| null;\n amount: number;\n currency: string;\n purchaseType: string \| null;\n purchaseDetail: string \| null;\n reason: string \| null;\n notes: string \| null;\n webhookLogId: string \| null;\n transactionId: string \| null;\n processedBy: string \| null;\n processedAt: string \| null;\n gatewayRefundId: string \| null;\n errorMessage: string \| null;\n retryCount: number;\n metadata: Record<string, unknown> \| null;\n createdAt: string;\n updatedAt: string;\n}\n\nexport interface RefundStats {\n pending: number;\n processing: number;\n completed: number;\n failed: number;\n skipped: number;\n totalPendingAmount: number;\n totalCompletedAmount: number;\n}\n\nexport interface WebhookLog {\n id: string;\n event: string;\n provider: string;\n payload: Record<string, unknown>;\n processed: boolean;\n error: string \| null;\n createdAt: string;\n}\n\nexport interface RefundRecordFilters {\n status?: RefundRecordStatus;\n source?: RefundSource;\n provider?: string;\n billingAccountId?: string;\n fromDate?: string;\n toDate?: string;\n}\n\nexport interface CreateRefundRecordInput {\n billingAccountId?: string;\n provider: string;\n gatewayPaymentId: string;\n gatewayOrderId?: string;\n amount: number;\n currency: string;\n purchaseType?: string;\n purchaseDetail?: string;\n reason?: string;\n notes?: string;\n transactionId?: string;\n metadata?: Record<string, unknown>;\n}\n\nexport interface ProcessRefundResult {\n success: boolean;\n refundRecord: RefundRecord \| null;\n gatewayRefundId: string \| null;\n error: string \| null;\n}\n\ninterface PaginationInfo {\n totalCount: number;\n hasMore: boolean;\n page: number;\n pageSize: number;\n hasPrevious: boolean;\n}\n\n// ============================================================================\n// Hook Results\n// ============================================================================\n\ninterface UseRefundRecordsOptions {\n pageSize?: number;\n filters?: RefundRecordFilters;\n}\n\ninterface UseRefundRecordsResult {\n records: RefundRecord[];\n pagination: PaginationInfo;\n isLoading: boolean;\n error: Error \| undefined;\n refetch: () => Promise<void>;\n goToNextPage: () => void;\n goToPreviousPage: () => void;\n goToPage: (page: number) => void;\n setFilters: (filters: RefundRecordFilters) => void;\n}\n\ninterface UseRefundStatsResult {\n stats: RefundStats \| null;\n isLoading: boolean;\n error: Error \| undefined;\n refetch: () => Promise<void>;\n}\n\ninterface UseRefundRecordResult {\n record: RefundRecord \| null;\n isLoading: boolean;\n error: Error \| undefined;\n refetch: () => Promise<void>;\n}\n\ninterface UseUnprocessedWebhooksResult {\n webhooks: WebhookLog[];\n isLoading: boolean;\n error: Error \| undefined;\n refetch: () => Promise<void>;\n}\n\ninterface UseRefundMutationsResult {\n createRefundRecord: (input: CreateRefundRecordInput) => Promise<RefundRecord>;\n processRefund: (id: string, notes?: string) => Promise<ProcessRefundResult>;\n skipRefund: (id: string, reason: string) => Promise<RefundRecord>;\n retryRefund: (id: string) => Promise<ProcessRefundResult>;\n createRefundRecordsFromFailedWebhooks: () => Promise<RefundRecord[]>;\n createRefundRecordFromWebhook: (webhookLogId: string) => Promise<RefundRecord \| null>;\n isCreating: boolean;\n isProcessing: boolean;\n isSkipping: boolean;\n isRetrying: boolean;\n isCreatingFromWebhooks: boolean;\n isCreatingFromWebhook: boolean;\n}\n\n// ============================================================================\n// Hooks\n// ============================================================================\n\nconst DEFAULT_PAGE_SIZE = 20;\n\n/\n Hook for fetching paginated refund records with filters\n /\nexport function useRefundRecords(options: UseRefundRecordsOptions = {}): UseRefundRecordsResult {\n const pageSize = options.pageSize \|\| DEFAULT_PAGE_SIZE;\n const [currentPage, setCurrentPage] = useState(0);\n const [filters, setFilters] = useState<RefundRecordFilters>(options.filters \|\| {});\n\n // Update filters when options change (e.g., when tab changes)\n useEffect(() => {\n setFilters(options.filters \|\| {});\n setCurrentPage(0); // Reset to first page when filters change externally\n }, [options.filters]);\n\n const { data, loading, error, refetch } = useGetRefundRecordsQuery({\n variables: {\n ...filters,\n page: currentPage,\n pageSize,\n },\n fetchPolicy: 'cache-and-network',\n });\n\n const handleRefetch = useCallback(async () => {\n await refetch();\n }, [refetch]);\n\n const result = data?.getRefundRecords;\n\n const goToNextPage = useCallback(() => {\n if (result?.hasMore) {\n setCurrentPage((prev) => prev + 1);\n }\n }, [result?.hasMore]);\n\n const goToPreviousPage = useCallback(() => {\n if (currentPage > 0) {\n setCurrentPage((prev) => prev - 1);\n }\n }, [currentPage]);\n\n const goToPage = useCallback(\n (page: number) => {\n const totalPages = result ? Math.ceil(result.totalCount / pageSize) : 0;\n if (page >= 0 && page < totalPages) {\n setCurrentPage(page);\n }\n },\n [result, pageSize]\n );\n\n const handleSetFilters = useCallback((newFilters: RefundRecordFilters) => {\n setFilters(newFilters);\n setCurrentPage(0); // Reset to first page when filters change\n }, []);\n\n return {\n records: result?.records \|\| [],\n pagination: {\n totalCount: result?.totalCount \|\| 0,\n hasMore: result?.hasMore \|\| false,\n page: currentPage,\n pageSize,\n hasPrevious: currentPage > 0,\n },\n isLoading: loading,\n error: error as Error \| undefined,\n refetch: handleRefetch,\n goToNextPage,\n goToPreviousPage,\n goToPage,\n setFilters: handleSetFilters,\n };\n}\n\n/\n Hook for fetching pending refund records (shortcut)\n /\nexport function usePendingRefunds(pageSize = DEFAULT_PAGE_SIZE): UseRefundRecordsResult {\n const [currentPage, setCurrentPage] = useState(0);\n\n const { data, loading, error, refetch } = useGetPendingRefundsQuery({\n variables: { page: currentPage, pageSize },\n fetchPolicy: 'cache-and-network',\n });\n\n const handleRefetch = useCallback(async () => {\n await refetch();\n }, [refetch]);\n\n const result = data?.getPendingRefunds;\n\n const goToNextPage = useCallback(() => {\n if (result?.hasMore) {\n setCurrentPage((prev) => prev + 1);\n }\n }, [result?.hasMore]);\n\n const goToPreviousPage = useCallback(() => {\n if (currentPage > 0) {\n setCurrentPage((prev) => prev - 1);\n }\n }, [currentPage]);\n\n const goToPage = useCallback(\n (page: number) => {\n const totalPages = result ? Math.ceil(result.totalCount / pageSize) : 0;\n if (page >= 0 && page < totalPages) {\n setCurrentPage(page);\n }\n },\n [result, pageSize]\n );\n\n return {\n records: result?.records \|\| [],\n pagination: {\n totalCount: result?.totalCount \|\| 0,\n hasMore: result?.hasMore \|\| false,\n page: currentPage,\n pageSize,\n hasPrevious: currentPage > 0,\n },\n isLoading: loading,\n error: error as Error \| undefined,\n refetch: handleRefetch,\n goToNextPage,\n goToPreviousPage,\n goToPage,\n setFilters: () => {}, // No-op for pending refunds\n };\n}\n\n/\n Hook for fetching refund statistics\n /\nexport function useRefundStats(): UseRefundStatsResult {\n const { data, loading, error, refetch } = useGetRefundStatsQuery({\n fetchPolicy: 'cache-and-network',\n });\n\n const handleRefetch = useCallback(async () => {\n await refetch();\n }, [refetch]);\n\n return {\n stats: data?.getRefundStats \|\| null,\n isLoading: loading,\n error: error as Error \| undefined,\n refetch: handleRefetch,\n };\n}\n\n/\n Hook for fetching a single refund record by ID\n /\nexport function useRefundRecord(id: string \| undefined): UseRefundRecordResult {\n const { data, loading, error, refetch } = useGetRefundRecordQuery({\n variables: { id: id! },\n skip: !id,\n fetchPolicy: 'cache-and-network',\n });\n\n const handleRefetch = useCallback(async () => {\n await refetch();\n }, [refetch]);\n\n return {\n record: data?.getRefundRecord \|\| null,\n isLoading: loading,\n error: error as Error \| undefined,\n refetch: handleRefetch,\n };\n}\n\n/\n Hook for fetching unprocessed failed webhooks\n /\nexport function useUnprocessedFailedWebhooks(): UseUnprocessedWebhooksResult {\n const { data, loading, error, refetch } = useGetUnprocessedFailedWebhooksQuery({\n fetchPolicy: 'cache-and-network',\n });\n\n const handleRefetch = useCallback(async () => {\n await refetch();\n }, [refetch]);\n\n return {\n webhooks: data?.getUnprocessedFailedWebhooks \|\| [],\n isLoading: loading,\n error: error as Error \| undefined,\n refetch: handleRefetch,\n };\n}\n\n/\n Hook for refund mutations\n /\nexport function useRefundMutations(): UseRefundMutationsResult {\n const client = useApolloClient();\n\n const [createRefundRecordMutation, { loading: isCreating }] = useCreateRefundRecordMutation();\n const [processRefundMutation, { loading: isProcessing }] = useProcessRefundMutation();\n const [skipRefundMutation, { loading: isSkipping }] = useSkipRefundMutation();\n const [retryRefundMutation, { loading: isRetrying }] = useRetryRefundMutation();\n const [createFromWebhooksMutation, { loading: isCreatingFromWebhooks }] =\n useCreateRefundRecordsFromFailedWebhooksMutation();\n const [createFromWebhookMutation, { loading: isCreatingFromWebhook }] =\n useCreateRefundRecordFromWebhookMutation();\n\n const refetchQueries = useCallback(async () => {\n await client.refetchQueries({\n include: [GetRefundRecordsDocument, GetPendingRefundsDocument, GetRefundStatsDocument],\n });\n }, [client]);\n\n const createRefundRecord = useCallback(\n async (input: CreateRefundRecordInput): Promise<RefundRecord> => {\n const { data } = await createRefundRecordMutation({\n variables: input,\n });\n await refetchQueries();\n return data.createRefundRecord;\n },\n [createRefundRecordMutation, refetchQueries]\n );\n\n const processRefund = useCallback(\n async (id: string, notes?: string): Promise<ProcessRefundResult> => {\n const { data } = await processRefundMutation({\n variables: { id, notes },\n });\n await refetchQueries();\n return data.processRefund;\n },\n [processRefundMutation, refetchQueries]\n );\n\n const skipRefund = useCallback(\n async (id: string, reason: string): Promise<RefundRecord> => {\n const { data } = await skipRefundMutation({\n variables: { id, reason },\n });\n await refetchQueries();\n return data.skipRefund;\n },\n [skipRefundMutation, refetchQueries]\n );\n\n const retryRefund = useCallback(\n async (id: string): Promise<ProcessRefundResult> => {\n const { data } = await retryRefundMutation({\n variables: { id },\n });\n await refetchQueries();\n return data.retryRefund;\n },\n [retryRefundMutation, refetchQueries]\n );\n\n const createRefundRecordsFromFailedWebhooks = useCallback(async (): Promise<RefundRecord[]> => {\n const { data } = await createFromWebhooksMutation();\n await client.refetchQueries({\n include: [\n GetRefundRecordsDocument,\n GetPendingRefundsDocument,\n GetRefundStatsDocument,\n GetUnprocessedFailedWebhooksDocument,\n ],\n });\n return data!.createRefundRecordsFromFailedWebhooks;\n }, [createFromWebhooksMutation, client]);\n\n const createRefundRecordFromWebhook = useCallback(\n async (webhookLogId: string): Promise<RefundRecord \| null> => {\n const { data } = await createFromWebhookMutation({\n variables: { webhookLogId },\n });\n await client.refetchQueries({\n include: [\n GetRefundRecordsDocument,\n GetPendingRefundsDocument,\n GetRefundStatsDocument,\n GetUnprocessedFailedWebhooksDocument,\n ],\n });\n return data!.createRefundRecordFromWebhook;\n },\n [createFromWebhookMutation, client]\n );\n\n return {\n createRefundRecord,\n processRefund,\n skipRefund,\n retryRefund,\n createRefundRecordsFromFailedWebhooks,\n createRefundRecordFromWebhook,\n isCreating,\n isProcessing,\n isSkipping,\n isRetrying,\n isCreatingFromWebhooks,\n isCreatingFromWebhook,\n };\n}\n\n/\n Combined hook for refund page with all data and mutations\n */\nexport function useRefunds(options: UseRefundRecordsOptions = {}) {\n const recordsHook = useRefundRecords(options);\n const statsHook = useRefundStats();\n const mutationsHook = useRefundMutations();\n const webhooksHook = useUnprocessedFailedWebhooks();\n\n const isLoading = useMemo(\n () => recordsHook.isLoading \|\| statsHook.isLoading,\n [recordsHook.isLoading, statsHook.isLoading]\n );\n\n const refetchAll = useCallback(async () => {\n await Promise.all([recordsHook.refetch(), statsHook.refetch(), webhooksHook.refetch()]);\n // eslint-disable-next-line react-hooks/exhaustive-deps -- Intentional: accessing stable refetch methods from hooks\n }, [recordsHook.refetch, statsHook.refetch, webhooksHook.refetch]);\n\n return {\n // Records\n records: recordsHook.records,\n pagination: recordsHook.pagination,\n goToNextPage: recordsHook.goToNextPage,\n goToPreviousPage: recordsHook.goToPreviousPage,\n goToPage: recordsHook.goToPage,\n setFilters: recordsHook.setFilters,\n\n // Stats\n stats: statsHook.stats,\n\n // Failed webhooks\n unprocessedWebhooks: webhooksHook.webhooks,\n webhooksLoading: webhooksHook.isLoading,\n\n // Loading states\n isLoading,\n recordsError: recordsHook.error,\n statsError: statsHook.error,\n\n // Mutations\n ...mutationsHook,\n\n // Refetch\n refetch: refetchAll,\n refetchRecords: recordsHook.refetch,\n refetchStats: statsHook.refetch,\n refetchWebhooks: webhooksHook.refetch,\n };\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"useRefunds.js","names":[],"sources":["../../../../../src/billing/modules/billing/hooks/useRefunds.ts"],"sourcesContent":["/*\n Billing Module - useRefunds Hook\n * Provides access to refund records, statistics, and mutations\n /\n\nimport { useApolloClient } from '@apollo/client/react';\nimport { useCallback, useState, useMemo, useEffect } from 'react';\nimport {\n useGetRefundRecordsQuery,\n useGetPendingRefundsQuery,\n useGetRefundRecordQuery,\n useGetRefundStatsQuery,\n useGetUnprocessedFailedWebhooksQuery,\n useCreateRefundRecordMutation,\n useProcessRefundMutation,\n useSkipRefundMutation,\n useRetryRefundMutation,\n useCreateRefundRecordsFromFailedWebhooksMutation,\n useCreateRefundRecordFromWebhookMutation,\n GetRefundRecordsDocument,\n GetPendingRefundsDocument,\n GetRefundStatsDocument,\n GetUnprocessedFailedWebhooksDocument,\n} from '../../../../generated/global-operations';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type RefundRecordStatus = 'PENDING' \| 'PROCESSING' \| 'COMPLETED' \| 'FAILED' \| 'SKIPPED';\nexport type RefundSource =\n 'MANUAL' \| 'WEBHOOK_RECOVERY' \| 'SUBSCRIPTION_CANCEL' \| 'DUPLICATE_PAYMENT';\n\nexport interface RefundRecord {\n id: string;\n orgId: string;\n billingAccountId: string \| null;\n source: RefundSource;\n status: RefundRecordStatus;\n provider: string;\n gatewayPaymentId: string;\n gatewayOrderId: string \| null;\n amount: number;\n currency: string;\n purchaseType: string \| null;\n purchaseDetail: string \| null;\n reason: string \| null;\n notes: string \| null;\n webhookLogId: string \| null;\n transactionId: string \| null;\n processedBy: string \| null;\n processedAt: string \| null;\n gatewayRefundId: string \| null;\n errorMessage: string \| null;\n retryCount: number;\n metadata: Record<string, unknown> \| null;\n createdAt: string;\n updatedAt: string;\n}\n\nexport interface RefundStats {\n pending: number;\n processing: number;\n completed: number;\n failed: number;\n skipped: number;\n totalPendingAmount: number;\n totalCompletedAmount: number;\n}\n\nexport interface WebhookLog {\n id: string;\n event: string;\n provider: string;\n payload: Record<string, unknown>;\n processed: boolean;\n error: string \| null;\n createdAt: string;\n}\n\nexport interface RefundRecordFilters {\n status?: RefundRecordStatus;\n source?: RefundSource;\n provider?: string;\n billingAccountId?: string;\n fromDate?: string;\n toDate?: string;\n}\n\nexport interface CreateRefundRecordInput {\n billingAccountId?: string;\n provider: string;\n gatewayPaymentId: string;\n gatewayOrderId?: string;\n amount: number;\n currency: string;\n purchaseType?: string;\n purchaseDetail?: string;\n reason?: string;\n notes?: string;\n transactionId?: string;\n metadata?: Record<string, unknown>;\n}\n\nexport interface ProcessRefundResult {\n success: boolean;\n refundRecord: RefundRecord \| null;\n gatewayRefundId: string \| null;\n error: string \| null;\n}\n\ninterface PaginationInfo {\n totalCount: number;\n hasMore: boolean;\n page: number;\n pageSize: number;\n hasPrevious: boolean;\n}\n\n// ============================================================================\n// Hook Results\n// ============================================================================\n\ninterface UseRefundRecordsOptions {\n pageSize?: number;\n filters?: RefundRecordFilters;\n}\n\ninterface UseRefundRecordsResult {\n records: RefundRecord[];\n pagination: PaginationInfo;\n isLoading: boolean;\n error: Error \| undefined;\n refetch: () => Promise<void>;\n goToNextPage: () => void;\n goToPreviousPage: () => void;\n goToPage: (page: number) => void;\n setFilters: (filters: RefundRecordFilters) => void;\n}\n\ninterface UseRefundStatsResult {\n stats: RefundStats \| null;\n isLoading: boolean;\n error: Error \| undefined;\n refetch: () => Promise<void>;\n}\n\ninterface UseRefundRecordResult {\n record: RefundRecord \| null;\n isLoading: boolean;\n error: Error \| undefined;\n refetch: () => Promise<void>;\n}\n\ninterface UseUnprocessedWebhooksResult {\n webhooks: WebhookLog[];\n isLoading: boolean;\n error: Error \| undefined;\n refetch: () => Promise<void>;\n}\n\ninterface UseRefundMutationsResult {\n createRefundRecord: (input: CreateRefundRecordInput) => Promise<RefundRecord>;\n processRefund: (id: string, notes?: string) => Promise<ProcessRefundResult>;\n skipRefund: (id: string, reason: string) => Promise<RefundRecord>;\n retryRefund: (id: string) => Promise<ProcessRefundResult>;\n createRefundRecordsFromFailedWebhooks: () => Promise<RefundRecord[]>;\n createRefundRecordFromWebhook: (webhookLogId: string) => Promise<RefundRecord \| null>;\n isCreating: boolean;\n isProcessing: boolean;\n isSkipping: boolean;\n isRetrying: boolean;\n isCreatingFromWebhooks: boolean;\n isCreatingFromWebhook: boolean;\n}\n\n// ============================================================================\n// Hooks\n// ============================================================================\n\nconst DEFAULT_PAGE_SIZE = 20;\n\n/\n Hook for fetching paginated refund records with filters\n /\nexport function useRefundRecords(options: UseRefundRecordsOptions = {}): UseRefundRecordsResult {\n const pageSize = options.pageSize \|\| DEFAULT_PAGE_SIZE;\n const [currentPage, setCurrentPage] = useState(0);\n const [filters, setFilters] = useState<RefundRecordFilters>(options.filters \|\| {});\n\n // Update filters when options change (e.g., when tab changes)\n useEffect(() => {\n setFilters(options.filters \|\| {});\n setCurrentPage(0); // Reset to first page when filters change externally\n }, [options.filters]);\n\n const { data, loading, error, refetch } = useGetRefundRecordsQuery({\n variables: {\n ...filters,\n page: currentPage,\n pageSize,\n },\n fetchPolicy: 'cache-and-network',\n });\n\n const handleRefetch = useCallback(async () => {\n await refetch();\n }, [refetch]);\n\n const result = data?.getRefundRecords;\n\n const goToNextPage = useCallback(() => {\n if (result?.hasMore) {\n setCurrentPage((prev) => prev + 1);\n }\n }, [result?.hasMore]);\n\n const goToPreviousPage = useCallback(() => {\n if (currentPage > 0) {\n setCurrentPage((prev) => prev - 1);\n }\n }, [currentPage]);\n\n const goToPage = useCallback(\n (page: number) => {\n const totalPages = result ? Math.ceil(result.totalCount / pageSize) : 0;\n if (page >= 0 && page < totalPages) {\n setCurrentPage(page);\n }\n },\n [result, pageSize]\n );\n\n const handleSetFilters = useCallback((newFilters: RefundRecordFilters) => {\n setFilters(newFilters);\n setCurrentPage(0); // Reset to first page when filters change\n }, []);\n\n return {\n records: result?.records \|\| [],\n pagination: {\n totalCount: result?.totalCount \|\| 0,\n hasMore: result?.hasMore \|\| false,\n page: currentPage,\n pageSize,\n hasPrevious: currentPage > 0,\n },\n isLoading: loading,\n error: error as Error \| undefined,\n refetch: handleRefetch,\n goToNextPage,\n goToPreviousPage,\n goToPage,\n setFilters: handleSetFilters,\n };\n}\n\n/\n Hook for fetching pending refund records (shortcut)\n /\nexport function usePendingRefunds(pageSize = DEFAULT_PAGE_SIZE): UseRefundRecordsResult {\n const [currentPage, setCurrentPage] = useState(0);\n\n const { data, loading, error, refetch } = useGetPendingRefundsQuery({\n variables: { page: currentPage, pageSize },\n fetchPolicy: 'cache-and-network',\n });\n\n const handleRefetch = useCallback(async () => {\n await refetch();\n }, [refetch]);\n\n const result = data?.getPendingRefunds;\n\n const goToNextPage = useCallback(() => {\n if (result?.hasMore) {\n setCurrentPage((prev) => prev + 1);\n }\n }, [result?.hasMore]);\n\n const goToPreviousPage = useCallback(() => {\n if (currentPage > 0) {\n setCurrentPage((prev) => prev - 1);\n }\n }, [currentPage]);\n\n const goToPage = useCallback(\n (page: number) => {\n const totalPages = result ? Math.ceil(result.totalCount / pageSize) : 0;\n if (page >= 0 && page < totalPages) {\n setCurrentPage(page);\n }\n },\n [result, pageSize]\n );\n\n return {\n records: result?.records \|\| [],\n pagination: {\n totalCount: result?.totalCount \|\| 0,\n hasMore: result?.hasMore \|\| false,\n page: currentPage,\n pageSize,\n hasPrevious: currentPage > 0,\n },\n isLoading: loading,\n error: error as Error \| undefined,\n refetch: handleRefetch,\n goToNextPage,\n goToPreviousPage,\n goToPage,\n setFilters: () => {}, // No-op for pending refunds\n };\n}\n\n/\n Hook for fetching refund statistics\n /\nexport function useRefundStats(): UseRefundStatsResult {\n const { data, loading, error, refetch } = useGetRefundStatsQuery({\n fetchPolicy: 'cache-and-network',\n });\n\n const handleRefetch = useCallback(async () => {\n await refetch();\n }, [refetch]);\n\n return {\n stats: data?.getRefundStats \|\| null,\n isLoading: loading,\n error: error as Error \| undefined,\n refetch: handleRefetch,\n };\n}\n\n/\n Hook for fetching a single refund record by ID\n /\nexport function useRefundRecord(id: string \| undefined): UseRefundRecordResult {\n const { data, loading, error, refetch } = useGetRefundRecordQuery({\n variables: { id: id! },\n skip: !id,\n fetchPolicy: 'cache-and-network',\n });\n\n const handleRefetch = useCallback(async () => {\n await refetch();\n }, [refetch]);\n\n return {\n record: data?.getRefundRecord \|\| null,\n isLoading: loading,\n error: error as Error \| undefined,\n refetch: handleRefetch,\n };\n}\n\n/\n Hook for fetching unprocessed failed webhooks\n /\nexport function useUnprocessedFailedWebhooks(): UseUnprocessedWebhooksResult {\n const { data, loading, error, refetch } = useGetUnprocessedFailedWebhooksQuery({\n fetchPolicy: 'cache-and-network',\n });\n\n const handleRefetch = useCallback(async () => {\n await refetch();\n }, [refetch]);\n\n return {\n webhooks: data?.getUnprocessedFailedWebhooks \|\| [],\n isLoading: loading,\n error: error as Error \| undefined,\n refetch: handleRefetch,\n };\n}\n\n/\n Hook for refund mutations\n /\nexport function useRefundMutations(): UseRefundMutationsResult {\n const client = useApolloClient();\n\n const [createRefundRecordMutation, { loading: isCreating }] = useCreateRefundRecordMutation();\n const [processRefundMutation, { loading: isProcessing }] = useProcessRefundMutation();\n const [skipRefundMutation, { loading: isSkipping }] = useSkipRefundMutation();\n const [retryRefundMutation, { loading: isRetrying }] = useRetryRefundMutation();\n const [createFromWebhooksMutation, { loading: isCreatingFromWebhooks }] =\n useCreateRefundRecordsFromFailedWebhooksMutation();\n const [createFromWebhookMutation, { loading: isCreatingFromWebhook }] =\n useCreateRefundRecordFromWebhookMutation();\n\n const refetchQueries = useCallback(async () => {\n await client.refetchQueries({\n include: [GetRefundRecordsDocument, GetPendingRefundsDocument, GetRefundStatsDocument],\n });\n }, [client]);\n\n const createRefundRecord = useCallback(\n async (input: CreateRefundRecordInput): Promise<RefundRecord> => {\n const { data } = await createRefundRecordMutation({\n variables: input,\n });\n await refetchQueries();\n return data.createRefundRecord;\n },\n [createRefundRecordMutation, refetchQueries]\n );\n\n const processRefund = useCallback(\n async (id: string, notes?: string): Promise<ProcessRefundResult> => {\n const { data } = await processRefundMutation({\n variables: { id, notes },\n });\n await refetchQueries();\n return data.processRefund;\n },\n [processRefundMutation, refetchQueries]\n );\n\n const skipRefund = useCallback(\n async (id: string, reason: string): Promise<RefundRecord> => {\n const { data } = await skipRefundMutation({\n variables: { id, reason },\n });\n await refetchQueries();\n return data.skipRefund;\n },\n [skipRefundMutation, refetchQueries]\n );\n\n const retryRefund = useCallback(\n async (id: string): Promise<ProcessRefundResult> => {\n const { data } = await retryRefundMutation({\n variables: { id },\n });\n await refetchQueries();\n return data.retryRefund;\n },\n [retryRefundMutation, refetchQueries]\n );\n\n const createRefundRecordsFromFailedWebhooks = useCallback(async (): Promise<RefundRecord[]> => {\n const { data } = await createFromWebhooksMutation();\n await client.refetchQueries({\n include: [\n GetRefundRecordsDocument,\n GetPendingRefundsDocument,\n GetRefundStatsDocument,\n GetUnprocessedFailedWebhooksDocument,\n ],\n });\n return data!.createRefundRecordsFromFailedWebhooks;\n }, [createFromWebhooksMutation, client]);\n\n const createRefundRecordFromWebhook = useCallback(\n async (webhookLogId: string): Promise<RefundRecord \| null> => {\n const { data } = await createFromWebhookMutation({\n variables: { webhookLogId },\n });\n await client.refetchQueries({\n include: [\n GetRefundRecordsDocument,\n GetPendingRefundsDocument,\n GetRefundStatsDocument,\n GetUnprocessedFailedWebhooksDocument,\n ],\n });\n return data!.createRefundRecordFromWebhook;\n },\n [createFromWebhookMutation, client]\n );\n\n return {\n createRefundRecord,\n processRefund,\n skipRefund,\n retryRefund,\n createRefundRecordsFromFailedWebhooks,\n createRefundRecordFromWebhook,\n isCreating,\n isProcessing,\n isSkipping,\n isRetrying,\n isCreatingFromWebhooks,\n isCreatingFromWebhook,\n };\n}\n\n/\n Combined hook for refund page with all data and mutations\n */\nexport function useRefunds(options: UseRefundRecordsOptions = {}) {\n const recordsHook = useRefundRecords(options);\n const statsHook = useRefundStats();\n const mutationsHook = useRefundMutations();\n const webhooksHook = useUnprocessedFailedWebhooks();\n\n const isLoading = useMemo(\n () => recordsHook.isLoading \|\| statsHook.isLoading,\n [recordsHook.isLoading, statsHook.isLoading]\n );\n\n const refetchAll = useCallback(async () => {\n await Promise.all([recordsHook.refetch(), statsHook.refetch(), webhooksHook.refetch()]);\n // eslint-disable-next-line react-hooks/exhaustive-deps -- Intentional: accessing stable refetch methods from hooks\n }, [recordsHook.refetch, statsHook.refetch, webhooksHook.refetch]);\n\n return {\n // Records\n records: recordsHook.records,\n pagination: recordsHook.pagination,\n goToNextPage: recordsHook.goToNextPage,\n goToPreviousPage: recordsHook.goToPreviousPage,\n goToPage: recordsHook.goToPage,\n setFilters: recordsHook.setFilters,\n\n // Stats\n stats: statsHook.stats,\n\n // Failed webhooks\n unprocessedWebhooks: webhooksHook.webhooks,\n webhooksLoading: webhooksHook.isLoading,\n\n // Loading states\n isLoading,\n recordsError: recordsHook.error,\n statsError: statsHook.error,\n\n // Mutations\n ...mutationsHook,\n\n // Refetch\n refetch: refetchAll,\n refetchRecords: recordsHook.refetch,\n refetchStats: statsHook.refetch,\n refetchWebhooks: webhooksHook.refetch,\n };\n}\n"],"mappings":"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"}

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

@@ -8,7 +8,7 @@ import { useBillingNavigate as u } from "../../../hooks/useBillingNavigate.js";
 import { withBillingAccountId as d } from "../../../shared/utils/navigation.js";
 import { useInvoice as f, useInvoiceMutations as p } from "../hooks/useInvoices.js";
 import { useState as m } from "react";
-import { useParams as h } from "react-router-dom";
+import { useParams as h } from "react-router";
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 import { useI18n as v } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { EmphasisPanel as y, NextSteps as b, PagePurpose as x, ResponsiveTable as S } from "@burdenoff/fe-libs/ui";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InvoiceDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/billing/pages/InvoiceDetailPage.tsx"],"sourcesContent":["/*\n Billing Module - Invoice Detail Page\n * Displays detailed information about a single invoice\n /\n\nimport { type FC, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport { useInvoice, useInvoiceMutations } from '../hooks/useInvoices';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useGetDefaultBillingAccountDashboardQuery } from '../../../../generated/global-operations';\nimport {\n formatCurrency,\n formatDate,\n formatInvoiceStatus,\n formatInvoiceNumber,\n} from '../../../shared/utils/format';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport { getInvoiceStatusColor, getStatusBadgeClasses } from '../../../shared/utils/status';\nimport type { InvoiceStatus } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n ResponsiveTable,\n type ResponsiveTableColumn,\n PagePurpose,\n EmphasisPanel,\n NextSteps,\n type NextStep,\n} from '@burdenoff/fe-libs/ui';\n\nexport const InvoiceDetailPage: FC = () => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const translated = t(key);\n return translated === key ? fallback : translated;\n };\n const { invoiceId } = useParams<{ invoiceId: string }>();\n const navigateTo = useBillingNavigate();\n const { orgId } = useBilling();\n const permissions = useBillingPermissions();\n const { selectedAccountId } = useBillingAccountSelection({\n orgId,\n syncFromUrl: true,\n urlParamName: 'billingAccountId',\n });\n const { data: defaultBillingAccountData } = useGetDefaultBillingAccountDashboardQuery({\n fetchPolicy: 'cache-first',\n });\n const billingAccountId =\n selectedAccountId ?? defaultBillingAccountData?.getDefaultBillingAccount?.id ?? undefined;\n const { invoice, isLoading, error, refetch } = useInvoice(invoiceId, billingAccountId);\n const { payInvoice, voidInvoice, isPaying, isVoiding } = useInvoiceMutations();\n const defaultPaymentMethodId =\n defaultBillingAccountData?.getDefaultBillingAccount?.defaultPaymentMethod;\n\n // Action error state\n const [actionError, setActionError] = useState<string \| null>(null);\n\n // Handle pay invoice\n const handlePayInvoice = async () => {\n if (!invoice) return;\n if (!defaultPaymentMethodId) {\n setActionError('Add and set a default payment method before paying this invoice.');\n return;\n }\n\n if (!billingAccountId) {\n setActionError('No billing account context');\n return;\n }\n setActionError(null);\n try {\n await payInvoice(invoice.id, defaultPaymentMethodId, billingAccountId);\n await refetch();\n } catch (err) {\n setActionError(err instanceof Error ? err.message : 'Failed to pay invoice');\n }\n };\n\n // Handle void invoice\n const handleVoidInvoice = async () => {\n if (!invoice) return;\n if (!billingAccountId) {\n setActionError('No billing account context');\n return;\n }\n\n setActionError(null);\n try {\n await voidInvoice(invoice.id, billingAccountId);\n await refetch();\n } catch (err) {\n setActionError(err instanceof Error ? err.message : 'Failed to void invoice');\n }\n };\n\n // Permission check\n if (!permissions.canViewInvoices) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-2\">\n <div className=\"size-12 mx-auto rounded-full bg-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) {\n return (\n <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n <div className=\"flex items-center gap-4\">\n <div className=\"size-10 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"space-y-2\">\n <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-32 bg-bg-sunken animate-pulse rounded\" />\n </div>\n </div>\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n <div className=\"lg:col-span-2 space-y-6\">\n <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n <div className=\"h-6 w-32 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-3/4 bg-bg-sunken animate-pulse rounded\" />\n </div>\n <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"flex items-center gap-4\">\n <div className=\"h-4 flex-1 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-16 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-16 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-20 bg-bg-sunken animate-pulse rounded\" />\n </div>\n ))}\n </div>\n </div>\n <div className=\"space-y-6\">\n <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n {[1, 2, 3, 4].map((i) => (\n <div key={i} className=\"space-y-1\">\n <div className=\"h-3 w-20 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-28 bg-bg-sunken animate-pulse rounded\" />\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n // Error state\n if (error \|\| !invoice) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-4\">\n <div className=\"size-12 mx-auto rounded-full bg-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.invoiceNotFound', 'Invoice not found')}\n </h2>\n <p className=\"text-sm text-text-secondary\">\n {error?.message \|\|\n tr(\n 'billing.invoices.invoiceNotFoundMessage',\n 'The invoice you are looking for does not exist.'\n )}\n </p>\n <div className=\"flex items-center justify-center gap-3\">\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n >\n Try Again\n </button>\n <button\n type=\"button\"\n onClick={() => navigateTo(withBillingAccountId('/invoices', billingAccountId))}\n className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n >\n Back to Invoices\n </button>\n </div>\n </div>\n </div>\n );\n }\n\n const statusColor = getInvoiceStatusColor(invoice.status);\n const isOpen = invoice.status === ('OPEN' as InvoiceStatus);\n const isDraft = invoice.status === ('DRAFT' as InvoiceStatus);\n const items = invoice.items \|\| [];\n const amountDue = invoice.total - invoice.amountPaid;\n\n const lineItemColumns: ResponsiveTableColumn<(typeof items)[number]>[] = [\n {\n key: 'description',\n header: 'Description',\n priority: 'primary',\n cell: (item) => item.description,\n },\n {\n key: 'quantity',\n header: 'Qty',\n headerClassName: 'text-right',\n cellClassName: 'text-right',\n cell: (item) => <span className=\"tabular-nums\">{item.quantity}</span>,\n },\n {\n key: 'unitPrice',\n header: 'Unit Price',\n headerClassName: 'text-right',\n cellClassName: 'text-right',\n cell: (item) => (\n <span className=\"tabular-nums\">{formatCurrency(item.unitPrice, invoice.currency)}</span>\n ),\n },\n {\n key: 'amount',\n header: 'Amount',\n headerClassName: 'text-right',\n cellClassName: 'text-right font-medium',\n cell: (item) => (\n <span className=\"tabular-nums\">{formatCurrency(item.amount, invoice.currency)}</span>\n ),\n },\n ];\n\n // Recommended next actions for this invoice\n const nextSteps: NextStep[] = [\n ...(isOpen && permissions.canPayInvoice\n ? [\n {\n id: 'pay',\n label: 'Pay this invoice',\n description: defaultPaymentMethodId\n ? 'Settle the outstanding amount with your default payment method.'\n : 'Add a default payment method first, then pay.',\n onClick: handlePayInvoice,\n },\n ]\n : []),\n ...(invoice.pdfUrl\n ? [\n {\n id: 'download',\n label: 'Download the PDF',\n description: 'Save a copy of this invoice for your records.',\n href: invoice.pdfUrl,\n },\n ]\n : []),\n ...(invoice.subscription\n ? [\n {\n id: 'view-subscription',\n label: 'View the related subscription',\n description: 'See the plan and quotas this invoice billed for.',\n onClick: () =>\n navigateTo(\n withBillingAccountId(`/subscriptions/${invoice.subscription!.id}`, billingAccountId)\n ),\n },\n ]\n : []),\n {\n id: 'request-refund',\n label: 'Have an issue? Request a refund',\n description: 'Raise a refund request for a charge on this account.',\n onClick: () => navigateTo(withBillingAccountId('/refunds', billingAccountId)),\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-start sm:justify-between\">\n <div className=\"flex items-start gap-4\">\n <button\n type=\"button\"\n onClick={() => navigateTo(withBillingAccountId('/invoices', billingAccountId))}\n className=\"p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n >\n <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M15 19l-7-7 7-7\"\n />\n </svg>\n </button>\n <div>\n <div className=\"flex items-center gap-3\">\n <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n Invoice {formatInvoiceNumber(invoice.invoiceNumber)}\n </h1>\n <span\n className={`px-2 py-1 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n >\n {formatInvoiceStatus(invoice.status)}\n </span>\n </div>\n <p className=\"text-sm text-text-secondary mt-1\">\n Created {formatDate(invoice.createdAt, 'short')}\n {invoice.dueDate && ` · Due ${formatDate(invoice.dueDate, 'short')}`}\n </p>\n <PagePurpose className=\"mt-3\">\n {tr(\n 'billing.invoices.detailPurpose',\n 'The full breakdown of a single invoice — its line items, taxes, what has been paid and what is still due. Use it to download the PDF, pay an outstanding balance, jump to the subscription it covers, or raise a refund.'\n )}\n </PagePurpose>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 flex-wrap\">\n {invoice.pdfUrl && (\n <a\n href={invoice.pdfUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n >\n Download PDF\n </a>\n )}\n {invoice.invoiceUrl && (\n <a\n href={invoice.invoiceUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n >\n View on Portal\n </a>\n )}\n {isOpen && permissions.canPayInvoice && (\n <button\n type=\"button\"\n onClick={handlePayInvoice}\n disabled={isPaying \|\| !defaultPaymentMethodId}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors disabled:opacity-50\"\n >\n {!defaultPaymentMethodId\n ? 'Default Payment Method Required'\n : isPaying\n ? 'Processing...'\n : 'Pay Invoice'}\n </button>\n )}\n {(isOpen \|\| isDraft) && permissions.canVoidInvoice && (\n <button\n type=\"button\"\n onClick={handleVoidInvoice}\n disabled={isVoiding}\n className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-status-error-text rounded-button hover:bg-status-error-bg-subtle transition-colors disabled:opacity-50\"\n >\n {isVoiding\n ? tr('billing.invoices.voiding', 'Voiding...')\n : tr('billing.invoices.voidInvoice', 'Void Invoice')}\n </button>\n )}\n </div>\n </div>\n\n {/ Action Error /}\n {actionError && (\n <div className=\"p-3 bg-status-error-bg-subtle border border-status-error-border rounded-button\">\n <p className=\"text-sm text-status-error-text\">{actionError}</p>\n </div>\n )}\n\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ Main Content /}\n <div className=\"lg:col-span-2 space-y-6\">\n {/ Line Items — primary emphasis zone (what was billed & what is due) /}\n <EmphasisPanel className=\"overflow-hidden p-0\">\n <div className=\"p-6 border-b border-border-subtle\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.invoices.lineItems', 'Line Items')} ({items.length})\n </h2>\n </div>\n {items.length === 0 ? (\n <div className=\"p-6\">\n <p className=\"text-sm text-text-secondary\">\n {tr('billing.invoices.noLineItems', 'No line items on this invoice.')}\n </p>\n </div>\n ) : (\n <ResponsiveTable data={items} rowKey={(item) => item.id} columns={lineItemColumns} />\n )}\n\n {/ Totals /}\n <div className=\"border-t border-border-subtle p-4\">\n <div className=\"max-w-xs ml-auto space-y-2\">\n <div className=\"flex items-center justify-between text-sm\">\n <span className=\"text-text-secondary\">\n {tr('billing.invoices.subtotal', 'Subtotal')}\n </span>\n <span className=\"text-text-primary\">\n {formatCurrency(invoice.subtotal, invoice.currency)}\n </span>\n </div>\n <div className=\"flex items-center justify-between text-sm\">\n <span className=\"text-text-secondary\">{tr('billing.invoices.tax', 'Tax')}</span>\n <span className=\"text-text-primary\">\n {formatCurrency(invoice.tax, invoice.currency)}\n </span>\n </div>\n <div className=\"flex items-center justify-between text-sm font-semibold border-t border-border-subtle pt-2\">\n <span className=\"text-text-primary\">{tr('billing.invoices.total', 'Total')}</span>\n <span className=\"text-text-primary\">\n {formatCurrency(invoice.total, invoice.currency)}\n </span>\n </div>\n {invoice.amountPaid > 0 && (\n <div className=\"flex items-center justify-between text-sm\">\n <span className=\"text-text-secondary\">\n {tr('billing.invoices.amountPaid', 'Amount Paid')}\n </span>\n <span className=\"text-status-success-text\">\n -{formatCurrency(invoice.amountPaid, invoice.currency)}\n </span>\n </div>\n )}\n {amountDue > 0 && (\n <div className=\"flex items-center justify-between text-sm font-semibold border-t border-border-subtle pt-2\">\n <span className=\"text-text-primary\">\n {tr('billing.invoices.amountDue', 'Amount Due')}\n </span>\n <span className=\"text-status-warning-text\">\n {formatCurrency(amountDue, invoice.currency)}\n </span>\n </div>\n )}\n </div>\n </div>\n </EmphasisPanel>\n\n {/ Subscription Info /}\n {invoice.subscription && (\n <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.invoices.subscription', 'Subscription')}\n </h2>\n </div>\n <div className=\"p-6 space-y-4\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium text-text-primary\">\n {invoice.subscription.plan?.name \|\| 'Unknown Plan'}\n </p>\n <p className=\"text-sm text-text-secondary mt-0.5\">\n Subscription ID:{' '}\n <span className=\"font-mono text-xs\">{invoice.subscription.id}</span>\n </p>\n </div>\n <button\n type=\"button\"\n onClick={() =>\n navigateTo(\n withBillingAccountId(\n `/subscriptions/${invoice.subscription!.id}`,\n billingAccountId\n )\n )\n }\n className=\"px-3 py-1.5 text-sm font-medium text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n >\n View\n </button>\n </div>\n </div>\n </div>\n )}\n\n {/ Payment Info /}\n {invoice.payment && (\n <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.invoices.payment', 'Payment')}\n </h2>\n </div>\n <div className=\"p-6\">\n <div className=\"grid grid-cols-2 gap-4\">\n <div>\n <p className=\"text-sm text-text-secondary\">Payment ID</p>\n <p className=\"font-mono text-sm text-text-primary mt-0.5 break-all\">\n {invoice.payment.id}\n </p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Amount</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {formatCurrency(invoice.payment.amount, invoice.payment.currency)}\n </p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Status</p>\n <p className=\"text-sm text-text-primary mt-0.5 capitalize\">\n {invoice.payment.status.toLowerCase()}\n </p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Method</p>\n <p className=\"text-sm text-text-primary mt-0.5 capitalize\">\n {invoice.payment.method.toLowerCase().replace(/_/g, ' ')}\n </p>\n </div>\n {invoice.payment.provider && (\n <div>\n <p className=\"text-sm text-text-secondary\">Provider</p>\n <p className=\"text-sm text-text-primary mt-0.5 capitalize\">\n {invoice.payment.provider}\n </p>\n </div>\n )}\n {invoice.payment.paidAt && (\n <div>\n <p className=\"text-sm text-text-secondary\">Paid At</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {formatDate(invoice.payment.paidAt, 'short')}\n </p>\n </div>\n )}\n </div>\n </div>\n </div>\n )}\n </div>\n\n {/ Sidebar /}\n <div className=\"space-y-6\">\n {/ Next steps guidance /}\n <NextSteps storageKey=\"billing-invoice-detail\" steps={nextSteps} />\n\n {/ Invoice Summary /}\n <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.invoices.details', 'Details')}\n </h2>\n </div>\n <div className=\"p-6 space-y-4\">\n <div>\n <p className=\"text-sm text-text-secondary\">Invoice ID</p>\n <p className=\"font-mono text-sm text-text-primary mt-0.5 break-all\">{invoice.id}</p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Invoice Number</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {formatInvoiceNumber(invoice.invoiceNumber)}\n </p>\n </div>\n {invoice.itemDescription && (\n <div>\n <p className=\"text-sm text-text-secondary\">Description</p>\n <p className=\"text-sm text-text-primary mt-0.5\">{invoice.itemDescription}</p>\n </div>\n )}\n <div>\n <p className=\"text-sm text-text-secondary\">Status</p>\n <span\n className={`inline-flex mt-0.5 px-2 py-1 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n >\n {formatInvoiceStatus(invoice.status)}\n </span>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Currency</p>\n <p className=\"text-sm text-text-primary mt-0.5\">{invoice.currency}</p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Total</p>\n <p className=\"text-sm font-semibold text-text-primary mt-0.5\">\n {formatCurrency(invoice.total, invoice.currency)}\n </p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Amount Paid</p>\n <p className=\"text-sm text-status-success-text mt-0.5\">\n {formatCurrency(invoice.amountPaid, invoice.currency)}\n </p>\n </div>\n {amountDue > 0 && (\n <div>\n <p className=\"text-sm text-text-secondary\">Amount Due</p>\n <p className=\"text-sm font-semibold text-status-warning-text mt-0.5\">\n {formatCurrency(amountDue, invoice.currency)}\n </p>\n </div>\n )}\n </div>\n </div>\n\n {/ Dates /}\n <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.invoices.dates', 'Dates')}\n </h2>\n </div>\n <div className=\"p-6 space-y-4\">\n <div>\n <p className=\"text-sm text-text-secondary\">Created</p>\n <p className=\"text-sm text-text-primary mt-0.5\">{formatDate(invoice.createdAt)}</p>\n </div>\n {invoice.dueDate && (\n <div>\n <p className=\"text-sm text-text-secondary\">Due Date</p>\n <p className=\"text-sm text-text-primary mt-0.5\">{formatDate(invoice.dueDate)}</p>\n </div>\n )}\n {invoice.paidAt && (\n <div>\n <p className=\"text-sm text-text-secondary\">Paid At</p>\n <p className=\"text-sm text-text-primary mt-0.5\">{formatDate(invoice.paidAt)}</p>\n </div>\n )}\n <div>\n <p className=\"text-sm text-text-secondary\">Last Updated</p>\n <p className=\"text-sm text-text-primary mt-0.5\">{formatDate(invoice.updatedAt)}</p>\n </div>\n </div>\n </div>\n\n {/ Organization */}\n <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.invoices.organization', 'Organization')}\n </h2>\n </div>\n <div className=\"p-6 space-y-4\">\n <div>\n <p className=\"text-sm text-text-secondary\">Organization ID</p>\n <p className=\"font-mono text-sm text-text-primary mt-0.5 break-all\">\n {invoice.orgId}\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAgCA,IAAa,UAA8B;CACzC,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,EAAE,iBAAc,GAAkC,EAClD,IAAa,GAAoB,EACjC,EAAE,aAAU,GAAY,EACxB,IAAc,GAAuB,EACrC,EAAE,yBAAsB,EAA2B;EACvD;EACA,aAAa;EACb,cAAc;EACf,CAAC,EACI,EAAE,MAAM,MAA8B,EAA0C,EACpF,aAAa,eACd,CAAC,EACI,IACJ,KAAqB,GAA2B,0BAA0B,MAAM,KAAA,GAC5E,EAAE,YAAS,cAAW,UAAO,eAAY,EAAW,GAAW,EAAiB,EAChF,EAAE,eAAY,gBAAa,aAAU,iBAAc,GAAqB,EACxE,IACJ,GAA2B,0BAA0B,sBAGjD,CAAC,GAAa,KAAkB,EAAwB,KAAK,EAG7D,IAAmB,YAAY;AAC9B,SACL;OAAI,CAAC,GAAwB;AAC3B,MAAe,mEAAmE;AAClF;;AAGF,OAAI,CAAC,GAAkB;AACrB,MAAe,6BAA6B;AAC5C;;AAEF,KAAe,KAAK;AACpB,OAAI;AAEF,IADA,MAAM,EAAW,EAAQ,IAAI,GAAwB,EAAiB,EACtE,MAAM,GAAS;YACR,GAAK;AACZ,MAAe,aAAe,QAAQ,EAAI,UAAU,wBAAwB;;;IAK1E,IAAoB,YAAY;AAC/B,SACL;OAAI,CAAC,GAAkB;AACrB,MAAe,6BAA6B;AAC5C;;AAGF,KAAe,KAAK;AACpB,OAAI;AAEF,IADA,MAAM,EAAY,EAAQ,IAAI,EAAiB,EAC/C,MAAM,GAAS;YACR,GAAK;AACZ,MAAe,aAAe,QAAQ,EAAI,UAAU,yBAAyB;;;;AAKjF,KAAI,CAAC,EAAY,gBACf,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,SAAQ;MACR,QAAO;gBAEP,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA;KACF,CAAA;IACN,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,8BAA8B,gBAAgB;KAC/C,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eACV,EAAG,qCAAqC,8CAA8C;KACrF,CAAA;IACA;;EACF,CAAA;AAKV,KAAI,EACF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD,EAAK,WAAU,8CAA+C,CAAA,EAC9D,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,EAC/D,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,CAC3D;MACF;MACN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA;MAC/D,kBAAC,OAAD,EAAK,WAAU,iDAAkD,CAAA;MACjE,kBAAC,OAAD,EAAK,WAAU,gDAAiD,CAAA;MAC5D;QACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,EAC9D;MAAC;MAAG;MAAG;MAAE,CAAC,KAAK,MACd,kBAAC,OAAD;MAAa,WAAU;gBAAvB;OACE,kBAAC,OAAD,EAAK,WAAU,iDAAkD,CAAA;OACjE,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA;OAC/D,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA;OAC/D,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA;OAC3D;QALI,EAKJ,CACN,CACE;OACF;OACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,EAC9D;MAAC;MAAG;MAAG;MAAG;MAAE,CAAC,KAAK,MACjB,kBAAC,OAAD;MAAa,WAAU;gBAAvB,CACE,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,EAC/D,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,CAC3D;QAHI,EAGJ,CACN,CACE;;IACF,CAAA,CACF;KACF;;AAKV,KAAI,KAAS,CAAC,EACZ,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,SAAQ;MACR,QAAO;gBAEP,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA;KACF,CAAA;IACN,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,oCAAoC,oBAAoB;KACzD,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eACV,GAAO,WACN,EACE,2CACA,kDACD;KACD,CAAA;IACJ,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,GAAS;MACxB,WAAU;gBACX;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAW,EAAqB,aAAa,EAAiB,CAAC;MAC9E,WAAU;gBACX;MAEQ,CAAA,CACL;;IACF;;EACF,CAAA;CAIV,IAAM,IAAc,EAAsB,EAAQ,OAAO,EACnD,IAAS,EAAQ,WAAY,QAC7B,IAAU,EAAQ,WAAY,SAC9B,IAAQ,EAAQ,SAAS,EAAE,EAC3B,IAAY,EAAQ,QAAQ,EAAQ,YAEpC,IAAmE;EACvE;GACE,KAAK;GACL,QAAQ;GACR,UAAU;GACV,OAAO,MAAS,EAAK;GACtB;EACD;GACE,KAAK;GACL,QAAQ;GACR,iBAAiB;GACjB,eAAe;GACf,OAAO,MAAS,kBAAC,QAAD;IAAM,WAAU;cAAgB,EAAK;IAAgB,CAAA;GACtE;EACD;GACE,KAAK;GACL,QAAQ;GACR,iBAAiB;GACjB,eAAe;GACf,OAAO,MACL,kBAAC,QAAD;IAAM,WAAU;cAAgB,EAAe,EAAK,WAAW,EAAQ,SAAS;IAAQ,CAAA;GAE3F;EACD;GACE,KAAK;GACL,QAAQ;GACR,iBAAiB;GACjB,eAAe;GACf,OAAO,MACL,kBAAC,QAAD;IAAM,WAAU;cAAgB,EAAe,EAAK,QAAQ,EAAQ,SAAS;IAAQ,CAAA;GAExF;EACF,EAGK,IAAwB;EAC5B,GAAI,KAAU,EAAY,gBACtB,CACE;GACE,IAAI;GACJ,OAAO;GACP,aAAa,IACT,oEACA;GACJ,SAAS;GACV,CACF,GACD,EAAE;EACN,GAAI,EAAQ,SACR,CACE;GACE,IAAI;GACJ,OAAO;GACP,aAAa;GACb,MAAM,EAAQ;GACf,CACF,GACD,EAAE;EACN,GAAI,EAAQ,eACR,CACE;GACE,IAAI;GACJ,OAAO;GACP,aAAa;GACb,eACE,EACE,EAAqB,kBAAkB,EAAQ,aAAc,MAAM,EAAiB,CACrF;GACJ,CACF,GACD,EAAE;EACN;GACE,IAAI;GACJ,OAAO;GACP,aAAa;GACb,eAAe,EAAW,EAAqB,YAAY,EAAiB,CAAC;GAC9E;EACF;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAW,EAAqB,aAAa,EAAiB,CAAC;MAC9E,WAAU;gBAEV,kBAAC,OAAD;OAAK,WAAU;OAAS,MAAK;OAAO,SAAQ;OAAY,QAAO;iBAC7D,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,aAAa;QACb,GAAE;QACF,CAAA;OACE,CAAA;MACC,CAAA,EACT,kBAAC,OAAD,EAAA,UAAA;MACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,MAAD;QAAI,WAAU;kBAAd,CAAoF,YACzE,EAAoB,EAAQ,cAAc,CAChD;WACL,kBAAC,QAAD;QACE,WAAW,yCAAyC,EAAsB,EAAY;kBAErF,EAAoB,EAAQ,OAAO;QAC/B,CAAA,CACH;;MACN,kBAAC,KAAD;OAAG,WAAU;iBAAb;QAAgD;QACrC,EAAW,EAAQ,WAAW,QAAQ;QAC9C,EAAQ,WAAW,UAAU,EAAW,EAAQ,SAAS,QAAQ;QAChE;;MACJ,kBAAC,GAAD;OAAa,WAAU;iBACpB,EACC,kCACA,2NACD;OACW,CAAA;MACV,EAAA,CAAA,CACF;QAEN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,EAAQ,UACP,kBAAC,KAAD;OACE,MAAM,EAAQ;OACd,QAAO;OACP,KAAI;OACJ,WAAU;iBACX;OAEG,CAAA;MAEL,EAAQ,cACP,kBAAC,KAAD;OACE,MAAM,EAAQ;OACd,QAAO;OACP,KAAI;OACJ,WAAU;iBACX;OAEG,CAAA;MAEL,KAAU,EAAY,iBACrB,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,UAAU,KAAY,CAAC;OACvB,WAAU;iBAER,IAEE,IACE,kBACA,gBAHF;OAIG,CAAA;OAET,KAAU,MAAY,EAAY,kBAClC,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,UAAU;OACV,WAAU;iBAET,IACG,EAAG,4BAA4B,aAAa,GAC5C,EAAG,gCAAgC,eAAe;OAC/C,CAAA;MAEP;OACF;;GAGL,KACC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,KAAD;KAAG,WAAU;eAAkC;KAAgB,CAAA;IAC3D,CAAA;GAGR,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEE,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,GAAD;OAAe,WAAU;iBAAzB;QACE,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,MAAD;UAAI,WAAU;oBAAd;WACG,EAAG,8BAA8B,aAAa;WAAC;WAAG,EAAM;WAAO;WAC7D;;SACD,CAAA;QACL,EAAM,WAAW,IAChB,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAG,gCAAgC,iCAAiC;UACnE,CAAA;SACA,CAAA,GAEN,kBAAC,GAAD;SAAiB,MAAM;SAAO,SAAS,MAAS,EAAK;SAAI,SAAS;SAAmB,CAAA;QAIvF,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,OAAD;UAAK,WAAU;oBAAf;WACE,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAG,6BAA6B,WAAW;aACvC,CAAA,EACP,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAe,EAAQ,UAAU,EAAQ,SAAS;aAC9C,CAAA,CACH;;WACN,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,QAAD;aAAM,WAAU;uBAAuB,EAAG,wBAAwB,MAAM;aAAQ,CAAA,EAChF,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAe,EAAQ,KAAK,EAAQ,SAAS;aACzC,CAAA,CACH;;WACN,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,QAAD;aAAM,WAAU;uBAAqB,EAAG,0BAA0B,QAAQ;aAAQ,CAAA,EAClF,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAe,EAAQ,OAAO,EAAQ,SAAS;aAC3C,CAAA,CACH;;WACL,EAAQ,aAAa,KACpB,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAG,+BAA+B,cAAc;aAC5C,CAAA,EACP,kBAAC,QAAD;aAAM,WAAU;uBAAhB,CAA2C,KACvC,EAAe,EAAQ,YAAY,EAAQ,SAAS,CACjD;eACH;;WAEP,IAAY,KACX,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAG,8BAA8B,aAAa;aAC1C,CAAA,EACP,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAe,GAAW,EAAQ,SAAS;aACvC,CAAA,CACH;;WAEJ;;SACF,CAAA;QACQ;;MAGf,EAAQ,gBACP,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,iCAAiC,eAAe;SACjD,CAAA;QACD,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAQ,aAAa,MAAM,QAAQ;UAClC,CAAA,EACJ,kBAAC,KAAD;UAAG,WAAU;oBAAb;WAAkD;WAC/B;WACjB,kBAAC,QAAD;YAAM,WAAU;sBAAqB,EAAQ,aAAa;YAAU,CAAA;WAClE;YACA,EAAA,CAAA,EACN,kBAAC,UAAD;UACE,MAAK;UACL,eACE,EACE,EACE,kBAAkB,EAAQ,aAAc,MACxC,EACD,CACF;UAEH,WAAU;oBACX;UAEQ,CAAA,CACL;;QACF,CAAA,CACF;;MAIP,EAAQ,WACP,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,4BAA4B,UAAU;SACvC,CAAA;QACD,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAA8B;WAAc,CAAA,EACzD,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAQ,QAAQ;WACf,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAA8B;WAAU,CAAA,EACrD,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAe,EAAQ,QAAQ,QAAQ,EAAQ,QAAQ,SAAS;WAC/D,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAA8B;WAAU,CAAA,EACrD,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAQ,QAAQ,OAAO,aAAa;WACnC,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAA8B;WAAU,CAAA,EACrD,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAQ,QAAQ,OAAO,aAAa,CAAC,QAAQ,MAAM,IAAI;WACtD,CAAA,CACA,EAAA,CAAA;UACL,EAAQ,QAAQ,YACf,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAA8B;WAAY,CAAA,EACvD,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAQ,QAAQ;WACf,CAAA,CACA,EAAA,CAAA;UAEP,EAAQ,QAAQ,UACf,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAA8B;WAAW,CAAA,EACtD,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAW,EAAQ,QAAQ,QAAQ,QAAQ;WAC1C,CAAA,CACA,EAAA,CAAA;UAEJ;;QACF,CAAA,CACF;;MAEJ;QAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,GAAD;OAAW,YAAW;OAAyB,OAAO;OAAa,CAAA;MAGnE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,4BAA4B,UAAU;SACvC,CAAA;QACD,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAc,CAAA,EACzD,kBAAC,KAAD;UAAG,WAAU;oBAAwD,EAAQ;UAAO,CAAA,CAChF,EAAA,CAAA;SACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAkB,CAAA,EAC7D,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAoB,EAAQ,cAAc;UACzC,CAAA,CACA,EAAA,CAAA;SACL,EAAQ,mBACP,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAe,CAAA,EAC1D,kBAAC,KAAD;UAAG,WAAU;oBAAoC,EAAQ;UAAoB,CAAA,CACzE,EAAA,CAAA;SAER,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAU,CAAA,EACrD,kBAAC,QAAD;UACE,WAAW,4DAA4D,EAAsB,EAAY;oBAExG,EAAoB,EAAQ,OAAO;UAC/B,CAAA,CACH,EAAA,CAAA;SACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAY,CAAA,EACvD,kBAAC,KAAD;UAAG,WAAU;oBAAoC,EAAQ;UAAa,CAAA,CAClE,EAAA,CAAA;SACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAS,CAAA,EACpD,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAe,EAAQ,OAAO,EAAQ,SAAS;UAC9C,CAAA,CACA,EAAA,CAAA;SACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAe,CAAA,EAC1D,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAe,EAAQ,YAAY,EAAQ,SAAS;UACnD,CAAA,CACA,EAAA,CAAA;SACL,IAAY,KACX,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAc,CAAA,EACzD,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAe,GAAW,EAAQ,SAAS;UAC1C,CAAA,CACA,EAAA,CAAA;SAEJ;UACF;;MAGN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,0BAA0B,QAAQ;SACnC,CAAA;QACD,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAW,CAAA,EACtD,kBAAC,KAAD;UAAG,WAAU;oBAAoC,EAAW,EAAQ,UAAU;UAAK,CAAA,CAC/E,EAAA,CAAA;SACL,EAAQ,WACP,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAY,CAAA,EACvD,kBAAC,KAAD;UAAG,WAAU;oBAAoC,EAAW,EAAQ,QAAQ;UAAK,CAAA,CAC7E,EAAA,CAAA;SAEP,EAAQ,UACP,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAW,CAAA,EACtD,kBAAC,KAAD;UAAG,WAAU;oBAAoC,EAAW,EAAQ,OAAO;UAAK,CAAA,CAC5E,EAAA,CAAA;SAER,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAAgB,CAAA,EAC3D,kBAAC,KAAD;UAAG,WAAU;oBAAoC,EAAW,EAAQ,UAAU;UAAK,CAAA,CAC/E,EAAA,CAAA;SACF;UACF;;MAGN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,iCAAiC,eAAe;SACjD,CAAA;QACD,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAA8B;SAAmB,CAAA,EAC9D,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAQ;SACP,CAAA,CACA,EAAA,CAAA;QACF,CAAA,CACF;;MACF;OACF;;GACF"}
1	+ {"version":3,"file":"InvoiceDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/billing/pages/InvoiceDetailPage.tsx"],"sourcesContent":["/*\n Billing Module - Invoice Detail Page\n * Displays detailed information about a single invoice\n /\n\nimport { type FC, useState } from 'react';\nimport { useParams } from 'react-router';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport { useInvoice, useInvoiceMutations } from '../hooks/useInvoices';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useGetDefaultBillingAccountDashboardQuery } from '../../../../generated/global-operations';\nimport {\n formatCurrency,\n formatDate,\n formatInvoiceStatus,\n formatInvoiceNumber,\n} from '../../../shared/utils/format';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport { getInvoiceStatusColor, getStatusBadgeClasses } from '../../../shared/utils/status';\nimport type { InvoiceStatus } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n ResponsiveTable,\n type ResponsiveTableColumn,\n PagePurpose,\n EmphasisPanel,\n NextSteps,\n type NextStep,\n} from '@burdenoff/fe-libs/ui';\n\nexport const InvoiceDetailPage: FC = () => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const translated = t(key);\n return translated === key ? fallback : translated;\n };\n const { invoiceId } = useParams<{ invoiceId: string }>();\n const navigateTo = useBillingNavigate();\n const { orgId } = useBilling();\n const permissions = useBillingPermissions();\n const { selectedAccountId } = useBillingAccountSelection({\n orgId,\n syncFromUrl: true,\n urlParamName: 'billingAccountId',\n });\n const { data: defaultBillingAccountData } = useGetDefaultBillingAccountDashboardQuery({\n fetchPolicy: 'cache-first',\n });\n const billingAccountId =\n selectedAccountId ?? defaultBillingAccountData?.getDefaultBillingAccount?.id ?? undefined;\n const { invoice, isLoading, error, refetch } = useInvoice(invoiceId, billingAccountId);\n const { payInvoice, voidInvoice, isPaying, isVoiding } = useInvoiceMutations();\n const defaultPaymentMethodId =\n defaultBillingAccountData?.getDefaultBillingAccount?.defaultPaymentMethod;\n\n // Action error state\n const [actionError, setActionError] = useState<string \| null>(null);\n\n // Handle pay invoice\n const handlePayInvoice = async () => {\n if (!invoice) return;\n if (!defaultPaymentMethodId) {\n setActionError('Add and set a default payment method before paying this invoice.');\n return;\n }\n\n if (!billingAccountId) {\n setActionError('No billing account context');\n return;\n }\n setActionError(null);\n try {\n await payInvoice(invoice.id, defaultPaymentMethodId, billingAccountId);\n await refetch();\n } catch (err) {\n setActionError(err instanceof Error ? err.message : 'Failed to pay invoice');\n }\n };\n\n // Handle void invoice\n const handleVoidInvoice = async () => {\n if (!invoice) return;\n if (!billingAccountId) {\n setActionError('No billing account context');\n return;\n }\n\n setActionError(null);\n try {\n await voidInvoice(invoice.id, billingAccountId);\n await refetch();\n } catch (err) {\n setActionError(err instanceof Error ? err.message : 'Failed to void invoice');\n }\n };\n\n // Permission check\n if (!permissions.canViewInvoices) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-2\">\n <div className=\"size-12 mx-auto rounded-full bg-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) {\n return (\n <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n <div className=\"flex items-center gap-4\">\n <div className=\"size-10 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"space-y-2\">\n <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-32 bg-bg-sunken animate-pulse rounded\" />\n </div>\n </div>\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n <div className=\"lg:col-span-2 space-y-6\">\n <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n <div className=\"h-6 w-32 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-3/4 bg-bg-sunken animate-pulse rounded\" />\n </div>\n <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"flex items-center gap-4\">\n <div className=\"h-4 flex-1 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-16 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-16 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-20 bg-bg-sunken animate-pulse rounded\" />\n </div>\n ))}\n </div>\n </div>\n <div className=\"space-y-6\">\n <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n {[1, 2, 3, 4].map((i) => (\n <div key={i} className=\"space-y-1\">\n <div className=\"h-3 w-20 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"h-4 w-28 bg-bg-sunken animate-pulse rounded\" />\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n // Error state\n if (error \|\| !invoice) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-4\">\n <div className=\"size-12 mx-auto rounded-full bg-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.invoiceNotFound', 'Invoice not found')}\n </h2>\n <p className=\"text-sm text-text-secondary\">\n {error?.message \|\|\n tr(\n 'billing.invoices.invoiceNotFoundMessage',\n 'The invoice you are looking for does not exist.'\n )}\n </p>\n <div className=\"flex items-center justify-center gap-3\">\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n >\n Try Again\n </button>\n <button\n type=\"button\"\n onClick={() => navigateTo(withBillingAccountId('/invoices', billingAccountId))}\n className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n >\n Back to Invoices\n </button>\n </div>\n </div>\n </div>\n );\n }\n\n const statusColor = getInvoiceStatusColor(invoice.status);\n const isOpen = invoice.status === ('OPEN' as InvoiceStatus);\n const isDraft = invoice.status === ('DRAFT' as InvoiceStatus);\n const items = invoice.items \|\| [];\n const amountDue = invoice.total - invoice.amountPaid;\n\n const lineItemColumns: ResponsiveTableColumn<(typeof items)[number]>[] = [\n {\n key: 'description',\n header: 'Description',\n priority: 'primary',\n cell: (item) => item.description,\n },\n {\n key: 'quantity',\n header: 'Qty',\n headerClassName: 'text-right',\n cellClassName: 'text-right',\n cell: (item) => <span className=\"tabular-nums\">{item.quantity}</span>,\n },\n {\n key: 'unitPrice',\n header: 'Unit Price',\n headerClassName: 'text-right',\n cellClassName: 'text-right',\n cell: (item) => (\n <span className=\"tabular-nums\">{formatCurrency(item.unitPrice, invoice.currency)}</span>\n ),\n },\n {\n key: 'amount',\n header: 'Amount',\n headerClassName: 'text-right',\n cellClassName: 'text-right font-medium',\n cell: (item) => (\n <span className=\"tabular-nums\">{formatCurrency(item.amount, invoice.currency)}</span>\n ),\n },\n ];\n\n // Recommended next actions for this invoice\n const nextSteps: NextStep[] = [\n ...(isOpen && permissions.canPayInvoice\n ? [\n {\n id: 'pay',\n label: 'Pay this invoice',\n description: defaultPaymentMethodId\n ? 'Settle the outstanding amount with your default payment method.'\n : 'Add a default payment method first, then pay.',\n onClick: handlePayInvoice,\n },\n ]\n : []),\n ...(invoice.pdfUrl\n ? [\n {\n id: 'download',\n label: 'Download the PDF',\n description: 'Save a copy of this invoice for your records.',\n href: invoice.pdfUrl,\n },\n ]\n : []),\n ...(invoice.subscription\n ? [\n {\n id: 'view-subscription',\n label: 'View the related subscription',\n description: 'See the plan and quotas this invoice billed for.',\n onClick: () =>\n navigateTo(\n withBillingAccountId(`/subscriptions/${invoice.subscription!.id}`, billingAccountId)\n ),\n },\n ]\n : []),\n {\n id: 'request-refund',\n label: 'Have an issue? Request a refund',\n description: 'Raise a refund request for a charge on this account.',\n onClick: () => navigateTo(withBillingAccountId('/refunds', billingAccountId)),\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-start sm:justify-between\">\n <div className=\"flex items-start gap-4\">\n <button\n type=\"button\"\n onClick={() => navigateTo(withBillingAccountId('/invoices', billingAccountId))}\n className=\"p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n >\n <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M15 19l-7-7 7-7\"\n />\n </svg>\n </button>\n <div>\n <div className=\"flex items-center gap-3\">\n <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n Invoice {formatInvoiceNumber(invoice.invoiceNumber)}\n </h1>\n <span\n className={`px-2 py-1 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n >\n {formatInvoiceStatus(invoice.status)}\n </span>\n </div>\n <p className=\"text-sm text-text-secondary mt-1\">\n Created {formatDate(invoice.createdAt, 'short')}\n {invoice.dueDate && ` · Due ${formatDate(invoice.dueDate, 'short')}`}\n </p>\n <PagePurpose className=\"mt-3\">\n {tr(\n 'billing.invoices.detailPurpose',\n 'The full breakdown of a single invoice — its line items, taxes, what has been paid and what is still due. Use it to download the PDF, pay an outstanding balance, jump to the subscription it covers, or raise a refund.'\n )}\n </PagePurpose>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 flex-wrap\">\n {invoice.pdfUrl && (\n <a\n href={invoice.pdfUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n >\n Download PDF\n </a>\n )}\n {invoice.invoiceUrl && (\n <a\n href={invoice.invoiceUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n >\n View on Portal\n </a>\n )}\n {isOpen && permissions.canPayInvoice && (\n <button\n type=\"button\"\n onClick={handlePayInvoice}\n disabled={isPaying \|\| !defaultPaymentMethodId}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors disabled:opacity-50\"\n >\n {!defaultPaymentMethodId\n ? 'Default Payment Method Required'\n : isPaying\n ? 'Processing...'\n : 'Pay Invoice'}\n </button>\n )}\n {(isOpen \|\| isDraft) && permissions.canVoidInvoice && (\n <button\n type=\"button\"\n onClick={handleVoidInvoice}\n disabled={isVoiding}\n className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-status-error-text rounded-button hover:bg-status-error-bg-subtle transition-colors disabled:opacity-50\"\n >\n {isVoiding\n ? tr('billing.invoices.voiding', 'Voiding...')\n : tr('billing.invoices.voidInvoice', 'Void Invoice')}\n </button>\n )}\n </div>\n </div>\n\n {/ Action Error /}\n {actionError && (\n <div className=\"p-3 bg-status-error-bg-subtle border border-status-error-border rounded-button\">\n <p className=\"text-sm text-status-error-text\">{actionError}</p>\n </div>\n )}\n\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ Main Content /}\n <div className=\"lg:col-span-2 space-y-6\">\n {/ Line Items — primary emphasis zone (what was billed & what is due) /}\n <EmphasisPanel className=\"overflow-hidden p-0\">\n <div className=\"p-6 border-b border-border-subtle\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.invoices.lineItems', 'Line Items')} ({items.length})\n </h2>\n </div>\n {items.length === 0 ? (\n <div className=\"p-6\">\n <p className=\"text-sm text-text-secondary\">\n {tr('billing.invoices.noLineItems', 'No line items on this invoice.')}\n </p>\n </div>\n ) : (\n <ResponsiveTable data={items} rowKey={(item) => item.id} columns={lineItemColumns} />\n )}\n\n {/ Totals /}\n <div className=\"border-t border-border-subtle p-4\">\n <div className=\"max-w-xs ml-auto space-y-2\">\n <div className=\"flex items-center justify-between text-sm\">\n <span className=\"text-text-secondary\">\n {tr('billing.invoices.subtotal', 'Subtotal')}\n </span>\n <span className=\"text-text-primary\">\n {formatCurrency(invoice.subtotal, invoice.currency)}\n </span>\n </div>\n <div className=\"flex items-center justify-between text-sm\">\n <span className=\"text-text-secondary\">{tr('billing.invoices.tax', 'Tax')}</span>\n <span className=\"text-text-primary\">\n {formatCurrency(invoice.tax, invoice.currency)}\n </span>\n </div>\n <div className=\"flex items-center justify-between text-sm font-semibold border-t border-border-subtle pt-2\">\n <span className=\"text-text-primary\">{tr('billing.invoices.total', 'Total')}</span>\n <span className=\"text-text-primary\">\n {formatCurrency(invoice.total, invoice.currency)}\n </span>\n </div>\n {invoice.amountPaid > 0 && (\n <div className=\"flex items-center justify-between text-sm\">\n <span className=\"text-text-secondary\">\n {tr('billing.invoices.amountPaid', 'Amount Paid')}\n </span>\n <span className=\"text-status-success-text\">\n -{formatCurrency(invoice.amountPaid, invoice.currency)}\n </span>\n </div>\n )}\n {amountDue > 0 && (\n <div className=\"flex items-center justify-between text-sm font-semibold border-t border-border-subtle pt-2\">\n <span className=\"text-text-primary\">\n {tr('billing.invoices.amountDue', 'Amount Due')}\n </span>\n <span className=\"text-status-warning-text\">\n {formatCurrency(amountDue, invoice.currency)}\n </span>\n </div>\n )}\n </div>\n </div>\n </EmphasisPanel>\n\n {/ Subscription Info /}\n {invoice.subscription && (\n <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.invoices.subscription', 'Subscription')}\n </h2>\n </div>\n <div className=\"p-6 space-y-4\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium text-text-primary\">\n {invoice.subscription.plan?.name \|\| 'Unknown Plan'}\n </p>\n <p className=\"text-sm text-text-secondary mt-0.5\">\n Subscription ID:{' '}\n <span className=\"font-mono text-xs\">{invoice.subscription.id}</span>\n </p>\n </div>\n <button\n type=\"button\"\n onClick={() =>\n navigateTo(\n withBillingAccountId(\n `/subscriptions/${invoice.subscription!.id}`,\n billingAccountId\n )\n )\n }\n className=\"px-3 py-1.5 text-sm font-medium text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n >\n View\n </button>\n </div>\n </div>\n </div>\n )}\n\n {/ Payment Info /}\n {invoice.payment && (\n <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.invoices.payment', 'Payment')}\n </h2>\n </div>\n <div className=\"p-6\">\n <div className=\"grid grid-cols-2 gap-4\">\n <div>\n <p className=\"text-sm text-text-secondary\">Payment ID</p>\n <p className=\"font-mono text-sm text-text-primary mt-0.5 break-all\">\n {invoice.payment.id}\n </p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Amount</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {formatCurrency(invoice.payment.amount, invoice.payment.currency)}\n </p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Status</p>\n <p className=\"text-sm text-text-primary mt-0.5 capitalize\">\n {invoice.payment.status.toLowerCase()}\n </p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Method</p>\n <p className=\"text-sm text-text-primary mt-0.5 capitalize\">\n {invoice.payment.method.toLowerCase().replace(/_/g, ' ')}\n </p>\n </div>\n {invoice.payment.provider && (\n <div>\n <p className=\"text-sm text-text-secondary\">Provider</p>\n <p className=\"text-sm text-text-primary mt-0.5 capitalize\">\n {invoice.payment.provider}\n </p>\n </div>\n )}\n {invoice.payment.paidAt && (\n <div>\n <p className=\"text-sm text-text-secondary\">Paid At</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {formatDate(invoice.payment.paidAt, 'short')}\n </p>\n </div>\n )}\n </div>\n </div>\n </div>\n )}\n </div>\n\n {/ Sidebar /}\n <div className=\"space-y-6\">\n {/ Next steps guidance /}\n <NextSteps storageKey=\"billing-invoice-detail\" steps={nextSteps} />\n\n {/ Invoice Summary /}\n <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.invoices.details', 'Details')}\n </h2>\n </div>\n <div className=\"p-6 space-y-4\">\n <div>\n <p className=\"text-sm text-text-secondary\">Invoice ID</p>\n <p className=\"font-mono text-sm text-text-primary mt-0.5 break-all\">{invoice.id}</p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Invoice Number</p>\n <p className=\"text-sm text-text-primary mt-0.5\">\n {formatInvoiceNumber(invoice.invoiceNumber)}\n </p>\n </div>\n {invoice.itemDescription && (\n <div>\n <p className=\"text-sm text-text-secondary\">Description</p>\n <p className=\"text-sm text-text-primary mt-0.5\">{invoice.itemDescription}</p>\n </div>\n )}\n <div>\n <p className=\"text-sm text-text-secondary\">Status</p>\n <span\n className={`inline-flex mt-0.5 px-2 py-1 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n >\n {formatInvoiceStatus(invoice.status)}\n </span>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Currency</p>\n <p className=\"text-sm text-text-primary mt-0.5\">{invoice.currency}</p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Total</p>\n <p className=\"text-sm font-semibold text-text-primary mt-0.5\">\n {formatCurrency(invoice.total, invoice.currency)}\n </p>\n </div>\n <div>\n <p className=\"text-sm text-text-secondary\">Amount Paid</p>\n <p className=\"text-sm text-status-success-text mt-0.5\">\n {formatCurrency(invoice.amountPaid, invoice.currency)}\n </p>\n </div>\n {amountDue > 0 && (\n <div>\n <p className=\"text-sm text-text-secondary\">Amount Due</p>\n <p className=\"text-sm font-semibold text-status-warning-text mt-0.5\">\n {formatCurrency(amountDue, invoice.currency)}\n </p>\n </div>\n )}\n </div>\n </div>\n\n {/ Dates /}\n <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.invoices.dates', 'Dates')}\n </h2>\n </div>\n <div className=\"p-6 space-y-4\">\n <div>\n <p className=\"text-sm text-text-secondary\">Created</p>\n <p className=\"text-sm text-text-primary mt-0.5\">{formatDate(invoice.createdAt)}</p>\n </div>\n {invoice.dueDate && (\n <div>\n <p className=\"text-sm text-text-secondary\">Due Date</p>\n <p className=\"text-sm text-text-primary mt-0.5\">{formatDate(invoice.dueDate)}</p>\n </div>\n )}\n {invoice.paidAt && (\n <div>\n <p className=\"text-sm text-text-secondary\">Paid At</p>\n <p className=\"text-sm text-text-primary mt-0.5\">{formatDate(invoice.paidAt)}</p>\n </div>\n )}\n <div>\n <p className=\"text-sm text-text-secondary\">Last Updated</p>\n <p className=\"text-sm text-text-primary mt-0.5\">{formatDate(invoice.updatedAt)}</p>\n </div>\n </div>\n </div>\n\n {/ Organization */}\n <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n <h2 className=\"text-lg font-semibold text-text-primary\">\n {tr('billing.invoices.organization', 'Organization')}\n </h2>\n </div>\n <div className=\"p-6 space-y-4\">\n <div>\n <p className=\"text-sm text-text-secondary\">Organization ID</p>\n <p className=\"font-mono text-sm text-text-primary mt-0.5 break-all\">\n {invoice.orgId}\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n};\n"],"mappings":"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"}

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

@@ -9,7 +9,7 @@ import { withBillingAccountId as l } from "../../../shared/utils/navigation.js";
 import { usePaginatedInvoices as u } from "../hooks/useInvoices.js";
 import { useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
 import { RotateCcw as h } from "lucide-react";
-import { useSearchParams as g } from "react-router-dom";
+import { useSearchParams as g } from "react-router";
 import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
 import { useI18n as b } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { IllustratedEmptyState as x, PagePurpose as S } from "@burdenoff/fe-libs/ui";

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":";;;;;;;;;;;;;;;;AAgCA,IAAa,UAA6B;CACxC,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,IAAa,GAAoB,EACjC,IAAc,GAAuB,EACrC,CAAC,KAAgB,GAAiB,EAClC,IAAsB,EAAa,IAAI,mBAAmB,IAAI,KAAA,GAE9D,EAAE,MAAM,MAAiB,EAAgC,EAAE,aAAa,eAAe,CAAC,EACxF,IAAkB,GAAc,2BAA2B,EAAE,EAK7D,CAAC,GAAmB,KAAwB,EAChD,EACD;AAED,SAAgB;AACd,IAAqB,EAAoB;IACxC,CAAC,EAAoB,CAAC;CAEzB,IAAM,IAAmB,SAEpB,EAAgB,MAAM,MAA0B,EAAE,UAAU,IAAI,EAAgB,KAAK,MACtF,KAAA,GACF,CAAC,EAAgB,CAClB,EAGK,IACJ,MAAsB,KAAA,IAAiC,KAAoB,OAAzC,GAE9B,CAAC,GAAc,KAAmB,EAAuB,MAAM,EAC/D,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAiB,KAAsB,EAAS,GAAG,EACpD,CAAC,GAAM,KAAW,EAAS,EAAE,EAC7B,IAAgB,EAA6C,KAAK;AAExE,UACM,EAAc,WAAS,aAAa,EAAc,QAAQ,EAC9D,EAAc,UAAU,iBAAiB;AAEvC,EADA,EAAmB,EAAY,EAC/B,EAAQ,EAAE;IACT,IAAI,QACM;AACX,EAAI,EAAc,WAAS,aAAa,EAAc,QAAQ;KAE/D,CAAC,EAAY,CAAC;CAEjB,IAAM,EAAE,aAAU,eAAY,cAAW,UAAO,eAAY,EAAqB;EAC/E,kBAAkB,KAAqB,KAAA;EACvC,QAAQ,MAAiB,QAA0C,KAAA,IAAjC;EAClC,QAAQ,KAAmB,KAAA;EAC3B;EACA,UAAU;EACX,CAAC;AA2FF,QAxFK,EAAY,kBA+Bb,KAAa,EAAS,WAAW,IAEjC,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,EAC/D,kBAAC,OAAD;GAAK,WAAU;aACZ;IAAC;IAAG;IAAG;IAAG;IAAG;IAAE,CAAC,KAAK,MACpB,kBAAC,OAAD;IAAa,WAAU;cACrB,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD,EAAK,WAAU,8CAA+C,CAAA,EAC9D,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,EAC/D,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,CAC3D;QACF;;IACF,EARI,EAQJ,CACN;GACE,CAAA,CACF;MAKN,IAEA,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,SAAQ;MACR,QAAO;gBAEP,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA;KACF,CAAA;IACN,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,iCAAiC,0BAA0B;KAC5D,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eAA+B,EAAM;KAAY,CAAA;IAC9D,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,GAAS;KACxB,WAAU;eACX;KAEQ,CAAA;IACL;;EACF,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA;KACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,0BAA0B,WAAW;MACtC,CAAA;KACL,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAG,6BAA6B,wCAAwC;MACvE,CAAA;KACJ,kBAAC,GAAD;MAAa,WAAU;gBACpB,EACC,4BACA,qMACD;MACW,CAAA;KACV,EAAA,CAAA,EACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAW,WAAW;MACrC,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA,EAC/B,EAAG,8BAA8B,aAAa,CACxC;SACR,EAAgB,SAAS,KACxB,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,SAAD;OAAO,WAAU;iBAAgD;OAEzD,CAAA,EACR,kBAAC,UAAD;OACE,OAAO,KAAqB;OAC5B,WAAW,MAAM,EAAqB,EAAE,OAAO,SAAS,KAAK;OAC7D,WAAU;iBAHZ,CAKE,kBAAC,UAAD;QAAQ,OAAM;kBAAG;QAAqB,CAAA,EACrC,EAAgB,KAAK,MACpB,kBAAC,UAAD;QAA+B,OAAO,EAAQ,MAAM;kBAApD,CACG,EAAQ,QAAQ,EAAQ,SAAS,EAAQ,IACzC,EAAQ,YAAY,eAAe,GAC7B;UAHI,EAAQ,MAAM,GAGlB,CACT,CACK;SACL;QAEJ;OACF;;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEE,kBAAC,OAAD;KAAK,WAAU;eACX;MAAC;MAAO;MAAQ;MAAQ;MAAS;MAAO,CAAoB,KAAK,MACjE,kBAAC,UAAD;MACE,MAAK;MAEL,eAAe;AAEb,OADA,EAAgB,EAAO,EACvB,EAAQ,EAAE;;MAEZ,WAAW,oEACT,MAAiB,IACb,8CACA;gBAGL,MAAW,QAAQ,QAAQ,EAAoB,EAAwB;MACjE,EAZF,EAYE,CACT;KACE,CAAA,EAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,SAAQ;MACR,QAAO;gBAEP,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA,EACN,kBAAC,SAAD;MACE,MAAK;MACL,aAAa,EAAG,sCAAsC,8BAA8B;MACpF,OAAO;MACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;MAC/C,WAAU;MACV,CAAA,CACE;OACF;;GAGL,CAAC,KAAa,EAAS,WAAW,IACjC,kBAAC,GAAD;IACE,cAAc,MAAiB,SAAS,IAAkB,iBAAiB;IAC3E,OAAO,EAAG,oCAAoC,oBAAoB;IAClE,aACE,MAAiB,SAAS,IACtB,EAAG,uCAAuC,kCAAkC,GAC5E,EAAG,kCAAkC,mCAAmC;IAE9E,CAAA,GAEF,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,SAAD;KAAO,WAAU;eAAjB,CACE,kBAAC,SAAD;MAAO,WAAU;gBACf,kBAAC,MAAD,EAAA,UAAA;OACE,kBAAC,MAAD;QAAI,WAAU;kBAAkF;QAE3F,CAAA;OACL,kBAAC,MAAD;QAAI,WAAU;kBAAkF;QAE3F,CAAA;OACJ,CAAC,KAAqB,EAAgB,SAAS,KAC9C,kBAAC,MAAD;QAAI,WAAU;kBAAuG;QAEhH,CAAA;OAEP,kBAAC,MAAD;QAAI,WAAU;kBAAuG;QAEhH,CAAA;OACL,kBAAC,MAAD;QAAI,WAAU;kBAAuG;QAEhH,CAAA;OACL,kBAAC,MAAD;QAAI,WAAU;kBAAmF;QAE5F,CAAA;OACL,kBAAC,MAAD;QAAI,WAAU;kBAAmF;QAE5F,CAAA;OACF,EAAA,CAAA;MACC,CAAA,EACR,kBAAC,SAAD;MAAO,WAAU;gBACd,EAAS,KAAK,MACb,kBAAC,GAAD;OAEW;OACT,cACE,EACE,EAAqB,aAAa,EAAQ,MAAM,EAAQ,iBAAiB,CAC1E;OAEH,QAAQ,EAAY;OACpB,SAAS,EAAY;OACrB,aAAa,CAAC,KAAqB,EAAgB,SAAS;OAC5D,aACE,EAAgB,MACb,MAA0B,EAAE,OAAO,EAAQ,iBAC7C,EAAE,QAAQ;OAEb,EAfK,EAAQ,GAeb,CACF;MACI,CAAA,CACF;;IACJ,CAAA,EAEL,IAAa,KACZ,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD;KAAG,WAAU;eAAb;MAA2C;MACnC;MAAK;MAAK;MACd;QACJ,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,GAAS,MAAM,KAAK,IAAI,GAAG,IAAI,EAAE,CAAC;MACjD,UAAU,KAAQ;MAClB,WAAU;gBACX;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,GAAS,MAAM,KAAK,IAAI,GAAY,IAAI,EAAE,CAAC;MAC1D,UAAU,KAAQ;MAClB,WAAU;gBACX;MAEQ,CAAA,CACL;OACF;MAEP,EAAA,CAAA;GAED;MArRJ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,SAAQ;MACR,QAAO;gBAEP,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA;KACF,CAAA;IACN,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,8BAA8B,gBAAgB;KAC/C,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eACV,EAAG,qCAAqC,8CAA8C;KACrF,CAAA;IACA;;EACF,CAAA;GA8QN,KAAmC,EACvC,YACA,WACA,WACA,YACA,iBAAc,IACd,qBACI;CACJ,IAAM,IAAc,EAAsB,EAAQ,OAAO,EACnD,IAAS,EAAQ,WAAY,QAC7B,IAAU,EAAQ,WAAY;AAEpC,QACE,kBAAC,MAAD;EAAI,WAAU;YAAd;GACE,kBAAC,MAAD;IAAI,WAAU;cAAd,CACG,EAAQ,aACP,kBAAC,KAAD;KACE,MAAM,EAAQ;KACd,QAAO;KACP,KAAI;KACJ,WAAU;eAET,EAAoB,EAAQ,cAAc;KACzC,CAAA,GAEJ,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;eAET,EAAoB,EAAQ,cAAc;KACpC,CAAA,GAET,EAAQ,mBAAmB,EAAQ,cAAc,MAAM,SACvD,kBAAC,KAAD;KAAG,WAAU;eACV,EAAQ,mBAAmB,EAAQ,cAAc,MAAM;KACtD,CAAA,CAEH;;GACL,kBAAC,MAAD;IAAI,WAAU;cACZ,kBAAC,GAAD;KAAY,QAAQ;KAAa,KAAA;eAC9B,EAAoB,EAAQ,OAAO;KACzB,CAAA;IACV,CAAA;GACJ,KACC,kBAAC,MAAD;IAAI,WAAU;cACX,IACC,kBAAC,QAAD;KAAM,WAAU;eACb;KACI,CAAA,GAEP,kBAAC,QAAD;KAAM,WAAU;eAA8B;KAAS,CAAA;IAEtD,CAAA;GAEP,kBAAC,MAAD;IAAI,WAAU;cACX,EAAW,EAAQ,WAAW,QAAQ;IACpC,CAAA;GACL,kBAAC,MAAD;IAAI,WAAU;cACX,EAAQ,UAAU,EAAW,EAAQ,SAAS,QAAQ,GAAG;IACvD,CAAA;GACL,kBAAC,MAAD;IAAI,WAAU;cACX,EAAe,EAAQ,OAAO,EAAQ,SAAS;IAC7C,CAAA;GACL,kBAAC,MAAD;IAAI,WAAU;cACZ,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,EAAQ,aACP,kBAAC,KAAD;OACE,MAAM,EAAQ;OACd,QAAO;OACP,KAAI;OACJ,WAAU;iBACX;OAEG,CAAA,GAEJ,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,WAAU;iBACX;OAEQ,CAAA;MAEV,EAAQ,UACP,kBAAC,KAAD;OACE,MAAM,EAAQ;OACd,QAAO;OACP,KAAI;OACJ,WAAU;iBACX;OAEG,CAAA;MAEL,KAAU,KACT,kBAAC,UAAD;OACE,MAAK;OACL,WAAU;iBACX;OAEQ,CAAA;OAET,KAAU,MAAY,KACtB,kBAAC,UAAD;OACE,MAAK;OACL,WAAU;iBACX;OAEQ,CAAA;MAEP;;IACH,CAAA;GACF"}

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";