132 lines
6.0 KiB
JavaScript
132 lines
6.0 KiB
JavaScript
import { Plus, Link2, Pencil, Trash2 } from 'lucide-react';
|
|
import { cn, fmt, fmtDate } from '@/lib/utils';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
function isTransactionLinkedPayment(payment) {
|
|
return payment?.payment_source === 'transaction_match' || payment?.transaction_id != null;
|
|
}
|
|
|
|
function isHistoryOnlyPayment(payment) {
|
|
return !!payment?.accounting_excluded;
|
|
}
|
|
|
|
function paymentSourceLabel(source) {
|
|
const labels = {
|
|
manual: 'Manual',
|
|
file_import: 'File import',
|
|
provider_sync: 'Sync',
|
|
transaction_match: 'Transaction',
|
|
auto_match: 'SimpleFIN',
|
|
};
|
|
return labels[source] || source || 'Manual';
|
|
}
|
|
|
|
function paymentSourceTone(source) {
|
|
const tones = {
|
|
manual: 'border-emerald-500/25 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
|
|
file_import: 'border-sky-500/25 bg-sky-500/10 text-sky-600 dark:text-sky-400',
|
|
provider_sync: 'border-violet-500/25 bg-violet-500/10 text-violet-600 dark:text-violet-400',
|
|
transaction_match: 'border-primary/25 bg-primary/10 text-primary',
|
|
auto_match: 'border-violet-500/25 bg-violet-500/10 text-violet-600 dark:text-violet-400',
|
|
};
|
|
return tones[source] || tones.manual;
|
|
}
|
|
|
|
// Payment-history list for a bill (edit mode): each recorded payment with its
|
|
// source badge, plus edit/remove actions for manual payments (matched and
|
|
// history-only rows are read-only). Presentational — the parent owns the
|
|
// payment state and the add/edit/delete handlers.
|
|
export default function PaymentHistoryList({
|
|
payments,
|
|
paymentsLoading,
|
|
paymentBusy,
|
|
onAdd,
|
|
onEdit,
|
|
onDelete,
|
|
}) {
|
|
return (
|
|
<>
|
|
<div className="mb-3 flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Payment history</p>
|
|
<p className="text-[11px] text-muted-foreground/75">{payments.length} recorded</p>
|
|
</div>
|
|
<Button type="button" size="sm" variant="outline" disabled={paymentBusy} onClick={onAdd} className="h-8 gap-2 text-xs">
|
|
<Plus className="h-3.5 w-3.5" />
|
|
Add Payment
|
|
</Button>
|
|
</div>
|
|
|
|
{paymentsLoading ? (
|
|
<div className="rounded-lg border border-border/60 bg-muted/20 px-3 py-8 text-center text-sm text-muted-foreground">
|
|
Loading payment history...
|
|
</div>
|
|
) : payments.length === 0 ? (
|
|
<div className="flex flex-col items-center gap-1.5 rounded-lg bg-muted/20 px-3 py-8 text-center">
|
|
<p className="text-sm font-medium text-muted-foreground">No payments yet</p>
|
|
<p className="text-xs text-muted-foreground/60">Use the form below to record the first payment.</p>
|
|
</div>
|
|
) : (
|
|
<div className="max-h-52 space-y-2 overflow-y-auto pr-1">
|
|
{payments.map(payment => {
|
|
const linkedPayment = isTransactionLinkedPayment(payment);
|
|
const historyOnly = isHistoryOnlyPayment(payment);
|
|
return (
|
|
<div key={payment.id} className={cn(
|
|
'flex items-start justify-between gap-3 rounded-lg border px-3 py-2.5',
|
|
historyOnly
|
|
? 'border-amber-500/25 bg-amber-500/[0.06] opacity-85'
|
|
: 'border-border/60 bg-background/35'
|
|
)}>
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<p className={cn('font-mono text-sm font-semibold', historyOnly ? 'text-muted-foreground line-through decoration-amber-500/70' : 'text-foreground')}>{fmt(payment.amount)}</p>
|
|
<span className={cn(
|
|
'rounded-md border px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
|
|
paymentSourceTone(payment.payment_source),
|
|
)}>
|
|
{paymentSourceLabel(payment.payment_source)}
|
|
</span>
|
|
{historyOnly && (
|
|
<span className="rounded-md border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-600 dark:text-amber-300">
|
|
History only
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="mt-0.5 truncate text-xs text-muted-foreground">
|
|
{fmtDate(payment.paid_date)} · {payment.method || (payment.payment_source === 'transaction_match' ? 'Synced' : 'manual')}
|
|
</p>
|
|
{payment.notes && (
|
|
<p className="mt-0.5 truncate text-xs text-muted-foreground/80">{payment.notes}</p>
|
|
)}
|
|
</div>
|
|
<div className="flex shrink-0 gap-1">
|
|
{historyOnly ? (
|
|
<span className="inline-flex h-8 items-center rounded-md border border-amber-500/25 bg-amber-500/10 px-2 text-[11px] font-medium text-amber-600 dark:text-amber-300">
|
|
Overridden
|
|
</span>
|
|
) : linkedPayment ? (
|
|
<span className="inline-flex h-8 items-center gap-1.5 rounded-md border border-primary/20 bg-primary/5 px-2 text-[11px] font-medium text-primary">
|
|
<Link2 className="h-3.5 w-3.5" />
|
|
Matched
|
|
</span>
|
|
) : (
|
|
<>
|
|
<Button type="button" size="icon" variant="ghost" disabled={paymentBusy} onClick={() => onEdit(payment)} className="h-8 w-8" aria-label="Edit payment">
|
|
<Pencil className="h-3.5 w-3.5" />
|
|
</Button>
|
|
<Button type="button" size="icon" variant="ghost" disabled={paymentBusy} onClick={() => onDelete(payment)} className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive" aria-label="Remove payment">
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|