feat(pagination): paginate activity and progress lists

frontend/src/components/Pagination.tsx

@@ -0,0 +1,51 @@
+interface PaginationProps {
+  page: number;
+  previousPage?: number;
+  nextPage?: number;
+  total?: number;
+  limit?: number;
+  onPageChange: (page: number) => void;
+}
+
+export function Pagination({
+  page,
+  previousPage,
+  nextPage,
+  total,
+  limit,
+  onPageChange,
+}: PaginationProps) {
+  if (!previousPage && !nextPage) {
+    return null;
+  }
+
+  const totalPages = total && limit ? Math.ceil(total / limit) : undefined;
+
+  return (
+    <div className="mt-4 flex w-full items-center justify-center gap-4 text-content">
+      {previousPage && previousPage > 0 ? (
+        <button
+          type="button"
+          onClick={() => onPageChange(previousPage)}
+          className="w-24 rounded bg-surface p-2 text-center text-sm font-medium shadow-lg hover:bg-surface-strong focus:outline-none"
+        >
+          ◄
+        </button>
+      ) : null}
+      {totalPages ? (
+        <span className="text-sm text-content-muted">
+          Page {page} of {totalPages}
+        </span>
+      ) : null}
+      {nextPage && nextPage > 0 ? (
+        <button
+          type="button"
+          onClick={() => onPageChange(nextPage)}
+          className="w-24 rounded bg-surface p-2 text-center text-sm font-medium shadow-lg hover:bg-surface-strong focus:outline-none"
+        >
+          ►
+        </button>
+      ) : null}
+    </div>
+  );
+}

frontend/src/components/index.ts

@@ -18,6 +18,7 @@ export {
   InlineLoader,
 } from './Skeleton';
 export { LoadingState } from './LoadingState';
+export { Pagination } from './Pagination';
 
 // Field components
 export { Field, FieldLabel, FieldValue, FieldActions } from './Field';

frontend/src/generated/model/activityResponse.ts

@@ -9,4 +9,9 @@ import type { Activity } from './activity';
 
 export interface ActivityResponse {
   activities: Activity[];
+  page: number;
+  limit: number;
+  next_page?: number;
+  previous_page?: number;
+  total: number;
 }

frontend/src/generated/model/getActivityParams.ts

@@ -9,6 +9,6 @@
 export type GetActivityParams = {
 doc_filter?: boolean;
 document_id?: string;
-offset?: number;
+page?: number;
 limit?: number;
 };

frontend/src/pages/ActivityPage.tsx

@@ -1,12 +1,29 @@
-import { Link } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
 import { useGetActivity } from '../generated/anthoLumeAPIV1';
 import type { Activity } from '../generated/model';
+import { Pagination } from '../components';
 import { Table, type Column } from '../components/Table';
 import { formatDuration } from '../utils/formatters';
 
 export default function ActivityPage() {
-  const { data, isLoading } = useGetActivity({ offset: 0, limit: 100 });
-  const activities = data?.status === 200 ? data.data.activities : [];
+  const [searchParams] = useSearchParams();
+  const documentID = searchParams.get('document') || undefined;
+  const [page, setPage] = useState(1);
+  const limit = 25;
+
+  useEffect(() => {
+    setPage(1);
+  }, [documentID]);
+
+  const { data, isLoading } = useGetActivity({
+    doc_filter: Boolean(documentID),
+    document_id: documentID,
+    page,
+    limit,
+  });
+  const response = data?.status === 200 ? data.data : undefined;
+  const activities = response?.activities ?? [];
 
   const columns: Column<Activity>[] = [
     {
@@ -35,5 +52,17 @@ export default function ActivityPage() {
     },
   ];
 
-  return <Table columns={columns} data={activities || []} loading={isLoading} />;
+  return (
+    <div className="flex flex-col gap-4">
+      <Table columns={columns} data={activities} loading={isLoading} />
+      <Pagination
+        page={page}
+        previousPage={response?.previous_page}
+        nextPage={response?.next_page}
+        total={response?.total}
+        limit={limit}
+        onPageChange={setPage}
+      />
+    </div>
+  );
 }

frontend/src/pages/DocumentsPage.tsx

@@ -3,7 +3,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { useGetDocuments, useCreateDocument } from '../generated/anthoLumeAPIV1';
 import type { Document, DocumentsResponse } from '../generated/model';
 import { ActivityIcon, DownloadIcon, Search2Icon, UploadIcon } from '../icons';
-import { LoadingState } from '../components';
+import { LoadingState, Pagination } from '../components';
 import { useToasts } from '../components/ToastContext';
 import { formatDuration } from '../utils/formatters';
 import { useDebounce } from '../hooks/useDebounce';
@@ -272,24 +272,14 @@ export default function DocumentsPage() {
         </div>
       )}
 
-      <div className="mt-4 flex w-full justify-center gap-4 text-content">
-        {previousPage && previousPage > 0 && (
-          <button
-            onClick={() => setPage(page - 1)}
-            className="w-24 rounded bg-surface p-2 text-center text-sm font-medium shadow-lg hover:bg-surface-strong focus:outline-none"
-          >
-            ◄
-          </button>
-        )}
-        {nextPage && nextPage > 0 && (
-          <button
-            onClick={() => setPage(page + 1)}
-            className="w-24 rounded bg-surface p-2 text-center text-sm font-medium shadow-lg hover:bg-surface-strong focus:outline-none"
-          >
-            ►
-          </button>
-        )}
-      </div>
+      <Pagination
+        page={page}
+        previousPage={previousPage}
+        nextPage={nextPage}
+        total={(data?.data as DocumentsResponse | undefined)?.total}
+        limit={limit}
+        onPageChange={setPage}
+      />
 
       <div className="fixed bottom-6 right-6 flex items-center justify-center rounded-full">
         <input

frontend/src/pages/ProgressPage.tsx

@@ -1,11 +1,16 @@
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useGetProgressList } from '../generated/anthoLumeAPIV1';
 import type { Progress } from '../generated/model';
+import { Pagination } from '../components';
 import { Table, type Column } from '../components/Table';
 
 export default function ProgressPage() {
-  const { data, isLoading } = useGetProgressList({ page: 1, limit: 15 });
-  const progress = data?.status === 200 ? (data.data.progress ?? []) : [];
+  const [page, setPage] = useState(1);
+  const limit = 15;
+  const { data, isLoading } = useGetProgressList({ page, limit });
+  const response = data?.status === 200 ? data.data : undefined;
+  const progress = response?.progress ?? [];
 
   const columns: Column<Progress>[] = [
     {
@@ -35,5 +40,17 @@ export default function ProgressPage() {
     },
   ];
 
-  return <Table columns={columns} data={progress || []} loading={isLoading} />;
+  return (
+    <div className="flex flex-col gap-4">
+      <Table columns={columns} data={progress} loading={isLoading} />
+      <Pagination
+        page={page}
+        previousPage={response?.previous_page}
+        nextPage={response?.next_page}
+        total={response?.total}
+        limit={limit}
+        onPageChange={setPage}
+      />
+    </div>
+  );
 }