feature/IO-3291-Tasks-Notifications: Checkpoint

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

@@ -1,14 +1,21 @@
 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 TaskCenterComponent = forwardRef(
+  ({ visible, tasks, loading, onTaskClick, onLoadMore, totalTasks, createNewTask }, ref) => {
     const { t } = useTranslation();
     const virtuosoRef = useRef(null);
 
@@ -52,16 +59,17 @@ const TaskCenterComponent = forwardRef(({ visible, tasks, loading, onTaskClick,
 
     const renderSection = (section, index) => (
       <div key={`section-${index}`} className="task-section">
-      <Title level={4} className="section-title">
+        <div className="section-title">
           {sectionIcons[section.label]}
           {section.label}
-      </Title>
+        </div>
         <table className="task-table">
           <tbody>
             {section.tasks.map((task) => {
               const priorityColor = getPriorityColor(task.priority);
-            return (
+              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">
@@ -74,8 +82,17 @@ const TaskCenterComponent = forwardRef(({ visible, tasks, loading, onTaskClick,
                       {task.due_date && <span>{day(task.due_date).fromNow()}</span>}
                       {!!priorityColor && <Badge color={priorityColor} dot style={{ marginLeft: 6 }} />}
                     </td>
+                  </div>
                 </tr>
               );
+
+              return task.description ? (
+                <Tooltip key={task.id} title={task.description} placement="bottomLeft">
+                  {rowContent}
+                </Tooltip>
+              ) : (
+                rowContent
+              );
             })}
           </tbody>
         </table>
@@ -86,8 +103,12 @@ const TaskCenterComponent = forwardRef(({ visible, tasks, loading, onTaskClick,
       <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} />
+
             {loading && <Spin spinning={loading} size="small" />}
           </div>
+        </div>
 
         <Virtuoso
           ref={virtuosoRef}
@@ -103,7 +124,8 @@ const TaskCenterComponent = forwardRef(({ visible, tasks, loading, onTaskClick,
         )}
       </div>
     );
-});
+  }
+);
 
 TaskCenterComponent.displayName = "TaskCenterComponent";
 export default TaskCenterComponent;

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

@@ -78,6 +78,10 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
     [tasks, setTaskUpsertContext]
   );
 
+  const createNewTask = () => {
+    setTaskUpsertContext({ actions: {}, context: {} });
+  };
+
   return (
     <TaskCenterComponent
       visible={visible}
@@ -87,6 +91,7 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
       onTaskClick={handleTaskClick}
       onLoadMore={handleLoadMore}
       totalTasks={data?.tasks_aggregate?.aggregate?.count || 0}
+      createNewTask={createNewTask}
     />
   );
 };

client/src/components/task-center/task-center.styles.scss

@@ -2,8 +2,8 @@
   position: absolute;
   top: 64px;
   right: 0;
-  width: 400px;
+  width: 500px;
-  max-width: 400px;
+  max-width: 500px;
   background: #fff;
   color: rgba(0, 0, 0, 0.85);
   border: 1px solid #d9d9d9;
@@ -26,8 +26,21 @@
     background: #fafafa;
 
     h3 {
+      font-size: 14px;
       margin: 0;
-      font-size: 13px;
+    }
+
+    .create-task-button {
+      border: none;
+      color: white;
+      padding: 4px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 500;
+
+      &:hover {
+        background-color: #40a9ff;
+      }
     }
   }
 
@@ -39,15 +52,20 @@
   .section-title {
     padding: 3px 10px;
     margin: 0;
-    font-size: 12px;
+    //font-size: 12px;
     background: #f5f5f5;
-    font-weight: 500;
+    font-weight: 650;
     border-bottom: 1px solid #e8e8e8;
     position: sticky;
     top: 0;
     z-index: 1;
   }
 
+  .task-row-container {
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+
   .task-table {
     width: 100%;
 
@@ -64,28 +82,29 @@
       td {
         padding: 6px 8px;
         vertical-align: top;
-        font-size: 12px;
+        //font-size: 12px;
         line-height: 1.2;
       }
 
       .task-title-cell {
         width: 100%;
-        max-width: 300px; // or whatever fits your layout
+        max-width: 350px; // or whatever fits your layout
 
         .task-title {
-          font-weight: 500;
+          font-size: 16px;
+          font-weight: 550;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           max-width: 100%; // Or a specific width if you want more control
           display: inline-block;
           vertical-align: middle;
+
         }
 
         .task-ro-number {
-          margin-top: 5px;
+          margin-top: 20px;
-          font-size: 11px;
+          color: #1677ff;
-          color: rgba(0, 0, 0, 0.45);
         }
       }
 
@@ -104,7 +123,7 @@
     color: white;
     border: none;
     border-radius: 4px;
-    font-size: 12px;
+    //font-size: 12px;
     cursor: pointer;
 
     &:hover {