diff --git a/resources/js/components/transactions/import-step-preview.tsx b/resources/js/components/transactions/import-step-preview.tsx index 2c1186a3..5cf99e2a 100644 --- a/resources/js/components/transactions/import-step-preview.tsx +++ b/resources/js/components/transactions/import-step-preview.tsx @@ -1,7 +1,13 @@ +import { EncryptedTransactionDescription } from '@/components/transactions/encrypted-transaction-description'; import { AmountDisplay } from '@/components/ui/amount-display'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from '@/components/ui/collapsible'; import { Table, TableBody, @@ -10,12 +16,19 @@ import { TableHeader, TableRow, } from '@/components/ui/table'; +import { useEncryptionKey } from '@/contexts/encryption-key-context'; +import { + transactionSyncService, + type Transaction, +} from '@/services/transaction-sync'; import { type ParsedTransaction } from '@/types/import'; -import { useMemo } from 'react'; +import { ChevronDown } from 'lucide-react'; +import { useEffect, useMemo, useState } from 'react'; interface ImportStepPreviewProps { transactions: ParsedTransaction[]; currencyCode: string; + accountId: string; onConfirm: () => void; onBack: () => void; onSelectionChange: (index: number, selected: boolean) => void; @@ -26,12 +39,32 @@ interface ImportStepPreviewProps { export function ImportStepPreview({ transactions, currencyCode, + accountId, onConfirm, onBack, onSelectionChange, onSelectAll, isImporting, }: ImportStepPreviewProps) { + const { isKeySet } = useEncryptionKey(); + const [existingTransactions, setExistingTransactions] = useState< + Transaction[] + >([]); + const [isExistingOpen, setIsExistingOpen] = useState(false); + + useEffect(() => { + if (accountId && isKeySet) { + transactionSyncService.getByAccountId(accountId).then((txns) => { + const sorted = txns.sort( + (a, b) => + new Date(b.transaction_date).getTime() - + new Date(a.transaction_date).getTime(), + ); + setExistingTransactions(sorted.slice(0, 10)); + }); + } + }, [accountId, isKeySet]); + const stats = useMemo(() => { const selectableTransactions = transactions.filter( (t) => !t.isDuplicate, @@ -192,6 +225,79 @@ export function ImportStepPreview({ + {existingTransactions.length > 0 && ( + + + + + +
+ + + + Date + Description + + Amount + + + + + {existingTransactions.map((tx) => ( + + + {formatDate( + tx.transaction_date, + )} + + + + + + + + + ))} + +
+
+
+
+ )} +