diff options
Diffstat (limited to 'frontend/components')
| -rw-r--r-- | frontend/components/prism/InsidersPage.tsx | 507 |
1 files changed, 507 insertions, 0 deletions
diff --git a/frontend/components/prism/InsidersPage.tsx b/frontend/components/prism/InsidersPage.tsx new file mode 100644 index 0000000..c0d1363 --- /dev/null +++ b/frontend/components/prism/InsidersPage.tsx @@ -0,0 +1,507 @@ +"use client"; +import { useEffect, useRef, useState } from "react"; +import { api } from "@/lib/api"; +import { buildKpis } from "@/lib/overview"; +import { fmtLarge, fmtNumber } from "@/lib/format"; +import { KPIStrip } from "@/components/prism/KPIStrip"; +import { TickerHeader } from "@/components/prism/TickerHeader"; +import type { InsidersResponse, InsiderTransaction, TickerOverview } from "@/types/api"; + +type InsidersState = "loading" | "ready" | "error" | "empty"; +type Filter = "all" | "buy" | "sell"; + +type Props = { + ticker: string; + overview: TickerOverview; + isSaved: boolean; + onToggleWatchlist: () => void; +}; + +// ── Skeleton ────────────────────────────────────────────────────────────────── + +function SkeletonBlock({ height, className = "" }: { height: number; className?: string }) { + return ( + <div + className={className} + style={{ + height, + borderRadius: "var(--r-3)", + background: "linear-gradient(90deg, var(--ink-2, #181d26) 25%, var(--ink-3, #1e232e) 50%, var(--ink-2, #181d26) 75%)", + backgroundSize: "200% 100%", + animation: "psm-shimmer 1.4s ease infinite", + }} + /> + ); +} + +function InsidersSkeleton() { + return ( + <> + {/* KPI row */} + <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--sp-4)", marginBottom: "var(--sp-5)" }}> + {[0, 1, 2, 3].map((i) => <SkeletonBlock key={i} height={64} />)} + </div> + {/* Chart card */} + <div className="psm-card" style={{ marginBottom: "var(--sp-4)" }}> + <SkeletonBlock height={220} /> + </div> + {/* Table card */} + <div className="psm-card"> + <SkeletonBlock height={32} className="" /> + <div style={{ marginTop: "var(--sp-4)", display: "flex", flexDirection: "column", gap: "var(--sp-3)" }}> + {[0, 1, 2, 3, 4].map((i) => <SkeletonBlock key={i} height={44} />)} + </div> + </div> + </> + ); +} + +// ── Summary KPI strip ───────────────────────────────────────────────────────── + +function InsiderKPIs({ summary }: { summary: InsidersResponse["summary"] }) { + const items = [ + { label: "BUY TRANSACTIONS", value: String(summary.buy_count), tone: "pos" as const }, + { label: "TOTAL BOUGHT", value: fmtLarge(summary.buy_value), tone: "pos" as const }, + { label: "SELL TRANSACTIONS", value: String(summary.sell_count), tone: "neg" as const }, + { label: "TOTAL SOLD", value: fmtLarge(summary.sell_value), tone: "neg" as const }, + ]; + + return ( + <div + style={{ + display: "grid", + gridTemplateColumns: "repeat(4, 1fr)", + gap: "var(--sp-4)", + marginBottom: "var(--sp-5)", + }} + > + {items.map((item) => ( + <div + key={item.label} + className="psm-card" + style={{ padding: "var(--sp-4) var(--sp-5)" }} + > + <div + style={{ + fontFamily: "var(--font-sans)", + fontSize: "var(--fs-11)", + color: "var(--fg-3)", + letterSpacing: "0.08em", + textTransform: "uppercase", + marginBottom: "var(--sp-2)", + }} + > + {item.label} + </div> + <div + style={{ + fontFamily: "var(--font-mono)", + fontSize: "var(--fs-20)", + fontVariantNumeric: "tabular-nums", + color: item.tone === "pos" ? "var(--positive)" : "var(--negative)", + }} + > + {item.value || "—"} + </div> + </div> + ))} + </div> + ); +} + +// ── Monthly chart (SVG diverging bars) ─────────────────────────────────────── + +function MonthlyChart({ data }: { data: InsidersResponse["monthly_chart"] }) { + const containerRef = useRef<HTMLDivElement>(null); + const [width, setWidth] = useState(600); + + useEffect(() => { + if (!containerRef.current) return; + const ro = new ResizeObserver((entries) => { + setWidth(entries[0].contentRect.width); + }); + ro.observe(containerRef.current); + setWidth(containerRef.current.offsetWidth); + return () => ro.disconnect(); + }, []); + + if (!data.length) { + return ( + <div + style={{ + textAlign: "center", + padding: "var(--sp-8) 0", + fontFamily: "var(--font-sans)", + fontSize: "var(--fs-13)", + color: "var(--fg-3)", + }} + > + No activity in the last 6 months + </div> + ); + } + + const PAD_L = 52; + const PAD_R = 16; + const PAD_T = 16; + const PAD_B = 28; + const H = 220; + const chartW = Math.max(width - PAD_L - PAD_R, 10); + const chartH = H - PAD_T - PAD_B; + + // max absolute value for symmetric axis + const maxVal = Math.max(...data.map((d) => Math.max(d.buy, d.sell)), 0.01); + const axisMax = Math.ceil(maxVal * 1.15 * 10) / 10 || 1; + + const barW = Math.max(Math.floor((chartW / data.length) * 0.6), 4); + const barGap = chartW / data.length; + + const yScale = (v: number) => (v / axisMax) * (chartH / 2); + const midY = PAD_T + chartH / 2; + + // Y axis ticks + const ticks = [axisMax, axisMax / 2, 0, -axisMax / 2, -axisMax]; + + return ( + <div ref={containerRef} style={{ width: "100%" }}> + <svg + width={width} + height={H} + style={{ display: "block", overflow: "visible" }} + > + {/* Y axis ticks + labels */} + {ticks.map((t) => { + const y = midY - yScale(t); + const label = t === 0 ? "0" : `${t > 0 ? "+" : ""}${Math.abs(t).toFixed(1)}M`; + return ( + <g key={t}> + <line + x1={PAD_L - 4} + x2={PAD_L + chartW} + y1={y} + y2={y} + stroke={t === 0 ? "var(--line-1)" : "var(--line-1)"} + strokeWidth={t === 0 ? 1.5 : 0.5} + strokeDasharray={t === 0 ? undefined : "2 3"} + opacity={t === 0 ? 1 : 0.5} + /> + <text + x={PAD_L - 8} + y={y + 4} + textAnchor="end" + fontFamily="var(--font-mono)" + fontSize={10} + fill="var(--fg-3)" + > + {label} + </text> + </g> + ); + })} + + {/* Bars */} + {data.map((d, i) => { + const cx = PAD_L + i * barGap + barGap / 2; + const buyH = yScale(d.buy); + const sellH = yScale(d.sell); + + return ( + <g key={d.month}> + {/* Buy bar (up) */} + {d.buy > 0 && ( + <rect + x={cx - barW / 2} + y={midY - buyH} + width={barW} + height={buyH} + fill="var(--positive)" + opacity={0.85} + rx={1} + /> + )} + {/* Sell bar (down) */} + {d.sell > 0 && ( + <rect + x={cx - barW / 2} + y={midY} + width={barW} + height={sellH} + fill="var(--negative)" + opacity={0.85} + rx={1} + /> + )} + {/* Month label */} + <text + x={cx} + y={H - 6} + textAnchor="middle" + fontFamily="var(--font-mono)" + fontSize={10} + fill="var(--fg-3)" + > + {d.month.slice(5)} + </text> + </g> + ); + })} + </svg> + + {/* Legend */} + <div + style={{ + display: "flex", + gap: "var(--sp-5)", + justifyContent: "flex-end", + marginTop: "var(--sp-2)", + }} + > + {[ + { color: "var(--positive)", label: "Buys" }, + { color: "var(--negative)", label: "Sells" }, + ].map(({ color, label }) => ( + <div + key={label} + style={{ + display: "flex", + alignItems: "center", + gap: "var(--sp-2)", + fontFamily: "var(--font-sans)", + fontSize: "var(--fs-12)", + color: "var(--fg-3)", + }} + > + <span + style={{ + display: "inline-block", + width: 8, + height: 8, + borderRadius: 1, + background: color, + }} + /> + {label} + </div> + ))} + </div> + </div> + ); +} + +// ── Transaction table ───────────────────────────────────────────────────────── + +function TransactionRow({ tx }: { tx: InsiderTransaction }) { + const isBuy = tx.direction === "buy"; + const isSell = tx.direction === "sell"; + + return ( + <div className="psm-insider"> + <div className="who"> + <span className="name">{tx.insider || "—"}</span> + <span className="role">{tx.position || "—"}</span> + </div> + <span + className={`pill ${isBuy ? "buy" : isSell ? "sell" : ""}`} + style={ + !isBuy && !isSell + ? { background: "var(--ink-2, #181d26)", color: "var(--fg-3)", border: "1px solid var(--line-1)" } + : undefined + } + > + {tx.direction.toUpperCase()} + </span> + <div style={{ textAlign: "right" }}> + <div className="val">{tx.value ? fmtLarge(tx.value) : "—"}</div> + <div + style={{ + fontFamily: "var(--font-mono)", + fontSize: "var(--fs-11)", + color: "var(--fg-3)", + fontVariantNumeric: "tabular-nums", + }} + > + {tx.shares ? `${fmtNumber(tx.shares, 0)} sh` : ""} + {tx.date ? ` · ${tx.date}` : ""} + </div> + </div> + </div> + ); +} + +function TransactionTable({ transactions }: { transactions: InsiderTransaction[] }) { + const [filter, setFilter] = useState<Filter>("all"); + + const filtered = + filter === "all" ? transactions : transactions.filter((t) => t.direction === filter); + + const FILTERS: { key: Filter; label: string }[] = [ + { key: "all", label: "ALL" }, + { key: "buy", label: "BUYS" }, + { key: "sell", label: "SELLS" }, + ]; + + return ( + <div> + {/* Filter toggles */} + <div + style={{ + display: "flex", + gap: "var(--sp-2)", + marginBottom: "var(--sp-4)", + }} + > + {FILTERS.map(({ key, label }) => ( + <button + key={key} + onClick={() => setFilter(key)} + className={`psm-tab${filter === key ? " active" : ""}`} + style={{ cursor: "pointer" }} + > + {label} + </button> + ))} + </div> + + {filtered.length === 0 ? ( + <div + style={{ + textAlign: "center", + padding: "var(--sp-8) 0", + fontFamily: "var(--font-sans)", + fontSize: "var(--fs-13)", + color: "var(--fg-3)", + }} + > + No transactions match filter + </div> + ) : ( + filtered.map((tx, i) => <TransactionRow key={i} tx={tx} />) + )} + </div> + ); +} + +// ── Page ────────────────────────────────────────────────────────────────────── + +export function InsidersPage({ ticker, overview, isSaved, onToggleWatchlist }: Props) { + const [data, setData] = useState<InsidersResponse | null>(null); + const [state, setState] = useState<InsidersState>("loading"); + const kpis = buildKpis(overview); + + useEffect(() => { + let cancelled = false; + setState("loading"); + setData(null); + + api + .insiders(ticker) + .then((res) => { + if (cancelled) return; + if (!res.transactions.length) { + setState("empty"); + } else { + setData(res); + setState("ready"); + } + }) + .catch(() => { + if (!cancelled) setState("error"); + }); + + return () => { + cancelled = true; + }; + }, [ticker]); + + return ( + <> + <TickerHeader overview={overview} onToggleWatchlist={onToggleWatchlist} isSaved={isSaved} /> + <KPIStrip items={kpis} /> + + <div style={{ padding: "0 var(--sp-1)" }}> + {state === "loading" && <InsidersSkeleton />} + + {state === "error" && ( + <div className="psm-card" style={{ textAlign: "center", padding: "var(--sp-8)" }}> + <div + style={{ + fontFamily: "var(--font-sans)", + fontSize: "var(--fs-14)", + color: "var(--fg-3)", + }} + > + Failed to load insider data + </div> + </div> + )} + + {state === "empty" && ( + <div className="psm-card" style={{ textAlign: "center", padding: "var(--sp-8)" }}> + <div + style={{ + fontFamily: "var(--font-sans)", + fontSize: "var(--fs-14)", + color: "var(--fg-3)", + }} + > + No insider activity reported + </div> + </div> + )} + + {state === "ready" && data && ( + <> + <InsiderKPIs summary={data.summary} /> + + <div className="psm-card" style={{ marginBottom: "var(--sp-4)" }}> + <div + style={{ + display: "flex", + justifyContent: "space-between", + alignItems: "baseline", + marginBottom: "var(--sp-4)", + }} + > + <span + style={{ + fontFamily: "var(--font-sans)", + fontSize: "var(--fs-11)", + color: "var(--fg-3)", + letterSpacing: "0.08em", + textTransform: "uppercase", + }} + > + Monthly Insider Activity — Last 6 Months ($M) + </span> + </div> + <MonthlyChart data={data.monthly_chart} /> + </div> + + <div className="psm-card"> + <div + style={{ + fontFamily: "var(--font-sans)", + fontSize: "var(--fs-11)", + color: "var(--fg-3)", + letterSpacing: "0.08em", + textTransform: "uppercase", + marginBottom: "var(--sp-4)", + }} + > + All Transactions + </div> + <TransactionTable transactions={data.transactions} /> + </div> + </> + )} + </div> + + <style>{` + @keyframes psm-shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } + } + `}</style> + </> + ); +} |