phase 16: React dashboard with full platform control and analytics

2026-04-11 16:19:46 -07:00
parent 25e0e386b7
commit faccb0b8db
53 changed files with 7924 additions and 13 deletions
@@ -0,0 +1,104 @@
+import { useCoverageGaps, useSymbolCoverage } from '../api/hooks';
+import { LoadingSpinner, StatusBadge, Card } from '../components/ui';
+
+export function OpsCoveragePage() {
+  const { data: gaps, isLoading: gapsLoading } = useCoverageGaps();
+  const { data: coverage, isLoading: covLoading } = useSymbolCoverage();
+
+  if (gapsLoading || covLoading) return <LoadingSpinner />;
+
+  const missing = (gaps?.missing_source_types ?? []) as Array<Record<string, unknown>>;
+  const stale = (gaps?.stale_sources ?? []) as Array<Record<string, unknown>>;
+  const matrix = (coverage ?? []) as Array<Record<string, unknown>>;
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-xl font-semibold text-gray-100">Source Coverage</h1>
+
+      {/* Coverage Matrix */}
+      <Card>
+        <h2 className="mb-3 text-sm font-medium text-gray-400">Company × Source Type Matrix</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-surface-700 text-left text-gray-500">
+                <th className="px-3 py-2">Ticker</th>
+                <th className="px-3 py-2">Name</th>
+                <th className="px-3 py-2 text-center">Market</th>
+                <th className="px-3 py-2 text-center">News</th>
+                <th className="px-3 py-2 text-center">Filings</th>
+                <th className="px-3 py-2 text-center">Web</th>
+                <th className="px-3 py-2 text-center">Broker</th>
+                <th className="px-3 py-2 text-center">Total</th>
+              </tr>
+            </thead>
+            <tbody>
+              {matrix.map((row, i) => (
+                <tr key={i} className="border-b border-surface-700/50">
+                  <td className="px-3 py-2 font-mono font-semibold text-brand-300">{row.ticker as string}</td>
+                  <td className="px-3 py-2 text-gray-300">{row.legal_name as string}</td>
+                  <CoverageCell count={row.market_sources as number} />
+                  <CoverageCell count={row.news_sources as number} />
+                  <CoverageCell count={row.filings_sources as number} />
+                  <CoverageCell count={row.web_scrape_sources as number} />
+                  <CoverageCell count={row.broker_sources as number} />
+                  <td className="px-3 py-2 text-center text-gray-300">{String(row.active_sources)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+
+      {/* Missing Source Types */}
+      {missing.length > 0 && (
+        <Card>
+          <h2 className="mb-3 text-sm font-medium text-gray-400">Missing Source Types ({missing.length})</h2>
+          <div className="space-y-2">
+            {missing.map((m, i) => {
+              const activeTypes = (m.active_types as string[]) ?? [];
+              const expected = (m.expected_types as string[]) ?? [];
+              const missingTypes = expected.filter((t) => !activeTypes.includes(t));
+              return (
+                <div key={i} className="flex items-center gap-3 rounded border border-yellow-700/30 bg-yellow-900/10 p-2">
+                  <span className="font-mono font-semibold text-brand-300">{m.ticker as string}</span>
+                  <span className="text-xs text-gray-500">missing:</span>
+                  {missingTypes.map((t) => (
+                    <StatusBadge key={t} status={t} />
+                  ))}
+                </div>
+              );
+            })}
+          </div>
+        </Card>
+      )}
+
+      {/* Stale Sources */}
+      {stale.length > 0 && (
+        <Card>
+          <h2 className="mb-3 text-sm font-medium text-gray-400">Stale Sources ({stale.length})</h2>
+          <div className="space-y-2">
+            {stale.map((s, i) => (
+              <div key={i} className="flex items-center justify-between rounded border border-red-700/30 bg-red-900/10 p-2">
+                <div className="flex items-center gap-3">
+                  <span className="font-mono font-semibold text-brand-300">{s.ticker as string}</span>
+                  <StatusBadge status={s.source_type as string} />
+                  <span className="text-xs text-gray-400">{s.source_name as string}</span>
+                </div>
+                <div className="text-xs text-gray-500">
+                  Last success: {s.last_success ? new Date(s.last_success as string).toLocaleString() : 'never'}
+                  {s.recent_failures ? ` | ${s.recent_failures} failures (24h)` : ''}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+function CoverageCell({ count }: { count: number }) {
+  const color = count > 0 ? 'text-green-400' : 'text-red-400';
+  return <td className={`px-3 py-2 text-center font-mono ${color}`}>{count}</td>;
+}