From c5041fcf8c4923f81e8dbeebee1a432689341b6c Mon Sep 17 00:00:00 2001
From: Dilmurod <dilmurod8829@gmail.com>
Date: Thu, 18 Sep 2025 13:29:29 +0500
Subject: [PATCH] my salary tab dark mode bug fix and responsive design update

---
 .../Profile/MySalary/CurrentMonthCard.tsx     | 143 +++++---------
 .../Profile/MySalary/SalaryHistoryTable.tsx   |   2 +
 .../Profile/MySalary/TotalStatistics.tsx      | 176 ++++--------------
 src/Components/Profile/MySalary/index.tsx     |  18 +-
 4 files changed, 102 insertions(+), 237 deletions(-)

diff --git a/src/Components/Profile/MySalary/CurrentMonthCard.tsx b/src/Components/Profile/MySalary/CurrentMonthCard.tsx
index 77a84dc..b362d5f 100644
--- a/src/Components/Profile/MySalary/CurrentMonthCard.tsx
+++ b/src/Components/Profile/MySalary/CurrentMonthCard.tsx
@@ -6,6 +6,45 @@ type Props = {
   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 }) => {
   return (
     <Card>
@@ -15,9 +54,9 @@ const CurrentMonthCard: React.FC<Props> = ({ current }) => {
             style={{
               fontFamily: "Geist Mono",
               fontSize: "12px",
-              fontStyle: "normal",
               fontWeight: 400,
               lineHeight: "16px",
+              color: "#9b9daa",
             }}
           >
             {`Current month / ${dayjs().format("MMMM")}`}
@@ -29,109 +68,27 @@ const CurrentMonthCard: React.FC<Props> = ({ current }) => {
         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>
+
+      <Row gutter={[16, 16]} style={{ marginTop: 12 }}>
+        <Col xs={12} sm={12} md={6} lg={6}>
+          <InfoItem label="Bonuses" value={current.total_bonuses} prefix="+$" />
         </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 xs={12} sm={12} md={6} lg={6}>
+          <InfoItem label="Charges" value={current.total_charges} prefix="-$" />
         </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 xs={12} sm={12} md={6} lg={6}>
+          <InfoItem label="Tasks" value={current.number_of_tasks} />
         </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 xs={12} sm={12} md={6} lg={6}>
+          <InfoItem label="Points" value={current.total_points} />
         </Col>
       </Row>
     </Card>
diff --git a/src/Components/Profile/MySalary/SalaryHistoryTable.tsx b/src/Components/Profile/MySalary/SalaryHistoryTable.tsx
index f3a998e..14c3eff 100644
--- a/src/Components/Profile/MySalary/SalaryHistoryTable.tsx
+++ b/src/Components/Profile/MySalary/SalaryHistoryTable.tsx
@@ -26,6 +26,8 @@ const SalaryHistoryTable: React.FC<Props> = ({ year, salaries }) => {
       <Table<SalaryHistory>
         dataSource={salaries}
         rowKey="id"
+        scroll={{ x: 800 }}
+        locale={{ emptyText: "No data" }}
         pagination={false}
         size="large"
         columns={[
diff --git a/src/Components/Profile/MySalary/TotalStatistics.tsx b/src/Components/Profile/MySalary/TotalStatistics.tsx
index 80cbaf8..7895a60 100644
--- a/src/Components/Profile/MySalary/TotalStatistics.tsx
+++ b/src/Components/Profile/MySalary/TotalStatistics.tsx
@@ -1,156 +1,58 @@
-import { Row, Col, Statistic } from "antd";
+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}>
-      <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>
+    <Row gutter={[16, 16]}>
+      <Col xs={12} sm={12} md={8} lg={4}>
+        <Item label="Total salary" value={`$${total.total_earned_salary}`} />
       </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 xs={12} sm={12} md={8} lg={4}>
+        <Item label="Total bonuses" value={`+$${total.total_bonuses}`} />
       </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 xs={12} sm={12} md={8} lg={4}>
+        <Item label="Total charges" value={`-$${total.total_charges}`} />
       </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 xs={12} sm={12} md={8} lg={4}>
+        <Item label="Total tasks" value={total.total_number_of_tasks} />
       </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 xs={12} sm={12} md={8} lg={4}>
+        <Item label="Total points" value={total.total_earned_points} />
       </Col>
     </Row>
   );
diff --git a/src/Components/Profile/MySalary/index.tsx b/src/Components/Profile/MySalary/index.tsx
index a220b77..fdfcda9 100644
--- a/src/Components/Profile/MySalary/index.tsx
+++ b/src/Components/Profile/MySalary/index.tsx
@@ -89,13 +89,17 @@ const MySalary: React.FC = () => {
       </div>
 
       <div>
-        {years.map((year) => (
-          <SalaryHistoryTable
-            key={year}
-            year={year}
-            salaries={data.salary_history.filter((s) => s.year === year)}
-          />
-        ))}
+        {years.length > 0 ? (
+          years.map((year) => (
+            <SalaryHistoryTable
+              key={year}
+              year={year}
+              salaries={data.salary_history.filter((s) => s.year === year)}
+            />
+          ))
+        ) : (
+          <SalaryHistoryTable year={new Date().getFullYear()} salaries={[]} />
+        )}
       </div>
     </div>
   );