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,9 +2,8 @@ import React from "react";
 
 const EmployeeNav = ({ onPillClick, activePill }) => {
   return (
-    <div className="col-md-12">
+    <div className="nav-align-top ">
-      <div className="nav-align-top">
+      <ul className="nav nav-tabs">
-        <ul className="nav nav-pills flex-column flex-sm-row mb-6">
         <li className="nav-item">
           <a
             className={`nav-link ${activePill === "account" ? "active" : ""}`}
@@ -19,7 +18,9 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
         </li>
         <li className="nav-item">
           <a
-              className={`nav-link ${activePill === "attendance" ? "active" : ""}`}
+            className={`nav-link ${
+              activePill === "attendance" ? "active" : ""
+            }`}
             href="#"
             onClick={(e) => {
               e.preventDefault(); // Prevent page reload
@@ -31,7 +32,9 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
         </li>
         <li className="nav-item">
           <a
-              className={`nav-link ${activePill === "activities" ? "active" : ""}`}
+            className={`nav-link ${
+              activePill === "activities" ? "active" : ""
+            }`}
             href="#"
             onClick={(e) => {
               e.preventDefault(); // Prevent page reload
@@ -43,7 +46,6 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
         </li>
       </ul>
     </div>
-    </div>
   );
 };
 

src/components/Project/Infrastructure/Building.jsx

@@ -1,18 +1,25 @@
 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: "#f0f0f0", cursor: "pointer" }}
+          style={{
+            background: "#fafafa",
+            cursor: "pointer",
+            textAlign: "center!important",
+          }}
           onClick={() => toggleBuilding(building.id)}
         >
           <div className="row table-responsive">
-              <h6 style={{ marginBottom: "0px", fontSize:"14px" }}>
+            <h6 style={{ marginBottom: "0px", fontSize: "14px" }}>
               {building.name} &nbsp;
               {expandedBuildings.includes(building.id) ? (
                 <i className="bx bx-chevron-down"></i>
@@ -27,5 +34,5 @@ const Building = ( {building, toggleBuilding, expandedBuildings, getContent} ) =
       {expandedBuildings.includes(building.id) && getContent(building)}
     </React.Fragment>
   );
-  };
+};
-  export default Building
+export default Building;

src/components/Project/Infrastructure/Floor.jsx

@@ -1,20 +1,23 @@
 import React from "react";
 import WorkArea from "./WorkArea";
-const Floor = ( {floor, workAreas,forBuilding} ) =>
+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} />
+          <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>
+                <h6 className="infra-floor-lable">
                   <span>{floor.floorName} &nbsp;</span>
                 </h6>
               </div>
@@ -22,8 +25,7 @@ const Floor = ( {floor, workAreas,forBuilding} ) =>
           </td>
         </tr>
       )}
-        
     </React.Fragment>
   );
