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 && (
+
+
+