1263 lines
55 KiB
JavaScript
1263 lines
55 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import { ChevronDown, Copy, Link2, Link2Off, Loader2, Pencil, Plus, RefreshCw, Trash2 } from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import {
|
|
Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
|
|
} from '@/components/ui/dialog';
|
|
import {
|
|
AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
|
|
AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
|
|
} from '@/components/ui/alert-dialog';
|
|
import {
|
|
Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
|
|
} from '@/components/ui/select';
|
|
import { api } from '@/api';
|
|
import { cn, fmt, fmtDate, todayStr } from '@/lib/utils';
|
|
import BillMerchantRules from '@/components/BillMerchantRules';
|
|
import {
|
|
BILLING_SCHEDULE_OPTIONS,
|
|
billingCycleForSchedule,
|
|
defaultCycleDayForSchedule,
|
|
scheduleValue,
|
|
} from '@/lib/billingSchedule';
|
|
|
|
function getOrdinalSuffix(day) {
|
|
if (day > 3 && day < 21) return 'th';
|
|
switch (day % 10) {
|
|
case 1: return 'st';
|
|
case 2: return 'nd';
|
|
case 3: return 'rd';
|
|
default: return 'th';
|
|
}
|
|
}
|
|
|
|
// Radix Select crashes on empty string value
|
|
const CAT_NONE = 'none';
|
|
const PAYMENT_METHODS = [
|
|
['manual', 'Manual'],
|
|
['bank', 'Bank Transfer'],
|
|
['card', 'Card'],
|
|
['autopay', 'Autopay'],
|
|
['check', 'Check'],
|
|
['cash', 'Cash'],
|
|
];
|
|
|
|
const DEBT_KEYWORDS = ['credit', 'loan', 'mortgage', 'housing', 'debt'];
|
|
const SNOWBALL_KEYWORDS = ['credit', 'loan', 'debt', 'mortgage', 'housing'];
|
|
const SUBSCRIPTION_TYPES = [
|
|
['streaming', 'Streaming'],
|
|
['software', 'Software'],
|
|
['cloud', 'Cloud'],
|
|
['music', 'Music'],
|
|
['news', 'News'],
|
|
['fitness', 'Fitness'],
|
|
['gaming', 'Gaming'],
|
|
['utilities', 'Utilities'],
|
|
['insurance', 'Insurance'],
|
|
['other', 'Other'],
|
|
];
|
|
|
|
function fmtTransactionAmount(amount, currency = 'USD') {
|
|
const cents = Number(amount || 0);
|
|
const value = Math.abs(cents) / 100;
|
|
const sign = cents < 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) || null;
|
|
}
|
|
|
|
function transactionTitle(tx) {
|
|
return tx?.payee || tx?.description || tx?.memo || 'Transaction';
|
|
}
|
|
|
|
function isTransactionLinkedPayment(payment) {
|
|
return payment?.payment_source === 'transaction_match' || payment?.transaction_id != null;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
function isDebtCat(categories, catId) {
|
|
if (!catId || catId === CAT_NONE) return false;
|
|
const cat = categories.find(c => String(c.id) === catId);
|
|
return cat ? DEBT_KEYWORDS.some(kw => cat.name.toLowerCase().includes(kw)) : false;
|
|
}
|
|
function isSnowballCat(categories, catId) {
|
|
if (!catId || catId === CAT_NONE) return false;
|
|
const cat = categories.find(c => String(c.id) === catId);
|
|
return cat ? SNOWBALL_KEYWORDS.some(kw => cat.name.toLowerCase().includes(kw)) : false;
|
|
}
|
|
|
|
export default function BillModal({ bill, initialBill, categories, onClose, onSave, onDuplicate }) {
|
|
const isNew = !bill;
|
|
const sourceBill = bill || initialBill || null;
|
|
|
|
const [name, setName] = useState(sourceBill?.name || '');
|
|
const [categoryId, setCategoryId] = useState(sourceBill?.category_id ? String(sourceBill.category_id) : CAT_NONE);
|
|
const [dueDay, setDueDay] = useState(String(sourceBill?.due_day || ''));
|
|
const [expectedAmount, setExpected] = useState(String(sourceBill?.expected_amount || ''));
|
|
const [interestRate, setInterestRate] = useState(sourceBill?.interest_rate == null ? '' : String(sourceBill.interest_rate));
|
|
const initialCycleType = scheduleValue(sourceBill || {});
|
|
const [cycleType, setCycleType] = useState(initialCycleType);
|
|
const [cycleDay, setCycleDay] = useState(sourceBill?.cycle_day || defaultCycleDayForSchedule(initialCycleType));
|
|
const [autopay, setAutopay] = useState(!!sourceBill?.autopay_enabled);
|
|
const [autodraftStatus, setAutodraftStatus] = useState(sourceBill?.autodraft_status || (sourceBill?.autopay_enabled ? 'assumed_paid' : 'none'));
|
|
const [autoMarkPaid, setAutoMarkPaid] = useState(!!sourceBill?.auto_mark_paid);
|
|
const [isSubscription, setIsSubscription] = useState(!!sourceBill?.is_subscription);
|
|
const [subscriptionType, setSubscriptionType] = useState(sourceBill?.subscription_type || 'other');
|
|
const [reminderDaysBefore, setReminderDaysBefore] = useState(String(sourceBill?.reminder_days_before ?? 3));
|
|
const [has2fa, setHas2fa] = useState(!!sourceBill?.has_2fa);
|
|
const [website, setWebsite] = useState(sourceBill?.website || '');
|
|
const [username, setUsername] = useState(sourceBill?.username || '');
|
|
const [accountInfo, setAccountInfo] = useState(sourceBill?.account_info || '');
|
|
const [notes, setNotes] = useState(sourceBill?.notes || '');
|
|
const [currentBalance, setCurrentBalance] = useState(sourceBill?.current_balance == null ? '' : String(sourceBill.current_balance));
|
|
const [minimumPayment, setMinimumPayment] = useState(sourceBill?.minimum_payment == null ? '' : String(sourceBill.minimum_payment));
|
|
const [snowballInclude, setSnowballInclude] = useState(!!sourceBill?.snowball_include);
|
|
const [snowballExempt, setSnowballExempt] = useState(!!sourceBill?.snowball_exempt);
|
|
const [syncingPayments, setSyncingPayments] = useState(false);
|
|
const [showDebtSection, setShowDebtSection] = useState(
|
|
() => isDebtCat(categories, sourceBill?.category_id ? String(sourceBill.category_id) : CAT_NONE)
|
|
|| !!sourceBill?.snowball_include
|
|
|| !!sourceBill?.snowball_exempt
|
|
|| sourceBill?.current_balance != null
|
|
|| sourceBill?.minimum_payment != null
|
|
);
|
|
const [saveTemplate, setSaveTemplate] = useState(false);
|
|
const [templateName, setTemplateName] = useState('');
|
|
const [busy, setBusy] = useState(false);
|
|
const [errors, setErrors] = useState({});
|
|
const [payments, setPayments] = useState([]);
|
|
const [paymentsLoading, setPaymentsLoading] = useState(false);
|
|
const [linkedTransactions, setLinkedTransactions] = useState([]);
|
|
const [linkedTransactionsLoading, setLinkedTransactionsLoading] = useState(false);
|
|
const [transactionBusyId, setTransactionBusyId] = useState(null);
|
|
const [paymentBusy, setPaymentBusy] = useState(false);
|
|
const [paymentFormOpen, setPaymentFormOpen] = useState(false);
|
|
const [editingPayment, setEditingPayment] = useState(null);
|
|
const [deletePaymentTarget, setDeletePaymentTarget] = useState(null);
|
|
const [paymentAmount, setPaymentAmount] = useState('');
|
|
const [paymentDate, setPaymentDate] = useState(todayStr());
|
|
const [paymentMethod, setPaymentMethod] = useState('manual');
|
|
const [paymentNotes, setPaymentNotes] = useState('');
|
|
|
|
const isDebtCategory = isDebtCat(categories, categoryId);
|
|
const isSnowballCategory = isSnowballCat(categories, categoryId);
|
|
const showOnSnowball = snowballInclude || (isSnowballCategory && !snowballExempt);
|
|
const canAutoMarkPaid = autopay && autodraftStatus === 'assumed_paid';
|
|
|
|
async function loadPayments() {
|
|
if (isNew || !bill?.id) return;
|
|
setPaymentsLoading(true);
|
|
try {
|
|
const data = await api.billPayments(bill.id, 1, 100);
|
|
setPayments(data.payments || []);
|
|
} catch (err) {
|
|
toast.error(err.message || 'Failed to load payment history.');
|
|
} finally {
|
|
setPaymentsLoading(false);
|
|
}
|
|
}
|
|
|
|
async function loadLinkedTransactions() {
|
|
if (isNew || !bill?.id) return;
|
|
setLinkedTransactionsLoading(true);
|
|
try {
|
|
const data = await api.billTransactions(bill.id);
|
|
setLinkedTransactions(data.transactions || []);
|
|
} catch (err) {
|
|
toast.error(err.message || 'Failed to load linked transactions.');
|
|
} finally {
|
|
setLinkedTransactionsLoading(false);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
loadPayments();
|
|
loadLinkedTransactions();
|
|
}, [bill?.id]);
|
|
|
|
const validateName = (val) => {
|
|
if (!val || val.trim() === '') return 'Name is required';
|
|
if (val.trim().length < 2) return 'Name must be at least 2 characters';
|
|
return '';
|
|
};
|
|
|
|
const validateDueDay = (val) => {
|
|
if (!val || val.trim() === '') return 'Due day is required';
|
|
const num = parseInt(val, 10);
|
|
if (isNaN(num) || num < 1 || num > 31) return 'Due day must be between 1 and 31';
|
|
return '';
|
|
};
|
|
|
|
const validateExpectedAmount = (val) => {
|
|
if (val === '' || val === null) return '';
|
|
const num = parseFloat(val);
|
|
if (isNaN(num) || num < 0) return 'Amount must be a positive number';
|
|
return '';
|
|
};
|
|
|
|
const validateInterestRate = (val) => {
|
|
if (val === '' || val === null) return '';
|
|
const num = parseFloat(val);
|
|
if (isNaN(num)) return 'Invalid number';
|
|
if (num < 0 || num > 100) return 'Interest rate must be between 0 and 100';
|
|
return '';
|
|
};
|
|
|
|
const validateCurrentBalance = (val) => {
|
|
if (val === '' || val === null) return '';
|
|
const num = parseFloat(val);
|
|
if (isNaN(num) || num < 0) return 'Balance must be a non-negative number';
|
|
return '';
|
|
};
|
|
|
|
const validateMinimumPayment = (val) => {
|
|
if (val === '' || val === null) return '';
|
|
const num = parseFloat(val);
|
|
if (isNaN(num) || num < 0) return 'Min payment must be a non-negative number';
|
|
return '';
|
|
};
|
|
|
|
const validateForm = () => {
|
|
const newErrors = {
|
|
name: validateName(name),
|
|
dueDay: validateDueDay(dueDay),
|
|
expectedAmount: validateExpectedAmount(expectedAmount),
|
|
interestRate: validateInterestRate(interestRate),
|
|
currentBalance: validateCurrentBalance(currentBalance),
|
|
minimumPayment: validateMinimumPayment(minimumPayment),
|
|
};
|
|
setErrors(newErrors);
|
|
return Object.values(newErrors).every(err => err === '');
|
|
};
|
|
|
|
const handleBlur = (field, validator) => {
|
|
setErrors(prev => ({ ...prev, [field]: validator(
|
|
field === 'name' ? name :
|
|
field === 'dueDay' ? dueDay :
|
|
field === 'expectedAmount' ? expectedAmount :
|
|
interestRate
|
|
)}));
|
|
};
|
|
|
|
const handleCategoryChange = (val) => {
|
|
setCategoryId(val);
|
|
if (isDebtCat(categories, val)) {
|
|
setShowDebtSection(true);
|
|
} else {
|
|
setSnowballExempt(false);
|
|
}
|
|
};
|
|
|
|
const handleSnowballVisibilityChange = (checked) => {
|
|
if (checked) {
|
|
setSnowballExempt(false);
|
|
setSnowballInclude(!isSnowballCategory);
|
|
} else {
|
|
setSnowballInclude(false);
|
|
setSnowballExempt(isSnowballCategory);
|
|
}
|
|
};
|
|
|
|
const handleAutopayChange = (checked) => {
|
|
setAutopay(checked);
|
|
if (checked) {
|
|
setAutodraftStatus(prev => (prev && prev !== 'none' ? prev : 'assumed_paid'));
|
|
} else {
|
|
setAutodraftStatus('none');
|
|
setAutoMarkPaid(false);
|
|
}
|
|
};
|
|
|
|
const handleCycleTypeChange = (value) => {
|
|
setCycleType(value);
|
|
setCycleDay(defaultCycleDayForSchedule(value));
|
|
};
|
|
|
|
function resetPaymentForm() {
|
|
setPaymentAmount('');
|
|
setPaymentDate(todayStr());
|
|
setPaymentMethod('manual');
|
|
setPaymentNotes('');
|
|
setEditingPayment(null);
|
|
}
|
|
|
|
function startAddPayment() {
|
|
resetPaymentForm();
|
|
setPaymentFormOpen(true);
|
|
}
|
|
|
|
function startEditPayment(payment) {
|
|
setEditingPayment(payment);
|
|
setPaymentAmount(String(payment.amount ?? ''));
|
|
setPaymentDate(payment.paid_date || todayStr());
|
|
setPaymentMethod(payment.method || 'manual');
|
|
setPaymentNotes(payment.notes || '');
|
|
setPaymentFormOpen(true);
|
|
}
|
|
|
|
async function handlePaymentSubmit(e) {
|
|
e.preventDefault();
|
|
const parsedAmount = parseFloat(paymentAmount);
|
|
if (!Number.isFinite(parsedAmount) || parsedAmount <= 0) {
|
|
toast.error('Enter a positive payment amount.');
|
|
return;
|
|
}
|
|
if (!paymentDate) {
|
|
toast.error('Choose a paid date.');
|
|
return;
|
|
}
|
|
|
|
setPaymentBusy(true);
|
|
try {
|
|
const payload = {
|
|
amount: parsedAmount,
|
|
paid_date: paymentDate,
|
|
method: paymentMethod,
|
|
notes: paymentNotes || null,
|
|
payment_source: 'manual',
|
|
};
|
|
if (editingPayment) {
|
|
await api.updatePayment(editingPayment.id, payload);
|
|
toast.success('Payment updated');
|
|
} else {
|
|
await api.createPayment({ ...payload, bill_id: bill.id });
|
|
toast.success('Payment added');
|
|
}
|
|
resetPaymentForm();
|
|
setPaymentFormOpen(false);
|
|
await loadPayments();
|
|
onSave?.();
|
|
} catch (err) {
|
|
toast.error(err.message || 'Payment could not be saved.');
|
|
} finally {
|
|
setPaymentBusy(false);
|
|
}
|
|
}
|
|
|
|
async function handleDeletePayment() {
|
|
if (!deletePaymentTarget) return;
|
|
const payment = deletePaymentTarget;
|
|
setPaymentBusy(true);
|
|
try {
|
|
await api.deletePayment(payment.id);
|
|
setDeletePaymentTarget(null);
|
|
toast.success('Payment moved to recovery.', {
|
|
action: {
|
|
label: 'Undo',
|
|
onClick: async () => {
|
|
try {
|
|
await api.restorePayment(payment.id);
|
|
toast.success('Payment restored');
|
|
await loadPayments();
|
|
onSave?.();
|
|
} catch (err) {
|
|
toast.error(err.message || 'Failed to restore payment.');
|
|
}
|
|
},
|
|
},
|
|
});
|
|
if (editingPayment?.id === payment.id) {
|
|
resetPaymentForm();
|
|
setPaymentFormOpen(false);
|
|
}
|
|
await loadPayments();
|
|
onSave?.();
|
|
} catch (err) {
|
|
toast.error(err.message || 'Payment could not be removed.');
|
|
} finally {
|
|
setPaymentBusy(false);
|
|
}
|
|
}
|
|
|
|
async function handleUnmatchTransaction(transaction) {
|
|
if (!transaction?.id) return;
|
|
setTransactionBusyId(transaction.id);
|
|
try {
|
|
await api.unmatchTransaction(transaction.id);
|
|
toast.success('Transaction unmatched');
|
|
await Promise.all([loadPayments(), loadLinkedTransactions()]);
|
|
onSave?.();
|
|
} catch (err) {
|
|
toast.error(err.message || 'Transaction could not be unmatched.');
|
|
} finally {
|
|
setTransactionBusyId(null);
|
|
}
|
|
}
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
if (!validateForm()) {
|
|
toast.error('Please fix the form errors before saving.');
|
|
return;
|
|
}
|
|
|
|
const parsedDueDay = Number(dueDay);
|
|
if (!Number.isInteger(parsedDueDay) || parsedDueDay < 1 || parsedDueDay > 31) {
|
|
toast.error('Due day must be a whole number from 1 to 31.');
|
|
return;
|
|
}
|
|
|
|
const trimmedInterestRate = interestRate.trim();
|
|
const parsedInterestRate = trimmedInterestRate === '' ? null : Number(trimmedInterestRate);
|
|
if (parsedInterestRate !== null && (!Number.isFinite(parsedInterestRate) || parsedInterestRate < 0 || parsedInterestRate > 100)) {
|
|
toast.error('Interest rate must be blank or a number from 0 to 100.');
|
|
return;
|
|
}
|
|
|
|
const data = {
|
|
source_bill_id: sourceBill?.source_bill_id,
|
|
name: name.trim(),
|
|
category_id: categoryId === CAT_NONE ? null : parseInt(categoryId, 10),
|
|
due_day: parsedDueDay,
|
|
override_due_date: sourceBill?.override_due_date,
|
|
expected_amount: parseFloat(expectedAmount) || 0,
|
|
interest_rate: parsedInterestRate,
|
|
billing_cycle: billingCycleForSchedule(cycleType),
|
|
cycle_type: cycleType,
|
|
cycle_day: cycleDay,
|
|
autopay_enabled: autopay,
|
|
autodraft_status: autopay ? autodraftStatus : 'none',
|
|
auto_mark_paid: canAutoMarkPaid && autoMarkPaid,
|
|
is_subscription: isSubscription,
|
|
subscription_type: isSubscription ? subscriptionType : null,
|
|
reminder_days_before: isSubscription ? parseInt(reminderDaysBefore || '3', 10) : 3,
|
|
subscription_source: sourceBill?.subscription_source || 'manual',
|
|
subscription_detected_at: sourceBill?.subscription_detected_at,
|
|
has_2fa: has2fa,
|
|
website: website || null,
|
|
username: username || null,
|
|
account_info: accountInfo || null,
|
|
notes: notes || null,
|
|
history_visibility: sourceBill?.history_visibility,
|
|
current_balance: currentBalance === '' ? null : parseFloat(currentBalance),
|
|
minimum_payment: minimumPayment === '' ? null : parseFloat(minimumPayment),
|
|
snowball_order: sourceBill?.snowball_order,
|
|
snowball_include: snowballInclude,
|
|
snowball_exempt: snowballExempt,
|
|
};
|
|
setBusy(true);
|
|
try {
|
|
let savedBill;
|
|
if (isNew) {
|
|
if (data.source_bill_id) {
|
|
savedBill = await api.duplicateBill(data.source_bill_id, data);
|
|
} else {
|
|
savedBill = await api.createBill(data);
|
|
}
|
|
toast.success('Bill added');
|
|
} else {
|
|
savedBill = await api.updateBill(bill.id, data);
|
|
toast.success('Bill updated');
|
|
}
|
|
if (saveTemplate) {
|
|
const safeTemplateName = templateName.trim() || data.name;
|
|
await api.saveBillTemplate({ name: safeTemplateName, data });
|
|
toast.success('Template saved');
|
|
}
|
|
onSave(savedBill);
|
|
onClose();
|
|
} catch (err) {
|
|
toast.error(err.message);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
const inp = 'bg-background/50 border-border/60 h-9 text-sm w-full';
|
|
|
|
return (
|
|
<Dialog open onOpenChange={v => { if (!v) onClose(); }}>
|
|
<DialogContent className="max-h-[92svh] overflow-y-auto border-border/60 bg-card/95 backdrop-blur-xl sm:max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-base font-semibold tracking-tight">
|
|
{isNew ? 'Add Bill' : 'Edit Bill'}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<form id="bill-modal-form" onSubmit={handleSubmit}>
|
|
<div className="grid gap-x-5 gap-y-4 py-2 sm:grid-cols-2">
|
|
|
|
{/* Name */}
|
|
<div className="col-span-2 space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Name *</Label>
|
|
<Input
|
|
className={cn(inp, errors.name && 'border-red-500 focus-visible:ring-red-500')}
|
|
placeholder="e.g. Electricity"
|
|
value={name}
|
|
onChange={e => {
|
|
setName(e.target.value);
|
|
setTimeout(() => setErrors(prev => ({ ...prev, name: validateName(e.target.value) })), 300);
|
|
}}
|
|
onBlur={() => handleBlur('name', validateName)}
|
|
required
|
|
/>
|
|
{errors.name && (
|
|
<span className="text-[10px] text-red-500 font-medium">{errors.name}</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Category */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Category</Label>
|
|
<Select value={categoryId} onValueChange={handleCategoryChange}>
|
|
<SelectTrigger className={cn(inp, 'w-full')}>
|
|
<SelectValue placeholder="— none —" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value={CAT_NONE}>— none —</SelectItem>
|
|
{categories.map(c => (
|
|
<SelectItem key={c.id} value={String(c.id)}>{c.name}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Due Day */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Due day of month *</Label>
|
|
<Input
|
|
className={cn(inp, errors.dueDay && 'border-red-500 focus-visible:ring-red-500')}
|
|
type="number" min="1" max="31" required
|
|
value={dueDay}
|
|
onChange={e => {
|
|
setDueDay(e.target.value);
|
|
setTimeout(() => setErrors(prev => ({ ...prev, dueDay: validateDueDay(e.target.value) })), 300);
|
|
}}
|
|
onBlur={() => handleBlur('dueDay', validateDueDay)}
|
|
/>
|
|
{errors.dueDay && (
|
|
<span className="text-[10px] text-red-500 font-medium">{errors.dueDay}</span>
|
|
)}
|
|
<p className="text-[10px] text-muted-foreground/70">
|
|
Enter the day of the month this bill is due.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Expected Amount */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Expected Amount ($)</Label>
|
|
<Input
|
|
className={cn(inp, 'font-mono', errors.expectedAmount && 'border-red-500 focus-visible:ring-red-500')}
|
|
type="number" min="0" step="0.01" placeholder="0.00"
|
|
value={expectedAmount}
|
|
onChange={e => {
|
|
setExpected(e.target.value);
|
|
setTimeout(() => setErrors(prev => ({ ...prev, expectedAmount: validateExpectedAmount(e.target.value) })), 300);
|
|
}}
|
|
onBlur={() => handleBlur('expectedAmount', validateExpectedAmount)}
|
|
/>
|
|
{errors.expectedAmount && (
|
|
<span className="text-[10px] text-red-500 font-medium">{errors.expectedAmount}</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Billing Schedule */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Billing Schedule</Label>
|
|
<Select value={cycleType} onValueChange={handleCycleTypeChange}>
|
|
<SelectTrigger className={cn(inp, 'w-full')}>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{BILLING_SCHEDULE_OPTIONS.map(([value, label]) => (
|
|
<SelectItem key={value} value={value}>{label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Cycle Day */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Cycle Day</Label>
|
|
{cycleType === 'monthly' ? (
|
|
<Select value={cycleDay} onValueChange={setCycleDay}>
|
|
<SelectTrigger className={cn(inp, 'w-full')}>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{[...Array(31)].map((_, i) => (
|
|
<SelectItem key={i+1} value={String(i+1)}>{i+1}{getOrdinalSuffix(i+1)}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : cycleType === 'weekly' || cycleType === 'biweekly' ? (
|
|
<Select value={cycleDay} onValueChange={setCycleDay}>
|
|
<SelectTrigger className={cn(inp, 'w-full')}>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="monday">Monday</SelectItem>
|
|
<SelectItem value="tuesday">Tuesday</SelectItem>
|
|
<SelectItem value="wednesday">Wednesday</SelectItem>
|
|
<SelectItem value="thursday">Thursday</SelectItem>
|
|
<SelectItem value="friday">Friday</SelectItem>
|
|
<SelectItem value="saturday">Saturday</SelectItem>
|
|
<SelectItem value="sunday">Sunday</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<Select value={cycleDay} onValueChange={setCycleDay}>
|
|
<SelectTrigger className={cn(inp, 'w-full')}>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{[
|
|
'January', 'February', 'March', 'April', 'May', 'June',
|
|
'July', 'August', 'September', 'October', 'November', 'December',
|
|
].map((label, index) => (
|
|
<SelectItem key={label} value={String(index + 1)}>{label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
)}
|
|
<p className="text-[10px] text-muted-foreground/70">
|
|
{cycleType === 'monthly' ? 'Day of the month' :
|
|
cycleType === 'weekly' || cycleType === 'biweekly' ? 'Day of the week' :
|
|
cycleType === 'quarterly' ? 'First month of the quarterly cycle' :
|
|
'Month due each year'}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Subscription Details */}
|
|
<div className="col-span-2 rounded-lg border border-border/60 bg-muted/20 p-3">
|
|
<label className="flex items-start gap-2.5 cursor-pointer group">
|
|
<input
|
|
type="checkbox"
|
|
checked={isSubscription}
|
|
onChange={e => setIsSubscription(e.target.checked)}
|
|
className="mt-0.5 h-4 w-4 rounded border-border accent-primary"
|
|
/>
|
|
<span>
|
|
<span className="block text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors">
|
|
Track as subscription
|
|
</span>
|
|
<span className="mt-0.5 block text-[10px] text-muted-foreground/70">
|
|
Adds this bill to the subscription view with monthly equivalent cost and SimpleFIN recommendation matching.
|
|
</span>
|
|
</span>
|
|
</label>
|
|
|
|
{isSubscription && (
|
|
<div className="mt-3 grid gap-3 border-t border-border/40 pt-3 sm:grid-cols-2">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Subscription Type</Label>
|
|
<Select value={subscriptionType} onValueChange={setSubscriptionType}>
|
|
<SelectTrigger className={cn(inp, 'w-full')}>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{SUBSCRIPTION_TYPES.map(([value, label]) => (
|
|
<SelectItem key={value} value={value}>{label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Reminder Days</Label>
|
|
<Input
|
|
className={cn(inp, 'tracker-number')}
|
|
type="number"
|
|
min="0"
|
|
max="30"
|
|
value={reminderDaysBefore}
|
|
onChange={e => setReminderDaysBefore(e.target.value)}
|
|
/>
|
|
<p className="text-[10px] text-muted-foreground/70">0-30 days before renewal.</p>
|
|
</div>
|
|
{!isNew && (sourceBill?.has_merchant_rule || ['simplefin_recommendation', 'catalog_match'].includes(sourceBill?.subscription_source)) ? (
|
|
<div className="col-span-2 border-t border-border/40 pt-3">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs font-medium text-muted-foreground">SimpleFIN payment history</p>
|
|
<p className="text-[10px] text-muted-foreground/70 mt-0.5">
|
|
Scan unmatched bank transactions and backfill any missing payments.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="outline"
|
|
className="shrink-0 gap-1.5"
|
|
disabled={syncingPayments}
|
|
onClick={async () => {
|
|
setSyncingPayments(true);
|
|
try {
|
|
const result = await api.syncBillSimplefinPayments(sourceBill.id);
|
|
if (result.added > 0) {
|
|
toast.success(`Synced ${result.added} payment${result.added !== 1 ? 's' : ''} from SimpleFIN.`);
|
|
} else {
|
|
toast.info('No new payments found in SimpleFIN history.');
|
|
}
|
|
} catch (err) {
|
|
toast.error(err.message || 'Sync failed.');
|
|
} finally {
|
|
setSyncingPayments(false);
|
|
}
|
|
}}
|
|
>
|
|
{syncingPayments
|
|
? <><Loader2 className="h-3.5 w-3.5 animate-spin" />Syncing…</>
|
|
: <><RefreshCw className="h-3.5 w-3.5" />Sync payments</>}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Debt / Snowball Details — collapsible */}
|
|
<div className="col-span-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowDebtSection(s => !s)}
|
|
className="flex items-center gap-2 text-xs uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors w-full text-left py-1"
|
|
>
|
|
<ChevronDown
|
|
className={cn('h-3.5 w-3.5 transition-transform duration-150', !showDebtSection && '-rotate-90')}
|
|
/>
|
|
Debt / Snowball Details
|
|
{isSnowballCategory && (
|
|
<span className="ml-1 text-[9px] text-emerald-400 font-semibold tracking-normal normal-case">
|
|
· snowball auto-detected
|
|
</span>
|
|
)}
|
|
{!showOnSnowball && isSnowballCategory && (
|
|
<span className="ml-1 text-[9px] text-amber-400 font-semibold tracking-normal normal-case">
|
|
· exempt
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
{showDebtSection && (
|
|
<div className="grid sm:grid-cols-2 gap-x-5 gap-y-4 mt-3 pt-3 border-t border-border/40">
|
|
|
|
{/* Interest Rate */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Interest rate (APR %)</Label>
|
|
<Input
|
|
className={cn(inp, 'font-mono', errors.interestRate && 'border-red-500 focus-visible:ring-red-500')}
|
|
type="number" min="0" max="100" step="0.01" placeholder="Optional"
|
|
value={interestRate}
|
|
onChange={e => {
|
|
setInterestRate(e.target.value);
|
|
setTimeout(() => setErrors(prev => ({ ...prev, interestRate: validateInterestRate(e.target.value) })), 300);
|
|
}}
|
|
onBlur={() => handleBlur('interestRate', validateInterestRate)}
|
|
/>
|
|
{errors.interestRate && (
|
|
<span className="text-[10px] text-red-500 font-medium">{errors.interestRate}</span>
|
|
)}
|
|
<p className="text-[10px] text-muted-foreground/70">Enter 29.99 for 29.99%.</p>
|
|
</div>
|
|
|
|
{/* Current Balance */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Current Balance ($)</Label>
|
|
<Input
|
|
className={cn(inp, 'font-mono', errors.currentBalance && 'border-red-500 focus-visible:ring-red-500')}
|
|
type="number" min="0" step="0.01" placeholder="Optional"
|
|
value={currentBalance}
|
|
onChange={e => {
|
|
setCurrentBalance(e.target.value);
|
|
setTimeout(() => setErrors(prev => ({ ...prev, currentBalance: validateCurrentBalance(e.target.value) })), 300);
|
|
}}
|
|
onBlur={() => setErrors(prev => ({ ...prev, currentBalance: validateCurrentBalance(currentBalance) }))}
|
|
/>
|
|
{errors.currentBalance && (
|
|
<span className="text-[10px] text-red-500 font-medium">{errors.currentBalance}</span>
|
|
)}
|
|
<p className="text-[10px] text-muted-foreground/70">Outstanding debt balance.</p>
|
|
</div>
|
|
|
|
{/* Minimum Payment */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Minimum Payment ($)</Label>
|
|
<Input
|
|
className={cn(inp, 'font-mono', errors.minimumPayment && 'border-red-500 focus-visible:ring-red-500')}
|
|
type="number" min="0" step="0.01" placeholder="Optional"
|
|
value={minimumPayment}
|
|
onChange={e => {
|
|
setMinimumPayment(e.target.value);
|
|
setTimeout(() => setErrors(prev => ({ ...prev, minimumPayment: validateMinimumPayment(e.target.value) })), 300);
|
|
}}
|
|
onBlur={() => setErrors(prev => ({ ...prev, minimumPayment: validateMinimumPayment(minimumPayment) }))}
|
|
/>
|
|
{errors.minimumPayment && (
|
|
<span className="text-[10px] text-red-500 font-medium">{errors.minimumPayment}</span>
|
|
)}
|
|
<p className="text-[10px] text-muted-foreground/70">Required minimum monthly payment.</p>
|
|
</div>
|
|
|
|
{/* Include in Snowball */}
|
|
<div className="flex flex-col justify-end pb-1 space-y-1">
|
|
<label className="flex items-center gap-2.5 cursor-pointer group">
|
|
<input
|
|
type="checkbox"
|
|
checked={showOnSnowball}
|
|
onChange={e => handleSnowballVisibilityChange(e.target.checked)}
|
|
className="h-4 w-4 rounded border-border accent-emerald-500"
|
|
/>
|
|
<span className="text-sm text-muted-foreground group-hover:text-foreground transition-colors">
|
|
Show on Debt Snowball
|
|
</span>
|
|
</label>
|
|
<p className="text-[10px] text-muted-foreground/70 pl-6">
|
|
Uncheck to exempt an auto-detected snowball bill, or check to include this bill manually.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Website */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Website</Label>
|
|
<Input
|
|
className={inp}
|
|
placeholder="https://…"
|
|
value={website}
|
|
onChange={e => setWebsite(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Username */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Username / Email</Label>
|
|
<Input
|
|
className={inp}
|
|
value={username}
|
|
onChange={e => setUsername(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Account Info */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Account Info</Label>
|
|
<Input
|
|
className={inp}
|
|
placeholder="Last 4 digits, account #…"
|
|
value={accountInfo}
|
|
onChange={e => setAccountInfo(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Checkboxes */}
|
|
<div className="space-y-2.5 flex flex-col justify-end">
|
|
<label className="flex items-center gap-2.5 cursor-pointer group">
|
|
<input
|
|
type="checkbox"
|
|
checked={autopay}
|
|
onChange={e => handleAutopayChange(e.target.checked)}
|
|
className="h-4 w-4 rounded border-border accent-emerald-500"
|
|
/>
|
|
<span className="text-sm text-muted-foreground group-hover:text-foreground transition-colors">
|
|
Autopay / Autodraft
|
|
</span>
|
|
</label>
|
|
<label
|
|
className={cn('flex items-center gap-2.5 group', canAutoMarkPaid ? 'cursor-pointer' : 'cursor-not-allowed opacity-50')}
|
|
title={canAutoMarkPaid ? undefined : 'Auto-mark requires Autodraft Status set to Assumed paid'}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={canAutoMarkPaid && autoMarkPaid}
|
|
onChange={e => setAutoMarkPaid(e.target.checked)}
|
|
disabled={!canAutoMarkPaid}
|
|
className="h-4 w-4 rounded border-border accent-sky-500"
|
|
/>
|
|
<span className="text-sm text-muted-foreground group-hover:text-foreground transition-colors">
|
|
Auto-mark paid on due date
|
|
</span>
|
|
</label>
|
|
<label className="flex items-center gap-2.5 cursor-pointer group">
|
|
<input
|
|
type="checkbox"
|
|
checked={has2fa}
|
|
onChange={e => setHas2fa(e.target.checked)}
|
|
className="h-4 w-4 rounded border-border accent-violet-500"
|
|
/>
|
|
<span className="text-sm text-muted-foreground group-hover:text-foreground transition-colors">
|
|
Has 2FA
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Autodraft Status</Label>
|
|
<Select value={autodraftStatus} onValueChange={setAutodraftStatus} disabled={!autopay}>
|
|
<SelectTrigger className={cn(inp, !autopay && 'opacity-60')}>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="none">None</SelectItem>
|
|
<SelectItem value="pending">Pending</SelectItem>
|
|
<SelectItem value="assumed_paid">Assumed paid</SelectItem>
|
|
<SelectItem value="confirmed">Confirmed</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Notes */}
|
|
<div className="col-span-2 space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Notes</Label>
|
|
<textarea
|
|
rows={2}
|
|
value={notes}
|
|
onChange={e => setNotes(e.target.value)}
|
|
className={cn(
|
|
'w-full rounded-md border border-border/60 bg-background/50 px-3 py-2',
|
|
'text-sm text-foreground placeholder:text-muted-foreground/50',
|
|
'resize-none outline-none focus:ring-1 focus:ring-ring transition-shadow',
|
|
)}
|
|
placeholder="Any additional notes…"
|
|
/>
|
|
</div>
|
|
|
|
<div className="col-span-2 rounded-lg border border-border/60 bg-muted/20 p-3">
|
|
<label className="flex items-center gap-2.5 cursor-pointer group">
|
|
<input
|
|
type="checkbox"
|
|
checked={saveTemplate}
|
|
onChange={e => setSaveTemplate(e.target.checked)}
|
|
className="h-4 w-4 rounded border-border accent-primary"
|
|
/>
|
|
<span className="text-sm text-muted-foreground group-hover:text-foreground transition-colors">
|
|
Save this setup as a reusable template
|
|
</span>
|
|
</label>
|
|
{saveTemplate && (
|
|
<div className="mt-2 space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Template Name</Label>
|
|
<Input
|
|
className={inp}
|
|
value={templateName}
|
|
onChange={e => setTemplateName(e.target.value)}
|
|
placeholder={name || 'My bill template'}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
|
|
{!isNew && (
|
|
<div className="mt-4 border-t border-border/50 pt-4">
|
|
<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={startAddPayment} 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="rounded-lg border border-dashed border-border/70 px-3 py-8 text-center text-sm text-muted-foreground">
|
|
No payments recorded for this bill.
|
|
</div>
|
|
) : (
|
|
<div className="max-h-52 space-y-2 overflow-y-auto pr-1">
|
|
{payments.map(payment => {
|
|
const linkedPayment = isTransactionLinkedPayment(payment);
|
|
return (
|
|
<div key={payment.id} className="flex items-start justify-between gap-3 rounded-lg border border-border/60 bg-background/35 px-3 py-2.5">
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<p className="font-mono text-sm font-semibold 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>
|
|
</div>
|
|
<p className="mt-0.5 truncate text-xs text-muted-foreground">
|
|
{fmtDate(payment.paid_date)} · {payment.method || '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">
|
|
{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={() => startEditPayment(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={() => setDeletePaymentTarget(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>
|
|
)}
|
|
|
|
{/* Bank Matching Rules */}
|
|
{!isNew && (
|
|
<div className="mt-4 rounded-lg border border-border/60 bg-background/35">
|
|
<div className="border-b border-border/50 px-3 py-2.5">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Bank matching rules</p>
|
|
<p className="mt-0.5 text-[11px] text-muted-foreground/70">
|
|
Transactions whose description contains these patterns are automatically imported as payments.
|
|
</p>
|
|
</div>
|
|
<div className="px-3 py-3">
|
|
<BillMerchantRules
|
|
billId={sourceBill?.id}
|
|
onRulesChanged={() => {
|
|
refetch?.();
|
|
loadLinkedTransactions?.();
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-4 rounded-lg border border-border/60 bg-background/35">
|
|
<div className="flex items-center justify-between gap-3 border-b border-border/50 px-3 py-2.5">
|
|
<div className="min-w-0">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Linked transactions</p>
|
|
<p className="text-[11px] text-muted-foreground/75">{linkedTransactions.length} confirmed matches</p>
|
|
</div>
|
|
<span className={cn(
|
|
'inline-flex h-7 items-center gap-1.5 rounded-md border px-2 text-[11px] font-medium',
|
|
linkedTransactions.length > 0
|
|
? 'border-primary/20 bg-primary/5 text-primary'
|
|
: 'border-border/60 bg-muted/30 text-muted-foreground',
|
|
)}>
|
|
<Link2 className="h-3.5 w-3.5" />
|
|
{linkedTransactions.length}
|
|
</span>
|
|
</div>
|
|
|
|
{linkedTransactionsLoading ? (
|
|
<div className="px-3 py-8 text-center text-sm text-muted-foreground">
|
|
Loading linked transactions...
|
|
</div>
|
|
) : linkedTransactions.length === 0 ? (
|
|
<div className="flex items-center justify-center gap-2 px-3 py-8 text-sm text-muted-foreground">
|
|
<Link2Off className="h-4 w-4" />
|
|
No transactions linked to this bill yet.
|
|
</div>
|
|
) : (
|
|
<div className="max-h-56 divide-y divide-border/40 overflow-y-auto">
|
|
{linkedTransactions.map(transaction => (
|
|
<div key={transaction.id} className="flex items-start justify-between gap-3 px-3 py-3">
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<p className="truncate text-sm font-medium text-foreground">{transactionTitle(transaction)}</p>
|
|
<span className="rounded-md border border-border/60 bg-muted/40 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
|
|
{transaction.source_label || transaction.source_type_label || 'Transaction'}
|
|
</span>
|
|
</div>
|
|
<p className="mt-0.5 truncate text-xs text-muted-foreground">
|
|
{transactionDate(transaction) ? fmtDate(transactionDate(transaction)) : 'No date'} · {transaction.description || transaction.memo || 'No description'}
|
|
</p>
|
|
{transaction.account_name && (
|
|
<p className="mt-0.5 truncate text-[11px] text-muted-foreground/75">{transaction.account_name}</p>
|
|
)}
|
|
</div>
|
|
<div className="flex shrink-0 flex-col items-end gap-2 sm:flex-row sm:items-center">
|
|
<p className={cn(
|
|
'font-mono text-sm font-semibold tabular-nums',
|
|
Number(transaction.amount) < 0 ? 'text-destructive' : 'text-emerald-600',
|
|
)}>
|
|
{fmtTransactionAmount(transaction.amount, transaction.currency)}
|
|
</p>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={transactionBusyId === transaction.id}
|
|
onClick={() => handleUnmatchTransaction(transaction)}
|
|
className="h-8 gap-1.5 text-xs"
|
|
>
|
|
<Link2Off className="h-3.5 w-3.5" />
|
|
{transactionBusyId === transaction.id ? 'Unmatching...' : 'Unmatch'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{paymentFormOpen && (
|
|
<form onSubmit={handlePaymentSubmit} className="mt-3 rounded-lg border border-border/60 bg-muted/20 p-3">
|
|
<div className="mb-3 flex items-center justify-between gap-3">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
{editingPayment ? 'Edit payment' : 'Add payment'}
|
|
</p>
|
|
<span className="rounded-md border border-emerald-500/25 bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-600 dark:text-emerald-400">
|
|
manual
|
|
</span>
|
|
</div>
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Amount ($)</Label>
|
|
<Input
|
|
type="number"
|
|
min="0"
|
|
step="0.01"
|
|
value={paymentAmount}
|
|
onChange={e => setPaymentAmount(e.target.value)}
|
|
className={cn(inp, 'font-mono')}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Paid Date</Label>
|
|
<Input
|
|
type="date"
|
|
value={paymentDate}
|
|
onChange={e => setPaymentDate(e.target.value)}
|
|
className={cn(inp, 'font-mono')}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Method</Label>
|
|
<Select value={paymentMethod} onValueChange={setPaymentMethod}>
|
|
<SelectTrigger className={cn(inp, 'w-full')}>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{PAYMENT_METHODS.map(([value, label]) => (
|
|
<SelectItem key={value} value={value}>{label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Notes</Label>
|
|
<Input
|
|
value={paymentNotes}
|
|
onChange={e => setPaymentNotes(e.target.value)}
|
|
className={inp}
|
|
placeholder="Paid from checking"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mt-3 flex justify-end gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
disabled={paymentBusy}
|
|
onClick={() => {
|
|
resetPaymentForm();
|
|
setPaymentFormOpen(false);
|
|
}}
|
|
className="text-xs"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" disabled={paymentBusy} className="text-xs">
|
|
{paymentBusy ? 'Saving...' : editingPayment ? 'Save Payment' : 'Add Payment'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<DialogFooter className="mt-2 gap-2 sm:justify-between">
|
|
{!isNew && onDuplicate && (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
disabled={busy}
|
|
onClick={() => onDuplicate(bill)}
|
|
className="gap-2 text-xs"
|
|
>
|
|
<Copy className="h-3.5 w-3.5" />
|
|
Duplicate
|
|
</Button>
|
|
)}
|
|
<div className="flex gap-2">
|
|
<Button type="button" variant="ghost" disabled={busy} onClick={onClose} className="text-xs">
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" form="bill-modal-form" disabled={busy} className="text-xs">
|
|
{isNew ? 'Add Bill' : 'Save Changes'}
|
|
</Button>
|
|
</div>
|
|
</DialogFooter>
|
|
|
|
<AlertDialog
|
|
open={!!deletePaymentTarget}
|
|
onOpenChange={open => {
|
|
if (!open && !paymentBusy) setDeletePaymentTarget(null);
|
|
}}
|
|
>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Remove this payment?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
This moves the payment to recovery and removes it from bill status calculations.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={paymentBusy}>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
disabled={paymentBusy}
|
|
onClick={handleDeletePayment}
|
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
|
>
|
|
{paymentBusy ? 'Removing...' : 'Remove Payment'}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|