feature/IO-3291-Tasks-Notifications: Checkpoint

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;

client/src/components/header/header.component.jsx

@@ -1,5 +1,6 @@
+// noinspection RegExpAnonymousGroup
+
 import {
-  BankFilled,
   BarChartOutlined,
   BellFilled,
   CarFilled,
@@ -7,8 +8,6 @@ import {
   ClockCircleFilled,
   DashboardFilled,
   DollarCircleFilled,
-  ExportOutlined,
-  FieldTimeOutlined,
   FileAddFilled,
   FileAddOutlined,
   FileFilled,
@@ -30,13 +29,13 @@ import {
 } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Badge, Layout, Menu, Spin } from "antd";
+import { Badge, Layout, Menu, Spin, Tooltip } from "antd";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
-import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
+import { FaCalendarAlt, FaCarCrash, FaTasks } from "react-icons/fa";
 import { FiLogOut } from "react-icons/fi";
-import { GiPayMoney, GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
+import { GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
 import { IoBusinessOutline } from "react-icons/io5";
 import { RiSurveyLine } from "react-icons/ri";
 import { connect } from "react-redux";
@@ -44,6 +43,7 @@ import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
+import { QUERY_MY_TASKS_COUNT } from "../../graphql/tasks.queries.js";
 import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { signOutStart } from "../../redux/user/user.actions";
@@ -51,11 +51,12 @@ import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selecto
 import day from "../../utils/day.js";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { useIsEmployee } from "../../utils/useIsEmployee.js";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockWrapper from "../lock-wrapper/lock-wrapper.component";
 import NotificationCenterContainer from "../notification-center/notification-center.container.jsx";
+import TaskCenterContainer from "../task-center/task-center.container.jsx";
+import buildAccountingChildren from "./buildAccountingChildren.jsx";
 
-// Redux mappings
+// --- Redux mappings ---
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   recentItems: selectRecentItems,
@@ -73,36 +74,8 @@ const mapDispatchToProps = (dispatch) => ({
   setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });
 
-function Header({
+// --- Utility Hooks ---
-  handleMenuClick,
+function useUnreadNotifications(userAssociationId, isConnected, scenarioNotificationsOn) {
-  currentUser,
-  bodyshop,
-  selectedHeader,
-  signOutStart,
-  setBillEnterContext,
-  setTimeTicketContext,
-  setPaymentContext,
-  setReportCenterContext,
-  recentItems,
-  setCardPaymentContext,
-  setTaskUpsertContext
-}) {
-  const {
-    treatments: { ImEXPay, DmsAp, Simple_Inventory }
-  } = useSplitTreatments({
-    attributes: {},
-    names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
-    splitKey: bodyshop && bodyshop.imexshopid
-  });
-
-  const { t } = useTranslation();
-  const { isConnected, scenarioNotificationsOn } = useSocket();
-  const [notificationVisible, setNotificationVisible] = useState(false);
-  const baseTitleRef = useRef(document.title || "");
-  const lastSetTitleRef = useRef("");
-  const userAssociationId = bodyshop?.associations?.[0]?.id;
-  const isEmployee = useIsEmployee(bodyshop, currentUser);
-
   const {
     data: unreadData,
     refetch: refetchUnread,
@@ -128,228 +101,182 @@ function Header({
     }
   }, [isConnected, unreadLoading, refetchUnread, userAssociationId]);
 
-  // Keep The unread count in the title.
+  return { unreadCount, unreadLoading };
+}
+
+function useIncompleteTaskCount(assignedToId, bodyshopId, isEmployee, isConnected) {
+  const { data: taskCountData, loading: taskCountLoading } = useQuery(QUERY_MY_TASKS_COUNT, {
+    variables: { assigned_to: assignedToId, bodyshopid: bodyshopId },
+    skip: !assignedToId || !bodyshopId || !isEmployee,
+    fetchPolicy: "network-only",
+    pollInterval: isConnected ? 0 : day.duration(60, "seconds").asMilliseconds()
+  });
+
+  const incompleteTaskCount = taskCountData?.tasks_aggregate?.aggregate?.count ?? 0;
+  return { incompleteTaskCount, taskCountLoading };
+}
+
+// --- Main Component ---
+function Header(props) {
+  const {
+    handleMenuClick,
+    currentUser,
+    bodyshop,
+    selectedHeader,
+    signOutStart,
+    setBillEnterContext,
+    setTimeTicketContext,
+    setPaymentContext,
+    setReportCenterContext,
+    recentItems,
+    setCardPaymentContext,
+    setTaskUpsertContext
+  } = props;
+
+  // Feature flags
+  const {
+    treatments: { ImEXPay, DmsAp, Simple_Inventory }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
+    splitKey: bodyshop && bodyshop.imexshopid
+  });
+
+  // Contexts and hooks
+  const { t } = useTranslation();
+  const { isConnected, scenarioNotificationsOn } = useSocket();
+  const [notificationVisible, setNotificationVisible] = useState(false);
+  const [taskCenterVisible, setTaskCenterVisible] = useState(false);
+  const baseTitleRef = useRef(document.title || "");
+  const lastSetTitleRef = useRef("");
+  const taskCenterRef = useRef(null);
+  const notificationRef = useRef(null);
+  const userAssociationId = bodyshop?.associations?.[0]?.id;
+  const isEmployee = useIsEmployee(bodyshop, currentUser);
+
+  // Data hooks
+  const { unreadCount, unreadLoading } = useUnreadNotifications(
+    userAssociationId,
+    isConnected,
+    scenarioNotificationsOn
+  );
+  const assignedToId = bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id;
+  const { incompleteTaskCount, taskCountLoading } = useIncompleteTaskCount(
+    assignedToId,
+    bodyshop?.id,
+    isEmployee,
+    isConnected
+  );
+
+  // --- Effects ---
+
+  // Update document title with unread count
   useEffect(() => {
     const updateTitle = () => {
       const currentTitle = document.title;
-      // Check if the current title differs from what we last set
       if (currentTitle !== lastSetTitleRef.current) {
-        // Extract base title by removing any unread count prefix
         const baseTitleMatch = currentTitle.match(/^\(\d+\)\s*(.*)$/);
         baseTitleRef.current = baseTitleMatch ? baseTitleMatch[1] : currentTitle;
       }
-
-      // Apply unread count to the base title
       const newTitle = unreadCount > 0 ? `(${unreadCount}) ${baseTitleRef.current}` : baseTitleRef.current;
-
-      // Only update if the title has changed to avoid unnecessary DOM writes
       if (document.title !== newTitle) {
         document.title = newTitle;
-        lastSetTitleRef.current = newTitle; // Store what we set
+        lastSetTitleRef.current = newTitle;
       }
     };
-
-    // Initial update
     updateTitle();
-
-    // Poll every 100ms to catch child component changes
     const interval = setInterval(updateTitle, 100);
-
-    // Cleanup
     return () => {
       clearInterval(interval);
-      document.title = baseTitleRef.current; // Reset to base title on unmount
+      document.title = baseTitleRef.current;
     };
-  }, [unreadCount]); // Re-run when unreadCount changes
+  }, [unreadCount]);
 
-  const handleNotificationClick = (e) => {
+  // Handle outside clicks for popovers
-    setNotificationVisible(!notificationVisible);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      const isNotificationClick = event.target.closest("#header-notifications");
+      const isTaskCenterClick = event.target.closest("#header-taskcenter");
+
+      if (isNotificationClick && scenarioNotificationsOn) {
+        setTaskCenterVisible(false); // Close task center
+        return;
+      }
+      if (isTaskCenterClick) {
+        setNotificationVisible(scenarioNotificationsOn ? false : notificationVisible); // Close notification center if enabled
+        return;
+      }
+
+      if (taskCenterVisible && taskCenterRef.current && !taskCenterRef.current.contains(event.target)) {
+        setTaskCenterVisible(false);
+      }
+      if (
+        scenarioNotificationsOn &&
+        notificationVisible &&
+        notificationRef.current &&
+        !notificationRef.current.contains(event.target)
+      ) {
+        setNotificationVisible(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [taskCenterVisible, notificationVisible, scenarioNotificationsOn]);
+
+  // --- Event Handlers ---
+  const handleTaskCenterClick = useCallback(
+    (e) => {
+      setTaskCenterVisible((prev) => {
+        if (prev) return false;
+        return true;
+      });
       if (handleMenuClick) handleMenuClick(e);
-  };
+    },
+    [handleMenuClick]
+  );
 
-  const accountingChildren = [
+  const handleNotificationClick = useCallback(
-    {
+    (e) => {
-      key: "bills",
+      setNotificationVisible((prev) => {
-      id: "header-accounting-bills",
+        if (prev) return false;
-      icon: <FaFileInvoiceDollar />,
+        return true;
-      label: (
+      });
-        <Link to="/manage/bills">
+      if (handleMenuClick) handleMenuClick(e);
-          <LockWrapper featureName="bills" bodyshop={bodyshop}>
-            {t("menus.header.bills")}
-          </LockWrapper>
-        </Link>
-      )
     },
-    {
+    [handleMenuClick]
-      key: "enterbills",
+  );
-      id: "header-accounting-enterbills",
+  // --- Menu Items ---
-      icon: <GiPayMoney />,
+  const accountingChildren = useMemo(
-      label: (
+    () =>
-        <LockWrapper featureName="bills" bodyshop={bodyshop}>
+      buildAccountingChildren({
-          {t("menus.header.enterbills")}
+        t,
-        </LockWrapper>
+        bodyshop,
-      ),
+        currentUser,
-      onClick: () =>
+        setBillEnterContext,
-        HasFeatureAccess({ featureName: "bills", bodyshop }) &&
+        setPaymentContext,
-        setBillEnterContext({
+        setCardPaymentContext,
-          actions: {},
+        setTimeTicketContext,
-          context: {}
+        ImEXPay,
-        })
+        DmsAp,
-    },
+        Simple_Inventory
-    ...(Simple_Inventory.treatment === "on"
+      }),
-      ? [
+    [
-          { type: "divider" },
+      t,
-          {
+      bodyshop,
-            key: "inventory",
+      currentUser,
-            id: "header-accounting-inventory",
+      setBillEnterContext,
-            icon: <FaFileInvoiceDollar />,
+      setPaymentContext,
-            label: <Link to="/manage/inventory">{t("menus.header.inventory")}</Link>
+      setCardPaymentContext,
-          }
+      setTimeTicketContext,
+      ImEXPay,
+      DmsAp,
+      Simple_Inventory
     ]
-      : []),
+  );
-    { 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>
-          )
-        }
-      ]
-    }
-  ];
 
-  // Left menu items (includes original navigation items)
+  const leftMenuItems = useMemo(
-  const leftMenuItems = [
+    () => [
       {
         key: "home",
         id: "header-home",
@@ -690,12 +617,14 @@ function Header({
           }
         ]
       }
-  ];
+    ],
+    [t, bodyshop, recentItems, setTaskUpsertContext, setReportCenterContext, signOutStart, accountingChildren]
+  );
 
-  // Notifications item (always on the right)
+  const rightMenuItems = useMemo(() => {
-  const notificationItem = scenarioNotificationsOn
+    const items = [];
-    ? [
+    if (scenarioNotificationsOn) {
-        {
+      items.push({
         key: "notifications",
         id: "header-notifications",
         icon: unreadLoading ? (
@@ -706,21 +635,40 @@ function Header({
           </Badge>
         ),
         onClick: handleNotificationClick
+      });
     }
-      ]
+    items.push({
-    : [];
+      key: "taskcenter",
+      id: "header-taskcenter",
+      icon: taskCountLoading ? (
+        <Spin size="small" />
+      ) : (
+        <Badge offset={[8, 0]} size="small" count={incompleteTaskCount > 0 ? incompleteTaskCount : 0} showZero={false}>
+          <Tooltip title={t("menus.header.tasks")}>
+            <FaTasks />
+          </Tooltip>
+        </Badge>
+      ),
+      onClick: handleTaskCenterClick
+    });
+    return items;
+  }, [
+    scenarioNotificationsOn,
+    unreadLoading,
+    unreadCount,
+    taskCountLoading,
+    incompleteTaskCount,
+    isEmployee,
+    handleNotificationClick,
+    handleTaskCenterClick,
+    t
+  ]);
 
+  // --- Render ---
   return (
     <Layout.Header style={{ padding: 0, background: "#001529" }}>
-      <div
+      <div style={{ display: "flex", alignItems: "center", height: "100%", overflow: "hidden" }}>
-        style={{
+        <div style={{ flexGrow: 1, overflowX: "auto", whiteSpace: "nowrap" }}>
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          height: "100%",
-          overflow: "hidden"
-        }}
-      >
           <Menu
             mode="horizontal"
             theme="dark"
@@ -728,33 +676,33 @@ function Header({
             onClick={handleMenuClick}
             subMenuCloseDelay={0.3}
             items={leftMenuItems}
-          style={{
+            style={{ borderBottom: "none", background: "transparent", minWidth: "100%" }}
-            flex: "1 1 auto",
-            minWidth: 0,
-            overflowX: "auto",
-            borderBottom: "none",
-            background: "transparent"
-          }}
           />
-        {scenarioNotificationsOn && (
+        </div>
+        <div style={{ width: 120, flexShrink: 0 }}>
           <Menu
             mode="horizontal"
             theme="dark"
             selectedKeys={[selectedHeader]}
             onClick={handleMenuClick}
             subMenuCloseDelay={0.3}
-            items={notificationItem}
+            items={rightMenuItems}
-            style={{ flex: "0 0 auto", minWidth: 0, borderBottom: "none", background: "transparent" }}
+            style={{ borderBottom: "none", background: "transparent", justifyContent: "flex-end" }}
           />
-        )}
+        </div>
       </div>
       {scenarioNotificationsOn && (
+        <div ref={notificationRef}>
           <NotificationCenterContainer
             visible={notificationVisible}
             onClose={() => setNotificationVisible(false)}
             unreadCount={unreadCount}
           />
+        </div>
       )}
+      <div ref={taskCenterRef}>
+        <TaskCenterContainer visible={taskCenterVisible} onClose={() => setTaskCenterVisible(false)} />
+      </div>
     </Layout.Header>
   );
 }

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;

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);

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;
+    }
+  }
+}

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
+      }
+    }
+  }
+`;