feature/IO-3291-Tasks-Notifications: Checkpoint

2025-07-07 17:35:00 -04:00
parent f8a3d0f854
commit 2061a49e0e
6 changed files with 1059 additions and 624 deletions
--- a/client/src/components/task-center/task-center.component.jsx
+++ b/client/src/components/task-center/task-center.component.jsx
@@ -0,0 +1,94 @@
+// client/src/components/task-center/task-center.component.jsx
+import { Virtuoso } from "react-virtuoso";
+import { Badge, Button, Space, Spin, Switch, Tooltip, Typography } from "antd";
+import { CheckCircleFilled, CheckCircleOutlined, EyeFilled, EyeOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { forwardRef, useEffect, useRef } from "react";
+import { DateTimeFormat } from "../../utils/DateFormatter.jsx";
+import day from "../../utils/day.js";
+import "./task-center.styles.scss"; // You can clone this from notification styles for now
+
+const { Text, Title } = Typography;
+
+const TaskCenterComponent = forwardRef(
+  ({ visible, onClose, tasks, loading, showIncompleteOnly, toggleIncomplete, markAllComplete, onTaskClick }, ref) => {
+    const { t } = useTranslation();
+    const virtuosoRef = useRef(null);
+
+    useEffect(() => {
+      if (virtuosoRef.current) {
+        virtuosoRef.current.scrollToIndex({ index: 0, behavior: "smooth" });
+      }
+    }, [showIncompleteOnly]);
+
+    const renderTask = (index, task) => {
+      const handleClick = () => {
+        onTaskClick(task.id);
+      };
+
+      return (
+        <div
+          key={`${task.id}-${index}`}
+          className={`task-item ${task.completed ? "task-completed" : "task-incomplete"}`}
+          onClick={handleClick}
+        >
+          <Badge dot={!task.completed}>
+            <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={!task.completed} className="task-body">
+                {task.title}
+              </Text>
+            </div>
+          </Badge>
+        </div>
+      );
+    };
+
+    return (
+      <div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
+        <div className="task-header">
+          <Space direction="horizontal">
+            <h3>{t("tasks.labels.my_tasks_center")}</h3>
+            {loading && <Spin spinning={loading} size="small" />}
+          </Space>
+          <div className="task-controls">
+            <Tooltip title={t("tasks.labels.show-incomplete-only")}>
+              <Space size={4} align="center" className="task-toggle">
+                {showIncompleteOnly ? <EyeFilled /> : <EyeOutlined />}
+                <Switch checked={showIncompleteOnly} onChange={(checked) => toggleIncomplete(checked)} size="small" />
+              </Space>
+            </Tooltip>
+            <Tooltip title={t("tasks.labels.mark-all-complete")}>
+              <Button
+                type="link"
+                icon={tasks.every((t) => t.completed) ? <CheckCircleFilled /> : <CheckCircleOutlined />}
+                onClick={markAllComplete}
+                disabled={!tasks.some((t) => !t.completed)}
+              />
+            </Tooltip>
+          </div>
+        </div>
+        <Virtuoso
+          ref={virtuosoRef}
+          style={{ height: "400px", width: "100%" }}
+          data={tasks}
+          totalCount={tasks.length}
+          itemContent={renderTask}
+        />
+      </div>
+    );
+  }
+);
+
+TaskCenterComponent.displayName = "TaskCenterComponent";
+
+export default TaskCenterComponent;