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/header/buildAccountingChildren.jsx
+++ b/client/src/components/header/buildAccountingChildren.jsx
@@ -0,0 +1,190 @@
+import { Link } from "react-router-dom";
+import { FaCreditCard, FaFileInvoiceDollar } from "react-icons/fa";
+import { GiPayMoney, GiPlayerTime } from "react-icons/gi";
+import { BankFilled, ExportOutlined, FieldTimeOutlined } from "@ant-design/icons";
+import LockWrapper from "../../components/lock-wrapper/lock-wrapper.component.jsx";
+import { HasFeatureAccess } from "../../components/feature-wrapper/feature-wrapper.component";
+
+// --- Menu Item Builders ---
+const buildAccountingChildren = ({
+  t,
+  bodyshop,
+  currentUser,
+  setBillEnterContext,
+  setPaymentContext,
+  setCardPaymentContext,
+  setTimeTicketContext,
+  ImEXPay,
+  DmsAp,
+  Simple_Inventory
+}) => [
+  {
+    key: "bills",
+    id: "header-accounting-bills",
+    icon: <FaFileInvoiceDollar />,
+    label: (
+      <Link to="/manage/bills">
+        <LockWrapper featureName="bills" bodyshop={bodyshop}>
+          {t("menus.header.bills")}
+        </LockWrapper>
+      </Link>
+    )
+  },
+  {
+    key: "enterbills",
+    id: "header-accounting-enterbills",
+    icon: <GiPayMoney />,
+    label: (
+      <LockWrapper featureName="bills" bodyshop={bodyshop}>
+        {t("menus.header.enterbills")}
+      </LockWrapper>
+    ),
+    onClick: () =>
+      HasFeatureAccess({ featureName: "bills", bodyshop }) && setBillEnterContext({ actions: {}, context: {} })
+  },
+  ...(Simple_Inventory.treatment === "on"
+    ? [
+        { type: "divider" },
+        {
+          key: "inventory",
+          id: "header-accounting-inventory",
+          icon: <FaFileInvoiceDollar />,
+          label: <Link to="/manage/inventory">{t("menus.header.inventory")}</Link>
+        }
+      ]
+    : []),
+  { type: "divider" },
+  {
+    key: "allpayments",
+    id: "header-accounting-allpayments",
+    icon: <BankFilled />,
+    label: <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
+  },
+  {
+    key: "enterpayments",
+    id: "header-accounting-enterpayments",
+    icon: <FaCreditCard />,
+    label: t("menus.header.enterpayment"),
+    onClick: () => setPaymentContext({ actions: {}, context: null })
+  },
+  ...(ImEXPay.treatment === "on"
+    ? [
+        {
+          key: "entercardpayments",
+          id: "header-accounting-entercardpayments",
+          icon: <FaCreditCard />,
+          label: t("menus.header.entercardpayment"),
+          onClick: () => setCardPaymentContext({ actions: {}, context: {} })
+        }
+      ]
+    : []),
+  { type: "divider" },
+  {
+    key: "timetickets",
+    id: "header-accounting-timetickets",
+    icon: <FieldTimeOutlined />,
+    label: (
+      <Link to="/manage/timetickets">
+        <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
+          {t("menus.header.timetickets")}
+        </LockWrapper>
+      </Link>
+    )
+  },
+  ...(bodyshop?.md_tasks_presets?.use_approvals
+    ? [
+        {
+          key: "ttapprovals",
+          id: "header-accounting-ttapprovals",
+          icon: <FieldTimeOutlined />,
+          label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
+        }
+      ]
+    : []),
+  {
+    key: "entertimetickets",
+    id: "header-accounting-entertimetickets",
+    icon: <GiPlayerTime />,
+    label: (
+      <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
+        {t("menus.header.entertimeticket")}
+      </LockWrapper>
+    ),
+    onClick: () =>
+      HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
+      setTimeTicketContext({
+        actions: {},
+        context: {
+          created_by: currentUser.displayName ? `${currentUser.email} | ${currentUser.displayName}` : currentUser.email
+        }
+      })
+  },
+  { type: "divider" },
+  {
+    key: "accountingexport",
+    id: "header-accounting-export",
+    icon: <ExportOutlined />,
+    label: (
+      <LockWrapper featureName="export" bodyshop={bodyshop}>
+        {t("menus.header.export")}
+      </LockWrapper>
+    ),
+    children: [
+      {
+        key: "receivables",
+        id: "header-accounting-receivables",
+        label: (
+          <Link to="/manage/accounting/receivables">
+            <LockWrapper featureName="export" bodyshop={bodyshop}>
+              {t("menus.header.accounting-receivables")}
+            </LockWrapper>
+          </Link>
+        )
+      },
+      ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on"
+        ? [
+            {
+              key: "payables",
+              id: "header-accounting-payables",
+              label: (
+                <Link to="/manage/accounting/payables">
+                  <LockWrapper featureName="export" bodyshop={bodyshop}>
+                    {t("menus.header.accounting-payables")}
+                  </LockWrapper>
+                </Link>
+              )
+            }
+          ]
+        : []),
+      ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))
+        ? [
+            {
+              key: "payments",
+              id: "header-accounting-payments",
+              label: (
+                <Link to="/manage/accounting/payments">
+                  <LockWrapper featureName="export" bodyshop={bodyshop}>
+                    {t("menus.header.accounting-payments")}
+                  </LockWrapper>
+                </Link>
+              )
+            }
+          ]
+        : []),
+      { type: "divider" },
+      {
+        key: "exportlogs",
+        id: "header-accounting-exportlogs",
+        label: (
+          <Link to="/manage/accounting/exportlogs">
+            <LockWrapper featureName="export" bodyshop={bodyshop}>
+              {t("menus.header.export-logs")}
+            </LockWrapper>
+          </Link>
+        )
+      }
+    ]
+  }
+];
+
+export default buildAccountingChildren;
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
--- 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;
--- a/client/src/components/task-center/task-center.container.jsx
+++ b/client/src/components/task-center/task-center.container.jsx
@@ -0,0 +1,116 @@
+// client/src/components/task-center/task-center.container.jsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMutation, useQuery } from "@apollo/client";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { useSocket } from "../../contexts/SocketIO/useSocket";
+import { useIsEmployee } from "../../utils/useIsEmployee";
+import { useNotification } from "../../contexts/Notifications/notificationContext";
+import { MUTATION_TOGGLE_TASK_COMPLETED, QUERY_MY_TASKS_PAGINATED } from "../../graphql/tasks.queries";
+import TaskCenterComponent from "./task-center.component";
+import dayjs from "../../utils/day";
+
+const POLL_INTERVAL = 60; // seconds
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser
+});
+
+const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser }) => {
+  const [tasks, setTasks] = useState([]);
+  const [showIncompleteOnly, setShowIncompleteOnly] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const { isConnected } = useSocket();
+  const isEmployee = useIsEmployee(bodyshop, currentUser);
+  const notification = useNotification();
+  const assignedToId = bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id;
+
+  const where = useMemo(() => {
+    return {
+      assigned_to: { _eq: assignedToId },
+      deleted: { _eq: false },
+      ...(showIncompleteOnly ? { completed: { _eq: false } } : {})
+    };
+  }, [assignedToId, showIncompleteOnly]);
+
+  const {
+    data,
+    loading: queryLoading,
+    refetch
+  } = useQuery(QUERY_MY_TASKS_PAGINATED, {
+    variables: {
+      bodyshop: bodyshop?.id,
+      assigned_to: assignedToId,
+      where,
+      offset: 0,
+      limit: 50,
+      order: [{ created_at: "desc" }]
+    },
+    skip: !bodyshop?.id || !assignedToId || !isEmployee,
+    fetchPolicy: "cache-and-network",
+    pollInterval: isConnected ? 0 : dayjs.duration(POLL_INTERVAL, "seconds").asMilliseconds()
+  });
+
+  const [toggleTaskCompleted] = useMutation(MUTATION_TOGGLE_TASK_COMPLETED);
+
+  useEffect(() => {
+    if (data?.tasks) {
+      setTasks(data.tasks);
+    }
+  }, [data]);
+
+  const handleToggleIncomplete = (val) => {
+    setShowIncompleteOnly(val);
+  };
+
+  const handleMarkAllComplete = async () => {
+    setLoading(true);
+    try {
+      const incompleteTasks = tasks.filter((t) => !t.completed);
+      await Promise.all(
+        incompleteTasks.map((task) =>
+          toggleTaskCompleted({
+            variables: {
+              id: task.id,
+              completed: true,
+              completed_at: dayjs().toISOString()
+            }
+          })
+        )
+      );
+      notification.success({ message: "Tasks marked complete" });
+      refetch();
+    } catch (err) {
+      notification.error({ message: "Failed to mark tasks complete" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleTaskClick = useCallback(
+    (id) => {
+      const task = tasks.find((t) => t.id === id);
+      if (task) {
+        window.location.href = `/manage/jobs/${task.jobid}`;
+      }
+    },
+    [tasks]
+  );
+
+  return (
+    <TaskCenterComponent
+      visible={visible}
+      onClose={onClose}
+      tasks={tasks}
+      loading={loading || queryLoading}
+      showIncompleteOnly={showIncompleteOnly}
+      toggleIncomplete={handleToggleIncomplete}
+      markAllComplete={handleMarkAllComplete}
+      onTaskClick={handleTaskClick}
+    />
+  );
+};
+
+export default connect(mapStateToProps)(TaskCenterContainer);
--- a/client/src/components/task-center/task-center.styles.scss
+++ b/client/src/components/task-center/task-center.styles.scss
@@ -0,0 +1,66 @@
+.task-center {
+  position: absolute;
+  top: 64px;
+  right: 0;
+  z-index: 1000;
+  width: 400px;
+  max-height: 500px;
+  background: #fff;
+  border-left: 1px solid #ccc;
+  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  display: none;
+
+  &.visible {
+    display: block;
+  }
+
+  .task-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: #f5f5f5;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .task-toggle {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .anticon {
+      font-size: 14px;
+    }
+  }
+
+  .task-item {
+    padding: 12px;
+    border-bottom: 1px solid #f0f0f0;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: #fafafa;
+    }
+
+    &.task-completed {
+      opacity: 0.6;
+    }
+
+    .ro-number {
+      font-weight: bold;
+      margin-right: 8px;
+    }
+
+    .task-body {
+      display: block;
+      margin-top: 4px;
+    }
+
+    .relative-time {
+      float: right;
+      font-size: 0.8em;
+    }
+  }
+}
--- a/client/src/graphql/tasks.queries.js
+++ b/client/src/graphql/tasks.queries.js
@@ -381,3 +381,24 @@ export const MUTATION_UPDATE_TASK = gql`
    }
  }
 `;
+
+/**
+ * Query to get the count of my tasks
+ * @type {DocumentNode}
+ */
+export const QUERY_MY_TASKS_COUNT = gql`
+  query QUERY_MY_TASKS_COUNT($assigned_to: uuid!, $bodyshopid: uuid!) {
+    tasks_aggregate(
+      where: {
+        assigned_to: { _eq: $assigned_to }
+        bodyshopid: { _eq: $bodyshopid }
+        completed: { _eq: false }
+        deleted: { _eq: false }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;