You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.5 KiB
62 lines
1.5 KiB
import { Row, Col } from "antd";
|
|
import { Total } from "../../../types/Profile/TProfile";
|
|
|
|
type Props = {
|
|
total: Total;
|
|
};
|
|
|
|
const Item = ({ label, value }: { label: string; value: React.ReactNode }) => (
|
|
<div style={{ display: "flex", flexDirection: "column", rowGap: 4 }}>
|
|
<span
|
|
style={{
|
|
fontFamily: "Geist Mono",
|
|
fontSize: "12px",
|
|
fontWeight: 400,
|
|
lineHeight: "16px",
|
|
color: "#9B9DAA",
|
|
}}
|
|
>
|
|
{label}
|
|
</span>
|
|
<span
|
|
style={{
|
|
fontFamily: "Inter",
|
|
fontSize: "14px",
|
|
fontWeight: 600,
|
|
lineHeight: "20px",
|
|
letterSpacing: "-0.14px",
|
|
}}
|
|
>
|
|
{value}
|
|
</span>
|
|
</div>
|
|
);
|
|
|
|
const TotalStatistics: React.FC<Props> = ({ total }) => {
|
|
return (
|
|
<Row gutter={[16, 16]}>
|
|
<Col xs={12} sm={12} md={8} lg={4}>
|
|
<Item label="Total salary" value={`$${total.total_earned_salary}`} />
|
|
</Col>
|
|
|
|
<Col xs={12} sm={12} md={8} lg={4}>
|
|
<Item label="Total bonuses" value={`+$${total.total_bonuses}`} />
|
|
</Col>
|
|
|
|
<Col xs={12} sm={12} md={8} lg={4}>
|
|
<Item label="Total charges" value={`-$${total.total_charges}`} />
|
|
</Col>
|
|
|
|
<Col xs={12} sm={12} md={8} lg={4}>
|
|
<Item label="Total tasks" value={total.total_number_of_tasks} />
|
|
</Col>
|
|
|
|
<Col xs={12} sm={12} md={8} lg={4}>
|
|
<Item label="Total points" value={total.total_earned_points} />
|
|
</Col>
|
|
</Row>
|
|
);
|
|
};
|
|
|
|
export default TotalStatistics;
|