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';