Changes in Services Dropdown.

src/components/Project/Teams.jsx

@@ -54,7 +54,7 @@ const Teams = () => {
     projectEmployees,
     loading: employeeLodaing,
     refetch,
-  } = useEmployeesByProjectAllocated(projectId,selectedService);
+  } = useEmployeesByProjectAllocated(projectId, selectedService);
   const {
     mutate: submitAllocations,
     isPending,
@@ -154,34 +154,34 @@ const Teams = () => {
       setEmpJobRoles(data);
     }
   }, [data]);
-const filterAndSearchEmployees = useCallback(() => {
-  const statusFiltered = employees.filter((emp) =>
-    activeEmployee ? emp.isActive : !emp.isActive
-  );
-
-  if (searchTerm === "") {
-    setFilteredEmployees(statusFiltered);
-    return;
-  }
-
-  const lowercasedSearchTerm = searchTerm.toLowerCase();
-
-  const searchedAndFiltered = statusFiltered.filter((item) => {
-    const fullName = `${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
-    const roleName = getRole(item.jobRoleId).toLowerCase();
-    const orgName = (item.organizationName || "").toLowerCase();
-    const serviceName = (item.serviceName || "").toLowerCase();
-
-    return (
-      fullName.includes(lowercasedSearchTerm) ||
-      roleName.includes(lowercasedSearchTerm) ||
-      orgName.includes(lowercasedSearchTerm) ||
-      serviceName.includes(lowercasedSearchTerm)
+  const filterAndSearchEmployees = useCallback(() => {
+    const statusFiltered = employees.filter((emp) =>
+      activeEmployee ? emp.isActive : !emp.isActive
     );
-  });
 
-  setFilteredEmployees(searchedAndFiltered);
-}, [employees, activeEmployee, searchTerm, getRole]);
+    if (searchTerm === "") {
+      setFilteredEmployees(statusFiltered);
+      return;
+    }
+
+    const lowercasedSearchTerm = searchTerm.toLowerCase();
+
+    const searchedAndFiltered = statusFiltered.filter((item) => {
+      const fullName = `${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
+      const roleName = getRole(item.jobRoleId).toLowerCase();
+      const orgName = (item.organizationName || "").toLowerCase();
+      const serviceName = (item.serviceName || "").toLowerCase();
+
+      return (
+        fullName.includes(lowercasedSearchTerm) ||
+        roleName.includes(lowercasedSearchTerm) ||
+        orgName.includes(lowercasedSearchTerm) ||
+        serviceName.includes(lowercasedSearchTerm)
+      );
+    });
+
+    setFilteredEmployees(searchedAndFiltered);
+  }, [employees, activeEmployee, searchTerm, getRole]);
 
 
   useEffect(() => {
@@ -269,17 +269,17 @@ const filterAndSearchEmployees = useCallback(() => {
           <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_length text-start py-1 px-0 col-md-4 col-12">
-                {servicesLoading ? null : assignedServices && assignedServices.length > 0 ? (
+                {!servicesLoading && assignedServices?.length > 0 && (
                   assignedServices.length > 1 ? (
                     <label>
                       <select
-                        name="serviceFilter"
+                        name="DataTables_Table_0_length"
                         aria-controls="DataTables_Table_0"
                         className="form-select form-select-sm"
                         aria-label="Select Service"
                         value={selectedService}
                         onChange={handleServiceChange}
-                        style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
+                        style={{ fontSize: "0.875rem", height: "35px", width: "190px" }}
                       >
                         <option value="">All Services</option>
                         {assignedServices.map((service) => (
@@ -290,18 +290,10 @@ const filterAndSearchEmployees = useCallback(() => {
                       </select>
                     </label>
                   ) : (
-                    <div>
-                      <h5>{assignedServices[0].name}</h5>
-                    </div>
+                    <h5>{assignedServices[0].name}</h5>
                   )
-                ) : (
-                  <div>
-                    
-                  </div>
                 )}
               </div>
-
-
             </div>
             <div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
               <div className="form-check form-switch me-2 mt-2">

src/pages/Activities/DailyTask.jsx

@@ -167,45 +167,34 @@ const DailyTask = () => {
             {!selectedProject && (<div className="text-center text-muted">Please Select Project</div>)}
 
             <div className="d-flex align-items-center justify-content-between mb-2">
-
               {/* --- Left: Service Dropdown + Filter Icon --- */}
               <div className="d-flex align-items-center gap-6">
                 <div className="me-3">
-                  {servicesLoading ? (
-                    <span></span>
-                  ) : assignedServices?.length > 1 ? (
-                    <select
-                      name="serviceSelect"
-                      className="form-select form-select-sm"
-                      value={selectedService}
-                      onChange={handleServiceChange}
-                      style={{ fontSize: "0.875rem", height: "32px", minWidth: "190px" }}
-                    >
-                      {assignedServices.map((service) => (
-                        <option key={service.id} value={service.id}>
-                          {service.name}
-                        </option>
-                      ))}
-                    </select>
-                  ) : (
-                    <div
-                      className="ms-4 mt-2"
-                    >
-                      {assignedServices?.length === 1
-                        ? <h5>{assignedServices[0].name}</h5>
-                        : "No service available"}
-                    </div>
+                  {!servicesLoading && assignedServices?.length > 0 && (
+                    assignedServices.length > 1 ? (
+                      <label>
+                        <select
+                          name="DataTables_Table_0_length"
+                          aria-controls="DataTables_Table_0"
+                          className="form-select form-select-sm"
+                          aria-label="Select Service"
+                          value={selectedService}
+                          onChange={handleServiceChange}
+                          style={{ fontSize: "0.875rem", height: "35px", width: "190px" }}
+                        >
+                          <option value="">All Services</option>
+                          {assignedServices.map((service) => (
+                            <option key={service.id} value={service.id}>
+                              {service.name}
+                            </option>
+                          ))}
+                        </select>
+                      </label>
+                    ) : (
+                      <h5>{assignedServices[0].name}</h5>
+                    )
                   )}
                 </div>
-
-                {/* <FilterIcon
-                  taskListData={TaskList}
-                  onApplyFilters={setFilters}
-                  currentSelectedBuilding={filters.selectedBuilding}
-                  currentSelectedFloors={filters.selectedFloors}
-                  currentSelectedActivities={filters.selectedActivities}
-                  selectedProject={selectedProject}
-                /> */}
               </div>
 
               {/* --- Right: DateRangePicker --- */}
@@ -291,7 +280,6 @@ const DailyTask = () => {
                 </tbody>
               </table>
             </div>
-
           </div>
         </div>
       </div>

src/pages/Activities/TaskPlannng.jsx

@@ -38,30 +38,35 @@ const TaskPlannng = () => {
 
       <div className="card">
         <div className="card-body">
-          {/* Service Dropdown */}
-          <div className="mb-1 ms-2">
-            {assignedServices?.length > 1 ? (
-              <select
-                id="serviceSelect"
-                className="form-select"
-                value={selectedService}
-                onChange={handleServiceChange}
-                style={{ fontSize: "0.875rem", height: "35px", width: "190px" }}
-              >
-                {assignedServices.map((service) => (
-                  <option key={service.id} value={service.id}>
-                    {service.name}
-                  </option>
-                ))}
-              </select>
-            ) : (
-              <div
-                className="text-start"
-              >
-                {assignedServices?.length === 1
-                  ? <h5>{ assignedServices[0].name}</h5>
-                  : "No service available"}
-              </div>
+          {/* Service Dropdown */}       
+
+          <div
+            className="dataTables_length text-start py-2 px-5 col-md-4 col-12"
+            id="DataTables_Table_0_length"
+          >
+            {!servicesLoading && assignedServices?.length > 0 && (
+              assignedServices.length > 1 ? (
+                <label>
+                  <select
+                    name="DataTables_Table_0_length"
+                    aria-controls="DataTables_Table_0"
+                    className="form-select form-select-sm"
+                    aria-label="Select Service"
+                    value={selectedService}
+                    onChange={handleServiceChange}
+                    style={{ fontSize: "0.875rem", height: "35px", width: "190px" }}
+                  >
+                    <option value="">All Services</option>
+                    {assignedServices.map((service) => (
+                      <option key={service.id} value={service.id}>
+                        {service.name}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+              ) : (
+                <h5>{assignedServices[0].name}</h5>
+              )
             )}
           </div>