Make filings page responsive and add original filing links

app/filings/page.tsx

@@ -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">
+          <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="text-sm text-[color:var(--terminal-bright)]">{liveTask.id}</p>
+            <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">
+          <div className="space-y-3">
-            <table className="data-table min-w-[980px]">
+            <div className="space-y-3 lg:hidden">
-              <thead>
+              {filings.map((filing) => {
-                <tr>
+                const revenue = filing.metrics?.revenue;
-                  <th>Ticker</th>
+                const hasAnalysis = Boolean(filing.analysis?.text || filing.analysis?.legacyInsights);
-                  <th>Type</th>
+                const originalFilingUrl = resolveOriginalFilingUrl(filing);
-                  <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 (
+                return (
-                    <tr key={filing.accession_number}>
+                  <article
-                      <td>
+                    key={filing.accession_number}
-                        <div className="font-medium text-[color:var(--terminal-bright)]">{filing.ticker}</div>
+                    className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4"
-                        <div className="text-xs text-[color:var(--terminal-muted)]">{groupedByTicker.get(filing.ticker)} filings</div>
+                  >
-                      </td>
+                    <div className="flex flex-wrap items-start justify-between gap-3">
-                      <td>{filing.filing_type}</td>
+                      <div>
-                      <td>{format(new Date(filing.filing_date), 'MMM dd, yyyy')}</td>
+                        <p className="text-sm font-semibold text-[color:var(--terminal-bright)]">{filing.ticker} · {filing.filing_type}</p>
-                      <td>{revenue ? formatCompactCurrency(revenue) : 'n/a'}</td>
+                        <p className="text-xs text-[color:var(--terminal-muted)]">{formatFilingDate(filing.filing_date)}</p>
-                      <td>{filing.company_name}</td>
+                      </div>
-                      <td>{hasAnalysis ? 'Ready' : 'Not generated'}</td>
+                      <p className="text-xs text-[color:var(--terminal-muted)]">{hasAnalysis ? 'AI ready' : 'AI pending'}</p>
-                      <td>
+                    </div>
-                        <div className="flex items-center gap-2">
+
-                          {filing.filing_url ? (
+                    <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">{filing.company_name}</p>
-                            <a
+
-                              href={filing.filing_url}
+                    <dl className="mt-3 grid grid-cols-1 gap-2 text-xs sm:grid-cols-2">
-                              target="_blank"
+                      <div className="rounded-md border border-[color:var(--line-weak)] px-2 py-1.5">
-                              rel="noreferrer"
+                        <dt className="text-[color:var(--terminal-muted)]">Revenue Snapshot</dt>
-                              className="text-xs text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
+                        <dd className="mt-1 text-[color:var(--terminal-bright)]">{revenue ? formatCompactCurrency(revenue) : 'n/a'}</dd>
-                            >
+                      </div>
-                              SEC
+                      <div className="rounded-md border border-[color:var(--line-weak)] px-2 py-1.5">
-                            </a>
+                        <dt className="text-[color:var(--terminal-muted)]">Accession</dt>
-                          ) : null}
+                        <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>
-                      </td>
+                      </tr>
-                    </tr>
+                    );
-                  );
+                  })}
-                })}
+                </tbody>
-              </tbody>
+              </table>
-            </table>
+            </div>
           </div>
         )}
       </Panel>