Added pagination (150/page)

X-Lovable-Edit-ID: edt-0ffb0166-a097-4e08-bfd8-c5bd03a05535
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/cases.index.tsx

@@ -44,6 +44,8 @@ function CasesList() {
   const [assignAttorney, setAssignAttorney] = useState<string>("");
   const [assignClient, setAssignClient] = useState<string>("");
   const [busy, setBusy] = useState(false);
+  const [page, setPage] = useState(1);
+  const PAGE_SIZE = 150;
 
   const load = async () => {
     const { data: caseRows } = await supabase
@@ -157,9 +159,16 @@ function CasesList() {
     if (await setArchived("cases", id, archived)) load();
   };
 
+  // Pagination — reset when filters/view change.
+  useEffect(() => { setPage(1); }, [view, q, statusFilter, sortKey, sortDir]);
+  const totalPages = Math.max(1, Math.ceil(sorted.length / PAGE_SIZE));
+  const currentPage = Math.min(page, totalPages);
+  const pageStart = (currentPage - 1) * PAGE_SIZE;
+  const paged = useMemo(() => sorted.slice(pageStart, pageStart + PAGE_SIZE), [sorted, pageStart]);
+
   // Selection helpers — clear when switching views.
   useEffect(() => { setSelected(new Set()); }, [view]);
-  const visibleIds = useMemo(() => sorted.map((c) => c.id), [sorted]);
+  const visibleIds = useMemo(() => paged.map((c) => c.id), [paged]);
   const allSelected = visibleIds.length > 0 && visibleIds.every((id) => selected.has(id));
   const someSelected = selected.size > 0 && !allSelected;
   const toggleAll = () => setSelected(allSelected ? new Set() : new Set(visibleIds));
@@ -373,7 +382,7 @@ function CasesList() {
                   {view === "archived" ? "No archived cases." : "No cases."}
                 </td></tr>
               )}
-              {sorted.map((c) => (
+              {paged.map((c) => (
                 <tr
                   key={c.id}
                   className="border-t hover:bg-muted/30 cursor-pointer transition-colors"
@@ -422,6 +431,23 @@ function CasesList() {
           </table>
         </CardContent>
       </Card>
+
+      {sorted.length > 0 && (
+        <div className="mt-3 flex items-center justify-between text-sm text-muted-foreground">
+          <div>
+            Showing {pageStart + 1}–{Math.min(pageStart + PAGE_SIZE, sorted.length)} of {sorted.length}
+          </div>
+          <div className="flex items-center gap-2">
+            <Button size="sm" variant="outline" disabled={currentPage <= 1} onClick={() => setPage(currentPage - 1)}>
+              Previous
+            </Button>
+            <span>Page {currentPage} of {totalPages}</span>
+            <Button size="sm" variant="outline" disabled={currentPage >= totalPages} onClick={() => setPage(currentPage + 1)}>
+              Next
+            </Button>
+          </div>
+        </div>
+      )}
     </PageContainer>
   );
 }