Merge branch 'vikas_78_infra_ui_enhancement' into Feature_Task_Management

public/assets/css/default.css

@@ -128,3 +128,14 @@
   text-align: center;
   margin-top: 1rem;
 }
+.infra-activity-table-header {
+  border-top: 0;
+  text-transform: capitalize !important;
+}
+
+.infra-activity-table-header-first {
+  border-top: 0;
+  text-transform: capitalize !important;
+  text-align: left;
+  padding-left: 60px;
+}

src/components/Employee/EmployeeNav.jsx

@@ -2,47 +2,49 @@ import React from "react";
 
 const EmployeeNav = ({ onPillClick, activePill }) => {
   return (
-    <div className="col-md-12">
-      <div className="nav-align-top">
-        <ul className="nav nav-pills flex-column flex-sm-row mb-6">
-          <li className="nav-item">
-            <a
-              className={`nav-link ${activePill === "account" ? "active" : ""}`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("account");
-              }}
-            >
-              <i className="bx bx-user bx-sm me-1_5"></i> Account
-            </a>
-          </li>
-          <li className="nav-item">
-            <a
-              className={`nav-link ${activePill === "attendance" ? "active" : ""}`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("attendance");
-              }}
-            >
-              <i className="bx bx-group bx-sm me-1_5"></i> Attendances
-            </a>
-          </li>
-          <li className="nav-item">
-            <a
-              className={`nav-link ${activePill === "activities" ? "active" : ""}`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("activities");
-              }}
-            >
-              <i className="bx bx-grid-alt bx-sm me-1_5"></i> Activities
-            </a>
-          </li>
-        </ul>
-      </div>
+    <div className="nav-align-top ">
+      <ul className="nav nav-tabs">
+        <li className="nav-item">
+          <a
+            className={`nav-link ${activePill === "account" ? "active" : ""}`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("account");
+            }}
+          >
+            <i className="bx bx-user bx-sm me-1_5"></i> Account
+          </a>
+        </li>
+        <li className="nav-item">
+          <a
+            className={`nav-link ${
+              activePill === "attendance" ? "active" : ""
+            }`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("attendance");
+            }}
+          >
+            <i className="bx bx-group bx-sm me-1_5"></i> Attendances
+          </a>
+        </li>
+        <li className="nav-item">
+          <a
+            className={`nav-link ${
+              activePill === "activities" ? "active" : ""
+            }`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("activities");
+            }}
+          >
+            <i className="bx bx-grid-alt bx-sm me-1_5"></i> Activities
+          </a>
+        </li>
+      </ul>
     </div>
   );
 };

src/components/Project/Infrastructure/Building.jsx

@@ -1,31 +1,38 @@
 import React from "react";
-const Building = ( {building, toggleBuilding, expandedBuildings, getContent} ) =>
-{
+const Building = ({
+  building,
+  toggleBuilding,
+  expandedBuildings,
+  getContent,
+}) => {
+  return (
+    <React.Fragment key={building.id}>
+      <tr className="overflow-auto">
+        <td
+          colSpan="4"
+          className="text-start"
+          style={{
+            background: "#fafafa",
+            cursor: "pointer",
+            textAlign: "center!important",
+          }}
+          onClick={() => toggleBuilding(building.id)}
+        >
+          <div className="row table-responsive">
+            <h6 style={{ marginBottom: "0px", fontSize: "14px" }}>
+              {building.name} &nbsp;
+              {expandedBuildings.includes(building.id) ? (
+                <i className="bx bx-chevron-down"></i>
+              ) : (
+                <i className="bx bx-chevron-right"></i>
+              )}
+            </h6>
+          </div>
+        </td>
+      </tr>
 
-    return (
-      <React.Fragment key={building.id}>
-        <tr className="overflow-auto">
-          <td
-            colSpan="4"
-            className="text-start"
-            style={{ background: "#f0f0f0", cursor: "pointer" }}
-            onClick={() => toggleBuilding(building.id)}
-          >
-            <div className="row table-responsive">
-              <h6 style={{ marginBottom: "0px", fontSize:"14px" }}>
-                {building.name} &nbsp;
-                {expandedBuildings.includes(building.id) ? (
-                  <i className="bx bx-chevron-down"></i>
-                ) : (
-                  <i className="bx bx-chevron-right"></i>
-                )}
-              </h6>
-            </div>
-          </td>
-        </tr>
-  
-        {expandedBuildings.includes(building.id) && getContent(building)}
-      </React.Fragment>
-    );
-  };
-  export default Building
+      {expandedBuildings.includes(building.id) && getContent(building)}
+    </React.Fragment>
+  );
+};
+export default Building;

