updated the pagination

src/components/pages/dashboard/adminDashboard/activityLog/Activities.tsx

 "use client";
 import TableHeader from '@/components/molecules/TableHeader';
 import CustomTable from '@/components/organism/Table';
-import { User, Lock, ArrowUp, ArrowDown } from '@wandersonalwes/iconsax-react';
-import React, { useMemo } from 'react';
-import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, ColumnDef } from '@tanstack/react-table';
-import { Pagination, Box } from '@mui/material';
-import { TransactionStatusProps } from '../transaction/TransactionTable';
-import { StatusOptions } from '@/types/config';
 import { useGetAllActivityQuery } from '@/services/notificationApi';
+import { StatusOptions } from '@/types/config';
 import { ActivityProps } from '@/types/notification';
+import { Box, Pagination } from '@mui/material';
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import { ArrowDown, ArrowUp } from '@wandersonalwes/iconsax-react';
+import React, { useMemo } from 'react';
+import { TransactionStatusProps } from '../transaction/TransactionTable';
 
 
 
@@ -28,7 +28,7 @@ export default function Activities() {
 
 
     const [search, setSearch] = React.useState("");
-    const [page, setPage] = React.useState(1);
+    const [pageIndex, setPageIndex] = React.useState(1);
     const [status, setStatus] = React.useState<TransactionStatusProps | undefined>();
     const [pageSize, setPageSize] = React.useState(10);
     const [activityType, setActivityType] = React.useState("");
@@ -36,13 +36,13 @@ export default function Activities() {
     // const [download, { isLoading: downloading }] = useStartDownloadMutation();
     const queryArgs = useMemo(
         () => ({
-            page,
-            per_page: pageSize,
+            pageIndex: pageIndex,
+            pageSize: pageSize,
             search: search || "",
             activity_type: activityType,
             status
         }),
-        [page, pageSize, search, status, activityType]
+        [pageIndex, pageSize, search, status, activityType]
     );
 
 
@@ -169,7 +169,7 @@ export default function Activities() {
             />
 
             <CustomTable
-                key={`${page}-${pageSize}-${search}-${activityType}`}
+                key={`${pageIndex}-${pageSize}-${search}-${activityType}`}
                 table={table}
                 loading={isLoading}
             />
@@ -190,8 +190,8 @@ export default function Activities() {
                     </select>
                 </div>
                 <Pagination count={data?.data?.pagination?.total_pages || 1}
-                    page={page}
-                    onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
+                    page={pageIndex}
+                    onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
             </div>
         </div>
     );

src/components/pages/dashboard/adminDashboard/pages/index.tsx

@@ -16,11 +16,11 @@ export default function GeneralPageLiting() {
     const dispatch = useAppDispatch();
     const [search, setSearch] = useState("");
     const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
-    const [page, setPage] = useState(1);
+    const [pageIndex, setPageIndex] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const { data, isLoading: loadingPages } = useGetAllPageQuery({
-        page,
-        per_page: pageSize,
+        pageIndex: pageIndex,
+        pageSize: pageSize,
         search: search || ""
     });
     const [deletePage, { isLoading: deleting }] = useDeletePageByIdMutation();
@@ -138,8 +138,8 @@ export default function GeneralPageLiting() {
                         </select>
                     </div>
                     <Pagination count={data?.data?.pagination?.total_pages || 1}
-                        page={page}
-                        onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
+                        page={pageIndex}
+                        onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
                 </div>
             </div>
         </section>

src/components/pages/dashboard/adminDashboard/players/index.tsx

@@ -23,12 +23,12 @@ export default function PlayerListing() {
     const dispatch = useAppDispatch();
     const [search, setSearch] = useState("");
     const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
-    const [page, setPage] = useState(1);
+    const [pageIndex, setPageIndex] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [currentTab, setCurrentTab] = React.useState("");
     const { data, isLoading: loadingPlayer } = useGetAllPlayerQuery({
-        page,
-        per_page: pageSize,
+        pageIndex: pageIndex,
+        pageSize: pageSize,
         search: search || "",
         status: currentTab || ""
     });
@@ -199,17 +199,10 @@ export default function PlayerListing() {
         columns,
         state: {
             sorting,
-            pagination: {
-                pageIndex: page - 1,
-                pageSize: pageSize,
-            },
+            
         },
         onSortingChange: setSorting,
-        onPaginationChange: (updater) => {
-            const newState = typeof updater === "function" ? updater({ pageIndex: page - 1, pageSize }) : updater;
-            setPage(newState.pageIndex + 1);
-            setPageSize(newState.pageSize);
-        },
+       
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
@@ -287,8 +280,8 @@ export default function PlayerListing() {
                         </select>
                     </div>
                     <Pagination count={data?.data?.pagination?.total_pages || 1}
-                        page={page}
-                        onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
+                        page={pageIndex}
+                        onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
                 </div>
             </div>
         </section>

src/components/pages/dashboard/adminDashboard/transaction/TransactionTable.tsx

@@ -30,7 +30,7 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
     const dispatch = useAppDispatch();
 
     const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
-    const [page, setPage] = useState(1);
+    const [pageIndex, setPageIndex] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [rowSelection, setRowSelection] = useState({});
     const [status, setStatus] = React.useState<TransactionStatusProps | undefined>();
@@ -43,7 +43,7 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
 
     const queryArgs = useMemo(
         () => ({
-            page,
+            pageIndex,
             per_page: pageSize,
             search: search || "",
             game_id,
@@ -54,7 +54,7 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
             start_date: customRange.startDate,
             end_date: customRange.endDate
         }),
-        [page, pageSize, search, game_id, user_id, status, selectedGame, selectedTransactionType, customRange]
+        [pageIndex, pageSize, search, game_id, user_id, status, selectedGame, selectedTransactionType, customRange]
     );
 
     const { data, isLoading: loadingTransaction } = useGetAllTransactionQuery(queryArgs);
@@ -223,7 +223,7 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
 
             <>
                 <CustomTable
-                    key={`${page}-${pageSize}-${search}-${game_id}-${user_id}`}
+                    key={`${pageIndex}-${pageSize}-${search}-${game_id}-${user_id}`}
                     table={table} loading={loadingTransaction} />
 
                 <div className="flex flex-col md:flex-row justify-between items-start md:items-center mt-4 px-8 py-6 gap-4">
@@ -242,8 +242,8 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
                         </select>
                     </div>
                     <Pagination count={data?.data?.pagination?.total_pages || 1}
-                        page={page}
-                        onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
+                        page={pageIndex}
+                        onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
                 </div>
             </>
         </div>

src/components/pages/dashboard/userDashboard/depositHistory/index.tsx

@@ -5,7 +5,7 @@ import { useGetAllDepositQuery } from '@/services/transaction';
 import { SingleDepositProps } from '@/types/transaction';
 import { Pagination } from '@mui/material';
 import { ColumnDef, getCoreRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
-import React, { useState } from 'react'
+import { useState } from 'react';
 
 export default function DepositHistoryPage(
   { currentFilter,
@@ -15,13 +15,13 @@ export default function DepositHistoryPage(
       currentFilter: number | null;
       customRange: { startDate: string | null, endDate: string | null }
     }) {
-  const [page, setPage] = useState(1);
+  const [pageIndex, setPageIndex] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const { data, isLoading } = useGetAllDepositQuery({
     days: currentFilter,
     customRange,
-    page,
-    per_page: pageSize
+    pageIndex,
+    pageSize
   });
   const columns: ColumnDef<SingleDepositProps>[] = [
     {
@@ -77,8 +77,8 @@ export default function DepositHistoryPage(
       <div className="flex flex-col md:flex-row justify-between items-start md:items-center mt-4 px-8 py-6 gap-4">
 
         <Pagination count={data?.data?.pagination?.total_pages || 1}
-          page={page}
-          onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
+          page={pageIndex}
+          onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
         <div>
           <span>Row per page:</span>
           <select

src/components/pages/dashboard/userDashboard/withdrawlHistory/index.tsx

@@ -13,11 +13,11 @@ export default function WithdrawnHistoryPage({ currentFilter,
         currentFilter: number | null;
         customRange: { startDate: string | null, endDate: string | null }
     }) {
-    const [page, setPage] = useState(1);
+    const [pageIndex, setPageIndex] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const { data, isLoading } = useGetAllWithdrawlQuery({
-        page,
-        per_page: pageSize,
+        pageIndex,
+        pageSize,
         days:currentFilter,
         customRange
     });
@@ -73,8 +73,8 @@ export default function WithdrawnHistoryPage({ currentFilter,
             <CustomTable table={table} loading={isLoading} emptyMessage="You haven't deposite yet!" />
             {data && data?.data?.data.length > 5 ? <div className="flex flex-col md:flex-row justify-between items-start md:items-center mt-4 px-8 py-6 gap-4">
                 <Pagination count={data?.data?.pagination?.total_pages || 1}
-                    page={page}
-                    onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
+                    page={pageIndex}
+                    onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
                 <div>
                     <span>Row per page:</span>
                     <select

src/services/notificationApi.tsx

+import { GlobalResponse, QueryParams } from "@/types/config";
+import { ActivityResponse, NotificationResponse } from "@/types/notification";
 import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQuery } from "./baseQuery";
-import { ActivityResponse, NotificationResponse } from "@/types/notification";
-import { GlobalResponse, QueryParams } from "@/types/config";
 
 export const notificationApi = createApi({
     reducerPath: "notificationApi",
@@ -9,11 +9,11 @@ export const notificationApi = createApi({
     tagTypes: ['Notification', "Activity"],
     endpoints: (builder) => ({
         getAllNotification: builder.query<NotificationResponse, QueryParams>({
-            query: ({ search, page, per_page }) => {
+            query: ({ search, pageIndex, pageSize }) => {
                 const params = new URLSearchParams();
                 if (search) params.append('search', search);
-                if (page) params.append('page', page.toString());
-                if (per_page) params.append('page_size', per_page.toString());
+                if (pageIndex) params.append('page', pageIndex.toString());
+                if (pageSize) params.append('page_size', pageSize.toString());
                 const queryString = params.toString();
                 return {
                     url: `/api/admin/notifications${queryString ? `?${queryString}` : ''}`,
@@ -37,11 +37,11 @@ export const notificationApi = createApi({
             invalidatesTags: ["Notification"]
         }),
         getAllActivity: builder.query<ActivityResponse, { activity_type: string, status?: string } & QueryParams>({
-            query: ({ search, page, per_page, activity_type, status }) => {
+            query: ({ search, pageIndex, pageSize, activity_type, status }) => {
                 const params = new URLSearchParams();
                 if (search) params.append('search', search);
-                if (page) params.append('page', page.toString());
-                if (per_page) params.append('page_size', per_page.toString());
+                if (pageIndex) params.append('page', pageIndex.toString());
+                if (pageSize) params.append('page_size', pageSize.toString());
                 if (activity_type) params.append('type', activity_type.toString());
                 if (status) params.append('status', status.toString());
                 const queryString = params.toString();

src/services/playerApi.ts

@@ -26,11 +26,11 @@ export const playerApi = createApi({
 
         // GET ALL Players
         getAllPlayer: builder.query<PlayerListResponse, QueryParams>({
-            query: ({ search, page, per_page, status }) => {
+            query: ({ search, pageIndex, pageSize, status }) => {
                 const params = new URLSearchParams();
                 if (search) params.append("search", search);
-                if (page) params.append("page", page.toString());
-                if (per_page) params.append("page_size", per_page.toString());
+                if (pageIndex) params.append("page", pageIndex.toString());
+                if (pageSize) params.append("page_size", pageSize.toString());
                 if (status) params.append("status", status.toString());
                 const queryString = params.toString();
                 return {

src/services/transaction.ts

@@ -18,11 +18,11 @@ export const transactionApi = createApi({
             invalidatesTags: ["Deposit"]
         }),
         getAllDeposit: builder.query<DepositListProps, QueryParams & { days: number | null; customRange: { startDate: string | null; endDate: string | null } }>({
-            query: ({ search, page, per_page, days, customRange }) => {
+            query: ({ search, pageIndex, pageSize, days, customRange }) => {
                 const params = new URLSearchParams();
                 if (search) params.append('search', search);
-                if (page) params.append('page', page.toString());
-                if (per_page) params.append('page_size', per_page.toString());
+                if (pageIndex) params.append('page', pageIndex.toString());
+                if (pageSize) params.append('page_size', pageSize.toString());
                 if (days) params.append('days', days.toString());
                 if (customRange.startDate) params.append('start_date', customRange.startDate.toString());
                 if (customRange.endDate) params.append('end_date', customRange.endDate.toString());
@@ -43,11 +43,11 @@ export const transactionApi = createApi({
             invalidatesTags: ["Withdrawl"]
         }),
         getAllWithdrawl: builder.query<DepositListProps, QueryParams & { days: number | null; customRange: { startDate: string | null; endDate: string | null } }>({
-            query: ({ search, page, per_page, days, customRange }) => {
+            query: ({ search, pageIndex, pageSize, days, customRange }) => {
                 const params = new URLSearchParams();
                 if (search) params.append('search', search);
-                if (page) params.append('page', page.toString());
-                if (per_page) params.append('page_size', per_page.toString());
+                if (pageIndex) params.append('page', pageIndex.toString());
+                if (pageSize) params.append('page_size', pageSize.toString());
                 if (days) params.append('days', days.toString());
                 if (customRange.startDate) params.append('start_date', customRange.startDate.toString());
                 if (customRange.endDate) params.append('end_date', customRange.endDate.toString());
@@ -61,11 +61,11 @@ export const transactionApi = createApi({
             providesTags: ["Withdrawl"]
         }),
         getAllTransaction: builder.query<DepositListProps, QueryParams & { status?: TransactionStatusProps; user_id?: string | number; game_id?: string | number, selectedGame?: string; selectedTransactionType?: string, start_date?: string; end_date?: string; }>({
-            query: ({ search, page, per_page, user_id, game_id, status, selectedGame, selectedTransactionType, start_date, end_date }) => {
+            query: ({ search, pageIndex, pageSize, user_id, game_id, status, selectedGame, selectedTransactionType, start_date, end_date }) => {
                 const params = new URLSearchParams();
                 if (search) params.append('search', search);
-                if (page) params.append('page', page.toString());
-                if (per_page) params.append('page_size', per_page.toString());
+                if (pageIndex) params.append('page', pageIndex.toString());
+                if (pageSize) params.append('page_size', pageSize.toString());
                 if (user_id) params.append('user', user_id.toString());
                 if (game_id) params.append('game', game_id.toString());
                 if (status) params.append('status', status.toString());

src/types/config.ts

@@ -34,8 +34,8 @@ export interface GlobalResponse {
 }
 
 export interface QueryParams {
-    page?: number;
-    per_page?: number;
+    pageIndex?: number;
+    pageSize?: number;
     search?: string;
     status?: string;
 }