Trading

Deals List

Trade history table with summary statistics: deal count, win rate, and realized PnL. Built on theTable and Button primitives.

Preview

Fullscreen
Deals
Total
4
Win Rate
66.7%
Realized PnL
+$2,977.00
SymbolSideEntryExitPnLStatusActions
BTC/USDTlong64,20067,235+$3,035.00closed
ETH/USDTshort3,5203,610-$90.00closed
SOL/USDTlong148.2open
BNB/USDTlong580612+$32.00closed

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

PropType
deals*Deal[]
onSelectDeal(id: string) => void
onDeleteDeal(id: string) => void
classNamestring