update design

src/App.css

@@ -104,7 +104,7 @@
 
 .profile-dropdown:hover {
   border-radius: 8px;
-  background: #7c7c7c;
+  cursor: pointer;
 }
 
 .profile-dropdown-ava {
@@ -865,6 +865,10 @@
   border-radius: 8px;
 } */
 
+.ant-pagination-item {
+  width: 40px;
+}
+
 .btn-refresh-dark img {
   animation: none;
   transition: transform 0.2s linear;

src/App.tsx

@@ -481,7 +481,7 @@ const App: React.FC = () => {
                     >
                       <img src={themeBtn} alt="" />
                     </button>
-                    <Dropdown overlay={menu} trigger={["click"]}>
+                    <Dropdown overlay={menu} trigger={["hover"]}>
                       <div
                         style={{ cursor: "pointer" }}
                         onClick={(e) => e.preventDefault()}

src/Components/CallRequests/Call.tsx

@@ -11,6 +11,8 @@ import {
 } from "antd";
 import { TCall } from "../../types/CallRequests/TCall";
 import { TSocket } from "../../types/common/TSocket";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import { theme } from "antd";
 
 const Call = ({ socketData }: { socketData: TSocket | undefined }) => {
   const [status, setStatus] = useState("Awaiting");
@@ -19,10 +21,11 @@ const Call = ({ socketData }: { socketData: TSocket | undefined }) => {
   const { data, isLoading, refetch } = useCallData({
     status: status,
     page: page,
-    page_size: 10,
+    page_size: 15,
   });
 
-  const theme = localStorage.getItem("theme") === "true" ? true : false;
+  // const theme = localStorage.getItem("theme") === "true" ? true : false;
+  const { token } = theme.useToken();
 
   useEffect(() => {
     setTableData(data?.data);
@@ -98,13 +101,42 @@ const Call = ({ socketData }: { socketData: TSocket | undefined }) => {
       </div>
       <CallTable data={tableData} isLoading={isLoading} refetch={refetch} />
 
-      {/* <Space style={{ width: "100%", marginTop: 10 }} direction="vertical">
-        <Space style={{ width: "100%", justifyContent: "flex-end" }} wrap>
-          <Button onClick={Previos} disabled={data?.previous ? false : true}>
-            <img src={leftPagination} />
+      <Space style={{ width: "100%", marginTop: 10 }} 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
+        >
+          <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;
@@ -113,11 +145,19 @@ const Call = ({ socketData }: { socketData: TSocket | undefined }) => {
               }
             }}
           />
-          <Button onClick={Next} disabled={data?.next ? false : true}>
-            <img src={rightPagination} />
+          <Button
+            onClick={Next}
+            disabled={data?.next ? false : true}
+            style={{
+              backgroundColor: token.colorBgContainer,
+              color: token.colorText,
+              border: "none",
+            }}
+          >
+            <RightOutlined />
           </Button>
         </Space>
-      </Space> */}
+      </Space>
     </div>
   );
 };

src/Components/Companies/Companies.tsx

@@ -30,7 +30,7 @@ const Company = () => {
     name: search,
     is_active: undefined,
     page: page,
-    page_size: 10,
+    page_size: 15,
   });
 
   const timerRef = useRef<NodeJS.Timeout | null>(null);

src/Components/Customers/Customers.tsx

@@ -19,19 +19,13 @@ const Customer = () => {
     setOpen(true);
   };
 
-  const page_size = 10;
-
-  const handlePageChange = (page: number) => {
-    setPage(page);
-  };
-
   const { token } = theme.useToken();
 
   const [search, setSearch] = useState("");
   const { data, isLoading, refetch } = useCustomerData({
     name: search,
     is_active: undefined,
-    page_size: 10,
+    page_size: 15,
     page: page,
   });
 
@@ -142,9 +136,9 @@ const Customer = () => {
 
           {/* <Pagination
             current={page}
-            total={10}
-            pageSize={page_size}
-            onChange={handlePageChange}
+            total={100}
+            pageSize={data?.page_size}
+            onChange={(page) => setPage(page)}
           /> */}
         </Space>
       </Space>

src/Components/Profile/Profile.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import dayjs from "dayjs";
 
 import {
   LineChart,
@@ -88,6 +89,12 @@ const Profile = () => {
     tasks: stat.number_of_tasks,
   }));
 
+  const firstDayOfMonth = dayjs().startOf("month"); // Oyning birinchi kuni
+  // const lastDayOfMonth = dayjs().endOf("month");
+  const today = dayjs();
+
+  const dateFormat = "YYYY-MM-DD";
+
   return (
     <div>
       <Spin size="large" spinning={!data}>
@@ -165,13 +172,17 @@ const Profile = () => {
                       <Row gutter={[16, 10]}>
                         {data && data.team !== "" && (
                           <Col>
-                            <Form.Item
-                              wrapperCol={{ span: "100%" }}
-                              label="Team"
-                              name="team"
-                            >
-                              <Input readOnly />
-                            </Form.Item>
+                            {role === "Owner" || role === "Tech Support" ? (
+                              ""
+                            ) : (
+                              <Form.Item
+                                wrapperCol={{ span: "100%" }}
+                                label="Team"
+                                name="team"
+                              >
+                                <Input readOnly />
+                              </Form.Item>
+                            )}
                           </Col>
                         )}
                       </Row>
@@ -185,7 +196,13 @@ const Profile = () => {
                         justifyContent: "flex-start",
                       }}
                     >
-                      <RangePicker onCalendarChange={datePick} />
+                      <RangePicker
+                        onCalendarChange={datePick}
+                        defaultValue={[
+                          dayjs(firstDayOfMonth, dateFormat),
+                          dayjs(today, dateFormat),
+                        ]}
+                      />
                     </div>
 
                     <div

src/Components/Teams/TeamTable.tsx

@@ -62,7 +62,7 @@ const TeamTable = ({
         },
       ]}
       pagination={{
-        pageSize: 10,
+        pageSize: 15,
         size: "default",
         style: {
           margin: 0,

src/Components/Updates/UpdateTable.tsx

@@ -297,7 +297,7 @@ const UpdateTable = ({
         size="small"
         scroll={{ x: "768px" }}
         pagination={{
-          pageSize: 10,
+          pageSize: 15,
           size: "default",
           style: {
             margin: 0,

src/Components/Users/UserTable.tsx

@@ -107,7 +107,7 @@ const UserTable = ({
         }
         scroll={{ x: "768px" }}
         pagination={{
-          pageSize: 50,
+          pageSize: 15,
           size: "default",
           style: {
             margin: 0,