src/components/Project/Infrastructure/Floor.jsx

@@ -1,29 +1,31 @@
 import React from "react";
 import WorkArea from "./WorkArea";
-const Floor = ( {floor, workAreas,forBuilding} ) =>
-{
-
-    return (
-      <React.Fragment key={floor.id}>
-        {workAreas && workAreas.length > 0 ? (
-          workAreas.map((workArea) => (
-            <WorkArea forBuilding={forBuilding} key={workArea.id} workArea={workArea} floor={floor} />
-          ))
-        ) : (
-          <tr>
-            <td colSpan="4" className="text-start">
-              <div className="row ps-2">
-                <div className="col-6">
-                  <h6>
-                    <span>{floor.floorName} &nbsp;</span>
-                  </h6>
-                </div>
+const Floor = ({ floor, workAreas, forBuilding }) => {
+  return (
+    <React.Fragment key={floor.id}>
+      {workAreas && workAreas.length > 0 ? (
+        workAreas.map((workArea) => (
+          <WorkArea
+            forBuilding={forBuilding}
+            key={workArea.id}
+            workArea={workArea}
+            floor={floor}
+          />
+        ))
+      ) : (
+        <tr>
+          <td colSpan="4" className="text-start">
+            <div className="row ps-2">
+              <div className="col-6">
+                <h6 className="infra-floor-lable">
+                  <span>{floor.floorName} &nbsp;</span>
+                </h6>
               </div>
-            </td>
-          </tr>
-        )}
-        
-      </React.Fragment>
-    );
-  };
-  export default Floor
+            </div>
+          </td>
+        </tr>
+      )}
+    </React.Fragment>
+  );
+};
+export default Floor;

src/components/Project/Infrastructure/InfraTable.jsx

@@ -73,7 +73,6 @@ const InfraTable = ({ buildings }) => {
     }
   };
 
-
   const handleClearComplete = () => {
     setClearTrigger(false);
   };
