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 overdue = tasks.filter((t) => t.due_date && day(t.due_date).isBefore(today));
-    const dueToday = tasks.filter((task) => task.due_date && day(task.due_date).isSame(today, "day"));
+    const dueToday = tasks.filter((t) => t.due_date && day(t.due_date).isSame(today, "day"));
-    const upcoming = tasks.filter((task) => task.due_date && day(task.due_date).isAfter(today));
+    const upcoming = tasks.filter((t) => t.due_date && day(t.due_date).isAfter(today));
-    const noDueDate = tasks.filter((task) => !task.due_date);
+    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 },
+      ...makeGroup(t("tasks.labels.overdue"), overdue),
-      { title: t("tasks.labels.due_today"), data: dueToday },
+      ...makeGroup(t("tasks.labels.due_today"), dueToday),
-      { title: t("tasks.labels.upcoming"), data: upcoming },
+      ...makeGroup(t("tasks.labels.upcoming"), upcoming),
-      { title: t("tasks.labels.no_due_date"), data: noDueDate }
+      ...makeGroup(t("tasks.labels.no_due_date"), noDueDate)
-    ].filter((section) => section.data.length > 0);
+    ];
   }, [tasks, t]);
 
   const renderTask = (index, task) => {
-    const handleClick = () => {
+    const handleClick = () => onTaskClick(task.id);
-      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) => (
+  const renderItem = (index, item) => {
-    <div key={`section-${sectionIndex}`} className="task-section">
+    if (item.type === "header") {
-      <Title level={4} className="section-title">
+      return (
-        {section.title}
+        <div key={`header-${index}`} className="task-section">
-      </Title>
+          <Title level={4} className="section-title">
-      {section.data.map((task, index) => renderTask(`${sectionIndex}-${index}`, task))}
+            {item.label}
-    </div>
+          </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}
+        data={groupedItems}
-        totalCount={sections.length}
+        itemContent={renderItem}
-        itemContent={(index, section) => renderSection(section, index)}
       />
+
       {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;

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

@@ -6,11 +6,10 @@ import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selecto
 import { useSocket } from "../../contexts/SocketIO/useSocket";
 import { useIsEmployee } from "../../utils/useIsEmployee";
 import TaskCenterComponent from "./task-center.component";
-import dayjs from "../../utils/day";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { QUERY_MY_ACTIVE_TASKS_PAGINATED } from "../../graphql/tasks.queries";
 
-const POLL_INTERVAL = 60; // seconds
+const POLL_INTERVAL = 60 * 1000; // milliseconds
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -31,11 +30,7 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
     return employee?.id || null;
   }, [bodyshop, currentUser]);
 
-  const {
+  const { data, loading, fetchMore } = useQuery(QUERY_MY_ACTIVE_TASKS_PAGINATED, {
-    data,
-    loading: queryLoading,
-    fetchMore
-  } = useQuery(QUERY_MY_ACTIVE_TASKS_PAGINATED, {
     variables: {
       bodyshop: bodyshop?.id,
       assigned_to: assignedToId,
@@ -45,7 +40,7 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
     },
     skip: !bodyshop?.id || !assignedToId || !isEmployee || !currentUser?.email,
     fetchPolicy: "cache-and-network",
-    pollInterval: isConnected ? 0 : dayjs.duration(POLL_INTERVAL, "seconds").asMilliseconds(),
+    pollInterval: isConnected ? 0 : POLL_INTERVAL,
     onError: (error) => {
       console.error("Query error:", error);
     }
@@ -91,11 +86,12 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
       visible={visible}
       onClose={onClose}
       tasks={tasks}
-      loading={queryLoading}
+      loading={loading}
       onTaskClick={handleTaskClick}
       onLoadMore={handleLoadMore}
-      totalTasks={data?.tasks_aggregate?.aggregate?.count}
+      totalTasks={data?.tasks_aggregate?.aggregate?.count || 0}
     />
   );
 };
+
 export default connect(mapStateToProps, mapDispatchToProps)(TaskCenterContainer);

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

@@ -44,13 +44,31 @@
     color: rgba(0, 0, 0, 0.85);
     font-weight: 500;
     border-bottom: 1px solid #e8e8e8;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  .task-meta {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 4px;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.45);
+
+    .ro-number {
+      white-space: nowrap;
+    }
+
+    .relative-time {
+      white-space: nowrap;
+    }
   }
 
   .task-item {
     padding: 12px 16px;
     border-bottom: 1px solid #f0f0f0;
     display: block;
-    overflow: visible;
     width: 100%;
     box-sizing: border-box;
     cursor: pointer;
@@ -70,17 +88,16 @@
       justify-content: space-between;
       align-items: center;
       width: 100%;
-      box-sizing: border-box;
 
       .ro-number {
         margin: 0;
         color: #1677ff;
+        font-weight: 500;
         flex-shrink: 0;
         white-space: nowrap;
       }
 
       .relative-time {
-        margin: 0;
         font-size: 12px;
         color: rgba(0, 0, 0, 0.45);
         white-space: nowrap;
@@ -93,10 +110,32 @@
       margin-top: 4px;
       color: rgba(0, 0, 0, 0.85);
       font-weight: 500;
+      font-size: 14px;
     }
   }
 
   .ant-badge {
     width: 100%;
   }
+
+  button {
+    margin: 16px auto;
+    display: block;
+    padding: 8px 16px;
+    background-color: #1677ff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 14px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #4096ff;
+    }
+
+    &:disabled {
+      background-color: #d9d9d9;
+      cursor: not-allowed;
+    }
+  }
 }