783 lines
32 KiB
JavaScript
783 lines
32 KiB
JavaScript
import React, { useState, useEffect, useMemo } from 'react';
|
|
import { toast } from 'sonner';
|
|
import {
|
|
Sparkles, CheckCircle2, Loader2, RefreshCw, Link2, Link2Off,
|
|
XCircle, Eye, EyeOff, Search, Plus,
|
|
} from 'lucide-react';
|
|
import { api } from '@/api';
|
|
import { cn } from '@/lib/utils';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import {
|
|
Dialog, DialogContent, DialogDescription, DialogFooter,
|
|
DialogHeader, DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import { SectionCard } from './dataShared';
|
|
import BillModal from '@/components/BillModal';
|
|
|
|
const TRANSACTION_FILTERS = [
|
|
{ id: 'open', label: 'Open', params: { ignored: 'false' } },
|
|
{ id: 'unmatched', label: 'Unmatched', params: { match_status: 'unmatched', ignored: 'false' } },
|
|
{ id: 'matched', label: 'Matched', params: { match_status: 'matched', ignored: 'false' } },
|
|
{ id: 'ignored', label: 'Ignored', params: { match_status: 'ignored', ignored: 'true' } },
|
|
{ id: 'all', label: 'All', params: { ignored: 'all' } },
|
|
];
|
|
|
|
function transactionStatus(tx) {
|
|
if (tx?.ignored) return 'ignored';
|
|
return tx?.match_status || 'unmatched';
|
|
}
|
|
|
|
function TransactionStatusBadge({ tx }) {
|
|
const status = transactionStatus(tx);
|
|
const styles = {
|
|
matched: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600',
|
|
ignored: 'border-muted-foreground/30 bg-muted/40 text-muted-foreground',
|
|
unmatched: 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400',
|
|
};
|
|
|
|
return (
|
|
<span className={cn(
|
|
'inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase',
|
|
styles[status] || styles.unmatched,
|
|
)}>
|
|
{status}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function formatTransactionAmount(amount, currency = 'USD') {
|
|
const value = Math.abs(Number(amount || 0)) / 100;
|
|
const sign = Number(amount || 0) < 0 ? '-' : '+';
|
|
return `${sign}${new Intl.NumberFormat(undefined, {
|
|
style: 'currency',
|
|
currency: currency || 'USD',
|
|
}).format(value)}`;
|
|
}
|
|
|
|
function transactionDate(tx) {
|
|
return tx?.posted_date || String(tx?.transacted_at || '').slice(0, 10) || '—';
|
|
}
|
|
|
|
function transactionTitle(tx) {
|
|
return tx?.payee || tx?.description || tx?.memo || 'Transaction';
|
|
}
|
|
|
|
function matchScoreTone(score) {
|
|
const value = Number(score) || 0;
|
|
if (value >= 80) return 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400';
|
|
if (value >= 55) return 'border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-400';
|
|
return 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400';
|
|
}
|
|
|
|
function SuggestedMatchesPanel({ suggestions, loading, actionId, onAccept, onReject }) {
|
|
return (
|
|
<div className="rounded-lg border border-sky-500/20 bg-sky-500/[0.035]">
|
|
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-sky-500/10 px-4 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<span className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-sky-500/20 bg-sky-500/10 text-sky-600 dark:text-sky-400">
|
|
<Sparkles className="h-4 w-4" />
|
|
</span>
|
|
<div>
|
|
<p className="text-sm font-semibold">Suggested matches</p>
|
|
<p className="text-xs text-muted-foreground">{loading ? 'Checking transactions' : `${suggestions.length} ready for review`}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="px-4 py-6 text-sm text-muted-foreground">
|
|
<Loader2 className="mr-2 inline h-4 w-4 animate-spin" />
|
|
Finding likely bill matches...
|
|
</div>
|
|
) : suggestions.length === 0 ? (
|
|
<div className="px-4 py-6 text-sm text-muted-foreground">
|
|
No suggested matches right now.
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-2 p-3 xl:grid-cols-2">
|
|
{suggestions.map(suggestion => {
|
|
const tx = suggestion.transaction || {};
|
|
const bill = suggestion.bill || {};
|
|
const acceptBusy = actionId === `suggestion-match:${suggestion.id}`;
|
|
const rejectBusy = actionId === `suggestion-reject:${suggestion.id}`;
|
|
const busy = acceptBusy || rejectBusy;
|
|
|
|
return (
|
|
<div
|
|
key={suggestion.id}
|
|
className="rounded-lg border border-border/60 bg-background/80 p-3 shadow-sm transition-colors hover:border-sky-500/30"
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0 space-y-1">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className={cn('rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase', matchScoreTone(suggestion.score))}>
|
|
{suggestion.score}
|
|
</span>
|
|
<p className="truncate text-sm font-medium">{transactionTitle(tx)}</p>
|
|
</div>
|
|
<p className="truncate text-xs text-muted-foreground">
|
|
{transactionDate(tx)} · {tx.source_label || tx.source_type_label || 'Transaction'}
|
|
</p>
|
|
</div>
|
|
<p className={cn(
|
|
'shrink-0 text-sm font-semibold tabular-nums',
|
|
Number(tx.amount) < 0 ? 'text-destructive' : 'text-emerald-600',
|
|
)}>
|
|
{formatTransactionAmount(tx.amount, tx.currency)}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-3 flex items-center gap-2 rounded-md border border-emerald-500/15 bg-emerald-500/[0.045] px-2.5 py-2">
|
|
<Link2 className="h-3.5 w-3.5 shrink-0 text-emerald-600 dark:text-emerald-400" />
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-medium">{bill.name || `Bill ${suggestion.billId}`}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
Expected ${Number(bill.expected_amount || 0).toFixed(2)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{suggestion.reasons?.length > 0 && (
|
|
<div className="mt-2 flex flex-wrap gap-1.5">
|
|
{suggestion.reasons.slice(0, 4).map(reason => (
|
|
<span key={reason} className="rounded-full border border-border/60 bg-muted/30 px-2 py-0.5 text-[10px] text-muted-foreground">
|
|
{reason}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-3 flex justify-end gap-2">
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="ghost"
|
|
disabled={busy}
|
|
onClick={() => onReject(suggestion)}
|
|
className="h-8 text-xs text-muted-foreground hover:text-destructive"
|
|
>
|
|
{rejectBusy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <XCircle className="h-3.5 w-3.5" />}
|
|
<span className="ml-1.5">Reject</span>
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
disabled={busy}
|
|
onClick={() => onAccept(suggestion)}
|
|
className="h-8 gap-1.5 text-xs"
|
|
>
|
|
{acceptBusy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <CheckCircle2 className="h-3.5 w-3.5" />}
|
|
Match
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MatchBillDialog({ open, onOpenChange, transaction, bills, onConfirm, loading, onCreateBill }) {
|
|
const [query, setQuery] = useState('');
|
|
const [selectedBillId, setSelectedBillId] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
setQuery('');
|
|
setSelectedBillId(transaction?.matched_bill_id ? String(transaction.matched_bill_id) : '');
|
|
}
|
|
}, [open, transaction?.id, transaction?.matched_bill_id]);
|
|
|
|
const filteredBills = useMemo(() => {
|
|
const q = query.trim().toLowerCase();
|
|
if (!q) return bills.slice(0, 40);
|
|
return bills
|
|
.filter(bill => String(bill.name || '').toLowerCase().includes(q))
|
|
.slice(0, 40);
|
|
}, [bills, query]);
|
|
|
|
const selectedBill = bills.find(bill => String(bill.id) === String(selectedBillId));
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>Match Transaction</DialogTitle>
|
|
<DialogDescription>
|
|
Choose the bill this transaction paid. Nothing changes until you confirm.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
{transaction && (
|
|
<div className="rounded-lg border border-border/60 bg-muted/25 p-3">
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-medium">{transactionTitle(transaction)}</p>
|
|
<p className="mt-0.5 text-xs text-muted-foreground">
|
|
{transactionDate(transaction)} · {transaction.source_label || transaction.source_type_label || 'Transaction'}
|
|
</p>
|
|
</div>
|
|
<p className={cn(
|
|
'text-sm font-semibold tabular-nums',
|
|
Number(transaction.amount) < 0 ? 'text-destructive' : 'text-emerald-600',
|
|
)}>
|
|
{formatTransactionAmount(transaction.amount, transaction.currency)}
|
|
</p>
|
|
</div>
|
|
{transaction.description && transaction.description !== transactionTitle(transaction) && (
|
|
<p className="mt-2 text-xs text-muted-foreground">{transaction.description}</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-3">
|
|
<label className="space-y-1.5">
|
|
<span className="text-xs font-medium text-muted-foreground">Find bill</span>
|
|
<div className="relative">
|
|
<Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
value={query}
|
|
onChange={e => setQuery(e.target.value)}
|
|
placeholder="Search bills"
|
|
className="pl-8"
|
|
/>
|
|
</div>
|
|
</label>
|
|
|
|
<div className="max-h-72 overflow-y-auto rounded-lg border border-border/60">
|
|
{filteredBills.length === 0 ? (
|
|
<div className="flex flex-col items-center gap-3 px-4 py-8 text-center">
|
|
<p className="text-sm text-muted-foreground">No bills found.</p>
|
|
{onCreateBill && (() => {
|
|
const af = transaction?.advisory_filter;
|
|
const label = query.trim()
|
|
? `Create "${query.trim()}" as a new bill`
|
|
: 'Create a new bill';
|
|
if (af?.confidence === 'high') {
|
|
return (
|
|
<span className="text-xs text-muted-foreground">
|
|
Probably not a bill ·{' '}
|
|
<button
|
|
type="button"
|
|
className="underline hover:text-foreground transition-colors"
|
|
onClick={() => { onOpenChange(false); onCreateBill(transaction, query.trim() || undefined); }}
|
|
>
|
|
{label}
|
|
</button>
|
|
</span>
|
|
);
|
|
}
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => { onOpenChange(false); onCreateBill(transaction, query.trim() || undefined); }}
|
|
className={cn(
|
|
'flex items-center gap-1.5 text-xs hover:underline',
|
|
af?.confidence === 'medium' ? 'text-muted-foreground' : 'text-primary',
|
|
)}
|
|
>
|
|
<Plus className="h-3.5 w-3.5" />
|
|
{label}
|
|
</button>
|
|
);
|
|
})()}
|
|
</div>
|
|
) : (
|
|
<div className="divide-y divide-border/40">
|
|
{filteredBills.map(bill => (
|
|
<button
|
|
key={bill.id}
|
|
type="button"
|
|
onClick={() => setSelectedBillId(String(bill.id))}
|
|
className={cn(
|
|
'flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/30',
|
|
String(selectedBillId) === String(bill.id) && 'bg-primary/5',
|
|
)}
|
|
>
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-medium">{bill.name}</p>
|
|
<p className="mt-0.5 text-xs text-muted-foreground">
|
|
Due day {bill.due_day ?? '—'} · expected ${Number(bill.expected_amount || 0).toFixed(2)}
|
|
</p>
|
|
</div>
|
|
{String(selectedBillId) === String(bill.id) && (
|
|
<CheckCircle2 className="h-4 w-4 shrink-0 text-primary" />
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="gap-2">
|
|
{onCreateBill && (() => {
|
|
const af = transaction?.advisory_filter;
|
|
if (af?.confidence === 'high') {
|
|
return (
|
|
<span className="mr-auto flex items-center gap-2 text-xs text-muted-foreground">
|
|
Probably not a bill
|
|
<button
|
|
type="button"
|
|
className="underline hover:text-foreground transition-colors"
|
|
onClick={() => { onOpenChange(false); onCreateBill(transaction); }}
|
|
>
|
|
create anyway
|
|
</button>
|
|
</span>
|
|
);
|
|
}
|
|
return (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
className={cn(
|
|
'mr-auto text-xs',
|
|
af?.confidence === 'medium'
|
|
? 'text-muted-foreground/60 hover:text-muted-foreground'
|
|
: 'text-muted-foreground hover:text-foreground',
|
|
)}
|
|
onClick={() => { onOpenChange(false); onCreateBill(transaction); }}
|
|
>
|
|
<Plus className="h-3.5 w-3.5 mr-1.5" />
|
|
Create Bill
|
|
</Button>
|
|
);
|
|
})()}
|
|
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
disabled={!selectedBill || loading}
|
|
onClick={() => selectedBill && onConfirm(selectedBill.id)}
|
|
>
|
|
{loading ? <><Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />Matching…</> : <><Link2 className="h-3.5 w-3.5 mr-1.5" />Confirm Match</>}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function parseUtc(str) {
|
|
if (!str) return null;
|
|
const normalized = str.includes('T') ? str : str.replace(' ', 'T') + 'Z';
|
|
return new Date(normalized);
|
|
}
|
|
|
|
function timeAgo(iso) {
|
|
if (!iso) return null;
|
|
const secs = Math.floor((Date.now() - parseUtc(iso).getTime()) / 1000);
|
|
if (secs < 60) return 'just now';
|
|
if (secs < 3600) return `${Math.floor(secs / 60)}m ago`;
|
|
if (secs < 86400) return `${Math.floor(secs / 3600)}h ago`;
|
|
return `${Math.floor(secs / 86400)}d ago`;
|
|
}
|
|
|
|
export default function TransactionMatchingSection({ refreshKey, simplefinConn, cardProps = {} }) {
|
|
const [transactions, setTransactions] = useState([]);
|
|
const [suggestions, setSuggestions] = useState([]);
|
|
const [bills, setBills] = useState([]);
|
|
const [filter, setFilter] = useState('open');
|
|
const [loading, setLoading] = useState(true);
|
|
const [suggestionsLoading, setSuggestionsLoading] = useState(true);
|
|
const [billsLoading, setBillsLoading] = useState(true);
|
|
const [actionId, setActionId] = useState(null);
|
|
const [matchOpen, setMatchOpen] = useState(false);
|
|
const [matchTransaction, setMatchTransaction] = useState(null);
|
|
const [categories, setCategories] = useState([]);
|
|
const [createBillSourceTx, setCreateBillSourceTx] = useState(null);
|
|
|
|
const currentFilter = TRANSACTION_FILTERS.find(item => item.id === filter) || TRANSACTION_FILTERS[0];
|
|
|
|
const loadTransactions = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await api.transactions({ limit: 100, ...currentFilter.params });
|
|
setTransactions(data || []);
|
|
} catch (err) {
|
|
toast.error(err.message || 'Failed to load transactions.');
|
|
setTransactions([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadSuggestions = async () => {
|
|
setSuggestionsLoading(true);
|
|
try {
|
|
const data = await api.matchSuggestions({ limit: 8 });
|
|
setSuggestions(data || []);
|
|
} catch (err) {
|
|
toast.error(err.message || 'Failed to load match suggestions.');
|
|
setSuggestions([]);
|
|
} finally {
|
|
setSuggestionsLoading(false);
|
|
}
|
|
};
|
|
|
|
const refreshTransactionWorkbench = async () => {
|
|
await Promise.all([loadTransactions(), loadSuggestions()]);
|
|
};
|
|
|
|
const loadBills = async () => {
|
|
setBillsLoading(true);
|
|
try {
|
|
const data = await api.bills();
|
|
setBills(data || []);
|
|
} catch (err) {
|
|
setBills([]);
|
|
toast.error(err.message || 'Failed to load bills for matching.');
|
|
} finally {
|
|
setBillsLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => { loadBills(); }, []);
|
|
useEffect(() => { loadTransactions(); }, [filter, refreshKey]);
|
|
useEffect(() => { loadSuggestions(); }, [refreshKey]);
|
|
useEffect(() => {
|
|
api.categories().then(data => setCategories(data || [])).catch(err => console.error('[TransactionMatchingSection] failed to load categories', err));
|
|
}, []);
|
|
|
|
const openMatchDialog = (tx) => {
|
|
setMatchTransaction(tx);
|
|
setMatchOpen(true);
|
|
if (!bills.length && !billsLoading) loadBills();
|
|
};
|
|
|
|
const openCreateBill = (tx, nameOverride) => {
|
|
const amount = Math.abs(Number(tx.amount || 0)) / 100;
|
|
const dateStr = transactionDate(tx);
|
|
const day = dateStr ? parseInt(dateStr.slice(8, 10), 10) : 1;
|
|
setCreateBillSourceTx({
|
|
tx,
|
|
initialBill: {
|
|
name: nameOverride || transactionTitle(tx),
|
|
expected_amount: amount || 0,
|
|
due_day: day >= 1 && day <= 31 ? day : 1,
|
|
billing_cycle: 'monthly',
|
|
cycle_type: 'monthly',
|
|
cycle_day: '1',
|
|
active: 1,
|
|
},
|
|
});
|
|
};
|
|
|
|
const handleBillCreated = async (newBill) => {
|
|
const tx = createBillSourceTx?.tx;
|
|
setCreateBillSourceTx(null);
|
|
if (tx && newBill?.id) {
|
|
try {
|
|
await api.matchTransaction(tx.id, newBill.id);
|
|
toast.success('Bill created and matched to transaction.');
|
|
} catch (err) {
|
|
toast.error(err.message || 'Bill created but match failed.');
|
|
}
|
|
}
|
|
await Promise.all([loadBills(), refreshTransactionWorkbench()]);
|
|
};
|
|
|
|
const runTransactionAction = async (tx, action) => {
|
|
setActionId(`${action}:${tx.id}`);
|
|
try {
|
|
if (action === 'unmatch') {
|
|
await api.unmatchTransaction(tx.id);
|
|
toast.success('Transaction unmatched.');
|
|
} else if (action === 'ignore') {
|
|
await api.ignoreTransaction(tx.id);
|
|
toast.success('Transaction ignored.');
|
|
} else if (action === 'unignore') {
|
|
await api.unignoreTransaction(tx.id);
|
|
toast.success('Transaction restored.');
|
|
}
|
|
await refreshTransactionWorkbench();
|
|
} catch (err) {
|
|
toast.error(err.message || 'Transaction action failed.');
|
|
} finally {
|
|
setActionId(null);
|
|
}
|
|
};
|
|
|
|
const confirmMatch = async (billId) => {
|
|
if (!matchTransaction) return;
|
|
setActionId(`match:${matchTransaction.id}`);
|
|
try {
|
|
await api.matchTransaction(matchTransaction.id, billId);
|
|
toast.success('Transaction matched to bill.');
|
|
setMatchOpen(false);
|
|
setMatchTransaction(null);
|
|
await refreshTransactionWorkbench();
|
|
} catch (err) {
|
|
toast.error(err.message || 'Transaction match failed.');
|
|
} finally {
|
|
setActionId(null);
|
|
}
|
|
};
|
|
|
|
const acceptSuggestion = async (suggestion) => {
|
|
setActionId(`suggestion-match:${suggestion.id}`);
|
|
try {
|
|
await api.matchTransaction(suggestion.transactionId, suggestion.billId);
|
|
toast.success('Suggested match confirmed.');
|
|
await refreshTransactionWorkbench();
|
|
} catch (err) {
|
|
toast.error(err.message || 'Suggested match failed.');
|
|
} finally {
|
|
setActionId(null);
|
|
}
|
|
};
|
|
|
|
const rejectSuggestion = async (suggestion) => {
|
|
setActionId(`suggestion-reject:${suggestion.id}`);
|
|
try {
|
|
await api.rejectMatchSuggestion(suggestion.id);
|
|
toast.success('Suggestion rejected.');
|
|
await loadSuggestions();
|
|
} catch (err) {
|
|
toast.error(err.message || 'Suggestion could not be rejected.');
|
|
} finally {
|
|
setActionId(null);
|
|
}
|
|
};
|
|
|
|
const [quickSyncing, setQuickSyncing] = useState(false);
|
|
|
|
const handleQuickSync = async () => {
|
|
if (!simplefinConn) return;
|
|
setQuickSyncing(true);
|
|
try {
|
|
await api.syncDataSource(simplefinConn.id);
|
|
await refreshTransactionWorkbench();
|
|
} catch (err) {
|
|
toast.error(err.message || 'Sync failed');
|
|
} finally {
|
|
setQuickSyncing(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<SectionCard
|
|
title="Transactions"
|
|
subtitle="Review imported or manual transactions and confirm matches to bills."
|
|
{...cardProps}
|
|
>
|
|
{simplefinConn && (
|
|
<div className="px-6 py-2 flex items-center justify-between gap-3 border-b border-border/50 bg-muted/20 text-xs text-muted-foreground">
|
|
<span className="flex items-center gap-1.5">
|
|
<span className={cn(
|
|
'h-1.5 w-1.5 rounded-full shrink-0',
|
|
simplefinConn.last_error ? 'bg-destructive' : 'bg-emerald-500',
|
|
)} />
|
|
SimpleFIN
|
|
{simplefinConn.last_sync_at && (
|
|
<span>· synced {timeAgo(simplefinConn.last_sync_at)}</span>
|
|
)}
|
|
{simplefinConn.last_error && (
|
|
<span className="text-destructive">· {simplefinConn.last_error}</span>
|
|
)}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={handleQuickSync}
|
|
disabled={quickSyncing}
|
|
className="flex items-center gap-1 hover:text-foreground transition-colors disabled:opacity-50"
|
|
>
|
|
{quickSyncing
|
|
? <><Loader2 className="h-3 w-3 animate-spin" />Syncing…</>
|
|
: <><RefreshCw className="h-3 w-3" />Sync Now</>}
|
|
</button>
|
|
</div>
|
|
)}
|
|
<div className="px-6 py-5 space-y-4">
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<div className="flex flex-wrap gap-2">
|
|
{TRANSACTION_FILTERS.map(item => (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
onClick={() => setFilter(item.id)}
|
|
className={cn(
|
|
'rounded-full border px-3 py-1.5 text-xs font-medium transition-colors',
|
|
filter === item.id
|
|
? 'border-primary/40 bg-primary/10 text-primary'
|
|
: 'border-border/60 bg-muted/20 text-muted-foreground hover:bg-muted hover:text-foreground',
|
|
)}
|
|
>
|
|
{item.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<Button size="sm" variant="outline" type="button" onClick={refreshTransactionWorkbench} disabled={loading || suggestionsLoading}>
|
|
{loading ? <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" /> : <RefreshCw className="h-3.5 w-3.5 mr-1.5" />}
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
|
|
<SuggestedMatchesPanel
|
|
suggestions={suggestions}
|
|
loading={suggestionsLoading}
|
|
actionId={actionId}
|
|
onAccept={acceptSuggestion}
|
|
onReject={rejectSuggestion}
|
|
/>
|
|
|
|
<div className="overflow-x-auto rounded-lg border border-border/60">
|
|
{loading ? (
|
|
<div className="px-4 py-8 text-center text-sm text-muted-foreground">Loading transactions…</div>
|
|
) : transactions.length === 0 ? (
|
|
<div className="px-4 py-8 text-center text-sm text-muted-foreground">
|
|
No transactions found for this filter.
|
|
</div>
|
|
) : (
|
|
<table className="w-full min-w-[860px] table-fixed text-sm">
|
|
<colgroup>
|
|
<col className="w-[92px]" />
|
|
<col />
|
|
<col className="w-[200px]" />
|
|
<col className="w-[120px]" />
|
|
<col className="w-[96px]" />
|
|
</colgroup>
|
|
<thead>
|
|
<tr className="border-b border-border/50 bg-muted/30 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
|
|
<th className="px-4 py-2 text-left">Date</th>
|
|
<th className="px-4 py-2 text-left">Transaction</th>
|
|
<th className="px-4 py-2 text-left">Match</th>
|
|
<th className="px-4 py-2 text-right">Amount</th>
|
|
<th className="px-4 py-2 text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border/30">
|
|
{transactions.map(tx => {
|
|
const status = transactionStatus(tx);
|
|
const busy = actionId?.endsWith(`:${tx.id}`);
|
|
return (
|
|
<tr key={tx.id} className="hover:bg-muted/20">
|
|
<td className="px-4 py-3 text-xs text-muted-foreground whitespace-nowrap">
|
|
{transactionDate(tx)}
|
|
</td>
|
|
<td className="max-w-0 px-4 py-3">
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-medium">{transactionTitle(tx)}</p>
|
|
<p className="mt-0.5 truncate text-xs text-muted-foreground">
|
|
{[tx.description, tx.account_name, tx.source_label].filter(Boolean).join(' · ') || '—'}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex flex-col gap-1.5">
|
|
<TransactionStatusBadge tx={tx} />
|
|
{tx.matched_bill_name ? (
|
|
<span className="truncate text-xs text-foreground">{tx.matched_bill_name}</span>
|
|
) : tx.advisory_filter?.confidence === 'high' ? (
|
|
<span className="text-xs text-muted-foreground italic">Probably not a bill</span>
|
|
) : (
|
|
<span className="text-xs text-muted-foreground">No bill linked</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className={cn(
|
|
'px-4 py-3 text-right font-semibold tabular-nums whitespace-nowrap',
|
|
Number(tx.amount) < 0 ? 'text-destructive' : 'text-emerald-600',
|
|
)}>
|
|
{formatTransactionAmount(tx.amount, tx.currency)}
|
|
</td>
|
|
<td className="px-3 py-3">
|
|
<div className="flex justify-end gap-1.5 whitespace-nowrap">
|
|
{status === 'ignored' ? (
|
|
<Button
|
|
size="icon"
|
|
variant="outline"
|
|
type="button"
|
|
disabled={busy}
|
|
onClick={() => runTransactionAction(tx, 'unignore')}
|
|
className="h-8 w-8 shrink-0"
|
|
aria-label="Unignore transaction"
|
|
title="Unignore transaction"
|
|
>
|
|
{busy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Eye className="h-3.5 w-3.5" />}
|
|
<span className="sr-only">Unignore</span>
|
|
</Button>
|
|
) : (
|
|
<>
|
|
{status === 'matched' ? (
|
|
<Button
|
|
size="icon"
|
|
variant="outline"
|
|
type="button"
|
|
disabled={busy}
|
|
onClick={() => runTransactionAction(tx, 'unmatch')}
|
|
className="h-8 w-8 shrink-0"
|
|
aria-label="Unmatch transaction"
|
|
title="Unmatch transaction"
|
|
>
|
|
{busy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Link2Off className="h-3.5 w-3.5" />}
|
|
<span className="sr-only">Unmatch</span>
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
size="icon"
|
|
type="button"
|
|
disabled={busy || billsLoading}
|
|
onClick={() => openMatchDialog(tx)}
|
|
className="h-8 w-8 shrink-0"
|
|
aria-label="Match transaction"
|
|
title="Match transaction"
|
|
>
|
|
<Link2 className="h-3.5 w-3.5" />
|
|
<span className="sr-only">Match</span>
|
|
</Button>
|
|
)}
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
type="button"
|
|
disabled={busy}
|
|
onClick={() => runTransactionAction(tx, 'ignore')}
|
|
className="h-8 w-8 shrink-0"
|
|
aria-label="Ignore transaction"
|
|
title="Ignore transaction"
|
|
>
|
|
{busy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <EyeOff className="h-3.5 w-3.5" />}
|
|
<span className="sr-only">Ignore</span>
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<MatchBillDialog
|
|
open={matchOpen}
|
|
onOpenChange={setMatchOpen}
|
|
transaction={matchTransaction}
|
|
bills={bills}
|
|
loading={actionId === `match:${matchTransaction?.id}`}
|
|
onConfirm={confirmMatch}
|
|
onCreateBill={openCreateBill}
|
|
/>
|
|
|
|
{createBillSourceTx && (
|
|
<BillModal
|
|
key={`create-from-tx-${createBillSourceTx.tx.id}`}
|
|
initialBill={createBillSourceTx.initialBill}
|
|
categories={categories}
|
|
onClose={() => setCreateBillSourceTx(null)}
|
|
onSave={handleBillCreated}
|
|
/>
|
|
)}
|
|
</SectionCard>
|
|
);
|
|
}
|