From 3bcb84ed41f956a4b4673bdbba742f9eb722b793 Mon Sep 17 00:00:00 2001
From: Celes Renata <celes@frameshift.net>
Date: Tue, 21 Apr 2026 06:11:19 +0000
Subject: [PATCH] fix: positions totals row aligned with DataTable columns,
 restore $ prefix

---
 frontend/src/components/DataTable.tsx |  7 +++++++
 frontend/src/pages/Positions.tsx      | 30 ++++++++++++---------------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/DataTable.tsx b/frontend/src/components/DataTable.tsx
index 8274c48..d384ec5 100644
--- a/frontend/src/components/DataTable.tsx
+++ b/frontend/src/components/DataTable.tsx
@@ -17,6 +17,7 @@ interface Props<T> {
   onRowClick?: (row: T) => void;
   filterFn?: (row: T, query: string) => boolean;
   emptyMessage?: string;
+  footerRow?: ReactNode;
 }
 
 export function DataTable<T extends object>({
@@ -27,6 +28,7 @@ export function DataTable<T extends object>({
   onRowClick,
   filterFn,
   emptyMessage = 'No data',
+  footerRow,
 }: Props<T>) {
   const [sortKey, setSortKey] = useState<string | null>(null);
   const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
@@ -122,6 +124,11 @@ export function DataTable<T extends object>({
               ))
             )}
           </tbody>
+          {footerRow && (
+            <tfoot className="border-t border-surface-700 bg-surface-900">
+              {footerRow}
+            </tfoot>
+          )}
         </table>
       </div>
 
diff --git a/frontend/src/pages/Positions.tsx b/frontend/src/pages/Positions.tsx
index 53a314b..5d0194d 100644
--- a/frontend/src/pages/Positions.tsx
+++ b/frontend/src/pages/Positions.tsx
@@ -41,6 +41,18 @@ export function PositionsPage() {
     { quantity: 0, unrealized_pnl: 0, realized_pnl: 0, market_value: 0, cost_basis: 0 },
   );
 
+  const footer = positions.length > 0 ? (
+    <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>
+  ) : undefined;
+
   return (
     <div>
       <h1 className="mb-4 text-xl font-semibold text-gray-100">Positions</h1>
@@ -48,24 +60,8 @@ export function PositionsPage() {
         data={positions}
         columns={columns}
         keyField="id"
+        footerRow={footer}
       />
-      {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>
   );
 }