dilmurod
parent
52a8c317d1
commit
3cdc0ce06f
@ -0,0 +1,141 @@
|
||||
import { Card, Statistic, Row, Col } from "antd";
|
||||
import dayjs from "dayjs";
|
||||
import { CurrentMonth } from "../../../types/Profile/TProfile";
|
||||
|
||||
type Props = {
|
||||
current: CurrentMonth;
|
||||
};
|
||||
|
||||
const CurrentMonthCard: React.FC<Props> = ({ current }) => {
|
||||
return (
|
||||
<Card>
|
||||
<Statistic
|
||||
title={
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "Geist Mono",
|
||||
fontSize: "12px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 400,
|
||||
lineHeight: "16px",
|
||||
}}
|
||||
>
|
||||
{`Current month / ${dayjs().format("MMMM")}`}
|
||||
</span>
|
||||
}
|
||||
value={current.salary}
|
||||
prefix="$"
|
||||
precision={2}
|
||||
valueStyle={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "24px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
lineHeight: "28px",
|
||||
letterSpacing: "-0.96px",
|
||||
}}
|
||||
/>
|
||||
<Row gutter={12} style={{ marginTop: 12 }}>
|
||||
<Col span={4}>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<span
|
||||
style={{
|
||||
color: "#9b9daa",
|
||||
fontFamily: "Inter",
|
||||
fontSize: "14px",
|
||||
fontWeight: 500,
|
||||
lineHeight: "20px",
|
||||
}}
|
||||
>
|
||||
Bonuses:
|
||||
</span>
|
||||
<Statistic
|
||||
value={current.total_bonuses}
|
||||
prefix="+$"
|
||||
valueStyle={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "14px",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={4}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<span
|
||||
style={{
|
||||
color: "#9b9daa",
|
||||
fontFamily: "Inter",
|
||||
fontSize: "14px",
|
||||
fontWeight: 500,
|
||||
lineHeight: "20px",
|
||||
}}
|
||||
>
|
||||
Charges:
|
||||
</span>
|
||||
<Statistic
|
||||
value={current.total_charges}
|
||||
prefix="-$"
|
||||
valueStyle={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "14px",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={4}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<span
|
||||
style={{
|
||||
color: "#9b9daa",
|
||||
fontFamily: "Inter",
|
||||
fontSize: "14px",
|
||||
fontWeight: 500,
|
||||
lineHeight: "20px",
|
||||
}}
|
||||
>
|
||||
Tasks:
|
||||
</span>
|
||||
<Statistic
|
||||
value={current.number_of_tasks}
|
||||
valueStyle={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "14px",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={4}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<span
|
||||
style={{
|
||||
color: "#9b9daa",
|
||||
fontFamily: "Inter",
|
||||
fontSize: "14px",
|
||||
fontWeight: 500,
|
||||
lineHeight: "20px",
|
||||
}}
|
||||
>
|
||||
Points:
|
||||
</span>
|
||||
<Statistic
|
||||
value={current.total_points}
|
||||
valueStyle={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "14px",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CurrentMonthCard;
|
||||
@ -0,0 +1,72 @@
|
||||
import { Table, Typography } from "antd";
|
||||
import { SalaryHistory } from "../../../types/Profile/TProfile";
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
type Props = {
|
||||
year: number;
|
||||
salaries: SalaryHistory[];
|
||||
};
|
||||
|
||||
const SalaryHistoryTable: React.FC<Props> = ({ year, salaries }) => {
|
||||
return (
|
||||
<div style={{ marginBottom: 32 }}>
|
||||
<Title
|
||||
level={3}
|
||||
style={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "18px",
|
||||
fontWeight: 700,
|
||||
lineHeight: "24px",
|
||||
letterSpacing: "-0.36px",
|
||||
}}
|
||||
>
|
||||
{year}
|
||||
</Title>
|
||||
<Table<SalaryHistory>
|
||||
dataSource={salaries}
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
size="large"
|
||||
columns={[
|
||||
{
|
||||
title: "#",
|
||||
dataIndex: "no",
|
||||
width: "5%",
|
||||
align: "center",
|
||||
render: (_, __, index) => index + 1,
|
||||
},
|
||||
{
|
||||
title: "Month",
|
||||
dataIndex: "month",
|
||||
},
|
||||
{
|
||||
title: "Total Salary",
|
||||
dataIndex: "total_salary",
|
||||
render: (_, record) => <span>${record.total_salary}</span>,
|
||||
},
|
||||
{
|
||||
title: "Total Bonuses",
|
||||
dataIndex: "total_bonuses",
|
||||
render: (_, record) => <span>${record.total_bonuses}</span>,
|
||||
},
|
||||
{
|
||||
title: "Total Charges",
|
||||
dataIndex: "total_charges",
|
||||
render: (_, record) => <span>${record.total_charges}</span>,
|
||||
},
|
||||
{
|
||||
title: "Total Tasks",
|
||||
dataIndex: "number_of_tasks",
|
||||
},
|
||||
{
|
||||
title: "Total Points",
|
||||
dataIndex: "total_points",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SalaryHistoryTable;
|
||||
@ -0,0 +1,159 @@
|
||||
import { Row, Col, Statistic } from "antd";
|
||||
import { Total } from "../../../types/Profile/TProfile";
|
||||
|
||||
type Props = {
|
||||
total: Total;
|
||||
};
|
||||
|
||||
const TotalStatistics: React.FC<Props> = ({ total }) => {
|
||||
return (
|
||||
<Row gutter={16}>
|
||||
<Col span={4}>
|
||||
<div style={{ display: "flex", flexDirection: "column", rowGap: 4 }}>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "Geist Mono",
|
||||
fontSize: "12px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 400,
|
||||
lineHeight: "16px",
|
||||
color: "#9B9DAA",
|
||||
}}
|
||||
>
|
||||
Total salary
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "14px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 600,
|
||||
lineHeight: "20px",
|
||||
letterSpacing: "-0.14px",
|
||||
}}
|
||||
>
|
||||
${total.total_earned_salary}
|
||||
</span>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={4}>
|
||||
<div style={{ display: "flex", flexDirection: "column", rowGap: 4 }}>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "Geist Mono",
|
||||
fontSize: "12px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 400,
|
||||
lineHeight: "16px",
|
||||
color: " #9B9DAA",
|
||||
}}
|
||||
>
|
||||
Total bonuses
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "14px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 600,
|
||||
lineHeight: "20px",
|
||||
letterSpacing: "-0.14px",
|
||||
}}
|
||||
>
|
||||
+${total.total_bonuses}
|
||||
</span>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={4}>
|
||||
<div style={{ display: "flex", flexDirection: "column", rowGap: 4 }}>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "Geist Mono",
|
||||
fontSize: "12px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 400,
|
||||
lineHeight: "16px",
|
||||
color: "#9B9DAA",
|
||||
}}
|
||||
>
|
||||
Total charges
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "14px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 600,
|
||||
lineHeight: "20px",
|
||||
letterSpacing: "-0.14px",
|
||||
}}
|
||||
>
|
||||
-${total.total_charges}
|
||||
</span>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={4}>
|
||||
<div style={{ display: "flex", flexDirection: "column", rowGap: 4 }}>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "Geist Mono",
|
||||
fontSize: "12px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 400,
|
||||
lineHeight: "16px",
|
||||
color: "#9B9DAA",
|
||||
}}
|
||||
>
|
||||
Total tasks
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "14px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 600,
|
||||
lineHeight: "20px",
|
||||
letterSpacing: "-0.14px",
|
||||
}}
|
||||
>
|
||||
{total.total_number_of_tasks}
|
||||
</span>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={4}>
|
||||
<div style={{ display: "flex", flexDirection: "column", rowGap: 4 }}>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "Geist Mono",
|
||||
fontSize: "12px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 400,
|
||||
lineHeight: "16px",
|
||||
color: "#9B9DAA",
|
||||
}}
|
||||
>
|
||||
Total points
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "14px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 600,
|
||||
lineHeight: "20px",
|
||||
letterSpacing: "-0.14px",
|
||||
}}
|
||||
>
|
||||
{total.total_earned_points}
|
||||
</span>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
export default TotalStatistics;
|
||||
@ -0,0 +1,104 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Spin, Typography } from "antd";
|
||||
import { useMySalaryData } from "../../../Hooks/Profile";
|
||||
|
||||
import CurrentMonthCard from "./CurrentMonthCard";
|
||||
import TotalStatistics from "./TotalStatistics";
|
||||
import SalaryHistoryTable from "./SalaryHistoryTable";
|
||||
import { SalaryHistory } from "../../../types/Profile/TProfile";
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
const MySalary: React.FC = () => {
|
||||
const { data, isLoading } = useMySalaryData();
|
||||
|
||||
const [years, setYears] = useState<number[]>([]);
|
||||
|
||||
const extractYears = (history: SalaryHistory[]): number[] => {
|
||||
return Array.from(new Set(history.map((s) => s.year))).sort(
|
||||
(a, b) => b - a
|
||||
);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (data?.salary_history && data.salary_history.length > 0) {
|
||||
setYears(extractYears(data.salary_history));
|
||||
}
|
||||
}, [data?.salary_history]);
|
||||
|
||||
if (isLoading)
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
);
|
||||
|
||||
if (!data)
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<p>No data</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="profile-my-salary">
|
||||
<div>
|
||||
<Title
|
||||
level={3}
|
||||
style={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "18px",
|
||||
fontWeight: 700,
|
||||
lineHeight: "24px",
|
||||
letterSpacing: "-0.36px",
|
||||
}}
|
||||
>
|
||||
Current Month
|
||||
</Title>
|
||||
|
||||
<CurrentMonthCard current={data.current_month} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Title
|
||||
level={3}
|
||||
style={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "18px",
|
||||
fontWeight: 700,
|
||||
lineHeight: "24px",
|
||||
letterSpacing: "-0.36px",
|
||||
}}
|
||||
>
|
||||
Total
|
||||
</Title>
|
||||
|
||||
<TotalStatistics total={data.total} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{years.map((year) => (
|
||||
<SalaryHistoryTable
|
||||
key={year}
|
||||
year={year}
|
||||
salaries={data.salary_history.filter((s) => s.year === year)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MySalary;
|
||||
@ -1,25 +1,80 @@
|
||||
export type TProfile = {
|
||||
id: number;
|
||||
username: string;
|
||||
team: null;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
is_staff: boolean;
|
||||
}
|
||||
id: number;
|
||||
username: string;
|
||||
team: null;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
is_staff: boolean;
|
||||
};
|
||||
|
||||
export type TMystats = {
|
||||
daily_stats: Array<object>;
|
||||
total_for_period: number;
|
||||
avg_stats_for_period: number
|
||||
period: number;
|
||||
contribution: number;
|
||||
}
|
||||
daily_stats: Array<object>;
|
||||
total_for_period: number;
|
||||
avg_stats_for_period: number;
|
||||
period: number;
|
||||
contribution: number;
|
||||
};
|
||||
|
||||
export type TMyTaskHistory = {
|
||||
id: number;
|
||||
task: number;
|
||||
user: string;
|
||||
action: string;
|
||||
description: string;
|
||||
timestamp: Date;
|
||||
}
|
||||
id: number;
|
||||
task: number;
|
||||
user: string;
|
||||
action: string;
|
||||
description: string;
|
||||
timestamp: Date;
|
||||
};
|
||||
|
||||
export interface CurrentMonth {
|
||||
username: string;
|
||||
salary_type: string;
|
||||
salary_base_amount: number;
|
||||
employee_id: number;
|
||||
full_name: string;
|
||||
team_name: string;
|
||||
number_of_tasks: number;
|
||||
total_points: number;
|
||||
total_bonuses: number;
|
||||
total_charges: number;
|
||||
performance_salary: number;
|
||||
role: string;
|
||||
salary: number;
|
||||
month: string;
|
||||
}
|
||||
|
||||
export interface Total {
|
||||
id: number;
|
||||
username: string;
|
||||
salary_type: string;
|
||||
full_name: string;
|
||||
team_name: string;
|
||||
role: string;
|
||||
total_bonuses: number;
|
||||
total_charges: number;
|
||||
total_base_salary: number;
|
||||
total_performance_salary: number;
|
||||
total_earned_points: number;
|
||||
total_number_of_tasks: number;
|
||||
total_earned_salary: number;
|
||||
salary_months_count: number;
|
||||
}
|
||||
|
||||
export interface SalaryHistory {
|
||||
id: number;
|
||||
month: string;
|
||||
year: number;
|
||||
number_of_tasks: number;
|
||||
total_points: number;
|
||||
total_bonuses: string;
|
||||
total_charges: string;
|
||||
salary_type: string;
|
||||
base_salary: string;
|
||||
performance_salary: string;
|
||||
total_salary: string;
|
||||
salary_document_path: string | null;
|
||||
}
|
||||
|
||||
export interface MySalaryResponse {
|
||||
current_month: CurrentMonth;
|
||||
total: Total;
|
||||
salary_history: SalaryHistory[];
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue