From 53fa190ec3150dfd04d2c881a98eab177dc3b211 Mon Sep 17 00:00:00 2001
From: Celes Renata <celes@frameshift.net>
Date: Tue, 21 Apr 2026 05:45:44 +0000
Subject: [PATCH] feat: add totals row to Positions page

---
 frontend/src/pages/Positions.tsx | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/Positions.tsx b/frontend/src/pages/Positions.tsx
index c1102c6..53a314b 100644
--- a/frontend/src/pages/Positions.tsx
+++ b/frontend/src/pages/Positions.tsx
@@ -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>
   );
 }