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

my salary tab dark mode bug fix and responsive design update

Browse Source
dilmurod
Dilmurod 4 weeks ago
parent 6d3036292f
commit c5041fcf8c
4 changed files with 102 additions and 237 deletions
Show Stats Download Patch File Download Diff File

143
src/Components/Profile/MySalary/CurrentMonthCard.tsx
Unescape View File

@ -6,6 +6,45 @@ type Props = {
current: CurrentMonth; current: CurrentMonth;
}; };
const InfoItem = ({
label,
value,
prefix,
}: {
label: string;
value: number;
prefix?: string;
}) => (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
}}
>
<span
style={{
color: "#9b9daa",
fontFamily: "Inter",
fontSize: "14px",
fontWeight: 500,
lineHeight: "20px",
}}
>
{label}
</span>
<Statistic
value={value}
prefix={prefix}
valueStyle={{
fontFamily: "Inter",
fontSize: "14px",
fontWeight: 500,
}}
/>
</div>
);
const CurrentMonthCard: React.FC<Props> = ({ current }) => { const CurrentMonthCard: React.FC<Props> = ({ current }) => {
return ( return (
<Card> <Card>
@ -15,9 +54,9 @@ const CurrentMonthCard: React.FC<Props> = ({ current }) => {
style={{ style={{
fontFamily: "Geist Mono", fontFamily: "Geist Mono",
fontSize: "12px", fontSize: "12px",
fontStyle: "normal",
fontWeight: 400, fontWeight: 400,
lineHeight: "16px", lineHeight: "16px",
color: "#9b9daa",
}} }}
> >
{`Current month / ${dayjs().format("MMMM")}`} {`Current month / ${dayjs().format("MMMM")}`}
@ -29,109 +68,27 @@ const CurrentMonthCard: React.FC<Props> = ({ current }) => {
valueStyle={{ valueStyle={{
fontFamily: "Inter", fontFamily: "Inter",
fontSize: "24px", fontSize: "24px",
fontStyle: "normal",
fontWeight: 700, fontWeight: 700,
lineHeight: "28px", lineHeight: "28px",
letterSpacing: "-0.96px", letterSpacing: "-0.96px",
}} }}
/> />
<Row gutter={12} style={{ marginTop: 12 }}>
<Col span={4}> <Row gutter={[16, 16]} style={{ marginTop: 12 }}>
<div style={{ display: "flex", alignItems: "center" }}> <Col xs={12} sm={12} md={6} lg={6}>
<span <InfoItem label="Bonuses" value={current.total_bonuses} prefix="+$" />
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>
<Col span={4}> <Col xs={12} sm={12} md={6} lg={6}>
<div style={{ display: "flex", alignItems: "center", gap: 8 }}> <InfoItem label="Charges" value={current.total_charges} prefix="-$" />
<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>
<Col span={4}> <Col xs={12} sm={12} md={6} lg={6}>
<div style={{ display: "flex", alignItems: "center", gap: 8 }}> <InfoItem label="Tasks" value={current.number_of_tasks} />
<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>
<Col span={4}> <Col xs={12} sm={12} md={6} lg={6}>
<div style={{ display: "flex", alignItems: "center", gap: 8 }}> <InfoItem label="Points" value={current.total_points} />
<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> </Col>
</Row> </Row>
</Card> </Card>

2
src/Components/Profile/MySalary/SalaryHistoryTable.tsx
Unescape View File

@ -26,6 +26,8 @@ const SalaryHistoryTable: React.FC<Props> = ({ year, salaries }) => {
<Table<SalaryHistory> <Table<SalaryHistory>
dataSource={salaries} dataSource={salaries}
rowKey="id" rowKey="id"
scroll={{ x: 800 }}
locale={{ emptyText: "No data" }}
pagination={false} pagination={false}
size="large" size="large"
columns={[ columns={[

176
src/Components/Profile/MySalary/TotalStatistics.tsx
Unescape View File

@ -1,156 +1,58 @@
import { Row, Col, Statistic } from "antd"; import { Row, Col } from "antd";
import { Total } from "../../../types/Profile/TProfile"; import { Total } from "../../../types/Profile/TProfile";
type Props = { type Props = {
total: Total; 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 }) => { const TotalStatistics: React.FC<Props> = ({ total }) => {
return ( return (
<Row gutter={16}> <Row gutter={[16, 16]}>
<Col span={4}> <Col xs={12} sm={12} md={8} lg={4}>
<div style={{ display: "flex", flexDirection: "column", rowGap: 4 }}> <Item label="Total salary" value={`$${total.total_earned_salary}`} />
<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>
<Col span={4}> <Col xs={12} sm={12} md={8} lg={4}>
<div style={{ display: "flex", flexDirection: "column", rowGap: 4 }}> <Item label="Total bonuses" value={`+$${total.total_bonuses}`} />
<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>
<Col span={4}> <Col xs={12} sm={12} md={8} lg={4}>
<div style={{ display: "flex", flexDirection: "column", rowGap: 4 }}> <Item label="Total charges" value={`-$${total.total_charges}`} />
<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>
<Col span={4}> <Col xs={12} sm={12} md={8} lg={4}>
<div style={{ display: "flex", flexDirection: "column", rowGap: 4 }}> <Item label="Total tasks" value={total.total_number_of_tasks} />
<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>
<Col span={4}> <Col xs={12} sm={12} md={8} lg={4}>
<div style={{ display: "flex", flexDirection: "column", rowGap: 4 }}> <Item label="Total points" value={total.total_earned_points} />
<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> </Col>
</Row> </Row>
); );

18
src/Components/Profile/MySalary/index.tsx
Unescape View File

@ -89,13 +89,17 @@ const MySalary: React.FC = () => {
</div> </div>
<div> <div>
{years.map((year) => ( {years.length > 0 ? (
<SalaryHistoryTable years.map((year) => (
key={year} <SalaryHistoryTable
year={year} key={year}
salaries={data.salary_history.filter((s) => s.year === year)} year={year}
/> salaries={data.salary_history.filter((s) => s.year === year)}
))} />
))
) : (
<SalaryHistoryTable year={new Date().getFullYear()} salaries={[]} />
)}
</div> </div>
</div> </div>
); );

Write Preview
Loading…
Cancel
Save