Make trade cards clickable to navigate to detail page

frontend/app/trades/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState, useCallback, CSSProperties } from "react";
+import { useRouter } from "next/navigation";
 import { Permission } from "../auth-context";
 import { api } from "../api";
 import { Header } from "../components/Header";
@@ -21,6 +22,7 @@ import {
 type ExchangeResponse = components["schemas"]["ExchangeResponse"];
 
 export default function TradesPage() {
+  const router = useRouter();
   const { user, isLoading, isAuthorized } = useRequireAuth({
     requiredPermission: Permission.VIEW_OWN_EXCHANGES,
     fallbackRedirect: "/",
@@ -113,7 +115,14 @@ export default function TradesPage() {
                     const status = getTradeStatusDisplay(trade.status);
                     const isBuy = trade.direction === "buy";
                     return (
-                      <div key={trade.id} style={tradeCardStyles.tradeCard}>
+                      <div
+                        key={trade.id}
+                        style={{
+                          ...tradeCardStyles.tradeCard,
+                          cursor: "pointer",
+                        }}
+                        onClick={() => router.push(`/trades/${trade.id}`)}
+                      >
                         <div style={tradeCardStyles.tradeHeader}>
                           <div style={tradeCardStyles.tradeInfo}>
                             <div style={tradeCardStyles.tradeTime}>