feature/IO-3291-Tasks-Notifications: Checkpoint

2025-07-09 11:59:57 -04:00
parent 5d69d37db2
commit 9e5689b06f
3 changed files with 107 additions and 48 deletions
--- a/client/src/components/task-center/task-center.component.jsx
+++ b/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 dueToday = tasks.filter((task) => task.due_date && day(task.due_date).isSame(today, "day"));
-    const upcoming = tasks.filter((task) => task.due_date && day(task.due_date).isAfter(today));
-    const noDueDate = tasks.filter((task) => !task.due_date);
+    const overdue = tasks.filter((t) => t.due_date && day(t.due_date).isBefore(today));
+    const dueToday = tasks.filter((t) => t.due_date && day(t.due_date).isSame(today, "day"));
+    const upcoming = tasks.filter((t) => t.due_date && day(t.due_date).isAfter(today));
+    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 },
-      { title: t("tasks.labels.due_today"), data: dueToday },
-      { title: t("tasks.labels.upcoming"), data: upcoming },
-      { title: t("tasks.labels.no_due_date"), data: noDueDate }
-    ].filter((section) => section.data.length > 0);
+      ...makeGroup(t("tasks.labels.overdue"), overdue),
+      ...makeGroup(t("tasks.labels.due_today"), dueToday),
+      ...makeGroup(t("tasks.labels.upcoming"), upcoming),
+      ...makeGroup(t("tasks.labels.no_due_date"), noDueDate)
+    ];
  }, [tasks, t]);

  const renderTask = (index, task) => {
-    const handleClick = () => {
-      onTaskClick(task.id);
+    const handleClick = () => 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) => (
-    <div key={`section-${sectionIndex}`} className="task-section">
-      <Title level={4} className="section-title">
-        {section.title}
-      </Title>
-      {section.data.map((task, index) => renderTask(`${sectionIndex}-${index}`, task))}
-    </div>
-  );
+  const renderItem = (index, item) => {
+    if (item.type === "header") {
+      return (
+        <div key={`header-${index}`} className="task-section">
+          <Title level={4} className="section-title">
+            {item.label}
+          </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}
-        totalCount={sections.length}
-        itemContent={(index, section) => renderSection(section, index)}
+        data={groupedItems}
+        itemContent={renderItem}
      />
+
      {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;
--- a/client/src/components/task-center/task-center.container.jsx
+++ b/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 {
-    data,
-    loading: queryLoading,
-    fetchMore
-  } = useQuery(QUERY_MY_ACTIVE_TASKS_PAGINATED, {
+  const { data, loading, 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);
--- a/client/src/components/task-center/task-center.styles.scss
+++ b/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;
+    }
+  }
 }