first commit

2026-02-20 17:31:01 +01:00
commit 61ab24490d
160 changed files with 17034 additions and 0 deletions
--- a/frontend/src/components/scanner/TradeTable.tsx
+++ b/frontend/src/components/scanner/TradeTable.tsx
@@ -0,0 +1,81 @@
+import { Link } from 'react-router-dom';
+import type { TradeSetup } from '../../lib/types';
+import { formatPrice, formatDateTime } from '../../lib/format';
+
+export type SortColumn = 'symbol' | 'direction' | 'entry_price' | 'stop_loss' | 'target' | 'rr_ratio' | 'composite_score' | 'detected_at';
+export type SortDirection = 'asc' | 'desc';
+
+interface TradeTableProps {
+  trades: TradeSetup[];
+  sortColumn: SortColumn;
+  sortDirection: SortDirection;
+  onSort: (column: SortColumn) => void;
+}
+
+const columns: { key: SortColumn; label: string }[] = [
+  { key: 'symbol', label: 'Symbol' },
+  { key: 'direction', label: 'Direction' },
+  { key: 'entry_price', label: 'Entry' },
+  { key: 'stop_loss', label: 'Stop Loss' },
+  { key: 'target', label: 'Target' },
+  { key: 'rr_ratio', label: 'R:R' },
+  { key: 'composite_score', label: 'Score' },
+  { key: 'detected_at', label: 'Detected' },
+];
+
+function sortIndicator(column: SortColumn, active: SortColumn, dir: SortDirection) {
+  if (column !== active) return '';
+  return dir === 'asc' ? ' ▲' : ' ▼';
+}
+
+export function TradeTable({ trades, sortColumn, sortDirection, onSort }: TradeTableProps) {
+  if (trades.length === 0) {
+    return <p className="py-8 text-center text-sm text-gray-500">No trade setups match the current filters.</p>;
+  }
+
+  return (
+    <div className="glass overflow-x-auto">
+      <table className="w-full text-left text-sm">
+        <thead>
+          <tr className="border-b border-white/[0.06] text-xs uppercase tracking-wider text-gray-500">
+            {columns.map((col) => (
+              <th
+                key={col.key}
+                className="cursor-pointer select-none px-4 py-3 hover:text-gray-300 transition-colors duration-150"
+                onClick={() => onSort(col.key)}
+              >
+                {col.label}{sortIndicator(col.key, sortColumn, sortDirection)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {trades.map((trade) => (
+            <tr key={trade.id} className="border-b border-white/[0.04] transition-all duration-200 hover:bg-white/[0.03]">
+              <td className="px-4 py-3.5">
+                <Link to={`/ticker/${trade.symbol}`} className="font-medium text-blue-400 hover:text-blue-300 transition-colors duration-150">
+                  {trade.symbol}
+                </Link>
+              </td>
+              <td className="px-4 py-3.5">
+                <span className={trade.direction === 'long' ? 'font-medium text-emerald-400' : 'font-medium text-red-400'}>
+                  {trade.direction}
+                </span>
+              </td>
+              <td className="px-4 py-3.5 font-mono text-gray-200">{formatPrice(trade.entry_price)}</td>
+              <td className="px-4 py-3.5 font-mono text-gray-200">{formatPrice(trade.stop_loss)}</td>
+              <td className="px-4 py-3.5 font-mono text-gray-200">{formatPrice(trade.target)}</td>
+              <td className="px-4 py-3.5 font-mono font-semibold text-gray-200">{trade.rr_ratio.toFixed(2)}</td>
+              <td className="px-4 py-3.5">
+                <span className={`font-semibold ${trade.composite_score > 70 ? 'text-emerald-400' : trade.composite_score >= 40 ? 'text-amber-400' : 'text-red-400'}`}>
+                  {Math.round(trade.composite_score)}
+                </span>
+              </td>
+              <td className="px-4 py-3.5 text-gray-400">{formatDateTime(trade.detected_at)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}