210 lines
7.7 KiB
TypeScript
210 lines
7.7 KiB
TypeScript
import { useState, type ComponentType, type ReactNode } from 'react';
|
||
import { toast } from 'sonner';
|
||
import { Landmark, RefreshCw, Loader2, AlertTriangle, RotateCcw, Upload, Plus } from 'lucide-react';
|
||
import { api } from '@/api';
|
||
import { cn, errMessage } from '@/lib/utils';
|
||
import { Button } from '@/components/ui/button';
|
||
|
||
// Relative "2h ago" / "3d ago"; returns null for empty input.
|
||
function relativeTime(iso: string | null | undefined): string | null {
|
||
if (!iso) return null;
|
||
const then = new Date(iso).getTime();
|
||
if (Number.isNaN(then)) return null;
|
||
const secs = Math.max(0, Math.round((Date.now() - then) / 1000));
|
||
if (secs < 60) return 'just now';
|
||
const mins = Math.round(secs / 60);
|
||
if (mins < 60) return `${mins}m ago`;
|
||
const hrs = Math.round(mins / 60);
|
||
if (hrs < 24) return `${hrs}h ago`;
|
||
const days = Math.round(hrs / 24);
|
||
return `${days}d ago`;
|
||
}
|
||
|
||
function HeroShell({ tone = 'default', icon: Icon, children }: {
|
||
tone?: string;
|
||
icon: ComponentType<{ className?: string }>;
|
||
children: ReactNode;
|
||
}) {
|
||
const toneRing = ({
|
||
default: 'border-border/60',
|
||
good: 'border-emerald-500/30',
|
||
warn: 'border-amber-500/40',
|
||
error: 'border-rose-500/30',
|
||
} as Record<string, string>)[tone];
|
||
const toneChip = ({
|
||
default: 'bg-muted/50 text-muted-foreground',
|
||
good: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
|
||
warn: 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
|
||
error: 'bg-rose-500/10 text-rose-600 dark:text-rose-400',
|
||
} as Record<string, string>)[tone];
|
||
return (
|
||
<div className={cn('surface flex flex-col gap-3 p-5 sm:flex-row sm:items-center sm:gap-4', toneRing)}>
|
||
<span className={cn('grid h-11 w-11 shrink-0 place-items-center rounded-xl', toneChip)}>
|
||
<Icon className="h-5 w-5" />
|
||
</span>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface ConnData {
|
||
name?: string | null;
|
||
last_sync_at?: string | null;
|
||
last_error?: string | null;
|
||
}
|
||
|
||
interface ConnectionHeroProps {
|
||
loading?: boolean;
|
||
error?: unknown; // truthy when the status/summary fetch failed
|
||
enabled?: boolean; // status.enabled (server feature flag)
|
||
hasConnections?: boolean; // status.has_connections
|
||
conn?: ConnData | null; // the simplefin data_source (name, last_sync_at, last_error) or null
|
||
txnTotal?: number | null; // total synced transactions (at-a-glance), or null
|
||
onRetry?: () => void;
|
||
onGoTo?: (sectionId: string) => void; // (sectionId) => void
|
||
onSynced?: () => void; // () => void — refresh after a successful sync
|
||
}
|
||
|
||
/**
|
||
* The Data page's connection status hero. Five states, so a network blip is never
|
||
* mistaken for "not connected", and a server without bank sync never gets a dead
|
||
* Connect button:
|
||
* loading · disabled · error · not-connected · connected (± needs-attention)
|
||
*/
|
||
export default function ConnectionHero({
|
||
loading,
|
||
error,
|
||
enabled,
|
||
hasConnections,
|
||
conn,
|
||
txnTotal,
|
||
onRetry,
|
||
onGoTo,
|
||
onSynced,
|
||
}: ConnectionHeroProps) {
|
||
const [syncing, setSyncing] = useState(false);
|
||
|
||
async function handleSyncNow() {
|
||
setSyncing(true);
|
||
try {
|
||
const r = await api.syncAllSources() as { errors?: unknown[]; transactions_new?: number };
|
||
const errs = Array.isArray(r?.errors) ? r.errors : [];
|
||
if (errs.length) {
|
||
toast.warning(`Synced, but ${errs.length} connection${errs.length === 1 ? '' : 's'} need attention.`);
|
||
} else {
|
||
const n = r?.transactions_new ?? 0;
|
||
toast.success(`Synced — ${n} new transaction${n === 1 ? '' : 's'}.`);
|
||
}
|
||
onSynced?.();
|
||
} catch (err) {
|
||
if ((err as { status?: number })?.status === 429) toast.error('Please wait a moment before syncing again.');
|
||
else toast.error(errMessage(err, 'Sync failed.'));
|
||
} finally {
|
||
setSyncing(false);
|
||
}
|
||
}
|
||
|
||
// ── loading ──
|
||
if (loading) {
|
||
return (
|
||
<div className="surface flex items-center gap-4 p-5">
|
||
<span className="h-11 w-11 shrink-0 animate-pulse rounded-xl bg-muted/50" />
|
||
<div className="flex-1 space-y-2">
|
||
<div className="h-4 w-48 animate-pulse rounded bg-muted/50" />
|
||
<div className="h-3 w-32 animate-pulse rounded bg-muted/40" />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── disabled (server has no bank sync) ──
|
||
if (!enabled) {
|
||
return (
|
||
<HeroShell icon={Landmark}>
|
||
<div className="min-w-0 flex-1">
|
||
<p className="text-sm font-semibold text-foreground">Automatic bank sync isn’t enabled</p>
|
||
<p className="mt-0.5 text-sm text-muted-foreground">
|
||
This server doesn’t have SimpleFIN configured — you can still import and export your data.
|
||
</p>
|
||
</div>
|
||
<Button variant="outline" className="shrink-0 gap-2" onClick={() => onGoTo?.('import')}>
|
||
<Upload className="h-4 w-4" /> Import data
|
||
</Button>
|
||
</HeroShell>
|
||
);
|
||
}
|
||
|
||
// ── error (couldn't check) ──
|
||
if (error) {
|
||
return (
|
||
<HeroShell tone="error" icon={AlertTriangle}>
|
||
<div className="min-w-0 flex-1">
|
||
<p className="text-sm font-semibold text-foreground">Couldn’t check your bank connection</p>
|
||
<p className="mt-0.5 text-sm text-muted-foreground">Something went wrong loading your sync status.</p>
|
||
</div>
|
||
<Button variant="outline" className="shrink-0 gap-2" onClick={onRetry}>
|
||
<RotateCcw className="h-4 w-4" /> Retry
|
||
</Button>
|
||
</HeroShell>
|
||
);
|
||
}
|
||
|
||
// ── not connected ──
|
||
if (!hasConnections || !conn) {
|
||
return (
|
||
<HeroShell icon={Landmark}>
|
||
<div className="min-w-0 flex-1">
|
||
<p className="text-sm font-semibold text-foreground">Connect your bank to get started</p>
|
||
<p className="mt-0.5 text-sm text-muted-foreground">
|
||
Sync transactions automatically, or import your existing history.
|
||
</p>
|
||
</div>
|
||
<div className="flex shrink-0 flex-wrap gap-2">
|
||
<Button className="gap-2" onClick={() => onGoTo?.('bank-sync')}>
|
||
<Plus className="h-4 w-4" /> Connect your bank
|
||
</Button>
|
||
<Button variant="outline" className="gap-2" onClick={() => onGoTo?.('import')}>
|
||
<Upload className="h-4 w-4" /> Import data
|
||
</Button>
|
||
</div>
|
||
</HeroShell>
|
||
);
|
||
}
|
||
|
||
// ── connected (± needs attention) ──
|
||
const needsAttention = Boolean(conn.last_error);
|
||
const synced = relativeTime(conn.last_sync_at);
|
||
return (
|
||
<HeroShell tone={needsAttention ? 'warn' : 'good'} icon={needsAttention ? AlertTriangle : Landmark}>
|
||
<div className="min-w-0 flex-1">
|
||
<p className="text-sm font-semibold text-foreground">
|
||
{needsAttention ? 'Your bank connection needs attention' : 'Your bank is connected'}
|
||
</p>
|
||
<p className="mt-0.5 truncate text-sm text-muted-foreground">
|
||
{needsAttention
|
||
? conn.last_error
|
||
: (
|
||
<>
|
||
{conn.name || 'SimpleFIN'}
|
||
{Number(txnTotal) > 0 ? <> · {Number(txnTotal).toLocaleString('en-US')} transactions</> : null}
|
||
{synced ? <> · synced {synced}</> : null}
|
||
{' · syncs automatically'}
|
||
</>
|
||
)}
|
||
</p>
|
||
</div>
|
||
<div className="flex shrink-0 flex-wrap gap-2">
|
||
{needsAttention && (
|
||
<Button variant="outline" className="gap-2" onClick={() => onGoTo?.('bank-sync')}>
|
||
<RotateCcw className="h-4 w-4" /> Reconnect
|
||
</Button>
|
||
)}
|
||
<Button className="gap-2" onClick={handleSyncNow} disabled={syncing}>
|
||
{syncing ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
|
||
{syncing ? 'Syncing…' : 'Sync now'}
|
||
</Button>
|
||
</div>
|
||
</HeroShell>
|
||
);
|
||
}
|