Make filings page responsive and add original filing links
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
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 { Bot, Download, ExternalLink, Search, TimerReset } from 'lucide-react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { AppShell } from '@/components/shell/app-shell';
|
||||
import { Panel } from '@/components/ui/panel';
|
||||
@@ -24,6 +24,59 @@ export default function FilingsPage() {
|
||||
);
|
||||
}
|
||||
|
||||
function formatFilingDate(value: string) {
|
||||
const date = new Date(value);
|
||||
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return 'Unknown';
|
||||
}
|
||||
|
||||
return format(date, 'MMM dd, yyyy');
|
||||
}
|
||||
|
||||
function resolveOriginalFilingUrl(filing: Filing) {
|
||||
if (filing.filing_url) {
|
||||
return filing.filing_url;
|
||||
}
|
||||
|
||||
if (!filing.primary_document) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const cikDigits = filing.cik.replace(/\D/g, '');
|
||||
const cikValue = Number.parseInt(cikDigits, 10);
|
||||
|
||||
if (!cikDigits || Number.isNaN(cikValue)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const compactAccession = filing.accession_number.replace(/-/g, '');
|
||||
if (!compactAccession) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return `https://www.sec.gov/Archives/edgar/data/${cikValue}/${compactAccession}/${filing.primary_document}`;
|
||||
}
|
||||
|
||||
type FilingExternalLinkProps = {
|
||||
href: string;
|
||||
label: string;
|
||||
};
|
||||
|
||||
function FilingExternalLink({ href, label }: FilingExternalLinkProps) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
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)]"
|
||||
>
|
||||
{label}
|
||||
<ExternalLink className="size-3" />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function FilingsPageContent() {
|
||||
const { isPending, isAuthenticated } = useAuthGuard();
|
||||
const searchParams = useSearchParams();
|
||||
@@ -119,7 +172,7 @@ function FilingsPageContent() {
|
||||
title="Filings Stream"
|
||||
subtitle="Sync SEC submissions and generate AI red-flag analysis asynchronously."
|
||||
actions={(
|
||||
<Button variant="secondary" onClick={() => void loadFilings(searchTicker || undefined)}>
|
||||
<Button variant="secondary" className="w-full sm:w-auto" onClick={() => void loadFilings(searchTicker || undefined)}>
|
||||
<TimerReset className="size-4" />
|
||||
Refresh table
|
||||
</Button>
|
||||
@@ -127,8 +180,8 @@ function FilingsPageContent() {
|
||||
>
|
||||
{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>
|
||||
<div className="flex flex-col gap-2 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p className="break-all 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}
|
||||
@@ -138,7 +191,7 @@ function FilingsPageContent() {
|
||||
<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"
|
||||
className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
void triggerSync();
|
||||
@@ -148,9 +201,9 @@ function FilingsPageContent() {
|
||||
value={syncTickerInput}
|
||||
onChange={(event) => setSyncTickerInput(event.target.value.toUpperCase())}
|
||||
placeholder="Ticker (AAPL)"
|
||||
className="max-w-xs"
|
||||
className="w-full sm:max-w-xs"
|
||||
/>
|
||||
<Button type="submit">
|
||||
<Button type="submit" className="w-full sm:w-auto">
|
||||
<Download className="size-4" />
|
||||
Queue sync
|
||||
</Button>
|
||||
@@ -159,7 +212,7 @@ function FilingsPageContent() {
|
||||
|
||||
<Panel title="Search Index" subtitle="Filter by ticker in the local filing index.">
|
||||
<form
|
||||
className="flex flex-wrap items-center gap-3"
|
||||
className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
setSearchTicker(filterTickerInput.trim().toUpperCase());
|
||||
@@ -169,15 +222,16 @@ function FilingsPageContent() {
|
||||
value={filterTickerInput}
|
||||
onChange={(event) => setFilterTickerInput(event.target.value.toUpperCase())}
|
||||
placeholder="Ticker filter"
|
||||
className="max-w-xs"
|
||||
className="w-full sm:max-w-xs"
|
||||
/>
|
||||
<Button type="submit" variant="secondary">
|
||||
<Button type="submit" variant="secondary" className="w-full sm:w-auto">
|
||||
<Search className="size-4" />
|
||||
Apply
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className="w-full sm:w-auto"
|
||||
onClick={() => {
|
||||
setFilterTickerInput('');
|
||||
setSearchTicker('');
|
||||
@@ -196,47 +250,106 @@ function FilingsPageContent() {
|
||||
) : 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);
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-3 lg:hidden">
|
||||
{filings.map((filing) => {
|
||||
const revenue = filing.metrics?.revenue;
|
||||
const hasAnalysis = Boolean(filing.analysis?.text || filing.analysis?.legacyInsights);
|
||||
const originalFilingUrl = resolveOriginalFilingUrl(filing);
|
||||
|
||||
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}
|
||||
return (
|
||||
<article
|
||||
key={filing.accession_number}
|
||||
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-sm font-semibold text-[color:var(--terminal-bright)]">{filing.ticker} · {filing.filing_type}</p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">{formatFilingDate(filing.filing_date)}</p>
|
||||
</div>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">{hasAnalysis ? 'AI ready' : 'AI pending'}</p>
|
||||
</div>
|
||||
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">{filing.company_name}</p>
|
||||
|
||||
<dl className="mt-3 grid grid-cols-1 gap-2 text-xs sm:grid-cols-2">
|
||||
<div className="rounded-md border border-[color:var(--line-weak)] px-2 py-1.5">
|
||||
<dt className="text-[color:var(--terminal-muted)]">Revenue Snapshot</dt>
|
||||
<dd className="mt-1 text-[color:var(--terminal-bright)]">{revenue ? formatCompactCurrency(revenue) : 'n/a'}</dd>
|
||||
</div>
|
||||
<div className="rounded-md border border-[color:var(--line-weak)] px-2 py-1.5">
|
||||
<dt className="text-[color:var(--terminal-muted)]">Accession</dt>
|
||||
<dd className="mt-1 break-all text-[color:var(--terminal-bright)]">{filing.accession_number}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||
{originalFilingUrl ? (
|
||||
<FilingExternalLink href={originalFilingUrl} label="Original filing" />
|
||||
) : (
|
||||
<span className="text-xs text-[color:var(--terminal-muted)]">Original filing unavailable</span>
|
||||
)}
|
||||
{filing.submission_url ? (
|
||||
<FilingExternalLink href={filing.submission_url} label="Submission" />
|
||||
) : null}
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => void triggerAnalysis(filing.accession_number)}
|
||||
className="px-2 py-1 text-xs"
|
||||
>
|
||||
<Bot className="size-3" />
|
||||
Analyze
|
||||
</Button>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="hidden overflow-x-auto lg:block">
|
||||
<table className="data-table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ticker</th>
|
||||
<th>Type</th>
|
||||
<th>Filed</th>
|
||||
<th>Revenue Snapshot</th>
|
||||
<th>Company</th>
|
||||
<th>AI</th>
|
||||
<th>Links</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filings.map((filing) => {
|
||||
const revenue = filing.metrics?.revenue;
|
||||
const hasAnalysis = Boolean(filing.analysis?.text || filing.analysis?.legacyInsights);
|
||||
const originalFilingUrl = resolveOriginalFilingUrl(filing);
|
||||
|
||||
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>{formatFilingDate(filing.filing_date)}</td>
|
||||
<td>{revenue ? formatCompactCurrency(revenue) : 'n/a'}</td>
|
||||
<td className="max-w-[18rem]">{filing.company_name}</td>
|
||||
<td>{hasAnalysis ? 'Ready' : 'Not generated'}</td>
|
||||
<td>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{originalFilingUrl ? (
|
||||
<FilingExternalLink href={originalFilingUrl} label="Original" />
|
||||
) : (
|
||||
<span className="text-xs text-[color:var(--terminal-muted)]">Unavailable</span>
|
||||
)}
|
||||
{filing.submission_url ? (
|
||||
<FilingExternalLink href={filing.submission_url} label="Submission" />
|
||||
) : null}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => void triggerAnalysis(filing.accession_number)}
|
||||
@@ -245,13 +358,13 @@ function FilingsPageContent() {
|
||||
<Bot className="size-3" />
|
||||
Analyze
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Panel>
|
||||
|
||||
Reference in New Issue
Block a user