728 lines
25 KiB
React
728 lines
25 KiB
React
|
import { useState, useEffect, useCallback, useRef } from 'react';
|
|||
|
|
import { toast } from 'sonner';
|
|||
|
|
import { ChevronLeft, ChevronRight, MoreHorizontal, ReceiptText } from 'lucide-react';
|
|||
|
|
import { api } from '@/api.js';
|
|||
|
|
import { cn, fmt, fmtDate, todayStr } from '@/lib/utils';
|
|||
|
|
import { Button, buttonVariants } 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,
|
|||
|
|
AlertDialogContent,
|
|||
|
|
AlertDialogHeader,
|
|||
|
|
AlertDialogFooter,
|
|||
|
|
AlertDialogTitle,
|
|||
|
|
AlertDialogDescription,
|
|||
|
|
AlertDialogCancel,
|
|||
|
|
AlertDialogAction,
|
|||
|
|
} from '@/components/ui/alert-dialog';
|
|||
|
|
import {
|
|||
|
|
DropdownMenu,
|
|||
|
|
DropdownMenuTrigger,
|
|||
|
|
DropdownMenuContent,
|
|||
|
|
DropdownMenuItem,
|
|||
|
|
DropdownMenuSeparator,
|
|||
|
|
} from '@/components/ui/dropdown-menu';
|
|||
|
|
import {
|
|||
|
|
Select,
|
|||
|
|
SelectTrigger,
|
|||
|
|
SelectValue,
|
|||
|
|
SelectContent,
|
|||
|
|
SelectItem,
|
|||
|
|
} from '@/components/ui/select';
|
|||
|
|
import {
|
|||
|
|
Table,
|
|||
|
|
TableHeader,
|
|||
|
|
TableBody,
|
|||
|
|
TableHead,
|
|||
|
|
TableRow,
|
|||
|
|
TableCell,
|
|||
|
|
} from '@/components/ui/table';
|
|||
|
|
|
|||
|
|
// ─── Constants ────────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
const MONTH_NAMES = [
|
|||
|
|
'January', 'February', 'March', 'April', 'May', 'June',
|
|||
|
|
'July', 'August', 'September', 'October', 'November', 'December',
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const PAYMENT_METHODS = [
|
|||
|
|
{ value: 'bank_transfer', label: 'Bank Transfer' },
|
|||
|
|
{ value: 'card', label: 'Card' },
|
|||
|
|
{ value: 'autopay', label: 'Autopay' },
|
|||
|
|
{ value: 'check', label: 'Check' },
|
|||
|
|
{ value: 'cash', label: 'Cash' },
|
|||
|
|
{ value: 'other', label: 'Other' },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// ─── Status Config ────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
const STATUS = {
|
|||
|
|
paid: { label: 'Paid', dot: 'bg-emerald-400', chip: 'bg-emerald-500/10 text-emerald-500' },
|
|||
|
|
upcoming: { label: 'Upcoming', dot: 'bg-slate-400', chip: 'bg-slate-500/10 text-slate-500 dark:text-slate-400' },
|
|||
|
|
due_soon: { label: 'Due Soon', dot: 'bg-amber-400', chip: 'bg-amber-500/10 text-amber-600 dark:text-amber-400' },
|
|||
|
|
late: { label: 'Late', dot: 'bg-orange-400', chip: 'bg-orange-500/10 text-orange-600 dark:text-orange-400' },
|
|||
|
|
missed: { label: 'Missed', dot: 'bg-red-400', chip: 'bg-red-500/10 text-red-500' },
|
|||
|
|
autodraft: { label: 'Autodraft', dot: 'bg-violet-400', chip: 'bg-violet-500/10 text-violet-500' },
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ─── Status Chip ──────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
function StatusChip({ status }) {
|
|||
|
|
const cfg = STATUS[status] ?? { label: status, dot: 'bg-slate-400', chip: 'bg-slate-500/10 text-slate-500' };
|
|||
|
|
return (
|
|||
|
|
<span className={cn('inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium', cfg.chip)}>
|
|||
|
|
<span className={cn('h-1.5 w-1.5 rounded-full', cfg.dot)} />
|
|||
|
|
{cfg.label}
|
|||
|
|
</span>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Payment Dialog ───────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
function PaymentDialog({ open, onOpenChange, bill, payment, onSuccess }) {
|
|||
|
|
const isEdit = !!payment;
|
|||
|
|
|
|||
|
|
const [form, setForm] = useState({
|
|||
|
|
amount: '',
|
|||
|
|
paid_date: todayStr(),
|
|||
|
|
method: '',
|
|||
|
|
notes: '',
|
|||
|
|
});
|
|||
|
|
const [saving, setSaving] = useState(false);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!open) return;
|
|||
|
|
if (isEdit) {
|
|||
|
|
setForm({
|
|||
|
|
amount: String(payment.amount ?? ''),
|
|||
|
|
paid_date: payment.paid_date ?? todayStr(),
|
|||
|
|
method: payment.method ?? '',
|
|||
|
|
notes: payment.notes ?? '',
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
setForm({
|
|||
|
|
amount: String(bill?.expected_amount ?? ''),
|
|||
|
|
paid_date: todayStr(),
|
|||
|
|
method: '',
|
|||
|
|
notes: '',
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}, [open, isEdit, payment, bill]);
|
|||
|
|
|
|||
|
|
const set = (key) => (e) => setForm((f) => ({ ...f, [key]: e.target.value }));
|
|||
|
|
|
|||
|
|
async function handleSubmit() {
|
|||
|
|
if (!form.amount || !form.paid_date) {
|
|||
|
|
toast.error('Amount and date are required');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const amount = parseFloat(form.amount);
|
|||
|
|
if (isNaN(amount) || amount <= 0) {
|
|||
|
|
toast.error('Enter a valid amount');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setSaving(true);
|
|||
|
|
try {
|
|||
|
|
const payload = {
|
|||
|
|
amount,
|
|||
|
|
paid_date: form.paid_date,
|
|||
|
|
method: form.method || null,
|
|||
|
|
notes: form.notes || null,
|
|||
|
|
};
|
|||
|
|
if (isEdit) {
|
|||
|
|
await api.updatePayment(payment.id, payload);
|
|||
|
|
toast.success('Payment updated');
|
|||
|
|
} else {
|
|||
|
|
await api.quickPay({ bill_id: bill.id, ...payload });
|
|||
|
|
toast.success(`Paid ${fmt(amount)} for ${bill.name}`);
|
|||
|
|
}
|
|||
|
|
onOpenChange(false);
|
|||
|
|
onSuccess?.();
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error(err.message);
|
|||
|
|
} finally {
|
|||
|
|
setSaving(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const title = isEdit
|
|||
|
|
? `Edit Payment — ${bill?.name ?? ''}`
|
|||
|
|
: `Record Payment — ${bill?.name ?? ''}`;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|||
|
|
<DialogContent className="max-w-md">
|
|||
|
|
<DialogHeader>
|
|||
|
|
<DialogTitle>{title}</DialogTitle>
|
|||
|
|
</DialogHeader>
|
|||
|
|
|
|||
|
|
<div className="flex flex-col gap-4 py-1">
|
|||
|
|
{/* Amount */}
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<Label htmlFor="pd-amount">Amount</Label>
|
|||
|
|
<div className="relative">
|
|||
|
|
<span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
|
|||
|
|
$
|
|||
|
|
</span>
|
|||
|
|
<Input
|
|||
|
|
id="pd-amount"
|
|||
|
|
type="number"
|
|||
|
|
step="0.01"
|
|||
|
|
min="0"
|
|||
|
|
placeholder="0.00"
|
|||
|
|
className="pl-7 font-mono"
|
|||
|
|
value={form.amount}
|
|||
|
|
onChange={set('amount')}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Date Paid */}
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<Label htmlFor="pd-date">Date Paid</Label>
|
|||
|
|
<Input
|
|||
|
|
id="pd-date"
|
|||
|
|
type="date"
|
|||
|
|
value={form.paid_date}
|
|||
|
|
onChange={set('paid_date')}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Method */}
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<Label htmlFor="pd-method">Method</Label>
|
|||
|
|
<Select value={form.method} onValueChange={(v) => setForm((f) => ({ ...f, method: v }))}>
|
|||
|
|
<SelectTrigger id="pd-method">
|
|||
|
|
<SelectValue placeholder="Select method…" />
|
|||
|
|
</SelectTrigger>
|
|||
|
|
<SelectContent>
|
|||
|
|
{PAYMENT_METHODS.map((m) => (
|
|||
|
|
<SelectItem key={m.value} value={m.value}>{m.label}</SelectItem>
|
|||
|
|
))}
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Notes */}
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<Label htmlFor="pd-notes">Notes</Label>
|
|||
|
|
<Input
|
|||
|
|
id="pd-notes"
|
|||
|
|
placeholder="Add a note…"
|
|||
|
|
value={form.notes}
|
|||
|
|
onChange={set('notes')}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<DialogFooter className="gap-2">
|
|||
|
|
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>
|
|||
|
|
Cancel
|
|||
|
|
</Button>
|
|||
|
|
<Button onClick={handleSubmit} disabled={saving}>
|
|||
|
|
{saving ? 'Saving…' : isEdit ? 'Save Changes' : 'Record Payment'}
|
|||
|
|
</Button>
|
|||
|
|
</DialogFooter>
|
|||
|
|
</DialogContent>
|
|||
|
|
</Dialog>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Remove Payment Alert Dialog ──────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
function RemovePaymentDialog({ open, onOpenChange, bill, paymentId, onSuccess }) {
|
|||
|
|
const [removing, setRemoving] = useState(false);
|
|||
|
|
|
|||
|
|
async function handleConfirm() {
|
|||
|
|
setRemoving(true);
|
|||
|
|
try {
|
|||
|
|
await api.deletePayment(paymentId);
|
|||
|
|
toast.success('Payment removed');
|
|||
|
|
onOpenChange(false);
|
|||
|
|
onSuccess?.();
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error(err.message);
|
|||
|
|
} finally {
|
|||
|
|
setRemoving(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<AlertDialog open={open} onOpenChange={onOpenChange}>
|
|||
|
|
<AlertDialogContent>
|
|||
|
|
<AlertDialogHeader>
|
|||
|
|
<AlertDialogTitle>Remove payment?</AlertDialogTitle>
|
|||
|
|
<AlertDialogDescription>
|
|||
|
|
Removing this payment will mark{' '}
|
|||
|
|
<strong className="text-foreground">{bill?.name}</strong>{' '}
|
|||
|
|
as unpaid. The bill itself will not be deleted.
|
|||
|
|
</AlertDialogDescription>
|
|||
|
|
</AlertDialogHeader>
|
|||
|
|
<AlertDialogFooter>
|
|||
|
|
<AlertDialogCancel disabled={removing}>Cancel</AlertDialogCancel>
|
|||
|
|
<AlertDialogAction
|
|||
|
|
className={buttonVariants({ variant: 'destructive' })}
|
|||
|
|
onClick={handleConfirm}
|
|||
|
|
disabled={removing}
|
|||
|
|
>
|
|||
|
|
{removing ? 'Removing…' : 'Remove Payment'}
|
|||
|
|
</AlertDialogAction>
|
|||
|
|
</AlertDialogFooter>
|
|||
|
|
</AlertDialogContent>
|
|||
|
|
</AlertDialog>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Bill Form stub ───────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
function openBillForm(bill) {
|
|||
|
|
// TODO: replace with shared BillFormDialog extracted from BillsPage
|
|||
|
|
console.log('[BillFormDialog] Edit bill:', bill);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Row Actions Dropdown ─────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
function RowActions({ row, payInputRef, onRefresh }) {
|
|||
|
|
const [payDialogOpen, setPayDialogOpen] = useState(false);
|
|||
|
|
const [editDialogOpen, setEditDialogOpen] = useState(false);
|
|||
|
|
const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
|
|||
|
|
|
|||
|
|
const isPaid = row.status === 'paid' || row.status === 'autodraft';
|
|||
|
|
const latestPayment = row.payments?.length
|
|||
|
|
? [...row.payments].sort((a, b) => b.paid_date.localeCompare(a.paid_date))[0]
|
|||
|
|
: null;
|
|||
|
|
|
|||
|
|
async function handleQuickPay() {
|
|||
|
|
const raw = payInputRef?.current?.value ?? String(row.expected_amount ?? '');
|
|||
|
|
const amount = parseFloat(raw);
|
|||
|
|
if (isNaN(amount) || amount <= 0) {
|
|||
|
|
toast.error('Enter a valid amount');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
await api.quickPay({ bill_id: row.id, amount, paid_date: todayStr() });
|
|||
|
|
toast.success(`Paid ${fmt(amount)} for ${row.name}`);
|
|||
|
|
onRefresh();
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error(err.message);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<DropdownMenu>
|
|||
|
|
<DropdownMenuTrigger asChild>
|
|||
|
|
<Button
|
|||
|
|
variant="ghost"
|
|||
|
|
size="icon"
|
|||
|
|
className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
|
|||
|
|
>
|
|||
|
|
<MoreHorizontal className="h-4 w-4" />
|
|||
|
|
<span className="sr-only">Row actions</span>
|
|||
|
|
</Button>
|
|||
|
|
</DropdownMenuTrigger>
|
|||
|
|
<DropdownMenuContent align="end">
|
|||
|
|
{!isPaid ? (
|
|||
|
|
<>
|
|||
|
|
<DropdownMenuItem onSelect={handleQuickPay}>
|
|||
|
|
Quick Pay
|
|||
|
|
</DropdownMenuItem>
|
|||
|
|
<DropdownMenuItem onSelect={() => setPayDialogOpen(true)}>
|
|||
|
|
Record Payment…
|
|||
|
|
</DropdownMenuItem>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<DropdownMenuItem onSelect={() => setEditDialogOpen(true)}>
|
|||
|
|
Edit Payment…
|
|||
|
|
</DropdownMenuItem>
|
|||
|
|
<DropdownMenuItem
|
|||
|
|
destructive
|
|||
|
|
onSelect={() => setRemoveDialogOpen(true)}
|
|||
|
|
>
|
|||
|
|
Remove Payment…
|
|||
|
|
</DropdownMenuItem>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
<DropdownMenuSeparator />
|
|||
|
|
<DropdownMenuItem onSelect={() => openBillForm(row)}>
|
|||
|
|
Edit Bill…
|
|||
|
|
</DropdownMenuItem>
|
|||
|
|
</DropdownMenuContent>
|
|||
|
|
</DropdownMenu>
|
|||
|
|
|
|||
|
|
{/* Record Payment dialog (unpaid) */}
|
|||
|
|
<PaymentDialog
|
|||
|
|
open={payDialogOpen}
|
|||
|
|
onOpenChange={setPayDialogOpen}
|
|||
|
|
bill={row}
|
|||
|
|
payment={null}
|
|||
|
|
onSuccess={onRefresh}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* Edit Payment dialog (paid) */}
|
|||
|
|
<PaymentDialog
|
|||
|
|
open={editDialogOpen}
|
|||
|
|
onOpenChange={setEditDialogOpen}
|
|||
|
|
bill={row}
|
|||
|
|
payment={latestPayment}
|
|||
|
|
onSuccess={onRefresh}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* Remove Payment alert dialog */}
|
|||
|
|
<RemovePaymentDialog
|
|||
|
|
open={removeDialogOpen}
|
|||
|
|
onOpenChange={setRemoveDialogOpen}
|
|||
|
|
bill={row}
|
|||
|
|
paymentId={latestPayment?.id}
|
|||
|
|
onSuccess={onRefresh}
|
|||
|
|
/>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Bill Row ─────────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
function BillRow({ row, onRefresh }) {
|
|||
|
|
const payInputRef = useRef(null);
|
|||
|
|
const isPaid = row.status === 'paid' || row.status === 'autodraft';
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<TableRow className="group border-b border-border/50 last:border-0 hover:bg-muted/30 transition-colors duration-150">
|
|||
|
|
{/* Bill name + category */}
|
|||
|
|
<TableCell className="px-6 py-4">
|
|||
|
|
<div className="flex items-center gap-2.5">
|
|||
|
|
{row.autopay_enabled && (
|
|||
|
|
<span
|
|||
|
|
className="h-1.5 w-1.5 rounded-full bg-amber-400 shrink-0"
|
|||
|
|
title="Autopay"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
<div>
|
|||
|
|
<p className="font-medium text-sm">{row.name}</p>
|
|||
|
|
{row.category_name && (
|
|||
|
|
<p className="text-xs text-muted-foreground mt-0.5">{row.category_name}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* Due date */}
|
|||
|
|
<TableCell className="px-6 py-4 w-24">
|
|||
|
|
<span className="text-sm text-muted-foreground">{fmtDate(row.due_date)}</span>
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* Expected */}
|
|||
|
|
<TableCell className="px-6 py-4 w-28 text-right">
|
|||
|
|
<span className="font-mono text-sm tabular-nums text-muted-foreground">
|
|||
|
|
{fmt(row.expected_amount)}
|
|||
|
|
</span>
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* Paid Date */}
|
|||
|
|
<TableCell className="px-6 py-4 w-28">
|
|||
|
|
{row.last_paid_date ? (
|
|||
|
|
<span className="text-sm tabular-nums text-emerald-500">
|
|||
|
|
{fmtDate(row.last_paid_date)}
|
|||
|
|
</span>
|
|||
|
|
) : (
|
|||
|
|
<span className="text-sm text-muted-foreground/40">—</span>
|
|||
|
|
)}
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* Paid — input for unpaid, amount for paid */}
|
|||
|
|
<TableCell className="px-6 py-4 w-32 text-right">
|
|||
|
|
{isPaid ? (
|
|||
|
|
<span className="font-mono text-sm tabular-nums text-emerald-500 font-medium">
|
|||
|
|
{fmt(row.total_paid)}
|
|||
|
|
</span>
|
|||
|
|
) : (
|
|||
|
|
<Input
|
|||
|
|
ref={payInputRef}
|
|||
|
|
type="number"
|
|||
|
|
step="0.01"
|
|||
|
|
min="0"
|
|||
|
|
className="h-8 w-24 text-right font-mono text-sm ml-auto"
|
|||
|
|
defaultValue={row.expected_amount}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* Status */}
|
|||
|
|
<TableCell className="px-6 py-4 w-32">
|
|||
|
|
<StatusChip status={row.status} />
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* Actions */}
|
|||
|
|
<TableCell className="px-6 py-4 w-12 text-right">
|
|||
|
|
<RowActions row={row} payInputRef={payInputRef} onRefresh={onRefresh} />
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Bucket Section ───────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
function BucketSection({ title, rows, paidAmount, totalAmount, loading, onRefresh }) {
|
|||
|
|
return (
|
|||
|
|
<div className="mb-3 mt-10 first:mt-0">
|
|||
|
|
{/* Floating bucket header — no card wrapper */}
|
|||
|
|
<div className="flex items-baseline justify-between mb-3">
|
|||
|
|
<h2 className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
|
|||
|
|
{title}
|
|||
|
|
</h2>
|
|||
|
|
{!loading && rows.length > 0 && (
|
|||
|
|
<span className="text-xs tabular-nums text-muted-foreground">
|
|||
|
|
{fmt(paidAmount)} paid of {fmt(totalAmount)}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Table wrapped in card */}
|
|||
|
|
<div className="bg-card rounded-xl border border-border shadow-sm overflow-hidden mb-6">
|
|||
|
|
<Table>
|
|||
|
|
<TableHeader className="bg-muted/40 border-b border-border">
|
|||
|
|
<TableRow className="hover:bg-transparent border-0">
|
|||
|
|
<TableHead className="px-6 py-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
|||
|
|
Bill
|
|||
|
|
</TableHead>
|
|||
|
|
<TableHead className="px-6 py-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground w-24">
|
|||
|
|
Due
|
|||
|
|
</TableHead>
|
|||
|
|
<TableHead className="px-6 py-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground w-28 text-right">
|
|||
|
|
Expected
|
|||
|
|
</TableHead>
|
|||
|
|
<TableHead className="px-6 py-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground w-28">
|
|||
|
|
Paid Date
|
|||
|
|
</TableHead>
|
|||
|
|
<TableHead className="px-6 py-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground w-32 text-right">
|
|||
|
|
Paid
|
|||
|
|
</TableHead>
|
|||
|
|
<TableHead className="px-6 py-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground w-32">
|
|||
|
|
Status
|
|||
|
|
</TableHead>
|
|||
|
|
<TableHead className="px-6 py-3 w-12" />
|
|||
|
|
</TableRow>
|
|||
|
|
</TableHeader>
|
|||
|
|
<TableBody>
|
|||
|
|
{loading ? (
|
|||
|
|
[1, 2, 3].map((i) => (
|
|||
|
|
<TableRow key={i} className="border-b border-border/50">
|
|||
|
|
<TableCell className="px-6 py-4" colSpan={7}>
|
|||
|
|
<div
|
|||
|
|
className="h-4 rounded-md bg-muted/60 animate-pulse"
|
|||
|
|
style={{ width: `${60 + i * 10}%` }}
|
|||
|
|
/>
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
))
|
|||
|
|
) : rows.length === 0 ? (
|
|||
|
|
<TableRow>
|
|||
|
|
<TableCell colSpan={7} className="py-16 text-center">
|
|||
|
|
<div className="flex flex-col items-center gap-2">
|
|||
|
|
<ReceiptText className="h-8 w-8 text-muted-foreground/40" />
|
|||
|
|
<p className="text-sm text-muted-foreground">No bills for this period</p>
|
|||
|
|
<a href="/bills" className="text-xs text-primary hover:underline">
|
|||
|
|
Add a bill →
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
) : (
|
|||
|
|
rows.map((row) => (
|
|||
|
|
<BillRow key={row.id} row={row} onRefresh={onRefresh} />
|
|||
|
|
))
|
|||
|
|
)}
|
|||
|
|
</TableBody>
|
|||
|
|
</Table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── TrackerPage ──────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
export default function TrackerPage() {
|
|||
|
|
const now = new Date();
|
|||
|
|
const [year, setYear] = useState(now.getFullYear());
|
|||
|
|
const [month, setMonth] = useState(now.getMonth() + 1);
|
|||
|
|
const [data, setData] = useState(null);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
|
|||
|
|
const load = useCallback(async () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const res = await api.tracker(year, month);
|
|||
|
|
setData(res);
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error(err.message);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
}, [year, month]);
|
|||
|
|
|
|||
|
|
useEffect(() => { load(); }, [load]);
|
|||
|
|
|
|||
|
|
function navigate(direction) {
|
|||
|
|
if (direction === -1) {
|
|||
|
|
if (month === 1) { setYear((y) => y - 1); setMonth(12); }
|
|||
|
|
else setMonth((m) => m - 1);
|
|||
|
|
} else {
|
|||
|
|
if (month === 12) { setYear((y) => y + 1); setMonth(1); }
|
|||
|
|
else setMonth((m) => m + 1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function goToToday() {
|
|||
|
|
const t = new Date();
|
|||
|
|
setYear(t.getFullYear());
|
|||
|
|
setMonth(t.getMonth() + 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const rows = data?.rows ?? [];
|
|||
|
|
const summary = data?.summary ?? {};
|
|||
|
|
|
|||
|
|
const isCurrentMonth = year === now.getFullYear() && month === now.getMonth() + 1;
|
|||
|
|
|
|||
|
|
const paidCount = rows.filter((r) => r.status === 'paid' || r.status === 'autodraft').length;
|
|||
|
|
const overdueCount = rows.filter((r) => r.status === 'late' || r.status === 'missed').length;
|
|||
|
|
const allPaid = rows.length > 0 && paidCount === rows.length;
|
|||
|
|
|
|||
|
|
const bucket1 = rows.filter((r) => r.bucket === '1st');
|
|||
|
|
const bucket15 = rows.filter((r) => r.bucket === '15th');
|
|||
|
|
|
|||
|
|
function bucketPaid(bucket) {
|
|||
|
|
return bucket.reduce((sum, r) => {
|
|||
|
|
const isPaid = r.status === 'paid' || r.status === 'autodraft';
|
|||
|
|
return sum + (isPaid ? (r.total_paid || 0) : 0);
|
|||
|
|
}, 0);
|
|||
|
|
}
|
|||
|
|
function bucketTotal(bucket) {
|
|||
|
|
return bucket.reduce((sum, r) => sum + (r.expected_amount || 0), 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
{/* ── Page Header — floats on page background, no card ── */}
|
|||
|
|
<div className="flex items-center justify-between mb-8">
|
|||
|
|
<div>
|
|||
|
|
<h1 className="text-2xl font-bold tracking-tight">
|
|||
|
|
{MONTH_NAMES[month - 1]} {year}
|
|||
|
|
</h1>
|
|||
|
|
<p className="text-sm text-muted-foreground mt-0.5">Monthly overview</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Button
|
|||
|
|
variant="ghost"
|
|||
|
|
size="icon"
|
|||
|
|
className="h-8 w-8"
|
|||
|
|
onClick={() => navigate(-1)}
|
|||
|
|
aria-label="Previous month"
|
|||
|
|
>
|
|||
|
|
<ChevronLeft className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
variant="ghost"
|
|||
|
|
size="icon"
|
|||
|
|
className="h-8 w-8"
|
|||
|
|
onClick={() => navigate(1)}
|
|||
|
|
aria-label="Next month"
|
|||
|
|
>
|
|||
|
|
<ChevronRight className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
{!isCurrentMonth && (
|
|||
|
|
<Button variant="outline" size="sm" onClick={goToToday}>
|
|||
|
|
Today
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* ── Summary Stat Tiles ── */}
|
|||
|
|
<div className="grid grid-cols-4 gap-4 mb-8">
|
|||
|
|
{/* Total Expected */}
|
|||
|
|
<div className="bg-card rounded-xl border border-border p-6 shadow-sm">
|
|||
|
|
<p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-3">
|
|||
|
|
Total Expected
|
|||
|
|
</p>
|
|||
|
|
<p className="text-3xl font-bold tracking-tight tabular-nums">
|
|||
|
|
{fmt(summary.total_expected)}
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm text-muted-foreground mt-1.5">
|
|||
|
|
{rows.length} bill{rows.length !== 1 ? 's' : ''} this month
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Paid */}
|
|||
|
|
<div className="bg-card rounded-xl border border-border p-6 shadow-sm">
|
|||
|
|
<p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-3">
|
|||
|
|
Paid
|
|||
|
|
</p>
|
|||
|
|
<p className={cn('text-3xl font-bold tracking-tight tabular-nums', allPaid && 'text-emerald-500')}>
|
|||
|
|
{fmt(summary.total_paid)}
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm text-muted-foreground mt-1.5">
|
|||
|
|
{paidCount} of {rows.length} paid
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Remaining */}
|
|||
|
|
<div className="bg-card rounded-xl border border-border p-6 shadow-sm">
|
|||
|
|
<p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-3">
|
|||
|
|
Remaining
|
|||
|
|
</p>
|
|||
|
|
<p className="text-3xl font-bold tracking-tight tabular-nums">
|
|||
|
|
{fmt(summary.remaining)}
|
|||
|
|
</p>
|
|||
|
|
<p className={cn('text-sm mt-1.5', overdueCount > 0 ? 'text-orange-400' : 'text-muted-foreground')}>
|
|||
|
|
{overdueCount > 0
|
|||
|
|
? `includes ${fmt(summary.overdue)} overdue`
|
|||
|
|
: `${rows.length - paidCount} unpaid`}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Overdue */}
|
|||
|
|
<div className="bg-card rounded-xl border border-border p-6 shadow-sm">
|
|||
|
|
<p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-3">
|
|||
|
|
Overdue
|
|||
|
|
</p>
|
|||
|
|
<p className={cn('text-3xl font-bold tracking-tight tabular-nums', overdueCount > 0 ? 'text-red-500' : 'text-muted-foreground')}>
|
|||
|
|
{fmt(summary.overdue)}
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm text-muted-foreground mt-1.5">
|
|||
|
|
{overdueCount > 0
|
|||
|
|
? `${overdueCount} bill${overdueCount !== 1 ? 's' : ''} overdue`
|
|||
|
|
: 'All clear'}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* ── Bucket Sections ── */}
|
|||
|
|
<BucketSection
|
|||
|
|
title="1st – 14th"
|
|||
|
|
rows={bucket1}
|
|||
|
|
paidAmount={bucketPaid(bucket1)}
|
|||
|
|
totalAmount={bucketTotal(bucket1)}
|
|||
|
|
loading={loading}
|
|||
|
|
onRefresh={load}
|
|||
|
|
/>
|
|||
|
|
<BucketSection
|
|||
|
|
title="15th – 31st"
|
|||
|
|
rows={bucket15}
|
|||
|
|
paidAmount={bucketPaid(bucket15)}
|
|||
|
|
totalAmount={bucketTotal(bucket15)}
|
|||
|
|
loading={loading}
|
|||
|
|
onRefresh={load}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|