feature/IO-3291-Tasks-Notifications: Checkpoint
This commit is contained in:
Dave Richer
190
client/src/components/header/buildAccountingChildren.jsx
Normal file
190
client/src/components/header/buildAccountingChildren.jsx
Normal file
@@ -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;
|
||||
@@ -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 { useEffect, useRef, useState } from "react";
|
||||
import { Badge, Layout, Menu, Spin, Tooltip } from "antd";
|
||||
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({
|
||||
handleMenuClick,
|
||||
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);
|
||||
|
||||
// --- Utility Hooks ---
|
||||
function useUnreadNotifications(userAssociationId, isConnected, scenarioNotificationsOn) {
|
||||
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) => {
|
||||
setNotificationVisible(!notificationVisible);
|
||||
// Handle outside clicks for popovers
|
||||
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 = [
|
||||
{
|
||||
key: "bills",
|
||||
id: "header-accounting-bills",
|
||||
icon: <FaFileInvoiceDollar />,
|
||||
label: (
|
||||
<Link to="/manage/bills">
|
||||
<LockWrapper featureName="bills" bodyshop={bodyshop}>
|
||||
{t("menus.header.bills")}
|
||||
</LockWrapper>
|
||||
</Link>
|
||||
)
|
||||
const handleNotificationClick = useCallback(
|
||||
(e) => {
|
||||
setNotificationVisible((prev) => {
|
||||
if (prev) return false;
|
||||
return true;
|
||||
});
|
||||
if (handleMenuClick) handleMenuClick(e);
|
||||
},
|
||||
{
|
||||
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>
|
||||
}
|
||||
[handleMenuClick]
|
||||
);
|
||||
// --- Menu Items ---
|
||||
const accountingChildren = useMemo(
|
||||
() =>
|
||||
buildAccountingChildren({
|
||||
t,
|
||||
bodyshop,
|
||||
currentUser,
|
||||
setBillEnterContext,
|
||||
setPaymentContext,
|
||||
setCardPaymentContext,
|
||||
setTimeTicketContext,
|
||||
ImEXPay,
|
||||
DmsAp,
|
||||
Simple_Inventory
|
||||
}),
|
||||
[
|
||||
t,
|
||||
bodyshop,
|
||||
currentUser,
|
||||
setBillEnterContext,
|
||||
setPaymentContext,
|
||||
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 = [
|
||||
const leftMenuItems = useMemo(
|
||||
() => [
|
||||
{
|
||||
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 notificationItem = scenarioNotificationsOn
|
||||
? [
|
||||
{
|
||||
const rightMenuItems = useMemo(() => {
|
||||
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
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
overflow: "hidden"
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", height: "100%", overflow: "hidden" }}>
|
||||
<div style={{ flexGrow: 1, overflowX: "auto", whiteSpace: "nowrap" }}>
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
theme="dark"
|
||||
@@ -728,33 +676,33 @@ function Header({
|
||||
onClick={handleMenuClick}
|
||||
subMenuCloseDelay={0.3}
|
||||
items={leftMenuItems}
|
||||
style={{
|
||||
flex: "1 1 auto",
|
||||
minWidth: 0,
|
||||
overflowX: "auto",
|
||||
borderBottom: "none",
|
||||
background: "transparent"
|
||||
}}
|
||||
style={{ borderBottom: "none", background: "transparent", minWidth: "100%" }}
|
||||
/>
|
||||
{scenarioNotificationsOn && (
|
||||
</div>
|
||||
<div style={{ width: 120, flexShrink: 0 }}>
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
theme="dark"
|
||||
selectedKeys={[selectedHeader]}
|
||||
onClick={handleMenuClick}
|
||||
subMenuCloseDelay={0.3}
|
||||
items={notificationItem}
|
||||
style={{ flex: "0 0 auto", minWidth: 0, borderBottom: "none", background: "transparent" }}
|
||||
items={rightMenuItems}
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
94
client/src/components/task-center/task-center.component.jsx
Normal file
94
client/src/components/task-center/task-center.component.jsx
Normal file
@@ -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;
|
||||
116
client/src/components/task-center/task-center.container.jsx
Normal file
116
client/src/components/task-center/task-center.container.jsx
Normal file
@@ -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);
|
||||
66
client/src/components/task-center/task-center.styles.scss
Normal file
66
client/src/components/task-center/task-center.styles.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user