fix: positions totals row aligned with DataTable columns, restore $ prefix

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>
 

frontend/src/pages/Positions.tsx

@@ -41,18 +41,7 @@ export function PositionsPage() {
     { 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={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>
+  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>
@@ -62,10 +51,17 @@ export function PositionsPage() {
       <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>
-      )}
+  ) : undefined;
+
+  return (
+    <div>
+      <h1 className="mb-4 text-xl font-semibold text-gray-100">Positions</h1>
+      <DataTable<Position>
+        data={positions}
+        columns={columns}
+        keyField="id"
+        footerRow={footer}
+      />
     </div>
   );
 }