Francy51/Neon-Desk
2
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

upgrade navigation and route prefetch responsiveness

Browse Source
This commit is contained in:
francy51
2026-03-01 20:45:08 -05:00
parent d6895f185f
commit dc84f34fe9
17 changed files with 1208 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
app/analysis/page.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import { useQueryClient } from '@tanstack/react-query';
import Link from 'next/link';
import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
import { format } from 'date-fns';
@@ -19,7 +20,7 @@ import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Panel } from '@/components/ui/panel';
import { useAuthGuard } from '@/hooks/use-auth-guard';
import { getCompanyAnalysis } from '@/lib/api';
import { useLinkPrefetch } from '@/hooks/use-link-prefetch';
import {
asNumber,
formatCurrency,
@@ -27,6 +28,8 @@ import {
formatPercent,
type NumberScaleUnit
} from '@/lib/format';
import { queryKeys } from '@/lib/query/keys';
import { companyAnalysisQueryOptions } from '@/lib/query/options';
import type { CompanyAnalysis } from '@/lib/types';
type FinancialPeriodFilter = 'quarterlyAndFiscalYearEnd' | 'quarterlyOnly' | 'fiscalYearEndOnly';
@@ -53,6 +56,12 @@ const FINANCIAL_VALUE_SCALE_OPTIONS: Array<{ value: NumberScaleUnit; label: stri
{ value: 'billions', label: 'Billions (B)' }
];
const CHART_TEXT = '#e8fff8';
const CHART_MUTED = '#b4ced9';
const CHART_GRID = 'rgba(126, 217, 255, 0.24)';
const CHART_TOOLTIP_BG = 'rgba(6, 17, 24, 0.95)';
const CHART_TOOLTIP_BORDER = 'rgba(123, 255, 217, 0.45)';
function formatShortDate(value: string) {
return format(new Date(value), 'MMM yyyy');
}
@@ -109,6 +118,8 @@ export default function AnalysisPage() {
function AnalysisPageContent() {
const { isPending, isAuthenticated } = useAuthGuard();
const searchParams = useSearchParams();
const queryClient = useQueryClient();
const { prefetchReport, prefetchResearchTicker } = useLinkPrefetch();
const [tickerInput, setTickerInput] = useState('MSFT');
const [ticker, setTicker] = useState('MSFT');
@@ -134,11 +145,16 @@ function AnalysisPageContent() {
}, [searchParams]);
const loadAnalysis = useCallback(async (symbol: string) => {
setLoading(true);
const options = companyAnalysisQueryOptions(symbol);
if (!queryClient.getQueryData(options.queryKey)) {
setLoading(true);
}
setError(null);
try {
const response = await getCompanyAnalysis(symbol);
const response = await queryClient.ensureQueryData(options);
setAnalysis(response.analysis);
} catch (err) {
setError(err instanceof Error ? err.message : 'Unable to load company analysis');
@@ -146,7 +162,7 @@ function AnalysisPageContent() {
} finally {
setLoading(false);
}
}, []);
}, [queryClient]);
useEffect(() => {
if (!isPending && isAuthenticated) {
@@ -199,8 +215,15 @@ function AnalysisPageContent() {
<AppShell
title="Company Analysis"
subtitle="Research a single ticker across pricing, 10-K/10-Q financials, qualitative filings, and generated AI reports."
activeTicker={analysis?.company.ticker ?? ticker}
actions={(
<Button variant="secondary" onClick={() => void loadAnalysis(ticker)}>
<Button
variant="secondary"
onClick={() => {
void queryClient.invalidateQueries({ queryKey: queryKeys.companyAnalysis(ticker.trim().toUpperCase()) });
void loadAnalysis(ticker);
}}
>
<RefreshCcw className="size-4" />
Refresh
</Button>
@@ -229,7 +252,12 @@ function AnalysisPageContent() {
Analyze
</Button>
{analysis ? (
<Link href={`/filings?ticker=${analysis.company.ticker}`} className="text-sm text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
<Link
href={`/filings?ticker=${analysis.company.ticker}`}
onMouseEnter={() => prefetchResearchTicker(analysis.company.ticker)}
onFocus={() => prefetchResearchTicker(analysis.company.ticker)}
className="text-sm text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
>
Open filing stream
</Link>
) : null}
@@ -277,10 +305,35 @@ function AnalysisPageContent() {
<div className="h-[320px]">
<ResponsiveContainer width="100%" height="100%">
<LineChart data={priceSeries}>
<CartesianGrid strokeDasharray="2 2" stroke="rgba(126, 217, 255, 0.2)" />
<XAxis dataKey="label" minTickGap={32} stroke="#8cb6c5" fontSize={12} />
<YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => `$${value.toFixed(0)}`} />
<Tooltip formatter={(value: number | string | undefined) => formatCurrency(value)} />
<CartesianGrid strokeDasharray="2 2" stroke={CHART_GRID} />
<XAxis
dataKey="label"
minTickGap={32}
stroke={CHART_MUTED}
fontSize={12}
axisLine={{ stroke: CHART_MUTED }}
tickLine={{ stroke: CHART_MUTED }}
tick={{ fill: CHART_MUTED }}
/>
<YAxis
stroke={CHART_MUTED}
fontSize={12}
axisLine={{ stroke: CHART_MUTED }}
tickLine={{ stroke: CHART_MUTED }}
tick={{ fill: CHART_MUTED }}
tickFormatter={(value: number) => `$${value.toFixed(0)}`}
/>
<Tooltip
formatter={(value: number | string | undefined) => formatCurrency(value)}
contentStyle={{
backgroundColor: CHART_TOOLTIP_BG,
border: `1px solid ${CHART_TOOLTIP_BORDER}`,
borderRadius: '0.75rem'
}}
labelStyle={{ color: CHART_TEXT }}
itemStyle={{ color: CHART_TEXT }}
cursor={{ stroke: 'rgba(104, 255, 213, 0.35)', strokeWidth: 1 }}
/>
<Line type="monotone" dataKey="close" stroke="#68ffd5" strokeWidth={2} dot={false} />
</LineChart>
</ResponsiveContainer>
@@ -432,6 +485,8 @@ function AnalysisPageContent() {
<p className="text-xs text-[color:var(--terminal-muted)]">{report.accessionNumber}</p>
<Link
href={`/analysis/reports/${analysis.company.ticker}/${encodeURIComponent(report.accessionNumber)}`}
onMouseEnter={() => prefetchReport(analysis.company.ticker, report.accessionNumber)}
onFocus={() => prefetchReport(analysis.company.ticker, report.accessionNumber)}
className="text-xs uppercase tracking-[0.12em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
>
Open summary

45
app/analysis/reports/[ticker]/[accessionNumber]/page.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import { useQueryClient } from '@tanstack/react-query';
import Link from 'next/link';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { format } from 'date-fns';
@@ -7,7 +8,9 @@ import { ArrowLeft, BrainCircuit, RefreshCcw } from 'lucide-react';
import { useParams } from 'next/navigation';
import { AppShell } from '@/components/shell/app-shell';
import { useAuthGuard } from '@/hooks/use-auth-guard';
import { getCompanyAiReport } from '@/lib/api';
import { useLinkPrefetch } from '@/hooks/use-link-prefetch';
import { queryKeys } from '@/lib/query/keys';
import { aiReportQueryOptions } from '@/lib/query/options';
import type { CompanyAiReportDetail } from '@/lib/types';
import { Button } from '@/components/ui/button';
import { Panel } from '@/components/ui/panel';
@@ -25,6 +28,8 @@ function formatFilingDate(value: string) {
export default function AnalysisReportPage() {
const { isPending, isAuthenticated } = useAuthGuard();
const params = useParams<{ ticker: string; accessionNumber: string }>();
const queryClient = useQueryClient();
const { prefetchResearchTicker } = useLinkPrefetch();
const tickerFromRoute = useMemo(() => {
const value = typeof params.ticker === 'string' ? params.ticker : '';
@@ -48,11 +53,16 @@ export default function AnalysisReportPage() {
return;
}
setLoading(true);
const options = aiReportQueryOptions(accessionNumber);
if (!queryClient.getQueryData(options.queryKey)) {
setLoading(true);
}
setError(null);
try {
const response = await getCompanyAiReport(accessionNumber);
const response = await queryClient.ensureQueryData(options);
setReport(response.report);
} catch (err) {
setReport(null);
@@ -60,7 +70,7 @@ export default function AnalysisReportPage() {
} finally {
setLoading(false);
}
}, [accessionNumber]);
}, [accessionNumber, queryClient]);
useEffect(() => {
if (!isPending && isAuthenticated) {
@@ -73,13 +83,30 @@ export default function AnalysisReportPage() {
}
const resolvedTicker = report?.ticker ?? tickerFromRoute;
const analysisHref = resolvedTicker ? `/analysis?ticker=${encodeURIComponent(resolvedTicker)}` : '/analysis';
const filingsHref = resolvedTicker ? `/filings?ticker=${encodeURIComponent(resolvedTicker)}` : '/filings';
return (
<AppShell
title="AI Summary"
subtitle={`Detailed filing analysis${resolvedTicker ? ` for ${resolvedTicker}` : ''}.`}
activeTicker={resolvedTicker}
breadcrumbs={[
{ label: 'Analysis', href: analysisHref },
{ label: 'Reports', href: analysisHref },
{ label: resolvedTicker || 'Summary' }
]}
actions={(
<Button variant="secondary" onClick={() => void loadReport()} disabled={loading}>
<Button
variant="secondary"
onClick={() => {
if (accessionNumber) {
void queryClient.invalidateQueries({ queryKey: queryKeys.report(accessionNumber) });
}
void loadReport();
}}
disabled={loading}
>
<RefreshCcw className="size-4" />
Refresh
</Button>
@@ -88,14 +115,18 @@ export default function AnalysisReportPage() {
<Panel>
<div className="flex flex-wrap items-center gap-3">
<Link
href={`/analysis?ticker=${resolvedTicker}`}
href={analysisHref}
onMouseEnter={() => prefetchResearchTicker(resolvedTicker)}
onFocus={() => prefetchResearchTicker(resolvedTicker)}
className="inline-flex items-center gap-1 text-xs uppercase tracking-[0.12em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
>
<ArrowLeft className="size-3" />
Back to analysis
</Link>
<Link
href={`/filings?ticker=${resolvedTicker}`}
href={filingsHref}
onMouseEnter={() => prefetchResearchTicker(resolvedTicker)}
onFocus={() => prefetchResearchTicker(resolvedTicker)}
className="inline-flex items-center gap-1 text-xs uppercase tracking-[0.12em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
>
<ArrowLeft className="size-3" />