my profile optimization

src/API/LayoutApi/tasks.ts

@@ -2,7 +2,6 @@ import { message } from "antd";
 import { TTask, TTaskHistory } from "../../types/Tasks/TTasks";
 import { TPagination } from "../../types/common/TPagination";
 import instance from "../api";
-import { isMobile } from "../../App";
 
 export type TTasksGetParams = {
   search?: string;
@@ -190,17 +189,7 @@ export const taskController = {
   },
 
   async sendTelegram(id: string) {
-    try {
-      const { data } = await instance.post(`task-send-to-telegram-bot/${id}/`);
-      return data;
-    } catch (error: any) {
-      if (error.response) {
-        console.error("Telegram API error:", error.response.data);
-      } else if (error.request) {
-        console.error("No response from server:", error.request);
-      } else {
-        console.error("Unexpected error:", error.message);
-      }
-    }
+    const { data } = await instance.post(`task-send-to-telegram-bot/${id}/`);
+    return data;
   },
 };

src/Components/Profile/HIstory/index.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useMemo } from "react";
+import { Select, Table } from "antd";
+import moment from "moment-timezone";
+import tagIcon from "../../../assets/tagIcon.svg";
+import { useMyHistoryData } from "../../../Hooks/Profile";
+
+const { Option } = Select;
+
+interface MyHistoryProps {
+  role: string;
+}
+
+const MyHistory: React.FC<MyHistoryProps> = ({ role }) => {
+  const [range, setRange] = useState<number>(1);
+
+  const { start_date, end_date } = useMemo(() => {
+    const nowUtcPlus5 = moment.tz("Asia/Tashkent");
+    const startDate = nowUtcPlus5.clone().subtract(range, "days");
+    return {
+      start_date: startDate.format("YYYY-MM-DDTHH:mm:ss"),
+      end_date: nowUtcPlus5.format("YYYY-MM-DDTHH:mm:ss"),
+    };
+  }, [range]);
+
+  const historyData = useMyHistoryData({ start_date, end_date });
+
+  return (
+    <div>
+      <Select
+        style={{ width: "20%", marginBottom: 10 }}
+        placeholder="days"
+        onChange={(value: any) => setRange(Number(value))}
+        allowClear
+      >
+        <Option value={3}>3 days</Option>
+        <Option value={7}>a week</Option>
+        <Option value={30}>a month</Option>
+      </Select>
+
+      <Table
+        dataSource={historyData?.data?.map((u, i) => ({
+          no: i + 1,
+          task: { id: u.task },
+          action: u?.action,
+          description:
+            role !== "Owner"
+              ? "You finished this task and earned another 5 points!"
+              : `You ${u?.description.slice(u?.description.indexOf(" ") + 1)}`,
+          timestamp: u.timestamp
+            ? moment(u.timestamp).format("DD.MM.YYYY, HH:mm")
+            : "",
+          key: u.id,
+        }))}
+        columns={[
+          {
+            title: <img alt="" src={tagIcon} />,
+            dataIndex: "no",
+            key: "no",
+            width: "5%",
+          },
+          {
+            title: "Task ID",
+            dataIndex: "task",
+            key: "task",
+            render: ({ id }: { id: number }) => <span>{id}</span>,
+          },
+          {
+            title: "Action",
+            dataIndex: "action",
+            key: "action",
+          },
+          {
+            title: "Description",
+            dataIndex: "description",
+            key: "description",
+          },
+          {
+            title: "Timestamp",
+            dataIndex: "timestamp",
+            key: "timestamp",
+          },
+        ]}
+        scroll={{ x: "768px" }}
+      />
+    </div>
+  );
+};
+
+export default MyHistory;

src/Components/Profile/Profile.tsx

@@ -20,29 +20,20 @@ import {
   Form,
   Input,
   Row,
-  Select,
   Space,
   Spin,
-  Table,
   Tabs,
   Watermark,
 } from "antd";
 import TabPane from "antd/es/tabs/TabPane";
-import { Link } from "react-router-dom";
-import {
-  useMyHistoryData,
-  useMystatsData,
-  useProfData,
-} from "../../Hooks/Profile";
-import tagIcon from "../../assets/tagIcon.svg";
+import { useMystatsData, useProfData } from "../../Hooks/Profile";
 import { role } from "../../App";
 import ChangePassword from "./ChangePassword";
 import MySalary from "./MySalary";
