feature/IO-3291-Tasks-Notifications: Checkpoint

client/src/components/task-center/task-center.component.jsx

@@ -1,109 +1,131 @@
 import { Virtuoso } from "react-virtuoso";
-import { Badge, Spin, Typography } from "antd";
+import { Badge, Button, Spin, Tooltip, Typography } from "antd";
 import { useTranslation } from "react-i18next";
 import { forwardRef, useMemo, useRef } from "react";
 import day from "../../utils/day.js";
 import "./task-center.styles.scss";
-import { ArrowRightOutlined, CalendarOutlined, ClockCircleOutlined, QuestionCircleOutlined } from "@ant-design/icons";
+import {
+  ArrowRightOutlined,
+  CalendarOutlined,
+  ClockCircleOutlined,
+  PlusCircleOutlined,
+  QuestionCircleOutlined
+} from "@ant-design/icons";
 
 const { Title } = Typography;
 
-const TaskCenterComponent = forwardRef(({ visible, tasks, loading, onTaskClick, onLoadMore, totalTasks }, ref) => {
-  const { t } = useTranslation();
-  const virtuosoRef = useRef(null);
+const TaskCenterComponent = forwardRef(
+  ({ visible, tasks, loading, onTaskClick, onLoadMore, totalTasks, createNewTask }, ref) => {
+    const { t } = useTranslation();
+    const virtuosoRef = useRef(null);
 
-  const sectionIcons = {
-    [t("tasks.labels.overdue")]: <ClockCircleOutlined style={{ marginRight: 8 }} />,
-    [t("tasks.labels.due_today")]: <CalendarOutlined style={{ marginRight: 8 }} />,
-    [t("tasks.labels.upcoming")]: <ArrowRightOutlined style={{ marginRight: 8 }} />,
-    [t("tasks.labels.no_due_date")]: <QuestionCircleOutlined style={{ marginRight: 8 }} />
-  };
-  const groupedItems = useMemo(() => {
-    const now = day();
-    const today = now.startOf("day");
+    const sectionIcons = {
+      [t("tasks.labels.overdue")]: <ClockCircleOutlined style={{ marginRight: 8 }} />,
+      [t("tasks.labels.due_today")]: <CalendarOutlined style={{ marginRight: 8 }} />,
+      [t("tasks.labels.upcoming")]: <ArrowRightOutlined style={{ marginRight: 8 }} />,
+      [t("tasks.labels.no_due_date")]: <QuestionCircleOutlined style={{ marginRight: 8 }} />
+    };
+    const groupedItems = useMemo(() => {
+      const now = day();
+      const today = now.startOf("day");
 
-    const overdue = tasks.filter((t) => t.due_date && day(t.due_date).isBefore(today));
-    const dueToday = tasks.filter((t) => t.due_date && day(t.due_date).isSame(today, "day"));
-    const upcoming = tasks.filter((t) => t.due_date && day(t.due_date).isAfter(today));
-    const noDueDate = tasks.filter((t) => !t.due_date);
+      const overdue = tasks.filter((t) => t.due_date && day(t.due_date).isBefore(today));
+      const dueToday = tasks.filter((t) => t.due_date && day(t.due_date).isSame(today, "day"));
+      const upcoming = tasks.filter((t) => t.due_date && day(t.due_date).isAfter(today));
+      const noDueDate = tasks.filter((t) => !t.due_date);
 
-    const makeGroup = (label, data) => (data.length ? [{ type: "section", label, tasks: data }] : []);
+      const makeGroup = (label, data) => (data.length ? [{ type: "section", label, tasks: data }] : []);
 
-    return [
-      ...makeGroup(t("tasks.labels.overdue"), overdue),
-      ...makeGroup(t("tasks.labels.due_today"), dueToday),
-      ...makeGroup(t("tasks.labels.upcoming"), upcoming),
-      ...makeGroup(t("tasks.labels.no_due_date"), noDueDate)
-    ];
-  }, [tasks, t]);
+      return [
+        ...makeGroup(t("tasks.labels.overdue"), overdue),
+        ...makeGroup(t("tasks.labels.due_today"), dueToday),
+        ...makeGroup(t("tasks.labels.upcoming"), upcoming),
+        ...makeGroup(t("tasks.labels.no_due_date"), noDueDate)
+      ];
+    }, [tasks, t]);
 
-  const getPriorityColor = (priority) => {
-    switch (priority) {
-      case 1:
-        return "red";
-      case 2:
-        return "orange";
-      case 3:
-        return "green";
-      default:
-        return null;
-    }
-  };
+    const getPriorityColor = (priority) => {
+      switch (priority) {
+        case 1:
+          return "red";
+        case 2:
+          return "orange";
+        case 3:
+          return "green";
+        default:
+          return null;
+      }
+    };
 
-  const renderSection = (section, index) => (
-    <div key={`section-${index}`} className="task-section">
-      <Title level={4} className="section-title">
-        {sectionIcons[section.label]}
-        {section.label}
-      </Title>
-      <table className="task-table">
-        <tbody>
-          {section.tasks.map((task) => {
-            const priorityColor = getPriorityColor(task.priority);
-            return (
-              <tr key={task.id} className="task-row" onClick={() => onTaskClick(task.id)}>
-                <td className="task-title-cell">
-                  <div className="task-title">{task.title}</div>
-                  <div className="task-ro-number">
-                    {t("notifications.labels.ro-number", {
-                      ro_number: task.job?.ro_number || t("general.labels.na")
-                    })}
+    const renderSection = (section, index) => (
+      <div key={`section-${index}`} className="task-section">
+        <div className="section-title">
+          {sectionIcons[section.label]}
+          {section.label}
+        </div>
+        <table className="task-table">
+          <tbody>
+            {section.tasks.map((task) => {
+              const priorityColor = getPriorityColor(task.priority);
+              const rowContent = (
+                <tr key={task.id} className="task-row" onClick={() => onTaskClick(task.id)}>
+                  <div className="task-row-container">
+                    <td className="task-title-cell">
+                      <div className="task-title">{task.title}</div>
+                      <div className="task-ro-number">
+                        {t("notifications.labels.ro-number", {
+                          ro_number: task.job?.ro_number || t("general.labels.na")
+                        })}
+                      </div>
+                    </td>
+                    <td className="task-due-cell">
+                      {task.due_date && <span>{day(task.due_date).fromNow()}</span>}
+                      {!!priorityColor && <Badge color={priorityColor} dot style={{ marginLeft: 6 }} />}
+                    </td>
                   </div>
-                </td>
-                <td className="task-due-cell">
-                  {task.due_date && <span>{day(task.due_date).fromNow()}</span>}
-                  {!!priorityColor && <Badge color={priorityColor} dot style={{ marginLeft: 6 }} />}
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </div>
-  );
+                </tr>
+              );
 
-  return (
-    <div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
-      <div className="task-header">
-        <h3>{t("tasks.labels.my_tasks_center")}</h3>
-        {loading && <Spin spinning={loading} size="small" />}
+              return task.description ? (
+                <Tooltip key={task.id} title={task.description} placement="bottomLeft">
+                  {rowContent}
+                </Tooltip>
+              ) : (
+                rowContent
+              );
+            })}
+          </tbody>
+        </table>
       </div>
+    );
 
-      <Virtuoso
-        ref={virtuosoRef}
-        style={{ height: "400px", width: "100%" }}
-        data={groupedItems}
-        itemContent={(index, section) => renderSection(section, index)}
-      />
+    return (
+      <div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
+        <div className="task-header">
+          <h3>{t("tasks.labels.my_tasks_center")}</h3>
+          <div className="task-header-actions">
+            <Button className="create-task-button" type="link" icon={<PlusCircleOutlined />} onClick={createNewTask} />
 
-      {tasks.length < totalTasks && (
-        <button onClick={onLoadMore} disabled={loading}>
-          {t("general.labels.load_more")}
-        </button>
-      )}
-    </div>
-  );
-});
+            {loading && <Spin spinning={loading} size="small" />}
+          </div>
+        </div>
+
+        <Virtuoso
+          ref={virtuosoRef}
+          style={{ height: "400px", width: "100%" }}
+          data={groupedItems}
+          itemContent={(index, section) => renderSection(section, index)}
+        />
+
+        {tasks.length < totalTasks && (
+          <button onClick={onLoadMore} disabled={loading}>
+            {t("general.labels.load_more")}
+          </button>
+        )}
+      </div>
+    );
+  }
+);
 
 TaskCenterComponent.displayName = "TaskCenterComponent";
 export default TaskCenterComponent;