From f7f12035b9884418454ba06f22e7563baf82b3c2 Mon Sep 17 00:00:00 2001
From: Dilmurod <dilmurod8829@gmail.com>
Date: Wed, 8 Jan 2025 13:51:34 +0500
Subject: [PATCH] user salary

---
 src/Components/Statistics/Statistic.tsx      | 39 ++++++++++++--------
 src/Components/Statistics/StatisticTable.tsx | 22 ++++++++---
 src/Components/Users/UserEdit.tsx            | 13 ++++---
 3 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/src/Components/Statistics/Statistic.tsx b/src/Components/Statistics/Statistic.tsx
index e6e4e35..b7ef8c4 100644
--- a/src/Components/Statistics/Statistic.tsx
+++ b/src/Components/Statistics/Statistic.tsx
@@ -75,10 +75,10 @@ const Stat = () => {
     }
   };
 
-  const datePick = (a: any, b: any) => {
-    if (b[0] && b[1]) {
-      setStartDate(`${b[0]} 00:00:00`);
-      setEndDate(`${b[1]} 23:59:59`);
+  const datePick = (dates: any) => {
+    if (dates && dates[0] && dates[1]) {
+      setStartDate(dates[0].startOf("day").format("YYYY-MM-DD HH:mm:ss"));
+      setEndDate(dates[1].endOf("day").format("YYYY-MM-DD HH:mm:ss"));
     }
   };
 
@@ -89,22 +89,22 @@ const Stat = () => {
     } else {
       const firstDate = date;
       const secondDate = date?.add(1, "month");
-      const yearStart = Number(firstDate?.year());
-      const monthStart = Number(firstDate?.month()) + 1;
-      const yearEnd = Number(secondDate?.year());
-      const monthEnd = Number(secondDate?.month()) + 1;
+      // const yearStart = Number(firstDate?.year());
+      // const monthStart = Number(firstDate?.month()) + 1;
+      // const yearEnd = Number(secondDate?.year());
+      // const monthEnd = Number(secondDate?.month()) + 1;
 
-      setStartDate(`${yearStart}-${monthStart}-01 00:00:00`);
-      setEndDate(`${yearEnd}-${monthEnd}-01 00:00:00`);
+      // setStartDate(`${yearStart}-${monthStart}-01 00:00:00`);
+      // setEndDate(`${yearEnd}-${monthEnd}-01 00:00:00`);
+
+      const formattedStartDate = firstDate.format("YYYY-MM-DD");
+      const formattedEndDate = secondDate.format("YYYY-MM-DD");
+      setStartDate(formattedStartDate);
+      setEndDate(formattedEndDate);
       setForSalary(true);
     }
   };
 
-  const clearDatePcker = () => {
-    setStartDate("");
-    setEndDate("");
-  };
-
   const { data, refetch, isLoading } = useStatsData({
     search: search,
     team: team,
@@ -138,6 +138,10 @@ const Stat = () => {
   };
   const theme = localStorage.getItem("theme") === "true" ? true : false;
 
+  const disabledDate = (current: any) => {
+    return current && current >= moment().add(1, "month").startOf("month");
+  };
+
   // const chartData = [
   //   {
   //     date: "2024-12-01",
@@ -226,8 +230,11 @@ const Stat = () => {
             onChange={onChangeDate}
             picker="month"
             format={"MMMM"}
+            disabledDate={disabledDate}
             defaultValue={now}
             style={{ marginRight: 10, width: 120, marginBottom: 10 }}
+            // value={datePickerValue}
+            // defaultValue={dayjs().startOf("month")}
           />
           <RangePicker style={{ width: 260 }} onCalendarChange={datePick} />
         </div>
@@ -252,7 +259,7 @@ const Stat = () => {
             </div>
             <Select
               style={{ width: 260 }}
-              placeholder="team"
+              placeholder="Team"
               onChange={(value: any) => setTeam(value)}
               options={teamOptions}
             />
diff --git a/src/Components/Statistics/StatisticTable.tsx b/src/Components/Statistics/StatisticTable.tsx
index 873e2ae..cb98736 100644
--- a/src/Components/Statistics/StatisticTable.tsx
+++ b/src/Components/Statistics/StatisticTable.tsx
@@ -5,6 +5,7 @@ import {
   RefetchOptions,
   RefetchQueryFilters,
 } from "react-query";
+import { QuestionCircleOutlined, QuestionOutlined } from "@ant-design/icons";
 // @ts-ignore
 import tagIcon from "../../assets/tagIcon.png";
 
@@ -60,24 +61,31 @@ const StatTable = ({
             key: "total_points",
           },
           {
-            title: "Salary",
+            title: (
+              <div>
+                <span>Salary</span> &nbsp;&nbsp;
+                <Tooltip title="The calculation of salary begins at the start of the month and continues to the current day. Select a month to review salary details for prior periods.">
+                  <QuestionCircleOutlined />
+                </Tooltip>
+              </div>
+            ),
             dataIndex: "salary",
             key: "salary",
             render: (text: string, record: any) => (
               <Tooltip
                 title={
                   <div>
-                    {record.salary_type === "Hybrid" ? (
+                    {record.salary_type === "hybrid" ? (
                       <p>
-                        <strong>Base Amount:</strong>{" "}
-                        ${record.salary_base_amount}
+                        <strong>Base Amount:</strong> $
+                        {record.salary_base_amount}
                       </p>
                     ) : (
                       ""
                     )}
                     <p>
-                      <strong>Performance based amount:</strong>{" "}
-                      ${record.salary - record.salary_base_amount}
+                      <strong>Performance based amount:</strong> $
+                      {record.performance_based_amount}
                     </p>
                   </div>
                 }
@@ -113,3 +121,5 @@ const StatTable = ({
 };
 
 export default StatTable;
+
+// The calculation of salary begins at the start of the month and continues to the current day. Select a month to review salary details for prior periods.
diff --git a/src/Components/Users/UserEdit.tsx b/src/Components/Users/UserEdit.tsx
index 0237e8a..7926145 100644
--- a/src/Components/Users/UserEdit.tsx
+++ b/src/Components/Users/UserEdit.tsx
@@ -87,13 +87,16 @@ const UserEdit = () => {
   const [showInput, setShowInput] = useState(false);
 
   const handleChange = (value: string) => {
-    // Agar Hybrid bo'lsa, inputni ko'rsatish; Task based bo'lsa, yashirish
-    setShowInput(value === "hybrid");
+    if (data?.role.name === "Checker") {
+      setShowInput(value === "hybrid");
+    }
   };
 
   useEffect(() => {
-    if (data?.salary_type === "hybrid") {
+    if (data?.role.name === "Checker" && data?.salary_type === "hybrid") {
       setShowInput(true);
+    } else if (data?.role.name !== "Checker") {
+      setShowInput(false);
     }
   }, [data]);
 
@@ -198,12 +201,12 @@ const UserEdit = () => {
                           </Col>
                         )}
 
-                        {data.role.name === "Checker" && (
+                        {data?.role?.name === "Checker" && (
                           <Col span={4}>
                             <Form.Item
                               wrapperCol={{ span: "100%" }}
                               label="Salary type"
-                              name="salary_type" // Form ma'lumotlarini yuborish uchun 'name' qo'shilgan
+                              name="salary_type"
                             >
                               <Select
                                 onChange={handleChange}