my salary tab dark mode bug fix and responsive design update

src/Components/Profile/MySalary/CurrentMonthCard.tsx

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

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={[

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 TotalStatistics: React.FC<Props> = ({ total }) => {
+const Item = ({ label, value }: { label: string; value: React.ReactNode }) => (
-  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
+      {label}
     </span>
     <span
       style={{
         fontFamily: "Inter",
         fontSize: "14px",
-              fontStyle: "normal",
         fontWeight: 600,
         lineHeight: "20px",
         letterSpacing: "-0.14px",
       }}
     >
-            ${total.total_earned_salary}
+      {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 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 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 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 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>
     </Row>
   );

src/Components/Profile/MySalary/index.tsx

@@ -89,13 +89,17 @@ const MySalary: React.FC = () => {
       </div>
 
       <div>
-        {years.map((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>
   );