Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/collections.index.tsx

@@ -121,6 +121,47 @@ function CollectionsIndexPage() {
     );
   });
 
+  const sorted = useMemo(() => {
+    const getVal = (r: any): string | number => {
+      switch (sortKey) {
+        case "homeowner":
+          return `${r.homeowner?.last_name ?? ""} ${r.homeowner?.first_name ?? ""}`.toLowerCase();
+        case "case":
+          return (r.case?.client?.name ?? "").toLowerCase();
+        case "stage":
+          return (stages.find((s) => s.key === r.current_stage)?.label ?? "").toLowerCase();
+        case "tasks":
+          return openTaskCounts[r.id] ?? 0;
+        case "opened":
+          return r.opened_at ? new Date(r.opened_at).getTime() : 0;
+        case "balance":
+          return balances[r.id] ?? 0;
+      }
+    };
+    return [...filtered].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;
+    });
+  }, [filtered, sortKey, sortDir, balances, openTaskCounts, stages]);
+
+  const SortHeader = ({ k, label, className }: { k: typeof sortKey; label: string; className?: string }) => {
+    const Icon = sortKey !== k ? ArrowUpDown : sortDir === "asc" ? ArrowUp : ArrowDown;
+    return (
+      <TableHead className={className}>
+        <button
+          onClick={() => toggleSort(k)}
+          className="inline-flex items-center gap-1 hover:text-foreground"
+        >
+          {label}
+          <Icon className={`h-3 w-3 ${sortKey === k ? "" : "opacity-50"}`} />
+        </button>
+      </TableHead>
+    );
+  };
+
   return (
     <ProtectedLayout>
       <PageContainer>