Trading
Deals List
Trade history table with summary statistics: deal count, win rate, and realized PnL. Built on theTable and Button primitives.
Preview
Deals
Total
4
Win Rate
66.7%
Realized PnL
+$2,977.00
| Symbol | Side | Entry | Exit | PnL | Status | Actions |
|---|---|---|---|---|---|---|
| BTC/USDT | long | 64,200 | 67,235 | +$3,035.00 | closed | |
| ETH/USDT | short | 3,520 | 3,610 | -$90.00 | closed | |
| SOL/USDT | long | 148.2 | — | — | open | |
| BNB/USDT | long | 580 | 612 | +$32.00 | closed |
Source
Copy this file to components/trading/deals-list.tsx
tsx
'use client'
import * as React from 'react'
import { TrendingUp, Eye, Trash2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from '@/components/ui/table'
import { cn } from '@/lib/utils'
export type DealSide = 'long' | 'short'
export type DealStatus = 'open' | 'closed'
export interface Deal {
id: string
symbol: string
side: DealSide
entryPrice: number
exitPrice?: number
pnl?: number
status: DealStatus
}
export interface DealsListProps {
deals: Deal[]
onSelectDeal?: (id: string) => void
onDeleteDeal?: (id: string) => void
className?: string
}
// Summary stats (count, win rate, realized PnL) plus a deals table.Props
| Prop | Type |
|---|---|
| deals* | Deal[] |
| onSelectDeal | (id: string) => void |
| onDeleteDeal | (id: string) => void |
| className | string |