@@ -91,8 +90,11 @@ const InfraTable = ({ buildings }) => {
     ) : (
       <tr>
         <td colSpan="4">
-          <div className="alert alert-warning text-center mb-0" role="alert">
-            <p>No floors have been added yet. Please add floors to start managing your building.</p>
+          <div className=" mb-0" role="alert">
+            <p className="fw-semibold">
+              No floors have been added yet. Start by adding floors to manage
+              this building.
+            </p>
             <button
               type="button"
               className="btn btn-xs btn-primary"
@@ -111,7 +113,7 @@ const InfraTable = ({ buildings }) => {
   }, [buildings]);
 
   return (
-    <div >
+    <div>
       {projectBuilding && projectBuilding.length > 0 && (
         <table className="table table-bordered">
           <tbody>
@@ -138,7 +140,7 @@ const InfraTable = ({ buildings }) => {
         >
           <FloorModel
             project={{
-              buildings: [selectedBuilding]
+              buildings: [selectedBuilding],
             }}
             onClose={() => setShowFloorModal(false)}
             onSubmit={handleFloorSubmit}
@@ -146,7 +148,6 @@ const InfraTable = ({ buildings }) => {
           />
         </div>
       )}
-
     </div>
   );
 };

src/components/Project/Infrastructure/WorkArea.jsx

@@ -1,22 +1,25 @@
-import React,{useEffect} from "react";
+import React, { useEffect } from "react";
 import WorkItem from "./WorkItem";
 
-const WorkArea = ( {workArea, floor, forBuilding} ) =>
-{
-  useEffect(() => {
-
-  }, [workArea]); 
+const WorkArea = ({ workArea, floor, forBuilding }) => {
+  useEffect(() => {}, [workArea]);
   return (
     <React.Fragment key={workArea.id}>
       <tr>
         <td colSpan="4" className="text-start table-cell">
           <div className="row ps-2">
             <div className="col-6">
-              <h6>
-                <span>
-                  {floor.floorName} - {workArea.areaName} &nbsp;
-                </span>
-              </h6>
+              <div className="row">
+                <div className="col">
+                  {" "}
+                  <span className="fw-semibold">Floor:&nbsp;</span>{" "}
+                  <span class="fw-normal">{floor.floorName}</span>
+                </div>
+                <div className="col">
+                  <span className="ms-10 fw-semibold">Work Area:&nbsp;</span>{" "}
+                  <span class=" fw-normal">{workArea.areaName}</span>
+                </div>
+              </div>
             </div>
           </div>
         </td>
@@ -28,21 +31,35 @@ const WorkArea = ( {workArea, floor, forBuilding} ) =>
             <table className="table mx-1">
               <thead>
                 <tr>
-                  <th>Activity</th>
+                  <th className="infra-activity-table-header-first">
+                    Activity
+                  </th>
                   {/* for mobile view */}
-                  <th className="d-sm-none d-sm-table-cell">Status</th>
+                  <th className="infra-activity-table-header d-sm-none d-sm-table-cell">
+                    Status
+                  </th>
                   {/* for greather than mobile view ************* */}
-                  <th className="d-none d-md-table-cell">Planned</th>
-                  <th className="d-none d-md-table-cell">Completed</th>
+                  <th className="infra-activity-table-header d-none d-md-table-cell">
+                    Planned
+                  </th>
+                  <th className="infra-activity-table-header d-none d-md-table-cell">
+                    Completed
+                  </th>
                   {/* ************************** */}
-                  <th>Progress</th>
-                  <th>Actions</th>
+                  <th className="infra-activity-table-header">Progress</th>
+                  <th className="infra-activity-table-header">Actions</th>
                 </tr>
               </thead>
               <tbody className="table-border-bottom-0">
                 {workArea?.workItems && workArea.workItems.length > 0 ? (
                   workArea.workItems.map((workItem) => (
-                    <WorkItem key={workItem.workItemId} workItem={workItem} forBuilding={forBuilding} forFloor={floor} forWorkArea={workArea} />
+                    <WorkItem
+                      key={workItem.workItemId}
+                      workItem={workItem}
+                      forBuilding={forBuilding}
+                      forFloor={floor}
+                      forWorkArea={workArea}
+                    />
                   ))
                 ) : (
                   <tr>

src/components/Project/Infrastructure/WorkItem.jsx

@@ -20,8 +20,6 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
     setItemName("");
   };
 
-
-
   useEffect(() => {
     setNewWorkItem(workItem);
   }, [workItem]); // This hook will run whenever the workItem prop changes
@@ -33,8 +31,6 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
     workItem,
   };
 
-  
-
   const hasWorkItem = NewWorkItem && NewWorkItem;
 
   return (
@@ -51,7 +47,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
       <tr>
         <td className="text-start table-cell-small">
           <i className="bx bx-right-arrow-alt"></i>
-          <span className="fw-medium">
+          <span className="fw-light">
             {hasWorkItem
               ? NewWorkItem?.workItem?.activityMaster?.activityName ||
                 workItem.activityMaster?.activityName
@@ -91,7 +87,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
                   NewWorkItem?.workItem?.completedWork ||
                     workItem?.completedWork
                 ),
-                height: "10px",
+                height: "5px",
               }}
               aria-valuenow={
                 hasWorkItem
@@ -120,7 +116,9 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
                 data-bs-target="#project-modal"
                 onClick={openModal}
               >
-                <span className="badge  badge-md bg-label-primary me-1">Assign</span>
+                <span className="badge  badge-md bg-label-primary me-1">
+                  Assign
+                </span>
               </button>
             )}
             <button

src/components/Project/ProjectNav.jsx

@@ -1,53 +1,51 @@
 import React from "react";
-import {hasUserPermission} from "../../utils/authUtils";
-import {useHasUserPermission} from "../../hooks/useHasUserPermission";
-import { VIEW_PROJECT_INFRA} from "../../utils/constants";
+import { hasUserPermission } from "../../utils/authUtils";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { VIEW_PROJECT_INFRA } from "../../utils/constants";
+
+const ProjectNav = ({ onPillClick, activePill }) => {
+  const HasViewInfraStructure = useHasUserPermission(VIEW_PROJECT_INFRA);
 
-const ProjectNav = ( {onPillClick, activePill} ) =>
-{
-  const HasViewInfraStructure = useHasUserPermission( VIEW_PROJECT_INFRA )
-  
   return (
-    <div className="col-md-12">
-      <div className="nav-align-top">
-        <ul className="nav nav-pills flex-column flex-sm-row mb-6">
-          <li className="nav-item">
-            <a
-              className={`nav-link ${activePill === "profile" ? "active" : ""}`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("profile");
-              }}
-            >
-              <i className="bx bx-user bx-sm me-1_5"></i> Profile
-            </a>
-          </li>
-          <li className="nav-item">
-            <a
-              className={`nav-link ${activePill === "teams" ? "active" : ""}`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("teams");
-              }}
-            >
-              <i className="bx bx-group bx-sm me-1_5"></i> Teams
-            </a>
-          </li>
-          <li className={`nav-item ${!HasViewInfraStructure && 'd-none'} `}>
-            <a
-              className={`nav-link ${activePill === "infra" ? "active" : ""}`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("infra");
-              }}
-            >
-              <i className="bx bx-grid-alt bx-sm me-1_5"></i> Infrastructure
-            </a>
-          </li>
-          {/* <li className="nav-item">
+    <div className="nav-align-top">
+      <ul className="nav nav-tabs ">
+        <li className="nav-item">
+          <a
+            className={`nav-link ${activePill === "profile" ? "active" : ""}`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("profile");
+            }}
+          >
+            <i className="bx bx-user bx-sm me-1_5"></i> Profile
+          </a>
+        </li>
+        <li className="nav-item">
+          <a
+            className={`nav-link ${activePill === "teams" ? "active" : ""}`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("teams");
+            }}
+          >
+            <i className="bx bx-group bx-sm me-1_5"></i> Teams
+          </a>
+        </li>
+        <li className={`nav-item ${!HasViewInfraStructure && "d-none"} `}>
+          <a
+            className={`nav-link ${activePill === "infra" ? "active" : ""}`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("infra");
+            }}
+          >
+            <i className="bx bx-grid-alt bx-sm me-1_5"></i> Infrastructure
+          </a>
+        </li>
+        {/* <li className="nav-item">
             <a
               className={`nav-link ${
                 activePill === "workplan" ? "active" : ""
@@ -61,36 +59,33 @@ const ProjectNav = ( {onPillClick, activePill} ) =>
               <i className="bx bx-link bx-sm me-1_5"></i> Work Plan
             </a>
           </li> */}
-          <li className="nav-item">
-            <a
-              className={`nav-link ${
-                activePill === "imagegallary" ? "active" : ""
-              }`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("imagegallary");
-              }}
-            >
-              <i className="bx bx-link bx-sm me-1_5"></i> Image Gallary
-            </a>
-          </li>
-          <li className="nav-item">
-            <a
-              className={`nav-link ${
-                activePill === "directory" ? "active" : ""
-              }`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("directory");
-              }}
-            >
-              <i className="bx bx-link bx-sm me-1_5"></i> Directory
-            </a>
-          </li>
-        </ul>
-      </div>
+        <li className="nav-item">
+          <a
+            className={`nav-link ${
+              activePill === "imagegallary" ? "active" : ""
+            }`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("imagegallary");
+            }}
+          >
+            <i className="bx bx-link bx-sm me-1_5"></i> Image Gallary
+          </a>
+        </li>
+        <li className="nav-item">
+          <a
+            className={`nav-link ${activePill === "directory" ? "active" : ""}`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("directory");
+            }}
+          >
+            <i className="bx bx-link bx-sm me-1_5"></i> Directory
+          </a>
+        </li>
+      </ul>
     </div>
   );
 };

