From 0fc43bb55b8e68cc3bb99bbab18b55aa1cd9cbd1 Mon Sep 17 00:00:00 2001
From: Vikas Nale <vikas@marcoaiot.com>
Date: Thu, 8 May 2025 16:45:33 +0530
Subject: [PATCH] minor gui changes

---
 public/assets/css/default.css         | 10 +++
 src/pages/employee/EmployeeList.jsx   | 97 +++++++++++++++------------
 src/pages/project/ProjectListView.jsx | 19 +++---
 3 files changed, 73 insertions(+), 53 deletions(-)

diff --git a/public/assets/css/default.css b/public/assets/css/default.css
index 42852b61..54897c4f 100644
--- a/public/assets/css/default.css
+++ b/public/assets/css/default.css
@@ -179,3 +179,13 @@
 .table-row-header {
   background-color: #efefef;
 }
+
+.table > thead {
+  vertical-align: middle;
+  height: 2.2rem;
+}
+
+.table > thead > tr :first-child {
+  text-align: left;
+  padding-left: 50px !important;
+}
diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 646a98a9..788313fd 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -29,7 +29,7 @@ const EmployeeList = () => {
   const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES);
 
   const { employees, loading, setLoading, error, recallEmployeeData } =
-    useEmployeesAllOrByProjectId(selectedProject,showInactive);
+    useEmployeesAllOrByProjectId(selectedProject, showInactive);
   const [projectsList, setProjectsList] = useState(projects || []);
 
   const [employeeList, setEmployeeList] = useState([]);
