Added sortable headers

X-Lovable-Edit-ID: edt-3f850e13-7287-4f9b-aed2-3ac7f54c31e1
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/cases.index.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { ProtectedLayout } from "@/components/protected-layout";
 import { PageContainer, PageHeader } from "@/components/app-shell";
 import { Button } from "@/components/ui/button";
@@ -8,12 +8,15 @@ import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { supabase } from "@/integrations/supabase/client";
-import { Plus, Search, Archive, ArchiveRestore } from "lucide-react";
+import { Plus, Search, Archive, ArchiveRestore, ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
 import { formatDate, statusBadgeClass } from "@/lib/format";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { setArchived } from "@/lib/archive";
 import { NewCaseDialog } from "@/components/cases/new-case-dialog";
 
+type SortKey = "title" | "client" | "status" | "attorney" | "opened_at";
+type SortDir = "asc" | "desc";
+
 export const Route = createFileRoute("/cases/")({
   component: () => (
     <ProtectedLayout>
@@ -28,6 +31,8 @@ function CasesList() {
   const [statusFilter, setStatusFilter] = useState<string>("all");
   const [view, setView] = useState<"active" | "archived">("active");
   const [newOpen, setNewOpen] = useState(false);
+  const [sortKey, setSortKey] = useState<SortKey>("opened_at");
+  const [sortDir, setSortDir] = useState<SortDir>("desc");
 
   const load = async () => {
     const { data } = await supabase
@@ -49,6 +54,37 @@ function CasesList() {
     const okQ = [c.title, c.case_number, c.client?.name].filter(Boolean).join(" ").toLowerCase().includes(q.toLowerCase());
     return okStatus && okQ;
   });
+
+  const sorted = useMemo(() => {
+    const getVal = (c: any): string => {
+      switch (sortKey) {
+        case "title": return (c.title ?? "").toLowerCase();
+        case "client": return (c.client?.name ?? "").toLowerCase();
+        case "status": return (c.status ?? "").toLowerCase();
+        case "attorney": return (c.assignee?.full_name || c.assignee?.email || "").toLowerCase();
+        case "opened_at": return c.opened_at ?? "";
+      }
+    };
+    const arr = [...filtered];
+    arr.sort((a, b) => {
+      const av = getVal(a);
+      const bv = getVal(b);
+      if (av < bv) return sortDir === "asc" ? -1 : 1;
+      if (av > bv) return sortDir === "asc" ? 1 : -1;
+      return 0;
+    });
+    return arr;
+  }, [filtered, sortKey, sortDir]);
+
+  const toggleSort = (key: SortKey) => {
+    if (sortKey === key) {
+      setSortDir(sortDir === "asc" ? "desc" : "asc");
+    } else {
+      setSortKey(key);
+      setSortDir(key === "opened_at" ? "desc" : "asc");
+    }
+  };
+
   const archivedCount = cases.filter((c) => c.archived_at).length;
   const activeCount = cases.length - archivedCount;
 
@@ -56,6 +92,23 @@ function CasesList() {
     if (await setArchived("cases", id, archived)) load();
   };
 
+  const SortHeader = ({ label, k, align = "left" }: { label: string; k: SortKey; align?: "left" | "right" }) => {
+    const active = sortKey === k;
+    const Icon = !active ? ArrowUpDown : sortDir === "asc" ? ArrowUp : ArrowDown;
+    return (
+      <th className={`px-4 py-3 font-medium text-${align}`}>
+        <button
+          type="button"
+          onClick={() => toggleSort(k)}
+          className={`inline-flex items-center gap-1 hover:text-foreground transition-colors ${active ? "text-foreground" : ""}`}
+        >
+          {label}
+          <Icon className="h-3 w-3" />
+        </button>
+      </th>
+    );
+  };
+
   return (
     <PageContainer>
       <PageHeader
@@ -99,21 +152,21 @@ function CasesList() {
           <table className="w-full text-sm">
             <thead className="bg-muted/50 text-xs uppercase tracking-wider text-muted-foreground">
               <tr>
-                <th className="text-left px-4 py-3 font-medium">Case</th>
-                <th className="text-left px-4 py-3 font-medium">Client</th>
-                <th className="text-left px-4 py-3 font-medium">Status</th>
-                <th className="text-left px-4 py-3 font-medium">Attorney</th>
-                <th className="text-left px-4 py-3 font-medium">Opened</th>
+                <SortHeader label="Case" k="title" />
+                <SortHeader label="Client" k="client" />
+                <SortHeader label="Status" k="status" />
+                <SortHeader label="Attorney" k="attorney" />
+                <SortHeader label="Opened" k="opened_at" />
                 <th className="text-right px-4 py-3 font-medium w-12"></th>
               </tr>
             </thead>
             <tbody>
-              {filtered.length === 0 && (
+              {sorted.length === 0 && (
                 <tr><td colSpan={6} className="text-center py-12 text-muted-foreground">
                   {view === "archived" ? "No archived cases." : "No cases."}
                 </td></tr>
               )}
-              {filtered.map((c) => (
+              {sorted.map((c) => (
                 <tr key={c.id} className="border-t hover:bg-muted/30">
                   <td className="px-4 py-3">
                     <Link to="/cases/$caseId" params={{ caseId: c.id }} className="font-medium hover:text-primary">