diff --git a/src/App.css b/src/App.css index 756c401..b817aaa 100644 --- a/src/App.css +++ b/src/App.css @@ -827,14 +827,14 @@ ) !important; /* Используйте нужный вам цвет фона */ } -.ant-pagination { +/* .ant-pagination { position: fixed; - bottom: 90px; + + bottom: 0; right: 20px; - color: #f99e2c; -} +} */ -.ant-pagination-item-active { +/* .ant-pagination-item-active { background-color: #f99e2c; color: white; } @@ -854,17 +854,16 @@ } .ant-pagination .ant-pagination-item-active:hover { border-color: #f99e3c; -} +} */ -.ant-pagination-prev, +/* .ant-pagination-prev, .ant-pagination-next { width: 40px; height: 32px; background-color: #fff; border: 1px solid #d7d8e0; border-radius: 8px; - background-color: transparent; -} +} */ .btn-refresh-dark img { animation: none; @@ -888,10 +887,6 @@ animation: spin 1s linear; } -.ant-btn-default { - color: #0f111c; -} - @keyframes spin { 0% { transform: rotate(0deg); diff --git a/src/App.tsx b/src/App.tsx index 6b07ef6..25d9bdb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -391,6 +391,7 @@ const App: React.FC = () => { onCollapse={toggleCollapsed} style={{ height: "100vh", + zIndex: 9999, background: theme === true ? "#202020" : "rgba(20, 22, 41, 1)", }} diff --git a/src/Auth/Login.tsx b/src/Auth/Login.tsx index 5d74048..c5e1fc0 100644 --- a/src/Auth/Login.tsx +++ b/src/Auth/Login.tsx @@ -1,7 +1,12 @@ import React from "react"; import { Button, Card, Input, Space } from "antd"; import { Form, Field } from "react-final-form"; -import { LockOutlined, UserOutlined } from "@ant-design/icons"; +import { + EyeInvisibleOutlined, + EyeTwoTone, + LockOutlined, + UserOutlined, +} from "@ant-design/icons"; import { LoginApi } from "../API/auth/Login"; import { Link } from "react-router-dom"; @@ -25,7 +30,12 @@ const Login: React.FC = () => { }; return ( -
+
{ }} > { {...input} type="password" placeholder="Password" + iconRender={(visible) => + visible ? ( + + ) : ( + + ) + } /> {meta.error && meta.touched && ( {meta.error} diff --git a/src/Components/CallRequests/CallTable.tsx b/src/Components/CallRequests/CallTable.tsx index d88c124..c90d3f7 100644 --- a/src/Components/CallRequests/CallTable.tsx +++ b/src/Components/CallRequests/CallTable.tsx @@ -1,4 +1,4 @@ -import { Button, Input, Modal, Space, Table } from "antd"; +import { Button, Input, Modal, Space, Table, theme } from "antd"; import { TCall } from "../../types/CallRequests/TCall"; import { EditOutlined } from "@ant-design/icons"; // @ts-ignore @@ -12,6 +12,7 @@ import { } from "react-query"; import { useState } from "react"; import { TPagination } from "../../types/common/TPagination"; +import useToken from "antd/es/theme/useToken"; const CallTable = ({ data, isLoading, @@ -57,6 +58,9 @@ const CallTable = ({ const handleNoteChange = (e: React.ChangeEvent) => { setNote(e.target.value); }; + + const { token } = theme.useToken(); + return (
diff --git a/src/Components/Companies/Companies.tsx b/src/Components/Companies/Companies.tsx index 5bc1e07..9abcb65 100644 --- a/src/Components/Companies/Companies.tsx +++ b/src/Components/Companies/Companies.tsx @@ -1,9 +1,16 @@ import { useRef, useState } from "react"; import AddCompany from "./AddCompanies"; import CompanyTable from "./CompaniesTable"; -import { StepForwardOutlined, StepBackwardOutlined } from "@ant-design/icons"; +import { + StepForwardOutlined, + StepBackwardOutlined, + LeftOutlined, + RightOutlined, +} from "@ant-design/icons"; import { useCompanyPaginated } from "../../Hooks/Companies"; -import { Button, Input, Space, Typography } from "antd"; +import { Button, Input, Pagination, Space, Typography } from "antd"; +import { theme } from "antd"; + // @ts-ignore import IconSearch from "../../assets/searchIcon.png"; //@ts-ignore @@ -50,7 +57,15 @@ const Company = () => { } }; - const theme = localStorage.getItem("theme") === "true" ? true : false; + const { token } = theme.useToken(); + + const page_size = 15; + + const handlePageChange = (page: number) => { + setPage(page); + }; + + const themes = localStorage.getItem("theme") === "true" ? true : false; return (
@@ -72,7 +87,7 @@ const Company = () => {
{
- {/* - - { let num = e.target.value; @@ -96,11 +141,25 @@ const Company = () => { } }} /> - + {/* */} - */} +
); }; diff --git a/src/Components/Companies/CompaniesTable.tsx b/src/Components/Companies/CompaniesTable.tsx index 53ee8f5..7ab9115 100644 --- a/src/Components/Companies/CompaniesTable.tsx +++ b/src/Components/Companies/CompaniesTable.tsx @@ -18,6 +18,8 @@ import tt from "../../assets/tticon.svg"; import tagIcon from "../../assets/tagIcon.png"; import { role } from "../../App"; +import { theme } from "antd"; + function CompanyTable({ data, isLoading, @@ -35,6 +37,8 @@ function CompanyTable({ } } + const { token } = theme.useToken(); + const getImageSource = (source: string) => { switch (source) { case "Zippy": @@ -139,10 +143,23 @@ function CompanyTable({ } size="small" scroll={{ x: "768px" }} - pagination={{ - pageSize: 10, - size: "default", - }} + // 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/Customers/Customers.tsx b/src/Components/Customers/Customers.tsx index 6fe5054..93b5ac1 100644 --- a/src/Components/Customers/Customers.tsx +++ b/src/Components/Customers/Customers.tsx @@ -1,16 +1,16 @@ import { useRef, useState } from "react"; import AddCustomer from "./AddCustomer"; import CustomerTable from "./CustomersTable"; -import { StepForwardOutlined, StepBackwardOutlined } from "@ant-design/icons"; +import { LeftOutlined, RightOutlined } from "@ant-design/icons"; import { useCustomerData } from "../../Hooks/Customers"; //@ts-ignore import addicon from "../../assets/addiconpng.png"; // @ts-ignore -import leftPagination from "../../assets/pagination-left.png"; -import rightPagination from "../../assets/right-pagination.png"; + import IconSearch from "../../assets/searchIcon.png"; -import { Button, Input, Space, Typography } from "antd"; +import { Button, Input, Pagination, Space, Typography } from "antd"; +import { theme } from "antd"; const Customer = () => { const [open, setOpen] = useState(false); @@ -19,6 +19,14 @@ 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, @@ -50,7 +58,7 @@ const Customer = () => { setSearch(searchText); }, 1000); }; - const theme = localStorage.getItem("theme") === "true" ? true : false; + const themes = localStorage.getItem("theme") === "true" ? true : false; return (
@@ -66,7 +74,7 @@ const Customer = () => {
{
- {/* - - { let num = e.target.value; @@ -89,11 +127,27 @@ const Customer = () => { } }} /> - + + {/* */} - */} + ); }; diff --git a/src/Components/Customers/CustomersTable.tsx b/src/Components/Customers/CustomersTable.tsx index 21c16a7..e853e03 100644 --- a/src/Components/Customers/CustomersTable.tsx +++ b/src/Components/Customers/CustomersTable.tsx @@ -15,6 +15,9 @@ import ontime from "../../assets/ontimeicon.svg"; import tt from "../../assets/tticon.svg"; import { role } from "../../App"; +import { theme } from "antd"; +import { useState } from "react"; + function CustomerTable({ data, isLoading, @@ -26,6 +29,11 @@ function CustomerTable({ id: number; }; + const { token } = theme.useToken(); + + const [pageSize, setPageSize] = useState(10); // Default sahifa hajmi + const [currentPage, setCurrentPage] = useState(1); + const Row = (record: RowProps) => { return { onClick: () => { @@ -95,11 +103,24 @@ function CustomerTable({ } size="middle" bordered - pagination={{ - pageSize: 10, - size: "default", - }} + // 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, + // }, + // }} scroll={{ x: "768px" }} + pagination={false} /> ); diff --git a/src/Components/Profile/Profile.tsx b/src/Components/Profile/Profile.tsx index befba25..c7bb893 100644 --- a/src/Components/Profile/Profile.tsx +++ b/src/Components/Profile/Profile.tsx @@ -178,7 +178,7 @@ const Profile = () => { )}
-

Your Statistics

+

My Statistics

{ }, 1000); }; - const theme = localStorage.getItem("theme") === "true" ? true : false; + const themes = localStorage.getItem("theme") === "true" ? true : false; useEffect(() => { if (data) { @@ -75,6 +81,9 @@ const Requests = ({ socketData }: { socketData: TSocket | undefined }) => { setPage(a); } }; + + const { token } = theme.useToken(); + return (
{modalOpen && ( @@ -92,7 +101,7 @@ const Requests = ({ socketData }: { socketData: TSocket | undefined }) => {
{ setRequestData={setRequestData} /> - {/* - - { let num = e.target.value; @@ -132,11 +169,19 @@ const Requests = ({ socketData }: { socketData: TSocket | undefined }) => { } }} /> - - */} +
); }; diff --git a/src/Components/Requests/RequestsTable.tsx b/src/Components/Requests/RequestsTable.tsx index e16c6c7..5dca020 100644 --- a/src/Components/Requests/RequestsTable.tsx +++ b/src/Components/Requests/RequestsTable.tsx @@ -1,4 +1,4 @@ -import { Button, Space, Table } from "antd"; +import { Button, Space, Table, theme } from "antd"; import { QueryObserverResult, RefetchOptions, @@ -68,6 +68,9 @@ const RequestsTable = ({ refetch(); }); }; + + const { token } = theme.useToken(); + return (
diff --git a/src/Components/Services/ServiceTable.tsx b/src/Components/Services/ServiceTable.tsx index 79d36f0..6b3fad0 100644 --- a/src/Components/Services/ServiceTable.tsx +++ b/src/Components/Services/ServiceTable.tsx @@ -9,6 +9,8 @@ import { TService } from "../../types/Service/TService"; // @ts-ignore import tagIcon from "../../assets/tagIcon.png"; import { role } from "../../App"; +import { theme } from "antd"; + type numStr = string | number; interface serviceSource { @@ -45,6 +47,9 @@ const ServiceTable = ({ dataIndex: "points", }, ]; + + const { token } = theme.useToken(); + return (
diff --git a/src/Components/Services/Services.tsx b/src/Components/Services/Services.tsx index 3ee19bc..1f149f7 100644 --- a/src/Components/Services/Services.tsx +++ b/src/Components/Services/Services.tsx @@ -5,9 +5,20 @@ import ServiceTable from "./ServiceTable"; //@ts-ignore import addicon from "../../assets/addiconpng.png"; import { role } from "../../App"; -import { Typography } from "antd"; +import { Pagination, Space, Typography } from "antd"; +import { theme } from "antd"; const Service = () => { + const [page, setPage] = useState(1); + + const { token } = theme.useToken(); + + const page_size = 10; + + const handlePageChange = (page: number) => { + setPage(page); + }; + const { data, isLoading, refetch } = useServiceData(); const [open, setOpen] = useState(false); const showModal = () => { @@ -27,6 +38,48 @@ const Service = () => { )} + + {/* + + + + { + let num = e.target.value; + if (Number(num) && num !== "0") { + setPage(Number(num)); + } + }} + /> + + + + + */} ); }; diff --git a/src/Components/Statistics/StatisticTable.tsx b/src/Components/Statistics/StatisticTable.tsx index 014317d..06f469f 100644 --- a/src/Components/Statistics/StatisticTable.tsx +++ b/src/Components/Statistics/StatisticTable.tsx @@ -7,6 +7,9 @@ import { } from "react-query"; // @ts-ignore import tagIcon from "../../assets/tagIcon.png"; + +import { theme } from "antd"; + const StatTable = ({ data, isLoading, @@ -18,6 +21,8 @@ const StatTable = ({ data: { data: TStat[] | undefined }; isLoading: boolean; }) => { + const { token } = theme.useToken(); + return (
index % 2 === 0 ? "odd-row" : "even-row" diff --git a/src/Components/Tasks/TaskTable.tsx b/src/Components/Tasks/TaskTable.tsx index 455ced9..5dd995b 100644 --- a/src/Components/Tasks/TaskTable.tsx +++ b/src/Components/Tasks/TaskTable.tsx @@ -20,6 +20,8 @@ import tagIcon from "../../assets/tagIcon.png"; import tgIcon from "../../assets/telegram.png"; import { isMobile, role } from "../../App"; +import { theme } from "antd"; + const admin_id = localStorage.getItem("admin_id"); const TaskTable = ({ data, @@ -81,6 +83,8 @@ const TaskTable = ({ const [isTextSelected, setIsTextSelected] = useState(false); + const { token } = theme.useToken(); + useEffect(() => { const handleSelectionChange = () => { const selection = window.getSelection(); @@ -427,10 +431,23 @@ const TaskTable = ({ rowClassName={rowClassName} scroll={{ x: "768px" }} bordered - pagination={{ - pageSize: 10, - size: "default", - }} + // 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} /> ); diff --git a/src/Components/Tasks/Tasks.tsx b/src/Components/Tasks/Tasks.tsx index d8602f5..bda6c88 100644 --- a/src/Components/Tasks/Tasks.tsx +++ b/src/Components/Tasks/Tasks.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from "react"; import AddTask from "./AddTask"; -import { Button, Input, Select, Space, Typography } from "antd"; +import { Button, Input, Pagination, Select, Space, Typography } from "antd"; import TaskTable from "./TaskTable"; import { useTeamData } from "../../Hooks/Teams"; import { useTasks } from "../../Hooks/Tasks"; @@ -17,6 +17,10 @@ import TaskUploadModal from "./TaskUploadModal"; import { TSocket } from "../../types/common/TSocket"; import ErrorUncompletedTasksModal from "./ErrorUncompletedTasksModal"; +import { LeftOutlined, RightOutlined } from "@ant-design/icons"; + +import { theme } from "antd"; + const { Option } = Select; const Task = ({ socketData, @@ -38,6 +42,8 @@ const Task = ({ const [errorModal, setErrorModal] = useState(false); const [uncomletedData, setUncomletedData] = useState(); + const [pageSize, setPageSize] = useState(10); + useEffect(() => { if ( socketData && @@ -123,13 +129,13 @@ const Task = ({ label: item?.name, value: item?.id, })); - const page_size = isMobile ? 10 : 15; + const page_size = 10; const { data, isLoading, refetch } = useTasks({ search, status, team, page, - page_size, + page_size: 10, }); useEffect(() => { if (data) { @@ -167,6 +173,11 @@ const Task = ({ } }; + const handlePageChange = (page: number, pageSize: number) => { + setPage(page); + setPageSize(pageSize); + }; + const timerRef = useRef(null); const handleSearchChange = (e: React.ChangeEvent) => { if (timerRef.current) { @@ -178,7 +189,9 @@ const Task = ({ setSearch(searchText); }, 1000); }; - const theme = localStorage.getItem("theme") === "true" ? true : false; + const themes = localStorage.getItem("theme") === "true" ? true : false; + + const { token } = theme.useToken(); return (
@@ -210,10 +223,6 @@ const Task = ({ )}
- {/*

- Tasks -

*/} - Tasks
@@ -229,6 +238,10 @@ const Task = ({ )} { let num = e.target.value; @@ -304,11 +346,25 @@ const Task = ({ }} /> - + {/* */} - */} +
); }; diff --git a/src/Components/Teams/TeamTable.tsx b/src/Components/Teams/TeamTable.tsx index 821b2e0..07f0f53 100644 --- a/src/Components/Teams/TeamTable.tsx +++ b/src/Components/Teams/TeamTable.tsx @@ -9,6 +9,9 @@ import { import { timeZone } from "../../App"; // @ts-ignore import tagIcon from "../../assets/tagIcon.png"; + +import { theme } from "antd"; + const TeamTable = ({ data, isLoading, @@ -23,6 +26,8 @@ const TeamTable = ({ const navigate = useNavigate(); const moment = require("moment-timezone"); + const { token } = theme.useToken(); + return (
); diff --git a/src/Components/Updates/Update.tsx b/src/Components/Updates/Update.tsx index e80f0ff..3ff36f4 100644 --- a/src/Components/Updates/Update.tsx +++ b/src/Components/Updates/Update.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import AddUpdate from "./AddUpdate"; -import { Select, Typography } from "antd"; +import { Select, Typography, theme } from "antd"; import UpdateTable from "./UpdateTable"; import { useUpdateData } from "../../Hooks/Update"; //@ts-ignore @@ -22,7 +22,9 @@ const Update = () => { const showModal = () => { setOpen(true); }; - const theme = localStorage.getItem("theme") === "true" ? true : false; + + const { token } = theme.useToken(); + return (
{open && } @@ -35,6 +37,10 @@ const Update = () => {
diff --git a/src/Components/Users/UserTable.tsx b/src/Components/Users/UserTable.tsx index 3628cc5..9771175 100644 --- a/src/Components/Users/UserTable.tsx +++ b/src/Components/Users/UserTable.tsx @@ -11,6 +11,9 @@ import { useNavigate } from "react-router-dom"; import tagIcon from "../../assets/tagIcon.png"; import { isMobile, role } from "../../App"; import { userController } from "../../API/LayoutApi/users"; + +import { theme } from "antd"; + const UserTable = ({ data, isLoading, @@ -33,6 +36,7 @@ const UserTable = ({ isTextSelected = false; } }); + return { onClick: () => { if (isTextSelected) { @@ -43,6 +47,8 @@ const UserTable = ({ }; }; + const { token } = theme.useToken(); + return (
diff --git a/src/Components/Users/Users.tsx b/src/Components/Users/Users.tsx index 2696a29..d5baedd 100644 --- a/src/Components/Users/Users.tsx +++ b/src/Components/Users/Users.tsx @@ -6,7 +6,7 @@ import UserTable from "./UserTable"; import IconSearch from "../../assets/searchIcon.png"; //@ts-ignore import addicon from "../../assets/addiconpng.png"; -import { Typography } from "antd"; +import { Pagination, Space, Typography } from "antd"; const User = () => { const [open, setOpen] = useState(false); @@ -58,6 +58,48 @@ const User = () => { + + {/* + + + + { + let num = e.target.value; + if (Number(num) && num !== "0") { + setPage(Number(num)); + } + }} + /> + + + + + */} ); }; diff --git a/src/Utils/styles.ts b/src/Utils/styles.ts index e51e547..161ab88 100644 --- a/src/Utils/styles.ts +++ b/src/Utils/styles.ts @@ -97,6 +97,13 @@ export const dark = { colorPrimary: "rgba(249, 158, 44, 1)", hoverBorderColor: "#BBBBBB", }, + Pagination: { + itemActiveBg: "#3a3a3a", + colorPrimary: "#bbb", + colorPrimaryHover: "rgba(249, 158, 44, 1)", + colorText: "#fff", + colorTextDisabled: "#fff", + }, Empty: { colorText: "rgba(249, 158, 44, 1)", colorTextDisabled: "rgba(249, 158, 44, 1)", @@ -106,6 +113,7 @@ export const dark = { fontFamily: "Inter, sans-serif", colorText: "#bbb", borderRadius: 8, + colorBgContainer: "#3a3a3a", }, }; export const light = { @@ -138,10 +146,16 @@ export const light = { Menu: { darkItemSelectedBg: "rgba(255, 255, 255, 0.08)", }, + Pagination: { + colorPrimary: "#262626", + colorPrimaryHover: "rgba(249, 158, 44, 1)", + colorBorder: "#000", + }, }, token: { fontFamily: "Inter, sans-serif", color: "#262626", + colorBgContainer: "#fff", borderRadius: 8, }, };