changed label of employee to "Reimburse By"

src/components/Expenses/ViewExpense.jsx

@@ -488,7 +488,7 @@ const ViewExpense = ({ ExpenseId }) => {
                 )}
               </div>
               <div className="col-12 col-md-6 text-start">
-                <label className="form-label">Employeee </label>
+                <label className="form-label">Reimburse By  </label>
                 <EmployeeSearchInput
                   control={control}
                   name="reimburseById"

src/components/common/EmployeeSearchInput.jsx

@@ -2,11 +2,12 @@ import { useState, useEffect } from "react";
 import { useEmployeesName } from "../../hooks/useEmployees";
 import { useDebounce } from "../../utils/appUtils";
 import { useController } from "react-hook-form";
+import Avatar from "./Avatar";
 
 
 
 
-const EmployeeSearchInput = ({ control, name, projectId }) => {
+const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
   const {
     field: { onChange, value, ref },
     fieldState: { error },
@@ -40,7 +41,7 @@ const EmployeeSearchInput = ({ control, name, projectId }) => {
         type="text"
         ref={ref}
         className={`form-control form-control-sm`}
-        placeholder="Search employee..."
+        placeholder={placeholder}
         value={search}
         onChange={(e) => {
           setSearch(e.target.value);
@@ -54,7 +55,7 @@ const EmployeeSearchInput = ({ control, name, projectId }) => {
 
       {showDropdown && (employees?.data?.length > 0 || isLoading) && (
         <ul
-          className="list-group position-absolute bg-white w-100 shadow z-3 rounded-none"
+          className="list-group position-absolute bg-white w-100 shadow z-3 rounded-none px-0"
           style={{ maxHeight: 200, overflowY: "auto" }}
         >
           {isLoading ? (
@@ -64,14 +65,24 @@ const EmployeeSearchInput = ({ control, name, projectId }) => {
             </li>
           ) : (
             employees?.data?.map((emp) => (
-              <li
-                key={emp.id}
-                className="list-group-item list-group-item-action"
-                style={{ cursor: "pointer" }}
-                onClick={() => handleSelect(emp)}
-              >
-                {emp.firstName} {emp.lastName}
-              </li>
+             <li
+        key={emp.id}
+        className="list-group-item list-group-item-action py-1 px-1"
+        style={{ cursor: "pointer" }}
+        onClick={() => handleSelect(emp)}
+      >
+        <div className="d-flex align-items-center px-0">
+          <Avatar
+            size="xs"
+            classAvatar="m-0 me-2"
+            firstName={emp.firstName}
+            lastName={emp.lastName}
+          />
+          <span className="text-muted">
+            {`${emp?.firstName} ${emp?.lastName}`.trim()}
+          </span>
+        </div>
+      </li>
             ))
           )}
         </ul>