847 lines
37 KiB
TypeScript
847 lines
37 KiB
TypeScript
'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';
|
|
import {
|
|
CartesianGrid,
|
|
Line,
|
|
LineChart,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis
|
|
} from 'recharts';
|
|
import {
|
|
BrainCircuit,
|
|
ChartNoAxesCombined,
|
|
NotebookTabs,
|
|
NotebookPen,
|
|
RefreshCcw,
|
|
Search,
|
|
SquarePen,
|
|
Trash2
|
|
} 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 { useLinkPrefetch } from '@/hooks/use-link-prefetch';
|
|
import { buildGraphingHref } from '@/lib/graphing/catalog';
|
|
import {
|
|
createResearchJournalEntry,
|
|
deleteResearchJournalEntry,
|
|
updateResearchJournalEntry
|
|
} from '@/lib/api';
|
|
import {
|
|
asNumber,
|
|
formatCurrency,
|
|
formatCurrencyByScale,
|
|
formatPercent,
|
|
type NumberScaleUnit
|
|
} from '@/lib/format';
|
|
import { queryKeys } from '@/lib/query/keys';
|
|
import {
|
|
companyAnalysisQueryOptions,
|
|
researchJournalQueryOptions
|
|
} from '@/lib/query/options';
|
|
import type {
|
|
CompanyAnalysis,
|
|
ResearchJournalEntry
|
|
} from '@/lib/types';
|
|
|
|
type FinancialPeriodFilter = 'quarterlyAndFiscalYearEnd' | 'quarterlyOnly' | 'fiscalYearEndOnly';
|
|
|
|
type FinancialSeriesPoint = {
|
|
filingDate: string;
|
|
filingType: '10-K' | '10-Q';
|
|
periodLabel: 'Quarter End' | 'Fiscal Year End';
|
|
revenue: number | null;
|
|
netIncome: number | null;
|
|
assets: number | null;
|
|
netMargin: number | null;
|
|
};
|
|
|
|
type JournalFormState = {
|
|
title: string;
|
|
bodyMarkdown: string;
|
|
accessionNumber: string;
|
|
};
|
|
|
|
const EMPTY_JOURNAL_FORM: JournalFormState = {
|
|
title: '',
|
|
bodyMarkdown: '',
|
|
accessionNumber: ''
|
|
};
|
|
|
|
const FINANCIAL_PERIOD_FILTER_OPTIONS: Array<{ value: FinancialPeriodFilter; label: string }> = [
|
|
{ value: 'quarterlyAndFiscalYearEnd', label: 'Quarterly + Fiscal Year End' },
|
|
{ value: 'quarterlyOnly', label: 'Quarterly only' },
|
|
{ value: 'fiscalYearEndOnly', label: 'Fiscal Year End only' }
|
|
];
|
|
|
|
const FINANCIAL_VALUE_SCALE_OPTIONS: Array<{ value: NumberScaleUnit; label: string }> = [
|
|
{ value: 'thousands', label: 'Thousands (K)' },
|
|
{ value: 'millions', label: 'Millions (M)' },
|
|
{ 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');
|
|
}
|
|
|
|
function formatLongDate(value: string) {
|
|
return format(new Date(value), 'MMM dd, yyyy');
|
|
}
|
|
|
|
function formatDateTime(value: string) {
|
|
return format(new Date(value), 'MMM dd, yyyy · HH:mm');
|
|
}
|
|
|
|
function ratioPercent(numerator: number | null, denominator: number | null) {
|
|
if (numerator === null || denominator === null || denominator === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (numerator / denominator) * 100;
|
|
}
|
|
|
|
function normalizeTickerInput(value: string | null) {
|
|
const normalized = value?.trim().toUpperCase() ?? '';
|
|
return normalized || null;
|
|
}
|
|
|
|
function isFinancialSnapshotForm(
|
|
filingType: CompanyAnalysis['filings'][number]['filing_type']
|
|
): filingType is '10-K' | '10-Q' {
|
|
return filingType === '10-K' || filingType === '10-Q';
|
|
}
|
|
|
|
function includesFinancialPeriod(filingType: '10-K' | '10-Q', filter: FinancialPeriodFilter) {
|
|
if (filter === 'quarterlyOnly') {
|
|
return filingType === '10-Q';
|
|
}
|
|
|
|
if (filter === 'fiscalYearEndOnly') {
|
|
return filingType === '10-K';
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function asScaledFinancialCurrency(
|
|
value: number | null | undefined,
|
|
scale: NumberScaleUnit
|
|
) {
|
|
if (value === null || value === undefined) {
|
|
return 'n/a';
|
|
}
|
|
|
|
return formatCurrencyByScale(value, scale);
|
|
}
|
|
|
|
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 queryClient = useQueryClient();
|
|
const { prefetchReport, prefetchResearchTicker } = useLinkPrefetch();
|
|
const initialTicker = normalizeTickerInput(searchParams.get('ticker')) ?? 'MSFT';
|
|
|
|
const [tickerInput, setTickerInput] = useState(initialTicker);
|
|
const [ticker, setTicker] = useState(initialTicker);
|
|
const [analysis, setAnalysis] = useState<CompanyAnalysis | null>(null);
|
|
const [journalEntries, setJournalEntries] = useState<ResearchJournalEntry[]>([]);
|
|
const [journalLoading, setJournalLoading] = useState(true);
|
|
const [journalForm, setJournalForm] = useState<JournalFormState>(EMPTY_JOURNAL_FORM);
|
|
const [editingJournalId, setEditingJournalId] = useState<number | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [financialPeriodFilter, setFinancialPeriodFilter] = useState<FinancialPeriodFilter>('quarterlyAndFiscalYearEnd');
|
|
const [financialValueScale, setFinancialValueScale] = useState<NumberScaleUnit>('millions');
|
|
|
|
useEffect(() => {
|
|
const normalized = normalizeTickerInput(searchParams.get('ticker'));
|
|
if (!normalized) {
|
|
return;
|
|
}
|
|
|
|
setTickerInput(normalized);
|
|
setTicker(normalized);
|
|
}, [searchParams]);
|
|
|
|
const loadAnalysis = useCallback(async (symbol: string) => {
|
|
const options = companyAnalysisQueryOptions(symbol);
|
|
|
|
if (!queryClient.getQueryData(options.queryKey)) {
|
|
setLoading(true);
|
|
}
|
|
|
|
setError(null);
|
|
|
|
try {
|
|
const response = await queryClient.fetchQuery(options);
|
|
setAnalysis(response.analysis);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unable to load company analysis');
|
|
setAnalysis(null);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [queryClient]);
|
|
|
|
const loadJournal = useCallback(async (symbol: string) => {
|
|
const options = researchJournalQueryOptions(symbol);
|
|
|
|
if (!queryClient.getQueryData(options.queryKey)) {
|
|
setJournalLoading(true);
|
|
}
|
|
|
|
try {
|
|
const response = await queryClient.fetchQuery(options);
|
|
setJournalEntries(response.entries);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unable to load research journal');
|
|
setJournalEntries([]);
|
|
} finally {
|
|
setJournalLoading(false);
|
|
}
|
|
}, [queryClient]);
|
|
|
|
useEffect(() => {
|
|
if (!isPending && isAuthenticated) {
|
|
void Promise.all([
|
|
loadAnalysis(ticker),
|
|
loadJournal(ticker)
|
|
]);
|
|
}
|
|
}, [isPending, isAuthenticated, loadAnalysis, loadJournal, ticker]);
|
|
|
|
const priceSeries = useMemo(() => {
|
|
return (analysis?.priceHistory ?? []).map((point) => ({
|
|
...point,
|
|
label: formatShortDate(point.date)
|
|
}));
|
|
}, [analysis?.priceHistory]);
|
|
|
|
const financialSeries = useMemo<FinancialSeriesPoint[]>(() => {
|
|
return (analysis?.financials ?? [])
|
|
.filter((item): item is CompanyAnalysis['financials'][number] & { filingType: '10-K' | '10-Q' } => {
|
|
return isFinancialSnapshotForm(item.filingType);
|
|
})
|
|
.slice()
|
|
.sort((a, b) => Date.parse(a.filingDate) - Date.parse(b.filingDate))
|
|
.map((item) => ({
|
|
filingDate: item.filingDate,
|
|
filingType: item.filingType,
|
|
periodLabel: item.filingType === '10-Q' ? 'Quarter End' : 'Fiscal Year End',
|
|
revenue: item.revenue,
|
|
netIncome: item.netIncome,
|
|
assets: item.totalAssets,
|
|
netMargin: ratioPercent(item.netIncome ?? null, item.revenue ?? null)
|
|
}));
|
|
}, [analysis?.financials]);
|
|
|
|
const filteredFinancialSeries = useMemo(() => {
|
|
return financialSeries.filter((point) => includesFinancialPeriod(point.filingType, financialPeriodFilter));
|
|
}, [financialSeries, financialPeriodFilter]);
|
|
|
|
const periodEndFilings = useMemo(() => {
|
|
return (analysis?.filings ?? []).filter((filing) => isFinancialSnapshotForm(filing.filing_type));
|
|
}, [analysis?.filings]);
|
|
|
|
const selectedFinancialScaleLabel = useMemo(() => {
|
|
return FINANCIAL_VALUE_SCALE_OPTIONS.find((option) => option.value === financialValueScale)?.label ?? 'Millions (M)';
|
|
}, [financialValueScale]);
|
|
|
|
const resetJournalForm = useCallback(() => {
|
|
setEditingJournalId(null);
|
|
setJournalForm(EMPTY_JOURNAL_FORM);
|
|
}, []);
|
|
|
|
const activeTicker = analysis?.company.ticker ?? ticker;
|
|
|
|
const saveJournalEntry = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
const normalizedTicker = activeTicker.trim().toUpperCase();
|
|
if (!normalizedTicker) {
|
|
return;
|
|
}
|
|
|
|
setError(null);
|
|
|
|
try {
|
|
if (editingJournalId === null) {
|
|
await createResearchJournalEntry({
|
|
ticker: normalizedTicker,
|
|
entryType: journalForm.accessionNumber.trim() ? 'filing_note' : 'note',
|
|
title: journalForm.title.trim() || undefined,
|
|
bodyMarkdown: journalForm.bodyMarkdown,
|
|
accessionNumber: journalForm.accessionNumber.trim() || undefined
|
|
});
|
|
} else {
|
|
await updateResearchJournalEntry(editingJournalId, {
|
|
title: journalForm.title.trim() || undefined,
|
|
bodyMarkdown: journalForm.bodyMarkdown
|
|
});
|
|
}
|
|
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.researchJournal(normalizedTicker) });
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.companyAnalysis(normalizedTicker) });
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.watchlist() });
|
|
await Promise.all([
|
|
loadAnalysis(normalizedTicker),
|
|
loadJournal(normalizedTicker)
|
|
]);
|
|
resetJournalForm();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unable to save journal entry');
|
|
}
|
|
};
|
|
|
|
const beginEditJournalEntry = (entry: ResearchJournalEntry) => {
|
|
setEditingJournalId(entry.id);
|
|
setJournalForm({
|
|
title: entry.title ?? '',
|
|
bodyMarkdown: entry.body_markdown,
|
|
accessionNumber: entry.accession_number ?? ''
|
|
});
|
|
};
|
|
|
|
const removeJournalEntry = async (entry: ResearchJournalEntry) => {
|
|
try {
|
|
await deleteResearchJournalEntry(entry.id);
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.researchJournal(entry.ticker) });
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.companyAnalysis(entry.ticker) });
|
|
await Promise.all([
|
|
loadAnalysis(entry.ticker),
|
|
loadJournal(entry.ticker)
|
|
]);
|
|
if (editingJournalId === entry.id) {
|
|
resetJournalForm();
|
|
}
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unable to delete journal entry');
|
|
}
|
|
};
|
|
|
|
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."
|
|
activeTicker={analysis?.company.ticker ?? ticker}
|
|
actions={(
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => {
|
|
const normalizedTicker = activeTicker.trim().toUpperCase();
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.companyAnalysis(normalizedTicker) });
|
|
void queryClient.invalidateQueries({ queryKey: queryKeys.researchJournal(normalizedTicker) });
|
|
void Promise.all([
|
|
loadAnalysis(normalizedTicker),
|
|
loadJournal(normalizedTicker)
|
|
]);
|
|
}}
|
|
>
|
|
<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}
|
|
aria-label="Analysis ticker"
|
|
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={`/financials?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 financials
|
|
</Link>
|
|
<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>
|
|
<Link
|
|
href={buildGraphingHref(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 graphing
|
|
</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>
|
|
{analysis?.company.category ? (
|
|
<p className="mt-1 text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{analysis.company.category}</p>
|
|
) : null}
|
|
{analysis?.company.tags.length ? (
|
|
<div className="mt-2 flex flex-wrap gap-1">
|
|
{analysis.company.tags.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="rounded border border-[color:var(--line-weak)] px-1.5 py-0.5 text-[10px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</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-4 xl:grid-cols-3">
|
|
<Panel title="Coverage Workflow" subtitle="Coverage metadata shared with the Coverage page.">
|
|
{analysis?.coverage ? (
|
|
<div className="space-y-3 text-sm">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
|
<p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Status</p>
|
|
<p className="mt-1 text-[color:var(--terminal-bright)]">{analysis.coverage.status}</p>
|
|
</div>
|
|
<div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
|
<p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Priority</p>
|
|
<p className="mt-1 text-[color:var(--terminal-bright)]">{analysis.coverage.priority}</p>
|
|
</div>
|
|
</div>
|
|
<div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
|
<p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Last Reviewed</p>
|
|
<p className="mt-1 text-[color:var(--terminal-bright)]">{analysis.coverage.last_reviewed_at ? formatDateTime(analysis.coverage.last_reviewed_at) : 'No research review recorded yet'}</p>
|
|
</div>
|
|
<div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
|
<p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Latest Filing</p>
|
|
<p className="mt-1 text-[color:var(--terminal-bright)]">{analysis.coverage.latest_filing_date ? formatLongDate(analysis.coverage.latest_filing_date) : 'No filing history loaded yet'}</p>
|
|
</div>
|
|
<Link href="/watchlist" className="text-xs uppercase tracking-[0.12em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
|
|
Manage coverage
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">This company is not yet in your coverage list. Add it from Coverage to track workflow status and review cadence.</p>
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel title="Key Metrics" subtitle="Latest filing-level metrics used to anchor research.">
|
|
<div className="grid grid-cols-1 gap-3 text-sm md:grid-cols-2">
|
|
<div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
|
<p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Revenue</p>
|
|
<p className="mt-1 text-[color:var(--terminal-bright)]">{asScaledFinancialCurrency(analysis?.keyMetrics.revenue, financialValueScale)}</p>
|
|
</div>
|
|
<div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
|
<p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Net Income</p>
|
|
<p className="mt-1 text-[color:var(--terminal-bright)]">{asScaledFinancialCurrency(analysis?.keyMetrics.netIncome, financialValueScale)}</p>
|
|
</div>
|
|
<div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
|
<p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Assets</p>
|
|
<p className="mt-1 text-[color:var(--terminal-bright)]">{asScaledFinancialCurrency(analysis?.keyMetrics.totalAssets, financialValueScale)}</p>
|
|
</div>
|
|
<div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
|
<p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Cash / Debt</p>
|
|
<p className="mt-1 text-[color:var(--terminal-bright)]">
|
|
{analysis?.keyMetrics.cash != null && analysis?.keyMetrics.debt != null
|
|
? `${asScaledFinancialCurrency(analysis.keyMetrics.cash, financialValueScale)} / ${asScaledFinancialCurrency(analysis.keyMetrics.debt, financialValueScale)}`
|
|
: 'n/a'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p className="mt-3 text-xs text-[color:var(--terminal-muted)]">
|
|
Reference date: {analysis?.keyMetrics.referenceDate ? formatLongDate(analysis.keyMetrics.referenceDate) : 'No financial filing selected'}.
|
|
{' '}Net margin: {analysis && analysis.keyMetrics.netMargin !== null ? formatPercent(analysis.keyMetrics.netMargin) : 'n/a'}.
|
|
</p>
|
|
</Panel>
|
|
|
|
<Panel title="Latest Filing Snapshot" subtitle="Most recent filing and whether an AI memo already exists.">
|
|
{analysis?.latestFilingSummary ? (
|
|
<div className="space-y-3 text-sm">
|
|
<div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
|
<p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Filing</p>
|
|
<p className="mt-1 text-[color:var(--terminal-bright)]">
|
|
{analysis.latestFilingSummary.filingType} · {formatLongDate(analysis.latestFilingSummary.filingDate)}
|
|
</p>
|
|
</div>
|
|
<p className="text-[color:var(--terminal-bright)]">
|
|
{analysis.latestFilingSummary.summary ?? 'No AI summary stored yet for the most recent filing.'}
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{analysis.latestFilingSummary.hasAnalysis ? (
|
|
<Link
|
|
href={`/analysis/reports/${analysis.company.ticker}/${encodeURIComponent(analysis.latestFilingSummary.accessionNumber)}`}
|
|
className="inline-flex items-center gap-1 rounded-md border border-[color:var(--line-weak)] px-2 py-1 text-xs text-[color:var(--accent)] transition hover:border-[color:var(--line-strong)] hover:text-[color:var(--accent-strong)]"
|
|
>
|
|
Open latest memo
|
|
</Link>
|
|
) : null}
|
|
<Link
|
|
href={`/filings?ticker=${analysis.company.ticker}`}
|
|
className="inline-flex items-center gap-1 rounded-md border border-[color:var(--line-weak)] px-2 py-1 text-xs text-[color:var(--accent)] transition hover:border-[color:var(--line-strong)] hover:text-[color:var(--accent-strong)]"
|
|
>
|
|
Open filing stream
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No filing snapshot available yet for this company.</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={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>
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel
|
|
title="Financial Table"
|
|
subtitle={`Quarter-end (10-Q) and fiscal-year-end (10-K) snapshots for revenue, net income, assets, and margin. Values shown in ${selectedFinancialScaleLabel}.`}
|
|
actions={(
|
|
<div className="flex flex-col items-end gap-2">
|
|
<div className="flex flex-wrap justify-end gap-2">
|
|
{FINANCIAL_PERIOD_FILTER_OPTIONS.map((option) => (
|
|
<Button
|
|
key={option.value}
|
|
type="button"
|
|
variant={option.value === financialPeriodFilter ? 'primary' : 'ghost'}
|
|
className="px-2 py-1 text-xs"
|
|
onClick={() => setFinancialPeriodFilter(option.value)}
|
|
>
|
|
{option.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
<div className="flex flex-wrap justify-end gap-2">
|
|
{FINANCIAL_VALUE_SCALE_OPTIONS.map((option) => (
|
|
<Button
|
|
key={option.value}
|
|
type="button"
|
|
variant={option.value === financialValueScale ? 'primary' : 'ghost'}
|
|
className="px-2 py-1 text-xs"
|
|
onClick={() => setFinancialValueScale(option.value)}
|
|
>
|
|
{option.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
>
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading financials...</p>
|
|
) : filteredFinancialSeries.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No financial rows match the selected period filter.</p>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="data-table min-w-[820px]">
|
|
<thead>
|
|
<tr>
|
|
<th>Filed</th>
|
|
<th>Period</th>
|
|
<th>Form</th>
|
|
<th>Revenue</th>
|
|
<th>Net Income</th>
|
|
<th>Assets</th>
|
|
<th>Net Margin</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filteredFinancialSeries.map((point, index) => (
|
|
<tr key={`${point.filingDate}-${point.filingType}-${index}`}>
|
|
<td>{formatLongDate(point.filingDate)}</td>
|
|
<td>{point.periodLabel}</td>
|
|
<td>{point.filingType}</td>
|
|
<td>{asScaledFinancialCurrency(point.revenue, financialValueScale)}</td>
|
|
<td className={(point.netIncome ?? 0) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]'}>
|
|
{asScaledFinancialCurrency(point.netIncome, financialValueScale)}
|
|
</td>
|
|
<td>{asScaledFinancialCurrency(point.assets, financialValueScale)}</td>
|
|
<td>{point.netMargin === null ? 'n/a' : formatPercent(point.netMargin)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
</div>
|
|
|
|
<Panel
|
|
title="Filings"
|
|
subtitle={`${periodEndFilings.length} quarter-end and fiscal-year-end SEC records loaded. Values shown in ${selectedFinancialScaleLabel}.`}
|
|
>
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading filings...</p>
|
|
) : periodEndFilings.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No 10-K or 10-Q filings available for this ticker.</p>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="data-table min-w-[860px]">
|
|
<thead>
|
|
<tr>
|
|
<th>Filed</th>
|
|
<th>Period</th>
|
|
<th>Type</th>
|
|
<th>Revenue</th>
|
|
<th>Net Income</th>
|
|
<th>Assets</th>
|
|
<th>Document</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{periodEndFilings.map((filing) => (
|
|
<tr key={filing.accession_number}>
|
|
<td>{format(new Date(filing.filing_date), 'MMM dd, yyyy')}</td>
|
|
<td>{filing.filing_type === '10-Q' ? 'Quarter End' : 'Fiscal Year End'}</td>
|
|
<td>{filing.filing_type}</td>
|
|
<td>{asScaledFinancialCurrency(filing.metrics?.revenue, financialValueScale)}</td>
|
|
<td>{asScaledFinancialCurrency(filing.metrics?.netIncome, financialValueScale)}</td>
|
|
<td>{asScaledFinancialCurrency(filing.metrics?.totalAssets, financialValueScale)}</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.recentAiReports.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.recentAiReports.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)}`}
|
|
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
|
|
</Link>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
|
|
<div className="grid grid-cols-1 gap-6 xl:grid-cols-[0.95fr_1.3fr]">
|
|
<Panel
|
|
title="Research Summary"
|
|
subtitle="The full thesis workflow now lives in the dedicated Research workspace."
|
|
actions={(
|
|
<Link
|
|
href={`/research?ticker=${encodeURIComponent(activeTicker)}`}
|
|
onMouseEnter={() => prefetchResearchTicker(activeTicker)}
|
|
onFocus={() => prefetchResearchTicker(activeTicker)}
|
|
className="inline-flex items-center gap-2 rounded-lg border border-[color:var(--line-weak)] px-3 py-2 text-xs uppercase tracking-[0.12em] text-[color:var(--accent)] transition hover:border-[color:var(--line-strong)] hover:text-[color:var(--accent-strong)]"
|
|
>
|
|
<NotebookTabs className="size-4" />
|
|
Open research
|
|
</Link>
|
|
)}
|
|
>
|
|
<div className="space-y-4">
|
|
<div className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4">
|
|
<p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Workspace focus</p>
|
|
<p className="mt-2 text-sm leading-6 text-[color:var(--terminal-bright)]">
|
|
Use the research surface to manage the typed library, attach evidence to memo sections, upload diligence files, and assemble the packet view for investor review.
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
|
<div className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4">
|
|
<p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Stored research entries</p>
|
|
<p className="mt-2 text-2xl font-semibold text-[color:var(--terminal-bright)]">{journalEntries.length}</p>
|
|
</div>
|
|
<div className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4">
|
|
<p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Latest update</p>
|
|
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">{journalEntries[0] ? formatDateTime(journalEntries[0].updated_at) : 'No research activity yet'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
|
|
<Panel title="Recent Research Feed" subtitle={`Previewing the latest ${Math.min(journalEntries.length, 4)} research entries for ${activeTicker}.`}>
|
|
{journalLoading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Loading research entries...</p>
|
|
) : journalEntries.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No research saved yet. Use AI memo saves from reports or open the Research workspace to start building the thesis.</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{journalEntries.slice(0, 4).map((entry) => (
|
|
<article key={entry.id} className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4">
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
|
|
{entry.entry_type.replace('_', ' ')} · {formatDateTime(entry.updated_at)}
|
|
</p>
|
|
<h4 className="mt-1 text-sm font-semibold text-[color:var(--terminal-bright)]">{entry.title ?? 'Untitled entry'}</h4>
|
|
</div>
|
|
<Link
|
|
href={`/research?ticker=${encodeURIComponent(activeTicker)}`}
|
|
onMouseEnter={() => prefetchResearchTicker(activeTicker)}
|
|
onFocus={() => prefetchResearchTicker(activeTicker)}
|
|
className="text-xs uppercase tracking-[0.12em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
|
|
>
|
|
Open workspace
|
|
</Link>
|
|
</div>
|
|
<p className="mt-3 whitespace-pre-wrap text-sm leading-6 text-[color:var(--terminal-bright)]">{entry.body_markdown}</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
</div>
|
|
|
|
<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 + research workspace
|
|
</div>
|
|
</Panel>
|
|
</AppShell>
|
|
);
|
|
}
|