src/components/common/Loader.jsx

@@ -3,12 +3,13 @@ import React from "react";
 const Loader = () => {
   return (
     <div className="demo-inline-spacing">
-      <div className="spinner-grow" role="status">
-        <span className="visually-hidden">Loading...</span>
-      </div>
       <div className="spinner-grow text-primary" role="status">
         <span className="visually-hidden">Loading...</span>
       </div>
+      {/* <div className="spinner-grow" role="status">
+        <span className="visually-hidden">Loading...</span>
+      </div>
+    
       <div className="spinner-grow text-secondary" role="status">
         <span className="visually-hidden">Loading...</span>
       </div>
@@ -23,13 +24,13 @@ const Loader = () => {
       </div>
       <div className="spinner-grow text-info" role="status">
         <span className="visually-hidden">Loading...</span>
-      </div>
+      </div> */}
       <div className="spinner-grow text-light" role="status">
         <span className="visually-hidden">Loading...</span>
       </div>
-      <div className="spinner-grow text-dark" role="status">
+      {/* <div className="spinner-grow text-dark" role="status">
         <span className="visually-hidden">Loading...</span>
-      </div>
+      </div> */}
     </div>
   );
 };

src/pages/project/ProjectDetails.jsx

@@ -15,52 +15,51 @@ import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import ProjectRepository from "../../repositories/ProjectRepository";
 import { ActivityeRepository } from "../../repositories/MastersRepository";
 import "./ProjectDetails.css";