-const { Option } = Select;
+import MyHistory from "./HIstory";
 
 const Profile = () => {
   const { data, refetch } = useProfData();
-  const [range, setRange] = useState<any>(1);
 
   const onSubmit = async (value: TProfilePutParams) => {
     await prof.profPatch(value);
@@ -50,14 +41,6 @@ const Profile = () => {
   };
 
   const moment = require("moment-timezone");
-  const nowUtcPlus5 = moment.tz("Asia/Tashkent");
-  const formattedTimeMinusFiveSeconds = nowUtcPlus5
-    .subtract(range, "days")
-    .format("YYYY-MM-DDTHH:mm:ss");
-
-  const historyData = useMyHistoryData({
-    start_date: formattedTimeMinusFiveSeconds,
-  });
 
   const { RangePicker } = DatePicker;
   const currentDate = moment();
@@ -308,75 +291,20 @@ const Profile = () => {
                 </Space>
               </TabPane>
 
-              <TabPane tab={<span>History</span>} key="2">
-                <Select
-                  style={{ width: "20%", marginBottom: 10 }}
-                  placeholder="1 day"
-                  onChange={(value: any) =>
-                    value ? setRange(value) : setRange("1")
-                  }
-                  allowClear
-                >
-                  <Option value="3">3 days</Option>
-                  <Option value="7">a week</Option>
-                  <Option value="30">a month</Option>
-                </Select>
-                <Table
-                  dataSource={historyData?.data?.map((u, i) => ({
-                    no: i + 1,
-                    task: { id: u.task },
-                    action: u?.action,
-                    description:
-                      role !== "Owner"
-                        ? "You finished this task and earned another 5 points!"
-                        : `You ${u?.description.slice(
-                            u?.description.indexOf(" ") + 1
-                          )}`,
-                    timestamp: u.timestamp
-                      ? moment(u.timestamp).format("DD.MM.YYYY, HH:mm")
-                      : "",
-                    key: u.id,
-                  }))}
-                  columns={[
-                    {
-                      title: <img alt="" src={tagIcon} />,
-                      dataIndex: "no",
-                      key: "no",
-                      width: "5%",
-                    },
-                    {
-                      title: "Task",
-                      dataIndex: "task",
-                      key: "task",
-                      render: ({ id }: { id: number }) => (
-                        <Link to={`/${id}`}>{id}</Link>
-                      ),
-                    },
-                    {
-                      title: "Action",
-                      dataIndex: "action",
-                      key: "action",
-                    },
-                    {
-                      title: "Description",
-                      dataIndex: "description",
-                      key: "description",
-                    },
-                    {
-                      title: "Timestamp",
-                      dataIndex: "timestamp",
-                      key: "timestamp",
-                    },
-                  ]}
-                  scroll={{ x: "768px" }}
-                />
-              </TabPane>
-              <TabPane tab={<span>Change Password</span>} key="3">
+              {(role === "Checker" || role === "Tech Support") && (
+                <TabPane tab={<span>My Salary</span>} key="2">
+                  <MySalary />
+                </TabPane>
+              )}
+
+              {role === "Tech Support" && (
+                <TabPane tab={<span>History</span>} key="3">
+                  <MyHistory role={role} />
+                </TabPane>
+              )}
+              <TabPane tab={<span>Change Password</span>} key="4">
                 <ChangePassword />
               </TabPane>
-              <TabPane tab={<span>My Salary</span>} key="4">
-                <MySalary />
-              </TabPane>
             </Tabs>
           </Space>
         </Watermark>

src/Components/Tasks/ShiftInfo/ShiftDataTab.tsx

@@ -108,17 +108,11 @@ const ShiftDataTab: React.FC<ShiftDataTabProps> = ({ recordTask }) => {
 
     try {
       await taskController.sendTelegram(recordTask.id);
-      notification.success({
-        message: "Success",
-        description: "Message sent to Telegram successfully!",
-        placement: "topRight",
-      });
+      message.success("Message sent to Telegram successfully!");
     } catch (error: any) {
-      notification.error({
-        message: "Error",
-        description: error?.message || "Failed to send message to Telegram.",
-        placement: "topRight",
-      });
+      message.error(
+        error?.response?.data?.message || "Failed to send message to Telegram."
+      );
     }
   };