no message

src/pages/client/ClientSearchPage/ClientSearchForm.js

@@ -6,7 +6,7 @@ import {
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
 import {useForm} from "react-hook-form";
-import {useContext, useState} from "react";
+import {useContext, useState, useEffect} from "react";
 // import {useContext, useEffect, useState} from "react";
 import Autocomplete from '@mui/material/Autocomplete';
 import * as React from "react";
@@ -39,7 +39,7 @@ import {LIONER_FORM_THEME, CARD_MAX_WIDTH} from "../../../themes/themeConst";
 import Collapse from '@mui/material/Collapse';
 import {ExpandMore} from "@mui/icons-material";
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { isNull } from 'lodash';
+import axios from "axios";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -53,6 +53,14 @@ const ClientSearchForm = ({applySearch, setExpanded,expanded}) => {
     // const { setIsUploading } = useContext(UploadContext);
     const ability = useContext(AbilityContext);
 
+    const [consultantList, setConsultantList] = useState([]);
+    const [selectedConsultant, setSelectedConsultant] = useState(null);
+
+    useEffect(() => {
+        axios.get(`${apiPath}/consultant/combo`).then(res => {
+            setConsultantList(res.data.records);
+        });
+    }, []);
 
     // const [selectedRegion, setSelectedRegion] = useState(null);
     // const [selectedType, setSelectedType] = useState(null);
@@ -97,10 +105,7 @@ const ClientSearchForm = ({applySearch, setExpanded,expanded}) => {
             ...data,
             createDateFrom: createDateFrom === null ? null : dayjs(createDateFrom).format('YYYY-MM-DD'),
             createDateTo: createDateTo === null ? null : dayjs(createDateTo).format('YYYY-MM-DD'),
-            // region: selectedRegion === null ? null : selectedRegion.label,
-            // type: selectedType === null ? null :selectedType.label,
-            // consultantIdList: getIdList(selectedConsultants),
-            // caseManagerIdList: getIdList(selectedCaseManager),
+            consultantId: selectedConsultant ? selectedConsultant.id : null,
         };
         applySearch(criteria);
     };
@@ -203,6 +208,7 @@ const ClientSearchForm = ({applySearch, setExpanded,expanded}) => {
     // }, [userConsultant,consultantList]);
 
     function resetForm(){
+        setSelectedConsultant(null);
         setCreateDateFrom(null);
         setCreateDateTo(null);
         // setToDate(null);
@@ -284,6 +290,25 @@ const ClientSearchForm = ({applySearch, setExpanded,expanded}) => {
                         />
                     </Grid>
 
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 0.5 }}>
+                        <InputLabel htmlFor="consultant-combo">Consultant</InputLabel>
+                        <Autocomplete
+                            id="consultant-combo"
+                            size="small" // This ensures the height matches your other TextFields
+                            options={consultantList}
+                            getOptionLabel={(option) => option.name || ""}
+                            value={selectedConsultant}
+                            onChange={(event, newValue) => setSelectedConsultant(newValue)}
+                            renderInput={(params) => (
+                                <TextField 
+                                    {...params} 
+                                    placeholder="Select Consultant" 
+                                    fullWidth 
+                                />
+                            )}
+                        />
+                    </Grid>
+
                     {/* <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5}}>
                         <InputLabel htmlFor="eventName">Case Manager</InputLabel>
                         <Autocomplete

src/pages/lionerUserDetailPage/UserInformationCard.js

@@ -1,13 +1,13 @@
 // material-ui
 import {
     FormControl, IconButton,
-    Grid, InputAdornment, TextField, Typography, Switch
+    Grid, InputAdornment, TextField, Typography, Switch, InputLabel
 } from '@mui/material';
 import MainCard from "../../components/MainCard";
 import * as React from "react";
 import {useForm} from "react-hook-form";
 import Autocomplete from "@mui/material/Autocomplete";
-import {useEffect, useState} from "react";
+import {useEffect, useState, } from "react";
 import Checkbox from "@mui/material/Checkbox";
 import LoadingComponent from "../extra-pages/LoadingComponent";
 import axios from "axios";
@@ -33,7 +33,7 @@ import {USER_GROUP_COMBO} from "../../utils/ComboConst";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
-const UserInformationCard = ({isCollectData, updateUserObject,userData,
+const UserInformationCard = ({isCollectData, updateUserObject,userData, setUserData,
                                  isNewRecord,setIsCollectData,setUserConfirm,
                                  requestError}) => {
     const params = useParams();
@@ -54,23 +54,28 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
         setLocked(!locked);
     };
 
+    const [consultantList, setConsultantList] = useState([]);
+    const [selectedConsultants, setSelectedConsultants] = useState([]);
+
     useEffect(() => {
-        // axios.get(`${apiPath}${GET_USER_GROUP_COMBO_LIST}`)
-        //     .then((response) => {
-        //         if (response.status === 200) {
-        //             setSubDivisionList(response.data.records);
-        //         }
-        //     })
-        //     .catch(error => {
-        //         console.log(error);
-        //         return false;
-        //     });
+        // Fetch all available consultants for the dropdown
+        axios.get(`${apiPath}/consultant/combo`).then(res => {
+            setConsultantList(res.data.records);
+        });
     }, []);
 
     useEffect(() => {
         setErrors(requestError);
     }, [requestError]);
 
+    useEffect(() => {
+        if (userData && userData.consultantIds && consultantList.length > 0) {
+            // Find the full objects from the master list based on the user's IDs
+            const initialSelection = consultantList.filter(c => userData.consultantIds.includes(c.id));
+            setSelectedConsultants(initialSelection);
+        }
+    }, [userData, consultantList]);
+
     useEffect(() => {
         //if user data from parent are not null
         if (Object.keys(userData).length > 0 && userData !== undefined) {
@@ -154,6 +159,7 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
                                     ...values,
                                     locked: locked,
                                     twoFactorEnabled: twoFactorEnabled,
+                                    consultantIds: selectedConsultants.map(c => c.id),
                                 }
                                 updateUserObject(objectData);
                             }
@@ -432,6 +438,36 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,
                             </Grid>
                         </Grid>
 
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 1 }}>
+                            <Grid container>
+                                <Grid item xs={4} sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
+                                    <InputLabel>Assigned Consultants</InputLabel>
+                                </Grid>
+                                <Grid item xs={7} lg={6}>
+                                    <Autocomplete
+                                        multiple
+                                        id="user-consultants"
+                                        size="small"
+                                        options={consultantList}
+                                        getOptionLabel={(option) => option.name || ""}
+                                        // This ensures the UI reflects what is currently in the userData state
+                                        value={consultantList.filter(c => (userData?.consultantIds || []).includes(c.id))}
+                                        isOptionEqualToValue={(option, value) => option.id === value.id}
+                                        onChange={(event, newValue) => {
+                                            // This updates the object that gets sent to the backend
+                                            setUserData({
+                                                ...userData,
+                                                consultantIds: newValue.map(c => c.id)
+                                            });
+                                        }}
+                                        renderInput={(params) => (
+                                            <TextField {...params} placeholder="Select Consultants" />
+                                        )}
+                                    />
+                                </Grid>
+                            </Grid>
+                        </Grid>
+
                         {!isNewRecord && (
                             <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 1}}>
                                 <Grid container alignItems={"center"}>

src/pages/lionerUserDetailPage/index.js

@@ -156,6 +156,7 @@ const UserMaintainPage = () => {
                     "userGroupId": editedUserData.userGroupId ?? null,
                     "password": editedUserData.password ?? null,
                     "twoFactorEnabled": editedUserData.twoFactorEnabled ?? false,
+                    "consultantIds": editedUserData.consultantIds ?? [],
                     // "addGroupIds": userGroupData,
                     // "removeGroupIds": deletedUserGroup,
                     // "addAuthIds": userAuthData,
@@ -204,6 +205,7 @@ const UserMaintainPage = () => {
                     <UserInformationCard
                         updateUserObject={updateUserObject}
                         userData={userData}
+                        setUserData={setUserData}
                         isCollectData={isCollectData}
                         isNewRecord={isNewRecord}
                         setUserConfirm={setUserConfirm}