From 34f62a8858d6adc56ca81ba160234444621aaec8 Mon Sep 17 00:00:00 2001
From: Dave Richer <dave@imexsystems.ca>
Date: Wed, 9 Jul 2025 12:40:26 -0400
Subject: [PATCH] feature/IO-3291-Tasks-Notifications: Checkpoint

---
 .../task-center/task-center.component.jsx     | 34 ++++---
 .../task-center/task-center.container.jsx     |  5 +-
 .../task-center/task-center.styles.scss       | 89 +++++++++----------
 3 files changed, 57 insertions(+), 71 deletions(-)

diff --git a/client/src/components/task-center/task-center.component.jsx b/client/src/components/task-center/task-center.component.jsx
index 16303d6c2..0012c85f1 100644
--- a/client/src/components/task-center/task-center.component.jsx
+++ b/client/src/components/task-center/task-center.component.jsx
@@ -2,11 +2,10 @@ import { Virtuoso } from "react-virtuoso";
 import { Badge, Spin, Typography } from "antd";
 import { useTranslation } from "react-i18next";
 import { forwardRef, useMemo, useRef } from "react";
-import { DateTimeFormat } from "../../utils/DateFormatter.jsx";
 import day from "../../utils/day.js";
 import "./task-center.styles.scss";
 
-const { Text, Title } = Typography;
+const { Title } = Typography;
 
 const TaskCenterComponent = forwardRef(({ visible, tasks, loading, onTaskClick, onLoadMore, totalTasks }, ref) => {
   const { t } = useTranslation();
@@ -51,31 +50,30 @@ const TaskCenterComponent = forwardRef(({ visible, tasks, loading, onTaskClick,
     const priorityColor = getPriorityColor(task.priority);
 
     return (
-      <div key={`${task.id}-${index}`} className="task-item task-incomplete" onClick={handleClick}>
-        <Badge dot color={priorityColor || undefined} style={priorityColor ? {} : { display: "none" }}>
+      <div key={`${task.id}-${index}`} className="task-item" onClick={handleClick}>
+        <Badge color={priorityColor || undefined} dot={!!priorityColor} offset={[-4, 4]}>
           <div className="task-content">
-            <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>
+            <div className="task-header-row">
+              <span className="task-title">{task.title}</span>
               {task.due_date && (
-                <Text type="secondary" className="relative-time" title={DateTimeFormat(task.due_date)}>
-                  {day(task.due_date).fromNow()}
-                </Text>
+                <span className="task-due-date">
+                  {t("tasks.labels.due")}: {day(task.due_date).fromNow()}
+                </span>
               )}
             </div>
+
+            {/*{task.description && <div className="task-description">{task.description}</div>}*/}
+
+            <div className="task-ro-number">
+              {t("notifications.labels.ro-number", {
+                ro_number: task.job?.ro_number || t("general.labels.na")
+              })}
+            </div>
           </div>
         </Badge>
       </div>
     );
   };
-
   const renderItem = (index, item) => {
     if (item.type === "header") {
       return (
diff --git a/client/src/components/task-center/task-center.container.jsx b/client/src/components/task-center/task-center.container.jsx
index 1dabc9e55..2f1b38b00 100644
--- a/client/src/components/task-center/task-center.container.jsx
+++ b/client/src/components/task-center/task-center.container.jsx
@@ -40,10 +40,7 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
     },
     skip: !bodyshop?.id || !assignedToId || !isEmployee || !currentUser?.email,
     fetchPolicy: "cache-and-network",
-    pollInterval: isConnected ? 0 : POLL_INTERVAL,
-    onError: (error) => {
-      console.error("Query error:", error);
-    }
+    pollInterval: isConnected ? 0 : POLL_INTERVAL
   });
 
   useEffect(() => {
diff --git a/client/src/components/task-center/task-center.styles.scss b/client/src/components/task-center/task-center.styles.scss
index 9e638ed4a..81c825f09 100644
--- a/client/src/components/task-center/task-center.styles.scss
+++ b/client/src/components/task-center/task-center.styles.scss
@@ -18,7 +18,7 @@
   }
 
   .task-header {
-    padding: 8px 16px;
+    padding: 4px 10px;
     border-bottom: 1px solid #f0f0f0;
     display: flex;
     justify-content: space-between;
@@ -27,20 +27,20 @@
 
     h3 {
       margin: 0;
-      font-size: 14px;
+      font-size: 13px;
       color: rgba(0, 0, 0, 0.85);
     }
   }
 
   .task-section {
-    margin-bottom: 8px;
+    margin-bottom: 2px;
   }
 
   .section-title {
-    padding: 8px 16px;
+    padding: 3px 10px;
     background: #f5f5f5;
     margin: 0;
-    font-size: 14px;
+    font-size: 12px;
     color: rgba(0, 0, 0, 0.85);
     font-weight: 500;
     border-bottom: 1px solid #e8e8e8;
@@ -49,84 +49,75 @@
     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;
+    padding: 6px 10px;
     border-bottom: 1px solid #f0f0f0;
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    cursor: pointer;
     background: #fff;
+    cursor: pointer;
 
     &:hover {
-      background: #fafafa;
+      background: #f5f5f5;
     }
 
     .task-content {
-      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
     }
 
-    .task-title {
-      margin: 0;
+    .task-header-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      width: 100%;
 
-      .ro-number {
-        margin: 0;
-        color: #1677ff;
-        font-weight: 500;
-        flex-shrink: 0;
+      .task-title {
+        font-size: 13px;
+        font-weight: 600;
+        color: rgba(0, 0, 0, 0.9);
+        margin-right: 6px;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
         white-space: nowrap;
       }
 
-      .relative-time {
-        font-size: 12px;
+      .task-due-date {
+        font-size: 11px;
         color: rgba(0, 0, 0, 0.45);
         white-space: nowrap;
-        flex-shrink: 0;
-        margin-left: auto;
       }
     }
 
-    .task-body {
-      margin-top: 4px;
-      color: rgba(0, 0, 0, 0.85);
-      font-weight: 500;
-      font-size: 14px;
+    .task-description {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.65);
+    }
+
+    .task-ro-number {
+      font-size: 11px;
+      color: rgba(0, 0, 0, 0.45);
     }
   }
 
   .ant-badge {
     width: 100%;
+
+    .ant-badge-dot {
+      width: 6px;
+      height: 6px;
+      top: 2px;
+      right: 2px;
+    }
   }
 
   button {
-    margin: 16px auto;
-    display: block;
-    padding: 8px 16px;
+    margin: 8px auto;
+    padding: 4px 10px;
     background-color: #1677ff;
     color: white;
     border: none;
     border-radius: 4px;
-    font-size: 14px;
+    font-size: 12px;
     cursor: pointer;
 
     &:hover {