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