Abdujamol
/
taskboard
mirror of https://github.com/etoyowimura/taskboard.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Pagination added per page and filters

Browse Source
dilmurod
Dilmurod 1 week ago
parent ff15af483e
commit 029dc9da8d
32 changed files with 1340 additions and 471 deletions
Show Stats Download Patch File Download Diff File

39
src/API/LayoutApi/accounting.ts
Unescape View File

@ -1,18 +1,26 @@
import { TAccountingConfirmedMonths } from "./../../types/Accounting/TAccounting";
import {
TAccounting,
TAccountingHistory,
} from "../../types/Accounting/TAccounting";
import instance from "../api"; import instance from "../api";
export type TAccountingConfirmedMonthsParams = {
page?: number;
page_size?: number;
};
export type TAccountingGetParams = { export type TAccountingGetParams = {
month: string; month: string;
search?: string; search?: string;
team?: string; team?: string;
page?: number;
page_size?: number;
role?: number;
salary_type?: string;
}; };
export type TAccountingHistoryGetParams = { export type TAccountingHistoryGetParams = {
search?: string; search?: string;
team?: string; team?: string;
page?: number;
page_size?: number;
role?: number;
salary_type?: string;
}; };
export const AccountingController = { export const AccountingController = {
@ -21,16 +29,16 @@ export const AccountingController = {
if (!!filterObject.month) params.month = filterObject.month; if (!!filterObject.month) params.month = filterObject.month;
const { data } = await instance.get<TAccounting[]>(`/employees-salaries/`, { const { data } = await instance.get(`/employees-salaries/`, {
params, params,
}); });
return data; return data;
}, },
async confirmedMonths() { async confirmedMonths(filterObject: TAccountingConfirmedMonthsParams) {
const { data } = await instance.get<TAccountingConfirmedMonths[]>( const { data } = await instance.get(`/salaries-group/`, {
`/salaries-group/` params: filterObject,
); });
return data; return data;
}, },
@ -38,13 +46,12 @@ export const AccountingController = {
const params = { ...filterObject }; const params = { ...filterObject };
if (!!filterObject.search) params.search = filterObject.search; if (!!filterObject.search) params.search = filterObject.search;
if (!!filterObject.team) params.team = filterObject.team; 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[]>( const { data } = await instance.get(`/employees-salaries-history/`, {
`/employees-salaries-history/`, params,
{ });
params,
}
);
return data; return data;
}, },
}; };

9
src/API/LayoutApi/services.ts
Unescape View File

