src/components/Activities/InfraPlanning.jsx

@@ -55,7 +55,7 @@ const InfraPlanning = () => {
 
   if (isFetched && (!projectInfra || projectInfra.length === 0)) {
     return (
-      <div className="card text-center">
+      <div className="text-center">
         <p className="my-3">No Result Found</p>
       </div>
     );
@@ -63,14 +63,12 @@ const InfraPlanning = () => {
 
   return (
     <div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
-      <div className="card">
         <div className="card-body" style={{ padding: "0.5rem" }}>
           <div className="row">
             <InfraTable buildings={projectInfra} projectId={selectedProject} />
         </div>
       </div>
     </div>
-    </div>
   );
 };
 

src/pages/Activities/TaskPlannng.jsx

@@ -6,6 +6,7 @@ import { useDispatch } from "react-redux";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { useProjectAssignedServices } from "../../hooks/useProjects";
+
 const TaskPlannng = () => {
   const selectedProject = useSelectedProject();
   const dispatch = useDispatch();
@@ -35,8 +36,11 @@ const TaskPlannng = () => {
         ]}
       />
 
-      {/* 🔹 Service Dropdown */}
-      <div className="mb-3">
+      <div className="card">
+        <div className="card-body">
+          {/* Service Dropdown */}
+          <div className="mb-3 ms-2">
+            {assignedServices?.length > 1 ? (
               <select
                 id="serviceSelect"
                 className="form-select"
@@ -44,22 +48,42 @@ const TaskPlannng = () => {
                 onChange={handleServiceChange}
                 style={{ fontSize: "0.875rem", height: "35px", width: "190px" }}
               >
-          {servicesLoading && <option>Loading...</option>}
-          {assignedServices?.map((service) => (
+                {assignedServices.map((service) => (
                   <option key={service.id} value={service.id}>
                     {service.name}
                   </option>
                 ))}
               </select>
+            ) : (
+              <div
+                style={{
+                  fontSize: "0.875rem",
+                  height: "35px",
+                  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>
 
-      {/* 🔹 InfraPlanning only when project is selected */}
+
+          {/* Infra Planning Component */}
           {selectedProject ? (
             <InfraPlanning selectedService={selectedService} />
           ) : (
             <div className="text-center">Please Select Project</div>
           )}
         </div>
+      </div>
+    </div>
   );
 };