feature/IO-3291-Tasks-Notifications: Checkpoint

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

@@ -12,59 +12,83 @@ const TaskCenterComponent = forwardRef(({ visible, tasks, loading, onTaskClick,
   const { t } = useTranslation();
   const virtuosoRef = useRef(null);
 
-  const sections = useMemo(() => {
+  const groupedItems = useMemo(() => {
     const now = day();
     const today = now.startOf("day");
 
-    const overdue = tasks.filter((task) => task.due_date && day(task.due_date).isBefore(today));
-    const dueToday = tasks.filter((task) => task.due_date && day(task.due_date).isSame(today, "day"));
-    const upcoming = tasks.filter((task) => task.due_date && day(task.due_date).isAfter(today));
-    const noDueDate = tasks.filter((task) => !task.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: "header", label }, ...data.map((task) => ({ type: "task", task }))] : [];
 
     return [
-      { title: t("tasks.labels.overdue"), data: overdue },
-      { title: t("tasks.labels.due_today"), data: dueToday },
-      { title: t("tasks.labels.upcoming"), data: upcoming },
-      { title: t("tasks.labels.no_due_date"), data: noDueDate }
-    ].filter((section) => section.data.length > 0);
+      ...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 renderTask = (index, task) => {
-    const handleClick = () => {
-      onTaskClick(task.id);
+    const handleClick = () => onTaskClick(task.id);
+
+    const getPriorityColor = (priority) => {
+      switch (priority) {
+        case 1:
+          return "red";
+        case 2:
+          return "orange";
+        case 3:
+          return "green";
+        default:
+          return null;
+      }
     };
 
+    const priorityColor = getPriorityColor(task.priority);
+
     return (
       <div key={`${task.id}-${index}`} className="task-item task-incomplete" onClick={handleClick}>
-        <Badge dot>
+        <Badge dot color={priorityColor || undefined} style={priorityColor ? {} : { display: "none" }}>
           <div className="task-content">
-            <Title level={5} className="task-title">
-              <span className="ro-number">
-                {t("notifications.labels.ro-number", {
-                  ro_number: task.job?.ro_number || t("general.labels.na")
-                })}
-              </span>
-              <Text type="secondary" className="relative-time" title={DateTimeFormat(task.created_at)}>
-                {day(task.created_at).fromNow()}
-              </Text>
-            </Title>
             <Text strong className="task-body">
               {task.title}
             </Text>
+
+            <div className="task-meta">
+              <div className="ro-number">
+                {t("notifications.labels.ro-number", {
+                  ro_number: task.job?.ro_number || t("general.labels.na")
+                })}
+              </div>
+              {task.due_date && (
+                <Text type="secondary" className="relative-time" title={DateTimeFormat(task.due_date)}>
+                  {day(task.due_date).fromNow()}
+                </Text>
+              )}
+            </div>
           </div>
         </Badge>
       </div>
     );
   };
 
-  const renderSection = (section, sectionIndex) => (
-    <div key={`section-${sectionIndex}`} className="task-section">
-      <Title level={4} className="section-title">
-        {section.title}
-      </Title>
-      {section.data.map((task, index) => renderTask(`${sectionIndex}-${index}`, task))}
-    </div>
-  );
+  const renderItem = (index, item) => {
+    if (item.type === "header") {
+      return (
+        <div key={`header-${index}`} className="task-section">
+          <Title level={4} className="section-title">
+            {item.label}
+          </Title>
+        </div>
+      );
+    }
+
+    return renderTask(index, item.task);
+  };
 
   return (
     <div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
@@ -72,13 +96,14 @@ const TaskCenterComponent = forwardRef(({ visible, tasks, loading, onTaskClick,
         <h3>{t("tasks.labels.my_tasks_center")}</h3>
         {loading && <Spin spinning={loading} size="small" />}
       </div>
+
       <Virtuoso
         ref={virtuosoRef}
         style={{ height: "400px", width: "100%" }}
-        data={sections}
-        totalCount={sections.length}
-        itemContent={(index, section) => renderSection(section, index)}
+        data={groupedItems}
+        itemContent={renderItem}
       />
+
       {tasks.length < totalTasks && (
         <button onClick={onLoadMore} disabled={loading}>
           {t("general.labels.load_more")}
@@ -89,5 +114,4 @@ const TaskCenterComponent = forwardRef(({ visible, tasks, loading, onTaskClick,
 });
 
 TaskCenterComponent.displayName = "TaskCenterComponent";
-
 export default TaskCenterComponent;