Implement pagination for members reports and update UI components

- Added a new `setPagination` action to manage pagination state in the members reports slice.
- Updated the members reports page to display the total number of members in the header.
- Enhanced the members reports table to handle pagination changes, ensuring data is fetched correctly based on the current page and page size.

worklenz-frontend/src/features/reporting/membersReports/membersReportsSlice.ts

@@ -107,6 +107,10 @@ const membersReportsSlice = createSlice({
     setDateRange: (state, action) => {
       state.dateRange = action.payload;
     },
+    setPagination: (state, action) => {
+      state.index = action.payload.index;
+      state.pageSize = action.payload.pageSize;
+    },
   },
   extraReducers: builder => {
     builder
@@ -139,5 +143,6 @@ export const {
   setOrder,
   setDuration,
   setDateRange,
+  setPagination,
 } = membersReportsSlice.actions;
 export default membersReportsSlice.reducer;

worklenz-frontend/src/pages/reporting/members-reports/members-reports-table/members-reports-table.tsx

@@ -6,9 +6,14 @@ import { useAppDispatch } from '@/hooks/useAppDispatch';
 import CustomTableTitle from '@/components/CustomTableTitle';
 import TasksProgressCell from './tablesCells/tasksProgressCell/TasksProgressCell';
 import MemberCell from './tablesCells/memberCell/MemberCell';
-import { fetchMembersData, toggleMembersReportsDrawer } from '@/features/reporting/membersReports/membersReportsSlice';
+import {
+  fetchMembersData,
+  setPagination,
+  toggleMembersReportsDrawer,
+} from '@/features/reporting/membersReports/membersReportsSlice';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import MembersReportsDrawer from '@/features/reporting/membersReports/membersReportsDrawer/members-reports-drawer';
+import { PaginationConfig } from 'antd/es/pagination';
 
 const MembersReportsTable = () => {
   const { t } = useTranslation('reporting-members');
@@ -16,7 +21,9 @@ const MembersReportsTable = () => {
 
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const { duration, dateRange } = useAppSelector(state => state.reportingReducer);
-  const { membersList, isLoading, total, archived, searchQuery } = useAppSelector(state => state.membersReportsReducer);
+  const { membersList, isLoading, total, archived, searchQuery, index, pageSize } = useAppSelector(
+    state => state.membersReportsReducer
+  );
 
   // function to handle drawer toggle
   const handleDrawerOpen = (id: string) => {
@@ -24,6 +31,10 @@ const MembersReportsTable = () => {
     dispatch(toggleMembersReportsDrawer());
   };
 
+  const handleOnChange = (pagination: any, filters: any, sorter: any, extra: any) => {
+    dispatch(setPagination({ index: pagination.current, pageSize: pagination.pageSize }));
+  };
+
   const columns: TableColumnsType = [
     {
       key: 'member',
@@ -40,7 +51,7 @@ const MembersReportsTable = () => {
       title: <CustomTableTitle title={t('tasksProgressColumn')} />,
       render: record => {
         const { todo, doing, done } = record.tasks_stat;
-        return (todo || doing || done) ? <TasksProgressCell tasksStat={record.tasks_stat} /> : '-';
+        return todo || doing || done ? <TasksProgressCell tasksStat={record.tasks_stat} /> : '-';
       },
     },
     {
@@ -95,7 +106,7 @@ const MembersReportsTable = () => {
 
   useEffect(() => {
     if (!isLoading) dispatch(fetchMembersData({ duration, dateRange }));
-  }, [dispatch, archived, searchQuery, dateRange]);
+  }, [dispatch, archived, searchQuery, dateRange, index, pageSize]);
 
   return (
     <ConfigProvider
@@ -113,6 +124,7 @@ const MembersReportsTable = () => {
         dataSource={membersList}
         rowKey={record => record.id}
         pagination={{ showSizeChanger: true, defaultPageSize: 10, total: total }}
+        onChange={(pagination, filters, sorter, extra) => handleOnChange(pagination, filters, sorter, extra)}
         scroll={{ x: 'max-content' }}
         loading={isLoading}
         onRow={record => {

worklenz-frontend/src/pages/reporting/members-reports/members-reports.tsx

@@ -25,9 +25,7 @@ const MembersReports = () => {
   useDocumentTitle('Reporting - Members');
   const currentSession = useAuthService().getCurrentSession();
 
-  const { archived, searchQuery } = useAppSelector(
-    state => state.membersReportsReducer,
-  );
+  const { archived, searchQuery, total } = useAppSelector(state => state.membersReportsReducer);
   const { duration, dateRange } = useAppSelector(state => state.reportingReducer);
 
 
@@ -44,7 +42,7 @@ const MembersReports = () => {
   return (
     <Flex vertical>
       <CustomPageHeader
-        title={`Members`}
+        title={`Members (${total})`}
         children={
           <Space>
             <Button>