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,41 @@
+import { usePositions } from '../api/hooks';
+import { DataTable, type Column } from '../components/DataTable';
+import { LoadingSpinner } from '../components/ui';
+import type { Position } from '../api/hooks';
+
+function fmtUsd(v: number | null | undefined) {
+  if (v == null) return '—';
+  return `$${v.toFixed(2)}`;
+}
+
+function pnlColor(v: number | null | undefined) {
+  if (v == null) return 'text-gray-400';
+  return v >= 0 ? 'text-green-400' : 'text-red-400';
+}
+
+const columns: Column<Position>[] = [
+  { key: 'ticker', header: 'Ticker', className: 'font-mono font-semibold text-brand-300' },
+  { key: 'quantity', header: 'Qty' },
+  { key: 'avg_entry_price', header: 'Entry', render: (r) => <span>{fmtUsd(r.avg_entry_price)}</span> },
+  { key: 'current_price', header: 'Current', render: (r) => <span>{fmtUsd(r.current_price)}</span> },
+  { key: 'unrealized_pnl', header: 'Unrealized P&L', render: (r) => <span className={pnlColor(r.unrealized_pnl)}>{fmtUsd(r.unrealized_pnl)}</span> },
+  { key: 'realized_pnl', header: 'Realized P&L', render: (r) => <span className={pnlColor(r.realized_pnl)}>{fmtUsd(r.realized_pnl)}</span> },
+  { key: 'updated_at', header: 'Updated', render: (r) => <span className="text-xs">{new Date(r.updated_at).toLocaleString()}</span> },
+];
+
+export function PositionsPage() {
+  const { data, isLoading } = usePositions();
+
+  if (isLoading) return <LoadingSpinner />;
+
+  return (
+    <div>
+      <h1 className="mb-4 text-xl font-semibold text-gray-100">Positions</h1>
+      <DataTable<Position>
+        data={data ?? []}
+        columns={columns}
+        keyField="id"
+      />
+    </div>
+  );
+}