feat: add totals row to Positions page
This commit is contained in:
@@ -28,14 +28,44 @@ export function PositionsPage() {
|
||||
|
||||
if (isLoading) return <LoadingSpinner />;
|
||||
|
||||
const positions = data ?? [];
|
||||
|
||||
const totals = positions.reduce(
|
||||
(acc, p) => ({
|
||||
quantity: acc.quantity + p.quantity,
|
||||
unrealized_pnl: acc.unrealized_pnl + (p.unrealized_pnl ?? 0),
|
||||
realized_pnl: acc.realized_pnl + (p.realized_pnl ?? 0),
|
||||
market_value: acc.market_value + p.quantity * (p.current_price ?? 0),
|
||||
cost_basis: acc.cost_basis + p.quantity * p.avg_entry_price,
|
||||
}),
|
||||
{ quantity: 0, unrealized_pnl: 0, realized_pnl: 0, market_value: 0, cost_basis: 0 },
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="mb-4 text-xl font-semibold text-gray-100">Positions</h1>
|
||||
<DataTable<Position>
|
||||
data={data ?? []}
|
||||
data={positions}
|
||||
columns={columns}
|
||||
keyField="id"
|
||||
/>
|
||||
{positions.length > 0 && (
|
||||
<div className="mt-px overflow-x-auto rounded-b-lg border border-t-0 border-surface-700 bg-surface-900">
|
||||
<table className="w-full text-sm">
|
||||
<tfoot>
|
||||
<tr className="font-semibold text-gray-200">
|
||||
<td className="px-3 py-2">Totals</td>
|
||||
<td className="px-3 py-2">{totals.quantity}</td>
|
||||
<td className="px-3 py-2">{fmtUsd(totals.cost_basis)}</td>
|
||||
<td className="px-3 py-2">{fmtUsd(totals.market_value)}</td>
|
||||
<td className={`px-3 py-2 ${pnlColor(totals.unrealized_pnl)}`}>{fmtUsd(totals.unrealized_pnl)}</td>
|
||||
<td className={`px-3 py-2 ${pnlColor(totals.realized_pnl)}`}>{fmtUsd(totals.realized_pnl)}</td>
|
||||
<td className="px-3 py-2" />
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user