diff --git a/src/routes/cases.index.tsx b/src/routes/cases.index.tsx index 423c392..83b2713 100644 --- a/src/routes/cases.index.tsx +++ b/src/routes/cases.index.tsx @@ -44,6 +44,8 @@ function CasesList() { const [assignAttorney, setAssignAttorney] = useState(""); const [assignClient, setAssignClient] = useState(""); 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."} )} - {sorted.map((c) => ( + {paged.map((c) => ( + + {sorted.length > 0 && ( +
+
+ Showing {pageStart + 1}–{Math.min(pageStart + PAGE_SIZE, sorted.length)} of {sorted.length} +
+
+ + Page {currentPage} of {totalPages} + +
+
+ )} ); }