82 lines
3.4 KiB
TypeScript
82 lines
3.4 KiB
TypeScript
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>
|
|
);
|
|
}
|