317 lines
14 KiB
TypeScript
317 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { format } from 'date-fns';
|
|
import {
|
|
Bar,
|
|
BarChart,
|
|
CartesianGrid,
|
|
Legend,
|
|
Line,
|
|
LineChart,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis
|
|
} from 'recharts';
|
|
import { BrainCircuit, ChartNoAxesCombined, RefreshCcw, Search } from 'lucide-react';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { AppShell } from '@/components/shell/app-shell';
|
|
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 { asNumber, formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
|
|
import type { CompanyAnalysis } from '@/lib/types';
|
|
|
|
function formatShortDate(value: string) {
|
|
return format(new Date(value), 'MMM yyyy');
|
|
}
|
|
|
|
function hasFinancialSnapshot(filingType: CompanyAnalysis['filings'][number]['filing_type']) {
|
|
return filingType === '10-K' || filingType === '10-Q';
|
|
}
|
|
|
|
export default function AnalysisPage() {
|
|
return (
|
|
<Suspense fallback={<div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading analysis desk...</div>}>
|
|
<AnalysisPageContent />
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
function AnalysisPageContent() {
|
|
const { isPending, isAuthenticated } = useAuthGuard();
|
|
const searchParams = useSearchParams();
|
|
|
|
const [tickerInput, setTickerInput] = useState('MSFT');
|
|
const [ticker, setTicker] = useState('MSFT');
|
|
const [analysis, setAnalysis] = useState<CompanyAnalysis | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const fromQuery = searchParams.get('ticker');
|
|
if (!fromQuery) {
|
|
return;
|
|
}
|
|
|
|
const normalized = fromQuery.trim().toUpperCase();
|
|
if (!normalized) {
|
|
return;
|
|
}
|
|
|
|
setTickerInput(normalized);
|
|
setTicker(normalized);
|
|
}, [searchParams]);
|
|
|
|
const loadAnalysis = useCallback(async (symbol: string) => {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const response = await getCompanyAnalysis(symbol);
|
|
setAnalysis(response.analysis);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unable to load company analysis');
|
|
setAnalysis(null);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!isPending && isAuthenticated) {
|
|
void loadAnalysis(ticker);
|
|
}
|
|
}, [isPending, isAuthenticated, ticker, loadAnalysis]);
|
|
|
|
const priceSeries = useMemo(() => {
|
|
return (analysis?.priceHistory ?? []).map((point) => ({
|
|
...point,
|
|
label: formatShortDate(point.date)
|
|
}));
|
|
}, [analysis?.priceHistory]);
|
|
|
|
const financialSeries = useMemo(() => {
|
|
return (analysis?.financials ?? [])
|
|
.slice()
|
|
.reverse()
|
|
.map((item) => ({
|
|
label: formatShortDate(item.filingDate),
|
|
revenue: item.revenue,
|
|
netIncome: item.netIncome,
|
|
assets: item.totalAssets
|
|
}));
|
|
}, [analysis?.financials]);
|
|
|
|
if (isPending || !isAuthenticated) {
|
|
return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading analysis desk...</div>;
|
|
}
|
|
|
|
return (
|
|
<AppShell
|
|
title="Company Analysis"
|
|
subtitle="Research a single ticker across pricing, 10-K/10-Q financials, qualitative filings, and generated AI reports."
|
|
actions={(
|
|
<Button variant="secondary" onClick={() => void loadAnalysis(ticker)}>
|
|
<RefreshCcw className="size-4" />
|
|
Refresh
|
|
</Button>
|
|
)}
|
|
>
|
|
<Panel title="Search Company" subtitle="Enter a ticker symbol to load the latest analysis view.">
|
|
<form
|
|
className="flex flex-wrap items-center gap-3"
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
const normalized = tickerInput.trim().toUpperCase();
|
|
if (!normalized) {
|
|
return;
|
|
}
|
|
setTicker(normalized);
|
|
}}
|
|
>
|
|
<Input
|
|
value={tickerInput}
|
|
onChange={(event) => setTickerInput(event.target.value.toUpperCase())}
|
|
placeholder="Ticker (AAPL)"
|
|
className="max-w-xs"
|
|
/>
|
|
<Button type="submit">
|
|
<Search className="size-4" />
|
|
Analyze
|
|
</Button>
|
|
{analysis ? (
|
|
<Link href={`/filings?ticker=${analysis.company.ticker}`} className="text-sm text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
|
|
Open filing stream
|
|
</Link>
|
|
) : null}
|
|
</form>
|
|
</Panel>
|
|
|
|
{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">
|
|
<Panel title="Company">
|
|
<p className="text-xl font-semibold text-[color:var(--terminal-bright)]">{analysis?.company.companyName ?? ticker}</p>
|
|
<p className="mt-1 text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{analysis?.company.ticker ?? ticker}</p>
|
|
<p className="mt-2 text-sm text-[color:var(--terminal-muted)]">{analysis?.company.sector ?? 'Sector unavailable'}</p>
|
|
</Panel>
|
|
|
|
<Panel title="Live Price">
|
|
<p className="text-3xl font-semibold text-[color:var(--terminal-bright)]">{formatCurrency(analysis?.quote ?? 0)}</p>
|
|
<p className="mt-2 text-sm text-[color:var(--terminal-muted)]">CIK {analysis?.company.cik ?? 'n/a'}</p>
|
|
</Panel>
|
|
|
|
<Panel title="Position Value">
|
|
<p className="text-3xl font-semibold text-[color:var(--terminal-bright)]">{formatCurrency(analysis?.position?.market_value)}</p>
|
|
<p className="mt-2 text-sm text-[color:var(--terminal-muted)]">{analysis?.position ? `${asNumber(analysis.position.shares).toLocaleString()} shares` : 'Not held in portfolio'}</p>
|
|
</Panel>
|
|
|
|
<Panel title="Position P&L">
|
|
<p className={`text-3xl font-semibold ${asNumber(analysis?.position?.gain_loss) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]'}`}>
|
|
{formatCurrency(analysis?.position?.gain_loss)}
|
|
</p>
|
|
<p className="mt-2 text-sm text-[color:var(--terminal-muted)]">{formatPercent(analysis?.position?.gain_loss_pct)}</p>
|
|
</Panel>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
|
|
<Panel title="Price History" subtitle="Weekly close over the last year.">
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading price history...</p>
|
|
) : priceSeries.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No price history available.</p>
|
|
) : (
|
|
<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)} />
|
|
<Line type="monotone" dataKey="close" stroke="#68ffd5" strokeWidth={2} dot={false} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel title="Financial Trend" subtitle="Filing snapshots for revenue, net income, and assets.">
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading financials...</p>
|
|
) : financialSeries.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No parsed filing metrics yet.</p>
|
|
) : (
|
|
<div className="h-[320px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={financialSeries}>
|
|
<CartesianGrid strokeDasharray="2 2" stroke="rgba(126, 217, 255, 0.2)" />
|
|
<XAxis dataKey="label" minTickGap={20} stroke="#8cb6c5" fontSize={12} />
|
|
<YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => `$${Math.round(value / 1_000_000_000)}B`} />
|
|
<Tooltip formatter={(value: number | string | undefined) => formatCompactCurrency(value)} />
|
|
<Legend />
|
|
<Bar dataKey="revenue" name="Revenue" fill="#68ffd5" radius={[4, 4, 0, 0]} />
|
|
<Bar dataKey="netIncome" name="Net Income" fill="#5fd3ff" radius={[4, 4, 0, 0]} />
|
|
<Bar dataKey="assets" name="Total Assets" fill="#9ac7ff" radius={[4, 4, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
</div>
|
|
|
|
<Panel title="Filings" subtitle={`${analysis?.filings.length ?? 0} recent SEC records loaded.`}>
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading filings...</p>
|
|
) : !analysis || analysis.filings.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No filings available for this ticker.</p>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="data-table min-w-[860px]">
|
|
<thead>
|
|
<tr>
|
|
<th>Filed</th>
|
|
<th>Type</th>
|
|
<th>Revenue</th>
|
|
<th>Net Income</th>
|
|
<th>Assets</th>
|
|
<th>Document</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{analysis.filings.map((filing) => (
|
|
<tr key={filing.accession_number}>
|
|
<td>{format(new Date(filing.filing_date), 'MMM dd, yyyy')}</td>
|
|
<td>{filing.filing_type}{hasFinancialSnapshot(filing.filing_type) ? '' : ' (Qualitative)'}</td>
|
|
<td>{hasFinancialSnapshot(filing.filing_type) ? (filing.metrics?.revenue ? formatCompactCurrency(filing.metrics.revenue) : 'n/a') : 'qualitative only'}</td>
|
|
<td>{hasFinancialSnapshot(filing.filing_type) ? (filing.metrics?.netIncome ? formatCompactCurrency(filing.metrics.netIncome) : 'n/a') : 'qualitative only'}</td>
|
|
<td>{hasFinancialSnapshot(filing.filing_type) ? (filing.metrics?.totalAssets ? formatCompactCurrency(filing.metrics.totalAssets) : 'n/a') : 'qualitative only'}</td>
|
|
<td>
|
|
{filing.filing_url ? (
|
|
<a href={filing.filing_url} target="_blank" rel="noreferrer" className="text-xs text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
|
|
SEC filing
|
|
</a>
|
|
) : (
|
|
'n/a'
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel title="AI Reports" subtitle="Generated filing analyses for this company.">
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading AI reports...</p>
|
|
) : !analysis || analysis.aiReports.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No AI reports generated yet. Run filing analysis from the filings stream.</p>
|
|
) : (
|
|
<div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
|
|
{analysis.aiReports.map((report) => (
|
|
<article key={report.accessionNumber} className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
|
|
{report.filingType} · {format(new Date(report.filingDate), 'MMM dd, yyyy')}
|
|
</p>
|
|
<h4 className="mt-1 text-sm font-semibold text-[color:var(--terminal-bright)]">{report.provider} / {report.model}</h4>
|
|
</div>
|
|
<BrainCircuit className="size-4 text-[color:var(--accent)]" />
|
|
</div>
|
|
<p className="mt-3 line-clamp-6 whitespace-pre-wrap text-sm leading-6 text-[color:var(--terminal-bright)]">{report.summary}</p>
|
|
<div className="mt-4 flex items-center justify-between gap-2">
|
|
<p className="text-xs text-[color:var(--terminal-muted)]">{report.accessionNumber}</p>
|
|
<Link
|
|
href={`/analysis/reports/${analysis.company.ticker}/${encodeURIComponent(report.accessionNumber)}`}
|
|
className="text-xs uppercase tracking-[0.12em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
|
|
>
|
|
Open summary
|
|
</Link>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel>
|
|
<div className="flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-[color:var(--terminal-muted)]">
|
|
<ChartNoAxesCombined className="size-4" />
|
|
Analysis scope: price + filings + ai synthesis
|
|
</div>
|
|
</Panel>
|
|
</AppShell>
|
|
);
|
|
}
|