-import {useEmployeesByProjectAllocated, useProjectDetails} from "../../hooks/useProjects";
-import {useDispatch} from "react-redux";
-import {setProjectId} from "../../slices/localVariablesSlice";
+import {
+  useEmployeesByProjectAllocated,
+  useProjectDetails,
+} from "../../hooks/useProjects";
+import { useDispatch } from "react-redux";
+import { setProjectId } from "../../slices/localVariablesSlice";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
 
-
 const ProjectDetails = () => {
-  let {projectId} = useParams();
-  const {projects_Details,loading:projectLoading,error:ProjectError} = useProjectDetails(projectId)
-  const dispatch = useDispatch()
+  let { projectId } = useParams();
+  const {
+    projects_Details,
+    loading: projectLoading,
+    error: ProjectError,
+  } = useProjectDetails(projectId);
+  const dispatch = useDispatch();
   const [project, setProject] = useState(null);
-  const [ projectDetails, setProjectDetails ] = useState( null );
+  const [projectDetails, setProjectDetails] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [ error, setError ] = useState( "" );
-  
-
+  const [error, setError] = useState("");
 
   const fetchData = async () => {
-    
-      const project_cache = getCachedData("projectInfo");
-      if (!project_cache || project_cache?.projectId !== projectId) {
-        ProjectRepository.getProjectByprojectId(projectId)
-          .then( ( response ) =>
-          {
-            setProjectDetails( response.data );
-            setProject( response.data );
-            cacheData("projectInfo", {projectId,data: response.data} );
-            setLoading(false)
-          })
-          .catch((error) => {
-            console.error(error);
-            setError( "Failed to fetch data." );
-            setLoading(false)
-          });
-      } else {
-        setProjectDetails( project_cache.data );
-        setProject( project_cache.data );
-        setLoading(false)
-      } 
-    
+    const project_cache = getCachedData("projectInfo");
+    if (!project_cache || project_cache?.projectId !== projectId) {
+      ProjectRepository.getProjectByprojectId(projectId)
+        .then((response) => {
+          setProjectDetails(response.data);
+          setProject(response.data);
+          cacheData("projectInfo", { projectId, data: response.data });
+          setLoading(false);
+        })
+        .catch((error) => {
+          console.error(error);
+          setError("Failed to fetch data.");
+          setLoading(false);
+        });
+    } else {
+      setProjectDetails(project_cache.data);
+      setProject(project_cache.data);
+      setLoading(false);
+    }
   };
 
-
   const [activePill, setActivePill] = useState("profile");
 
- 
   const handlePillClick = (pillKey) => {
     setActivePill(pillKey);
   };
@@ -69,19 +68,18 @@ const ProjectDetails = () => {
     fetchData();
   };
 
- 
   const renderContent = () => {
     if (projectLoading) return <Loader></Loader>;
     switch (activePill) {
       case "profile": {
         return (
           <div className="row">
-            <div className="col-xl-4 col-lg-5 col-md-5">
+            <div className="col-xl-4 col-lg-5 col-md-5 mt-5">
               {/* About User */}
               <AboutProject data={projectDetails}></AboutProject>
               {/* About User */}
             </div>
-            <div className="col-xl-4 col-lg-5 col-md-5">
+            <div className="col-xl-4 col-lg-5 col-md-5  mt-5">
               {/* Profile Overview */}
               <ProjectOverview project={projectId} />
               {/* Profile Overview */}
@@ -128,17 +126,17 @@ const ProjectDetails = () => {
           </div>
         );
       }
-    
+
       default:
-        return  <ComingSoonPage></ComingSoonPage>;
+        return <ComingSoonPage></ComingSoonPage>;
     }
   };
 
   useEffect(() => {
-    dispatch(setProjectId(projectId))
-    setProject( projects_Details )
-    setProjectDetails(projects_Details)
-  }, [projects_Details,projectId]);
+    dispatch(setProjectId(projectId));
+    setProject(projects_Details);
+    setProjectDetails(projects_Details);
+  }, [projects_Details, projectId]);
 
   return (
     <>
@@ -154,16 +152,18 @@ const ProjectDetails = () => {
 
         <div className="row">
           {projectLoading && <p>Loading....</p>}
-          {(!projectLoading && project) && <ProjectBanner project_data={project}  ></ProjectBanner>}
-        </div>
-      
-        <div className="row">
+          {!projectLoading && project && (
+            <ProjectBanner project_data={project}></ProjectBanner>
+          )}
+
           <ProjectNav
             onPillClick={handlePillClick}
             activePill={activePill}
           ></ProjectNav>
         </div>
 
+        <div className="row"></div>
+
         {renderContent()}
       </div>
     </>