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,62 +35,79 @@ 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 priorityColor = getPriorityColor(task.priority);
+    const itemContent = (index) => {
-              return (
+      const task = flatTasks[index];
-                <tr key={task.id} className="task-row" onClick={() => onTaskClick(task.id)}>
+      const priorityColor = getPriorityColor(task.priority);
-                  <td className="task-title-cell">
+      return (
-                    <div className="task-row-container">
+        <div
-                      <div className="task-title">{task.title}</div>
+          className="task-row"
-                      <div className="task-ro-number">
+          onClick={() => onTaskClick(task.id)}
-                        {t("notifications.labels.ro-number", {
+          role="button"
-                          ro_number: task.job?.ro_number || t("general.labels.na")
+          tabIndex={0}
-                        })}
+          onKeyDown={(e) => {
-                      </div>
+            if (e.key === "Enter" || e.key === " ") {
-                    </div>
+              onTaskClick(task.id);
-                  </td>
+            }
-                  <td className="task-due-cell">
+          }}
-                    {task.due_date && <span>{day(task.due_date).fromNow()}</span>}
+        >
-                    {!!priorityColor && <Badge color={priorityColor} dot style={{ marginLeft: 6 }} />}
+          <div className="task-title-cell">
-                  </td>
+            <div className="task-row-container">
-                </tr>
+              <div className="task-title">{task.title}</div>
-              );
+              <div className="task-ro-number">
-            })}
+                {t("notifications.labels.ro-number", {
-          </tbody>
+                  ro_number: task.job?.ro_number || t("general.labels.na")
-        </table>
+                })}
-      </div>
+              </div>
-    );
+            </div>
+          </div>
+          <div className="task-due-cell">
+            {task.due_date && <span>{day(task.due_date).fromNow()}</span>}
+            {!!priorityColor && <Badge color={priorityColor} dot style={{ marginLeft: 6 }} />}
+          </div>
+        </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>
 
-        <Virtuoso
+        {tasks.length === 0 && !loading ? (
-          ref={virtuosoRef}
+          <div className="no-tasks-message">{t("tasks.labels.no_tasks")}</div>
-          style={{ height: "550px", width: "100%" }}
+        ) : (
-          data={groupedItems}
+          <Virtuoso
-          itemContent={(index, section) => renderSection(section, index)}
+            ref={virtuosoRef}
-        />
+            style={{ height: "550px", width: "100%" }}
-
+            groupCounts={groupCounts}
-        {tasks.length < totalTasks && (
+            groupContent={groupContent}
-          <button onClick={onLoadMore} disabled={loading}>
+            itemContent={itemContent}
-            {t("general.labels.load_more")}
+            endReached={hasMore && !loading ? onLoadMore : undefined}
-          </button>
+            components={{
+              Footer: () =>
+                loading ? (
+                  <div className="loading-footer">
+                    <Spin />
+                  </div>
+                ) : null
+            }}
+          />
         )}
       </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,53 +66,50 @@
     margin-bottom: 15px;
   }
 
-  .task-table {
+  .task-row {
-    width: 100%;
+    cursor: pointer;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
 
-    border-collapse: collapse;
+    &:hover {
+      background: #f5f5f5;
+    }
 
-    .task-row {
+    .task-title-cell {
-      cursor: pointer;
+      flex: 1;
-      border-bottom: 1px solid #f0f0f0;
+      padding: 6px 8px;
+      vertical-align: top;
+      //font-size: 12px;
+      line-height: 1.2;
+      max-width: 350px; // or whatever fits your layout
 
-      &:hover {
+      .task-title {
-        background: #f5f5f5;
+        font-size: 16px;
-      }
+        font-weight: 550;
-
-      td {
-        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 {
-          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: 20px;
-          color: #1677ff;
-        }
-      }
-
-      .task-due-cell {
-        text-align: right;
         white-space: nowrap;
-        color: rgba(0, 0, 0, 0.45);
+        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: 20px;
+        color: #1677ff;
+      }
+    }
+
+    .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);
     }
   }
 
@@ -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;
   }
 }