Redesign dashboard/screener UI for improved density and performance
- Add compact/dense CSS tokens for tighter layouts - Add size prop to Button (default/compact) and Input (default/compact) - Add density prop to Panel (normal/compact/dense) - Add size prop to MetricCard (default/compact/inline) - Create IndexCardRow component for horizontal metric display - Create FilterChip component for removable filter tags - Redesign Command Center with flat sections, reduced cards - Tighten AppShell spacing (sidebar w-56, header mb-3, main space-y-4) Design goals achieved: - Denser, cleaner terminal-style layout - Reduced card usage in favor of flat sections with dividers - More space-efficient controls and metrics - Better use of widescreen layouts
This commit is contained in:
320
app/page.tsx
320
app/page.tsx
@@ -1,31 +1,32 @@
|
||||
'use client';
|
||||
"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 { 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 { TaskFeed } from "@/components/dashboard/task-feed";
|
||||
import { IndexCardRow } from "@/components/dashboard/index-card-row";
|
||||
import { useAuthGuard } from "@/hooks/use-auth-guard";
|
||||
import { useLinkPrefetch } from "@/hooks/use-link-prefetch";
|
||||
import { queuePortfolioInsights, queuePriceRefresh } from "@/lib/api";
|
||||
import { buildGraphingHref } from "@/lib/graphing/catalog";
|
||||
import type { PortfolioInsight, PortfolioSummary, Task } from "@/lib/types";
|
||||
import {
|
||||
queuePortfolioInsights,
|
||||
queuePriceRefresh
|
||||
} from '@/lib/api';
|
||||
import { buildGraphingHref } from '@/lib/graphing/catalog';
|
||||
import type { PortfolioInsight, PortfolioSummary, Task } from '@/lib/types';
|
||||
import { formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
|
||||
import { queryKeys } from '@/lib/query/keys';
|
||||
formatCompactCurrency,
|
||||
formatCurrency,
|
||||
formatPercent,
|
||||
} from "@/lib/format";
|
||||
import { queryKeys } from "@/lib/query/keys";
|
||||
import {
|
||||
filingsQueryOptions,
|
||||
latestPortfolioInsightQueryOptions,
|
||||
portfolioSummaryQueryOptions,
|
||||
recentTasksQueryOptions,
|
||||
watchlistQueryOptions
|
||||
} from '@/lib/query/options';
|
||||
watchlistQueryOptions,
|
||||
} from "@/lib/query/options";
|
||||
|
||||
type DashboardState = {
|
||||
summary: PortfolioSummary;
|
||||
@@ -38,15 +39,15 @@ type DashboardState = {
|
||||
const EMPTY_STATE: DashboardState = {
|
||||
summary: {
|
||||
positions: 0,
|
||||
total_value: '0',
|
||||
total_gain_loss: '0',
|
||||
total_cost_basis: '0',
|
||||
avg_return_pct: '0'
|
||||
total_value: "0",
|
||||
total_gain_loss: "0",
|
||||
total_cost_basis: "0",
|
||||
avg_return_pct: "0",
|
||||
},
|
||||
filingsCount: 0,
|
||||
watchlistCount: 0,
|
||||
tasks: [],
|
||||
latestInsight: null
|
||||
latestInsight: null,
|
||||
};
|
||||
|
||||
export default function CommandCenterPage() {
|
||||
@@ -71,23 +72,24 @@ export default function CommandCenterPage() {
|
||||
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)
|
||||
]);
|
||||
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
|
||||
latestInsight: insightRes.insight,
|
||||
});
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load dashboard');
|
||||
setError(err instanceof Error ? err.message : "Failed to load dashboard");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -100,39 +102,55 @@ export default function CommandCenterPage() {
|
||||
}, [isPending, isAuthenticated, loadData]);
|
||||
|
||||
const headerActions = (
|
||||
<>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="compact"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await queuePriceRefresh();
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.portfolioSummary() });
|
||||
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');
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Failed to queue price refresh",
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<RefreshCw className="size-4" />
|
||||
Refresh prices
|
||||
<RefreshCw className="size-3.5" />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button
|
||||
size="compact"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await queuePortfolioInsights();
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.latestPortfolioInsight() });
|
||||
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');
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to queue AI insight",
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Sparkles className="size-4" />
|
||||
Queue AI insight
|
||||
<Sparkles className="size-3.5" />
|
||||
AI Insight
|
||||
</Button>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
|
||||
const signedGain = useMemo(() => {
|
||||
@@ -140,114 +158,200 @@ export default function CommandCenterPage() {
|
||||
return gain >= 0 ? `+${formatCurrency(gain)}` : formatCurrency(gain);
|
||||
}, [state.summary.total_gain_loss]);
|
||||
|
||||
const indexCards = useMemo(
|
||||
() => [
|
||||
{
|
||||
label: "Portfolio Value",
|
||||
value: formatCurrency(state.summary.total_value),
|
||||
delta: formatCompactCurrency(state.summary.total_cost_basis),
|
||||
},
|
||||
{
|
||||
label: "Unrealized P&L",
|
||||
value: signedGain,
|
||||
delta: formatPercent(state.summary.avg_return_pct),
|
||||
positive: Number(state.summary.total_gain_loss) >= 0,
|
||||
},
|
||||
{
|
||||
label: "Filings",
|
||||
value: String(state.filingsCount),
|
||||
delta: "Last 200",
|
||||
},
|
||||
{
|
||||
label: "Coverage",
|
||||
value: String(state.watchlistCount),
|
||||
delta: `${state.summary.positions} active`,
|
||||
},
|
||||
],
|
||||
[state, signedGain],
|
||||
);
|
||||
|
||||
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 (
|
||||
<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.`}
|
||||
subtitle={
|
||||
session?.user?.name
|
||||
? `Welcome back, ${session.user.name}`
|
||||
: "Review tasks, portfolio health, and AI outputs."
|
||||
}
|
||||
actions={headerActions}
|
||||
>
|
||||
{error ? (
|
||||
<Panel variant="surface">
|
||||
<p className="text-sm text-[#ffb5b5]">{error}</p>
|
||||
</Panel>
|
||||
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--danger-soft)] px-3 py-2 text-sm text-[#ffb5b5]">
|
||||
{error}
|
||||
</div>
|
||||
) : 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="Coverage Names" value={String(state.watchlistCount)} delta={`${state.summary.positions} positions active`} />
|
||||
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)]">
|
||||
<IndexCardRow cards={indexCards} />
|
||||
</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" variant="surface">
|
||||
<div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
|
||||
<div className="border-t border-[color:var(--line-weak)] pt-4 xl:col-span-1">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
Recent Tasks
|
||||
</h3>
|
||||
<span className="terminal-caption text-[10px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">
|
||||
Queue Processor
|
||||
</span>
|
||||
</div>
|
||||
{loading ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">Loading tasks...</p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
Loading...
|
||||
</p>
|
||||
) : (
|
||||
<TaskFeed tasks={state.tasks} />
|
||||
)}
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
<Panel title="AI Brief" subtitle="Latest portfolio insight from AI SDK (Zhipu)" className="xl:col-span-2" variant="surface">
|
||||
{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" />
|
||||
<div className="border-t border-[color:var(--line-weak)] pt-4 xl:col-span-2">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
AI Brief
|
||||
</h3>
|
||||
{state.latestInsight ? (
|
||||
<div className="inline-flex items-center gap-1.5 rounded border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-2 py-0.5 text-[10px] text-[color:var(--terminal-muted)]">
|
||||
<Bot className="size-3" />
|
||||
{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>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
{loading ? (
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
Loading...
|
||||
</p>
|
||||
) : state.latestInsight ? (
|
||||
<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>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
No AI brief yet. Queue one from the action bar.
|
||||
</p>
|
||||
)}
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Panel title="Quick Links" subtitle="Feature modules">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
<Link className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]" href="/analysis">
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Overview</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Inspect one company across price, SEC context, valuation, and recent developments.</p>
|
||||
</Link>
|
||||
<Link className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]" 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="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]" href={buildGraphingHref()}>
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Graphing</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Compare one normalized metric across multiple companies with shareable chart state.</p>
|
||||
<div className="border-t border-[color:var(--line-weak)] pt-4">
|
||||
<h3 className="mb-3 text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
Quick Links
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href="/analysis"
|
||||
>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Overview
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
Company analysis, price, valuation, and developments.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href="/financials"
|
||||
>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Financials
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
Multi-period metrics, margins, and balance sheet.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href={buildGraphingHref()}
|
||||
>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Graphing
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
Compare normalized metrics across companies.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href="/filings"
|
||||
onMouseEnter={() => {
|
||||
void queryClient.prefetchQuery(filingsQueryOptions({ limit: 120 }));
|
||||
void queryClient.prefetchQuery(
|
||||
filingsQueryOptions({ limit: 120 }),
|
||||
);
|
||||
}}
|
||||
onFocus={() => {
|
||||
void queryClient.prefetchQuery(filingsQueryOptions({ limit: 120 }));
|
||||
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>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Filings
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
SEC filings and AI memo analysis.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
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 the active private portfolio and mark positions to market.</p>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Portfolio
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
Manage positions and mark to market.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href="/watchlist"
|
||||
onMouseEnter={() => prefetchPortfolioSurfaces()}
|
||||
onFocus={() => prefetchPortfolioSurfaces()}
|
||||
>
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Coverage</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Track research status, review cadence, and filing freshness per company.</p>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Coverage
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
Track research status and filing freshness.
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div className="flex items-center gap-2 text-[10px] uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">
|
||||
<Activity className="size-3" />
|
||||
Runtime: {loading ? "syncing" : "stable"}
|
||||
</div>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user