feat: Add validation to Associated sites

frontend/src/app/components/input-controls/InputControls.tsx

@@ -1279,39 +1279,39 @@ export const SearchCustomInput: React.FC<InputProps> = ({
     }
   }, [isOpen]);
 
-  // useEffect(() => {
-  //   if (resetDetails) {
-  //     setError(null);
-  //   }
-  // }, [resetDetails]);
-
   useEffect(() => {
     if (validation?.required) {
-      validateInput(value);
+      validateInput(value.trim());
     }
   }, []);
 
   const validateInput = (inputValue: any) => {
     if (validation) {
       if (inputValue === null || inputValue === undefined) {
+        setError(validation.customMessage || 'Invalid input');
         return false;
       }
       if (validation.pattern && !validation.pattern.test(inputValue)) {
         setError(validation.customMessage || 'Invalid input');
         return false;
       }
+      if (!inputValue.trim()) {
+        setError(validation?.customMessage || 'Invalid input');
+        return false;
+      }
     }
 
     setError(null);
     return true;
   };
 
   const handleTextInputChange = (value: any) => {
+    setHasInfoMsg(null);
     const inputValue = value;
+    let isValid = true;
     if (validation?.required) {
-      validateInput(inputValue);
+      isValid = validateInput(inputValue);
     }
-    setHasInfoMsg(null);
     if (allowNumbersOnly) {
       if (validateInput(inputValue)) {
         if (inputValue.trim().toString() === '') {
@@ -1328,15 +1328,15 @@ export const SearchCustomInput: React.FC<InputProps> = ({
       }
     } else {
       setHasInfoMsg(null);
-      setIsOpen(true);
+      setIsOpen(isValid);
       onChange(inputValue);
     }
   };
 
   const handleSelectInputChange = (selectedValue: any) => {
     setHasInfoMsg(customInfoMessage);
     const { value } = selectedValue;
-    handleTextInputChange(value);
+    handleTextInputChange(value.trim());
   };
 
   const closeSearch = useCallback(() => {

frontend/src/app/features/details/associates/Associate.css

@@ -55,6 +55,10 @@
   padding: 6px 8px !important;
 }
 
+.custom-associate-edit-input.rs-picker-toggle-wrapper {
+  display: inline;
+}
+
 .custom-associate-search-placeholder::placeholder {
   color: var(--typography-color-disabled) !important;
   font-size: 12px !important;

frontend/src/app/features/details/associates/Associate.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import SearchInput from '../../../components/search/SearchInput';
 import Sort from '../../../components/sort/Sort';
 import { useDispatch, useSelector } from 'react-redux';
@@ -30,13 +30,6 @@ import {
 import { RequestStatus } from '../../../helpers/requests/status';
 import './Associate.css';
 import { SRVisibility } from '../../../helpers/requests/srVisibility';
-import Widget from '../../../components/widget/Widget';
-import Actions from '../../../components/action/Actions';
-import {
-  SpinnerIcon,
-  UserMinus,
-  UserPlus,
-} from '../../../components/common/icon';
 import { v4 } from 'uuid';
 import { useParams } from 'react-router-dom';
 import { GRAPHQL } from '../../../helpers/endpoints';
@@ -134,7 +127,8 @@ const Associate: React.FC<IComponentProps> = ({ showPending = false }) => {
   }, [resetDetails, saveSiteDetailsRequestStatus]);
 
   const fetchSiteIds = useCallback(async (searchParam: string) => {
-    if (searchParam.trim()) {
+    const pattern = /^[0-9,\s]*$/;
+    if (searchParam.trim() && pattern.test(searchParam)) {
       try {
         // Check cache first
         if (resultCache[searchParam]) {
@@ -559,8 +553,8 @@ const Associate: React.FC<IComponentProps> = ({ showPending = false }) => {
     const newAssoc = {
       id: v4(),
       siteId: id,
-      siteIdAssociatedWith: '',
-      effectiveDate: '',
+      siteIdAssociatedWith: null,
+      effectiveDate: null,
       note: '',
       apiAction: UserActionEnum.added,
       srAction: SRApprovalStatusEnum.Pending,

frontend/src/app/features/details/associates/AssociateConfig.tsx

@@ -1,13 +1,6 @@
 import { useLocation } from 'react-router-dom';
 import { DropdownItem } from '../../../components/action/IActions';
-import {
-  CircleXMarkIcon,
-  MagnifyingGlassIcon,
-} from '../../../components/common/icon';
-import {
-  FormFieldType,
-  IFormField,
-} from '../../../components/input-controls/IFormField';
+import { FormFieldType } from '../../../components/input-controls/IFormField';
 import { ColumnSize, TableColumn } from '../../../components/table/TableColumn';
 import { SRVisibility } from '../../../helpers/requests/srVisibility';
 import { RequestStatus } from '../../../helpers/requests/status';
@@ -45,10 +38,10 @@ export const GetAssociateConfig = () => {
         customMenuMessage: <span>Please select a site ID:</span>,
         customInfoMessage: null,
         validation: {
+          required: true,
           pattern: /^[0-9,\s]*$/,
-          customMessage: 'Site ID can only contain numbers.',
+          customMessage: 'Site ID is required and can only contain numbers.',
         },
-        allowNumbersOnly: true,
         tableMode: true,
       },
     },
@@ -71,6 +64,10 @@ export const GetAssociateConfig = () => {
         customEditInputTextCss:
           'custom-associate-edit-input .rs.input .rs-input-group-addon',
         tableMode: true,
+        validation: {
+          required: true,
+          customMessage: 'Date Noted is required.',
+        },
       },
     },
     {
@@ -131,6 +128,11 @@ export const GetAssociateConfig = () => {
         customEditInputTextCss: 'custom-associate-edit-input',
         tableMode: true,
         href: `${parentPath}/`,
+        validation: {
+          required: true,
+          pattern: /^[0-9,\s]*$/,
+          customMessage: 'Site ID is required and can only contain numbers.',
+        },
       },
       linkRedirectionURL: `${parentPath}/`,
     },
@@ -153,6 +155,10 @@ export const GetAssociateConfig = () => {
         customEditInputTextCss:
           'custom-associate-edit-input .rs.input .rs-input-group-addon',
         tableMode: true,
+        validation: {
+          required: true,
+          customMessage: 'Date Noted is required.',
+        },
       },
     },
     {
@@ -213,6 +219,11 @@ export const GetAssociateConfig = () => {
         customEditInputTextCss: 'custom-associate-edit-input',
         tableMode: true,
         href: `${parentPath}/`,
+        validation: {
+          required: true,
+          pattern: /^[0-9,\s]*$/,
+          customMessage: 'Site ID is required and can only contain numbers.',
+        },
       },
       linkRedirectionURL: `${parentPath}/`,
     },
@@ -235,6 +246,10 @@ export const GetAssociateConfig = () => {
         customEditInputTextCss:
           'custom-associate-edit-input .rs.input .rs-input-group-addon',
         tableMode: true,
+        validation: {
+          required: true,
+          customMessage: 'Date Noted is required.',
+        },
       },
     },
     {