1944 lines
70 KiB
TypeScript
1944 lines
70 KiB
TypeScript
import {
|
||
useState,
|
||
useEffect,
|
||
useMemo,
|
||
useCallback,
|
||
useDeferredValue,
|
||
type ComponentType,
|
||
type ReactNode,
|
||
} from 'react';
|
||
import { useSearchParams, useNavigate } from 'react-router-dom';
|
||
import {
|
||
ChevronLeft,
|
||
ChevronRight,
|
||
AlertCircle,
|
||
CheckCircle2,
|
||
Plus,
|
||
Search,
|
||
RefreshCw,
|
||
Landmark,
|
||
ArrowUpToLine,
|
||
ArrowUp,
|
||
ArrowDown,
|
||
BellOff,
|
||
EyeOff,
|
||
Settings2,
|
||
Download,
|
||
Printer,
|
||
FileSpreadsheet,
|
||
CalendarDays,
|
||
Keyboard,
|
||
} from 'lucide-react';
|
||
import { toast } from 'sonner';
|
||
import { api } from '@/api';
|
||
import {
|
||
useTracker,
|
||
useDriftReport,
|
||
useInvalidateTrackerData,
|
||
usePrefetchTracker,
|
||
useSettings,
|
||
useSimplefinStatus,
|
||
useSaveSettings,
|
||
} from '@/hooks/useQueries';
|
||
import { useSearchPanelPreference } from '@/hooks/useSearchPanelPreference';
|
||
import BillModal from '@/components/BillModal';
|
||
import { makeBillDraft } from '@/lib/billDrafts';
|
||
import { scheduleLabel, scheduleValue } from '@/lib/billingSchedule';
|
||
import { cn, localDateString, parseUtc, settingEnabled } from '@/lib/utils';
|
||
import { downloadFile } from '@/lib/download';
|
||
import { formatUSD, asDollars, type Dollars } from '@/lib/money';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Input } from '@/components/ui/input';
|
||
import { EmptyState, PageHeader, StatusDot } from '@/components/ui/app-primitives';
|
||
import SearchFilterPanel from '@/components/SearchFilterPanel';
|
||
import { Skeleton } from '@/components/ui/Skeleton';
|
||
import {
|
||
Select,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
SelectContent,
|
||
SelectItem,
|
||
} from '@/components/ui/select';
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogFooter,
|
||
DialogDescription,
|
||
} from '@/components/ui/dialog';
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuCheckboxItem,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuLabel,
|
||
DropdownMenuSeparator,
|
||
DropdownMenuTrigger,
|
||
} from '@/components/ui/dropdown-menu';
|
||
|
||
import StartingAmountsEditDialog from '@/components/tracker/StartingAmountsEditDialog';
|
||
import CashFlowCard from '@/components/tracker/CashFlowCard';
|
||
import OverdueCommandCenter from '@/components/tracker/OverdueCommandCenter';
|
||
import DriftInsightPanel from '@/components/tracker/DriftInsightPanel';
|
||
import {
|
||
MONTHS,
|
||
FILTER_ALL,
|
||
paymentDateForTrackerMonth,
|
||
amountSearchText,
|
||
rowEffectiveStatus,
|
||
rowIsPaid,
|
||
rowIsDebt,
|
||
TRACKER_SORT_DEFAULT,
|
||
TRACKER_SORT_ASC,
|
||
TRACKER_SORT_DESC,
|
||
TRACKER_SORT_OPTIONS,
|
||
TRACKER_SORT_DEFAULT_DIRS,
|
||
TRACKER_SORT_LABELS,
|
||
normalizeTrackerSortKey,
|
||
normalizeTrackerSortDir,
|
||
sortTrackerRows,
|
||
} from '@/lib/trackerUtils';
|
||
import {
|
||
TRACKER_TABLE_COLUMNS,
|
||
parseTrackerTableColumns,
|
||
trackerTableColumnsToSetting,
|
||
} from '@/lib/trackerTableColumns';
|
||
import { FilterChip } from '@/components/tracker/FilterChip';
|
||
import { SummaryCard, TrendCard } from '@/components/tracker/SummaryCards';
|
||
import { PaymentLedgerDialog } from '@/components/tracker/PaymentLedgerDialog';
|
||
import { TrackerBucket as Bucket } from '@/components/tracker/TrackerBucket';
|
||
import IncomeBreakdownModal from '@/components/IncomeBreakdownModal';
|
||
import type { TrackerRow, TrackerSummary, BankTracking, DriftBill, Bill, Category } from '@/types';
|
||
|
||
function fmt(v: number | null | undefined): string {
|
||
return formatUSD(asDollars(Number(v) || 0));
|
||
}
|
||
|
||
interface LateAttr {
|
||
payment_id: number;
|
||
bill_name?: string;
|
||
amount?: number;
|
||
original_date: string;
|
||
suggested_date: string;
|
||
}
|
||
|
||
interface SyncResult {
|
||
auto_matched?: number;
|
||
transactions_new?: number;
|
||
matched_bills?: string[];
|
||
late_attributions?: LateAttr[];
|
||
}
|
||
|
||
interface BankSyncStatus {
|
||
enabled?: boolean;
|
||
has_connections?: boolean;
|
||
has_merchant_rules?: boolean;
|
||
}
|
||
|
||
interface EditBillData {
|
||
bill: Bill | null;
|
||
initialBill?: Partial<Bill>;
|
||
categories: Category[];
|
||
}
|
||
|
||
interface TrackerFilters {
|
||
category: string;
|
||
cycle: string;
|
||
autopay: boolean;
|
||
firstBucket: boolean;
|
||
fifteenthBucket: boolean;
|
||
unpaid: boolean;
|
||
overdue: boolean;
|
||
debt: boolean;
|
||
}
|
||
|
||
type BoolFilterKey = 'autopay' | 'firstBucket' | 'fifteenthBucket' | 'unpaid' | 'overdue' | 'debt';
|
||
type Patch = Record<string, string | number | boolean | null | undefined>;
|
||
|
||
function HeaderStat({
|
||
icon: Icon,
|
||
label,
|
||
value,
|
||
tone = 'neutral',
|
||
}: {
|
||
icon: ComponentType<{ className?: string }>;
|
||
label: string;
|
||
value: ReactNode;
|
||
tone?: 'neutral' | 'good' | 'warn' | 'danger' | 'info';
|
||
}) {
|
||
const toneClass = {
|
||
neutral: 'border-border/70 bg-card/65 text-muted-foreground',
|
||
good: 'border-emerald-500/25 bg-emerald-500/8 text-emerald-700 dark:text-emerald-300',
|
||
warn: 'border-amber-500/30 bg-amber-500/8 text-amber-700 dark:text-amber-300',
|
||
danger: 'border-rose-500/30 bg-rose-500/8 text-rose-700 dark:text-rose-300',
|
||
info: 'border-sky-500/25 bg-sky-500/8 text-sky-700 dark:text-sky-300',
|
||
}[tone];
|
||
|
||
return (
|
||
<span
|
||
className={cn('inline-flex items-center gap-2 rounded-full border px-3 py-1.5', toneClass)}
|
||
>
|
||
<Icon className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
|
||
<span className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
|
||
{label}
|
||
</span>
|
||
<span className="tracker-number text-xs font-semibold text-foreground">{value}</span>
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function fmtBalanceAge(isoStr: string | null | undefined): string | null {
|
||
const d = parseUtc(isoStr);
|
||
if (!d) return null;
|
||
return d.toLocaleString(undefined, {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
hour: 'numeric',
|
||
minute: '2-digit',
|
||
});
|
||
}
|
||
|
||
function BankProjectionBanner({
|
||
bankTracking,
|
||
onSnooze,
|
||
onIgnore,
|
||
busy,
|
||
}: {
|
||
bankTracking?: BankTracking;
|
||
onSnooze: () => void;
|
||
onIgnore: () => void;
|
||
busy?: boolean;
|
||
}) {
|
||
if (!bankTracking?.enabled) return null;
|
||
const isPositive = Number(bankTracking.remaining ?? 0) >= 0;
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
'flex flex-col gap-3 rounded-xl border px-4 py-3 text-xs shadow-sm sm:flex-row sm:items-center sm:justify-between',
|
||
isPositive
|
||
? 'border-emerald-500/20 bg-emerald-500/5 text-emerald-700 dark:text-emerald-400'
|
||
: 'border-destructive/20 bg-destructive/5 text-destructive',
|
||
)}
|
||
>
|
||
<div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
|
||
<span className="relative flex h-2 w-2 shrink-0">
|
||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-50" />
|
||
<span className="relative inline-flex h-2 w-2 rounded-full bg-current" />
|
||
</span>
|
||
<span className="truncate font-semibold">{bankTracking.account_name}</span>
|
||
<span className="text-muted-foreground">·</span>
|
||
<span>{fmt(bankTracking.balance ?? 0)} balance</span>
|
||
{bankTracking.last_updated && (
|
||
<>
|
||
<span className="text-muted-foreground">·</span>
|
||
<span className="text-muted-foreground">
|
||
as of {fmtBalanceAge(bankTracking.last_updated)}
|
||
</span>
|
||
</>
|
||
)}
|
||
{Number(bankTracking.pending_payments ?? 0) > 0 && (
|
||
<>
|
||
<span className="text-muted-foreground">·</span>
|
||
<span className="text-amber-600 dark:text-amber-400">
|
||
{fmt(bankTracking.pending_payments)} pending
|
||
</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
<div className="flex shrink-0 flex-wrap items-center gap-2 sm:justify-end">
|
||
<span className="font-semibold tabular-nums">
|
||
{Number(bankTracking.remaining ?? 0) < 0 ? '−' : ''}
|
||
{fmt(Math.abs(Number(bankTracking.remaining ?? 0)))} projected
|
||
</span>
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
variant="ghost"
|
||
disabled={busy}
|
||
onClick={onSnooze}
|
||
className="h-7 gap-1.5 px-2 text-[11px] text-muted-foreground hover:text-foreground"
|
||
>
|
||
<BellOff className="h-3 w-3" />
|
||
Snooze
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
variant="ghost"
|
||
disabled={busy}
|
||
onClick={onIgnore}
|
||
className="h-7 gap-1.5 px-2 text-[11px] text-muted-foreground hover:text-foreground"
|
||
>
|
||
<EyeOff className="h-3 w-3" />
|
||
Ignore
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function TrackerColumnMenu({
|
||
visibleColumns,
|
||
onColumnToggle,
|
||
saving,
|
||
}: {
|
||
visibleColumns: string[];
|
||
onColumnToggle?: (key: string, checked: boolean) => void;
|
||
saving?: boolean;
|
||
}) {
|
||
const visibleSet = new Set(visibleColumns);
|
||
|
||
return (
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
variant="outline"
|
||
className="h-8 gap-1.5 px-2.5 text-xs"
|
||
disabled={saving}
|
||
>
|
||
<Settings2 className="h-3.5 w-3.5" />
|
||
<span className="hidden sm:inline">Columns</span>
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end" className="w-56">
|
||
<DropdownMenuLabel>Table columns</DropdownMenuLabel>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuCheckboxItem checked disabled>
|
||
Bill
|
||
</DropdownMenuCheckboxItem>
|
||
{TRACKER_TABLE_COLUMNS.map((column) => (
|
||
<DropdownMenuCheckboxItem
|
||
key={column.key}
|
||
checked={visibleSet.has(column.key)}
|
||
onSelect={(event) => event.preventDefault()}
|
||
onCheckedChange={(checked) => onColumnToggle?.(column.key, checked)}
|
||
>
|
||
{column.label}
|
||
</DropdownMenuCheckboxItem>
|
||
))}
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
);
|
||
}
|
||
|
||
// ── Main page ──────────────────────────────────────────────────────────────
|
||
function LateAttributionDialog({
|
||
attr,
|
||
remaining,
|
||
busy,
|
||
onAccept,
|
||
onDismiss,
|
||
}: {
|
||
attr?: LateAttr | null;
|
||
remaining: number;
|
||
busy?: boolean;
|
||
onAccept: (attr: LateAttr) => void;
|
||
onDismiss: () => void;
|
||
}) {
|
||
if (!attr) return null;
|
||
const fmtDate = (d: string) =>
|
||
new Date(d + 'T00:00:00').toLocaleDateString('en-US', {
|
||
month: 'long',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
});
|
||
const priorMonth = new Date(attr.suggested_date + 'T00:00:00').toLocaleDateString('en-US', {
|
||
month: 'long',
|
||
});
|
||
return (
|
||
<Dialog open onOpenChange={onDismiss}>
|
||
<DialogContent className="sm:max-w-md">
|
||
<DialogHeader>
|
||
<DialogTitle>Payment posted after month end</DialogTitle>
|
||
<DialogDescription>
|
||
A <strong>{attr.bill_name}</strong> payment of <strong>{fmt(attr.amount)}</strong>{' '}
|
||
posted on <strong>{fmtDate(attr.original_date)}</strong> — after the previous month
|
||
closed. Should it count for {priorMonth}?
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="rounded-lg border border-border/60 bg-muted/30 p-3 space-y-1">
|
||
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||
What this does
|
||
</p>
|
||
<p className="text-sm">
|
||
Moves the paid date to <strong>{fmtDate(attr.suggested_date)}</strong> so it appears in
|
||
the prior month's tracker. Amount and bank link are unchanged.
|
||
</p>
|
||
</div>
|
||
{remaining > 0 && (
|
||
<p className="text-xs text-muted-foreground">
|
||
{remaining} more similar payment{remaining > 1 ? 's' : ''} to review after this.
|
||
</p>
|
||
)}
|
||
<DialogFooter className="gap-2 sm:gap-0">
|
||
<Button variant="outline" onClick={onDismiss} disabled={busy}>
|
||
Keep as{' '}
|
||
{fmtDate(attr.original_date)
|
||
.replace(/,?\s*\d{4}/, '')
|
||
.trim()}
|
||
</Button>
|
||
<Button onClick={() => onAccept(attr)} disabled={busy}>
|
||
{busy ? 'Moving…' : `Count for ${priorMonth}`}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|
||
|
||
// Client-side fallbacks for the tracker display settings, merged under whatever
|
||
// the server returns (an absent key falls back to "shown"). Mirrors the list in
|
||
// SettingsPage's "Tracker Layout".
|
||
const TRACKER_SETTING_DEFAULTS: Record<string, string> = {
|
||
tracker_show_bank_projection_banner: 'true',
|
||
tracker_bank_projection_banner_snoozed_until: '',
|
||
tracker_show_search_sort: 'true',
|
||
tracker_show_summary_cards: 'true',
|
||
tracker_show_safe_to_spend: 'true',
|
||
tracker_show_overdue_command_center: 'true',
|
||
tracker_show_drift_insights: 'true',
|
||
tracker_overdue_collapsed: 'false',
|
||
tracker_drift_collapsed: 'false',
|
||
tracker_table_columns:
|
||
'["due","expected","previous","paid","paid_date","status","action","notes"]',
|
||
};
|
||
|
||
export default function TrackerPage() {
|
||
const [searchParams, setSearchParams] = useSearchParams();
|
||
const navigateTo = useNavigate();
|
||
const now = new Date();
|
||
|
||
// All navigation + filter state lives in the URL so views are bookmarkable/shareable.
|
||
const year = Number(searchParams.get('year')) || now.getFullYear();
|
||
const month = Number(searchParams.get('month')) || now.getMonth() + 1;
|
||
const search = searchParams.get('q') || '';
|
||
// Stable identity so the memo that filters rows on `filters` doesn't recompute
|
||
// every render (a new object literal each render would defeat it).
|
||
const filters = useMemo<TrackerFilters>(
|
||
() => ({
|
||
category: searchParams.get('fc') || FILTER_ALL,
|
||
cycle: searchParams.get('cy') || FILTER_ALL,
|
||
autopay: searchParams.get('ap') === '1',
|
||
firstBucket: searchParams.get('b1') === '1',
|
||
fifteenthBucket: searchParams.get('b2') === '1',
|
||
unpaid: searchParams.get('un') === '1',
|
||
overdue: searchParams.get('ov') === '1',
|
||
debt: searchParams.get('de') === '1',
|
||
}),
|
||
[searchParams],
|
||
);
|
||
const sortKey = normalizeTrackerSortKey(searchParams.get('sort') || TRACKER_SORT_DEFAULT);
|
||
const hasSort = sortKey !== TRACKER_SORT_DEFAULT;
|
||
const sortDir = hasSort
|
||
? normalizeTrackerSortDir(
|
||
searchParams.get('dir') || TRACKER_SORT_DEFAULT_DIRS[sortKey] || TRACKER_SORT_ASC,
|
||
)
|
||
: TRACKER_SORT_ASC;
|
||
|
||
// replace: true keeps history clean for rapid navigation (e.g. search keystrokes)
|
||
const updateParams = useCallback(
|
||
(patch: Patch) => {
|
||
setSearchParams(
|
||
(prev) => {
|
||
const next = new URLSearchParams(prev);
|
||
Object.entries(patch).forEach(([k, v]) => {
|
||
if (v == null || v === '' || v === false) next.delete(k);
|
||
else next.set(k, v === true ? '1' : String(v));
|
||
});
|
||
return next;
|
||
},
|
||
{ replace: true },
|
||
);
|
||
},
|
||
[setSearchParams],
|
||
);
|
||
|
||
const [bankSyncing, setBankSyncing] = useState(false);
|
||
const [lateAttributions, setLateAttributions] = useState<LateAttr[]>([]); // pending month-attribution prompts
|
||
const [attrBusy, setAttrBusy] = useState<number | null>(null); // payment_id being resolved
|
||
const [pinUpcoming, setPinUpcoming] = useState(
|
||
() => localStorage.getItem('tracker_pin_upcoming') === 'true',
|
||
);
|
||
const [editBillData, setEditBillData] = useState<EditBillData | null>(null);
|
||
// Edit Starting Amounts modal: true when open, false when closed
|
||
const [editStartingOpen, setEditStartingOpen] = useState(false);
|
||
const [incomeModalOpen, setIncomeModalOpen] = useState(false);
|
||
const [orderedRows, setOrderedRows] = useState<TrackerRow[] | null>(null);
|
||
const [movingBillId, setMovingBillId] = useState<number | null>(null);
|
||
const [searchPanelCollapsed, setSearchPanelCollapsed] = useSearchPanelPreference();
|
||
|
||
// Row to open in PaymentLedgerDialog via the overdue command center
|
||
const [commandCenterPayRow, setCommandCenterPayRow] = useState<TrackerRow | null>(null);
|
||
|
||
// Multi-select: bill ids checked for a bulk pay/skip action.
|
||
const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
|
||
const [bulkBusy, setBulkBusy] = useState(false);
|
||
// Screen-reader announcement for drag/keyboard reorder (visually hidden).
|
||
const [reorderAnnouncement, setReorderAnnouncement] = useState('');
|
||
|
||
// Use React Query for data fetching
|
||
const {
|
||
data,
|
||
isLoading: loading,
|
||
isError,
|
||
error,
|
||
refetch,
|
||
dataUpdatedAt,
|
||
} = useTracker(year, month);
|
||
const { data: driftDataRaw } = useDriftReport();
|
||
const driftData = driftDataRaw as { bills?: DriftBill[] } | undefined;
|
||
|
||
// Display settings + SimpleFIN status via React Query (cached/deduped like the
|
||
// rest of the app), with a save mutation that handles optimistic + rollback.
|
||
const settingsQuery = useSettings();
|
||
const simplefinStatusQuery = useSimplefinStatus();
|
||
const saveSettings = useSaveSettings();
|
||
const trackerSettings = useMemo<Record<string, string>>(
|
||
() => ({
|
||
...TRACKER_SETTING_DEFAULTS,
|
||
...((settingsQuery.data as Record<string, string> | undefined) ?? {}),
|
||
}),
|
||
[settingsQuery.data],
|
||
);
|
||
const bankSyncStatus = (simplefinStatusQuery.data as BankSyncStatus | undefined) ?? null;
|
||
const savingTrackerSetting = saveSettings.isPending;
|
||
// Live cross-query refresh: a bill mutation invalidates the tracker AND the
|
||
// overdue badge / drift report / bills list so the whole shell updates, not
|
||
// just the one tracker query. Use this everywhere a row/payment mutation lands.
|
||
const invalidateData = useInvalidateTrackerData();
|
||
const driftedIds = useMemo(() => new Set((driftData?.bills ?? []).map((b) => b.id)), [driftData]);
|
||
|
||
useEffect(() => {
|
||
setOrderedRows(null);
|
||
setMovingBillId(null);
|
||
}, [dataUpdatedAt, year, month]);
|
||
|
||
// Clear a stale multi-selection when navigating months (survives background
|
||
// refetches within the same month).
|
||
useEffect(() => {
|
||
setSelectedIds(new Set());
|
||
}, [year, month]);
|
||
|
||
// Surface a settings-load failure (React Query swallows it into isError).
|
||
// The page still renders with TRACKER_SETTING_DEFAULTS.
|
||
useEffect(() => {
|
||
if (settingsQuery.isError)
|
||
toast.error("Couldn't load tracker display settings — showing defaults.");
|
||
}, [settingsQuery.isError]);
|
||
|
||
// Listen for late-attribution events fired by BillModal's single-bill sync
|
||
useEffect(() => {
|
||
function handler(e: Event) {
|
||
const attrs = (e as CustomEvent<{ attributions?: LateAttr[] }>).detail?.attributions;
|
||
if (Array.isArray(attrs) && attrs.length > 0) {
|
||
setLateAttributions((prev) => [...prev, ...attrs]);
|
||
}
|
||
}
|
||
window.addEventListener('tracker:late-attributions', handler);
|
||
return () => window.removeEventListener('tracker:late-attributions', handler);
|
||
}, []);
|
||
|
||
function adjacentMonth(delta: number) {
|
||
let nm = month + delta;
|
||
let ny = year;
|
||
if (nm > 12) {
|
||
ny += 1;
|
||
nm = 1;
|
||
}
|
||
if (nm < 1) {
|
||
ny -= 1;
|
||
nm = 12;
|
||
}
|
||
return { year: ny, month: nm };
|
||
}
|
||
|
||
function navigate(delta: number) {
|
||
updateParams(adjacentMonth(delta));
|
||
}
|
||
|
||
// Prefetch the adjacent month on hover/focus so clicking prev/next is instant.
|
||
const prefetchTracker = usePrefetchTracker();
|
||
function prefetchAdjacent(delta: number) {
|
||
const { year: ny, month: nm } = adjacentMonth(delta);
|
||
prefetchTracker(ny, nm);
|
||
}
|
||
|
||
function bankSyncMessage(result: SyncResult): string {
|
||
const matched = result.auto_matched ?? 0;
|
||
const newTx = result.transactions_new ?? 0;
|
||
const billNames = result.matched_bills ?? [];
|
||
if (matched > 0 && billNames.length > 0) {
|
||
return (
|
||
`Synced — ${billNames.join(', ')} ✓` +
|
||
(matched > billNames.length ? ` (+${matched - billNames.length} more)` : '')
|
||
);
|
||
}
|
||
if (matched > 0) return `Synced — ${matched} payment${matched === 1 ? '' : 's'} matched`;
|
||
if (newTx > 0)
|
||
return `Synced — ${newTx} new transaction${newTx === 1 ? '' : 's'}, no automatic matches`;
|
||
return 'Synced — no new transactions';
|
||
}
|
||
|
||
async function handleBankSync() {
|
||
setBankSyncing(true);
|
||
// One toast that transitions loading → done, instead of a manual spinner +
|
||
// a separate success/error toast.
|
||
const promise = api.syncAllSources();
|
||
toast.promise(promise, {
|
||
loading: 'Syncing bank…',
|
||
success: (result: unknown) => bankSyncMessage(result as SyncResult),
|
||
error: (err: unknown) => (err as { message?: string })?.message || 'Bank sync failed',
|
||
});
|
||
try {
|
||
const result = (await promise) as SyncResult;
|
||
// Surface late-attribution prompts (payments that just crossed a month boundary)
|
||
if ((result.late_attributions ?? []).length > 0)
|
||
setLateAttributions(result.late_attributions ?? []);
|
||
invalidateData();
|
||
} catch {
|
||
// toast.promise already surfaced the error
|
||
} finally {
|
||
setBankSyncing(false);
|
||
}
|
||
}
|
||
|
||
function togglePinUpcoming() {
|
||
setPinUpcoming((prev) => {
|
||
const next = !prev;
|
||
localStorage.setItem('tracker_pin_upcoming', String(next));
|
||
return next;
|
||
});
|
||
}
|
||
|
||
// Show sync button when SimpleFIN is enabled, connected, and user has matching rules
|
||
const showBankSync =
|
||
bankSyncStatus?.enabled &&
|
||
bankSyncStatus?.has_connections &&
|
||
bankSyncStatus?.has_merchant_rules;
|
||
|
||
async function handleOpenEditBill(row: TrackerRow) {
|
||
try {
|
||
const [bill, categories] = await Promise.all([
|
||
api.bill(row.id) as Promise<Bill>,
|
||
api.categories() as Promise<Category[]>,
|
||
]);
|
||
setEditBillData({ bill, categories });
|
||
} catch (err) {
|
||
toast.error((err as { message?: string })?.message || 'Failed to open bill');
|
||
}
|
||
}
|
||
|
||
async function handleOpenAddBill() {
|
||
try {
|
||
const categories = (await api.categories()) as Category[];
|
||
setEditBillData({ bill: null, categories });
|
||
} catch (err) {
|
||
toast.error((err as { message?: string })?.message || 'Failed to open bill editor');
|
||
}
|
||
}
|
||
|
||
function goToday() {
|
||
const n = new Date();
|
||
updateParams({ year: n.getFullYear(), month: n.getMonth() + 1 });
|
||
}
|
||
|
||
// Export the viewed month's activity as CSV via the existing /api/export
|
||
// date-range endpoint (both bounds inclusive).
|
||
async function handleExportMonthCsv() {
|
||
const mm = String(month).padStart(2, '0');
|
||
const lastDay = new Date(year, month, 0).getDate();
|
||
const from = `${year}-${mm}-01`;
|
||
const to = `${year}-${mm}-${String(lastDay).padStart(2, '0')}`;
|
||
try {
|
||
await downloadFile(api.exportRangeUrl(from, to, 'csv'), `bills-${year}-${mm}.csv`);
|
||
toast.success(`Exported ${from} – ${to} to CSV.`);
|
||
} catch (err) {
|
||
toast.error((err as { message?: string })?.message || 'Export failed');
|
||
}
|
||
}
|
||
|
||
// Jump to the calendar view for the month currently in view.
|
||
function goToCalendar() {
|
||
navigateTo(`/calendar?year=${year}&month=${month}`);
|
||
}
|
||
|
||
const handleToggleSelect = useCallback((id: number, next: boolean) => {
|
||
setSelectedIds((prev) => {
|
||
const s = new Set(prev);
|
||
if (next) s.add(id);
|
||
else s.delete(id);
|
||
return s;
|
||
});
|
||
}, []);
|
||
const clearSelection = useCallback(() => setSelectedIds(new Set()), []);
|
||
|
||
// Pay every selected bill that still has a balance, in one bulk call (reuses
|
||
// the same item shape + Undo as the per-bucket "Pay all due").
|
||
async function handlePaySelected() {
|
||
const items = selectedRows
|
||
.filter((r) => !r.is_skipped && !rowIsPaid(r))
|
||
.map((r) => {
|
||
const threshold = Number(r.actual_amount ?? r.expected_amount ?? 0) || 0;
|
||
const remaining = Math.max(threshold - (Number(r.total_paid) || 0), 0);
|
||
return {
|
||
bill_id: r.id,
|
||
amount: remaining > 0 ? remaining : threshold,
|
||
paid_date: paymentDateForTrackerMonth(year, month, r.due_day),
|
||
};
|
||
})
|
||
.filter((item) => item.amount > 0);
|
||
if (items.length === 0) {
|
||
toast.info('No unpaid bills selected.');
|
||
return;
|
||
}
|
||
const total = items.reduce((s, i) => s + i.amount, 0);
|
||
setBulkBusy(true);
|
||
try {
|
||
const result = (await api.bulkPay(items)) as { created?: Array<{ id: number }> };
|
||
const created = result.created || [];
|
||
if (created.length === 0) {
|
||
toast.info('Those bills were already paid.');
|
||
} else {
|
||
toast.success(
|
||
`Paid ${created.length} bill${created.length === 1 ? '' : 's'} — ${fmt(total)}`,
|
||
{
|
||
action: {
|
||
label: 'Undo',
|
||
onClick: async () => {
|
||
try {
|
||
await Promise.all(created.map((p) => api.deletePayment(p.id)));
|
||
toast.success('Payments removed');
|
||
invalidateData();
|
||
} catch (err) {
|
||
toast.error((err as { message?: string })?.message || 'Failed to undo payments.');
|
||
}
|
||
},
|
||
},
|
||
},
|
||
);
|
||
}
|
||
clearSelection();
|
||
invalidateData();
|
||
} catch (err) {
|
||
toast.error((err as { message?: string })?.message || 'Failed to pay bills.');
|
||
} finally {
|
||
setBulkBusy(false);
|
||
}
|
||
}
|
||
|
||
// Skip every selected bill for this month. No bulk endpoint exists (skip has no
|
||
// money effect), so fan out per-bill and aggregate the result; Undo un-skips.
|
||
async function handleSkipSelected() {
|
||
const toSkip = selectedRows.filter((r) => !r.is_skipped);
|
||
if (toSkip.length === 0) {
|
||
toast.info('No skippable bills selected.');
|
||
return;
|
||
}
|
||
setBulkBusy(true);
|
||
try {
|
||
const results = await Promise.allSettled(
|
||
toSkip.map((r) =>
|
||
api.saveBillMonthlyState(r.id, {
|
||
year,
|
||
month,
|
||
is_skipped: true,
|
||
actual_amount: r.actual_amount,
|
||
notes: r.monthly_notes,
|
||
}),
|
||
),
|
||
);
|
||
const skipped = toSkip.filter((_, i) => results[i]?.status === 'fulfilled');
|
||
const failed = results.length - skipped.length;
|
||
if (skipped.length > 0) {
|
||
toast.success(
|
||
`Skipped ${skipped.length} bill${skipped.length === 1 ? '' : 's'}${failed ? ` — ${failed} failed` : ''}`,
|
||
{
|
||
action: {
|
||
label: 'Undo',
|
||
onClick: async () => {
|
||
try {
|
||
await Promise.all(
|
||
skipped.map((r) =>
|
||
api.saveBillMonthlyState(r.id, {
|
||
year,
|
||
month,
|
||
is_skipped: false,
|
||
actual_amount: r.actual_amount,
|
||
notes: r.monthly_notes,
|
||
}),
|
||
),
|
||
);
|
||
toast.success('Restored');
|
||
invalidateData();
|
||
} catch (err) {
|
||
toast.error((err as { message?: string })?.message || 'Failed to undo.');
|
||
}
|
||
},
|
||
},
|
||
},
|
||
);
|
||
} else {
|
||
toast.error('Failed to skip the selected bills.');
|
||
}
|
||
clearSelection();
|
||
invalidateData();
|
||
} finally {
|
||
setBulkBusy(false);
|
||
}
|
||
}
|
||
|
||
const rows = useMemo(() => orderedRows || data?.rows || [], [orderedRows, data]);
|
||
const selectedRows = useMemo(
|
||
() => rows.filter((r) => selectedIds.has(r.id)),
|
||
[rows, selectedIds],
|
||
);
|
||
const summary = (data?.summary ?? {}) as TrackerSummary;
|
||
const bankTracking = data?.bank_tracking;
|
||
const cashflow = data?.cashflow;
|
||
const today = localDateString();
|
||
// Safe-to-spend projects from "now", so it only makes sense on the current month.
|
||
const isCurrentMonth = today.startsWith(`${year}-${String(month).padStart(2, '0')}`);
|
||
const bannerSnoozedUntil = trackerSettings.tracker_bank_projection_banner_snoozed_until || '';
|
||
const showSearchSort = settingEnabled(trackerSettings.tracker_show_search_sort);
|
||
const showSummaryCards = settingEnabled(trackerSettings.tracker_show_summary_cards);
|
||
const showOverdueCommandCenter = settingEnabled(
|
||
trackerSettings.tracker_show_overdue_command_center,
|
||
);
|
||
const showSafeToSpend = settingEnabled(trackerSettings.tracker_show_safe_to_spend);
|
||
const showDriftInsights = settingEnabled(trackerSettings.tracker_show_drift_insights);
|
||
// Collapse state for the Overdue / Drift panels is remembered per-user (default expanded).
|
||
const overdueCollapsed = settingEnabled(trackerSettings.tracker_overdue_collapsed, false);
|
||
const driftCollapsed = settingEnabled(trackerSettings.tracker_drift_collapsed, false);
|
||
const showBankProjectionBanner =
|
||
settingEnabled(trackerSettings.tracker_show_bank_projection_banner) &&
|
||
(!bannerSnoozedUntil || bannerSnoozedUntil <= today);
|
||
const visibleTableColumns = useMemo(
|
||
() => parseTrackerTableColumns(trackerSettings.tracker_table_columns),
|
||
[trackerSettings.tracker_table_columns],
|
||
);
|
||
|
||
// Optimistic write + rollback now live in the useSaveSettings mutation; this
|
||
// wrapper just fires it and owns the success/error toasts.
|
||
function saveTrackerSettings(patch: Record<string, string>, successMessage?: string) {
|
||
saveSettings.mutate(patch, {
|
||
onSuccess: () => {
|
||
if (successMessage) toast.success(successMessage);
|
||
},
|
||
onError: (err) =>
|
||
toast.error((err as { message?: string })?.message || 'Failed to update tracker setting'),
|
||
});
|
||
}
|
||
|
||
function snoozeBankProjectionBanner() {
|
||
const until = new Date();
|
||
until.setDate(until.getDate() + 1);
|
||
saveTrackerSettings(
|
||
{
|
||
tracker_bank_projection_banner_snoozed_until: localDateString(until),
|
||
},
|
||
'Bank projection banner snoozed until tomorrow.',
|
||
);
|
||
}
|
||
|
||
function ignoreBankProjectionBanner() {
|
||
saveTrackerSettings(
|
||
{
|
||
tracker_show_bank_projection_banner: 'false',
|
||
tracker_bank_projection_banner_snoozed_until: '',
|
||
},
|
||
'Bank projection banner hidden. You can turn it back on in Settings.',
|
||
);
|
||
}
|
||
|
||
function handleTableColumnToggle(columnKey: string, checked: boolean) {
|
||
const nextColumns = checked
|
||
? [...visibleTableColumns, columnKey]
|
||
: visibleTableColumns.filter((key) => key !== columnKey);
|
||
|
||
saveTrackerSettings({
|
||
tracker_table_columns: trackerTableColumnsToSetting(nextColumns),
|
||
});
|
||
}
|
||
|
||
function hideSearchSortPanel() {
|
||
saveTrackerSettings({ tracker_show_search_sort: 'false' });
|
||
toast('Search & sort hidden.', {
|
||
action: {
|
||
label: 'Undo',
|
||
onClick: () => saveTrackerSettings({ tracker_show_search_sort: 'true' }),
|
||
},
|
||
});
|
||
}
|
||
|
||
function hideOverduePanel() {
|
||
saveTrackerSettings({ tracker_show_overdue_command_center: 'false' });
|
||
toast('Overdue panel hidden.', {
|
||
action: {
|
||
label: 'Undo',
|
||
onClick: () => saveTrackerSettings({ tracker_show_overdue_command_center: 'true' }),
|
||
},
|
||
});
|
||
}
|
||
|
||
function hideDriftPanel() {
|
||
saveTrackerSettings({ tracker_show_drift_insights: 'false' });
|
||
toast('Price-change insights hidden.', {
|
||
action: {
|
||
label: 'Undo',
|
||
onClick: () => saveTrackerSettings({ tracker_show_drift_insights: 'true' }),
|
||
},
|
||
});
|
||
}
|
||
|
||
const toggleFilter = (key: BoolFilterKey) => {
|
||
const paramMap: Record<BoolFilterKey, string> = {
|
||
autopay: 'ap',
|
||
firstBucket: 'b1',
|
||
fifteenthBucket: 'b2',
|
||
unpaid: 'un',
|
||
overdue: 'ov',
|
||
debt: 'de',
|
||
};
|
||
updateParams({ [paramMap[key]]: !filters[key] });
|
||
};
|
||
const setFilterValue = (key: 'category' | 'cycle', value: string) => {
|
||
const paramMap: Record<'category' | 'cycle', string> = { category: 'fc', cycle: 'cy' };
|
||
updateParams({ [paramMap[key]]: value === FILTER_ALL ? null : value });
|
||
};
|
||
const setSort = (key: string) => {
|
||
const normalizedKey = normalizeTrackerSortKey(key);
|
||
if (normalizedKey === TRACKER_SORT_DEFAULT) {
|
||
updateParams({ sort: null, dir: null });
|
||
return;
|
||
}
|
||
updateParams({
|
||
sort: normalizedKey,
|
||
dir: TRACKER_SORT_DEFAULT_DIRS[normalizedKey] || TRACKER_SORT_ASC,
|
||
});
|
||
};
|
||
const toggleSortDirection = () => {
|
||
if (!hasSort) return;
|
||
updateParams({ dir: sortDir === TRACKER_SORT_ASC ? TRACKER_SORT_DESC : TRACKER_SORT_ASC });
|
||
};
|
||
const handleSortHeader = (key: string) => {
|
||
const normalizedKey = normalizeTrackerSortKey(key);
|
||
if (normalizedKey === TRACKER_SORT_DEFAULT) return;
|
||
if (sortKey === normalizedKey) {
|
||
updateParams({ dir: sortDir === TRACKER_SORT_ASC ? TRACKER_SORT_DESC : TRACKER_SORT_ASC });
|
||
return;
|
||
}
|
||
updateParams({
|
||
sort: normalizedKey,
|
||
dir: TRACKER_SORT_DEFAULT_DIRS[normalizedKey] || TRACKER_SORT_ASC,
|
||
});
|
||
};
|
||
const hasFilters = !!(
|
||
search.trim() ||
|
||
filters.category !== FILTER_ALL ||
|
||
filters.cycle !== FILTER_ALL ||
|
||
filters.autopay ||
|
||
filters.firstBucket ||
|
||
filters.fifteenthBucket ||
|
||
filters.unpaid ||
|
||
filters.overdue ||
|
||
filters.debt ||
|
||
hasSort
|
||
);
|
||
const searchSortLabel = hasSort
|
||
? `sorted by ${TRACKER_SORT_LABELS[sortKey]} ${sortDir === TRACKER_SORT_ASC ? 'ascending' : 'descending'}`
|
||
: undefined;
|
||
const resetFilters = () => {
|
||
updateParams({
|
||
q: null,
|
||
fc: null,
|
||
cy: null,
|
||
ap: null,
|
||
b1: null,
|
||
b2: null,
|
||
un: null,
|
||
ov: null,
|
||
de: null,
|
||
sort: null,
|
||
dir: null,
|
||
});
|
||
};
|
||
const categoryOptions = useMemo(() => {
|
||
const map = new Map<string, string>();
|
||
rows.forEach((row) => {
|
||
if (row.category_id && row.category_name) map.set(String(row.category_id), row.category_name);
|
||
});
|
||
return Array.from(map, ([id, name]) => ({ id, name })).sort((a, b) =>
|
||
a.name.localeCompare(b.name),
|
||
);
|
||
}, [rows]);
|
||
const cycleOptions = useMemo(() => Array.from(new Set(rows.map(scheduleValue))).sort(), [rows]);
|
||
// Defer the search term so the whole-list filter below (which re-scans every
|
||
// row's haystack) runs off the urgent keystroke path — the input stays snappy
|
||
// on big months while filtering catches up (React 19).
|
||
const deferredSearch = useDeferredValue(search);
|
||
const filteredRows = useMemo(() => {
|
||
const q = deferredSearch.trim().toLowerCase();
|
||
return rows.filter((row) => {
|
||
const effectiveStatus = rowEffectiveStatus(row);
|
||
if (filters.category !== FILTER_ALL && String(row.category_id ?? '') !== filters.category)
|
||
return false;
|
||
if (filters.cycle !== FILTER_ALL && scheduleValue(row) !== filters.cycle) return false;
|
||
if (filters.autopay && !row.autopay_enabled) return false;
|
||
if (filters.debt && !rowIsDebt(row)) return false;
|
||
if (filters.unpaid && (row.is_skipped || rowIsPaid(row))) return false;
|
||
if (filters.overdue && !(effectiveStatus === 'late' || effectiveStatus === 'missed'))
|
||
return false;
|
||
if (filters.firstBucket && !filters.fifteenthBucket && row.bucket !== '1st') return false;
|
||
if (filters.fifteenthBucket && !filters.firstBucket && row.bucket !== '15th') return false;
|
||
|
||
if (!q) return true;
|
||
const haystack = [
|
||
row.name,
|
||
row.category_name,
|
||
row.notes,
|
||
row.monthly_notes,
|
||
scheduleValue(row),
|
||
scheduleLabel(row),
|
||
row.bucket,
|
||
row.status,
|
||
amountSearchText(
|
||
row.expected_amount,
|
||
row.actual_amount,
|
||
row.total_paid,
|
||
row.balance,
|
||
row.current_balance,
|
||
row.minimum_payment,
|
||
),
|
||
]
|
||
.filter(Boolean)
|
||
.join(' ')
|
||
.toLowerCase();
|
||
return haystack.includes(q);
|
||
});
|
||
}, [filters, rows, deferredSearch]);
|
||
// When pin-upcoming is on, sort by urgency so overdue/due-soon bills surface
|
||
// at the top of each bucket. Bucket split runs after so each bucket is sorted independently.
|
||
const URGENCY_ORDER: Record<string, number> = { missed: 0, late: 1, due_soon: 2, upcoming: 3 };
|
||
const sortedRows = hasSort
|
||
? sortTrackerRows(filteredRows, sortKey, sortDir)
|
||
: pinUpcoming
|
||
? [...filteredRows].sort((a, b) => {
|
||
// Rank on the reconciled status (same source the overdue filter uses),
|
||
// so a bill that's paid-by-threshold but still carries a stale raw
|
||
// 'late'/'missed' status sorts to the bottom instead of being pinned up.
|
||
const ua = URGENCY_ORDER[rowEffectiveStatus(a)] ?? 99;
|
||
const ub = URGENCY_ORDER[rowEffectiveStatus(b)] ?? 99;
|
||
if (ua !== ub) return ua - ub;
|
||
return (a.due_day ?? 99) - (b.due_day ?? 99);
|
||
})
|
||
: filteredRows;
|
||
|
||
const searchResultLabel = `${filteredRows.length} of ${rows.length} shown`;
|
||
|
||
const first = sortedRows.filter((r) => r.bucket === '1st');
|
||
const second = sortedRows.filter((r) => r.bucket === '15th');
|
||
const reorderEnabled = !hasFilters && !loading && !isError && !pinUpcoming;
|
||
const activeMonthLabel = `${MONTHS[month - 1]} ${year}`;
|
||
const monthStartLabel = new Date(year, month - 1, 1).toLocaleDateString(undefined, {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
});
|
||
const monthEndLabel = new Date(year, month, 0).toLocaleDateString(undefined, {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
});
|
||
const paidCount = Number(summary.count_paid ?? 0);
|
||
const overdueCount = Number(summary.count_late ?? 0);
|
||
const unpaidCount = rows.filter((row) => !row.is_skipped && !rowIsPaid(row)).length;
|
||
const headerStatusTone = isError
|
||
? 'danger'
|
||
: loading
|
||
? 'info'
|
||
: overdueCount > 0
|
||
? 'danger'
|
||
: unpaidCount > 0
|
||
? 'warn'
|
||
: 'good';
|
||
const headerStatusText = isError
|
||
? 'Needs attention'
|
||
: loading
|
||
? 'Loading month'
|
||
: overdueCount > 0
|
||
? `${overdueCount} overdue`
|
||
: unpaidCount > 0
|
||
? `${unpaidCount} unpaid`
|
||
: 'All settled';
|
||
|
||
async function persistTrackerOrder(nextRows: TrackerRow[], movedBillId: number | null) {
|
||
const payload = Object.fromEntries(nextRows.map((row, index) => [row.id, index]));
|
||
setOrderedRows(nextRows);
|
||
setMovingBillId(movedBillId);
|
||
try {
|
||
await api.reorderBills(payload);
|
||
toast.success('Bill order saved');
|
||
invalidateData();
|
||
} catch (err) {
|
||
setOrderedRows(null);
|
||
toast.error((err as { message?: string })?.message || 'Failed to save bill order');
|
||
} finally {
|
||
setMovingBillId(null);
|
||
}
|
||
}
|
||
|
||
function handleReorderBucket(bucket: string, orderedBucketRows: TrackerRow[]) {
|
||
const sourceRows = rows;
|
||
const nextRows = [...sourceRows];
|
||
const replacement = [...orderedBucketRows];
|
||
for (let i = 0; i < nextRows.length; i += 1) {
|
||
const cur = nextRows[i];
|
||
if (cur && cur.bucket === bucket) nextRows[i] = replacement.shift()!;
|
||
}
|
||
const moved = orderedBucketRows.find(
|
||
(row, index) => row.id !== sourceRows.filter((item) => item.bucket === bucket)[index]?.id,
|
||
);
|
||
if (moved) {
|
||
const pos = orderedBucketRows.findIndex((r) => r.id === moved.id) + 1;
|
||
setReorderAnnouncement(
|
||
`Moved ${moved.name} to position ${pos} of ${orderedBucketRows.length}.`,
|
||
);
|
||
}
|
||
persistTrackerOrder(nextRows, moved?.id || orderedBucketRows[0]?.id || null);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-5">
|
||
{/* Visually-hidden live region: announces drag/keyboard reorder to screen readers */}
|
||
<div role="status" aria-live="polite" className="sr-only">
|
||
{reorderAnnouncement}
|
||
</div>
|
||
|
||
{/* ── Header ── */}
|
||
<PageHeader
|
||
eyebrow="Monthly command center"
|
||
title="Tracker"
|
||
description={
|
||
<>
|
||
{activeMonthLabel}
|
||
<span className="mx-2 text-muted-foreground/60">·</span>
|
||
{monthStartLabel} to {monthEndLabel}
|
||
{isCurrentMonth && (
|
||
<>
|
||
<span className="mx-2 text-muted-foreground/60">·</span>
|
||
Current month
|
||
</>
|
||
)}
|
||
</>
|
||
}
|
||
glyph="tracker"
|
||
meta={
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<HeaderStat
|
||
icon={CheckCircle2}
|
||
label="Paid"
|
||
value={loading ? '...' : paidCount}
|
||
tone={paidCount > 0 ? 'good' : 'neutral'}
|
||
/>
|
||
<HeaderStat
|
||
icon={AlertCircle}
|
||
label="Needs action"
|
||
value={loading ? '...' : headerStatusText}
|
||
tone={headerStatusTone}
|
||
/>
|
||
<HeaderStat
|
||
icon={Search}
|
||
label="Showing"
|
||
value={`${filteredRows.length}/${rows.length}`}
|
||
tone={hasFilters ? 'info' : 'neutral'}
|
||
/>
|
||
<HeaderStat
|
||
icon={RefreshCw}
|
||
label="Remaining"
|
||
value={loading ? '...' : fmt(summary.remaining)}
|
||
tone={Number(summary.remaining ?? 0) <= 0 ? 'good' : 'neutral'}
|
||
/>
|
||
</div>
|
||
}
|
||
actions={
|
||
<div className="flex flex-wrap items-center gap-2 tracker-print-hide">
|
||
<div className="flex items-center gap-1 rounded-full border border-border/75 bg-card/70 p-1 shadow-sm shadow-black/5">
|
||
<Button
|
||
size="icon"
|
||
variant="ghost"
|
||
onClick={() => navigate(-1)}
|
||
onMouseEnter={() => prefetchAdjacent(-1)}
|
||
onFocus={() => prefetchAdjacent(-1)}
|
||
className="h-8 w-8 rounded-full"
|
||
aria-label="Previous month"
|
||
>
|
||
<ChevronLeft className="h-4 w-4" />
|
||
</Button>
|
||
<span className="min-w-32 px-1 text-center text-xs font-semibold tabular-nums select-none">
|
||
{activeMonthLabel}
|
||
</span>
|
||
<Button
|
||
size="icon"
|
||
variant="ghost"
|
||
onClick={() => navigate(1)}
|
||
onMouseEnter={() => prefetchAdjacent(1)}
|
||
onFocus={() => prefetchAdjacent(1)}
|
||
className="h-8 w-8 rounded-full"
|
||
aria-label="Next month"
|
||
>
|
||
<ChevronRight className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
<Button
|
||
size="sm"
|
||
variant={isCurrentMonth ? 'secondary' : 'outline'}
|
||
onClick={goToday}
|
||
className="h-9 rounded-full px-3 text-xs"
|
||
>
|
||
Today
|
||
</Button>
|
||
|
||
<Button
|
||
size="sm"
|
||
variant={pinUpcoming ? 'default' : 'outline'}
|
||
onClick={togglePinUpcoming}
|
||
className="h-9 gap-1.5 rounded-full px-3"
|
||
title={
|
||
pinUpcoming
|
||
? 'Showing urgent bills first — click to restore normal order'
|
||
: 'Pin overdue and due-soon bills to the top'
|
||
}
|
||
>
|
||
<ArrowUpToLine className="h-4 w-4" />
|
||
<span className="hidden sm:inline">{pinUpcoming ? 'Pinned' : 'Pin Due'}</span>
|
||
</Button>
|
||
|
||
{showBankSync && (
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={handleBankSync}
|
||
disabled={bankSyncing}
|
||
className="h-9 gap-1.5 rounded-full px-3"
|
||
title="Scan bank transactions and match payments"
|
||
>
|
||
{bankSyncing ? (
|
||
<RefreshCw className="h-4 w-4 animate-spin" />
|
||
) : (
|
||
<Landmark className="h-4 w-4" />
|
||
)}
|
||
<span className="hidden sm:inline">{bankSyncing ? 'Syncing…' : 'Sync Bank'}</span>
|
||
</Button>
|
||
)}
|
||
<Button
|
||
size="sm"
|
||
onClick={handleOpenAddBill}
|
||
className="h-9 gap-1.5 rounded-full px-3 shadow-sm"
|
||
aria-label="Add bill"
|
||
title="Add bill"
|
||
>
|
||
<Plus className="h-4 w-4" />
|
||
<span className="hidden sm:inline">Add Bill</span>
|
||
</Button>
|
||
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={goToCalendar}
|
||
className="h-9 gap-1.5 rounded-full px-3 tracker-print-hide"
|
||
aria-label="Open calendar for this month"
|
||
title="View this month on the calendar"
|
||
>
|
||
<CalendarDays className="h-4 w-4" />
|
||
<span className="hidden sm:inline">Calendar</span>
|
||
</Button>
|
||
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
className="h-9 gap-1.5 rounded-full px-3 tracker-print-hide"
|
||
aria-label="Export or print this month"
|
||
title="Export or print this month"
|
||
>
|
||
<Download className="h-4 w-4" />
|
||
<span className="hidden sm:inline">Export</span>
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end">
|
||
<DropdownMenuLabel>
|
||
{new Date(year, month - 1, 1).toLocaleString('en-US', { month: 'long' })} {year}
|
||
</DropdownMenuLabel>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem onSelect={handleExportMonthCsv}>
|
||
<FileSpreadsheet className="mr-2 h-4 w-4" />
|
||
Export CSV
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem onSelect={() => window.print()}>
|
||
<Printer className="mr-2 h-4 w-4" />
|
||
Print
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button
|
||
size="icon"
|
||
variant="ghost"
|
||
className="h-9 w-9 rounded-full tracker-print-hide"
|
||
aria-label="Keyboard shortcuts"
|
||
title="Keyboard shortcuts"
|
||
>
|
||
<Keyboard className="h-4 w-4" />
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end" className="w-64">
|
||
<DropdownMenuLabel>Keyboard shortcuts</DropdownMenuLabel>
|
||
<DropdownMenuSeparator />
|
||
<div className="space-y-1.5 px-2 py-1.5 text-xs text-muted-foreground">
|
||
{[
|
||
['Move between bills', 'j / k · ↑ / ↓'],
|
||
['Edit focused bill', 'Enter'],
|
||
['Toggle paid', 'p'],
|
||
['Blur / deselect row', 'Esc'],
|
||
['Command palette', '⌘K / Ctrl+K'],
|
||
].map(([label, keys]) => (
|
||
<div key={label} className="flex items-center justify-between gap-4">
|
||
<span>{label}</span>
|
||
<kbd className="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-foreground">
|
||
{keys}
|
||
</kbd>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<DropdownMenuSeparator />
|
||
<p className="px-2 py-1 text-[11px] text-muted-foreground">
|
||
Focus any bill row (Tab or click), then use the keys above.
|
||
</p>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
}
|
||
/>
|
||
|
||
{showSearchSort && (
|
||
<SearchFilterPanel
|
||
title="Search & sort"
|
||
className="tracker-print-hide"
|
||
collapsed={searchPanelCollapsed}
|
||
onCollapsedChange={setSearchPanelCollapsed}
|
||
hasFilters={hasFilters}
|
||
resultLabel={searchResultLabel}
|
||
sortLabel={searchSortLabel}
|
||
onClear={resetFilters}
|
||
headerActions={
|
||
<div className="flex items-center gap-2">
|
||
<TrackerColumnMenu
|
||
visibleColumns={visibleTableColumns}
|
||
onColumnToggle={handleTableColumnToggle}
|
||
saving={savingTrackerSetting}
|
||
/>
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
variant="ghost"
|
||
onClick={hideSearchSortPanel}
|
||
disabled={savingTrackerSetting}
|
||
className="h-8 gap-1.5 px-2.5 text-xs text-muted-foreground hover:text-foreground"
|
||
>
|
||
<EyeOff className="h-3.5 w-3.5" />
|
||
<span className="hidden sm:inline">Hide</span>
|
||
</Button>
|
||
</div>
|
||
}
|
||
>
|
||
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-[minmax(220px,1fr)_220px_180px_220px_auto] xl:items-center">
|
||
<label className="relative">
|
||
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||
<Input
|
||
value={search}
|
||
onChange={(e) => updateParams({ q: e.target.value || null })}
|
||
placeholder="Search this month by bill, category, notes, or amount"
|
||
className="h-10 pl-9"
|
||
/>
|
||
</label>
|
||
<Select
|
||
value={filters.category}
|
||
onValueChange={(value) => setFilterValue('category', value)}
|
||
>
|
||
<SelectTrigger className="h-10" aria-label="Filter by category">
|
||
<SelectValue placeholder="Category" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value={FILTER_ALL}>All categories</SelectItem>
|
||
{categoryOptions.map((category) => (
|
||
<SelectItem key={category.id} value={category.id}>
|
||
{category.name}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
<Select value={filters.cycle} onValueChange={(value) => setFilterValue('cycle', value)}>
|
||
<SelectTrigger className="h-10 capitalize" aria-label="Filter by billing schedule">
|
||
<SelectValue placeholder="Billing schedule" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value={FILTER_ALL}>All cycles</SelectItem>
|
||
{cycleOptions.map((cycle) => (
|
||
<SelectItem key={cycle} value={cycle}>
|
||
{scheduleLabel(cycle)}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
<Select value={sortKey} onValueChange={setSort}>
|
||
<SelectTrigger className="h-10" aria-label="Sort by">
|
||
<SelectValue placeholder="Sort by" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{TRACKER_SORT_OPTIONS.map((option) => (
|
||
<SelectItem key={option.key} value={option.key}>
|
||
{option.label}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
disabled={!hasSort}
|
||
onClick={toggleSortDirection}
|
||
className="h-10 justify-center gap-2 text-xs"
|
||
title={
|
||
hasSort
|
||
? `Sort ${sortDir === TRACKER_SORT_ASC ? 'ascending' : 'descending'}`
|
||
: 'Choose a sort first'
|
||
}
|
||
>
|
||
{sortDir === TRACKER_SORT_ASC ? (
|
||
<ArrowUp className="h-3.5 w-3.5" />
|
||
) : (
|
||
<ArrowDown className="h-3.5 w-3.5" />
|
||
)}
|
||
<span>{sortDir === TRACKER_SORT_ASC ? 'Asc' : 'Desc'}</span>
|
||
</Button>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<FilterChip active={filters.unpaid} onClick={() => toggleFilter('unpaid')}>
|
||
Unpaid
|
||
</FilterChip>
|
||
<FilterChip active={filters.overdue} onClick={() => toggleFilter('overdue')}>
|
||
Overdue
|
||
</FilterChip>
|
||
<FilterChip active={filters.autopay} onClick={() => toggleFilter('autopay')}>
|
||
Autopay
|
||
</FilterChip>
|
||
<FilterChip active={filters.firstBucket} onClick={() => toggleFilter('firstBucket')}>
|
||
1st bucket
|
||
</FilterChip>
|
||
<FilterChip
|
||
active={filters.fifteenthBucket}
|
||
onClick={() => toggleFilter('fifteenthBucket')}
|
||
>
|
||
15th bucket
|
||
</FilterChip>
|
||
<FilterChip active={filters.debt} onClick={() => toggleFilter('debt')}>
|
||
Debt
|
||
</FilterChip>
|
||
<span
|
||
role="status"
|
||
aria-live="polite"
|
||
className="ml-auto text-xs text-muted-foreground tabular-nums"
|
||
>
|
||
{filteredRows.length} of {rows.length} shown
|
||
{hasSort && (
|
||
<span className="ml-2 hidden sm:inline">
|
||
· sorted by {TRACKER_SORT_LABELS[sortKey]}{' '}
|
||
{sortDir === TRACKER_SORT_ASC ? 'ascending' : 'descending'}
|
||
</span>
|
||
)}
|
||
</span>
|
||
</div>
|
||
</SearchFilterPanel>
|
||
)}
|
||
|
||
{/* ── Summary cards (backend already excludes skipped from totals) ── */}
|
||
{showSummaryCards && loading ? (
|
||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:flex" aria-busy="true">
|
||
<Skeleton variant="card" className="h-32" />
|
||
<Skeleton variant="card" className="h-32" />
|
||
<Skeleton variant="card" className="h-32" />
|
||
<Skeleton variant="card" className="h-32" />
|
||
<Skeleton variant="card" className="h-32" />
|
||
{summary.trend ? <Skeleton variant="card" className="h-32" /> : null}
|
||
</div>
|
||
) : showSummaryCards ? (
|
||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:flex">
|
||
{bankTracking?.enabled ? (
|
||
<button
|
||
type="button"
|
||
onClick={() => setIncomeModalOpen(true)}
|
||
className={cn(
|
||
'metric-card min-w-0 flex-1 text-left transition-all duration-200',
|
||
'hover:ring-2 hover:ring-primary/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
|
||
Number(bankTracking.remaining ?? 0) >= 0
|
||
? 'border-emerald-500/25 bg-emerald-500/[0.07]'
|
||
: 'border-destructive/30 bg-destructive/[0.07]',
|
||
)}
|
||
title="Click to see income breakdown"
|
||
>
|
||
<div className="mb-3 flex items-start justify-between gap-3">
|
||
<div className="flex min-w-0 items-center gap-2">
|
||
<span
|
||
className={cn(
|
||
'grid h-7 w-7 shrink-0 place-items-center rounded-lg border border-current/15 bg-current/8',
|
||
Number(bankTracking.remaining ?? 0) >= 0
|
||
? 'text-emerald-600 dark:text-emerald-300'
|
||
: 'text-destructive',
|
||
)}
|
||
>
|
||
<Landmark className="h-3.5 w-3.5" />
|
||
</span>
|
||
<p className="truncate text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
|
||
{bankTracking.account_name}
|
||
</p>
|
||
</div>
|
||
<span className="ml-auto flex items-center gap-1 text-[10px] text-emerald-600 dark:text-emerald-400 font-medium">
|
||
<StatusDot
|
||
tone="good"
|
||
pulse
|
||
className="h-1.5 w-1.5 [&_span]:h-1.5 [&_span]:w-1.5"
|
||
/>
|
||
Live
|
||
</span>
|
||
</div>
|
||
<p className="metric-value mt-4 text-2xl leading-none sm:text-[1.72rem]">
|
||
{fmt(bankTracking.effective_balance ?? 0)}
|
||
</p>
|
||
<p className="mt-2 text-xs leading-5 text-muted-foreground">
|
||
{Number(bankTracking.remaining ?? 0) < 0 ? '−' : ''}
|
||
{fmt(Math.abs(Number(bankTracking.remaining ?? 0)))} projected after bills
|
||
</p>
|
||
{bankTracking.last_updated && (
|
||
<p className="mt-1 text-[10px] leading-4 text-muted-foreground/70">
|
||
as of {fmtBalanceAge(bankTracking.last_updated)}
|
||
</p>
|
||
)}
|
||
</button>
|
||
) : (
|
||
<SummaryCard
|
||
type="starting"
|
||
value={summary.total_starting}
|
||
hint={(() => {
|
||
if (!summary.has_starting_amounts) return 'Set monthly starting cash';
|
||
if (cashflow?.has_data && cashflow.period_projected !== undefined) {
|
||
const proj = Number(cashflow.period_projected);
|
||
const sign = proj < 0 ? '−' : '';
|
||
return `→ ${sign}${fmt(Math.abs(proj))} projected by ${cashflow.period_end_label}`;
|
||
}
|
||
return '';
|
||
})()}
|
||
onEdit={() => setEditStartingOpen(true)}
|
||
/>
|
||
)}
|
||
<SummaryCard
|
||
type="paid"
|
||
value={summary.total_paid}
|
||
hint={
|
||
Number(summary.previous_month_total ?? 0) > 0
|
||
? `Last month: ${fmt(summary.previous_month_total)}`
|
||
: undefined
|
||
}
|
||
/>
|
||
{/* In bank mode the hero card already surfaces the projected remaining,
|
||
so only show the Remaining card when there's no bank hero. */}
|
||
{!bankTracking?.enabled && (
|
||
<SummaryCard
|
||
type="remaining"
|
||
value={summary.remaining}
|
||
hint={summary.remaining_label || undefined}
|
||
/>
|
||
)}
|
||
<SummaryCard type="overdue" value={summary.overdue} />
|
||
{summary.trend ? (
|
||
<TrendCard trend={summary.trend as Parameters<typeof TrendCard>[0]['trend']} />
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
|
||
{/* Compact month-progress line — quick "how far through the month am I?" */}
|
||
{showSummaryCards &&
|
||
!loading &&
|
||
!isError &&
|
||
Number(summary?.total_expected ?? 0) > 0 &&
|
||
(() => {
|
||
const billsLeft = (summary.count_upcoming ?? 0) + (summary.count_late ?? 0);
|
||
const progress = Math.min(
|
||
100,
|
||
Math.max(
|
||
0,
|
||
(Number(summary.paid_toward_due || 0) / Number(summary.total_expected || 1)) * 100,
|
||
),
|
||
);
|
||
return (
|
||
<div className="-mt-1 rounded-xl border border-border/65 bg-card/55 px-3 py-2 shadow-sm shadow-black/5">
|
||
<div className="flex flex-wrap items-center justify-between gap-2 text-[11px] text-muted-foreground">
|
||
<p>
|
||
<span className="tracker-number font-semibold text-foreground">
|
||
{fmt(summary.paid_toward_due)}
|
||
</span>
|
||
{' of '}
|
||
<span className="tracker-number">{fmt(summary.total_expected)}</span>
|
||
{' paid'}
|
||
{billsLeft > 0 && (
|
||
<>
|
||
{' '}
|
||
· {billsLeft} bill{billsLeft === 1 ? '' : 's'} left
|
||
</>
|
||
)}
|
||
</p>
|
||
<span className="tracker-number font-semibold text-foreground">
|
||
{Math.round(progress)}%
|
||
</span>
|
||
</div>
|
||
<div className="mt-2 h-1.5 overflow-hidden rounded-full bg-muted">
|
||
<div
|
||
className="h-full rounded-full bg-primary/75"
|
||
style={{ width: `${progress}%` }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
})()}
|
||
|
||
{/* ── Safe to Spend ── */}
|
||
{!isError && !loading && showSafeToSpend && isCurrentMonth && cashflow && (
|
||
<CashFlowCard cashflow={cashflow} onSetStartingAmounts={() => setEditStartingOpen(true)} />
|
||
)}
|
||
|
||
{/* ── Overdue Command Center ── */}
|
||
{!isError && !loading && showOverdueCommandCenter && (summary?.count_late ?? 0) > 0 && (
|
||
<OverdueCommandCenter
|
||
rows={rows}
|
||
year={year}
|
||
month={month}
|
||
refresh={invalidateData}
|
||
onPayNow={(row) => setCommandCenterPayRow(row)}
|
||
collapsed={overdueCollapsed}
|
||
onCollapsedChange={(c) =>
|
||
saveTrackerSettings({ tracker_overdue_collapsed: c ? 'true' : 'false' })
|
||
}
|
||
onHide={hideOverduePanel}
|
||
/>
|
||
)}
|
||
|
||
{/* ── Bank Projection Banner ── */}
|
||
{!isError && !loading && showBankProjectionBanner && (
|
||
<BankProjectionBanner
|
||
bankTracking={bankTracking}
|
||
busy={savingTrackerSetting}
|
||
onSnooze={snoozeBankProjectionBanner}
|
||
onIgnore={ignoreBankProjectionBanner}
|
||
/>
|
||
)}
|
||
|
||
{/* ── Drift / Price-Change Insights ── */}
|
||
{!isError && !loading && showDriftInsights && (driftData?.bills?.length ?? 0) > 0 && (
|
||
<DriftInsightPanel
|
||
driftBills={driftData?.bills || []}
|
||
refresh={invalidateData}
|
||
collapsed={driftCollapsed}
|
||
onCollapsedChange={(c) =>
|
||
saveTrackerSettings({ tracker_drift_collapsed: c ? 'true' : 'false' })
|
||
}
|
||
onHide={hideDriftPanel}
|
||
/>
|
||
)}
|
||
|
||
{/* ── Fetch error state ── */}
|
||
{isError && (
|
||
<EmptyState
|
||
icon={AlertCircle}
|
||
title="Failed to load tracker data"
|
||
description={error?.message || 'An unexpected error occurred.'}
|
||
action={
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => refetch()}
|
||
className="gap-1.5 text-xs border-destructive/30 hover:bg-destructive/10 hover:text-destructive hover:border-destructive/50"
|
||
>
|
||
<RefreshCw className="h-3 w-3" />
|
||
Try again
|
||
</Button>
|
||
}
|
||
/>
|
||
)}
|
||
|
||
{/* ── Empty state ── */}
|
||
{!isError && rows.length === 0 && data != null && (
|
||
<EmptyState
|
||
icon={CheckCircle2}
|
||
title="No bills this month"
|
||
action={
|
||
<a
|
||
href="/bills"
|
||
className="text-xs text-muted-foreground underline underline-offset-4 transition-colors hover:text-foreground"
|
||
>
|
||
Add a bill
|
||
</a>
|
||
}
|
||
/>
|
||
)}
|
||
|
||
{/* ── Buckets — year and month passed so Row can open the correct monthly state dialog ── */}
|
||
{!isError && loading && (
|
||
<div className="space-y-5" aria-busy="true">
|
||
<div className="rounded-xl border border-border overflow-hidden bg-card p-4">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div className="h-4 w-32 rounded-md bg-muted" />
|
||
<div className="h-4 w-16 rounded-md bg-muted" />
|
||
</div>
|
||
<div className="space-y-3">
|
||
{Array.from({ length: 3 }).map((_, i) => (
|
||
<div key={i} className="flex items-center gap-3 animate-pulse">
|
||
<div className="h-1.5 w-1.5 rounded-full bg-muted" />
|
||
<div className="h-4 w-64 rounded-md bg-muted" />
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="rounded-xl border border-border overflow-hidden bg-card p-4">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div className="h-4 w-32 rounded-md bg-muted" />
|
||
<div className="h-4 w-16 rounded-md bg-muted" />
|
||
</div>
|
||
<div className="space-y-3">
|
||
{Array.from({ length: 3 }).map((_, i) => (
|
||
<div key={i} className="flex items-center gap-3 animate-pulse">
|
||
<div className="h-1.5 w-1.5 rounded-full bg-muted" />
|
||
<div className="h-4 w-64 rounded-md bg-muted" />
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{/* ── Filtered-to-empty state — bills exist this month but none match the active filters/search ── */}
|
||
{!isError && !loading && rows.length > 0 && first.length === 0 && second.length === 0 && (
|
||
<EmptyState
|
||
icon={Search}
|
||
title="No bills match your filters"
|
||
description={`${rows.length} bill${rows.length === 1 ? '' : 's'} this month are hidden by the current search or filters.`}
|
||
action={
|
||
hasFilters ? (
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={resetFilters}
|
||
className="gap-1.5 text-xs"
|
||
>
|
||
<RefreshCw className="h-3 w-3" />
|
||
Clear filters
|
||
</Button>
|
||
) : undefined
|
||
}
|
||
/>
|
||
)}
|
||
|
||
{!isError && (first.length > 0 || second.length > 0) && (
|
||
<div className="space-y-5">
|
||
{first.length > 0 && (
|
||
<Bucket
|
||
label="1st – 14th"
|
||
rows={first}
|
||
year={year}
|
||
month={month}
|
||
refresh={invalidateData}
|
||
onEditBill={handleOpenEditBill}
|
||
loading={loading}
|
||
reorderEnabled={reorderEnabled}
|
||
movingBillId={movingBillId}
|
||
sortKey={sortKey}
|
||
sortDir={sortDir}
|
||
onSort={handleSortHeader}
|
||
onReorderRows={(next) => handleReorderBucket('1st', next)}
|
||
driftedIds={driftedIds}
|
||
visibleColumns={visibleTableColumns}
|
||
selectedIds={selectedIds}
|
||
onToggleSelect={handleToggleSelect}
|
||
/>
|
||
)}
|
||
{second.length > 0 && (
|
||
<Bucket
|
||
label="15th – 31st"
|
||
rows={second}
|
||
year={year}
|
||
month={month}
|
||
refresh={invalidateData}
|
||
onEditBill={handleOpenEditBill}
|
||
loading={loading}
|
||
reorderEnabled={reorderEnabled}
|
||
movingBillId={movingBillId}
|
||
sortKey={sortKey}
|
||
sortDir={sortDir}
|
||
onSort={handleSortHeader}
|
||
onReorderRows={(next) => handleReorderBucket('15th', next)}
|
||
driftedIds={driftedIds}
|
||
visibleColumns={visibleTableColumns}
|
||
selectedIds={selectedIds}
|
||
onToggleSelect={handleToggleSelect}
|
||
/>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Edit Bill modal — opened by clicking a bill name in any tracker row */}
|
||
{editBillData && (
|
||
<BillModal
|
||
key={
|
||
editBillData.bill?.id
|
||
? `edit-${editBillData.bill.id}`
|
||
: `new-${editBillData.initialBill?.name || 'blank'}`
|
||
}
|
||
bill={editBillData.bill}
|
||
initialBill={editBillData.initialBill}
|
||
categories={editBillData.categories}
|
||
onClose={() => setEditBillData(null)}
|
||
onSave={() => invalidateData()}
|
||
onDuplicate={(bill) =>
|
||
setEditBillData({
|
||
bill: null,
|
||
initialBill: makeBillDraft(bill, {
|
||
copy: true,
|
||
categories: editBillData.categories,
|
||
}) as Partial<Bill>,
|
||
categories: editBillData.categories,
|
||
})
|
||
}
|
||
/>
|
||
)}
|
||
|
||
{/* Edit Starting Amounts modal */}
|
||
<StartingAmountsEditDialog
|
||
open={editStartingOpen}
|
||
onClose={() => setEditStartingOpen(false)}
|
||
year={year}
|
||
month={month}
|
||
onSave={() => {
|
||
setEditStartingOpen(false);
|
||
invalidateData();
|
||
}}
|
||
/>
|
||
|
||
{/* Income breakdown modal — opens when clicking the bank balance card */}
|
||
{bankTracking?.enabled && (
|
||
<IncomeBreakdownModal
|
||
open={incomeModalOpen}
|
||
onClose={() => setIncomeModalOpen(false)}
|
||
year={year}
|
||
month={month}
|
||
bankTracking={bankTracking}
|
||
/>
|
||
)}
|
||
|
||
{/* Late-attribution dialog — fires after sync when a payment just crossed a month boundary */}
|
||
{lateAttributions.length > 0 && (
|
||
<LateAttributionDialog
|
||
attr={lateAttributions[0]}
|
||
remaining={lateAttributions.length - 1}
|
||
busy={attrBusy === lateAttributions[0]?.payment_id}
|
||
onAccept={async (attr) => {
|
||
setAttrBusy(attr.payment_id);
|
||
try {
|
||
await api.attributePaymentToMonth(attr.payment_id, attr.suggested_date);
|
||
const monthName = new Date(attr.suggested_date + 'T00:00:00').toLocaleDateString(
|
||
'en-US',
|
||
{ month: 'long' },
|
||
);
|
||
toast.success(`${attr.bill_name} payment moved to ${monthName}`);
|
||
setLateAttributions((prev) => prev.slice(1)); // dismiss only on success
|
||
invalidateData();
|
||
} catch (err) {
|
||
toast.error(
|
||
(err as { message?: string })?.message ||
|
||
'Failed to reclassify payment — try again',
|
||
);
|
||
// keep the attribution in queue so user can retry
|
||
} finally {
|
||
setAttrBusy(null);
|
||
}
|
||
}}
|
||
onDismiss={() => setLateAttributions((prev) => prev.slice(1))}
|
||
/>
|
||
)}
|
||
|
||
{/* PaymentLedgerDialog opened via Overdue Command Center "Pay Now" */}
|
||
{commandCenterPayRow && (
|
||
<PaymentLedgerDialog
|
||
row={commandCenterPayRow}
|
||
year={year}
|
||
month={month}
|
||
threshold={
|
||
(commandCenterPayRow.actual_amount ?? commandCenterPayRow.expected_amount) as Dollars
|
||
}
|
||
defaultPaymentDate={paymentDateForTrackerMonth(year, month, commandCenterPayRow.due_day)}
|
||
onClose={() => setCommandCenterPayRow(null)}
|
||
onSaved={() => {
|
||
setCommandCenterPayRow(null);
|
||
invalidateData();
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{/* Multi-select action bar — sticky at the bottom while any bills are checked */}
|
||
{selectedRows.length > 0 && (
|
||
<div className="tracker-print-hide fixed inset-x-0 bottom-4 z-40 flex justify-center px-4">
|
||
<div
|
||
role="toolbar"
|
||
aria-label="Bulk actions for selected bills"
|
||
className="flex items-center gap-2 rounded-full border border-border bg-card/95 px-3 py-2 shadow-lg backdrop-blur supports-backdrop-filter:bg-card/80"
|
||
>
|
||
<span className="px-2 text-sm font-medium tabular-nums">
|
||
{selectedRows.length} selected
|
||
</span>
|
||
<Button
|
||
size="sm"
|
||
onClick={handlePaySelected}
|
||
disabled={bulkBusy || selectedRows.every((r) => r.is_skipped || rowIsPaid(r))}
|
||
className="h-8 gap-1.5"
|
||
>
|
||
<CheckCircle2 className="h-4 w-4" />
|
||
Pay
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={handleSkipSelected}
|
||
disabled={bulkBusy || selectedRows.every((r) => r.is_skipped)}
|
||
className="h-8 gap-1.5"
|
||
>
|
||
<EyeOff className="h-4 w-4" />
|
||
Skip
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
onClick={clearSelection}
|
||
disabled={bulkBusy}
|
||
className="h-8 gap-1.5 text-muted-foreground"
|
||
aria-label="Clear selection"
|
||
>
|
||
Clear
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|