Linked case/client cells

X-Lovable-Edit-ID: edt-6ac7cfb1-7c3c-40f2-8da8-6cc79626180d
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routeTree.gen.ts

@@ -952,12 +952,3 @@ const rootRouteChildren: RootRouteChildren = {
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
-
-import type { getRouter } from './router.tsx'
-import type { createStart } from '@tanstack/react-start'
-declare module '@tanstack/react-start' {
-  interface Register {
-    ssr: true
-    router: Awaited<ReturnType<typeof getRouter>>
-  }
-}

src/routes/cases.index.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute, Link } from "@tanstack/react-router";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { useEffect, useMemo, useState } from "react";
 import { ProtectedLayout } from "@/components/protected-layout";
 import { PageContainer, PageHeader } from "@/components/app-shell";
@@ -26,6 +26,7 @@ export const Route = createFileRoute("/cases/")({
 });
 
 function CasesList() {
+  const navigate = useNavigate();
   const [cases, setCases] = useState<any[]>([]);
   const [q, setQ] = useState("");
   const [statusFilter, setStatusFilter] = useState<string>("all");
@@ -167,9 +168,18 @@ function CasesList() {
                 </td></tr>
               )}
               {sorted.map((c) => (
-                <tr key={c.id} className="border-t hover:bg-muted/30">
+                <tr
+                  key={c.id}
+                  className="border-t hover:bg-muted/30 cursor-pointer transition-colors"
+                  onClick={() => navigate({ to: "/cases/$caseId", params: { caseId: c.id } })}
+                >
                   <td className="px-4 py-3">
-                    <Link to="/cases/$caseId" params={{ caseId: c.id }} className="font-medium hover:text-primary">
+                    <Link
+                      to="/cases/$caseId"
+                      params={{ caseId: c.id }}
+                      className="font-medium hover:text-primary"
+                      onClick={(e) => e.stopPropagation()}
+                    >
                       {c.title}
                     </Link>
                     <div className="text-xs text-muted-foreground">{c.case_number}</div>
@@ -180,7 +190,7 @@ function CasesList() {
                   </td>
                   <td className="px-4 py-3 text-muted-foreground">{c.assignee?.full_name || c.assignee?.email || "—"}</td>
                   <td className="px-4 py-3 text-muted-foreground">{formatDate(c.opened_at)}</td>
-                  <td className="px-4 py-3 text-right">
+                  <td className="px-4 py-3 text-right" onClick={(e) => e.stopPropagation()}>
                     <Button
                       size="icon"
                       variant="ghost"

src/routes/clients.index.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute, Link } from "@tanstack/react-router";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 import { ProtectedLayout } from "@/components/protected-layout";
 import { PageContainer, PageHeader } from "@/components/app-shell";
@@ -22,6 +22,7 @@ export const Route = createFileRoute("/clients/")({
 });
 
 function ClientsList() {
+  const navigate = useNavigate();
   const [clients, setClients] = useState<any[]>([]);
   const [q, setQ] = useState("");
   const [open, setOpen] = useState(false);
@@ -119,12 +120,17 @@ function ClientsList() {
               {filtered.map((c) => {
                 const Icon = typeIcon(c.client_type);
                 return (
-                  <tr key={c.id} className="border-t hover:bg-muted/30 transition-colors">
+                  <tr
+                    key={c.id}
+                    className="border-t hover:bg-muted/30 cursor-pointer transition-colors"
+                    onClick={() => navigate({ to: "/clients/$clientId", params: { clientId: c.id } })}
+                  >
                     <td className="px-4 py-3">
                       <Link
                         to="/clients/$clientId"
                         params={{ clientId: c.id }}
                         className="flex items-center gap-2 font-medium text-foreground hover:text-primary"
+                        onClick={(e) => e.stopPropagation()}
                       >
                         <Icon className="h-4 w-4 text-muted-foreground" />
                         {c.name}
@@ -144,7 +150,7 @@ function ClientsList() {
                     </td>
                     <td className="px-4 py-3 text-muted-foreground">{c.num_units ?? "—"}</td>
                     <td className="px-4 py-3 text-muted-foreground">{formatDate(c.created_at)}</td>
-                    <td className="px-4 py-3 text-right">
+                    <td className="px-4 py-3 text-right" onClick={(e) => e.stopPropagation()}>
                       <Button
                         size="icon"
                         variant="ghost"