261 lines
9.5 KiB
TypeScript
261 lines
9.5 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { Suspense } from 'react';
|
|
import { format } from 'date-fns';
|
|
import { Bot, Download, Search, TimerReset } from 'lucide-react';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { AppShell } from '@/components/shell/app-shell';
|
|
import { Panel } from '@/components/ui/panel';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { StatusPill } from '@/components/ui/status-pill';
|
|
import { useAuthGuard } from '@/hooks/use-auth-guard';
|
|
import { useTaskPoller } from '@/hooks/use-task-poller';
|
|
import { getTask, listFilings, queueFilingAnalysis, queueFilingSync } from '@/lib/api';
|
|
import type { Filing, Task } from '@/lib/types';
|
|
import { formatCompactCurrency } from '@/lib/format';
|
|
|
|
export default function FilingsPage() {
|
|
return (
|
|
<Suspense fallback={<div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Opening filings stream...</div>}>
|
|
<FilingsPageContent />
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
function FilingsPageContent() {
|
|
const { isPending, isAuthenticated } = useAuthGuard();
|
|
const searchParams = useSearchParams();
|
|
|
|
const [filings, setFilings] = useState<Filing[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [syncTickerInput, setSyncTickerInput] = useState('');
|
|
const [filterTickerInput, setFilterTickerInput] = useState('');
|
|
const [searchTicker, setSearchTicker] = useState('');
|
|
const [activeTask, setActiveTask] = useState<Task | null>(null);
|
|
|
|
useEffect(() => {
|
|
const ticker = searchParams.get('ticker');
|
|
if (ticker) {
|
|
const normalized = ticker.toUpperCase();
|
|
setSyncTickerInput(normalized);
|
|
setFilterTickerInput(normalized);
|
|
setSearchTicker(normalized);
|
|
}
|
|
}, [searchParams]);
|
|
|
|
const loadFilings = useCallback(async (ticker?: string) => {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const response = await listFilings({ ticker, limit: 120 });
|
|
setFilings(response.filings);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unable to fetch filings');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!isPending && isAuthenticated) {
|
|
void loadFilings(searchTicker || undefined);
|
|
}
|
|
}, [isPending, isAuthenticated, searchTicker, loadFilings]);
|
|
|
|
const polledTask = useTaskPoller({
|
|
taskId: activeTask?.id ?? null,
|
|
onTerminalState: async () => {
|
|
setActiveTask(null);
|
|
await loadFilings(searchTicker || undefined);
|
|
}
|
|
});
|
|
|
|
const liveTask = polledTask ?? activeTask;
|
|
|
|
const triggerSync = async () => {
|
|
if (!syncTickerInput.trim()) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const { task } = await queueFilingSync({ ticker: syncTickerInput.trim().toUpperCase(), limit: 20 });
|
|
const latest = await getTask(task.id);
|
|
setActiveTask(latest.task);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to queue filing sync');
|
|
}
|
|
};
|
|
|
|
const triggerAnalysis = async (accessionNumber: string) => {
|
|
try {
|
|
const { task } = await queueFilingAnalysis(accessionNumber);
|
|
const latest = await getTask(task.id);
|
|
setActiveTask(latest.task);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to queue filing analysis');
|
|
}
|
|
};
|
|
|
|
const groupedByTicker = useMemo(() => {
|
|
const counts = new Map<string, number>();
|
|
|
|
for (const filing of filings) {
|
|
counts.set(filing.ticker, (counts.get(filing.ticker) ?? 0) + 1);
|
|
}
|
|
|
|
return counts;
|
|
}, [filings]);
|
|
|
|
if (isPending || !isAuthenticated) {
|
|
return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Opening filings stream...</div>;
|
|
}
|
|
|
|
return (
|
|
<AppShell
|
|
title="Filings Stream"
|
|
subtitle="Sync SEC submissions and generate AI red-flag analysis asynchronously."
|
|
actions={(
|
|
<Button variant="secondary" onClick={() => void loadFilings(searchTicker || undefined)}>
|
|
<TimerReset className="size-4" />
|
|
Refresh table
|
|
</Button>
|
|
)}
|
|
>
|
|
{liveTask ? (
|
|
<Panel title="Active Task" subtitle={`${liveTask.task_type} is processing in the task engine.`}>
|
|
<div className="flex items-center justify-between gap-3 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
|
<p className="text-sm text-[color:var(--terminal-bright)]">{liveTask.id}</p>
|
|
<StatusPill status={liveTask.status} />
|
|
</div>
|
|
{liveTask.error ? <p className="mt-2 text-sm text-[#ff9898]">{liveTask.error}</p> : null}
|
|
</Panel>
|
|
) : null}
|
|
|
|
<div className="grid grid-cols-1 gap-5 lg:grid-cols-[1.2fr_1fr]">
|
|
<Panel title="Sync Controller" subtitle="Queue ingestion jobs by ticker symbol.">
|
|
<form
|
|
className="flex flex-wrap items-center gap-3"
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
void triggerSync();
|
|
}}
|
|
>
|
|
<Input
|
|
value={syncTickerInput}
|
|
onChange={(event) => setSyncTickerInput(event.target.value.toUpperCase())}
|
|
placeholder="Ticker (AAPL)"
|
|
className="max-w-xs"
|
|
/>
|
|
<Button type="submit">
|
|
<Download className="size-4" />
|
|
Queue sync
|
|
</Button>
|
|
</form>
|
|
</Panel>
|
|
|
|
<Panel title="Search Index" subtitle="Filter by ticker in the local filing index.">
|
|
<form
|
|
className="flex flex-wrap items-center gap-3"
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
setSearchTicker(filterTickerInput.trim().toUpperCase());
|
|
}}
|
|
>
|
|
<Input
|
|
value={filterTickerInput}
|
|
onChange={(event) => setFilterTickerInput(event.target.value.toUpperCase())}
|
|
placeholder="Ticker filter"
|
|
className="max-w-xs"
|
|
/>
|
|
<Button type="submit" variant="secondary">
|
|
<Search className="size-4" />
|
|
Apply
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
onClick={() => {
|
|
setFilterTickerInput('');
|
|
setSearchTicker('');
|
|
}}
|
|
>
|
|
Clear
|
|
</Button>
|
|
</form>
|
|
</Panel>
|
|
</div>
|
|
|
|
<Panel title="Filing Ledger" subtitle={`${filings.length} records loaded${searchTicker ? ` for ${searchTicker}` : ''}.`}>
|
|
{error ? <p className="text-sm text-[#ffb5b5]">{error}</p> : null}
|
|
{loading ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">Fetching filings...</p>
|
|
) : filings.length === 0 ? (
|
|
<p className="text-sm text-[color:var(--terminal-muted)]">No filings available. Queue a sync job to ingest fresh SEC data.</p>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="data-table min-w-[980px]">
|
|
<thead>
|
|
<tr>
|
|
<th>Ticker</th>
|
|
<th>Type</th>
|
|
<th>Filed</th>
|
|
<th>Revenue Snapshot</th>
|
|
<th>Company</th>
|
|
<th>AI</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filings.map((filing) => {
|
|
const revenue = filing.metrics?.revenue;
|
|
const hasAnalysis = Boolean(filing.analysis?.text || filing.analysis?.legacyInsights);
|
|
|
|
return (
|
|
<tr key={filing.accession_number}>
|
|
<td>
|
|
<div className="font-medium text-[color:var(--terminal-bright)]">{filing.ticker}</div>
|
|
<div className="text-xs text-[color:var(--terminal-muted)]">{groupedByTicker.get(filing.ticker)} filings</div>
|
|
</td>
|
|
<td>{filing.filing_type}</td>
|
|
<td>{format(new Date(filing.filing_date), 'MMM dd, yyyy')}</td>
|
|
<td>{revenue ? formatCompactCurrency(revenue) : 'n/a'}</td>
|
|
<td>{filing.company_name}</td>
|
|
<td>{hasAnalysis ? 'Ready' : 'Not generated'}</td>
|
|
<td>
|
|
<div className="flex items-center gap-2">
|
|
{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
|
|
</a>
|
|
) : null}
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => void triggerAnalysis(filing.accession_number)}
|
|
className="px-2 py-1 text-xs"
|
|
>
|
|
<Bot className="size-3" />
|
|
Analyze
|
|
</Button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
</AppShell>
|
|
);
|
|
}
|