From 029dc9da8d76a1c90c642559e29bea711def9962 Mon Sep 17 00:00:00 2001
From: Dilmurod <dilmurod8829@gmail.com>
Date: Wed, 4 Jun 2025 16:32:31 +0500
Subject: [PATCH] Pagination added per page and filters

---
 src/API/LayoutApi/accounting.ts               |  39 +--
 src/API/LayoutApi/services.ts                 |   9 +-
 src/API/LayoutApi/statistic.ts                |  23 +-
 src/API/LayoutApi/tasks.ts                    |   2 +-
 src/API/LayoutApi/teams.ts                    |   6 +-
 src/API/auth/activate.ts                      |   1 -
 .../Accounting/AccountingCurrent.tsx          | 263 +++++++++--------
 .../Accounting/AccountingHistory.tsx          | 197 ++++++++-----
 src/Components/Accounting/AccountingLast.tsx  | 236 +++++++++++-----
 src/Components/Accounting/ConfirmedMonths.tsx | 102 ++++++-
 src/Components/CallRequests/Call.tsx          |  22 +-
 src/Components/Companies/Companies.tsx        |  22 +-
 src/Components/Companies/CompaniesEdit.tsx    |   2 +-
 src/Components/Customers/Customers.tsx        |  22 +-
 src/Components/Requests/Requests.tsx          |  21 +-
 src/Components/Services/Services.tsx          |  84 ++++--
 src/Components/Statistics/Statistic.tsx       | 264 ++++++++++++++++--
 src/Components/Statistics/StatisticTable.tsx  |  39 +--
 .../Statistics/StatisticTeamTable.tsx         |  37 +--
 .../Statistics/StatisticsSupportTable.tsx     |  39 +--
 src/Components/Tasks/AddTask.tsx              |   4 +-
 src/Components/Tasks/TaskModal.tsx            |  60 ++--
 src/Components/Tasks/Tasks.tsx                |  23 +-
 src/Components/Teams/TeamTable.tsx            |  33 +--
 src/Components/Teams/Teams.tsx                | 103 ++++++-
 src/Components/Updates/Update.tsx             |  19 +-
 src/Components/Users/UserEdit.tsx             |   2 +-
 src/Components/Users/Users.tsx                |  22 +-
 src/Hooks/Accounting/index.ts                 |  54 +++-
 src/Hooks/Services/index.ts                   |   7 +-
 src/Hooks/Stats/index.ts                      |  43 ++-
 src/Hooks/Teams/index.ts                      |  11 +-
 32 files changed, 1340 insertions(+), 471 deletions(-)

diff --git a/src/API/LayoutApi/accounting.ts b/src/API/LayoutApi/accounting.ts
index 8be40b5..6de7b00 100644
--- a/src/API/LayoutApi/accounting.ts
+++ b/src/API/LayoutApi/accounting.ts
@@ -1,18 +1,26 @@
-import { TAccountingConfirmedMonths } from "./../../types/Accounting/TAccounting";
-import {
-  TAccounting,
-  TAccountingHistory,
-} from "../../types/Accounting/TAccounting";
 import instance from "../api";
 