@ -12,8 +12,13 @@ export type TServicePostParams = {
}; };
export const serviceController = { export const serviceController = {
async read() { async read(page?: number, page_size?: number) {
const { data } = await instance.get<TService[]>(`services/`); 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; return data;
}, },

23
src/API/LayoutApi/statistic.ts
Unescape View File

@ -14,15 +14,21 @@ export type TStatGetParams = {
start_date?: string; start_date?: string;
end_date?: string; end_date?: string;
for_salary?: boolean; for_salary?: boolean;
page?: number;
page_size?: number;
}; };
export type TStatTeamGetParams = { export type TStatTeamGetParams = {
search?: string; search?: string;
start_date?: string; start_date?: string;
end_date?: string; end_date?: string;
page?: number;
page_size?: number;
}; };
export type TStatCreatorsGetParams = { export type TStatCreatorsGetParams = {
page?: number;
page_size?: number;
start_date?: string; start_date?: string;
end_date?: string; end_date?: string;
search?: string; search?: string;
@ -45,7 +51,7 @@ export const statController = {
if (!!filterObject.start_date) params.start_date = filterObject.start_date; if (!!filterObject.start_date) params.start_date = filterObject.start_date;
if (!!filterObject.end_date) params.end_date = filterObject.end_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, params,
}); });
return data; return data;
@ -58,7 +64,7 @@ export const statController = {
if (!!filterObject.start_date) params.start_date = filterObject.start_date; if (!!filterObject.start_date) params.start_date = filterObject.start_date;
if (!!filterObject.end_date) params.end_date = filterObject.end_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, params,
}); });
return data; return data;
@ -70,15 +76,15 @@ export const statController = {
if (!!filterObject.start_date) params.start_date = filterObject.start_date; if (!!filterObject.start_date) params.start_date = filterObject.start_date;
if (!!filterObject.end_date) params.end_date = filterObject.end_date; if (!!filterObject.end_date) params.end_date = filterObject.end_date;
if (!!filterObject.search) params.search = filterObject.search; 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[]>( const { data } = await instance.get(`stats/task-creators/`, {
`stats/task-creators/`, params,
{ });
params,
}
);
return data; return data;
}, },
async cards(filterObject: TStatCreatorsGetParams) { async cards(filterObject: TStatCreatorsGetParams) {
const params = { ...filterObject }; const params = { ...filterObject };
@ -90,6 +96,7 @@ export const statController = {
}); });
return data; return data;
}, },
async teamChart(filterObject: TteamChartGetParams) { async teamChart(filterObject: TteamChartGetParams) {
const params = { ...filterObject }; const params = { ...filterObject };

2
src/API/LayoutApi/tasks.ts
Unescape View File

@ -53,7 +53,7 @@ export const taskController = {
if (!!filterObject.page && filterObject.page !== 0) if (!!filterObject.page && filterObject.page !== 0)
params.page = filterObject.page; params.page = filterObject.page;
params.page_size = isMobile ? 10 : 15; params.page_size = filterObject.page_size;
if (!!filterObject.search) params.search = filterObject.search; if (!!filterObject.search) params.search = filterObject.search;
if (Array.isArray(filterObject.status)) { if (Array.isArray(filterObject.status)) {
params.status = filterObject.status.join(","); params.status = filterObject.status.join(",");

6
src/API/LayoutApi/teams.ts
Unescape View File

@ -3,6 +3,8 @@ import instance from "../api";
import { message } from "antd"; import { message } from "antd";
export type TTeamGetParams = { export type TTeamGetParams = {
page?: number;
page_size?: number;
name?: string; name?: string;
company_id?: string | number; company_id?: string | number;
}; };
@ -23,8 +25,10 @@ export const teamController = {
if (!!obj.company_id) params.company_id = obj.company_id; if (!!obj.company_id) params.company_id = obj.company_id;
if (!!obj.name) params.name = obj.name; 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, params,
}); });
return data; return data;

1
src/API/auth/activate.ts
Unescape View File

@ -28,7 +28,6 @@ export const registryVerify = async (value: activateInterface) => {
role: data?.data.role, role: data?.data.role,
}; };
console.log(data); console.log(data);
const userJSON = JSON.stringify(userObject); const userJSON = JSON.stringify(userObject);
localStorage.setItem("user", userJSON); localStorage.setItem("user", userJSON);

263
src/Components/Accounting/AccountingCurrent.tsx
Unescape View File

@ -9,6 +9,7 @@ import {
message, message,
Modal, Modal,
Select, Select,
Space,
Table, Table,
Tooltip, Tooltip,
Typography, Typography,
@ -26,8 +27,10 @@ import {
DollarOutlined, DollarOutlined,
EditOutlined, EditOutlined,
EllipsisOutlined, EllipsisOutlined,
LeftOutlined,
PlusOutlined, PlusOutlined,
QuestionCircleOutlined, QuestionCircleOutlined,
RightOutlined,
SearchOutlined, SearchOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { theme } from "antd"; import { theme } from "antd";
@ -35,6 +38,7 @@ import { useAccountingData } from "../../Hooks/Accounting";
import moment from "moment"; import moment from "moment";
import api from "../../API/api"; import api from "../../API/api";
import { useTeamData } from "../../Hooks/Teams"; import { useTeamData } from "../../Hooks/Teams";
import { useRoleData } from "../../Hooks/Role";
type Employee = { type Employee = {
id: number; id: number;
@ -61,6 +65,28 @@ const AccountingCurrent: React.FC = () => {
const currentInfo = new Date().toLocaleString("default", { month: "long" }); 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 { Option } = Select;
// const currentMonth = moment().month(); // const currentMonth = moment().month();
@ -97,6 +123,8 @@ const AccountingCurrent: React.FC = () => {
const [search, setSearch] = useState<string>(""); const [search, setSearch] = useState<string>("");
const [team, setTeam] = useState<any>(""); const [team, setTeam] = useState<any>("");
const [role, setRole] = useState<any>("");
const [salaryType, setSalaryType] = useState<any>("");
const showBonusModal = (userId: any) => { const showBonusModal = (userId: any) => {
setSelectedUserId(userId); // Tanlangan user_id ni saqlash setSelectedUserId(userId); // Tanlangan user_id ni saqlash
@ -117,6 +145,10 @@ const AccountingCurrent: React.FC = () => {
month: "current", month: "current",
search: search, search: search,
team: team, team: team,
page: page,
page_size: pageSize,
role: role,
salary_type: salaryType,
}); });
const handleDateChange = (date: dayjs.Dayjs | null) => { const handleDateChange = (date: dayjs.Dayjs | null) => {
@ -308,52 +340,6 @@ const AccountingCurrent: React.FC = () => {
form.resetFields(); 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 () => { const handleOkBonusEdit = async () => {
try { try {
const values = await form.validateFields(); const values = await form.validateFields();
@ -362,10 +348,9 @@ const AccountingCurrent: React.FC = () => {
throw new Error("No record selected!"); throw new Error("No record selected!");
} }
// Faqat kerakli maydonlarni olish
const updatedData = { const updatedData = {
amount: values.amount, amount: values.amount,
reason: values.reason, // Formda `notes` deb saqlanayotgan bo‘lsa reason: values.reason,
}; };
const response = await api.put( const response = await api.put(
@ -494,17 +479,24 @@ const AccountingCurrent: React.FC = () => {
const teamData = useTeamData({}); const teamData = useTeamData({});
const teamOptions: { label: string; value: any }[] | undefined = const teamOptions: { label: string; value: any }[] | undefined =
teamData?.data?.map((item) => ({ teamData?.data?.map((item: any) => ({
label: item?.name, label: item?.name,
value: item?.name, value: item?.name,
})); }));
const additionalOption = {
label: "all", const roleData = useRoleData();
value: "",
}; const roleOptions: { label: string; value: any }[] | undefined =
if (teamOptions) { roleData?.data?.map((item: any) => ({
teamOptions.unshift(additionalOption); 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 deleteFunctionBonus = (record: any) => {
const { id } = record; const { id } = record;
@ -555,10 +547,11 @@ const AccountingCurrent: React.FC = () => {
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: 12,
marginBottom: 10, marginBottom: 10,
}} }}
> >
<div style={{ marginRight: 12 }}> <div>
<Input <Input
placeholder="Search" placeholder="Search"
prefix={<SearchOutlined />} prefix={<SearchOutlined />}
@ -570,12 +563,27 @@ const AccountingCurrent: React.FC = () => {
placeholder="Team" placeholder="Team"
onChange={(value: any) => setTeam(value)} onChange={(value: any) => setTeam(value)}
options={teamOptions} 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> </span>
<Table <Table
size="small" size="small"
loading={isLoading} loading={isLoading}
dataSource={data?.map((u, i) => ({ dataSource={data?.data?.map((u: any, i: any) => ({
no: i + 1, no: i + 1,
...u, ...u,
}))} }))}
@ -608,24 +616,6 @@ const AccountingCurrent: React.FC = () => {
title: "Role", title: "Role",
dataIndex: "role", dataIndex: "role",
key: "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", title: "Team",
@ -656,25 +646,6 @@ const AccountingCurrent: React.FC = () => {
return <p>{record.salary_type}</p>; 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", title: "Base Salary",
@ -745,23 +716,24 @@ const AccountingCurrent: React.FC = () => {
index % 2 === 0 ? "odd-row" : "even-row" index % 2 === 0 ? "odd-row" : "even-row"
} }
bordered bordered
pagination={{ // pagination={{
pageSize: 10, // pageSize: 10,
size: "default", // size: "default",
style: { // style: {
margin: 0, // margin: 0,
justifyContent: "end", // justifyContent: "end",
position: "fixed", // position: "fixed",
bottom: 0, // bottom: 0,
left: 0, // left: 0,
width: "100%", // width: "100%",
backgroundColor: token.colorBgContainer, // backgroundColor: token.colorBgContainer,
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)", // boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
padding: "10px 0", // padding: "10px 0",
zIndex: 1000, // zIndex: 1000,
}, // },
showLessItems: true, // showLessItems: true,
}} // }}
pagination={false}
onRow={(record) => ({ onRow={(record) => ({
onClick: (e) => handleRowClick(record, e), onClick: (e) => handleRowClick(record, e),
})} })}
@ -1209,6 +1181,73 @@ const AccountingCurrent: React.FC = () => {
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </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> </div>
); );
}; };

197
src/Components/Accounting/AccountingHistory.tsx
Unescape View File

@ -3,6 +3,7 @@ import {
Drawer, Drawer,
Input, Input,
Select, Select,
Space,
Spin, Spin,
Table, Table,
Tooltip, Tooltip,
@ -13,13 +14,16 @@ import tagIcon from "../../assets/tagIcon.svg";
import { import {
CloseOutlined, CloseOutlined,
EyeOutlined, EyeOutlined,
LeftOutlined,
QuestionCircleOutlined, QuestionCircleOutlined,
RightOutlined,
SearchOutlined, SearchOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { theme } from "antd"; import { theme } from "antd";
import api from "../../API/api"; import api from "../../API/api";
import { useAccountingHistory } from "../../Hooks/Accounting"; import { useAccountingHistory } from "../../Hooks/Accounting";
import { useTeamData } from "../../Hooks/Teams"; import { useTeamData } from "../../Hooks/Teams";
import { useRoleData } from "../../Hooks/Role";
const { Title } = Typography; const { Title } = Typography;
@ -50,6 +54,8 @@ interface SalaryData {
} }
const AccountingHistory: React.FC = () => { const AccountingHistory: React.FC = () => {
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [userData, setUserData] = useState<SalaryData | null>(null); const [userData, setUserData] = useState<SalaryData | null>(null);
@ -58,17 +64,42 @@ const AccountingHistory: React.FC = () => {
const [search, setSearch] = useState<string>(""); const [search, setSearch] = useState<string>("");
const [team, setTeam] = useState<any>(""); const [team, setTeam] = useState<any>("");
const [role, setRole] = useState<any>("");
const [salaryType, setSalaryType] = useState<any>("");
const themes = localStorage.getItem("theme") === "true" ? true : false; const themes = localStorage.getItem("theme") === "true" ? true : false;
const { data, refetch, isLoading } = useAccountingHistory({ const { data, refetch, isLoading } = useAccountingHistory({
search: search, search: search,
team: team, team: team,
page: page,
page_size: pageSize,
role: role,
salary_type: salaryType,
}); });
const [selectedUser, setSelectedUser] = useState<any>(null); const [selectedUser, setSelectedUser] = useState<any>(null);
const [loading, setLoading] = useState(false); 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) => { const handleRowClick = async (record: any, e: any) => {
setSelectedUser(record); setSelectedUser(record);
setOpen(true); setOpen(true);
@ -116,17 +147,24 @@ const AccountingHistory: React.FC = () => {
const teamData = useTeamData({}); const teamData = useTeamData({});
const teamOptions: { label: string; value: any }[] | undefined = const teamOptions: { label: string; value: any }[] | undefined =
teamData?.data?.map((item) => ({ teamData?.data?.map((item: any) => ({
label: item?.name, label: item?.name,
value: item?.name, value: item?.name,
})); }));
const additionalOption = {
label: "all", const roleData = useRoleData();
value: "",
}; const roleOptions: { label: string; value: any }[] | undefined =
if (teamOptions) { roleData?.data?.map((item: any) => ({
teamOptions.unshift(additionalOption); label: item?.name,
} value: item?.id,
}));
const salaryTypeOptions = [
{ label: "Hybrid", value: "hybrid" },
{ label: "Task Based", value: "task_based" },
{ label: "Fixed", value: "fixed" },
];
return ( return (
<div style={{ paddingBottom: 40 }}> <div style={{ paddingBottom: 40 }}>
@ -134,10 +172,11 @@ const AccountingHistory: React.FC = () => {
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: 12,
marginBottom: 10, marginBottom: 10,
}} }}
> >
<div style={{ marginRight: 12 }}> <div>
<Input <Input
placeholder="Search" placeholder="Search"
prefix={<SearchOutlined />} prefix={<SearchOutlined />}
@ -149,12 +188,27 @@ const AccountingHistory: React.FC = () => {
placeholder="Team" placeholder="Team"
onChange={(value: any) => setTeam(value)} onChange={(value: any) => setTeam(value)}
options={teamOptions} 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> </span>
<Table <Table
size="small" size="small"
loading={isLoading} loading={isLoading}
dataSource={data?.map((u, i) => ({ dataSource={data?.data?.map((u: any, i: any) => ({
no: i + 1, no: i + 1,
...u, ...u,
}))} }))}
@ -187,24 +241,6 @@ const AccountingHistory: React.FC = () => {
title: "Role", title: "Role",
dataIndex: "role", dataIndex: "role",
key: "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", title: "Team",
@ -261,25 +297,6 @@ const AccountingHistory: React.FC = () => {
return <p>{record.salary_type}</p>; // Agar boshqa qiymat bo'lsa, oddiy qilib chiqariladi 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", title: "Base Salary",
@ -330,23 +347,7 @@ const AccountingHistory: React.FC = () => {
index % 2 === 0 ? "odd-row" : "even-row" index % 2 === 0 ? "odd-row" : "even-row"
} }
bordered bordered
pagination={{ pagination={false}
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,
}}
// onRow={(record) => ({ // onRow={(record) => ({
// onClick: () => { // onClick: () => {
// if (record.user && record.user.id) { // if (record.user && record.user.id) {
@ -544,6 +545,74 @@ const AccountingHistory: React.FC = () => {
)} )}
</div> </div>
</Drawer> </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> </div>
); );
}; };

236
src/Components/Accounting/AccountingLast.tsx
Unescape View File

@ -9,6 +9,7 @@ import {
message, message,
Modal, Modal,
Select, Select,
Space,
Table, Table,
Tooltip, Tooltip,
Typography, Typography,
@ -24,8 +25,10 @@ import {
EditOutlined, EditOutlined,
EllipsisOutlined, EllipsisOutlined,
InfoCircleOutlined, InfoCircleOutlined,
LeftOutlined,
PlusOutlined, PlusOutlined,
QuestionCircleOutlined, QuestionCircleOutlined,
RightOutlined,
SearchOutlined, SearchOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { theme } from "antd"; import { theme } from "antd";
@ -36,6 +39,7 @@ import dayjs from "dayjs";
import "dayjs/locale/en"; import "dayjs/locale/en";
import localizedFormat from "dayjs/plugin/localizedFormat"; import localizedFormat from "dayjs/plugin/localizedFormat";
import { useTeamData } from "../../Hooks/Teams"; import { useTeamData } from "../../Hooks/Teams";
import { useRoleData } from "../../Hooks/Role";
type Employee = { type Employee = {
id: number; 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 [selectedUserId, setSelectedUserId] = useState(null);
const [selectedDate, setSelectedDate] = useState<dayjs.Dayjs | null>(null); const [selectedDate, setSelectedDate] = useState<dayjs.Dayjs | null>(null);
@ -98,8 +124,12 @@ const AccountingCurrent: React.FC = () => {
const [chargesData, setChargesData] = useState([]); const [chargesData, setChargesData] = useState([]);
const [search, setSearch] = useState<string>(""); const [search, setSearch] = useState<string>("");
const [team, setTeam] = useState<any>(""); const [team, setTeam] = useState<any>("");
const [role, setRole] = useState<any>("");
const [salaryType, setSalaryType] = useState<any>("");
const showBonusModal = (userId: any) => { const showBonusModal = (userId: any) => {
setSelectedUserId(userId); // Tanlangan user_id ni saqlash setSelectedUserId(userId); // Tanlangan user_id ni saqlash
setIsBonusModalVisible(true); setIsBonusModalVisible(true);
@ -119,6 +149,10 @@ const AccountingCurrent: React.FC = () => {
month: "last", month: "last",
search: search, search: search,
team: team, team: team,
page: page,
page_size: pageSize,
role: role,
salary_type: salaryType,
}); });
const handleDateChange = (date: dayjs.Dayjs | null) => { const handleDateChange = (date: dayjs.Dayjs | null) => {
@ -502,17 +536,25 @@ const AccountingCurrent: React.FC = () => {
const teamData = useTeamData({}); const teamData = useTeamData({});
const teamOptions: { label: string; value: any }[] | undefined = const teamOptions: { label: string; value: any }[] | undefined =
teamData?.data?.map((item) => ({ teamData?.data?.map((item: any) => ({
label: item?.name, label: item?.name,
value: item?.name, value: item?.name,
})); }));
const additionalOption = {
label: "all", const roleData = useRoleData();
value: "",
}; const roleOptions: { label: string; value: any }[] | undefined =
if (teamOptions) { roleData?.data?.map((item: any) => ({
teamOptions.unshift(additionalOption); 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 { token } = theme.useToken();
const deleteFunctionBonus = (record: any) => { const deleteFunctionBonus = (record: any) => {
@ -573,10 +615,11 @@ const AccountingCurrent: React.FC = () => {
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: 12,
// marginBottom: 10, // marginBottom: 10,
}} }}
> >
<div style={{ marginRight: 12 }}> <div>
<Input <Input
placeholder="Search" placeholder="Search"
prefix={<SearchOutlined />} prefix={<SearchOutlined />}
@ -589,11 +632,25 @@ const AccountingCurrent: React.FC = () => {
onChange={(value: any) => setTeam(value)} onChange={(value: any) => setTeam(value)}
options={teamOptions} 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>
</div> </div>
<Button <Button
disabled={data?.some((item) => item.is_confirmed)} disabled={data?.data?.some((item: any) => item.is_confirmed)}
type="primary" type="primary"
onClick={() => onClick={() =>
Modal.confirm({ Modal.confirm({
@ -689,7 +746,7 @@ const AccountingCurrent: React.FC = () => {
<Table <Table
size="small" size="small"
loading={isLoading} loading={isLoading}
dataSource={data?.map((u, i) => ({ dataSource={data?.data?.map((u: any, i: any) => ({
no: i + 1, no: i + 1,
...u, ...u,
}))} }))}
@ -722,24 +779,6 @@ const AccountingCurrent: React.FC = () => {
title: "Role", title: "Role",
dataIndex: "role", dataIndex: "role",
key: "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", title: "Team",
@ -770,25 +809,6 @@ const AccountingCurrent: React.FC = () => {
return <p>{record.salary_type}</p>; 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", title: "Base Salary",
@ -841,7 +861,7 @@ const AccountingCurrent: React.FC = () => {
<Dropdown <Dropdown
overlay={menu(record.employee_id)} overlay={menu(record.employee_id)}
trigger={["click"]} trigger={["click"]}
disabled={data?.some((item) => item.is_confirmed)} disabled={data?.data?.some((item: any) => item.is_confirmed)}
> >
<Button <Button
icon={<EllipsisOutlined />} icon={<EllipsisOutlined />}
@ -855,23 +875,24 @@ const AccountingCurrent: React.FC = () => {
index % 2 === 0 ? "odd-row" : "even-row" index % 2 === 0 ? "odd-row" : "even-row"
} }
bordered bordered
pagination={{ // pagination={{
pageSize: 10, // pageSize: 10,
size: "default", // size: "default",
style: { // style: {
margin: 0, // margin: 0,
justifyContent: "end", // justifyContent: "end",
position: "fixed", // position: "fixed",
bottom: 0, // bottom: 0,
left: 0, // left: 0,
width: "100%", // width: "100%",
backgroundColor: token.colorBgContainer, // backgroundColor: token.colorBgContainer,
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)", // boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
padding: "10px 0", // padding: "10px 0",
zIndex: 1000, // zIndex: 1000,
}, // },
showLessItems: true, // showLessItems: true,
}} // }}
pagination={false}
onRow={(record) => ({ onRow={(record) => ({
onClick: (e) => handleRowClick(record, e), onClick: (e) => handleRowClick(record, e),
})} })}
@ -1123,7 +1144,9 @@ const AccountingCurrent: React.FC = () => {
<> <>
<Button <Button
icon={<EditOutlined />} icon={<EditOutlined />}
disabled={data?.some((item) => item.is_confirmed)} disabled={data?.data?.some(
(item: any) => item.is_confirmed
)}
onClick={() => showModalBonusEdit(record)} onClick={() => showModalBonusEdit(record)}
style={{ marginRight: 8 }} style={{ marginRight: 8 }}
/> />
@ -1134,7 +1157,9 @@ const AccountingCurrent: React.FC = () => {
}} }}
icon={<DeleteOutlined />} icon={<DeleteOutlined />}
onClick={() => deleteFunctionBonus(record)} 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 <Button
icon={<EditOutlined />} icon={<EditOutlined />}
disabled={data?.some((item) => item.is_confirmed)} disabled={data?.data?.some(
(item: any) => item.is_confirmed
)}
onClick={() => showModal(record)} onClick={() => showModal(record)}
style={{ marginRight: 8 }} style={{ marginRight: 8 }}
/> />
@ -1202,7 +1229,9 @@ const AccountingCurrent: React.FC = () => {
}} }}
icon={<DeleteOutlined />} icon={<DeleteOutlined />}
onClick={() => deleteFunctionCharge(record)} 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.Item>
</Form> </Form>
</Modal> </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> </div>
); );
}; };

102
src/Components/Accounting/ConfirmedMonths.tsx
Unescape View File

@ -1,10 +1,37 @@
import { useConfirmedMonths } from "../../Hooks/Accounting"; 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 tagIcon from "../../assets/tagIcon.svg";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { useState } from "react";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
function ConfirmedMonths() { 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(); const { token } = theme.useToken();
@ -13,7 +40,7 @@ function ConfirmedMonths() {
<Table <Table
size="middle" size="middle"
bordered bordered
dataSource={data?.map((u, i) => ({ dataSource={data?.data?.map((u: any, i: any) => ({
no: i + 1, no: i + 1,
...u, ...u,
}))} }))}
@ -62,11 +89,11 @@ function ConfirmedMonths() {
]} ]}
loading={isLoading} loading={isLoading}
rowKey="id" rowKey="id"
pagination={{ pagination={false}
pageSize: 10, />
size: "default", <Space style={{ width: "100%", marginTop: 40 }} direction="vertical">
style: { <Space
margin: 0, style={{
justifyContent: "end", justifyContent: "end",
position: "fixed", position: "fixed",
bottom: 0, bottom: 0,
@ -76,10 +103,61 @@ function ConfirmedMonths() {
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
padding: "10px 0", padding: "10px 0",
zIndex: 1000, 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> </div>
); );
} }

22
src/Components/CallRequests/Call.tsx
Unescape View File

@ -6,6 +6,7 @@ import {
Input, Input,
Radio, Radio,
RadioChangeEvent, RadioChangeEvent,
Select,
Space, Space,
Typography, Typography,
} from "antd"; } from "antd";
@ -17,13 +18,22 @@ import { theme } from "antd";
const Call = ({ socketData }: { socketData: TSocket | undefined }) => { const Call = ({ socketData }: { socketData: TSocket | undefined }) => {
const [status, setStatus] = useState("Awaiting"); const [status, setStatus] = useState("Awaiting");
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [tableData, setTableData] = useState<TCall[]>(); const [tableData, setTableData] = useState<TCall[]>();
const { data, isLoading, refetch } = useCallData({ const { data, isLoading, refetch } = useCallData({
status: status, status: status,
page: page, 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 theme = localStorage.getItem("theme") === "true" ? true : false;
const { token } = theme.useToken(); const { token } = theme.useToken();
@ -116,6 +126,16 @@ const Call = ({ socketData }: { socketData: TSocket | undefined }) => {
}} }}
wrap wrap
> >
<Select
value={pageSize}
onChange={handlePageSizeChange}
style={{ width: 65, marginRight: 16 }}
options={pageSizeOptions.map((size) => ({
label: `${size}`,
value: size,
}))}
/>
<Button <Button
onClick={Previos} onClick={Previos}
disabled={data?.previous ? false : true} disabled={data?.previous ? false : true}

22
src/Components/Companies/Companies.tsx
Unescape View File

@ -10,7 +10,7 @@ import {
SearchOutlined, SearchOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { useCompanyPaginated } from "../../Hooks/Companies"; 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 { theme } from "antd";
import { role } from "../../App"; import { role } from "../../App";
@ -23,13 +23,21 @@ const Company = () => {
const [search, setSearch] = useState<string>(); const [search, setSearch] = useState<string>();
const [page, setPage] = useState<number>(1); const [page, setPage] = useState<number>(1);
const [pageSize, setPageSize] = useState(10);
const { data, isLoading, refetch } = useCompanyPaginated({ const { data, isLoading, refetch } = useCompanyPaginated({
name: search, name: search,
is_active: undefined, is_active: undefined,
page: page, 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 timerRef = useRef<NodeJS.Timeout | null>(null);
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (timerRef.current) { if (timerRef.current) {
@ -123,6 +131,16 @@ const Company = () => {
}} }}
wrap wrap
> >
<Select
value={pageSize}
onChange={handlePageSizeChange}
style={{ width: 65, marginRight: 16 }}
options={pageSizeOptions.map((size) => ({
label: `${size}`,
value: size,
}))}
/>
<Button <Button
onClick={Previos} onClick={Previos}
disabled={data?.previous ? false : true} disabled={data?.previous ? false : true}

2
src/Components/Companies/CompaniesEdit.tsx
Unescape View File

@ -91,7 +91,7 @@ const CompanyEdit = () => {
const TeamData = useTeamData({}); const TeamData = useTeamData({});
const noTeamOption = { label: " - - - - - -", value: "" }; const noTeamOption = { label: " - - - - - -", value: "" };
const TeamOption: { label: string; value: any }[] | undefined = const TeamOption: { label: string; value: any }[] | undefined =
TeamData?.data?.map((item) => ({ TeamData?.data?.map((item: any) => ({
label: item?.name, label: item?.name,
value: item?.id, value: item?.id,
})); }));

22
src/Components/Customers/Customers.tsx
Unescape View File

@ -14,12 +14,13 @@ import addicon from "../../assets/addiconpng.png";
import IconSearch from "../../assets/searchIcon.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"; import { theme } from "antd";
const Customer = () => { const Customer = () => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const showModal = () => { const showModal = () => {
setOpen(true); setOpen(true);
}; };
@ -30,10 +31,17 @@ const Customer = () => {
const { data, isLoading, refetch } = useCustomerData({ const { data, isLoading, refetch } = useCustomerData({
name: search, name: search,
is_active: undefined, is_active: undefined,
page_size: 10, page_size: pageSize,
page: page, page: page,
}); });
const pageSizeOptions = [10, 20, 30, 40, 50];
const handlePageSizeChange = (value: number) => {
setPageSize(value);
setPage(1);
};
const Next = () => { const Next = () => {
const a = Number(page) + 1; const a = Number(page) + 1;
setPage(a); setPage(a);
@ -116,6 +124,16 @@ const Customer = () => {
}} }}
wrap wrap
> >
<Select
value={pageSize}
onChange={handlePageSizeChange}
style={{ width: 65, marginRight: 16 }}
options={pageSizeOptions.map((size) => ({
label: `${size}`,
value: size,
}))}
/>
<Button <Button
type="primary" type="primary"
onClick={Previos} onClick={Previos}

21
src/Components/Requests/Requests.tsx
Unescape View File

@ -12,6 +12,7 @@ import {
Input, Input,
Radio, Radio,
RadioChangeEvent, RadioChangeEvent,
Select,
Space, Space,
Typography, Typography,
theme, theme,
@ -29,12 +30,20 @@ const Requests = ({ socketData }: { socketData: TSocket | undefined }) => {
const [requestData, setRequestData] = useState<TRequests | undefined>(); const [requestData, setRequestData] = useState<TRequests | undefined>();
const [status, setStatus] = useState("Pending"); const [status, setStatus] = useState("Pending");
const [page, setPage] = useState<number>(1); 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({ const { data, refetch, isLoading } = useRequestsData({
search: search, search: search,
status: status, status: status,
page: page, page: page,
page_size: 10, page_size: pageSize,
}); });
const [mainData, setMainData] = useState<TRequests[]>(); const [mainData, setMainData] = useState<TRequests[]>();
@ -149,6 +158,16 @@ const Requests = ({ socketData }: { socketData: TSocket | undefined }) => {
}} }}
wrap wrap
> >
<Select
value={pageSize}
onChange={handlePageSizeChange}
style={{ width: 65, marginRight: 16 }}
options={pageSizeOptions.map((size) => ({
label: `${size}`,
value: size,
}))}
/>
<Button <Button
onClick={Previos} onClick={Previos}
disabled={data?.previous ? false : true} disabled={data?.previous ? false : true}

84
src/Components/Services/Services.tsx
Unescape View File

@ -4,22 +4,42 @@ import AddService from "./AddService";
import ServiceTable from "./ServiceTable"; import ServiceTable from "./ServiceTable";
//@ts-ignore //@ts-ignore
import addicon from "../../assets/addiconpng.png"; 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 { role } from "../../App";
import { Button, Pagination, Space, Typography } from "antd"; import { Button, Input, Pagination, Select, Space, Typography } from "antd";
import { theme } from "antd"; import { theme } from "antd";
const Service = () => { const Service = () => {
const [page, setPage] = useState(1); 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 { token } = theme.useToken();
const { data, isLoading, refetch } = useServiceData(); const { data, isLoading, refetch } = useServiceData(page, pageSize);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const showModal = () => { const showModal = () => {
setOpen(true); 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 ( return (
<div> <div>
{open && <AddService refetch={refetch} open={open} setOpen={setOpen} />} {open && <AddService refetch={refetch} open={open} setOpen={setOpen} />}
@ -45,9 +65,9 @@ const Service = () => {
</Button> </Button>
)} )}
</div> </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 <Space
style={{ style={{
justifyContent: "end", justifyContent: "end",
@ -62,12 +82,37 @@ const Service = () => {
}} }}
wrap wrap
> >
<Button onClick={Previos} disabled={data?.previous ? false : true}> <Select
＜ value={pageSize}
</Button> 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 <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} value={page}
onChange={(e) => { onChange={(e) => {
let num = e.target.value; let num = e.target.value;
@ -76,18 +121,19 @@ const Service = () => {
} }
}} }}
/> />
<Button
<Button onClick={Next} disabled={data?.next ? false : true}> onClick={Next}
＞ disabled={data?.next ? false : true}
style={{
backgroundColor: token.colorBgContainer,
color: token.colorText,
border: "none",
}}
>
<RightOutlined />
</Button> </Button>
<Pagination
// current={page}
// total={10}
// pageSize={2}
// onChange={handlePageChange}
/>
</Space> </Space>
</Space> */} </Space>
</div> </div>
); );
}; };

264
src/Components/Statistics/Statistic.tsx
Unescape View File

@ -28,10 +28,12 @@ import {
DatePickerProps, DatePickerProps,
Input, Input,
Select, Select,
Space,
Tabs, Tabs,
Typography, Typography,
theme,
} from "antd"; } from "antd";
import { SearchOutlined } from "@ant-design/icons"; import { LeftOutlined, RightOutlined, SearchOutlined } from "@ant-design/icons";
import TabPane from "antd/es/tabs/TabPane"; import TabPane from "antd/es/tabs/TabPane";
import api from "../../API/api"; import api from "../../API/api";
// @ts-ignore // @ts-ignore
@ -58,7 +60,6 @@ import teamsIconActive from "../../assets/teamsIconActive.svg";
import techSupports from "../../assets/techsupportIcon.svg"; import techSupports from "../../assets/techsupportIcon.svg";
import techSupportsActive from "../../assets/techsupportIconActive.svg"; import techSupportsActive from "../../assets/techsupportIconActive.svg";
import axios from "axios";
import StatisticsSupportTable from "./StatisticsSupportTable"; import StatisticsSupportTable from "./StatisticsSupportTable";
const Stat = () => { const Stat = () => {
@ -73,17 +74,40 @@ const Stat = () => {
.endOf("month") .endOf("month")
.format("YYYY-MM-DD")} 23:59:59`; .format("YYYY-MM-DD")} 23:59:59`;
const { token } = theme.useToken();
const [search, setSearch] = useState<string>(""); const [search, setSearch] = useState<string>("");
const [SupportSearch, setSupportSearch] = useState<string>(""); const [SupportSearch, setSupportSearch] = useState<string>("");
const [team, setTeam] = useState<any>(""); const [team, setTeam] = useState<any>("");
const [startDate, setStartDate] = useState(start_date); const [startDate, setStartDate] = useState(start_date);
const [endDate, setEndDate] = useState(end_date); const [endDate, setEndDate] = useState(end_date);
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [forSalary, setForSalary] = useState(true); 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 teamData = useTeamData({});
const teamOptions: { label: string; value: any }[] | undefined = const teamOptions: { label: string; value: any }[] | undefined =
teamData?.data?.map((item) => ({ teamData?.data?.map((item: any) => ({
label: item?.name, label: item?.name,
value: item?.name, value: item?.name,
})); }));
@ -145,29 +169,21 @@ const Stat = () => {
start_date: startDate, start_date: startDate,
end_date: endDate, end_date: endDate,
for_salary: forSalary, for_salary: forSalary,
page: page,
page_size: pageSize,
}); });
interface DataType {
data?: TStatTeam[]; const TeamData = useStatTeamData({
refetch: <TPageData>( page: page,
options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined page_size: pageSize,
) => Promise<QueryObserverResult<TStatTeam[], unknown>>;
isLoading: boolean;
}
const TeamData: DataType = useStatTeamData({
search: "", search: "",
start_date: startDate, start_date: startDate,
end_date: endDate, end_date: endDate,
}); });
interface TaskCreatorsType { const CreatorsData = useCreatorsData({
data?: TStatCreators[]; page: page,
refetch: <TPageData>( page_size: pageSize,
options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
) => Promise<QueryObserverResult<TStatCreators[], unknown>>;
isLoading: boolean;
}
const CreatorsData: TaskCreatorsType = useCreatorsData({
search: SupportSearch, search: SupportSearch,
start_date: startDate, start_date: startDate,
end_date: endDate, end_date: endDate,
@ -220,7 +236,7 @@ const Stat = () => {
}, 1000); }, 1000);
}; };
const theme = localStorage.getItem("theme") === "true" ? true : false; // const theme = localStorage.getItem("theme") === "true" ? true : false;
const [activeTab, setActiveTab] = useState("1"); const [activeTab, setActiveTab] = useState("1");
@ -498,6 +514,73 @@ const Stat = () => {
isLoading={CreatorsData?.isLoading} isLoading={CreatorsData?.isLoading}
refetch={CreatorsData?.refetch} 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>
<TabPane <TabPane
@ -544,7 +627,7 @@ const Stat = () => {
/> />
</span> </span>
<StatTable <StatTable
data={{ data: data }} data={data?.data}
isLoading={isLoading} isLoading={isLoading}
refetch={refetch} refetch={refetch}
/> />
@ -555,6 +638,74 @@ const Stat = () => {
> >
Save as file Save as file
</Button> </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>
<TabPane <TabPane
tab={ tab={
@ -570,7 +721,7 @@ const Stat = () => {
key="4" key="4"
> >
<StatTeamTable <StatTeamTable
data={TeamData?.data} data={TeamData?.data?.data}
isLoading={TeamData?.isLoading} isLoading={TeamData?.isLoading}
refetch={TeamData?.refetch} refetch={TeamData?.refetch}
/> />
@ -631,6 +782,73 @@ const Stat = () => {
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </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> </TabPane>
</Tabs> </Tabs>
</div> </div>

39
src/Components/Statistics/StatisticTable.tsx
Unescape View File

@ -19,7 +19,7 @@ const StatTable = ({
refetch: <TPageData>( refetch: <TPageData>(
options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
) => Promise<QueryObserverResult<TStat[], unknown>>; ) => Promise<QueryObserverResult<TStat[], unknown>>;
data: { data: TStat[] | undefined }; data: any;
isLoading: boolean; isLoading: boolean;
}) => { }) => {
const { token } = theme.useToken(); const { token } = theme.useToken();
@ -29,7 +29,7 @@ const StatTable = ({
<Table <Table
size="small" size="small"
loading={isLoading} loading={isLoading}
dataSource={data?.data?.map((u, i) => ({ dataSource={data?.map((u: any, i: any) => ({
no: i + 1, no: i + 1,
...u, ...u,
}))} }))}
@ -104,23 +104,24 @@ const StatTable = ({
// sortDirections: ["ascend", "descend"], // sortDirections: ["ascend", "descend"],
// }, // },
]} ]}
pagination={{ // pagination={{
pageSize: 10, // pageSize: 10,
size: "default", // size: "default",
style: { // style: {
margin: 0, // margin: 0,
justifyContent: "end", // justifyContent: "end",
position: "fixed", // position: "fixed",
bottom: 0, // bottom: 0,
left: 0, // left: 0,
width: "100%", // width: "100%",
backgroundColor: token.colorBgContainer, // backgroundColor: token.colorBgContainer,
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)", // boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
padding: "10px 0", // padding: "10px 0",
zIndex: 1000, // zIndex: 1000,
}, // },
showLessItems: true, // showLessItems: true,
}} // }}
pagination={false}
rowClassName={(record, index) => rowClassName={(record, index) =>
index % 2 === 0 ? "odd-row" : "even-row" index % 2 === 0 ? "odd-row" : "even-row"
} }

37
src/Components/Statistics/StatisticTeamTable.tsx
Unescape View File

@ -17,7 +17,7 @@ const StatTeamTable = ({
refetch: <TPageData>( refetch: <TPageData>(
options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
) => Promise<QueryObserverResult<TStatTeam[], unknown>>; ) => Promise<QueryObserverResult<TStatTeam[], unknown>>;
data: TStatTeam[] | undefined; data: any;
isLoading: boolean; isLoading: boolean;
}) => { }) => {
const { token } = theme.useToken(); const { token } = theme.useToken();
@ -26,7 +26,7 @@ const StatTeamTable = ({
<Table <Table
loading={isLoading} loading={isLoading}
size="small" size="small"
dataSource={data?.map((u, i) => ({ dataSource={data?.map((u: any, i: any) => ({
no: i + 1, no: i + 1,
...u, ...u,
}))} }))}
@ -70,22 +70,23 @@ const StatTeamTable = ({
}, },
}, },
]} ]}
pagination={{ // pagination={{
pageSize: 10, // pageSize: 10,
size: "default", // size: "default",
style: { // style: {
margin: 0, // margin: 0,
justifyContent: "end", // justifyContent: "end",
position: "fixed", // position: "fixed",
bottom: 0, // bottom: 0,
left: 0, // left: 0,
width: "100%", // width: "100%",
backgroundColor: token.colorBgContainer, // backgroundColor: token.colorBgContainer,
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)", // boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
padding: "10px 0", // padding: "10px 0",
zIndex: 1000, // zIndex: 1000,
}, // },
}} // }}
pagination={false}
rowClassName={(record, index) => rowClassName={(record, index) =>
index % 2 === 0 ? "odd-row" : "even-row" index % 2 === 0 ? "odd-row" : "even-row"
} }

39
src/Components/Statistics/StatisticsSupportTable.tsx
Unescape View File

@ -17,7 +17,7 @@ const StatisticsSupportTable = ({
refetch: <TPageData>( refetch: <TPageData>(
options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
) => Promise<QueryObserverResult<TStatCreators[], unknown>>; ) => Promise<QueryObserverResult<TStatCreators[], unknown>>;
data: TStatCreators[] | undefined; data: any;
isLoading: boolean; isLoading: boolean;
}) => { }) => {
const { token } = theme.useToken(); const { token } = theme.useToken();
@ -26,7 +26,7 @@ const StatisticsSupportTable = ({
<Table <Table
loading={isLoading} loading={isLoading}
size="small" size="small"
dataSource={data?.map((u, i) => ({ dataSource={data?.data?.map((u: any, i: any) => ({
no: i + 1, no: i + 1,
...u, ...u,
}))} }))}
@ -51,23 +51,24 @@ const StatisticsSupportTable = ({
dataIndex: "number_of_tasks", dataIndex: "number_of_tasks",
}, },
]} ]}
pagination={{ // pagination={{
pageSize: 10, // pageSize: 10,
size: "default", // size: "default",
style: { // style: {
margin: 0, // margin: 0,
justifyContent: "end", // justifyContent: "end",
position: "fixed", // position: "fixed",
bottom: 0, // bottom: 0,
left: 0, // left: 0,
width: "100%", // width: "100%",
backgroundColor: token.colorBgContainer, // backgroundColor: token.colorBgContainer,
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)", // boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
padding: "10px 0", // padding: "10px 0",
zIndex: 1000, // zIndex: 1000,
}, // },
showLessItems: true, // showLessItems: true,
}} // }}
pagination={false}
rowClassName={(record, index) => rowClassName={(record, index) =>
index % 2 === 0 ? "odd-row" : "even-row" index % 2 === 0 ? "odd-row" : "even-row"
} }

4
src/Components/Tasks/AddTask.tsx
Unescape View File

@ -105,7 +105,7 @@ const AddTask = ({
}, [companyId, customerName]); }, [companyId, customerName]);
// service select // service select
const serviceOptions = ServiceData?.data?.map((item) => ({ const serviceOptions = ServiceData?.data?.map((item: any) => ({
label: item?.title, label: item?.title,
value: item?.id, value: item?.id,
})); }));
@ -332,7 +332,7 @@ const AddTask = ({
> >
<Select <Select
placeholder="Teams" placeholder="Teams"
options={TeamData?.data?.map((item) => ({ options={TeamData?.data?.map((item: any) => ({
label: item?.name, label: item?.name,
value: item?.id, value: item?.id,
}))} }))}

60
src/Components/Tasks/TaskModal.tsx
Unescape View File

@ -119,42 +119,44 @@ const TaskModal = ({
const teamData = useTeamData({}); const teamData = useTeamData({});
// const teamData = useCustomerData({name: "", page: 1, page_size: 100}); // const teamData = useCustomerData({name: "", page: 1, page_size: 100});
const teams: MenuProps["items"] = teamData?.data?.map((item, index) => ({ const teams: MenuProps["items"] = teamData?.data?.map(
key: item?.id, (item: any, index: number) => ({
label: ( key: item?.id,
<div label: (
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>
<div <div
style={{ style={{
display: "flex", display: "flex",
justifyContent: "space-between",
alignItems: "center", alignItems: "center",
width: "100%",
}} }}
> >
<p>{item?.name}</p> <div
<p style={{ marginLeft: 30 }}>{item?.task_count_percentage}%</p> 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>
</div> ),
), onClick: () => teampatch(item),
onClick: () => teampatch(item), })
})); );
const items: MenuProps["items"] = [ const items: MenuProps["items"] = [
{ {
key: "1", key: "1",

23
src/Components/Tasks/Tasks.tsx
Unescape View File

@ -43,10 +43,18 @@ const Task = ({
const [search, setSearch] = useState<string>(""); const [search, setSearch] = useState<string>("");
const [status, setStatus] = useState<any>(); const [status, setStatus] = useState<any>();
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [uploadOpen, setUploadOpen] = useState(false); const [uploadOpen, setUploadOpen] = useState(false);
const [errorModal, setErrorModal] = useState(false); const [errorModal, setErrorModal] = useState(false);
const [uncomletedData, setUncomletedData] = useState<TTask[]>(); const [uncomletedData, setUncomletedData] = useState<TTask[]>();
const pageSizeOptions = [10, 20, 30, 40, 50];
const handlePageSizeChange = (value: number) => {
setPageSize(value);
setPage(1);
};
useEffect(() => { useEffect(() => {
if ( if (
socketData && socketData &&
@ -57,7 +65,7 @@ const Task = ({
// &&(!status || status.includes(socketData?.task?.status)) // &&(!status || status.includes(socketData?.task?.status))
) { ) {
setCharacters((prev: any) => { setCharacters((prev: any) => {
if (prev && prev?.length >= 15) { if (prev && prev?.length >= 10) {
prev?.pop(); prev?.pop();
} }
if (socketData.type === "task_create" && socketData.task) { if (socketData.type === "task_create" && socketData.task) {
@ -128,7 +136,7 @@ const Task = ({
const teamData = useTeamData({}); const teamData = useTeamData({});
const teamOptions: { label: string; value: any }[] | undefined = const teamOptions: { label: string; value: any }[] | undefined =
teamData?.data?.map((item) => ({ teamData?.data?.map((item: any) => ({
label: item?.name, label: item?.name,
value: item?.id, value: item?.id,
})); }));
@ -137,7 +145,7 @@ const Task = ({
status, status,
team, team,
page, page,
page_size: 10, page_size: pageSize,
}); });
useEffect(() => { useEffect(() => {
if (data) { if (data) {
@ -352,6 +360,15 @@ const Task = ({
}} }}
wrap wrap
> >
<Select
value={pageSize}
onChange={handlePageSizeChange}
style={{ width: 65, marginRight: 16 }}
options={pageSizeOptions.map((size) => ({
label: `${size}`,
value: size,
}))}
/>
<Button <Button
onClick={Previos} onClick={Previos}
disabled={data?.previous ? false : true} disabled={data?.previous ? false : true}

33
src/Components/Teams/TeamTable.tsx
Unescape View File

@ -61,22 +61,23 @@ const TeamTable = ({
dataIndex: "created", dataIndex: "created",
}, },
]} ]}
pagination={{ // pagination={{
pageSize: 10, // pageSize: 10,
size: "default", // size: "default",
style: { // style: {
margin: 0, // margin: 0,
justifyContent: "end", // justifyContent: "end",
position: "fixed", // position: "fixed",
bottom: 0, // bottom: 0,
left: 0, // left: 0,
width: "100%", // width: "100%",
backgroundColor: token.colorBgContainer, // backgroundColor: token.colorBgContainer,
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)", // boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
padding: "10px 0", // padding: "10px 0",
zIndex: 1000, // zIndex: 1000,
}, // },
}} // }}
pagination={false}
bordered bordered
/> />
); );

103
src/Components/Teams/Teams.tsx
Unescape View File

@ -4,17 +4,43 @@ import TeamTable from "./TeamTable";
//@ts-ignore //@ts-ignore
import addicon from "../../assets/addiconpng.png"; import addicon from "../../assets/addiconpng.png";
import AddTeam from "./AddTeam"; import AddTeam from "./AddTeam";
import { Button, Typography } from "antd"; import { Button, Input, Select, Space, Typography, theme } from "antd";
import { PlusOutlined } from "@ant-design/icons"; import { LeftOutlined, PlusOutlined, RightOutlined } from "@ant-design/icons";
const Team = () => { 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 [open, setOpen] = useState(false);
const showModal = () => { const showModal = () => {
setOpen(true); 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 ( return (
<div> <div>
@ -43,7 +69,74 @@ const Team = () => {
Add Team Add Team
</Button> </Button>
</div> </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> </div>
); );
}; };

19
src/Components/Updates/Update.tsx
Unescape View File

@ -35,10 +35,16 @@ const Update = () => {
const { Option } = Select; const { Option } = Select;
const [page, setPage] = useState<number>(1); 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 = () => { const showModal = () => {
setOpen(true); setOpen(true);
@ -141,6 +147,15 @@ const Update = () => {
}} }}
wrap wrap
> >
<Select
value={pageSize}
onChange={handlePageSizeChange}
style={{ width: 65, marginRight: 16 }}
options={pageSizeOptions.map((size) => ({
label: `${size}`,
value: size,
}))}
/>
<Button <Button
onClick={Previos} onClick={Previos}
disabled={data?.previous ? false : true} disabled={data?.previous ? false : true}

2
src/Components/Users/UserEdit.tsx
Unescape View File

@ -64,7 +64,7 @@ const UserEdit = () => {
const TeamData = useTeamData({}); const TeamData = useTeamData({});
const noTeamOption = { label: " - - - - - -", value: "" }; const noTeamOption = { label: " - - - - - -", value: "" };
const TeamOption: { label: string; value: any }[] | undefined = const TeamOption: { label: string; value: any }[] | undefined =
TeamData?.data?.map((item) => ({ TeamData?.data?.map((item: any) => ({
label: item?.name, label: item?.name,
value: item?.id, value: item?.id,
})); }));

22
src/Components/Users/Users.tsx
Unescape View File

@ -8,7 +8,7 @@ import {
RightOutlined, RightOutlined,
SearchOutlined, SearchOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { theme } from "antd"; import { Select, theme } from "antd";
// @ts-ignore // @ts-ignore
import IconSearch from "../../assets/searchIcon.png"; import IconSearch from "../../assets/searchIcon.png";
//@ts-ignore //@ts-ignore
@ -17,6 +17,7 @@ import { Button, Input, Pagination, Space, Typography } from "antd";
const User = () => { const User = () => {
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const showModal = () => { const showModal = () => {
@ -39,9 +40,16 @@ const User = () => {
name: search, name: search,
team: "", team: "",
page: page, 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 timerRef = useRef<NodeJS.Timeout | null>(null);
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (timerRef.current) { if (timerRef.current) {
@ -118,6 +126,16 @@ const User = () => {
}} }}
wrap wrap
> >
<Select
value={pageSize}
onChange={handlePageSizeChange}
style={{ width: 65, marginRight: 16 }}
options={pageSizeOptions.map((size) => ({
label: `${size}`,
value: size,
}))}
/>
<Button <Button
onClick={Previos} onClick={Previos}
disabled={data?.previous ? false : true} disabled={data?.previous ? false : true}

54
src/Hooks/Accounting/index.ts
Unescape View File

@ -1,22 +1,41 @@
import { useQuery } from "react-query"; import { useQuery } from "react-query";
import { import {
AccountingController, AccountingController,
TAccountingConfirmedMonthsParams,
TAccountingGetParams, TAccountingGetParams,
TAccountingHistoryGetParams, TAccountingHistoryGetParams,
} from "../../API/LayoutApi/accounting"; } from "../../API/LayoutApi/accounting";
import { TAccountingConfirmedMonths } from "../../types/Accounting/TAccounting";
export const useAccountingData = ({ export const useAccountingData = ({
month, month,
search, search,
team, team,
page,
page_size,
role,
salary_type,
}: TAccountingGetParams) => { }: TAccountingGetParams) => {
return useQuery( return useQuery(
[`/employees-salaries`, month, search, team], [
`/employees-salaries`,
month,
search,
team,
page,
page_size,
role,
salary_type,
],
() => () =>
AccountingController.read({ AccountingController.read({
month, month,
search, search,
team, team,
page,
page_size,
role,
salary_type,
}), }),
{ refetchOnWindowFocus: false } { refetchOnWindowFocus: false }
); );
@ -25,20 +44,43 @@ export const useAccountingData = ({
export const useAccountingHistory = ({ export const useAccountingHistory = ({
search, search,
team, team,
page,
page_size,
role,
salary_type,
}: TAccountingHistoryGetParams) => { }: TAccountingHistoryGetParams) => {
return useQuery( 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, refetchOnWindowFocus: false,
} }
); );
}; };
export const useConfirmedMonths = () => { export const useConfirmedMonths = ({
page,
page_size,
}: TAccountingConfirmedMonthsParams) => {
return useQuery( return useQuery(
[`/salaries-group`], [`/salaries-group`, page, page_size],
() => AccountingController.confirmedMonths(), () => AccountingController.confirmedMonths({ page, page_size }),
{ {
refetchOnWindowFocus: false, refetchOnWindowFocus: false,
} }

7
src/Hooks/Services/index.ts
Unescape View File

@ -1,10 +1,10 @@
import { useQuery } from "react-query"; import { useQuery } from "react-query";
import { serviceController } from "../../API/LayoutApi/services"; import { serviceController } from "../../API/LayoutApi/services";
export const useServiceData = () => { export const useServiceData = (page?: number, page_size?: number) => {
return useQuery( return useQuery(
[`services/`], [`services/`, page, page_size],
() => serviceController.read(), () => serviceController.read(page, page_size),
{ refetchOnWindowFocus: false } { refetchOnWindowFocus: false }
); );
}; };
@ -16,4 +16,3 @@ export const useServiceOne = (serviceId: number | undefined) => {
{ refetchOnWindowFocus: false } { refetchOnWindowFocus: false }
); );
}; };

43
src/Hooks/Stats/index.ts
Unescape View File

@ -12,11 +12,30 @@ export const useStatsData = ({
start_date, start_date,
end_date, end_date,
for_salary, for_salary,
page,
page_size,
}: TStatGetParams) => { }: TStatGetParams) => {
return useQuery( 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 } { refetchOnWindowFocus: false }
); );
}; };
@ -24,22 +43,34 @@ export const useStatTeamData = ({
search, search,
start_date, start_date,
end_date, end_date,
page,
page_size,
}: TStatGetParams) => { }: TStatGetParams) => {
return useQuery( return useQuery(
[`stats/all-teams/`, search, start_date, end_date], [`stats/all-teams/`, search, start_date, end_date, page_size, page],
() => statController.team({ search, start_date, end_date }), () =>
statController.team({ search, start_date, end_date, page, page_size }),
{ refetchOnWindowFocus: false } { refetchOnWindowFocus: false }
); );
}; };
export const useCreatorsData = ({ export const useCreatorsData = ({
page,
page_size,
start_date, start_date,
end_date, end_date,
search, search,
}: TStatCreatorsGetParams) => { }: TStatCreatorsGetParams) => {
return useQuery( return useQuery(
[`stats/task-creators/`, search, start_date, end_date], [`stats/task-creators/`, search, start_date, end_date, page, page_size],
() => statController.creators({ start_date, end_date, search }), () =>
statController.creators({
start_date,
end_date,
search,
page,
page_size,
}),
{ refetchOnWindowFocus: false } { refetchOnWindowFocus: false }
); );
}; };

11
src/Hooks/Teams/index.ts
Unescape View File

@ -1,10 +1,15 @@
import { useQuery } from "react-query"; import { useQuery } from "react-query";
import { TTeamGetParams, teamController } from "../../API/LayoutApi/teams"; 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( return useQuery(
[`teams`, name, company_id], [`teams`, name, company_id, page, page_size],
() => teamController.read({ name, company_id }), () => teamController.read({ name, company_id, page, page_size }),
{ {
refetchOnWindowFocus: false, refetchOnWindowFocus: false,
} }

Write Preview
Loading…
Cancel
Save