{JSON.stringify(
diff --git a/client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx b/client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx
new file mode 100644
index 000000000..879b8c1f7
--- /dev/null
+++ b/client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx
@@ -0,0 +1,154 @@
+import React from "react";
+import { EyeFilled, EyeOutlined, UserOutlined } from "@ant-design/icons";
+import { Avatar, Button, Divider, List, Popover, Select, Tooltip, Typography } from "antd";
+import { useTranslation } from "react-i18next";
+import EmployeeSearchSelectComponent from "../../components/employee-search-select/employee-search-select.component.jsx";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component.jsx";
+import { BiSolidTrash } from "react-icons/bi";
+
+const { Text } = Typography;
+
+export default function JobWatcherToggleComponent({
+ jobWatchers,
+ isWatching,
+ watcherLoading,
+ adding,
+ removing,
+ open,
+ setOpen,
+ selectedWatcher,
+ setSelectedWatcher,
+ selectedTeam,
+ bodyshop,
+ Enhanced_Payroll,
+ handleToggleSelf,
+ handleRemoveWatcher,
+ handleWatcherSelect,
+ handleTeamSelect
+}) {
+ const { t } = useTranslation();
+
+ const handleRenderItem = (watcher) => {
+ // Check if watcher is defined and has user_email
+ if (!watcher || !watcher.user_email) {
+ return null; // Skip rendering invalid watchers
+ }
+
+ const employee = bodyshop?.employees?.find((e) => e.user_email === watcher.user_email);
+ const displayName = employee ? `${employee.first_name} ${employee.last_name}` : watcher.user_email;
+
+ return (
+ }
+ onClick={() => handleRemoveWatcher(watcher.user_email)}
+ disabled={adding || removing} // Optional: Disable button during mutations
+ >
+ {t("notifications.actions.remove")}
+
+ ]}
+ >
+ } />}
+ title={{displayName}}
+ description={watcher.user_email}
+ />
+
+ );
+ };
+
+ const popoverContent = (
+
+
+ : }
+ size="medium"
+ onClick={handleToggleSelf}
+ loading={adding || removing}
+ >
+ {isWatching ? t("notifications.labels.unwatch") : t("notifications.labels.watch")}
+
+ ]}
+ >
+
+
+ {t("notifications.labels.watching-issue")}
+
+
+
+
+ {watcherLoading ? (
+
+ ) : jobWatchers && jobWatchers.length > 0 ? (
+
+ ) : (
+
{t("notifications.labels.no-watchers")}
+ )}
+
+
+
{t("notifications.labels.add-watchers")}
+
+ jobWatchers.every((w) => w.user_email !== e.user_email && e.active && e.user_email)
+ ) || []
+ }
+ placeholder={t("notifications.labels.employee-search")}
+ value={selectedWatcher}
+ onChange={(value) => {
+ setSelectedWatcher(value);
+ handleWatcherSelect(value);
+ }}
+ />
+ {Enhanced_Payroll && bodyshop?.employee_teams?.length > 0 && (
+ <>
+
+ {t("notifications.labels.add-watchers-team")}
+
+
+
+
+ <span className="ro-number">
+ {t("notifications.labels.ro-number", { ro_number: notification.roNumber || t("general.labels.na") })}
+ </span>
+ <Text type="secondary" className="relative-time" title={DateTimeFormat(notification.created_at)}>
+ {day(notification.created_at).fromNow()}
+ </Text>
+
+
+
+ {notification.scenarioText.map((text, idx) => (
+ - {text}
+ ))}
+
+
+
+
+
+
+ {t("notifications.labels.notification-center")}
+ {loading && }
+
+
+
+
+ {showUnreadOnly ? (
+
+ ) : (
+
+ )}
+ toggleUnreadOnly(checked)} size="small" />
+
+
+
+ : }
+ onClick={markAllRead}
+ disabled={!unreadCount}
+ />
+
+
+
+
+