minor gui changes

This commit is contained in:
Vikas Nale 2025-05-08 16:45:33 +05:30
parent 284d36e5ac
commit 0fc43bb55b
3 changed files with 73 additions and 53 deletions

View File

@ -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;
}

View File

@ -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>

View File

@ -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"