src/components/ServiceProject/ServiceProjectBranch/ManageBranch.jsx

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

src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx

@@ -50,7 +50,7 @@ const ServiceBranch = () => {
   const handleDelete = (id) => {
     setDeletingId(id);
     DeleteBranch(
-      { id, isActive: showInactive },
+      { id, isActive: false },
       {
         onSettled: () => {
           setDeletingId(null);
@@ -64,13 +64,9 @@ const ServiceBranch = () => {
       {IsDeleteModalOpen && (
         <ConfirmModal
           isOpen={IsDeleteModalOpen}
-          type={!showInactive ? "delete" : "undo"}
+          type="delete"
-          header={!showInactive ? "Delete Branch" : "Restore Branch"}
+          header="Delete Expense"
-          message={
+          message="Are you sure you want delete?"
-            !showInactive
-              ? "Are you sure you want delete?"
-              : "Are you sure you want restore?"
-          }
           onSubmit={handleDelete}
           onClose={() => setIsDeleteModalOpen(false)}
           loading={isPending}
@@ -186,9 +182,9 @@ const ServiceBranch = () => {
                           >
                             <i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
                           </button>
+
                           <ul className="dropdown-menu dropdown-menu-end w-auto">
-                            {!showInactive ? (
+                            {/* Modify */}
-                              <>
                             <li
                               onClick={() =>
                                 setManageState({
@@ -202,6 +198,8 @@ const ServiceBranch = () => {
                                 Modify
                               </a>
                             </li>
+
+                            {/* Delete */}
                             <li
                               onClick={() => {
                                 setIsDeleteModalOpen(true);
@@ -213,20 +211,6 @@ const ServiceBranch = () => {
                                 Delete
                               </a>
                             </li>
-                              </>
-                            ) : (
-                              <li
-                                onClick={() => {
-                                  setIsDeleteModalOpen(true);
-                                  setDeletingId(branch.id);
-                                }}
-                              >
-                                <a className="dropdown-item px-2 cursor-pointer py-1">
-                                  <i className="bx bx-undo text-danger  me-2"></i>
-                                  Restore
-                                </a>
-                              </li>
-                            )}
                           </ul>
                         </div>
                       </td>

src/components/common/ConfirmModal.jsx

@@ -18,10 +18,8 @@ const ConfirmModal = ({
         return <i className="bx bx-x-circle text-danger" style={{ fontSize: "60px" }}></i>;
       case "success":
         return <i className="bx bx-archive-in text-warning" style={{ fontSize: "60px" }}></i>;
-      case "archive":
+      case "warning":
         return <i className="bx bx-error-circle text-warning" style={{ fontSize: "60px" }}></i>;
-        case "undo":
-        return <i className="bx bx-undo text-info" style={{ fontSize: "50px" }}></i>;
       default:
         return null;
     }

src/components/common/Forms/InputSuggesstionField.jsx

@@ -2,19 +2,15 @@ import React, { useEffect, useRef, useState } from "react";
 import Label from "../Label";
 
 const InputSuggessionField = ({
-  suggesstionList = [],
+   organizationList = [],
   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)) {
@@ -25,12 +21,12 @@ console.log(suggesstionList)
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
-  const selectedOption = suggesstionList.find((opt) => opt === value);
+  const selectedOption = options.find((opt) => opt[valueKey] === value);
 
-  const displayText = selectedOption ? selectedOption : placeholder;
+  const displayText = selectedOption ? selectedOption[labelKey] : placeholder;
 
   const handleSelect = (option) => {
-    onChange(option);
+    onChange(option[valueKey]);
     setOpen(false);
   };
 
@@ -72,14 +68,16 @@ console.log(suggesstionList)
             overflow: "hidden",
           }}
         >
-          {suggesstionList.map((option, i) => (
+          {options.map((option, i) => (
             <li key={i}>
               <button
                 type="button"
-                className={`dropdown-item ${option === value ? "active" : ""}`}
+                className={`dropdown-item ${
+                  option[valueKey] === value ? "active" : ""
+                }`}
                 onClick={() => handleSelect(option)}
               >
-                {option}
+                {option[labelKey]}
               </button>
             </li>
           ))}

src/components/common/InputSuggestion.jsx

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

src/hooks/useServiceProject.jsx

@@ -148,11 +148,6 @@ export const useAllocationServiceProjectTeam = (onSuccessCallback) => {
 
 //#endregion
 
-
-
-
-
-
 //#region Service Jobs
 
 export const useServiceProjectJobs = (
@@ -299,12 +294,6 @@ export const useUpdateServiceProjectJob = (onSuccessCallback) => {
 
 //#endregion
 
-
-
-
-
-
-
 //#region Branch
 export const useBranches = (
   projectId,
@@ -336,15 +325,6 @@ 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({
@@ -377,7 +357,6 @@ export const useCreateBranch = (onSuccessCallBack) => {
     },
   });
 };
-
 export const useUpdateBranch = (onSuccessCallBack) => {
   const queryClient = useQueryClient();
   return useMutation({
@@ -409,9 +388,9 @@ export const useDeleteBranch = () => {
     mutationFn: async ({ id, isActive }) =>
       await ServiceProjectRepository.DeleteBranch(id, isActive),
 
-    onSuccess: (_,variable) => {
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["branches"] });
-      showToast(`Branch ${variable.isActive ? "restored":"deleted"} successfully`, "success");
+      showToast("Branch deleted successfully", "success");
     },
 
     onError: (error) => {

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`),
 };
+