parent
f7c8743ed9
commit
8188dab2b4
@ -0,0 +1,146 @@
|
||||
import dayjs from "dayjs";
|
||||
import {
|
||||
CartesianGrid,
|
||||
Legend,
|
||||
Line,
|
||||
LineChart,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
|
||||
import { useGeneralStats } from "../../Hooks/Statistics";
|
||||
|
||||
interface StatisticGeneralProps {
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
}
|
||||
|
||||
const StatisticGeneral: React.FC<StatisticGeneralProps> = ({
|
||||
startDate,
|
||||
endDate,
|
||||
}) => {
|
||||
const formatDate = (dateString: string): string => {
|
||||
const date = new Date(dateString);
|
||||
return new Intl.DateTimeFormat("en-EN", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
const today = dayjs().endOf("day");
|
||||
let finalEndDate = dayjs(endDate);
|
||||
|
||||
if (finalEndDate.isAfter(today)) {
|
||||
finalEndDate = today;
|
||||
}
|
||||
const formattedEndDate = finalEndDate.format("YYYY-MM-DD HH:mm:ss");
|
||||
|
||||
const { data, isLoading, refetch } = useGeneralStats({
|
||||
start_date: startDate,
|
||||
end_date: formattedEndDate,
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 20,
|
||||
marginTop: 40,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
flexDirection: "column",
|
||||
gap: 20,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
{data?.summary && (
|
||||
<div
|
||||
className="card_stat"
|
||||
style={{
|
||||
backgroundColor: "#F99E2C",
|
||||
}}
|
||||
>
|
||||
<p>Total</p>
|
||||
<span>{data?.summary?.total}</span>
|
||||
<p>Tasks</p>
|
||||
</div>
|
||||
)}
|
||||
{data?.summary && (
|
||||
<div
|
||||
className="card_stat"
|
||||
style={{
|
||||
backgroundColor: "#27AE60",
|
||||
}}
|
||||
>
|
||||
<p>Active</p>
|
||||
<span>{data?.summary?.total_completed}</span>
|
||||
<p>Tasks</p>
|
||||
</div>
|
||||
)}
|
||||
{data?.summary && (
|
||||
<div
|
||||
className="card_stat"
|
||||
style={{
|
||||
backgroundColor: "#F64747",
|
||||
}}
|
||||
>
|
||||
<p>Inactive</p>
|
||||
<span>{data?.summary?.total_incomplete}</span>
|
||||
<p>Tasks</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<ResponsiveContainer
|
||||
width="100%"
|
||||
height={517}
|
||||
style={{ textTransform: "capitalize" }}
|
||||
>
|
||||
<LineChart data={data?.daily_stats}>
|
||||
<CartesianGrid vertical={false} stroke="#D7D8E080" />
|
||||
<XAxis
|
||||
dataKey="task_date"
|
||||
style={{
|
||||
color: "#9B9DAA",
|
||||
fontSize: 10,
|
||||
lineHeight: "12.4px",
|
||||
fontWeight: 400,
|
||||
}}
|
||||
tickFormatter={formatDate}
|
||||
/>
|
||||
<YAxis
|
||||
style={{
|
||||
color: "#9B9DAA",
|
||||
fontSize: 10,
|
||||
fontWeight: 400,
|
||||
}}
|
||||
/>
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line dataKey="total_tasks" stroke="#F99E2C" name="Total Tasks" />
|
||||
<Line
|
||||
dataKey="completed_tasks"
|
||||
stroke="#27AE60"
|
||||
name="Active tasks"
|
||||
/>
|
||||
<Line
|
||||
dataKey="incomplete_tasks"
|
||||
stroke="#F64747"
|
||||
name="Inactive Tasks"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatisticGeneral;
|
||||
@ -1,136 +0,0 @@
|
||||
import { Table, Tooltip } from "antd";
|
||||
import { TStat } from "../../types/Statistic/TStat";
|
||||
import {
|
||||
QueryObserverResult,
|
||||
RefetchOptions,
|
||||
RefetchQueryFilters,
|
||||
} from "react-query";
|
||||
import { QuestionCircleOutlined, QuestionOutlined } from "@ant-design/icons";
|
||||
// @ts-ignore
|
||||
import tagIcon from "../../assets/tagIcon.svg";
|
||||
|
||||
import { theme } from "antd";
|
||||
|
||||
const StatTable = ({
|
||||
data,
|
||||
isLoading,
|
||||
refetch,
|
||||
}: {
|
||||
refetch: <TPageData>(
|
||||
options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
|
||||
) => Promise<QueryObserverResult<TStat[], unknown>>;
|
||||
data: any;
|
||||
isLoading: boolean;
|
||||
}) => {
|
||||
const { token } = theme.useToken();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Table
|
||||
size="small"
|
||||
loading={isLoading}
|
||||
dataSource={data?.map((u: any, i: any) => ({
|
||||
no: i + 1,
|
||||
...u,
|
||||
}))}
|
||||
columns={[
|
||||
{
|
||||
title: <img src={tagIcon} alt="" />,
|
||||
dataIndex: "no",
|
||||
key: "no",
|
||||
width: "5%",
|
||||
},
|
||||
{
|
||||
title: "Support specialist",
|
||||
dataIndex: "username",
|
||||
key: "username",
|
||||
},
|
||||
{
|
||||
title: "Team",
|
||||
dataIndex: "team_name",
|
||||
key: "team_name ",
|
||||
},
|
||||
{
|
||||
title: "Tasks",
|
||||
dataIndex: "number_of_tasks",
|
||||
key: "number_of_tasks",
|
||||
sorter: (a: any, b: any) => a.number_of_tasks - b.number_of_tasks,
|
||||
sortDirections: ["ascend", "descend"],
|
||||
},
|
||||
{
|
||||
title: "Points",
|
||||
dataIndex: "total_points",
|
||||
key: "total_points",
|
||||
sorter: (a: any, b: any) => a.total_points - b.total_points,
|
||||
sortDirections: ["ascend", "descend"],
|
||||
},
|
||||
// {
|
||||
// title: (
|
||||
// <div>
|
||||
// <span>Salary</span>
|
||||
// <Tooltip title="The calculation of salary begins at the start of the month and continues to the current day. Select a month to review salary details for prior periods.">
|
||||
// <QuestionCircleOutlined />
|
||||
// </Tooltip>
|
||||
// </div>
|
||||
// ),
|
||||
// dataIndex: "salary",
|
||||
// key: "salary",
|
||||
// render: (text: string, record: any) => (
|
||||
// <Tooltip
|
||||
// title={
|
||||
// <div>
|
||||
// {record.salary_type === "hybrid" ? (
|
||||
// <p>
|
||||
// <strong>Fixed Amount:</strong> $
|
||||
// {record.salary_base_amount}
|
||||
// </p>
|
||||
// ) : (
|
||||
// ""
|
||||
// )}
|
||||
// <p>
|
||||
// <strong>Performance based amount:</strong> $
|
||||
// {record.performance_based_amount}
|
||||
// </p>
|
||||
// </div>
|
||||
// }
|
||||
// overlayStyle={{
|
||||
// maxWidth: "700px",
|
||||
// }}
|
||||
// >
|
||||
// <span>${record.salary}</span>
|
||||
// </Tooltip>
|
||||
// ),
|
||||
// sorter: (a: any, b: any) => a.salary - b.total_points,
|
||||
// sortDirections: ["ascend", "descend"],
|
||||
// },
|
||||
]}
|
||||
// pagination={{
|
||||
// pageSize: 10,
|
||||
// size: "default",
|
||||
// style: {
|
||||
// margin: 0,
|
||||
// justifyContent: "end",
|
||||
// position: "fixed",
|
||||
// bottom: 0,
|
||||
// left: 0,
|
||||
// width: "100%",
|
||||
// backgroundColor: token.colorBgContainer,
|
||||
// boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
|
||||
// padding: "10px 0",
|
||||
// zIndex: 1000,
|
||||
// },
|
||||
// showLessItems: true,
|
||||
// }}
|
||||
pagination={false}
|
||||
rowClassName={(record, index) =>
|
||||
index % 2 === 0 ? "odd-row" : "even-row"
|
||||
}
|
||||
bordered
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatTable;
|
||||
|
||||
// The calculation of salary begins at the start of the month and continues to the current day. Select a month to review salary details for prior periods.
|
||||
@ -0,0 +1,324 @@
|
||||
import { Button, Input, Select, Space, Table, Tag } from "antd";
|
||||
import { TStatTeam, TteamChartData } from "../../types/Statistic/TStat";
|
||||
import {
|
||||
QueryObserverResult,
|
||||
RefetchOptions,
|
||||
RefetchQueryFilters,
|
||||
} from "react-query";
|
||||
import {
|
||||
CartesianGrid,
|
||||
Legend,
|
||||
Line,
|
||||
LineChart,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
|
||||
import { RightOutlined, LeftOutlined } from "@ant-design/icons";
|
||||
|
||||
import { theme } from "antd";
|
||||
import tagIcon from "../../assets/tagIcon.svg";
|
||||
import { useStatTeamData, useTeamChartData } from "../../Hooks/Statistics";
|
||||
import { useEffect, useState } from "react";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
interface StatisticTeamProps {
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
}
|
||||
|
||||
const StatisticTeam: React.FC<StatisticTeamProps> = ({
|
||||
startDate,
|
||||
endDate,
|
||||
}) => {
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
const [pageSize, setPageSize] = useState<number>(() => {
|
||||
const saved = localStorage.getItem("general_pageSize");
|
||||
return saved ? Number(saved) : 15;
|
||||
});
|
||||
|
||||
const pageSizeOptions = [15, 20, 30, 40, 50];
|
||||
|
||||
const handlePageSizeChange = (value: number) => {
|
||||
setPageSize(value);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("general_pageSize", String(pageSize));
|
||||
}, [pageSize]);
|
||||
|
||||
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 } = useStatTeamData({
|
||||
page: page,
|
||||
page_size: pageSize,
|
||||
start_date: startDate,
|
||||
end_date: endDate,
|
||||
});
|
||||
|
||||
const today = dayjs().endOf("day");
|
||||
|
||||
let finalEndDate = dayjs(endDate);
|
||||
|
||||
if (finalEndDate.isAfter(today)) {
|
||||
finalEndDate = today;
|
||||
}
|
||||
const formattedEndDate = finalEndDate.format("YYYY-MM-DD HH:mm:ss");
|
||||
|
||||
interface TeamschartDataType {
|
||||
data?: TteamChartData[];
|
||||
refetch: <TPageData>(
|
||||
options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
|
||||
) => Promise<QueryObserverResult<TteamChartData[], unknown>>;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
const TeamschartData: TeamschartDataType = useTeamChartData({
|
||||
start_date: startDate,
|
||||
end_date: formattedEndDate,
|
||||
});
|
||||
|
||||
const predefinedColors = [
|
||||
"#ff2600",
|
||||
"#FF4500",
|
||||
"#FF1493",
|
||||
"#006800",
|
||||
"#3CB371",
|
||||
"#00BFFF",
|
||||
"#FFD700",
|
||||
"#F08080",
|
||||
"#8A2BE2",
|
||||
"#FFB6C1",
|
||||
];
|
||||
|
||||
function updateLines(chartData: any, predefinedColors: any) {
|
||||
if (!chartData || chartData.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const keys = Object.keys(chartData[0]).filter((key) => key !== "date");
|
||||
|
||||
const newLines = keys.flatMap((key, index) => {
|
||||
const color = predefinedColors[index % predefinedColors.length];
|
||||
|
||||
return [
|
||||
{
|
||||
key: `${key}.total_points`,
|
||||
color,
|
||||
name: `${key} points`,
|
||||
legend_name: `${key}`,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
return newLines;
|
||||
}
|
||||
|
||||
const lines = TeamschartData.data
|
||||
? updateLines(TeamschartData.data, predefinedColors)
|
||||
: [];
|
||||
|
||||
const formatDate = (dateString: string): string => {
|
||||
const date = new Date(dateString);
|
||||
return new Intl.DateTimeFormat("en-EN", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
const { token } = theme.useToken();
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Table
|
||||
loading={isLoading}
|
||||
size="small"
|
||||
dataSource={data?.data?.map((u: any, i: any) => ({
|
||||
no: i + 1,
|
||||
...u,
|
||||
}))}
|
||||
columns={[
|
||||
{
|
||||
title: <img src={tagIcon} alt="" />,
|
||||
dataIndex: "no",
|
||||
},
|
||||
{
|
||||
title: "Team",
|
||||
dataIndex: "name",
|
||||
},
|
||||
{
|
||||
title: "Total tasks",
|
||||
dataIndex: "number_of_tasks",
|
||||
},
|
||||
{
|
||||
title: "Total points",
|
||||
dataIndex: "total_points",
|
||||
},
|
||||
{
|
||||
title: "Is Active",
|
||||
dataIndex: "is_active",
|
||||
render: (tag: boolean) => (
|
||||
<Tag color={tag ? "geekblue" : "red"}>
|
||||
{tag ? "True" : "False"}
|
||||
</Tag>
|
||||
),
|
||||
filters: [
|
||||
{
|
||||
text: "True",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
text: "False",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
onFilter: (
|
||||
value: string | number | boolean,
|
||||
record: TStatTeam
|
||||
) => {
|
||||
return record.is_active === value;
|
||||
},
|
||||
},
|
||||
]}
|
||||
pagination={false}
|
||||
rowClassName={(record, index) =>
|
||||
index % 2 === 0 ? "odd-row" : "even-row"
|
||||
}
|
||||
bordered
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "center", marginTop: 30 }}>
|
||||
<ResponsiveContainer width="100%" height={517}>
|
||||
<LineChart
|
||||
data={TeamschartData.data || []}
|
||||
margin={{ top: 20, right: 30, left: 20, bottom: 10 }}
|
||||
>
|
||||
<CartesianGrid vertical={false} stroke="#D7D8E080" />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
style={{
|
||||
color: "#9B9DAA",
|
||||
fontSize: 12,
|
||||
lineHeight: "15.4px",
|
||||
fontWeight: 400,
|
||||
|
||||
letterSpacing: 0.8,
|
||||
}}
|
||||
tickFormatter={formatDate}
|
||||
/>
|
||||
<YAxis
|
||||
style={{
|
||||
color: "#9B9DAA",
|
||||
fontSize: 10,
|
||||
fontWeight: 400,
|
||||
}}
|
||||
/>
|
||||
<Tooltip />
|
||||
<Legend
|
||||
payload={lines.map((line) => ({
|
||||
value: line.legend_name,
|
||||
type: "line",
|
||||
id: line.key,
|
||||
color: line.color,
|
||||
}))}
|
||||
/>
|
||||
|
||||
{lines.map((line, index) => (
|
||||
<Line
|
||||
key={index}
|
||||
type="linear"
|
||||
dataKey={line.key}
|
||||
name={line.name}
|
||||
stroke={line.color}
|
||||
activeDot={{ r: 7 }}
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<Space style={{ width: "100%", marginTop: 40 }} direction="vertical">
|
||||
<Space
|
||||
style={{
|
||||
justifyContent: "end",
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
backgroundColor: token.colorBgContainer,
|
||||
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
|
||||
padding: "10px 0",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
wrap
|
||||
>
|
||||
<Select
|
||||
value={pageSize}
|
||||
onChange={handlePageSizeChange}
|
||||
style={{ width: 65, marginRight: 16 }}
|
||||
options={pageSizeOptions.map((size) => ({
|
||||
label: `${size}`,
|
||||
value: size,
|
||||
}))}
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={Previos}
|
||||
disabled={data?.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?.data?.next ? false : true}
|
||||
style={{
|
||||
backgroundColor: token.colorBgContainer,
|
||||
color: token.colorText,
|
||||
border: "none",
|
||||
}}
|
||||
>
|
||||
<RightOutlined />
|
||||
</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatisticTeam;
|
||||
@ -1,98 +0,0 @@
|
||||
import { Table, Tag } from "antd";
|
||||
import { TStatTeam } from "../../types/Statistic/TStat";
|
||||
import {
|
||||
QueryObserverResult,
|
||||
RefetchOptions,
|
||||
RefetchQueryFilters,
|
||||
} from "react-query";
|
||||
|
||||
import { theme } from "antd";
|
||||
// @ts-ignore
|
||||
import tagIcon from "../../assets/tagIcon.svg";
|
||||
const StatTeamTable = ({
|
||||
data,
|
||||
isLoading,
|
||||
refetch,
|
||||
}: {
|
||||
refetch: <TPageData>(
|
||||
options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
|
||||
) => Promise<QueryObserverResult<TStatTeam[], unknown>>;
|
||||
data: any;
|
||||
isLoading: boolean;
|
||||
}) => {
|
||||
const { token } = theme.useToken();
|
||||
return (
|
||||
<div style={{ maxHeight: "400px", overflow: "auto" }}>
|
||||
<Table
|
||||
loading={isLoading}
|
||||
size="small"
|
||||
dataSource={data?.map((u: any, i: any) => ({
|
||||
no: i + 1,
|
||||
...u,
|
||||
}))}
|
||||
columns={[
|
||||
{
|
||||
title: <img src={tagIcon} alt="" />,
|
||||
dataIndex: "no",
|
||||
},
|
||||
{
|
||||
title: "Team",
|
||||
dataIndex: "name",
|
||||
},
|
||||
{
|
||||
title: "Total tasks",
|
||||
dataIndex: "number_of_tasks",
|
||||
},
|
||||
{
|
||||
title: "Total points",
|
||||
dataIndex: "total_points",
|
||||
},
|
||||
{
|
||||
title: "Is Active",
|
||||
dataIndex: "is_active",
|
||||
render: (tag: boolean) => (
|
||||
<Tag color={tag ? "geekblue" : "red"}>
|
||||
{tag ? "True" : "False"}
|
||||
</Tag>
|
||||
),
|
||||
filters: [
|
||||
{
|
||||
text: "True",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
text: "False",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
onFilter: (value: string | number | boolean, record: TStatTeam) => {
|
||||
return record.is_active === value;
|
||||
},
|
||||
},
|
||||
]}
|
||||
// pagination={{
|
||||
// pageSize: 10,
|
||||
// size: "default",
|
||||
// style: {
|
||||
// margin: 0,
|
||||
// justifyContent: "end",
|
||||
// position: "fixed",
|
||||
// bottom: 0,
|
||||
// left: 0,
|
||||
// width: "100%",
|
||||
// backgroundColor: token.colorBgContainer,
|
||||
// boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
|
||||
// padding: "10px 0",
|
||||
// zIndex: 1000,
|
||||
// },
|
||||
// }}
|
||||
pagination={false}
|
||||
rowClassName={(record, index) =>
|
||||
index % 2 === 0 ? "odd-row" : "even-row"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatTeamTable;
|
||||
@ -0,0 +1,249 @@
|
||||
import { Button, Input, Select, Space, Table, Tooltip } from "antd";
|
||||
import { LeftOutlined, RightOutlined, SearchOutlined } from "@ant-design/icons";
|
||||
import tagIcon from "../../assets/tagIcon.svg";
|
||||
|
||||
import { theme } from "antd";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useTeamData } from "../../Hooks/Teams";
|
||||
import { useStatsData } from "../../Hooks/Statistics";
|
||||
import { statController } from "../../API/LayoutApi/statistic";
|
||||
import { debounce } from "lodash";
|
||||
|
||||
interface StatisticsChekersProps {
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
}
|
||||
|
||||
const StatisticsChekers: React.FC<StatisticsChekersProps> = ({
|
||||
startDate,
|
||||
endDate,
|
||||
}) => {
|
||||
const [team, setTeam] = useState<any>("");
|
||||
const [search, setSearch] = useState<string>("");
|
||||
const { token } = theme.useToken();
|
||||
const teamData = useTeamData({});
|
||||
const teamOptions: { label: string; value: any }[] | undefined =
|
||||
teamData?.data?.map((item: any) => ({
|
||||
label: item?.name,
|
||||
value: item?.name,
|
||||
}));
|
||||
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
const [pageSize, setPageSize] = useState<number>(() => {
|
||||
const saved = localStorage.getItem("general_pageSize");
|
||||
return saved ? Number(saved) : 15;
|
||||
});
|
||||
|
||||
const pageSizeOptions = [15, 20, 30, 40, 50];
|
||||
|
||||
const handlePageSizeChange = (value: number) => {
|
||||
setPageSize(value);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("general_pageSize", String(pageSize));
|
||||
}, [pageSize]);
|
||||
|
||||
const Next = () => {
|
||||
const a = Number(page) + 1;
|
||||
setPage(a);
|
||||
};
|
||||
const Previos = () => {
|
||||
Number(page);
|
||||
if (page > 1) {
|
||||
const a = Number(page) - 1;
|
||||
setPage(a);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
debouncedSearch(e.target.value);
|
||||
};
|
||||
|
||||
const debouncedSearch = useMemo(
|
||||
() =>
|
||||
debounce((value: string) => {
|
||||
setSearch(value);
|
||||
}, 1000),
|
||||
[]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
debouncedSearch.cancel();
|
||||
};
|
||||
}, [debouncedSearch]);
|
||||
|
||||
const handleSave = (a: string) => {
|
||||
const trimmedStartDate = startDate.slice(0, 10);
|
||||
const trimmedEndDate = endDate.slice(0, 10);
|
||||
const fileName = `${trimmedStartDate}-${trimmedEndDate}`;
|
||||
if (a === "team") {
|
||||
const teamName = `${team}_${fileName}`;
|
||||
statController.saveUsersStats(teamName, startDate, endDate, team);
|
||||
} else {
|
||||
statController.saveTeamStats(fileName, startDate, endDate);
|
||||
}
|
||||
};
|
||||
|
||||
const { data, refetch, isLoading } = useStatsData({
|
||||
search: search,
|
||||
team: team,
|
||||
start_date: startDate,
|
||||
end_date: endDate,
|
||||
page: page,
|
||||
page_size: pageSize,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: 12 }}>
|
||||
<Input
|
||||
placeholder="Search"
|
||||
prefix={<SearchOutlined />}
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
</div>
|
||||
<Select
|
||||
style={{ width: 260 }}
|
||||
placeholder="Team"
|
||||
onChange={(value: any) => setTeam(value)}
|
||||
options={teamOptions}
|
||||
allowClear
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
size="small"
|
||||
loading={isLoading}
|
||||
dataSource={data?.data?.map((u: any, i: any) => ({
|
||||
no: i + 1,
|
||||
...u,
|
||||
}))}
|
||||
columns={[
|
||||
{
|
||||
title: <img src={tagIcon} alt="" />,
|
||||
dataIndex: "no",
|
||||
key: "no",
|
||||
width: "5%",
|
||||
},
|
||||
{
|
||||
title: "Support specialist",
|
||||
dataIndex: "username",
|
||||
key: "username",
|
||||
},
|
||||
{
|
||||
title: "Team",
|
||||
dataIndex: "team_name",
|
||||
key: "team_name ",
|
||||
},
|
||||
{
|
||||
title: "Tasks",
|
||||
dataIndex: "number_of_tasks",
|
||||
key: "number_of_tasks",
|
||||
sorter: (a: any, b: any) => a.number_of_tasks - b.number_of_tasks,
|
||||
sortDirections: ["ascend", "descend"],
|
||||
},
|
||||
{
|
||||
title: "Points",
|
||||
dataIndex: "total_points",
|
||||
key: "total_points",
|
||||
sorter: (a: any, b: any) => a.total_points - b.total_points,
|
||||
sortDirections: ["ascend", "descend"],
|
||||
},
|
||||
]}
|
||||
pagination={false}
|
||||
rowClassName={(record, index) =>
|
||||
index % 2 === 0 ? "odd-row" : "even-row"
|
||||
}
|
||||
bordered
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={(e) => handleSave("team")}
|
||||
style={{ marginTop: 10, marginBottom: 40 }}
|
||||
>
|
||||
Save as file
|
||||
</Button>
|
||||
|
||||
<Space style={{ width: "100%", marginTop: 40 }} direction="vertical">
|
||||
<Space
|
||||
style={{
|
||||
justifyContent: "end",
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
backgroundColor: token.colorBgContainer,
|
||||
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
|
||||
padding: "10px 0",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
wrap
|
||||
>
|
||||
<Select
|
||||
value={pageSize}
|
||||
onChange={handlePageSizeChange}
|
||||
style={{ width: 65, marginRight: 16 }}
|
||||
options={pageSizeOptions.map((size) => ({
|
||||
label: `${size}`,
|
||||
value: size,
|
||||
}))}
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={Previos}
|
||||
disabled={data?.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?.data?.next ? false : true}
|
||||
style={{
|
||||
backgroundColor: token.colorBgContainer,
|
||||
color: token.colorText,
|
||||
border: "none",
|
||||
}}
|
||||
>
|
||||
<RightOutlined />
|
||||
</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatisticsChekers;
|
||||
@ -1,81 +0,0 @@
|
||||
import React from "react";
|
||||
import { Table, Tag, Tooltip } from "antd";
|
||||
import { theme } from "antd";
|
||||
import {
|
||||
QueryObserverResult,
|
||||
RefetchOptions,
|
||||
RefetchQueryFilters,
|
||||
} from "react-query";
|
||||
import { TStatCreators } from "../../types/Statistic/TStat";
|
||||
import tagIcon from "../../assets/tagIcon.svg";
|
||||
|
||||
const StatisticsSupportTable = ({
|
||||
data,
|
||||
isLoading,
|
||||
refetch,
|
||||
}: {
|
||||
refetch: <TPageData>(
|
||||
options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
|
||||
) => Promise<QueryObserverResult<TStatCreators[], unknown>>;
|
||||
data: any;
|
||||
isLoading: boolean;
|
||||
}) => {
|
||||
const { token } = theme.useToken();
|
||||
return (
|
||||
<div style={{ paddingBottom: 40 }}>
|
||||
<Table
|
||||
loading={isLoading}
|
||||
size="small"
|
||||
dataSource={data?.data?.map((u: any, i: any) => ({
|
||||
no: i + 1,
|
||||
...u,
|
||||
}))}
|
||||
columns={[
|
||||
{
|
||||
title: <img src={tagIcon} alt="" />,
|
||||
dataIndex: "no",
|
||||
key: "no",
|
||||
width: "5%",
|
||||
},
|
||||
{
|
||||
title: "Support specialist",
|
||||
dataIndex: "username",
|
||||
render: (text, record) => {
|
||||
return record.full_name.trim()
|
||||
? record.full_name
|
||||
: record.username;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Total tasks",
|
||||
dataIndex: "number_of_tasks",
|
||||
},
|
||||
]}
|
||||
// pagination={{
|
||||
// pageSize: 10,
|
||||
// size: "default",
|
||||
// style: {
|
||||
// margin: 0,
|
||||
// justifyContent: "end",
|
||||
// position: "fixed",
|
||||
// bottom: 0,
|
||||
// left: 0,
|
||||
// width: "100%",
|
||||
// backgroundColor: token.colorBgContainer,
|
||||
// boxShadow: "0 4px 8px rgba(0, 0, 0, 0.4)",
|
||||
// padding: "10px 0",
|
||||
// zIndex: 1000,
|
||||
// },
|
||||
// showLessItems: true,
|
||||
// }}
|
||||
pagination={false}
|
||||
rowClassName={(record, index) =>
|
||||
index % 2 === 0 ? "odd-row" : "even-row"
|
||||
}
|
||||
bordered
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatisticsSupportTable;
|
||||
@ -0,0 +1,206 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Button, Input, Select, Space, Table, Tag, Tooltip } from "antd";
|
||||
import { theme } from "antd";
|
||||
import tagIcon from "../../assets/tagIcon.svg";
|
||||
import { useCreatorsData } from "../../Hooks/Statistics";
|
||||
|
||||
import { debounce } from "lodash";
|
||||
|
||||
import { SearchOutlined, RightOutlined, LeftOutlined } from "@ant-design/icons";
|
||||
|
||||
interface StatisticsTechSupportProps {
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
}
|
||||
|
||||
const StatisticsTechSupport: React.FC<StatisticsTechSupportProps> = ({
|
||||
startDate,
|
||||
endDate,
|
||||
}) => {
|
||||
const { token } = theme.useToken();
|
||||
|
||||
const [SupportSearch, setSupportSearch] = useState<string>("");
|
||||
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
const [pageSize, setPageSize] = useState<number>(() => {
|
||||
const saved = localStorage.getItem("general_pageSize");
|
||||
return saved ? Number(saved) : 15;
|
||||
});
|
||||
|
||||
const pageSizeOptions = [15, 20, 30, 40, 50];
|
||||
|
||||
const handlePageSizeChange = (value: number) => {
|
||||
setPageSize(value);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("general_pageSize", String(pageSize));
|
||||
}, [pageSize]);
|
||||
|
||||
const Next = () => {
|
||||
const a = Number(page) + 1;
|
||||
setPage(a);
|
||||
};
|
||||
const Previos = () => {
|
||||
Number(page);
|
||||
if (page > 1) {
|
||||
const a = Number(page) - 1;
|
||||
setPage(a);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTechSupportSearchChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
debouncedSearch(e.target.value);
|
||||
};
|
||||
|
||||
const debouncedSearch = useMemo(
|
||||
() =>
|
||||
debounce((value: string) => {
|
||||
setSupportSearch(value);
|
||||
}, 1000),
|
||||
[]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
debouncedSearch.cancel();
|
||||
};
|
||||
}, [debouncedSearch]);
|
||||
|
||||
const { data, isLoading } = useCreatorsData({
|
||||
page: page,
|
||||
page_size: pageSize,
|
||||
search: SupportSearch,
|
||||
start_date: startDate,
|
||||
end_date: endDate,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Input
|
||||
placeholder="Search"
|
||||
prefix={<SearchOutlined />}
|
||||
onChange={handleTechSupportSearchChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
loading={isLoading}
|
||||
size="small"
|
||||
dataSource={data?.data?.map((u: any, i: any) => ({
|
||||
no: i + 1,
|
||||
...u,
|
||||
}))}
|
||||
columns={[
|
||||
{
|
||||
title: <img src={tagIcon} alt="" />,
|
||||
dataIndex: "no",
|
||||
key: "no",
|
||||
width: "5%",
|
||||
},
|
||||
{
|
||||
title: "Support specialist",
|
||||
dataIndex: "username",
|
||||
render: (text, record) => {
|
||||
return record.full_name.trim()
|
||||
? record.full_name
|
||||
: record.username;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Total tasks",
|
||||
dataIndex: "number_of_tasks",
|
||||
},
|
||||
]}
|
||||
pagination={false}
|
||||
rowClassName={(record, index) =>
|
||||
index % 2 === 0 ? "odd-row" : "even-row"
|
||||
}
|
||||
bordered
|
||||
/>
|
||||
|
||||
<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?.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?.data?.next ? false : true}
|
||||
style={{
|
||||
backgroundColor: token.colorBgContainer,
|
||||
color: token.colorText,
|
||||
border: "none",
|
||||
}}
|
||||
>
|
||||
<RightOutlined />
|
||||
</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatisticsTechSupport;
|
||||
Loading…
Reference in new issue