feature/IO-3291-Tasks-Notifications: Checkpoint

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

@@ -13,7 +13,7 @@ import {
 } from "@ant-design/icons";
 
 const TaskCenterComponent = forwardRef(
-  ({ visible, tasks, loading, onTaskClick, onLoadMore, totalTasks, createNewTask }, ref) => {
+  ({ visible, tasks, loading, error, onTaskClick, onLoadMore, hasMore, createNewTask }, ref) => {
     const { t } = useTranslation();
     const virtuosoRef = useRef(null);
 
@@ -24,8 +24,8 @@ const TaskCenterComponent = forwardRef(
       [t("tasks.labels.no_due_date")]: <QuestionCircleOutlined style={{ marginRight: 8 }} />
     };
 
-    const groupedItems = useMemo(() => {
+    const groups = useMemo(() => {
-      const now = day("2025-07-09"); // Set to current date
+      const now = day();
       const today = now.startOf("day");
 
       const overdue = tasks.filter((t) => t.due_date && day(t.due_date).isBefore(today));
@@ -35,42 +35,52 @@ const TaskCenterComponent = forwardRef(
       );
       const noDueDate = tasks.filter((t) => !t.due_date);
 
-      const makeGroup = (label, data) => (data.length ? [{ type: "section", label, tasks: data }] : []);
-
       return [
-        ...makeGroup(t("tasks.labels.overdue"), overdue),
+        { label: t("tasks.labels.overdue"), tasks: overdue },
-        ...makeGroup(t("tasks.labels.due_today"), dueToday),
+        { label: t("tasks.labels.due_today"), tasks: dueToday },
-        ...makeGroup(t("tasks.labels.upcoming"), upcoming),
+        { label: t("tasks.labels.upcoming"), tasks: upcoming },
-        ...makeGroup(t("tasks.labels.no_due_date"), noDueDate)
+        { label: t("tasks.labels.no_due_date"), tasks: noDueDate }
-      ];
+      ].filter((group) => group.tasks.length > 0);
     }, [tasks, t]);
 
-    const getPriorityColor = (priority) => {
+    const groupCounts = useMemo(() => groups.map((group) => group.tasks.length), [groups]);
-      switch (priority) {
+
-        case 1:
+    const flatTasks = useMemo(() => groups.flatMap((group) => group.tasks), [groups]);
-          return "red";
+
-        case 2:
+    const priorityColors = {
-          return "orange";
+      1: "red",
-        case 3:
+      2: "orange",
-          return "green";
+      3: "green"
-        default:
-          return null;
-      }
     };
 
-    const renderSection = (section, index) => (
+    const getPriorityColor = (priority) => priorityColors[priority] || null;
-      <div key={`section-${index}`} className="task-section">
+
+    const groupContent = (groupIndex) => {
+      const { label } = groups[groupIndex];
+      return (
         <div className="section-title">
-          {sectionIcons[section.label]}
+          {sectionIcons[label]}
-          {section.label} ({section.tasks.length})
+          {label} ({groups[groupIndex].tasks.length})
         </div>
-        <table className="task-table">
+      );
-          <tbody>
+    };
-            {section.tasks.map((task) => {
+
+    const itemContent = (index) => {
+      const task = flatTasks[index];
       const priorityColor = getPriorityColor(task.priority);
       return (
-                <tr key={task.id} className="task-row" onClick={() => onTaskClick(task.id)}>
+        <div
-                  <td className="task-title-cell">
+          className="task-row"
+          onClick={() => onTaskClick(task.id)}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              onTaskClick(task.id);
+            }
+          }}
+        >
+          <div className="task-title-cell">
             <div className="task-row-container">
               <div className="task-title">{task.title}</div>
               <div className="task-ro-number">
@@ -79,18 +89,25 @@ const TaskCenterComponent = forwardRef(
                 })}
               </div>
             </div>
-                  </td>
+          </div>
-                  <td className="task-due-cell">
+          <div className="task-due-cell">
             {task.due_date && <span>{day(task.due_date).fromNow()}</span>}
             {!!priorityColor && <Badge color={priorityColor} dot style={{ marginLeft: 6 }} />}
-                  </td>
+          </div>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
         </div>
       );
+    };
+
+    if (error) {
+      return (
+        <div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
+          <div className="task-header">
+            <h3>{t("tasks.labels.my_tasks_center")}</h3>
+          </div>
+          <div className="error-message">{t("errors.tasks_load_failed")}</div>
+        </div>
+      );
+    }
 
     return (
       <div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
@@ -104,17 +121,25 @@ const TaskCenterComponent = forwardRef(
           </div>
         </div>
 
+        {tasks.length === 0 && !loading ? (
+          <div className="no-tasks-message">{t("tasks.labels.no_tasks")}</div>
+        ) : (
           <Virtuoso
             ref={virtuosoRef}
             style={{ height: "550px", width: "100%" }}
-          data={groupedItems}
+            groupCounts={groupCounts}
-          itemContent={(index, section) => renderSection(section, index)}
+            groupContent={groupContent}
+            itemContent={itemContent}
+            endReached={hasMore && !loading ? onLoadMore : undefined}
+            components={{
+              Footer: () =>
+                loading ? (
+                  <div className="loading-footer">
+                    <Spin />
+                  </div>
+                ) : null
+            }}
           />
-
-        {tasks.length < totalTasks && (
-          <button onClick={onLoadMore} disabled={loading}>
-            {t("general.labels.load_more")}
-          </button>
         )}
       </div>
     );

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

@@ -32,7 +32,11 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
   }, [bodyshop, currentUser]);
 
   // Query 1: Tasks with due dates
-  const { data: dueDateData, loading: dueLoading } = useQuery(QUERY_TASKS_WITH_DUE_DATES, {
+  const {
+    data: dueDateData,
+    loading: dueLoading,
+    error: dueError
+  } = useQuery(QUERY_TASKS_WITH_DUE_DATES, {
     variables: {
       bodyshop: bodyshop?.id,
       assigned_to: assignedToId,
@@ -47,6 +51,7 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
   const {
     data: noDueDateData,
     loading: noDueLoading,
+    error: noDueError,
     fetchMore
   } = useQuery(QUERY_TASKS_NO_DUE_DATE_PAGINATED, {
     variables: {
@@ -68,6 +73,10 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
     setTasks([...dueDateTasks, ...noDueDateTasks]);
   }, [dueDateData, noDueDateData]);
 
+  const noDueDateLength = noDueDateData?.tasks?.length || 0;
+  const totalNoDueDate = noDueDateData?.tasks_aggregate?.aggregate?.count || 0;
+  const hasMore = noDueDateLength < totalNoDueDate;
+
   // Handle pagination for no-due-date tasks
   const handleLoadMore = () => {
     fetchMore({
@@ -109,9 +118,10 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
       onClose={onClose}
       tasks={tasks}
       loading={dueLoading || noDueLoading}
+      error={dueError || noDueError}
       onTaskClick={handleTaskClick}
       onLoadMore={handleLoadMore}
-      totalTasks={noDueDateData?.tasks_aggregate?.aggregate?.count || 0}
+      hasMore={hasMore}
       createNewTask={createNewTask}
     />
   );

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

@@ -66,28 +66,23 @@
     margin-bottom: 15px;
   }
 
-  .task-table {
-    width: 100%;
-
-    border-collapse: collapse;
-
   .task-row {
     cursor: pointer;
     border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
 
     &:hover {
       background: #f5f5f5;
     }
 
-      td {
+    .task-title-cell {
+      flex: 1;
       padding: 6px 8px;
       vertical-align: top;
       //font-size: 12px;
       line-height: 1.2;
-      }
-
-      .task-title-cell {
-        width: 100%;
       max-width: 350px; // or whatever fits your layout
 
       .task-title {
@@ -99,7 +94,6 @@
         max-width: 100%; // Or a specific width if you want more control
         display: inline-block;
         vertical-align: middle;
-
       }
 
       .task-ro-number {
@@ -109,12 +103,15 @@
     }
 
     .task-due-cell {
+      padding: 6px 8px;
+      vertical-align: top;
+      //font-size: 12px;
+      line-height: 1.2;
       text-align: right;
       white-space: nowrap;
       color: rgba(0, 0, 0, 0.45);
     }
   }
-  }
 
   button {
     margin: 8px auto;
@@ -136,8 +133,15 @@
     }
   }
 
-  .ReactVirtuoso__item {
+  .no-tasks-message,
-    margin: 0 !important;
+  .error-message {
-    padding: 0 !important;
+    padding: 16px;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.45);
+  }
+
+  .loading-footer {
+    padding: 16px;
+    text-align: center;
   }
 }