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, error, onTaskClick, onLoadMore, hasMore, createNewTask }, ref) => {
+  ({ visible, tasks, loading, error, onTaskClick, onLoadMore, hasMore, createNewTask, incompleteTaskCount }, ref) => {
     const { t } = useTranslation();
     const virtuosoRef = useRef(null);
 
@@ -56,11 +56,17 @@ const TaskCenterComponent = forwardRef(
     const getPriorityColor = (priority) => priorityColors[priority] || null;
 
     const groupContent = (groupIndex) => {
-      const { label } = groups[groupIndex];
+      const { label, tasks } = groups[groupIndex];
+      let displayCount = tasks.length;
+      if (label === t("tasks.labels.no_due_date")) {
+        displayCount =
+          incompleteTaskCount -
+          groups.reduce((sum, group, idx) => (idx !== groupIndex ? sum + group.tasks.length : sum), 0);
+      }
       return (
         <div className="section-title">
           {sectionIcons[label]}
-          {label} ({groups[groupIndex].tasks.length})
+          {label} ({displayCount})
         </div>
       );
     };
@@ -112,9 +118,9 @@ const TaskCenterComponent = forwardRef(
     return (
       <div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
         <div className="task-header">
-          <h3>
-            {t("tasks.labels.my_tasks_center")} ({tasks.length})
-          </h3>
+          <Badge count={incompleteTaskCount} size="medium" offset={[13, -5]}>
+            <h3>{t("tasks.labels.my_tasks_center")}</h3>
+          </Badge>
           <div className="task-header-actions">
             <Button className="create-task-button" type="link" icon={<PlusCircleOutlined />} onClick={createNewTask} />
             {loading && <Spin spinning={loading} size="small" />}