feat: add totals row to Positions page

This commit is contained in:
Celes Renata
2026-04-21 05:45:44 +00:00
parent 08b93ad119
commit 53fa190ec3
+31 -1
View File
@@ -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>
);
}