+export type TAccountingConfirmedMonthsParams = {
+  page?: number;
+  page_size?: number;
+};
+
 export type TAccountingGetParams = {
   month: string;
   search?: string;
   team?: string;
+  page?: number;
+  page_size?: number;
+  role?: number;
+  salary_type?: string;
 };
 export type TAccountingHistoryGetParams = {
   search?: string;
   team?: string;
+  page?: number;
+  page_size?: number;
+  role?: number;
+  salary_type?: string;
 };
 
 export const AccountingController = {
@@ -21,16 +29,16 @@ export const AccountingController = {
 
     if (!!filterObject.month) params.month = filterObject.month;
 
-    const { data } = await instance.get<TAccounting[]>(`/employees-salaries/`, {
+    const { data } = await instance.get(`/employees-salaries/`, {
       params,
     });
     return data;
   },
 
-  async confirmedMonths() {
-    const { data } = await instance.get<TAccountingConfirmedMonths[]>(
-      `/salaries-group/`
-    );
+  async confirmedMonths(filterObject: TAccountingConfirmedMonthsParams) {
+    const { data } = await instance.get(`/salaries-group/`, {
+      params: filterObject,
+    });
     return data;
   },
 
@@ -38,13 +46,12 @@ export const AccountingController = {
     const params = { ...filterObject };
     if (!!filterObject.search) params.search = filterObject.search;
     if (!!filterObject.team) params.team = filterObject.team;
+    if (!!filterObject.page) params.page = filterObject.page;
+    if (!!filterObject.team) params.page_size = filterObject.page_size;
 
-    const { data } = await instance.get<TAccountingHistory[]>(
-      `/employees-salaries-history/`,
-      {
-        params,
-      }
-    );
+    const { data } = await instance.get(`/employees-salaries-history/`, {
+      params,
+    });
     return data;
   },
 };
diff --git a/src/API/LayoutApi/services.ts b/src/API/LayoutApi/services.ts
index 273c868..decd224 100644
--- a/src/API/LayoutApi/services.ts
+++ b/src/API/LayoutApi/services.ts
@@ -12,8 +12,13 @@ export type TServicePostParams = {
 };
 
 export const serviceController = {
-  async read() {
-    const { data } = await instance.get<TService[]>(`services/`);
+  async read(page?: number, page_size?: number) {
+    const params: Record<string, number> = {};
+    if (page !== undefined) params.page = page;
+    if (page_size !== undefined) params.page_size = page_size;
+    const { data } = await instance.get(`services/`, {
+      params: { page, page_size },
+    });
     return data;
   },
 
diff --git a/src/API/LayoutApi/statistic.ts b/src/API/LayoutApi/statistic.ts
index 60ab01f..75a2bc3 100644
--- a/src/API/LayoutApi/statistic.ts
+++ b/src/API/LayoutApi/statistic.ts
@@ -14,15 +14,21 @@ export type TStatGetParams = {
   start_date?: string;
   end_date?: string;
   for_salary?: boolean;
+  page?: number;
+  page_size?: number;
 };
 
 export type TStatTeamGetParams = {
   search?: string;
   start_date?: string;
   end_date?: string;
+  page?: number;
+  page_size?: number;
 };
 
 export type TStatCreatorsGetParams = {
+  page?: number;
+  page_size?: number;
   start_date?: string;
   end_date?: string;
   search?: string;
@@ -45,7 +51,7 @@ export const statController = {
     if (!!filterObject.start_date) params.start_date = filterObject.start_date;
     if (!!filterObject.end_date) params.end_date = filterObject.end_date;
 
-    const { data } = await instance.get<TStat[]>(`stats/all-users/`, {
+    const { data } = await instance.get(`stats/all-users/`, {
       params,
     });
     return data;
@@ -58,7 +64,7 @@ export const statController = {
     if (!!filterObject.start_date) params.start_date = filterObject.start_date;
     if (!!filterObject.end_date) params.end_date = filterObject.end_date;
 
-    const { data } = await instance.get<TStatTeam[]>(`stats/all-teams/`, {
+    const { data } = await instance.get(`stats/all-teams/`, {
       params,
     });
     return data;
@@ -70,15 +76,15 @@ export const statController = {
     if (!!filterObject.start_date) params.start_date = filterObject.start_date;
     if (!!filterObject.end_date) params.end_date = filterObject.end_date;
     if (!!filterObject.search) params.search = filterObject.search;
+    if (!!filterObject.page) params.page = filterObject.page;
+    if (!!filterObject.page_size) params.page_size = filterObject.page_size;
 
-    const { data } = await instance.get<TStatCreators[]>(
-      `stats/task-creators/`,
-      {
-        params,
-      }
-    );
+    const { data } = await instance.get(`stats/task-creators/`, {
+      params,
+    });
     return data;
   },
+
   async cards(filterObject: TStatCreatorsGetParams) {
     const params = { ...filterObject };
 
@@ -90,6 +96,7 @@ export const statController = {
     });
     return data;
   },
+
   async teamChart(filterObject: TteamChartGetParams) {
     const params = { ...filterObject };
 
diff --git a/src/API/LayoutApi/tasks.ts b/src/API/LayoutApi/tasks.ts
index d5f023c..fc417e1 100644
--- a/src/API/LayoutApi/tasks.ts
+++ b/src/API/LayoutApi/tasks.ts
@@ -53,7 +53,7 @@ export const taskController = {
 
     if (!!filterObject.page && filterObject.page !== 0)
       params.page = filterObject.page;
-    params.page_size = isMobile ? 10 : 15;
+    params.page_size = filterObject.page_size;
     if (!!filterObject.search) params.search = filterObject.search;
     if (Array.isArray(filterObject.status)) {
       params.status = filterObject.status.join(",");
diff --git a/src/API/LayoutApi/teams.ts b/src/API/LayoutApi/teams.ts
index a76f2ff..d2ff81e 100644
--- a/src/API/LayoutApi/teams.ts
+++ b/src/API/LayoutApi/teams.ts
@@ -3,6 +3,8 @@ import instance from "../api";
 import { message } from "antd";
 
 export type TTeamGetParams = {
+  page?: number;
+  page_size?: number;
   name?: string;
   company_id?: string | number;
 };
@@ -23,8 +25,10 @@ export const teamController = {
 
     if (!!obj.company_id) params.company_id = obj.company_id;
     if (!!obj.name) params.name = obj.name;
+    if (!!obj.page) params.page = obj.page;
+    if (!!obj.page_size) params.page_size = obj.page_size;
 
-    const { data } = await instance.get<TTeam[]>(`teams/`, {
+    const { data } = await instance.get(`teams/`, {
       params,
     });
     return data;
diff --git a/src/API/auth/activate.ts b/src/API/auth/activate.ts
index b006a9a..752d253 100644
--- a/src/API/auth/activate.ts
+++ b/src/API/auth/activate.ts
@@ -28,7 +28,6 @@ export const registryVerify = async (value: activateInterface) => {
       role: data?.data.role,
     };
     console.log(data);
-    
 
     const userJSON = JSON.stringify(userObject);
     localStorage.setItem("user", userJSON);
diff --git a/src/Components/Accounting/AccountingCurrent.tsx b/src/Components/Accounting/AccountingCurrent.tsx
index c894066..ddaff5c 100644
--- a/src/Components/Accounting/AccountingCurrent.tsx
+++ b/src/Components/Accounting/AccountingCurrent.tsx
@@ -9,6 +9,7 @@ import {
   message,
   Modal,
   Select,
+  Space,
   Table,
   Tooltip,
   Typography,
@@ -26,8 +27,10 @@ import {
   DollarOutlined,
   EditOutlined,
   EllipsisOutlined,
+  LeftOutlined,
   PlusOutlined,
   QuestionCircleOutlined,
+  RightOutlined,
   SearchOutlined,
 } from "@ant-design/icons";
 import { theme } from "antd";
@@ -35,6 +38,7 @@ import { useAccountingData } from "../../Hooks/Accounting";
 import moment from "moment";
 import api from "../../API/api";
 import { useTeamData } from "../../Hooks/Teams";
+import { useRoleData } from "../../Hooks/Role";
 
 type Employee = {
   id: number;
@@ -61,6 +65,28 @@ const AccountingCurrent: React.FC = () => {
 
   const currentInfo = new Date().toLocaleString("default", { month: "long" });
 
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const pageSizeOptions = [10, 20, 30, 40, 50];
+
+  const handlePageSizeChange = (value: number) => {
+    setPageSize(value);
+    setPage(1);
+  };
+
+  const Next = () => {
+    const a = Number(page) + 1;
+    setPage(a);
+  };
+  const Previos = () => {
+    Number(page);
+    if (page > 1) {
+      const a = Number(page) - 1;
+      setPage(a);
+    }
+  };
+
   const { Option } = Select;
 
   // const currentMonth = moment().month();
@@ -97,6 +123,8 @@ const AccountingCurrent: React.FC = () => {
 
   const [search, setSearch] = useState<string>("");
   const [team, setTeam] = useState<any>("");
+  const [role, setRole] = useState<any>("");
+  const [salaryType, setSalaryType] = useState<any>("");
 
   const showBonusModal = (userId: any) => {
     setSelectedUserId(userId); // Tanlangan user_id ni saqlash
@@ -117,6 +145,10 @@ const AccountingCurrent: React.FC = () => {
     month: "current",
     search: search,
     team: team,
+    page: page,
+    page_size: pageSize,
+    role: role,
+    salary_type: salaryType,
   });
 
   const handleDateChange = (date: dayjs.Dayjs | null) => {
@@ -308,52 +340,6 @@ const AccountingCurrent: React.FC = () => {
     form.resetFields();
   };
 
-  // const handleOkBonusEdit = async () => {
-  //   try {
-  //     const values = await form.validateFields();
-
-  //     console.log(values);
-
-  //     if (!selectedRecordBonus) {
-  //       throw new Error("No record selected!");
-  //     }
-
-  //     const updatedData = {
-  //       ...(selectedRecordBonus || {}),
-  //       ...values,
-  //     };
-
-  //     const response = await api.put(
-  //       `bonus/${selectedRecordBonus.id}/`,
-  //       updatedData,
-  //       {
-  //         headers: {
-  //           "Content-Type": "application/json",
-  //         },
-  //       }
-  //     );
-
-  //     if (response.status === 202) {
-  //       setBonusesData((prevData: any) =>
-  //         prevData.map((item: any) =>
-  //           item.id === selectedRecordBonus.id
-  //             ? { ...item, ...updatedData }
-  //             : item
-  //         )
-  //       );
-  //       refetch();
-
-  //       setIsEditBonusModalVisible(false);
-  //     } else {
-  //       throw new Error("Server Error");
-  //     }
-  //   } catch (error) {
-  //     console.error(error);
-  //   }
-  // };
-
-  // EDIT modal Charge
-
   const handleOkBonusEdit = async () => {
     try {
       const values = await form.validateFields();
@@ -362,10 +348,9 @@ const AccountingCurrent: React.FC = () => {
         throw new Error("No record selected!");
       }
 
-      // Faqat kerakli maydonlarni olish
       const updatedData = {
         amount: values.amount,
-        reason: values.reason, // Formda `notes` deb saqlanayotgan bo‘lsa
+        reason: values.reason,
       };
 
       const response = await api.put(
@@ -494,17 +479,24 @@ const AccountingCurrent: React.FC = () => {
 
   const teamData = useTeamData({});
   const teamOptions: { label: string; value: any }[] | undefined =
-    teamData?.data?.map((item) => ({
+    teamData?.data?.map((item: any) => ({
       label: item?.name,
       value: item?.name,
     }));
-  const additionalOption = {
-    label: "all",
-    value: "",
-  };
-  if (teamOptions) {
-    teamOptions.unshift(additionalOption);
-  }
+
+  const roleData = useRoleData();
+
+  const roleOptions: { label: string; value: any }[] | undefined =
+    roleData?.data?.map((item: any) => ({
+      label: item?.name,
+      value: item?.id,
+    }));
+
+  const salaryTypeOptions = [
+    { label: "Hybrid", value: "hybrid" },
+    { label: "Task Based", value: "task_based" },
+    { label: "Fixed", value: "fixed" },
+  ];
 
   const deleteFunctionBonus = (record: any) => {
     const { id } = record;
@@ -555,10 +547,11 @@ const AccountingCurrent: React.FC = () => {
         style={{
           display: "flex",
           alignItems: "center",
+          gap: 12,
           marginBottom: 10,
         }}
       >
-        <div style={{ marginRight: 12 }}>
+        <div>
           <Input
             placeholder="Search"
             prefix={<SearchOutlined />}
@@ -570,12 +563,27 @@ const AccountingCurrent: React.FC = () => {
           placeholder="Team"
           onChange={(value: any) => setTeam(value)}
           options={teamOptions}
+          allowClear
+        />
+        <Select
+          style={{ width: 260 }}
+          placeholder="Role"
+          onChange={(value: any) => setRole(value)}
+          options={roleOptions}
+          allowClear
+        />
+        <Select
+          style={{ width: 260 }}
+          placeholder="Salary Type"
+          onChange={(value: string) => setSalaryType(value)}
+          options={salaryTypeOptions}
+          allowClear
         />
       </span>
       <Table
         size="small"
         loading={isLoading}
-        dataSource={data?.map((u, i) => ({
+        dataSource={data?.data?.map((u: any, i: any) => ({
           no: i + 1,
           ...u,
         }))}
@@ -608,24 +616,6 @@ const AccountingCurrent: React.FC = () => {
             title: "Role",
             dataIndex: "role",
             key: "role",
-            filters: [
-              {
-                text: "Tech Support",
-                value: "Tech Support",
-              },
-              {
-                text: "Checker",
-                value: "Checker",
-              },
-              {
-                text: "Accountant",
-                value: "Accountant",
-              },
-            ],
-            filterMultiple: false,
-            onFilter: (value: any, record: any) => {
-              return record.role === value;
-            },
           },
           {
             title: "Team",
@@ -656,25 +646,6 @@ const AccountingCurrent: React.FC = () => {
                 return <p>{record.salary_type}</p>;
               }
             },
-            filters: [
-              {
-                text: "Hybrid",
-                value: "hybrid",
-              },
-              {
-                text: "Task Based",
-                value: "task_based",
-              },
-              {
-                text: "Fixed",
-                value: "fixed",
-              },
-            ],
-            filterMultiple: false,
-            // defaultFilteredValue: ["hybrid"],
-            onFilter: (value: any, record: any) => {
-              return record.salary_type === value;
-            },
           },
           {
             title: "Base Salary",
@@ -745,23 +716,24 @@ const AccountingCurrent: React.FC = () => {
           index % 2 === 0 ? "odd-row" : "even-row"
         }
         bordered
-        pagination={{
-          pageSize: 10,
-          size: "default",
-          style: {
-            margin: 0,
-            justifyContent: "end",
-            position: "fixed",
-            bottom: 0,
-            left: 0,
-            width: "100%",
-            backgroundColor: token.colorBgContainer,
-            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
-            padding: "10px 0",
-            zIndex: 1000,
-          },
-          showLessItems: true,
-        }}
+        // pagination={{
+        //   pageSize: 10,
+        //   size: "default",
+        //   style: {
+        //     margin: 0,
+        //     justifyContent: "end",
+        //     position: "fixed",
+        //     bottom: 0,
+        //     left: 0,
+        //     width: "100%",
+        //     backgroundColor: token.colorBgContainer,
+        //     boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
+        //     padding: "10px 0",
+        //     zIndex: 1000,
+        //   },
+        //   showLessItems: true,
+        // }}
+        pagination={false}
         onRow={(record) => ({
           onClick: (e) => handleRowClick(record, e),
         })}
@@ -1209,6 +1181,73 @@ const AccountingCurrent: React.FC = () => {
           </Form.Item>
         </Form>
       </Modal>
+      <Space style={{ width: "100%", marginTop: 40 }} direction="vertical">
+        <Space
+          style={{
+            justifyContent: "end",
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            width: "100%",
+            backgroundColor: token.colorBgContainer,
+            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
+            padding: "10px 0",
+            zIndex: 1000,
+          }}
+          wrap
+        >
+          <Select
+            value={pageSize}
+            onChange={handlePageSizeChange}
+            style={{ width: 65, marginRight: 16 }}
+            options={pageSizeOptions.map((size) => ({
+              label: `${size}`,
+              value: size,
+            }))}
+          />
+
+          <Button
+            onClick={Previos}
+            disabled={data?.previous ? false : true}
+            style={{
+              backgroundColor: token.colorBgContainer,
+              color: token.colorText,
+              border: "none",
+            }}
+          >
+            <LeftOutlined />
+          </Button>
+          <Input
+            disabled
+            style={{
+              width: 40,
+              textAlign: "center",
+              background: token.colorBgContainer,
+              border: "1px solid",
+              borderColor: token.colorText,
+              color: token.colorText,
+            }}
+            value={page}
+            onChange={(e) => {
+              let num = e.target.value;
+              if (Number(num) && num !== "0") {
+                setPage(Number(num));
+              }
+            }}
+          />
+          <Button
+            onClick={Next}
+            disabled={data?.next ? false : true}
+            style={{
+              backgroundColor: token.colorBgContainer,
+              color: token.colorText,
+              border: "none",
+            }}
+          >
+            <RightOutlined />
+          </Button>
+        </Space>
+      </Space>
     </div>
   );
 };
diff --git a/src/Components/Accounting/AccountingHistory.tsx b/src/Components/Accounting/AccountingHistory.tsx
index 0ce5eb6..273c190 100644
--- a/src/Components/Accounting/AccountingHistory.tsx
+++ b/src/Components/Accounting/AccountingHistory.tsx
@@ -3,6 +3,7 @@ import {
   Drawer,
   Input,
   Select,
+  Space,
   Spin,
   Table,
   Tooltip,
@@ -13,13 +14,16 @@ import tagIcon from "../../assets/tagIcon.svg";
 import {
   CloseOutlined,
   EyeOutlined,
+  LeftOutlined,
   QuestionCircleOutlined,
+  RightOutlined,
   SearchOutlined,
 } from "@ant-design/icons";
 import { theme } from "antd";
 import api from "../../API/api";
 import { useAccountingHistory } from "../../Hooks/Accounting";
 import { useTeamData } from "../../Hooks/Teams";
+import { useRoleData } from "../../Hooks/Role";
 
 const { Title } = Typography;
 
@@ -50,6 +54,8 @@ interface SalaryData {
 }
 
 const AccountingHistory: React.FC = () => {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
   const [open, setOpen] = useState(false);
 
   const [userData, setUserData] = useState<SalaryData | null>(null);
@@ -58,17 +64,42 @@ const AccountingHistory: React.FC = () => {
 
   const [search, setSearch] = useState<string>("");
   const [team, setTeam] = useState<any>("");
+  const [role, setRole] = useState<any>("");
+  const [salaryType, setSalaryType] = useState<any>("");
 
   const themes = localStorage.getItem("theme") === "true" ? true : false;
   const { data, refetch, isLoading } = useAccountingHistory({
     search: search,
     team: team,
+    page: page,
+    page_size: pageSize,
+    role: role,
+    salary_type: salaryType,
   });
 
   const [selectedUser, setSelectedUser] = useState<any>(null);
 
   const [loading, setLoading] = useState(false);
 
+  const pageSizeOptions = [10, 20, 30, 40, 50];
+
+  const handlePageSizeChange = (value: number) => {
+    setPageSize(value);
+    setPage(1);
+  };
+
+  const Next = () => {
+    const a = Number(page) + 1;
+    setPage(a);
+  };
+  const Previos = () => {
+    Number(page);
+    if (page > 1) {
+      const a = Number(page) - 1;
+      setPage(a);
+    }
+  };
+
   const handleRowClick = async (record: any, e: any) => {
     setSelectedUser(record);
     setOpen(true);
@@ -116,17 +147,24 @@ const AccountingHistory: React.FC = () => {
 
   const teamData = useTeamData({});
   const teamOptions: { label: string; value: any }[] | undefined =
-    teamData?.data?.map((item) => ({
+    teamData?.data?.map((item: any) => ({
       label: item?.name,
       value: item?.name,
     }));
-  const additionalOption = {
-    label: "all",
-    value: "",
-  };
-  if (teamOptions) {
-    teamOptions.unshift(additionalOption);
-  }
+
+  const roleData = useRoleData();
+
+  const roleOptions: { label: string; value: any }[] | undefined =
+    roleData?.data?.map((item: any) => ({
+      label: item?.name,
+      value: item?.id,
+    }));
+
+  const salaryTypeOptions = [
+    { label: "Hybrid", value: "hybrid" },
+    { label: "Task Based", value: "task_based" },
+    { label: "Fixed", value: "fixed" },
+  ];
 
   return (
     <div style={{ paddingBottom: 40 }}>
@@ -134,10 +172,11 @@ const AccountingHistory: React.FC = () => {
         style={{
           display: "flex",
           alignItems: "center",
+          gap: 12,
           marginBottom: 10,
         }}
       >
-        <div style={{ marginRight: 12 }}>
+        <div>
           <Input
             placeholder="Search"
             prefix={<SearchOutlined />}
@@ -149,12 +188,27 @@ const AccountingHistory: React.FC = () => {
           placeholder="Team"
           onChange={(value: any) => setTeam(value)}
           options={teamOptions}
+          allowClear
+        />
+        <Select
+          style={{ width: 260 }}
+          placeholder="Role"
+          onChange={(value: any) => setRole(value)}
+          options={roleOptions}
+          allowClear
+        />
+        <Select
+          style={{ width: 260 }}
+          placeholder="Salary Type"
+          onChange={(value: string) => setSalaryType(value)}
+          options={salaryTypeOptions}
+          allowClear
         />
       </span>
       <Table
         size="small"
         loading={isLoading}
-        dataSource={data?.map((u, i) => ({
+        dataSource={data?.data?.map((u: any, i: any) => ({
           no: i + 1,
           ...u,
         }))}
@@ -187,24 +241,6 @@ const AccountingHistory: React.FC = () => {
             title: "Role",
             dataIndex: "role",
             key: "role",
-            filters: [
-              {
-                text: "Tech Support",
-                value: "Tech Support",
-              },
-              {
-                text: "Checker",
-                value: "Checker",
-              },
-              {
-                text: "Accountant",
-                value: "Accountant",
-              },
-            ],
-            filterMultiple: false,
-            onFilter: (value: any, record: any) => {
-              return record.role === value;
-            },
           },
           {
             title: "Team",
@@ -261,25 +297,6 @@ const AccountingHistory: React.FC = () => {
                 return <p>{record.salary_type}</p>; // Agar boshqa qiymat bo'lsa, oddiy qilib chiqariladi
               }
             },
-            filters: [
-              {
-                text: "Hybrid",
-                value: "hybrid",
-              },
-              {
-                text: "Task Based",
-                value: "task_based",
-              },
-              {
-                text: "Fixed",
-                value: "fixed",
-              },
-            ],
-            filterMultiple: false,
-            // defaultFilteredValue: ["hybrid"],
-            onFilter: (value: any, record: any) => {
-              return record.salary_type === value;
-            },
           },
           {
             title: "Base Salary",
@@ -330,23 +347,7 @@ const AccountingHistory: React.FC = () => {
           index % 2 === 0 ? "odd-row" : "even-row"
         }
         bordered
-        pagination={{
-          pageSize: 10,
-          size: "default",
-          style: {
-            margin: 0,
-            justifyContent: "end",
-            position: "fixed",
-            bottom: 0,
-            left: 0,
-            width: "100%",
-            backgroundColor: token.colorBgContainer,
-            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
-            padding: "10px 0",
-            zIndex: 1000,
-          },
-          showLessItems: true,
-        }}
+        pagination={false}
         // onRow={(record) => ({
         //   onClick: () => {
         //     if (record.user && record.user.id) {
@@ -544,6 +545,74 @@ const AccountingHistory: React.FC = () => {
           )}
         </div>
       </Drawer>
+
+      <Space style={{ width: "100%", marginTop: 40 }} direction="vertical">
+        <Space
+          style={{
+            justifyContent: "end",
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            width: "100%",
+            backgroundColor: token.colorBgContainer,
+            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
+            padding: "10px 0",
+            zIndex: 1000,
+          }}
+          wrap
+        >
+          <Select
+            value={pageSize}
+            onChange={handlePageSizeChange}
+            style={{ width: 65, marginRight: 16 }}
+            options={pageSizeOptions.map((size) => ({
+              label: `${size}`,
+              value: size,
+            }))}
+          />
+
+          <Button
+            onClick={Previos}
+            disabled={data?.previous ? false : true}
+            style={{
+              backgroundColor: token.colorBgContainer,
+              color: token.colorText,
+              border: "none",
+            }}
+          >
+            <LeftOutlined />
+          </Button>
+          <Input
+            disabled
+            style={{
+              width: 40,
+              textAlign: "center",
+              background: token.colorBgContainer,
+              border: "1px solid",
+              borderColor: token.colorText,
+              color: token.colorText,
+            }}
+            value={page}
+            onChange={(e) => {
+              let num = e.target.value;
+              if (Number(num) && num !== "0") {
+                setPage(Number(num));
+              }
+            }}
+          />
+          <Button
+            onClick={Next}
+            disabled={data?.next ? false : true}
+            style={{
+              backgroundColor: token.colorBgContainer,
+              color: token.colorText,
+              border: "none",
+            }}
+          >
+            <RightOutlined />
+          </Button>
+        </Space>
+      </Space>
     </div>
   );
 };
diff --git a/src/Components/Accounting/AccountingLast.tsx b/src/Components/Accounting/AccountingLast.tsx
index c8068c1..8378b9b 100644
--- a/src/Components/Accounting/AccountingLast.tsx
+++ b/src/Components/Accounting/AccountingLast.tsx
@@ -9,6 +9,7 @@ import {
   message,
   Modal,
   Select,
+  Space,
   Table,
   Tooltip,
   Typography,
@@ -24,8 +25,10 @@ import {
   EditOutlined,
   EllipsisOutlined,
   InfoCircleOutlined,
+  LeftOutlined,
   PlusOutlined,
   QuestionCircleOutlined,
+  RightOutlined,
   SearchOutlined,
 } from "@ant-design/icons";
 import { theme } from "antd";
@@ -36,6 +39,7 @@ import dayjs from "dayjs";
 import "dayjs/locale/en";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import { useTeamData } from "../../Hooks/Teams";
+import { useRoleData } from "../../Hooks/Role";
 
 type Employee = {
   id: number;
@@ -86,6 +90,28 @@ const AccountingCurrent: React.FC = () => {
     );
   };
 
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const pageSizeOptions = [10, 20, 30, 40, 50];
+
+  const handlePageSizeChange = (value: number) => {
+    setPageSize(value);
+    setPage(1);
+  };
+
+  const Next = () => {
+    const a = Number(page) + 1;
+    setPage(a);
+  };
+  const Previos = () => {
+    Number(page);
+    if (page > 1) {
+      const a = Number(page) - 1;
+      setPage(a);
+    }
+  };
+
   const [selectedUserId, setSelectedUserId] = useState(null);
   const [selectedDate, setSelectedDate] = useState<dayjs.Dayjs | null>(null);
 
@@ -98,8 +124,12 @@ const AccountingCurrent: React.FC = () => {
   const [chargesData, setChargesData] = useState([]);
 
   const [search, setSearch] = useState<string>("");
+
   const [team, setTeam] = useState<any>("");
 
+  const [role, setRole] = useState<any>("");
+  const [salaryType, setSalaryType] = useState<any>("");
+
   const showBonusModal = (userId: any) => {
     setSelectedUserId(userId); // Tanlangan user_id ni saqlash
     setIsBonusModalVisible(true);
@@ -119,6 +149,10 @@ const AccountingCurrent: React.FC = () => {
     month: "last",
     search: search,
     team: team,
+    page: page,
+    page_size: pageSize,
+    role: role,
+    salary_type: salaryType,
   });
 
   const handleDateChange = (date: dayjs.Dayjs | null) => {
@@ -502,17 +536,25 @@ const AccountingCurrent: React.FC = () => {
 
   const teamData = useTeamData({});
   const teamOptions: { label: string; value: any }[] | undefined =
-    teamData?.data?.map((item) => ({
+    teamData?.data?.map((item: any) => ({
       label: item?.name,
       value: item?.name,
     }));
-  const additionalOption = {
-    label: "all",
-    value: "",
-  };
-  if (teamOptions) {
-    teamOptions.unshift(additionalOption);
-  }
+
+  const roleData = useRoleData();
+
+  const roleOptions: { label: string; value: any }[] | undefined =
+    roleData?.data?.map((item: any) => ({
+      label: item?.name,
+      value: item?.id,
+    }));
+
+  const salaryTypeOptions = [
+    { label: "Hybrid", value: "hybrid" },
+    { label: "Task Based", value: "task_based" },
+    { label: "Fixed", value: "fixed" },
+  ];
+
   const { token } = theme.useToken();
 
   const deleteFunctionBonus = (record: any) => {
@@ -573,10 +615,11 @@ const AccountingCurrent: React.FC = () => {
             style={{
               display: "flex",
               alignItems: "center",
+              gap: 12,
               // marginBottom: 10,
             }}
           >
-            <div style={{ marginRight: 12 }}>
+            <div>
               <Input
                 placeholder="Search"
                 prefix={<SearchOutlined />}
@@ -589,11 +632,25 @@ const AccountingCurrent: React.FC = () => {
               onChange={(value: any) => setTeam(value)}
               options={teamOptions}
             />
+            <Select
+              style={{ width: 260 }}
+              placeholder="Role"
+              onChange={(value: any) => setRole(value)}
+              options={roleOptions}
+              allowClear
+            />
+            <Select
+              style={{ width: 260 }}
+              placeholder="Salary Type"
+              onChange={(value: string) => setSalaryType(value)}
+              options={salaryTypeOptions}
+              allowClear
+            />
           </div>
         </div>
 
         <Button
-          disabled={data?.some((item) => item.is_confirmed)}
+          disabled={data?.data?.some((item: any) => item.is_confirmed)}
           type="primary"
           onClick={() =>
             Modal.confirm({
@@ -689,7 +746,7 @@ const AccountingCurrent: React.FC = () => {
       <Table
         size="small"
         loading={isLoading}
-        dataSource={data?.map((u, i) => ({
+        dataSource={data?.data?.map((u: any, i: any) => ({
           no: i + 1,
           ...u,
         }))}
@@ -722,24 +779,6 @@ const AccountingCurrent: React.FC = () => {
             title: "Role",
             dataIndex: "role",
             key: "role",
-            filters: [
-              {
-                text: "Tech Support",
-                value: "Tech Support",
-              },
-              {
-                text: "Checker",
-                value: "Checker",
-              },
-              {
-                text: "Accountant",
-                value: "Accountant",
-              },
-            ],
-            filterMultiple: false,
-            onFilter: (value: any, record: any) => {
-              return record.role === value;
-            },
           },
           {
             title: "Team",
@@ -770,25 +809,6 @@ const AccountingCurrent: React.FC = () => {
                 return <p>{record.salary_type}</p>;
               }
             },
-            filters: [
-              {
-                text: "Hybrid",
-                value: "hybrid",
-              },
-              {
-                text: "Task Based",
-                value: "task_based",
-              },
-              {
-                text: "Fixed",
-                value: "fixed",
-              },
-            ],
-            filterMultiple: false,
-            // defaultFilteredValue: ["hybrid"],
-            onFilter: (value: any, record: any) => {
-              return record.salary_type === value;
-            },
           },
           {
             title: "Base Salary",
@@ -841,7 +861,7 @@ const AccountingCurrent: React.FC = () => {
               <Dropdown
                 overlay={menu(record.employee_id)}
                 trigger={["click"]}
-                disabled={data?.some((item) => item.is_confirmed)}
+                disabled={data?.data?.some((item: any) => item.is_confirmed)}
               >
                 <Button
                   icon={<EllipsisOutlined />}
@@ -855,23 +875,24 @@ const AccountingCurrent: React.FC = () => {
           index % 2 === 0 ? "odd-row" : "even-row"
         }
         bordered
-        pagination={{
-          pageSize: 10,
-          size: "default",
-          style: {
-            margin: 0,
-            justifyContent: "end",
-            position: "fixed",
-            bottom: 0,
-            left: 0,
-            width: "100%",
-            backgroundColor: token.colorBgContainer,
-            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
-            padding: "10px 0",
-            zIndex: 1000,
-          },
-          showLessItems: true,
-        }}
+        // pagination={{
+        //   pageSize: 10,
+        //   size: "default",
+        //   style: {
+        //     margin: 0,
+        //     justifyContent: "end",
+        //     position: "fixed",
+        //     bottom: 0,
+        //     left: 0,
+        //     width: "100%",
+        //     backgroundColor: token.colorBgContainer,
+        //     boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
+        //     padding: "10px 0",
+        //     zIndex: 1000,
+        //   },
+        //   showLessItems: true,
+        // }}
+        pagination={false}
         onRow={(record) => ({
           onClick: (e) => handleRowClick(record, e),
         })}
@@ -1123,7 +1144,9 @@ const AccountingCurrent: React.FC = () => {
                     <>
                       <Button
                         icon={<EditOutlined />}
-                        disabled={data?.some((item) => item.is_confirmed)}
+                        disabled={data?.data?.some(
+                          (item: any) => item.is_confirmed
+                        )}
                         onClick={() => showModalBonusEdit(record)}
                         style={{ marginRight: 8 }}
                       />
@@ -1134,7 +1157,9 @@ const AccountingCurrent: React.FC = () => {
                         }}
                         icon={<DeleteOutlined />}
                         onClick={() => deleteFunctionBonus(record)}
-                        disabled={data?.some((item) => item.is_confirmed)}
+                        disabled={data?.data?.some(
+                          (item: any) => item.is_confirmed
+                        )}
                       />
                     </>
                   ),
@@ -1191,7 +1216,9 @@ const AccountingCurrent: React.FC = () => {
                     <>
                       <Button
                         icon={<EditOutlined />}
-                        disabled={data?.some((item) => item.is_confirmed)}
+                        disabled={data?.data?.some(
+                          (item: any) => item.is_confirmed
+                        )}
                         onClick={() => showModal(record)}
                         style={{ marginRight: 8 }}
                       />
@@ -1202,7 +1229,9 @@ const AccountingCurrent: React.FC = () => {
                         }}
                         icon={<DeleteOutlined />}
                         onClick={() => deleteFunctionCharge(record)}
-                        disabled={data?.some((item) => item.is_confirmed)}
+                        disabled={data?.data?.some(
+                          (item: any) => item.is_confirmed
+                        )}
                       />
                     </>
                   ),
@@ -1435,6 +1464,73 @@ const AccountingCurrent: React.FC = () => {
           </Form.Item>
         </Form>
       </Modal>
+      <Space style={{ width: "100%", marginTop: 40 }} direction="vertical">
+        <Space
+          style={{
+            justifyContent: "end",
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            width: "100%",
+            backgroundColor: token.colorBgContainer,
+            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
+            padding: "10px 0",
+            zIndex: 1000,
+          }}
+          wrap
+        >
+          <Select
+            value={pageSize}
+            onChange={handlePageSizeChange}
+            style={{ width: 65, marginRight: 16 }}
+            options={pageSizeOptions.map((size) => ({
+              label: `${size}`,
+              value: size,
+            }))}
+          />
+
+          <Button
+            onClick={Previos}
+            disabled={data?.previous ? false : true}
+            style={{
+              backgroundColor: token.colorBgContainer,
+              color: token.colorText,
+              border: "none",
+            }}
+          >
+            <LeftOutlined />
+          </Button>
+          <Input
+            disabled
+            style={{
+              width: 40,
+              textAlign: "center",
+              background: token.colorBgContainer,
+              border: "1px solid",
+              borderColor: token.colorText,
+              color: token.colorText,
+            }}
+            value={page}
+            onChange={(e) => {
+              let num = e.target.value;
+              if (Number(num) && num !== "0") {
+                setPage(Number(num));
+              }
+            }}
+          />
+          <Button
+            onClick={Next}
+            disabled={data?.next ? false : true}
+            style={{
+              backgroundColor: token.colorBgContainer,
+              color: token.colorText,
+              border: "none",
+            }}
+          >
+            <RightOutlined />
+          </Button>
+        </Space>
+      </Space>
     </div>
   );
 };
diff --git a/src/Components/Accounting/ConfirmedMonths.tsx b/src/Components/Accounting/ConfirmedMonths.tsx
index 874411a..cc9aca6 100644
--- a/src/Components/Accounting/ConfirmedMonths.tsx
+++ b/src/Components/Accounting/ConfirmedMonths.tsx
@@ -1,10 +1,37 @@
 import { useConfirmedMonths } from "../../Hooks/Accounting";
-import { Button, Table, theme } from "antd";
+import { Button, Input, Select, Space, Table, theme } from "antd";
 import tagIcon from "../../assets/tagIcon.svg";
 import dayjs from "dayjs";
+import { useState } from "react";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 
 function ConfirmedMonths() {
-  const { data, isLoading, refetch } = useConfirmedMonths();
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const pageSizeOptions = [10, 20, 30, 40, 50];
+
+  const handlePageSizeChange = (value: number) => {
+    setPageSize(value);
+    setPage(1);
+  };
+
+  const Next = () => {
+    const a = Number(page) + 1;
+    setPage(a);
+  };
+  const Previos = () => {
+    Number(page);
+    if (page > 1) {
+      const a = Number(page) - 1;
+      setPage(a);
+    }
+  };
+
+  const { data, isLoading, refetch } = useConfirmedMonths({
+    page: page,
+    page_size: pageSize,
+  });
 
   const { token } = theme.useToken();
 
@@ -13,7 +40,7 @@ function ConfirmedMonths() {
       <Table
         size="middle"
         bordered
-        dataSource={data?.map((u, i) => ({
+        dataSource={data?.data?.map((u: any, i: any) => ({
           no: i + 1,
           ...u,
         }))}
@@ -62,11 +89,11 @@ function ConfirmedMonths() {
         ]}
         loading={isLoading}
         rowKey="id"
-        pagination={{
-          pageSize: 10,
-          size: "default",
-          style: {
-            margin: 0,
+        pagination={false}
+      />
+      <Space style={{ width: "100%", marginTop: 40 }} direction="vertical">
+        <Space
+          style={{
             justifyContent: "end",
             position: "fixed",
             bottom: 0,
@@ -76,10 +103,61 @@ function ConfirmedMonths() {
             boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
             padding: "10px 0",
             zIndex: 1000,
-          },
-          showLessItems: true,
-        }}
-      />
+          }}
+          wrap
+        >
+          <Select
+            value={pageSize}
+            onChange={handlePageSizeChange}
+            style={{ width: 65, marginRight: 16 }}
+            options={pageSizeOptions.map((size) => ({
+              label: `${size}`,
+              value: size,
+            }))}
+          />
+
+          <Button
+            onClick={Previos}
+            disabled={data?.previous ? false : true}
+            style={{
+              backgroundColor: token.colorBgContainer,
+              color: token.colorText,
+              border: "none",
+            }}
+          >
+            <LeftOutlined />
+          </Button>
+          <Input
+            disabled
+            style={{
+              width: 40,
+              textAlign: "center",
+              background: token.colorBgContainer,
+              border: "1px solid",
+              borderColor: token.colorText,
+              color: token.colorText,
+            }}
+            value={page}
+            onChange={(e) => {
+              let num = e.target.value;
+              if (Number(num) && num !== "0") {
+                setPage(Number(num));
+              }
+            }}
+          />
+          <Button
+            onClick={Next}
+            disabled={data?.next ? false : true}
+            style={{
+              backgroundColor: token.colorBgContainer,
+              color: token.colorText,
+              border: "none",
+            }}
+          >
+            <RightOutlined />
+          </Button>
+        </Space>
+      </Space>
     </div>
   );
 }
diff --git a/src/Components/CallRequests/Call.tsx b/src/Components/CallRequests/Call.tsx
index 683a58f..9817c68 100644
--- a/src/Components/CallRequests/Call.tsx
+++ b/src/Components/CallRequests/Call.tsx
@@ -6,6 +6,7 @@ import {
   Input,
   Radio,
   RadioChangeEvent,
+  Select,
   Space,
   Typography,
 } from "antd";
@@ -17,13 +18,22 @@ import { theme } from "antd";
 const Call = ({ socketData }: { socketData: TSocket | undefined }) => {
   const [status, setStatus] = useState("Awaiting");
   const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
   const [tableData, setTableData] = useState<TCall[]>();
   const { data, isLoading, refetch } = useCallData({
     status: status,
     page: page,
-    page_size: 10,
+    page_size: pageSize,
   });
 
+  const pageSizeOptions = [10, 20, 30, 40, 50];
+
+  const handlePageSizeChange = (value: number) => {
+    setPageSize(value);
+    setPage(1);
+  };
+
   // const theme = localStorage.getItem("theme") === "true" ? true : false;
   const { token } = theme.useToken();
 
@@ -116,6 +126,16 @@ const Call = ({ socketData }: { socketData: TSocket | undefined }) => {
           }}
           wrap
         >
+          <Select
+            value={pageSize}
+            onChange={handlePageSizeChange}
+            style={{ width: 65, marginRight: 16 }}
+            options={pageSizeOptions.map((size) => ({
+              label: `${size}`,
+              value: size,
+            }))}
+          />
+
           <Button
             onClick={Previos}
             disabled={data?.previous ? false : true}
diff --git a/src/Components/Companies/Companies.tsx b/src/Components/Companies/Companies.tsx
index 73191f2..e7a88d3 100644
--- a/src/Components/Companies/Companies.tsx
+++ b/src/Components/Companies/Companies.tsx
@@ -10,7 +10,7 @@ import {
   SearchOutlined,
 } from "@ant-design/icons";
 import { useCompanyPaginated } from "../../Hooks/Companies";
-import { Button, Input, Space, Typography } from "antd";
+import { Button, Input, Select, Space, Typography } from "antd";
 import { theme } from "antd";
 
 import { role } from "../../App";
@@ -23,13 +23,21 @@ const Company = () => {
 
   const [search, setSearch] = useState<string>();
   const [page, setPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState(10);
   const { data, isLoading, refetch } = useCompanyPaginated({
     name: search,
     is_active: undefined,
     page: page,
-    page_size: 10,
+    page_size: pageSize,
   });
 
+  const pageSizeOptions = [10, 20, 30, 40, 50];
+
+  const handlePageSizeChange = (value: number) => {
+    setPageSize(value);
+    setPage(1);
+  };
+
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (timerRef.current) {
@@ -123,6 +131,16 @@ const Company = () => {
           }}
           wrap
         >
+          <Select
+            value={pageSize}
+            onChange={handlePageSizeChange}
+            style={{ width: 65, marginRight: 16 }}
+            options={pageSizeOptions.map((size) => ({
+              label: `${size}`,
+              value: size,
+            }))}
+          />
+
           <Button
             onClick={Previos}
             disabled={data?.previous ? false : true}
diff --git a/src/Components/Companies/CompaniesEdit.tsx b/src/Components/Companies/CompaniesEdit.tsx
index ecf3ce5..e1becb8 100644
--- a/src/Components/Companies/CompaniesEdit.tsx
+++ b/src/Components/Companies/CompaniesEdit.tsx
@@ -91,7 +91,7 @@ const CompanyEdit = () => {
   const TeamData = useTeamData({});
   const noTeamOption = { label: " - - - - - -", value: "" };
   const TeamOption: { label: string; value: any }[] | undefined =
-    TeamData?.data?.map((item) => ({
+    TeamData?.data?.map((item: any) => ({
       label: item?.name,
       value: item?.id,
     }));
diff --git a/src/Components/Customers/Customers.tsx b/src/Components/Customers/Customers.tsx
index 56903b8..29bacbf 100644
--- a/src/Components/Customers/Customers.tsx
+++ b/src/Components/Customers/Customers.tsx
@@ -14,12 +14,13 @@ import addicon from "../../assets/addiconpng.png";
 
 import IconSearch from "../../assets/searchIcon.png";
 
-import { Button, Input, Pagination, Space, Typography } from "antd";
+import { Button, Input, Pagination, Select, Space, Typography } from "antd";
 import { theme } from "antd";
 
 const Customer = () => {
   const [open, setOpen] = useState(false);
   const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
   const showModal = () => {
     setOpen(true);
   };
@@ -30,10 +31,17 @@ const Customer = () => {
   const { data, isLoading, refetch } = useCustomerData({
     name: search,
     is_active: undefined,
-    page_size: 10,
+    page_size: pageSize,
     page: page,
   });
 
+  const pageSizeOptions = [10, 20, 30, 40, 50];
+
+  const handlePageSizeChange = (value: number) => {
+    setPageSize(value);
+    setPage(1);
+  };
+
   const Next = () => {
     const a = Number(page) + 1;
     setPage(a);
@@ -116,6 +124,16 @@ const Customer = () => {
           }}
           wrap
         >
+          <Select
+            value={pageSize}
+            onChange={handlePageSizeChange}
+            style={{ width: 65, marginRight: 16 }}
+            options={pageSizeOptions.map((size) => ({
+              label: `${size}`,
+              value: size,
+            }))}
+          />
+
           <Button
             type="primary"
             onClick={Previos}
diff --git a/src/Components/Requests/Requests.tsx b/src/Components/Requests/Requests.tsx
index ffd2329..883b7e4 100644
--- a/src/Components/Requests/Requests.tsx
+++ b/src/Components/Requests/Requests.tsx
@@ -12,6 +12,7 @@ import {
   Input,
   Radio,
   RadioChangeEvent,
+  Select,
   Space,
   Typography,
   theme,
@@ -29,12 +30,20 @@ const Requests = ({ socketData }: { socketData: TSocket | undefined }) => {
   const [requestData, setRequestData] = useState<TRequests | undefined>();
   const [status, setStatus] = useState("Pending");
   const [page, setPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const pageSizeOptions = [10, 20, 30, 40, 50];
+
+  const handlePageSizeChange = (value: number) => {
+    setPageSize(value);
+    setPage(1);
+  };
 
   const { data, refetch, isLoading } = useRequestsData({
     search: search,
     status: status,
     page: page,
-    page_size: 10,
+    page_size: pageSize,
   });
   const [mainData, setMainData] = useState<TRequests[]>();
 
@@ -149,6 +158,16 @@ const Requests = ({ socketData }: { socketData: TSocket | undefined }) => {
           }}
           wrap
         >
+          <Select
+            value={pageSize}
+            onChange={handlePageSizeChange}
+            style={{ width: 65, marginRight: 16 }}
+            options={pageSizeOptions.map((size) => ({
+              label: `${size}`,
+              value: size,
+            }))}
+          />
+
           <Button
             onClick={Previos}
             disabled={data?.previous ? false : true}
diff --git a/src/Components/Services/Services.tsx b/src/Components/Services/Services.tsx
index c84d231..590a00b 100644
--- a/src/Components/Services/Services.tsx
+++ b/src/Components/Services/Services.tsx
@@ -4,22 +4,42 @@ import AddService from "./AddService";
 import ServiceTable from "./ServiceTable";
 //@ts-ignore
 import addicon from "../../assets/addiconpng.png";
-import { PlusOutlined } from "@ant-design/icons";
+import { LeftOutlined, PlusOutlined, RightOutlined } from "@ant-design/icons";
 import { role } from "../../App";
-import { Button, Pagination, Space, Typography } from "antd";
+import { Button, Input, Pagination, Select, Space, Typography } from "antd";
 import { theme } from "antd";
 
 const Service = () => {
   const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const pageSizeOptions = [10, 20, 30, 40, 50];
+
+  const handlePageSizeChange = (value: number) => {
+    setPageSize(value);
+    setPage(1);
+  };
 
   const { token } = theme.useToken();
 
-  const { data, isLoading, refetch } = useServiceData();
+  const { data, isLoading, refetch } = useServiceData(page, pageSize);
   const [open, setOpen] = useState(false);
   const showModal = () => {
     setOpen(true);
   };
 
+  const Next = () => {
+    const a = Number(page) + 1;
+    setPage(a);
+  };
+  const Previos = () => {
+    Number(page);
+    if (page > 1) {
+      const a = Number(page) - 1;
+      setPage(a);
+    }
+  };
+
   return (
     <div>
       {open && <AddService refetch={refetch} open={open} setOpen={setOpen} />}
@@ -45,9 +65,9 @@ const Service = () => {
           </Button>
         )}
       </div>
-      <ServiceTable data={data} isLoading={isLoading} refetch={refetch} />
+      <ServiceTable data={data?.data} isLoading={isLoading} refetch={refetch} />
 
-      {/* <Space style={{ width: "100%", marginTop: 10 }} direction="vertical">
+      <Space style={{ width: "100%", marginTop: 40 }} direction="vertical">
         <Space
           style={{
             justifyContent: "end",
@@ -62,12 +82,37 @@ const Service = () => {
           }}
           wrap
         >
-          <Button onClick={Previos} disabled={data?.previous ? false : true}>
-            ＜
-          </Button>
+          <Select
+            value={pageSize}
+            onChange={handlePageSizeChange}
+            style={{ width: 65, marginRight: 16 }}
+            options={pageSizeOptions.map((size) => ({
+              label: `${size}`,
+              value: size,
+            }))}
+          />
 
+          <Button
+            onClick={Previos}
+            disabled={data?.previous ? false : true}
+            style={{
+              backgroundColor: token.colorBgContainer,
+              color: token.colorText,
+              border: "none",
+            }}
+          >
+            <LeftOutlined />
+          </Button>
           <Input
-            style={{ width: 30, textAlign: "center" }}
+            disabled
+            style={{
+              width: 40,
+              textAlign: "center",
+              background: token.colorBgContainer,
+              border: "1px solid",
+              borderColor: token.colorText,
+              color: token.colorText,
+            }}
             value={page}
             onChange={(e) => {
               let num = e.target.value;
@@ -76,18 +121,19 @@ const Service = () => {
               }
             }}
           />
-
-          <Button onClick={Next} disabled={data?.next ? false : true}>
-            ＞
+          <Button
+            onClick={Next}
+            disabled={data?.next ? false : true}
+            style={{
+              backgroundColor: token.colorBgContainer,
+              color: token.colorText,
+              border: "none",
+            }}
+          >
+            <RightOutlined />
           </Button>
-          <Pagination
-          // current={page}
-          // total={10}
-          // pageSize={2}
-          // onChange={handlePageChange}
-          />
         </Space>
-      </Space> */}
+      </Space>
     </div>
   );
 };
diff --git a/src/Components/Statistics/Statistic.tsx b/src/Components/Statistics/Statistic.tsx
index e88f80d..e6df3d2 100644
--- a/src/Components/Statistics/Statistic.tsx
+++ b/src/Components/Statistics/Statistic.tsx
@@ -28,10 +28,12 @@ import {
   DatePickerProps,
   Input,
   Select,
+  Space,
   Tabs,
   Typography,
+  theme,
 } from "antd";
-import { SearchOutlined } from "@ant-design/icons";
+import { LeftOutlined, RightOutlined, SearchOutlined } from "@ant-design/icons";
 import TabPane from "antd/es/tabs/TabPane";
 import api from "../../API/api";
 // @ts-ignore
@@ -58,7 +60,6 @@ import teamsIconActive from "../../assets/teamsIconActive.svg";
 import techSupports from "../../assets/techsupportIcon.svg";
 import techSupportsActive from "../../assets/techsupportIconActive.svg";
 
-import axios from "axios";
 import StatisticsSupportTable from "./StatisticsSupportTable";
 
 const Stat = () => {
@@ -73,17 +74,40 @@ const Stat = () => {
     .endOf("month")
     .format("YYYY-MM-DD")} 23:59:59`;
 
+  const { token } = theme.useToken();
+
   const [search, setSearch] = useState<string>("");
   const [SupportSearch, setSupportSearch] = useState<string>("");
   const [team, setTeam] = useState<any>("");
   const [startDate, setStartDate] = useState(start_date);
   const [endDate, setEndDate] = useState(end_date);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
 
   const [forSalary, setForSalary] = useState(true);
 
+  const pageSizeOptions = [10, 20, 30, 40, 50];
+
+  const handlePageSizeChange = (value: number) => {
+    setPageSize(value);
+    setPage(1);
+  };
+
+  const Next = () => {
+    const a = Number(page) + 1;
+    setPage(a);
+  };
+  const Previos = () => {
+    Number(page);
+    if (page > 1) {
+      const a = Number(page) - 1;
+      setPage(a);
+    }
+  };
+
   const teamData = useTeamData({});
   const teamOptions: { label: string; value: any }[] | undefined =
-    teamData?.data?.map((item) => ({
+    teamData?.data?.map((item: any) => ({
       label: item?.name,
       value: item?.name,
     }));
@@ -145,29 +169,21 @@ const Stat = () => {
     start_date: startDate,
     end_date: endDate,
     for_salary: forSalary,
+    page: page,
+    page_size: pageSize,
   });
-  interface DataType {
-    data?: TStatTeam[];
-    refetch: <TPageData>(
-      options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
-    ) => Promise<QueryObserverResult<TStatTeam[], unknown>>;
-    isLoading: boolean;
-  }
-  const TeamData: DataType = useStatTeamData({
+
+  const TeamData = useStatTeamData({
+    page: page,
+    page_size: pageSize,
     search: "",
     start_date: startDate,
     end_date: endDate,
   });
 
-  interface TaskCreatorsType {
-    data?: TStatCreators[];
-    refetch: <TPageData>(
-      options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
-    ) => Promise<QueryObserverResult<TStatCreators[], unknown>>;
-    isLoading: boolean;
-  }
-
-  const CreatorsData: TaskCreatorsType = useCreatorsData({
+  const CreatorsData = useCreatorsData({
+    page: page,
+    page_size: pageSize,
     search: SupportSearch,
     start_date: startDate,
     end_date: endDate,
@@ -220,7 +236,7 @@ const Stat = () => {
     }, 1000);
   };
 
-  const theme = localStorage.getItem("theme") === "true" ? true : false;
+  // const theme = localStorage.getItem("theme") === "true" ? true : false;
 
   const [activeTab, setActiveTab] = useState("1");
 
@@ -498,6 +514,73 @@ const Stat = () => {
             isLoading={CreatorsData?.isLoading}
             refetch={CreatorsData?.refetch}
           />
+          <Space style={{ width: "100%", marginTop: 40 }} direction="vertical">
+            <Space
+              style={{
+                justifyContent: "end",
+                position: "fixed",
+                bottom: 0,
+                left: 0,
+                width: "100%",
+                backgroundColor: token.colorBgContainer,
+                boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
+                padding: "10px 0",
+                zIndex: 1000,
+              }}
+              wrap
+            >
+              <Select
+                value={pageSize}
+                onChange={handlePageSizeChange}
+                style={{ width: 65, marginRight: 16 }}
+                options={pageSizeOptions.map((size) => ({
+                  label: `${size}`,
+                  value: size,
+                }))}
+              />
+
+              <Button
+                onClick={Previos}
+                disabled={CreatorsData?.data?.previous ? false : true}
+                style={{
+                  backgroundColor: token.colorBgContainer,
+                  color: token.colorText,
+                  border: "none",
+                }}
+              >
+                <LeftOutlined />
+              </Button>
+              <Input
+                disabled
+                style={{
+                  width: 40,
+                  textAlign: "center",
+                  background: token.colorBgContainer,
+                  border: "1px solid",
+                  borderColor: token.colorText,
+                  color: token.colorText,
+                }}
+                value={page}
+                onChange={(e) => {
+                  let num = e.target.value;
+                  if (Number(num) && num !== "0") {
+                    setPage(Number(num));
+                  }
+                }}
+              />
+              <Button
+                onClick={Next}
+                disabled={CreatorsData?.data?.next ? false : true}
+                style={{
+                  backgroundColor: token.colorBgContainer,
+                  color: token.colorText,
+                  border: "none",
+                }}
+              >
+                <RightOutlined />
+              </Button>
+            </Space>
+          </Space>
         </TabPane>
 
         <TabPane
@@ -544,7 +627,7 @@ const Stat = () => {
             />
           </span>
           <StatTable
-            data={{ data: data }}
+            data={data?.data}
             isLoading={isLoading}
             refetch={refetch}
           />
@@ -555,6 +638,74 @@ const Stat = () => {
           >
             Save as file
           </Button>
+
+          <Space style={{ width: "100%", marginTop: 40 }} direction="vertical">
+            <Space
+              style={{
+                justifyContent: "end",
+                position: "fixed",
+                bottom: 0,
+                left: 0,
+                width: "100%",
+                backgroundColor: token.colorBgContainer,
+                boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
+                padding: "10px 0",
+                zIndex: 1000,
+              }}
+              wrap
+            >
+              <Select
+                value={pageSize}
+                onChange={handlePageSizeChange}
+                style={{ width: 65, marginRight: 16 }}
+                options={pageSizeOptions.map((size) => ({
+                  label: `${size}`,
+                  value: size,
+                }))}
+              />
+
+              <Button
+                onClick={Previos}
+                disabled={data?.previous ? false : true}
+                style={{
+                  backgroundColor: token.colorBgContainer,
+                  color: token.colorText,
+                  border: "none",
+                }}
+              >
+                <LeftOutlined />
+              </Button>
+              <Input
+                disabled
+                style={{
+                  width: 40,
+                  textAlign: "center",
+                  background: token.colorBgContainer,
+                  border: "1px solid",
+                  borderColor: token.colorText,
+                  color: token.colorText,
+                }}
+                value={page}
+                onChange={(e) => {
+                  let num = e.target.value;
+                  if (Number(num) && num !== "0") {
+                    setPage(Number(num));
+                  }
+                }}
+              />
+              <Button
+                onClick={Next}
+                disabled={data?.next ? false : true}
+                style={{
+                  backgroundColor: token.colorBgContainer,
+                  color: token.colorText,
+                  border: "none",
+                }}
+              >
+                <RightOutlined />
+              </Button>
+            </Space>
+          </Space>
         </TabPane>
         <TabPane
           tab={
@@ -570,7 +721,7 @@ const Stat = () => {
           key="4"
         >
           <StatTeamTable
-            data={TeamData?.data}
+            data={TeamData?.data?.data}
             isLoading={TeamData?.isLoading}
             refetch={TeamData?.refetch}
           />
@@ -631,6 +782,73 @@ const Stat = () => {
               </LineChart>
             </ResponsiveContainer>
           </div>
+          <Space style={{ width: "100%", marginTop: 40 }} direction="vertical">
+            <Space
+              style={{
+                justifyContent: "end",
+                position: "fixed",
+                bottom: 0,
+                left: 0,
+                width: "100%",
+                backgroundColor: token.colorBgContainer,
+                boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
+                padding: "10px 0",
+                zIndex: 1000,
+              }}
+              wrap
+            >
+              <Select
+                value={pageSize}
+                onChange={handlePageSizeChange}
+                style={{ width: 65, marginRight: 16 }}
+                options={pageSizeOptions.map((size) => ({
+                  label: `${size}`,
+                  value: size,
+                }))}
+              />
+
+              <Button
+                onClick={Previos}
+                disabled={TeamData?.data?.previous ? false : true}
+                style={{
+                  backgroundColor: token.colorBgContainer,
+                  color: token.colorText,
+                  border: "none",
+                }}
+              >
+                <LeftOutlined />
+              </Button>
+              <Input
+                disabled
+                style={{
+                  width: 40,
+                  textAlign: "center",
+                  background: token.colorBgContainer,
+                  border: "1px solid",
+                  borderColor: token.colorText,
+                  color: token.colorText,
+                }}
+                value={page}
+                onChange={(e) => {
+                  let num = e.target.value;
+                  if (Number(num) && num !== "0") {
+                    setPage(Number(num));
+                  }
+                }}
+              />
+              <Button
+                onClick={Next}
+                disabled={TeamData?.data?.next ? false : true}
+                style={{
+                  backgroundColor: token.colorBgContainer,
+                  color: token.colorText,
+                  border: "none",
+                }}
+              >
+                <RightOutlined />
+              </Button>
+            </Space>
+          </Space>
         </TabPane>
       </Tabs>
     </div>
diff --git a/src/Components/Statistics/StatisticTable.tsx b/src/Components/Statistics/StatisticTable.tsx
index 1b6076b..7b04a07 100644
--- a/src/Components/Statistics/StatisticTable.tsx
+++ b/src/Components/Statistics/StatisticTable.tsx
@@ -19,7 +19,7 @@ const StatTable = ({
   refetch: <TPageData>(
     options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
   ) => Promise<QueryObserverResult<TStat[], unknown>>;
-  data: { data: TStat[] | undefined };
+  data: any;
   isLoading: boolean;
 }) => {
   const { token } = theme.useToken();
@@ -29,7 +29,7 @@ const StatTable = ({
       <Table
         size="small"
         loading={isLoading}
-        dataSource={data?.data?.map((u, i) => ({
+        dataSource={data?.map((u: any, i: any) => ({
           no: i + 1,
           ...u,
         }))}
@@ -104,23 +104,24 @@ const StatTable = ({
           //   sortDirections: ["ascend", "descend"],
           // },
         ]}
-        pagination={{
-          pageSize: 10,
-          size: "default",
-          style: {
-            margin: 0,
-            justifyContent: "end",
-            position: "fixed",
-            bottom: 0,
-            left: 0,
-            width: "100%",
-            backgroundColor: token.colorBgContainer,
-            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
-            padding: "10px 0",
-            zIndex: 1000,
-          },
-          showLessItems: true,
-        }}
+        // pagination={{
+        //   pageSize: 10,
+        //   size: "default",
+        //   style: {
+        //     margin: 0,
+        //     justifyContent: "end",
+        //     position: "fixed",
+        //     bottom: 0,
+        //     left: 0,
+        //     width: "100%",
+        //     backgroundColor: token.colorBgContainer,
+        //     boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
+        //     padding: "10px 0",
+        //     zIndex: 1000,
+        //   },
+        //   showLessItems: true,
+        // }}
+        pagination={false}
         rowClassName={(record, index) =>
           index % 2 === 0 ? "odd-row" : "even-row"
         }
diff --git a/src/Components/Statistics/StatisticTeamTable.tsx b/src/Components/Statistics/StatisticTeamTable.tsx
index 73b34bb..9917d6d 100644
--- a/src/Components/Statistics/StatisticTeamTable.tsx
+++ b/src/Components/Statistics/StatisticTeamTable.tsx
@@ -17,7 +17,7 @@ const StatTeamTable = ({
   refetch: <TPageData>(
     options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
   ) => Promise<QueryObserverResult<TStatTeam[], unknown>>;
-  data: TStatTeam[] | undefined;
+  data: any;
   isLoading: boolean;
 }) => {
   const { token } = theme.useToken();
@@ -26,7 +26,7 @@ const StatTeamTable = ({
       <Table
         loading={isLoading}
         size="small"
-        dataSource={data?.map((u, i) => ({
+        dataSource={data?.map((u: any, i: any) => ({
           no: i + 1,
           ...u,
         }))}
@@ -70,22 +70,23 @@ const StatTeamTable = ({
             },
           },
         ]}
-        pagination={{
-          pageSize: 10,
-          size: "default",
-          style: {
-            margin: 0,
-            justifyContent: "end",
-            position: "fixed",
-            bottom: 0,
-            left: 0,
-            width: "100%",
-            backgroundColor: token.colorBgContainer,
-            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
-            padding: "10px 0",
-            zIndex: 1000,
-          },
-        }}
+        // pagination={{
+        //   pageSize: 10,
+        //   size: "default",
+        //   style: {
+        //     margin: 0,
+        //     justifyContent: "end",
+        //     position: "fixed",
+        //     bottom: 0,
+        //     left: 0,
+        //     width: "100%",
+        //     backgroundColor: token.colorBgContainer,
+        //     boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
+        //     padding: "10px 0",
+        //     zIndex: 1000,
+        //   },
+        // }}
+        pagination={false}
         rowClassName={(record, index) =>
           index % 2 === 0 ? "odd-row" : "even-row"
         }
diff --git a/src/Components/Statistics/StatisticsSupportTable.tsx b/src/Components/Statistics/StatisticsSupportTable.tsx
index 02dba2e..20213ca 100644
--- a/src/Components/Statistics/StatisticsSupportTable.tsx
+++ b/src/Components/Statistics/StatisticsSupportTable.tsx
@@ -17,7 +17,7 @@ const StatisticsSupportTable = ({
   refetch: <TPageData>(
     options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
   ) => Promise<QueryObserverResult<TStatCreators[], unknown>>;
-  data: TStatCreators[] | undefined;
+  data: any;
   isLoading: boolean;
 }) => {
   const { token } = theme.useToken();
@@ -26,7 +26,7 @@ const StatisticsSupportTable = ({
       <Table
         loading={isLoading}
         size="small"
-        dataSource={data?.map((u, i) => ({
+        dataSource={data?.data?.map((u: any, i: any) => ({
           no: i + 1,
           ...u,
         }))}
@@ -51,23 +51,24 @@ const StatisticsSupportTable = ({
             dataIndex: "number_of_tasks",
           },
         ]}
-        pagination={{
-          pageSize: 10,
-          size: "default",
-          style: {
-            margin: 0,
-            justifyContent: "end",
-            position: "fixed",
-            bottom: 0,
-            left: 0,
-            width: "100%",
-            backgroundColor: token.colorBgContainer,
-            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
-            padding: "10px 0",
-            zIndex: 1000,
-          },
-          showLessItems: true,
-        }}
+        // pagination={{
+        //   pageSize: 10,
+        //   size: "default",
+        //   style: {
+        //     margin: 0,
+        //     justifyContent: "end",
+        //     position: "fixed",
+        //     bottom: 0,
+        //     left: 0,
+        //     width: "100%",
+        //     backgroundColor: token.colorBgContainer,
+        //     boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
+        //     padding: "10px 0",
+        //     zIndex: 1000,
+        //   },
+        //   showLessItems: true,
+        // }}
+        pagination={false}
         rowClassName={(record, index) =>
           index % 2 === 0 ? "odd-row" : "even-row"
         }
diff --git a/src/Components/Tasks/AddTask.tsx b/src/Components/Tasks/AddTask.tsx
index 36dc76c..fe06c6b 100644
--- a/src/Components/Tasks/AddTask.tsx
+++ b/src/Components/Tasks/AddTask.tsx
@@ -105,7 +105,7 @@ const AddTask = ({
   }, [companyId, customerName]);
 
   // service select
-  const serviceOptions = ServiceData?.data?.map((item) => ({
+  const serviceOptions = ServiceData?.data?.map((item: any) => ({
     label: item?.title,
     value: item?.id,
   }));
@@ -332,7 +332,7 @@ const AddTask = ({
               >
                 <Select
                   placeholder="Teams"
-                  options={TeamData?.data?.map((item) => ({
+                  options={TeamData?.data?.map((item: any) => ({
                     label: item?.name,
                     value: item?.id,
                   }))}
diff --git a/src/Components/Tasks/TaskModal.tsx b/src/Components/Tasks/TaskModal.tsx
index 78fced8..1d18816 100644
--- a/src/Components/Tasks/TaskModal.tsx
+++ b/src/Components/Tasks/TaskModal.tsx
@@ -119,42 +119,44 @@ const TaskModal = ({
 
   const teamData = useTeamData({});
   // const teamData = useCustomerData({name: "", page: 1, page_size: 100});
-  const teams: MenuProps["items"] = teamData?.data?.map((item, index) => ({
-    key: item?.id,
-    label: (
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-        }}
-      >
-        <div
-          style={{
-            width: 10,
-            height: 10,
-            background: `rgb(${index * (255 / teamData?.data.length)}, ${
-              255 - index * (255 / teamData?.data.length)
-            }, 0)`,
-            padding: 5,
-            borderRadius: 5,
-            marginRight: 10,
-          }}
-        ></div>
+  const teams: MenuProps["items"] = teamData?.data?.map(
+    (item: any, index: number) => ({
+      key: item?.id,
+      label: (
         <div
           style={{
             display: "flex",
-            justifyContent: "space-between",
             alignItems: "center",
-            width: "100%",
           }}
         >
-          <p>{item?.name}</p>
-          <p style={{ marginLeft: 30 }}>{item?.task_count_percentage}%</p>
+          <div
+            style={{
+              width: 10,
+              height: 10,
+              background: `rgb(${index * (255 / teamData?.data.length)}, ${
+                255 - index * (255 / teamData?.data.length)
+              }, 0)`,
+              padding: 5,
+              borderRadius: 5,
+              marginRight: 10,
+            }}
+          ></div>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              width: "100%",
+            }}
+          >
+            <p>{item?.name}</p>
+            <p style={{ marginLeft: 30 }}>{item?.task_count_percentage}%</p>
+          </div>
         </div>
-      </div>
-    ),
-    onClick: () => teampatch(item),
-  }));
+      ),
+      onClick: () => teampatch(item),
+    })
+  );
   const items: MenuProps["items"] = [
     {
       key: "1",
diff --git a/src/Components/Tasks/Tasks.tsx b/src/Components/Tasks/Tasks.tsx
index bc2503b..fa8315f 100644
--- a/src/Components/Tasks/Tasks.tsx
+++ b/src/Components/Tasks/Tasks.tsx
@@ -43,10 +43,18 @@ const Task = ({
   const [search, setSearch] = useState<string>("");
   const [status, setStatus] = useState<any>();
   const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
   const [uploadOpen, setUploadOpen] = useState(false);
   const [errorModal, setErrorModal] = useState(false);
   const [uncomletedData, setUncomletedData] = useState<TTask[]>();
 
+  const pageSizeOptions = [10, 20, 30, 40, 50];
+
+  const handlePageSizeChange = (value: number) => {
+    setPageSize(value);
+    setPage(1);
+  };
+
   useEffect(() => {
     if (
       socketData &&
@@ -57,7 +65,7 @@ const Task = ({
       // &&(!status || status.includes(socketData?.task?.status))
     ) {
       setCharacters((prev: any) => {
-        if (prev && prev?.length >= 15) {
+        if (prev && prev?.length >= 10) {
           prev?.pop();
         }
         if (socketData.type === "task_create" && socketData.task) {
@@ -128,7 +136,7 @@ const Task = ({
   const teamData = useTeamData({});
 
   const teamOptions: { label: string; value: any }[] | undefined =
-    teamData?.data?.map((item) => ({
+    teamData?.data?.map((item: any) => ({
       label: item?.name,
       value: item?.id,
     }));
@@ -137,7 +145,7 @@ const Task = ({
     status,
     team,
     page,
-    page_size: 10,
+    page_size: pageSize,
   });
   useEffect(() => {
     if (data) {
@@ -352,6 +360,15 @@ const Task = ({
           }}
           wrap
         >
+          <Select
+            value={pageSize}
+            onChange={handlePageSizeChange}
+            style={{ width: 65, marginRight: 16 }}
+            options={pageSizeOptions.map((size) => ({
+              label: `${size}`,
+              value: size,
+            }))}
+          />
           <Button
             onClick={Previos}
             disabled={data?.previous ? false : true}
diff --git a/src/Components/Teams/TeamTable.tsx b/src/Components/Teams/TeamTable.tsx
index eb66870..b1e4f4e 100644
--- a/src/Components/Teams/TeamTable.tsx
+++ b/src/Components/Teams/TeamTable.tsx
@@ -61,22 +61,23 @@ const TeamTable = ({
           dataIndex: "created",
         },
       ]}
-      pagination={{
-        pageSize: 10,
-        size: "default",
-        style: {
-          margin: 0,
-          justifyContent: "end",
-          position: "fixed",
-          bottom: 0,
-          left: 0,
-          width: "100%",
-          backgroundColor: token.colorBgContainer,
-          boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
-          padding: "10px 0",
-          zIndex: 1000,
-        },
-      }}
+      // pagination={{
+      //   pageSize: 10,
+      //   size: "default",
+      //   style: {
+      //     margin: 0,
+      //     justifyContent: "end",
+      //     position: "fixed",
+      //     bottom: 0,
+      //     left: 0,
+      //     width: "100%",
+      //     backgroundColor: token.colorBgContainer,
+      //     boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
+      //     padding: "10px 0",
+      //     zIndex: 1000,
+      //   },
+      // }}
+      pagination={false}
       bordered
     />
   );
diff --git a/src/Components/Teams/Teams.tsx b/src/Components/Teams/Teams.tsx
index ce88124..007aa2b 100644
--- a/src/Components/Teams/Teams.tsx
+++ b/src/Components/Teams/Teams.tsx
@@ -4,17 +4,43 @@ import TeamTable from "./TeamTable";
 //@ts-ignore
 import addicon from "../../assets/addiconpng.png";
 import AddTeam from "./AddTeam";
-import { Button, Typography } from "antd";
-import { PlusOutlined } from "@ant-design/icons";
+import { Button, Input, Select, Space, Typography, theme } from "antd";
+import { LeftOutlined, PlusOutlined, RightOutlined } from "@ant-design/icons";
 
 const Team = () => {
-  const { data, isLoading, refetch } = useTeamData({});
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const { data, isLoading, refetch } = useTeamData({
+    page: page,
+    page_size: pageSize,
+  });
+
   const [open, setOpen] = useState(false);
   const showModal = () => {
     setOpen(true);
   };
 
-  const theme = localStorage.getItem("theme") === "true" ? true : false;
+  const pageSizeOptions = [10, 20, 30, 40, 50];
+
+  const handlePageSizeChange = (value: number) => {
+    setPageSize(value);
+    setPage(1);
+  };
+
+  const Next = () => {
+    const a = Number(page) + 1;
+    setPage(a);
+  };
+  const Previos = () => {
+    Number(page);
+    if (page > 1) {
+      const a = Number(page) - 1;
+      setPage(a);
+    }
+  };
+
+  const { token } = theme.useToken();
 
   return (
     <div>
@@ -43,7 +69,74 @@ const Team = () => {
           Add Team
         </Button>
       </div>
-      <TeamTable data={data} isLoading={isLoading} refetch={refetch} />
+      <TeamTable data={data?.data} isLoading={isLoading} refetch={refetch} />
+      <Space style={{ width: "100%", marginTop: 40 }} direction="vertical">
+        <Space
+          style={{
+            justifyContent: "end",
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            width: "100%",
+            backgroundColor: token.colorBgContainer,
+            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
+            padding: "10px 0",
+            zIndex: 1000,
+          }}
+          wrap
+        >
+          <Select
+            value={pageSize}
+            onChange={handlePageSizeChange}
+            style={{ width: 65, marginRight: 16 }}
+            options={pageSizeOptions.map((size) => ({
+              label: `${size}`,
+              value: size,
+            }))}
+          />
+
+          <Button
+            onClick={Previos}
+            disabled={data?.previous ? false : true}
+            style={{
+              backgroundColor: token.colorBgContainer,
+              color: token.colorText,
+              border: "none",
+            }}
+          >
+            <LeftOutlined />
+          </Button>
+          <Input
+            disabled
+            style={{
+              width: 40,
+              textAlign: "center",
+              background: token.colorBgContainer,
+              border: "1px solid",
+              borderColor: token.colorText,
+              color: token.colorText,
+            }}
+            value={page}
+            onChange={(e) => {
+              let num = e.target.value;
+              if (Number(num) && num !== "0") {
+                setPage(Number(num));
+              }
+            }}
+          />
+          <Button
+            onClick={Next}
+            disabled={data?.next ? false : true}
+            style={{
+              backgroundColor: token.colorBgContainer,
+              color: token.colorText,
+              border: "none",
+            }}
+          >
+            <RightOutlined />
+          </Button>
+        </Space>
+      </Space>
     </div>
   );
 };
diff --git a/src/Components/Updates/Update.tsx b/src/Components/Updates/Update.tsx
index 402ae93..81c12cb 100644
--- a/src/Components/Updates/Update.tsx
+++ b/src/Components/Updates/Update.tsx
@@ -35,10 +35,16 @@ const Update = () => {
   const { Option } = Select;
 
   const [page, setPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState(10);
 
-  const page_size: number = 10;
+  const pageSizeOptions = [10, 20, 30, 40, 50];
 
-  const { data, refetch, isLoading } = useUpdateData(status, page, page_size);
+  const handlePageSizeChange = (value: number) => {
+    setPageSize(value);
+    setPage(1); // Odatda pageSize o'zgarganda sahifani 1 ga qaytaramiz
+  };
+
+  const { data, refetch, isLoading } = useUpdateData(status, page, pageSize);
 
   const showModal = () => {
     setOpen(true);
@@ -141,6 +147,15 @@ const Update = () => {
           }}
           wrap
         >
+          <Select
+            value={pageSize}
+            onChange={handlePageSizeChange}
+            style={{ width: 65, marginRight: 16 }}
+            options={pageSizeOptions.map((size) => ({
+              label: `${size}`,
+              value: size,
+            }))}
+          />
           <Button
             onClick={Previos}
             disabled={data?.previous ? false : true}
diff --git a/src/Components/Users/UserEdit.tsx b/src/Components/Users/UserEdit.tsx
index f7ceead..d5f823e 100644
--- a/src/Components/Users/UserEdit.tsx
+++ b/src/Components/Users/UserEdit.tsx
@@ -64,7 +64,7 @@ const UserEdit = () => {
   const TeamData = useTeamData({});
   const noTeamOption = { label: " - - - - - -", value: "" };
   const TeamOption: { label: string; value: any }[] | undefined =
-    TeamData?.data?.map((item) => ({
+    TeamData?.data?.map((item: any) => ({
       label: item?.name,
       value: item?.id,
     }));
diff --git a/src/Components/Users/Users.tsx b/src/Components/Users/Users.tsx
index 49e2068..20b9306 100644
--- a/src/Components/Users/Users.tsx
+++ b/src/Components/Users/Users.tsx
@@ -8,7 +8,7 @@ import {
   RightOutlined,
   SearchOutlined,
 } from "@ant-design/icons";
-import { theme } from "antd";
+import { Select, theme } from "antd";
 // @ts-ignore
 import IconSearch from "../../assets/searchIcon.png";
 //@ts-ignore
@@ -17,6 +17,7 @@ import { Button, Input, Pagination, Space, Typography } from "antd";
 
 const User = () => {
   const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
   const showModal = () => {
@@ -39,9 +40,16 @@ const User = () => {
     name: search,
     team: "",
     page: page,
-    page_size: 10,
+    page_size: pageSize,
   });
 
+  const pageSizeOptions = [10, 20, 30, 40, 50];
+
+  const handlePageSizeChange = (value: number) => {
+    setPageSize(value);
+    setPage(1);
+  };
+
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (timerRef.current) {
@@ -118,6 +126,16 @@ const User = () => {
           }}
           wrap
         >
+          <Select
+            value={pageSize}
+            onChange={handlePageSizeChange}
+            style={{ width: 65, marginRight: 16 }}
+            options={pageSizeOptions.map((size) => ({
+              label: `${size}`,
+              value: size,
+            }))}
+          />
+
           <Button
             onClick={Previos}
             disabled={data?.previous ? false : true}
diff --git a/src/Hooks/Accounting/index.ts b/src/Hooks/Accounting/index.ts
index 2c08500..83cd7e5 100644
--- a/src/Hooks/Accounting/index.ts
+++ b/src/Hooks/Accounting/index.ts
@@ -1,22 +1,41 @@
 import { useQuery } from "react-query";
 import {
   AccountingController,
+  TAccountingConfirmedMonthsParams,
   TAccountingGetParams,
   TAccountingHistoryGetParams,
 } from "../../API/LayoutApi/accounting";
+import { TAccountingConfirmedMonths } from "../../types/Accounting/TAccounting";
 
 export const useAccountingData = ({
   month,
   search,
   team,
+  page,
+  page_size,
+  role,
+  salary_type,
 }: TAccountingGetParams) => {
   return useQuery(
-    [`/employees-salaries`, month, search, team],
+    [
+      `/employees-salaries`,
+      month,
+      search,
+      team,
+      page,
+      page_size,
+      role,
+      salary_type,
+    ],
     () =>
       AccountingController.read({
         month,
         search,
         team,
+        page,
+        page_size,
+        role,
+        salary_type,
       }),
     { refetchOnWindowFocus: false }
   );
@@ -25,20 +44,43 @@ export const useAccountingData = ({
 export const useAccountingHistory = ({
   search,
   team,
+  page,
+  page_size,
+  role,
+  salary_type,
 }: TAccountingHistoryGetParams) => {
   return useQuery(
-    [`/employees-salaries-history/`, search, team],
-    () => AccountingController.history({ search, team }),
+    [
+      `/employees-salaries-history/`,
+      search,
+      team,
+      page,
+      page_size,
+      role,
+      salary_type,
+    ],
+    () =>
+      AccountingController.history({
+        search,
+        team,
+        page,
+        page_size,
+        role,
+        salary_type,
+      }),
     {
       refetchOnWindowFocus: false,
     }
   );
 };
 
-export const useConfirmedMonths = () => {
+export const useConfirmedMonths = ({
+  page,
+  page_size,
+}: TAccountingConfirmedMonthsParams) => {
   return useQuery(
-    [`/salaries-group`],
-    () => AccountingController.confirmedMonths(),
+    [`/salaries-group`, page, page_size],
+    () => AccountingController.confirmedMonths({ page, page_size }),
     {
       refetchOnWindowFocus: false,
     }
diff --git a/src/Hooks/Services/index.ts b/src/Hooks/Services/index.ts
index 93d7cff..128af9c 100644
--- a/src/Hooks/Services/index.ts
+++ b/src/Hooks/Services/index.ts
@@ -1,10 +1,10 @@
 import { useQuery } from "react-query";
 import { serviceController } from "../../API/LayoutApi/services";
 
-export const useServiceData = () => {
+export const useServiceData = (page?: number, page_size?: number) => {
   return useQuery(
-    [`services/`],
-    () => serviceController.read(),
+    [`services/`, page, page_size],
+    () => serviceController.read(page, page_size),
     { refetchOnWindowFocus: false }
   );
 };
@@ -16,4 +16,3 @@ export const useServiceOne = (serviceId: number | undefined) => {
     { refetchOnWindowFocus: false }
   );
 };
-
diff --git a/src/Hooks/Stats/index.ts b/src/Hooks/Stats/index.ts
index 4f8bf74..bbecd6b 100644
--- a/src/Hooks/Stats/index.ts
+++ b/src/Hooks/Stats/index.ts
@@ -12,11 +12,30 @@ export const useStatsData = ({
   start_date,
   end_date,
   for_salary,
+  page,
+  page_size,
 }: TStatGetParams) => {
   return useQuery(
-    [`stats/all-users/`, search, team, start_date, end_date, for_salary],
+    [
+      `stats/all-users/`,
+      page,
+      page_size,
+      search,
+      team,
+      start_date,
+      end_date,
+      for_salary,
+    ],
     () =>
-      statController.read({ search, team, start_date, end_date, for_salary }),
+      statController.read({
+        search,
+        team,
+        start_date,
+        end_date,
+        for_salary,
+        page,
+        page_size,
+      }),
     { refetchOnWindowFocus: false }
   );
 };
@@ -24,22 +43,34 @@ export const useStatTeamData = ({
   search,
   start_date,
   end_date,
+  page,
+  page_size,
 }: TStatGetParams) => {
   return useQuery(
-    [`stats/all-teams/`, search, start_date, end_date],
-    () => statController.team({ search, start_date, end_date }),
+    [`stats/all-teams/`, search, start_date, end_date, page_size, page],
+    () =>
+      statController.team({ search, start_date, end_date, page, page_size }),
     { refetchOnWindowFocus: false }
   );
 };
 
 export const useCreatorsData = ({
+  page,
+  page_size,
   start_date,
   end_date,
   search,
 }: TStatCreatorsGetParams) => {
   return useQuery(
-    [`stats/task-creators/`, search, start_date, end_date],
-    () => statController.creators({ start_date, end_date, search }),
+    [`stats/task-creators/`, search, start_date, end_date, page, page_size],
+    () =>
+      statController.creators({
+        start_date,
+        end_date,
+        search,
+        page,
+        page_size,
+      }),
     { refetchOnWindowFocus: false }
   );
 };
diff --git a/src/Hooks/Teams/index.ts b/src/Hooks/Teams/index.ts
index 7a73176..88c7f6a 100644
--- a/src/Hooks/Teams/index.ts
+++ b/src/Hooks/Teams/index.ts
@@ -1,10 +1,15 @@
 import { useQuery } from "react-query";
 import { TTeamGetParams, teamController } from "../../API/LayoutApi/teams";
 
-export const useTeamData = ({ name, company_id }: TTeamGetParams) => {
+export const useTeamData = ({
+  name,
+  company_id,
+  page,
+  page_size,
+}: TTeamGetParams) => {
   return useQuery(
-    [`teams`, name, company_id],
-    () => teamController.read({ name, company_id }),
+    [`teams`, name, company_id, page, page_size],
+    () => teamController.read({ name, company_id, page, page_size }),
     {
       refetchOnWindowFocus: false,
     }