import { memo } from 'react';
import { TradeGroupHeader } from './TradeGroupHeader';
import { TradeRow } from './TradeRow';
interface Trade {
id: number;
symbol: string;
trade_date: string;
trade_type: 'buy' | 'sell';
quantity: number;
price: number;
exchange: string;
order_id: string;
}
interface TradeGroup {
symbol: string;
accountId: number;
accountName: string;
totalBuyQuantity: number;
totalSellQuantity: number;
netQuantity: number;
totalBuyValue: number;
totalSellValue: number;
avgBuyPrice: number;
avgSellPrice: number;
currentPrice: number;
currentValue: number;
realizedPnL: number;
realizedPnLPercent: number;
unrealizedPnL: number;
unrealizedPnLPercent: number;
totalPnL: number;
status: 'active' | 'sold';
xirr: number | null;
trades: Trade[];
firstTradeDate: string;
lastTradeDate: string;
// For sold positions only
currentValueIfHeld?: number;
opportunityCost?: number;
opportunityCostPercent?: number;
}
interface TradeGroupProps {
group: TradeGroup;
isExpanded: boolean;
onToggle: () => void;
editingTrade: number | null;
editValues: { symbol?: string; quantity?: string; price?: string };
onStartEdit: (trade: Trade) => void;
onSave: (tradeId: number) => void;
onCancelEdit: () => void;
onEditChange: (values: { symbol?: string; quantity?: string; price?: string }) => void;
formatDate: (date: string) => string;
formatCurrency: (amount: number) => string;
}
// Memoized TradeGroup component
export const TradeGroup = memo(function TradeGroup({
group,
isExpanded,
onToggle,
editingTrade,
editValues,
onStartEdit,
onSave,
onCancelEdit,
onEditChange,
formatDate,
formatCurrency,
}: TradeGroupProps) {
const isSold = group.status === 'sold';
return (
<div
className={`bg-white rounded-lg shadow overflow-hidden transition-all ${
isSold ? 'opacity-60' : ''
}`}
>
{/* Group Header */}
<TradeGroupHeader
symbol={group.symbol}
accountName={group.accountName}
isSold={isSold}
isExpanded={isExpanded}
netQuantity={group.netQuantity}
totalBuyQuantity={group.totalBuyQuantity}
totalSellQuantity={group.totalSellQuantity}
totalBuyValue={group.totalBuyValue}
totalSellValue={group.totalSellValue}
currentPrice={group.currentPrice}
realizedPnL={group.realizedPnL}
realizedPnLPercent={group.realizedPnLPercent}
unrealizedPnL={group.unrealizedPnL}
unrealizedPnLPercent={group.unrealizedPnLPercent}
xirr={group.xirr}
firstTradeDate={group.firstTradeDate}
lastTradeDate={group.lastTradeDate}
tradesCount={group.trades.length}
onToggle={onToggle}
formatDate={formatDate}
formatCurrency={formatCurrency}
currentValueIfHeld={group.currentValueIfHeld}
opportunityCost={group.opportunityCost}
opportunityCostPercent={group.opportunityCostPercent}
/>
{/* Expanded Trade Details */}
{isExpanded && (
<div className="border-t border-gray-200">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Symbol</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Quantity</th>
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Price</th>
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Value</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Exchange</th>
<th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Actions</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{group.trades.map((trade) => (
<TradeRow
key={trade.id}
trade={trade}
isEditing={editingTrade === trade.id}
editValues={editValues}
onStartEdit={onStartEdit}
onSave={onSave}
onCancel={onCancelEdit}
onEditChange={onEditChange}
formatDate={formatDate}
formatCurrency={formatCurrency}
/>
))}
</tbody>
</table>
</div>
)}
</div>
);
});