-  };
+};
-  export default Floor
+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">
+          <div className=" mb-0" role="alert">
-            <p>No floors have been added yet. Please add floors to start managing your building.</p>
+            <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} ) =>
+const WorkArea = ({ workArea, floor, forBuilding }) => {
-{
+  useEffect(() => {}, [workArea]);
-  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>
+              <div className="row">
-                <span>
+                <div className="col">
-                  {floor.floorName} - {workArea.areaName} &nbsp;
+                  {" "}
-                </span>
+                  <span className="fw-semibold">Floor:&nbsp;</span>{" "}
-              </h6>
+                  <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="infra-activity-table-header d-none d-md-table-cell">
-                  <th className="d-none d-md-table-cell">Completed</th>
+                    Planned
+                  </th>
+                  <th className="infra-activity-table-header d-none d-md-table-cell">
+                    Completed
+                  </th>
                   {/* ************************** */}
-                  <th>Progress</th>
+                  <th className="infra-activity-table-header">Progress</th>
-                  <th>Actions</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,16 +1,14 @@
 import React from "react";
-import {hasUserPermission} from "../../utils/authUtils";
+import { hasUserPermission } from "../../utils/authUtils";
-import {useHasUserPermission} from "../../hooks/useHasUserPermission";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { VIEW_PROJECT_INFRA} from "../../utils/constants";
+import { VIEW_PROJECT_INFRA } from "../../utils/constants";
 
-const ProjectNav = ( {onPillClick, activePill} ) =>
+const ProjectNav = ({ onPillClick, activePill }) => {
-{
+  const HasViewInfraStructure = useHasUserPermission(VIEW_PROJECT_INFRA);
-  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">
+      <ul className="nav nav-tabs ">
         <li className="nav-item">
           <a
             className={`nav-link ${activePill === "profile" ? "active" : ""}`}
@@ -35,7 +33,7 @@ const ProjectNav = ( {onPillClick, activePill} ) =>
             <i className="bx bx-group bx-sm me-1_5"></i> Teams
           </a>
         </li>
-          <li className={`nav-item ${!HasViewInfraStructure && 'd-none'} `}>
+        <li className={`nav-item ${!HasViewInfraStructure && "d-none"} `}>
           <a
             className={`nav-link ${activePill === "infra" ? "active" : ""}`}
             href="#"
@@ -77,9 +75,7 @@ const ProjectNav = ( {onPillClick, activePill} ) =>
         </li>
         <li className="nav-item">
           <a
-              className={`nav-link ${
+            className={`nav-link ${activePill === "directory" ? "active" : ""}`}
-                activePill === "directory" ? "active" : ""
-              }`}
             href="#"
             onClick={(e) => {
               e.preventDefault(); // Prevent page reload
@@ -91,7 +87,6 @@ const ProjectNav = ( {onPillClick, activePill} ) =>
         </li>
       </ul>
     </div>
-    </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 {
-import {useDispatch} from "react-redux";
+  useEmployeesByProjectAllocated,
-import {setProjectId} from "../../slices/localVariablesSlice";
+  useProjectDetails,
+} from "../../hooks/useProjects";
+import { useDispatch } from "react-redux";
+import { setProjectId } from "../../slices/localVariablesSlice";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
 
-
 const ProjectDetails = () => {
-  let {projectId} = useParams();
+  let { projectId } = useParams();
-  const {projects_Details,loading:projectLoading,error:ProjectError} = useProjectDetails(projectId)
+  const {
-  const dispatch = useDispatch()
+    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 ) =>
+        .then((response) => {
-          {
+          setProjectDetails(response.data);
-            setProjectDetails( response.data );
+          setProject(response.data);
-            setProject( response.data );
+          cacheData("projectInfo", { projectId, data: response.data });
-            cacheData("projectInfo", {projectId,data: response.data} );
+          setLoading(false);
-            setLoading(false)
         })
         .catch((error) => {
           console.error(error);
-            setError( "Failed to fetch data." );
+          setError("Failed to fetch data.");
-            setLoading(false)
+          setLoading(false);
         });
     } else {
-        setProjectDetails( project_cache.data );
+      setProjectDetails(project_cache.data);
-        setProject( project_cache.data );
+      setProject(project_cache.data);
-        setLoading(false)
+      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 */}
@@ -135,10 +133,10 @@ const ProjectDetails = () => {
   };
 
   useEffect(() => {
-    dispatch(setProjectId(projectId))
+    dispatch(setProjectId(projectId));
-    setProject( projects_Details )
+    setProject(projects_Details);
-    setProjectDetails(projects_Details)
+    setProjectDetails(projects_Details);
-  }, [projects_Details,projectId]);
+  }, [projects_Details, projectId]);
 
   return (
     <>
@@ -154,16 +152,18 @@ const ProjectDetails = () => {
 
         <div className="row">
           {projectLoading && <p>Loading....</p>}
-          {(!projectLoading && project) && <ProjectBanner project_data={project}  ></ProjectBanner>}
+          {!projectLoading && project && (
-        </div>
+            <ProjectBanner project_data={project}></ProjectBanner>
+          )}
 
-        <div className="row">
           <ProjectNav
             onPillClick={handlePillClick}
             activePill={activePill}
           ></ProjectNav>
         </div>
 
+        <div className="row"></div>
+
         {renderContent()}
       </div>
     </>