Adding condition if single or no project assigned then dropdown is not shown

src/components/Project/Teams.jsx

@@ -37,6 +37,7 @@ const Teams = () => {
   const [deleteEmployee, setDeleteEmplyee] = useState(null);
   const [searchTerm, setSearchTerm] = useState(""); // State for search term
   const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
+  const handleToggleActive = e => setActiveEmployee(e.target.checked);
 
   const [selectedService, setSelectedService] = useState("");
 
@@ -262,22 +263,10 @@ const Teams = () => {
         <div className="card-body">
           <div className="row d-flex justify-content-between mb-4">
             <div className="col-md-6 col-12 d-flex align-items-center">
-              <div className="dataTables_filter d-inline-flex align-items-center ms-2">
+              <div className="dataTables_length text-start py-1 px-0 col-md-4 col-12">
-                <input
+                {servicesLoading ? (
-                  type="search"
+                  <span>Loading...</span>
-                  className="form-control form-control-sm me-4"
+                ) : assignedServices?.length > 1 ? (
-                  placeholder="Search by Name or Role"
-                  aria-controls="DataTables_Table_0"
-                  value={searchTerm}
-                  onChange={handleSearch}
-                />
-              </div>
-               {/* Services-Dropdown */}
-
-             <div
-                  className="dataTables_length text-start py-1 px-0 col-md-4 col-12"
-                  id="DataTables_Table_0_length"
-                >
                   <label>
                     <select
                       name="DataTables_Table_0_length"
@@ -288,39 +277,59 @@ const Teams = () => {
                       onChange={handleServiceChange}
                       style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
                     >
-                      {servicesLoading && <option>Loading...</option>}
+                      {assignedServices.map((service) => (
-                      {assignedServices?.map((service) => (
                         <option key={service.id} value={service.id}>
                           {service.name}
                         </option>
                       ))}
                     </select>
                   </label>
+                ) : (
+                  <div
+                    style={{
+                      fontSize: "0.875rem",
+                      height: "32px",
+                      width: "190px",
+                      border: "1px solid #ced4da",
+                      borderRadius: "0.25rem",
+                      padding: "4px 8px",
+                      display: "flex",
+                      alignItems: "center",          
+                    }}
+                  >
+                    {assignedServices?.length === 1
+                      ? assignedServices[0].name
+                      : "No service available"}
                   </div>
+                )}
+              </div>
+
+              <div className="dataTables_filter d-inline-flex align-items-center ms-2">
+                <input
+                  type="search"
+                  className="form-control form-control-sm me-4"
+                  placeholder="Search by Name or Role"
+                  aria-controls="DataTables_Table_0"
+                  value={searchTerm}
+                  onChange={handleSearch}
+                />
+              </div>
+
             </div>
             <div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
-              <div
+              <div className="form-check form-switch me-4 mt-2">
-                className="dataTables_length text-start py-2 px-2"
+                <input
-                id="DataTables_Table_0_length"
+                  type="checkbox"
-              >
+                  className="form-check-input"
-                <label>
+                  checked={activeEmployee}
-                  <select
+                  onChange={handleToggleActive}
-                    name="DataTables_Table_0_length"
+                  id="activeEmployeeSwitch"
-                    aria-controls="DataTables_Table_0"
+                />
-                    className="form-select form-select-sm"
+                <label className="form-check-label ms-0 " htmlFor="activeEmployeeSwitch">
-                    onChange={handleFilterEmployee}
+                  {activeEmployee ? "Active Employees" : "Inactive Employees"}
-                    // value={false}
-                    aria-label=""
-                    defaultValue="true"
-                  >
-                    <option value="true">Active Employee</option>
-                    <option value="false">In-Active Employee</option>
-                  </select>
                 </label>
               </div>
 
-             
-
               <button
                 type="button"
                 className={`link-button btn-primary btn-sm ${HasAssignUserPermission ? "" : "d-none"