added suggestion for branch Type inside service Projects

src/components/ServiceProject/ServiceProjectBranch/ManageBranch.jsx

@@ -5,6 +5,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import Label from "../../common/Label";
 import {
   useBranchDetails,
+  useBranchTypes,
   useCreateBranch,
   useServiceProjects,
   useUpdateBranch,
@@ -12,6 +13,8 @@ import {
 import { useAppForm } from "../../../hooks/appHooks/useAppForm";
 import { useParams } from "react-router-dom";
 import { BranchSchema, defaultBranches } from "../ServiceProjectSchema";
+import InputSuggessionField from "../../common/Forms/InputSuggesstionField";
+import InputSuggestions from "../../common/InputSuggestion";
 
 const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
   const {
@@ -20,7 +23,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
     isError,
     error: requestError,
   } = useBranchDetails(BranchToEdit);
-
+  const { data: branchTypes } = useBranchTypes();
   const [contacts, setContacts] = React.useState([
     {
       contactPerson: "",
@@ -122,15 +125,17 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
             <Label htmlFor="branchType" className="form-label" required>
               Branch Type
             </Label>
-            <input
+
-              type="text"
+            <InputSuggestions
-              id="branchType"
+              organizationList={branchTypes}
-              className="form-control form-control-sm"
+              value={watch("branchType") || ""}
-              {...register("branchType")}
+              onChange={(val) =>
+                setValue("branchType", val, { shouldValidate: true })
+              }
+              error={errors.branchType?.message}
             />
-            {errors.branchType && (
+
-              <small className="danger-text">{errors.branchType.message}</small>
+           
-            )}
           </div>
         </div>
 

src/components/common/Forms/InputSuggesstionField.jsx

@@ -2,15 +2,19 @@ import React, { useEffect, useRef, useState } from "react";
 import Label from "../Label";
 
 const InputSuggessionField = ({
-   organizationList = [],
+  suggesstionList = [],
   value,
   onChange,
   error,
-  disabled=false
+  disabled = false,
+  label = "Label",
+  placeholder = "Please Enter",
+  required = false,
+  isLoading = false,
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
-
+console.log(suggesstionList)
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -21,12 +25,12 @@ const InputSuggessionField = ({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
-  const selectedOption = options.find((opt) => opt[valueKey] === value);
+  const selectedOption = suggesstionList.find((opt) => opt === value);
 
-  const displayText = selectedOption ? selectedOption[labelKey] : placeholder;
+  const displayText = selectedOption ? selectedOption : placeholder;
 
   const handleSelect = (option) => {
-    onChange(option[valueKey]);
+    onChange(option);
     setOpen(false);
   };
 
@@ -68,16 +72,14 @@ const InputSuggessionField = ({
             overflow: "hidden",
           }}
         >
-          {options.map((option, i) => (
+          {suggesstionList.map((option, i) => (
             <li key={i}>
               <button
                 type="button"
-                className={`dropdown-item ${
+                className={`dropdown-item ${option === value ? "active" : ""}`}
-                  option[valueKey] === value ? "active" : ""
-                }`}
                 onClick={() => handleSelect(option)}
               >
-                {option[labelKey]}
+                {option}
               </button>
             </li>
           ))}

src/components/common/InputSuggestion.jsx

@@ -5,14 +5,13 @@ const InputSuggestions = ({
   value,
   onChange,
   error,
-  disabled=false
+  disabled = false,
 }) => {
   const [filteredList, setFilteredList] = useState([]);
   const [showSuggestions, setShowSuggestions] = useState(false);
   const handleInputChange = (e) => {
     const val = e.target.value;
     onChange(val);
-
     const matches = organizationList.filter((org) =>
       org.toLowerCase().includes(val.toLowerCase())
     );
@@ -26,7 +25,7 @@ const InputSuggestions = ({
   };
 
   return (
-    <div className="position-relative">
+    <div className="mb-3 position-relative">
       <input
         className="form-control form-control-sm"
         value={value}
@@ -39,19 +38,19 @@ const InputSuggestions = ({
       />
       {showSuggestions && filteredList.length > 0 && (
         <ul
-          className="list-group shadow-sm position-absolute w-100 bg-white border  zindex-tooltip"
+          className="dropdown-menu w-100 shadow-sm show animate__fadeIn"
           style={{
             maxHeight: "180px",
             overflowY: "auto",
             marginTop: "2px",
             zIndex: 1000,
-            borderRadius:"0px"
+            borderRadius: "0px",
           }}
         >
           {filteredList.map((org) => (
             <li
               key={org}
-              className="list-group-item list-group-item-action border-none "
+              className="ropdown-item"
               style={{
                 cursor: "pointer",
                 padding: "5px 12px",
@@ -59,17 +58,15 @@ const InputSuggestions = ({
                 transition: "background-color 0.2s",
               }}
               onMouseDown={() => handleSelectSuggestion(org)}
-              onMouseEnter={(e) =>
+                className={`dropdown-item ${
-                (e.currentTarget.style.backgroundColor = "#f8f9fa")
+                  org === value ? "active" : ""
-              }
+                }`}
-              onMouseLeave={(e) =>
-                (e.currentTarget.style.backgroundColor = "transparent")
-              }
             >
               {org}
             </li>
           ))}
         </ul>
+  
       )}
 
       {error && <small className="danger-text">{error}</small>}

src/hooks/useServiceProject.jsx

@@ -314,6 +314,15 @@ export const useBranches = (
   });
 };
 
+export const useBranchTypes = ()=>{
+  return useQuery({
+    queryKey:["branch_Type"],
+    queryFn:async()=> {
+      const resp = await ServiceProjectRepository.GetBranchTypeList();
+      return resp.data;
+    },
+  })
+}
 
 export const useBranchDetails = (id) => {
   return useQuery({
@@ -346,6 +355,7 @@ export const useCreateBranch = (onSuccessCallBack) => {
     },
   });
 };
+
 export const useUpdateBranch = (onSuccessCallBack) => {
   const queryClient = useQueryClient();
   return useMutation({

src/repositories/ServiceProjectRepository.jsx

@@ -56,5 +56,5 @@ export const ServiceProjectRepository = {
   DeleteBranch: (id, isActive = false) =>
     api.delete(`/api/ServiceProject/branch/delete/${id}?isActive=${isActive}`),
 
+  GetBranchTypeList: () => api.get(`/api/serviceproject/branch-type/list`),
 };
-