feat(claims): provider cell drillable to /providers?provider=NPI

src/pages/Claims.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { Search, X } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import {
@@ -29,6 +29,7 @@ import { Pagination } from "@/components/ui/pagination";
 import { PageHeader } from "@/components/PageHeader";
 import { useClaims } from "@/hooks/useClaims";
 import { useDrawerUrlState } from "@/hooks/useDrawerUrlState";
+import { DrillableCell } from "@/components/drill/DrillableCell";
 import { useTailStream } from "@/hooks/useTailStream";
 import { useMergedTail } from "@/hooks/useMergedTail";
 import { TailStatusPill } from "@/components/TailStatusPill";
@@ -78,6 +79,7 @@ export function Claims() {
   // using a separate `?order=` param.
   // -------------------------------------------------------------------------
   const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
 
   const rawStatus = searchParams.get("status");
   const status: ClaimStatus | typeof ALL =
@@ -366,10 +368,27 @@ export function Claims() {
                         </TableCell>
                         <TableCell className="font-medium text-[13px]">{c.patientName}</TableCell>
                         <TableCell>
-                          <div className="text-[13px]">{provider?.name ?? "Unknown"}</div>
-                          <div className="mono text-[10.5px] text-muted-foreground">
-                            {c.providerNpi}
-                          </div>
+                          <DrillableCell
+                            ariaLabel={`View provider ${provider?.name ?? c.providerNpi}`}
+                            onClick={() =>
+                              navigate(
+                                `/providers?provider=${encodeURIComponent(c.providerNpi)}`,
+                              )
+                            }
+                          >
+                            {/*
+                              DrillableCell renders an inline-flex button,
+                              so the two stacked lines would otherwise land
+                              side-by-side. The flex-col wrapper preserves
+                              the original "name on top, NPI below" layout.
+                            */}
+                            <div className="flex flex-col items-start">
+                              <div className="text-[13px]">{provider?.name ?? "Unknown"}</div>
+                              <div className="mono text-[10.5px] text-muted-foreground">
+                                {c.providerNpi}
+                              </div>
+                            </div>
+                          </DrillableCell>
                         </TableCell>
                         <TableCell className="text-muted-foreground text-[13px]">
                           {c.payerName}