feat: add totals row to Positions page

2026-04-21 05:45:44 +00:00
parent 08b93ad119
commit 53fa190ec3
1 changed files with 31 additions and 1 deletions
@@ -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>
  );
 }