refactor(bill-modal): extract UnmatchDialogs + shared transactionDisplay (BM2, 5/n)
The three unmatch flows (choice dialog, single-unmatch confirm, bulk review with optional merchant-rule removal) move to UnmatchDialogs; the transaction display/ matching helpers (transactionTitle/Date, fmtTransactionAmount, isSimilarPayee) move to a shared transactionDisplay.js used by both the parent and the dialogs. Dropped now-unused imports (Layers, Checkbox, formatCentsUSD). Behavior- preserving — BillModal 1432 -> 1193 lines; build + client tests green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
null
parent
c61e3d84a5
commit
301bb152ef
|
|
@ -1,6 +1,6 @@
|
|||
import { useActionState, useEffect, useState } from 'react';
|
||||
import { Copy, Layers, Link2, Link2Off, Loader2, RefreshCw } from 'lucide-react';
|
||||
import { formatCentsUSD, validateNonNegativeMoney } from '@/lib/money';
|
||||
import { Copy, Link2, Link2Off, Loader2, RefreshCw } from 'lucide-react';
|
||||
import { validateNonNegativeMoney } from '@/lib/money';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
|
|
@ -8,7 +8,6 @@ import { Label } from '@/components/ui/label';
|
|||
import {
|
||||
Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import {
|
||||
AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
|
||||
AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
|
||||
|
|
@ -23,6 +22,8 @@ import DebtDetailsSection from '@/components/bill-modal/DebtDetailsSection';
|
|||
import AutopayTrustIndicator from '@/components/bill-modal/AutopayTrustIndicator';
|
||||
import PaymentHistoryList from '@/components/bill-modal/PaymentHistoryList';
|
||||
import PaymentFormFields from '@/components/bill-modal/PaymentFormFields';
|
||||
import UnmatchDialogs from '@/components/bill-modal/UnmatchDialogs';
|
||||
import { transactionTitle, transactionDate, fmtTransactionAmount, isSimilarPayee } from '@/components/bill-modal/transactionDisplay';
|
||||
import {
|
||||
BILLING_SCHEDULE_OPTIONS,
|
||||
billingCycleForSchedule,
|
||||
|
|
@ -57,18 +58,6 @@ const SUBSCRIPTION_TYPES = [
|
|||
['other', 'Other'],
|
||||
];
|
||||
|
||||
function fmtTransactionAmount(amount, currency = 'USD') {
|
||||
return formatCentsUSD(amount, { signed: true, currency });
|
||||
}
|
||||
|
||||
function transactionDate(tx) {
|
||||
return tx?.posted_date || String(tx?.transacted_at || '').slice(0, 10) || null;
|
||||
}
|
||||
|
||||
function transactionTitle(tx) {
|
||||
return tx?.payee || tx?.description || tx?.memo || 'Transaction';
|
||||
}
|
||||
|
||||
function isDebtCat(categories, catId) {
|
||||
if (!catId || catId === CAT_NONE) return false;
|
||||
const cat = categories.find(c => String(c.id) === catId);
|
||||
|
|
@ -80,18 +69,6 @@ function isSnowballCat(categories, catId) {
|
|||
return cat ? SNOWBALL_KEYWORDS.some(kw => cat.name.toLowerCase().includes(kw)) : false;
|
||||
}
|
||||
|
||||
function normalizePayee(s) {
|
||||
return (s || '').toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
}
|
||||
|
||||
function isSimilarPayee(a, b) {
|
||||
const na = normalizePayee(a);
|
||||
const nb = normalizePayee(b);
|
||||
const minLen = Math.min(na.length, nb.length);
|
||||
if (minLen < 3) return false;
|
||||
return na.startsWith(nb) || nb.startsWith(na);
|
||||
}
|
||||
|
||||
export default function BillModal({ bill, initialBill, categories, onClose, onSave, onDuplicate }) {
|
||||
const isNew = !bill;
|
||||
const sourceBill = bill || initialBill || null;
|
||||
|
|
@ -1198,234 +1175,19 @@ export default function BillModal({ bill, initialBill, categories, onClose, onSa
|
|||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* ── Unmatch choice dialog ─────────────────────────────────── */}
|
||||
<Dialog
|
||||
open={!!unmatchTarget && !bulkUnmatch}
|
||||
onOpenChange={open => { if (!open) closeUnmatch(); }}
|
||||
>
|
||||
<DialogContent className="sm:max-w-md border-border/60 bg-card/95 backdrop-blur-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base font-semibold">Unmatch transaction</DialogTitle>
|
||||
<DialogDescription className="text-sm text-muted-foreground">
|
||||
How would you like to proceed?
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{unmatchTarget && (
|
||||
<div className="rounded-lg border border-border/60 bg-muted/20 px-3 py-2.5">
|
||||
<p className="text-sm font-medium text-foreground">{transactionTitle(unmatchTarget)}</p>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">
|
||||
{transactionDate(unmatchTarget) ? fmtDate(transactionDate(unmatchTarget)) : 'No date'}
|
||||
{' · '}
|
||||
<span className="font-mono">{fmtTransactionAmount(unmatchTarget.amount, unmatchTarget.currency)}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-2.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setUnmatchConfirmOpen(true)}
|
||||
className="flex items-start gap-3 rounded-lg border border-border/60 bg-background/50 p-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<Link2Off className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<div>
|
||||
<p className="text-sm font-medium">Unmatch this payment only</p>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">Remove just this one transaction from the bill.</p>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleOpenBulkUnmatch}
|
||||
className="flex items-start gap-3 rounded-lg border border-border/60 bg-background/50 p-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<Layers className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<div>
|
||||
<p className="text-sm font-medium">Review all similar matches</p>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">
|
||||
See all transactions with a similar payee name and manage them together. Optionally remove a merchant rule too.
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="ghost" onClick={closeUnmatch} className="text-xs">
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* ── Single unmatch confirm ────────────────────────────────── */}
|
||||
<AlertDialog
|
||||
open={!!unmatchTarget && unmatchConfirmOpen}
|
||||
onOpenChange={open => { if (!open) setUnmatchConfirmOpen(false); }}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Unmatch this transaction?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{unmatchTarget && (
|
||||
<>
|
||||
<span className="font-medium text-foreground">{transactionTitle(unmatchTarget)}</span>
|
||||
{' '}will be unlinked from this bill.
|
||||
{unmatchTarget.linked_payment?.payment_source === 'provider_sync'
|
||||
? ' The payment record will be removed and the balance restored.'
|
||||
: ' The payment record will be removed.'}
|
||||
</>
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={!!transactionBusyId} onClick={() => setUnmatchConfirmOpen(false)}>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
disabled={!!transactionBusyId}
|
||||
onClick={handleSingleUnmatch}
|
||||
>
|
||||
{transactionBusyId ? 'Unmatching…' : 'Confirm Unmatch'}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* ── Bulk unmatch dialog ───────────────────────────────────── */}
|
||||
<Dialog
|
||||
open={!!unmatchTarget && !!bulkUnmatch}
|
||||
onOpenChange={open => { if (!open) closeUnmatch(); }}
|
||||
>
|
||||
<DialogContent className="sm:max-w-lg border-border/60 bg-card/95 backdrop-blur-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base font-semibold">Review similar matches</DialogTitle>
|
||||
{unmatchTarget && (
|
||||
<DialogDescription className="text-sm text-muted-foreground">
|
||||
Transactions similar to <span className="font-medium text-foreground">{transactionTitle(unmatchTarget)}</span>.
|
||||
Uncheck any you want to keep matched.
|
||||
</DialogDescription>
|
||||
)}
|
||||
</DialogHeader>
|
||||
|
||||
{bulkUnmatch && (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">Quick select:</span>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-6 px-2 text-xs"
|
||||
onClick={() => setBulkUnmatch(p => ({ ...p, checkedIds: new Set(p.similar.map(t => t.id)) }))}
|
||||
>
|
||||
All
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-6 px-2 text-xs"
|
||||
onClick={() => setBulkUnmatch(p => ({ ...p, checkedIds: new Set() }))}
|
||||
>
|
||||
None
|
||||
</Button>
|
||||
<span className="ml-auto text-xs text-muted-foreground">
|
||||
{bulkUnmatch.checkedIds.size} of {bulkUnmatch.similar.length} selected
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="max-h-60 space-y-2 overflow-y-auto pr-1">
|
||||
{bulkUnmatch.similar.map(tx => (
|
||||
<label
|
||||
key={tx.id}
|
||||
className={cn(
|
||||
'flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 transition-colors',
|
||||
bulkUnmatch.checkedIds.has(tx.id)
|
||||
? 'border-primary/30 bg-primary/5'
|
||||
: 'border-border/60 bg-background/35 opacity-60',
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={bulkUnmatch.checkedIds.has(tx.id)}
|
||||
onCheckedChange={checked => {
|
||||
setBulkUnmatch(p => {
|
||||
const next = new Set(p.checkedIds);
|
||||
checked ? next.add(tx.id) : next.delete(tx.id);
|
||||
return { ...p, checkedIds: next };
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium text-foreground">{transactionTitle(tx)}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{transactionDate(tx) ? fmtDate(transactionDate(tx)) : 'No date'}
|
||||
{tx.account_name && ` · ${tx.account_name}`}
|
||||
</p>
|
||||
</div>
|
||||
<p className={cn(
|
||||
'shrink-0 font-mono text-sm font-semibold tabular-nums',
|
||||
Number(tx.amount) < 0 ? 'text-destructive' : 'text-emerald-600',
|
||||
)}>
|
||||
{fmtTransactionAmount(tx.amount, tx.currency)}
|
||||
</p>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{bulkUnmatch.rules.length > 0 && (
|
||||
<div className="rounded-lg border border-amber-500/25 bg-amber-500/5 px-3 py-2.5">
|
||||
<p className="mb-2 text-xs font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400">
|
||||
Merchant rules
|
||||
</p>
|
||||
{bulkUnmatch.rules.map(rule => (
|
||||
<label key={rule.id} className="flex cursor-pointer items-start gap-2.5">
|
||||
<Checkbox
|
||||
className="mt-0.5"
|
||||
checked={bulkUnmatch.removeRuleId === rule.id}
|
||||
onCheckedChange={checked =>
|
||||
setBulkUnmatch(p => ({ ...p, removeRuleId: checked ? rule.id : null }))
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm">
|
||||
Remove rule <span className="font-mono font-semibold">"{rule.merchant}"</span>
|
||||
</p>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">
|
||||
Future syncs won't auto-match this pattern to this bill.
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<DialogFooter className="gap-2">
|
||||
<Button type="button" variant="ghost" onClick={closeUnmatch} className="text-xs">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setBulkUnmatch(null)}
|
||||
className="text-xs"
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={bulkBusy || !bulkUnmatch || bulkUnmatch.checkedIds.size === 0}
|
||||
onClick={handleBulkConfirm}
|
||||
className="text-xs"
|
||||
>
|
||||
{bulkBusy
|
||||
? 'Unmatching…'
|
||||
: `Unmatch ${bulkUnmatch?.checkedIds?.size ?? 0} transaction${bulkUnmatch?.checkedIds?.size !== 1 ? 's' : ''}`}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<UnmatchDialogs
|
||||
unmatchTarget={unmatchTarget}
|
||||
bulkUnmatch={bulkUnmatch}
|
||||
setBulkUnmatch={setBulkUnmatch}
|
||||
unmatchConfirmOpen={unmatchConfirmOpen}
|
||||
setUnmatchConfirmOpen={setUnmatchConfirmOpen}
|
||||
transactionBusyId={transactionBusyId}
|
||||
bulkBusy={bulkBusy}
|
||||
closeUnmatch={closeUnmatch}
|
||||
onSingleUnmatch={handleSingleUnmatch}
|
||||
onOpenBulkUnmatch={handleOpenBulkUnmatch}
|
||||
onBulkConfirm={handleBulkConfirm}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,261 @@
|
|||
import { Link2Off, Layers } from 'lucide-react';
|
||||
import { cn, fmtDate } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import {
|
||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle,
|
||||
AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import { transactionTitle, transactionDate, fmtTransactionAmount } from '@/components/bill-modal/transactionDisplay';
|
||||
|
||||
// The three unmatch flows for a linked bank transaction: the choice dialog
|
||||
// (single vs. review-similar), the single-unmatch confirm, and the bulk review
|
||||
// dialog (with optional merchant-rule removal). Presentational — the parent owns
|
||||
// the unmatch state and the confirm/bulk handlers.
|
||||
export default function UnmatchDialogs({
|
||||
unmatchTarget,
|
||||
bulkUnmatch, setBulkUnmatch,
|
||||
unmatchConfirmOpen, setUnmatchConfirmOpen,
|
||||
transactionBusyId,
|
||||
bulkBusy,
|
||||
closeUnmatch,
|
||||
onSingleUnmatch,
|
||||
onOpenBulkUnmatch,
|
||||
onBulkConfirm,
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
{/* ── Unmatch choice dialog ─────────────────────────────────── */}
|
||||
<Dialog
|
||||
open={!!unmatchTarget && !bulkUnmatch}
|
||||
onOpenChange={open => { if (!open) closeUnmatch(); }}
|
||||
>
|
||||
<DialogContent className="sm:max-w-md border-border/60 bg-card/95 backdrop-blur-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base font-semibold">Unmatch transaction</DialogTitle>
|
||||
<DialogDescription className="text-sm text-muted-foreground">
|
||||
How would you like to proceed?
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{unmatchTarget && (
|
||||
<div className="rounded-lg border border-border/60 bg-muted/20 px-3 py-2.5">
|
||||
<p className="text-sm font-medium text-foreground">{transactionTitle(unmatchTarget)}</p>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">
|
||||
{transactionDate(unmatchTarget) ? fmtDate(transactionDate(unmatchTarget)) : 'No date'}
|
||||
{' · '}
|
||||
<span className="font-mono">{fmtTransactionAmount(unmatchTarget.amount, unmatchTarget.currency)}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-2.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setUnmatchConfirmOpen(true)}
|
||||
className="flex items-start gap-3 rounded-lg border border-border/60 bg-background/50 p-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<Link2Off className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<div>
|
||||
<p className="text-sm font-medium">Unmatch this payment only</p>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">Remove just this one transaction from the bill.</p>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpenBulkUnmatch}
|
||||
className="flex items-start gap-3 rounded-lg border border-border/60 bg-background/50 p-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<Layers className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<div>
|
||||
<p className="text-sm font-medium">Review all similar matches</p>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">
|
||||
See all transactions with a similar payee name and manage them together. Optionally remove a merchant rule too.
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="ghost" onClick={closeUnmatch} className="text-xs">
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* ── Single unmatch confirm ────────────────────────────────── */}
|
||||
<AlertDialog
|
||||
open={!!unmatchTarget && unmatchConfirmOpen}
|
||||
onOpenChange={open => { if (!open) setUnmatchConfirmOpen(false); }}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Unmatch this transaction?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{unmatchTarget && (
|
||||
<>
|
||||
<span className="font-medium text-foreground">{transactionTitle(unmatchTarget)}</span>
|
||||
{' '}will be unlinked from this bill.
|
||||
{unmatchTarget.linked_payment?.payment_source === 'provider_sync'
|
||||
? ' The payment record will be removed and the balance restored.'
|
||||
: ' The payment record will be removed.'}
|
||||
</>
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={!!transactionBusyId} onClick={() => setUnmatchConfirmOpen(false)}>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
disabled={!!transactionBusyId}
|
||||
onClick={onSingleUnmatch}
|
||||
>
|
||||
{transactionBusyId ? 'Unmatching…' : 'Confirm Unmatch'}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* ── Bulk unmatch dialog ───────────────────────────────────── */}
|
||||
<Dialog
|
||||
open={!!unmatchTarget && !!bulkUnmatch}
|
||||
onOpenChange={open => { if (!open) closeUnmatch(); }}
|
||||
>
|
||||
<DialogContent className="sm:max-w-lg border-border/60 bg-card/95 backdrop-blur-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base font-semibold">Review similar matches</DialogTitle>
|
||||
{unmatchTarget && (
|
||||
<DialogDescription className="text-sm text-muted-foreground">
|
||||
Transactions similar to <span className="font-medium text-foreground">{transactionTitle(unmatchTarget)}</span>.
|
||||
Uncheck any you want to keep matched.
|
||||
</DialogDescription>
|
||||
)}
|
||||
</DialogHeader>
|
||||
|
||||
{bulkUnmatch && (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">Quick select:</span>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-6 px-2 text-xs"
|
||||
onClick={() => setBulkUnmatch(p => ({ ...p, checkedIds: new Set(p.similar.map(t => t.id)) }))}
|
||||
>
|
||||
All
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-6 px-2 text-xs"
|
||||
onClick={() => setBulkUnmatch(p => ({ ...p, checkedIds: new Set() }))}
|
||||
>
|
||||
None
|
||||
</Button>
|
||||
<span className="ml-auto text-xs text-muted-foreground">
|
||||
{bulkUnmatch.checkedIds.size} of {bulkUnmatch.similar.length} selected
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="max-h-60 space-y-2 overflow-y-auto pr-1">
|
||||
{bulkUnmatch.similar.map(tx => (
|
||||
<label
|
||||
key={tx.id}
|
||||
className={cn(
|
||||
'flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 transition-colors',
|
||||
bulkUnmatch.checkedIds.has(tx.id)
|
||||
? 'border-primary/30 bg-primary/5'
|
||||
: 'border-border/60 bg-background/35 opacity-60',
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={bulkUnmatch.checkedIds.has(tx.id)}
|
||||
onCheckedChange={checked => {
|
||||
setBulkUnmatch(p => {
|
||||
const next = new Set(p.checkedIds);
|
||||
checked ? next.add(tx.id) : next.delete(tx.id);
|
||||
return { ...p, checkedIds: next };
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium text-foreground">{transactionTitle(tx)}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{transactionDate(tx) ? fmtDate(transactionDate(tx)) : 'No date'}
|
||||
{tx.account_name && ` · ${tx.account_name}`}
|
||||
</p>
|
||||
</div>
|
||||
<p className={cn(
|
||||
'shrink-0 font-mono text-sm font-semibold tabular-nums',
|
||||
Number(tx.amount) < 0 ? 'text-destructive' : 'text-emerald-600',
|
||||
)}>
|
||||
{fmtTransactionAmount(tx.amount, tx.currency)}
|
||||
</p>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{bulkUnmatch.rules.length > 0 && (
|
||||
<div className="rounded-lg border border-amber-500/25 bg-amber-500/5 px-3 py-2.5">
|
||||
<p className="mb-2 text-xs font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400">
|
||||
Merchant rules
|
||||
</p>
|
||||
{bulkUnmatch.rules.map(rule => (
|
||||
<label key={rule.id} className="flex cursor-pointer items-start gap-2.5">
|
||||
<Checkbox
|
||||
className="mt-0.5"
|
||||
checked={bulkUnmatch.removeRuleId === rule.id}
|
||||
onCheckedChange={checked =>
|
||||
setBulkUnmatch(p => ({ ...p, removeRuleId: checked ? rule.id : null }))
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm">
|
||||
Remove rule <span className="font-mono font-semibold">"{rule.merchant}"</span>
|
||||
</p>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">
|
||||
Future syncs won't auto-match this pattern to this bill.
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<DialogFooter className="gap-2">
|
||||
<Button type="button" variant="ghost" onClick={closeUnmatch} className="text-xs">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setBulkUnmatch(null)}
|
||||
className="text-xs"
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={bulkBusy || !bulkUnmatch || bulkUnmatch.checkedIds.size === 0}
|
||||
onClick={onBulkConfirm}
|
||||
className="text-xs"
|
||||
>
|
||||
{bulkBusy
|
||||
? 'Unmatching…'
|
||||
: `Unmatch ${bulkUnmatch?.checkedIds?.size ?? 0} transaction${bulkUnmatch?.checkedIds?.size !== 1 ? 's' : ''}`}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { formatCentsUSD } from '@/lib/money';
|
||||
|
||||
// Display + matching helpers for bank transactions in the bill modal. Shared by
|
||||
// the linked-transaction list, the unmatch dialogs, and the bulk-unmatch payee
|
||||
// grouping.
|
||||
|
||||
export function fmtTransactionAmount(amount, currency = 'USD') {
|
||||
return formatCentsUSD(amount, { signed: true, currency });
|
||||
}
|
||||
|
||||
export function transactionDate(tx) {
|
||||
return tx?.posted_date || String(tx?.transacted_at || '').slice(0, 10) || null;
|
||||
}
|
||||
|
||||
export function transactionTitle(tx) {
|
||||
return tx?.payee || tx?.description || tx?.memo || 'Transaction';
|
||||
}
|
||||
|
||||
export function normalizePayee(s) {
|
||||
return (s || '').toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
}
|
||||
|
||||
// Two payees are "similar" when one normalized name is a prefix of the other
|
||||
// (min 3 chars) — the grouping used to find related matches to unmatch together.
|
||||
export function isSimilarPayee(a, b) {
|
||||
const na = normalizePayee(a);
|
||||
const nb = normalizePayee(b);
|
||||
const minLen = Math.min(na.length, nb.length);
|
||||
if (minLen < 3) return false;
|
||||
return na.startsWith(nb) || nb.startsWith(na);
|
||||
}
|
||||
Loading…
Reference in New Issue