@@ -46,16 +46,16 @@ const EmployeeList = () => {
   const handleSearch = (e) => {
     const value = e.target.value.toLowerCase();
     setSearchText(value);
-  
+
     if (!employeeList.length) return;
-  
+
     const results = employeeList.filter((item) => {
       const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
       return fullName.includes(value);
     });
-  
+
     setFilteredData(results);
-  }; 
+  };
 
   useEffect(() => {
     setCurrentPage(1);
@@ -160,7 +160,6 @@ const EmployeeList = () => {
     recallEmployeeData(e.target.checked);
   };
 
-
   return (
     <>
       {isCreateModalOpen && (
@@ -325,22 +324,24 @@ const EmployeeList = () => {
                   </div>
                 </div>
                 <div className="text-end mb-2">
-                  <label class="switch switch-primary">
+                  <label className="switch switch-primary">
                     <input
                       type="checkbox"
-                      class="switch-input"
+                      className="switch-input"
                       checked={showInactive}
                       onChange={handleToggle}
                     />
-                    <span class="switch-toggle-slider">
-                      <span class="switch-on">
-                        <i class="icon-base bx bx-check"></i>
+                    <span className="switch-toggle-slider">
+                      <span className="switch-on">
+                        <i className="icon-base bx bx-check"></i>
                       </span>
-                      <span class="switch-off">
-                        <i class="icon-base bx bx-x"></i>
+                      <span className="switch-off">
+                        <i className="icon-base bx bx-x"></i>
                       </span>
                     </span>
-                    <span class="switch-label">Show Inactive Employees</span>
+                    <span className="switch-label">
+                      Show Inactive Employees
+                    </span>
                   </label>
                 </div>
                 <table
@@ -518,19 +519,21 @@ const EmployeeList = () => {
                             {moment(item.joiningDate).format("DD-MMM-YYYY")}
                           </td>
                           <td>
-                            {showInactive ? <span
-                              className="badge bg-label-danger"
-                              text-capitalized=""
-                            >
-                              Inactive
-                            </span>
-                            :
-                            <span
-                              className="badge bg-label-success"
-                              text-capitalized=""
-                            >
-                              Active
-                            </span>}
+                            {showInactive ? (
+                              <span
+                                className="badge bg-label-danger"
+                                text-capitalized=""
+                              >
+                                Inactive
+                              </span>
+                            ) : (
+                              <span
+                                className="badge bg-label-success"
+                                text-capitalized=""
+                              >
+                                Active
+                              </span>
+                            )}
                           </td>
                           {ManageEmployee && (
                             <td className="text-end">
@@ -556,23 +559,29 @@ const EmployeeList = () => {
                                   >
                                     <i className="bx bx-edit bx-sm"></i> Edit
                                   </Link>
-                                  {!item.isSystem && (<><button
-                                    className="dropdown-item py-1"
-                                    onClick={() => suspendEmployee(item.id)}
-                                  >
-                                    <i className="bx bx-task-x bx-sm"></i>{" "}
-                                    Suspend
-                                  </button>
-                                  <button
-                                    className="dropdown-item py-1"
-                                    type="button"
-                                    data-bs-toggle="modal"
-                                    data-bs-target="#managerole-modal"
-                                    onClick={() => handleConfigData(item.id)}
-                                  >
-                                    <i className="bx bx-cog bx-sm"></i> Manage
-                                    Role
-                                  </button></>)}
+                                  {!item.isSystem && (
+                                    <>
+                                      <button
+                                        className="dropdown-item py-1"
+                                        onClick={() => suspendEmployee(item.id)}
+                                      >
+                                        <i className="bx bx-task-x bx-sm"></i>{" "}
+                                        Suspend
+                                      </button>
+                                      <button
+                                        className="dropdown-item py-1"
+                                        type="button"
+                                        data-bs-toggle="modal"
+                                        data-bs-target="#managerole-modal"
+                                        onClick={() =>
+                                          handleConfigData(item.id)
+                                        }
+                                      >
+                                        <i className="bx bx-cog bx-sm"></i>{" "}
+                                        Manage Role
+                                      </button>
+                                    </>
+                                  )}
                                 </div>
                               </div>
                             </td>
diff --git a/src/pages/project/ProjectListView.jsx b/src/pages/project/ProjectListView.jsx
index 21670a7e..98698760 100644
--- a/src/pages/project/ProjectListView.jsx
+++ b/src/pages/project/ProjectListView.jsx
@@ -43,7 +43,6 @@ const ProjectListView = ({ projectData }) => {
 
   const handleClose = () => setShowModal(false);
 
-
   const handleViewProject = () => {
     navigate(`/projects/${projectData.id}`);
   };
@@ -58,7 +57,7 @@ const ProjectListView = ({ projectData }) => {
             building: projectDetails?.building,
           };
 
-          setProjectInfo( updatedProjectData );
+          setProjectInfo(updatedProjectData);
 
           if (getCachedData(`projectinfo-${projectInfo.id}`)) {
             cacheData(`projectinfo-${projectInfo.id}`, updatedProjectData);
@@ -68,8 +67,10 @@ const ProjectListView = ({ projectData }) => {
           if (projects_list) {
             const updatedProjectsList = projects_list.map((project) =>
               project.id === projectInfo.id
-                ? { ...project, ...response.data,
-                  //  tenant: project.tenant 
+                ? {
+                    ...project,
+                    ...response.data,
+                    //  tenant: project.tenant
                   }
                 : project
             );
@@ -111,19 +112,19 @@ const ProjectListView = ({ projectData }) => {
           </strong>
         </td>
         <td className="text-start small">{projectInfo.contactPerson}</td>
-        <td className="small text-start">
+        <td className="small text-center">
           <small>
             {projectInfo.startDate
               ? moment(projectInfo.startDate).format("DD-MMM-YYYY")
               : "NA"}
           </small>
         </td>
-        <td className="mx-2 text-start small">
+        <td className="mx-2 text-center small">
           {projectInfo.endDate
             ? moment(projectInfo.endDate).format("DD-MMM-YYYY")
             : "NA"}
         </td>
-        <td className="mx-2 text-start small">{projectInfo.plannedWork}</td>
+        <td className="mx-2 text-center small">{projectInfo.plannedWork}</td>
         <td className="py-6 mx-2 text-start small align-items-center">
           <ProgressBar
             plannedWork={projectInfo.plannedWork}
@@ -133,7 +134,7 @@ const ProjectListView = ({ projectData }) => {
           />
         </td>
 
-        <td className="mx-6">
+        <td className="mx-3">
           <p className="mb-0">
             <span
               className={`badge ${getProjectStatusColor(
@@ -145,7 +146,7 @@ const ProjectListView = ({ projectData }) => {
           </p>
         </td>
 
-        <td className={`mx-2 ${ManageProject ? "d-sm-table-cell":"d-none"}`}>
+        <td className={`mx-2 ${ManageProject ? "d-sm-table-cell" : "d-none"}`}>
           <div className="dropdown z-2">
             <button
               type="button"