feature/IO-3225-Notifications-1.5: checkpoint

client/src/components/employee-search-select/employee-search-select.component.jsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 const { Option } = Select;
 //To be used as a form element only.
 
-const EmployeeSearchSelect = ({ options, ...props }) => {
+const EmployeeSearchSelect = ({ options, showEmail, ...props }) => {
   const { t } = useTranslation();
 
   return (
@@ -21,12 +21,16 @@ const EmployeeSearchSelect = ({ options, ...props }) => {
       {options
         ? options.map((o) => (
             <Option key={o.id} value={o.id} search={`${o.employee_number}  ${o.first_name} ${o.last_name}`}>
-              <Space>
+              <Space size="small">
                 {`${o.employee_number ?? ""}  ${o.first_name} ${o.last_name}`}
-                <Tag color="green">
+                <Tag color="green" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
                   {o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
                 </Tag>
-                {o.user_email ? <Tag color="blue">{o.user_email}</Tag> : null}
+                {showEmail && o.user_email ? (
+                  <Tag color="blue" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
+                    {o.user_email}
+                  </Tag>
+                ) : null}
               </Space>
             </Option>
           ))

client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx

@@ -104,6 +104,7 @@ export default function JobWatcherToggleComponent({
         }
         placeholder={t("notifications.labels.employee-search")}
         value={selectedWatcher}
+        showEmail={true}
         onChange={(value) => {
           setSelectedWatcher(value);
           handleWatcherSelect(value);

client/src/components/shop-info/shop-info.notifications-autoadd.component.jsx

@@ -1,27 +1,52 @@
-// shop-info.notifications-autoadd.component.jsx
-import React from "react";
 import { Form, Typography } from "antd";
 import { useTranslation } from "react-i18next";
 import EmployeeSearchSelectComponent from "../employee-search-select/employee-search-select.component.jsx";
 
 const { Text, Paragraph } = Typography;
 
-export default function ShopInfoNotificationsAutoadd({ form, bodyshop }) {
+export default function ShopInfoNotificationsAutoadd({ bodyshop }) {
   const { t } = useTranslation();
 
-  const employeeOptions = bodyshop?.employees?.filter((e) => e.active && e.id) || [];
+  // Filter employee options to ensure active employees with valid IDs
+  const employeeOptions = bodyshop?.employees?.filter((e) => e.active && e.id && typeof e.id === "string") || [];
 
   return (
     <div>
       <Paragraph>{t("bodyshop.fields.notifications.description")}</Paragraph>
       <Text type="secondary">{t("bodyshop.labels.notifications.followers")}</Text>
       {employeeOptions.length > 0 ? (
-        <Form.Item name="notification_followers" rules={[{ type: "array", message: t("general.validation.array") }]}>
+        <Form.Item
+          name="notification_followers"
+          rules={[
+            {
+              type: "array",
+              message: t("general.validation.array")
+            },
+            {
+              validator: async (_, value) => {
+                if (!value || value.length === 0) {
+                  return Promise.resolve(); // Allow empty array
+                }
+                const hasInvalid = value.some((id) => id == null || typeof id !== "string" || id.trim() === "");
+                if (hasInvalid) {
+                  return Promise.reject(new Error(t("bodyshop.fields.notifications.invalid_followers")));
+                }
+                return Promise.resolve();
+              }
+            }
+          ]}
+        >
           <EmployeeSearchSelectComponent
             style={{ minWidth: "100%" }}
             mode="multiple"
             options={employeeOptions}
             placeholder={t("bodyshop.fields.notifications.placeholder")}
+            showEmail={true}
+            onChange={(value) => {
+              // Filter out null or invalid values before passing to Form
+              const cleanedValue = value?.filter((id) => id != null && typeof id === "string" && id.trim() !== "");
+              return cleanedValue;
+            }}
           />
         </Form.Item>
       ) : (