249 lines
10 KiB
TypeScript
249 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
import Link from 'next/link';
|
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { Activity, Bot, RefreshCw, Sparkles } from 'lucide-react';
|
|
import { AppShell } from '@/components/shell/app-shell';
|
|
import { Panel } from '@/components/ui/panel';
|
|
import { Button } from '@/components/ui/button';
|
|
import { MetricCard } from '@/components/dashboard/metric-card';
|
|
import { TaskFeed } from '@/components/dashboard/task-feed';
|
|
import { useAuthGuard } from '@/hooks/use-auth-guard';
|
|
import { useLinkPrefetch } from '@/hooks/use-link-prefetch';
|
|
import {
|
|
queuePortfolioInsights,
|
|
queuePriceRefresh
|
|
} from '@/lib/api';
|
|
import type { PortfolioInsight, PortfolioSummary, Task } from '@/lib/types';
|
|
import { formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
|
|
import { queryKeys } from '@/lib/query/keys';
|
|
import {
|
|
filingsQueryOptions,
|
|
latestPortfolioInsightQueryOptions,
|
|
portfolioSummaryQueryOptions,
|
|
recentTasksQueryOptions,
|
|
watchlistQueryOptions
|
|
} from '@/lib/query/options';
|
|
|
|
type DashboardState = {
|
|
summary: PortfolioSummary;
|
|
filingsCount: number;
|
|
watchlistCount: number;
|
|
tasks: Task[];
|
|
latestInsight: PortfolioInsight | null;
|
|
};
|
|
|
|
const EMPTY_STATE: DashboardState = {
|
|
summary: {
|
|
positions: 0,
|
|
total_value: '0',
|
|
total_gain_loss: '0',
|
|
total_cost_basis: '0',
|
|
avg_return_pct: '0'
|
|
},
|
|
filingsCount: 0,
|
|
watchlistCount: 0,
|
|
tasks: [],
|
|
latestInsight: null
|
|
};
|
|
|
|
export default function CommandCenterPage() {
|
|
const { isPending, isAuthenticated, session } = useAuthGuard();
|
|
const queryClient = useQueryClient();
|
|
const { prefetchPortfolioSurfaces } = useLinkPrefetch();
|
|
const [state, setState] = useState<DashboardState>(EMPTY_STATE);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const loadData = useCallback(async () => {
|
|
const summaryOptions = portfolioSummaryQueryOptions();
|
|
const filingsOptions = filingsQueryOptions({ limit: 200 });
|
|
const watchlistOptions = watchlistQueryOptions();
|
|
const tasksOptions = recentTasksQueryOptions(20);
|
|
const insightOptions = latestPortfolioInsightQueryOptions();
|
|
|
|
if (!queryClient.getQueryData(summaryOptions.queryKey)) {
|
|
setLoading(true);
|
|
}
|
|
|
|
setError(null);
|
|
|
|
try {
|
|
const [summaryRes, filingsRes, watchlistRes, tasksRes, insightRes] = await Promise.all([
|
|
queryClient.ensureQueryData(summaryOptions),
|
|
queryClient.ensureQueryData(filingsOptions),
|
|
queryClient.ensureQueryData(watchlistOptions),
|
|
queryClient.ensureQueryData(tasksOptions),
|
|
queryClient.ensureQueryData(insightOptions)
|
|
]);
|
|
|
|
setState({
|
|
summary: summaryRes.summary,
|
|
filingsCount: filingsRes.filings.length,
|
|
watchlistCount: watchlistRes.items.length,
|
|
tasks: tasksRes.tasks,
|
|
latestInsight: insightRes.insight
|
|
});
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to load dashboard');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [queryClient]);
|
|
|
|
useEffect(() => {
|
|
if (!isPending && isAuthenticated) {
|
|
void loadData();
|
|
}
|
|
}, [isPending, isAuthenticated, loadData]);
|
|
|
|
const headerActions = (
|
|
<>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={async () => {
|
|
try {
|
|
await queuePriceRefresh();
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.portfolioSummary() });
|
|
await loadData();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to queue price refresh');
|
|
}
|
|
}}
|
|
>
|
|
<RefreshCw className="size-4" />
|
|
Refresh prices
|
|
</Button>
|
|
<Button
|
|
onClick={async () => {
|
|
try {
|
|
await queuePortfolioInsights();
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.latestPortfolioInsight() });
|
|
await loadData();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to queue AI insight');
|
|
}
|
|
}}
|
|
>
|
|
<Sparkles className="size-4" />
|
|
Queue AI insight
|
|
</Button>
|
|
</>
|
|
);
|
|
|
|
const signedGain = useMemo(() => {
|
|
const gain = Number(state.summary.total_gain_loss ?? 0);
|
|
return gain >= 0 ? `+${formatCurrency(gain)}` : formatCurrency(gain);
|
|
}, [state.summary.total_gain_loss]);
|
|
|
|
if (isPending || !isAuthenticated) {
|
|
return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Booting secure terminal...</div>;
|
|
}
|
|
|
|
return (
|
|
<AppShell
|
|
title="Command Center"
|
|
subtitle={`Welcome back${session?.user?.name ? `, ${session.user.name}` : ''}. Review tasks, portfolio health, and AI outputs.`}
|
|
actions={headerActions}
|
|
>
|
|
{error ? (
|
|
<Panel>
|
|
<p className="text-sm text-[#ffb5b5]">{error}</p>
|
|
</Panel>
|
|
) : null}
|
|
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
<MetricCard label="Portfolio Value" value={formatCurrency(state.summary.total_value)} delta={formatCompactCurrency(state.summary.total_cost_basis)} />
|
|
<MetricCard
|
|
label="Unrealized P&L"
|
|
value={signedGain}
|
|
delta={formatPercent(state.summary.avg_return_pct)}
|
|
positive={Number(state.summary.total_gain_loss) >= 0}
|
|
/>
|
|
<MetricCard label="Tracked Filings" value={String(state.filingsCount)} delta="Last 200 records" />
|
|
<MetricCard label="Watchlist Nodes" value={String(state.watchlistCount)} delta={`${state.summary.positions} positions active`} />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
|
|
<Panel title="Recent Tasks" subtitle="Durable jobs from queue processor" className="xl:col-span-1">
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading tasks...</p>
|
|
) : (
|
|
<TaskFeed tasks={state.tasks} />
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel title="AI Brief" subtitle="Latest portfolio insight from AI SDK (Zhipu)" className="xl:col-span-2">
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading intelligence output...</p>
|
|
) : state.latestInsight ? (
|
|
<>
|
|
<div className="mb-3 inline-flex items-center gap-2 rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-2 py-1 text-xs text-[color:var(--terminal-muted)]">
|
|
<Bot className="size-3.5" />
|
|
{state.latestInsight.provider} :: {state.latestInsight.model}
|
|
</div>
|
|
<p className="whitespace-pre-wrap text-sm leading-6 text-[color:var(--terminal-bright)]">{state.latestInsight.content}</p>
|
|
</>
|
|
) : (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No AI brief yet. Queue one from the action bar.</p>
|
|
)}
|
|
</Panel>
|
|
</div>
|
|
|
|
<Panel title="Quick Links" subtitle="Feature modules">
|
|
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-5">
|
|
<Link className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4 transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]" href="/analysis">
|
|
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Analysis</p>
|
|
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Inspect one company across prices, filings, financials, and AI reports.</p>
|
|
</Link>
|
|
<Link className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4 transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]" href="/financials">
|
|
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Financials</p>
|
|
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Focus on multi-period filing metrics, margins, leverage, and balance sheet composition.</p>
|
|
</Link>
|
|
<Link
|
|
className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4 transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]"
|
|
href="/filings"
|
|
onMouseEnter={() => {
|
|
void queryClient.prefetchQuery(filingsQueryOptions({ limit: 120 }));
|
|
}}
|
|
onFocus={() => {
|
|
void queryClient.prefetchQuery(filingsQueryOptions({ limit: 120 }));
|
|
}}
|
|
>
|
|
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Filings</p>
|
|
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Sync SEC filings and trigger AI memo analysis.</p>
|
|
</Link>
|
|
<Link
|
|
className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4 transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]"
|
|
href="/portfolio"
|
|
onMouseEnter={() => prefetchPortfolioSurfaces()}
|
|
onFocus={() => prefetchPortfolioSurfaces()}
|
|
>
|
|
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Portfolio</p>
|
|
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Manage holdings and mark to market in real time.</p>
|
|
</Link>
|
|
<Link
|
|
className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4 transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]"
|
|
href="/watchlist"
|
|
onMouseEnter={() => prefetchPortfolioSurfaces()}
|
|
onFocus={() => prefetchPortfolioSurfaces()}
|
|
>
|
|
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Watchlist</p>
|
|
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Track priority tickers for monitoring and ingestion.</p>
|
|
</Link>
|
|
</div>
|
|
</Panel>
|
|
|
|
<Panel>
|
|
<div className="flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-[color:var(--terminal-muted)]">
|
|
<Activity className="size-4" />
|
|
Runtime state: {loading ? 'syncing' : 'stable'}
|
|
</div>
|
|
</Panel>
|
|
</AppShell>
|
|
);
|
|
}
|