Changes in Employee list at pagination and at mobile view then scrollbar is shown.
This commit is contained in:
parent
20b508bebc
commit
dc4e48ad3b
@ -29,7 +29,7 @@ const TaskReportList = () => {
|
|||||||
const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK);
|
const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK);
|
||||||
const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK);
|
const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK);
|
||||||
|
|
||||||
const { service, openModal, closeModal,filter } = useDailyProgrssContext();
|
const { service, openModal, closeModal, filter } = useDailyProgrssContext();
|
||||||
const selectedProject = useSelectedProject();
|
const selectedProject = useSelectedProject();
|
||||||
const { projectNames } = useProjectName();
|
const { projectNames } = useProjectName();
|
||||||
|
|
||||||
@ -37,7 +37,7 @@ const TaskReportList = () => {
|
|||||||
selectedProject,
|
selectedProject,
|
||||||
ITEMS_PER_PAGE,
|
ITEMS_PER_PAGE,
|
||||||
currentPage,
|
currentPage,
|
||||||
service,filter
|
service, filter
|
||||||
);
|
);
|
||||||
|
|
||||||
const ProgrssReportColumn = [
|
const ProgrssReportColumn = [
|
||||||
@ -192,109 +192,114 @@ const TaskReportList = () => {
|
|||||||
if (isLoading) return <TaskReportListSkeleton />;
|
if (isLoading) return <TaskReportListSkeleton />;
|
||||||
if (isError) return <div>Loading....</div>;
|
if (isError) return <div>Loading....</div>;
|
||||||
return (
|
return (
|
||||||
<div className="mt-2 table-responsive text-nowrap">
|
<div>
|
||||||
<table className="table">
|
<div className="mt-2 table-responsive text-nowrap">
|
||||||
<thead>
|
<table className="table">
|
||||||
<tr>
|
<thead>
|
||||||
<th className="text-start">Activity</th>
|
|
||||||
<th>
|
|
||||||
<span>
|
|
||||||
Total Pending{" "}
|
|
||||||
<HoverPopup
|
|
||||||
title="Total Pending Task"
|
|
||||||
content={<p>This shows the total pending tasks for each activity on that date.</p>}
|
|
||||||
>
|
|
||||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
|
||||||
</HoverPopup>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
<span>
|
|
||||||
Reported/Planned{" "}
|
|
||||||
<HoverPopup
|
|
||||||
title="Reported and Planned Task"
|
|
||||||
content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
|
|
||||||
>
|
|
||||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
|
||||||
</HoverPopup>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th>Assign Date</th>
|
|
||||||
<th>Team</th>
|
|
||||||
<th className="text-center">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{groupedTasks.length === 0 && (
|
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={6} className="text-center align-middle" style={{ height: "200px", borderBottom: "none" }}>
|
<th className="text-start">Activity</th>
|
||||||
No reports available
|
<th>
|
||||||
</td>
|
<span>
|
||||||
|
Total Pending{" "}
|
||||||
|
<HoverPopup
|
||||||
|
title="Total Pending Task"
|
||||||
|
content={<p>This shows the total pending tasks for each activity on that date.</p>}
|
||||||
|
>
|
||||||
|
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
||||||
|
</HoverPopup>
|
||||||
|
</span>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<span>
|
||||||
|
Reported/Planned{" "}
|
||||||
|
<HoverPopup
|
||||||
|
title="Reported and Planned Task"
|
||||||
|
content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
|
||||||
|
>
|
||||||
|
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
||||||
|
</HoverPopup>
|
||||||
|
</span>
|
||||||
|
</th>
|
||||||
|
<th>Assign Date</th>
|
||||||
|
<th>Team</th>
|
||||||
|
<th className="text-center">Actions</th>
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
</thead>
|
||||||
|
<tbody>
|
||||||
{groupedTasks.map(({ date, tasks }) => (
|
{groupedTasks.length === 0 && (
|
||||||
<React.Fragment key={date}>
|
<tr>
|
||||||
<tr className="table-row-header text-start">
|
<td colSpan={6} className="text-center align-middle" style={{ height: "200px", borderBottom: "none" }}>
|
||||||
<td colSpan={6}>
|
No reports available
|
||||||
<strong>{formatUTCToLocalTime(date)}</strong>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{tasks.map((task, idx) => (
|
)}
|
||||||
<tr key={task.id || idx}>
|
|
||||||
<td className="flex-wrap text-start">
|
{groupedTasks.map(({ date, tasks }) => (
|
||||||
<div>
|
<React.Fragment key={date}>
|
||||||
{task.workItem.activityMaster?.activityName || "No Activity Name"}
|
<tr className="table-row-header text-start">
|
||||||
</div>
|
<td colSpan={6}>
|
||||||
<div className="text-sm py-2">
|
<strong>{formatUTCToLocalTime(date)}</strong>
|
||||||
{task.workItem.workArea?.floor?.building?.name} ›{" "}
|
|
||||||
{task.workItem.workArea?.floor?.floorName} ›{" "}
|
|
||||||
{task.workItem.workArea?.areaName}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{formatNumber(task.workItem.plannedWork)}
|
|
||||||
</td>
|
|
||||||
<td>{`${formatNumber(task.completedTask)} / ${formatNumber(task.plannedTask)}`}</td>
|
|
||||||
<td>{formatUTCToLocalTime(task.assignmentDate)}</td>
|
|
||||||
<td className="text-center">{renderTeamMembers(task, idx)}</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<div className="d-flex justify-content-end gap-2">
|
|
||||||
{ReportTaskRights && !task.reportedDate && (
|
|
||||||
<button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>
|
|
||||||
Report
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
|
|
||||||
<button
|
|
||||||
className="btn btn-xs btn-warning"
|
|
||||||
onClick={() => openModal("comments", { task, isActionAllow: true })}
|
|
||||||
>
|
|
||||||
QC
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
className="btn btn-xs btn-primary"
|
|
||||||
onClick={() => openModal("comments", { task, isActionAllow: false })}
|
|
||||||
>
|
|
||||||
Comment
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
{tasks.map((task, idx) => (
|
||||||
</React.Fragment>
|
<tr key={task.id || idx}>
|
||||||
))}
|
<td className="flex-wrap text-start">
|
||||||
</tbody>
|
<div>
|
||||||
</table>
|
{task.workItem.activityMaster?.activityName || "No Activity Name"}
|
||||||
{data?.data?.length > 0 && (
|
</div>
|
||||||
<Pagination
|
<div className="text-sm py-2">
|
||||||
currentPage={currentPage}
|
{task.workItem.workArea?.floor?.building?.name} ›{" "}
|
||||||
totalPages={data.totalPages}
|
{task.workItem.workArea?.floor?.floorName} ›{" "}
|
||||||
onPageChange={paginate}
|
{task.workItem.workArea?.areaName}
|
||||||
/>
|
</div>
|
||||||
)}
|
</td>
|
||||||
</div>
|
<td>
|
||||||
|
{formatNumber(task.workItem.plannedWork)}
|
||||||
|
</td>
|
||||||
|
<td>{`${formatNumber(task.completedTask)} / ${formatNumber(task.plannedTask)}`}</td>
|
||||||
|
<td>{formatUTCToLocalTime(task.assignmentDate)}</td>
|
||||||
|
<td className="text-center">{renderTeamMembers(task, idx)}</td>
|
||||||
|
<td className="text-center">
|
||||||
|
<div className="d-flex justify-content-end gap-2">
|
||||||
|
{ReportTaskRights && !task.reportedDate && (
|
||||||
|
<button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>
|
||||||
|
Report
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
|
||||||
|
<button
|
||||||
|
className="btn btn-xs btn-warning"
|
||||||
|
onClick={() => openModal("comments", { task, isActionAllow: true })}
|
||||||
|
>
|
||||||
|
QC
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
className="btn btn-xs btn-primary"
|
||||||
|
onClick={() => openModal("comments", { task, isActionAllow: false })}
|
||||||
|
>
|
||||||
|
Comment
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
data?.data?.length > 0 && (
|
||||||
|
<Pagination
|
||||||
|
currentPage={currentPage}
|
||||||
|
totalPages={data.totalPages}
|
||||||
|
onPageChange={paginate}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div >
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -160,8 +160,7 @@ const ListViewContact = ({ data, Pagination }) => {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<i
|
<i
|
||||||
className={`bx ${
|
className={`bx ${isPending && activeContact === row.id
|
||||||
isPending && activeContact === row.id
|
|
||||||
? "bx-loader-alt bx-spin"
|
? "bx-loader-alt bx-spin"
|
||||||
: "bx-recycle"
|
: "bx-recycle"
|
||||||
} me-1 text-primary cursor-pointer`}
|
} me-1 text-primary cursor-pointer`}
|
||||||
@ -188,13 +187,13 @@ const ListViewContact = ({ data, Pagination }) => {
|
|||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{Pagination && (
|
|
||||||
<div className="d-flex justify-content-start">
|
|
||||||
{Pagination}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{Pagination && (
|
||||||
|
<div className="d-flex justify-content-start">
|
||||||
|
{Pagination}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -67,9 +67,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
|||||||
key = item.status?.displayName || "Unknown";
|
key = item.status?.displayName || "Unknown";
|
||||||
break;
|
break;
|
||||||
case "submittedBy":
|
case "submittedBy":
|
||||||
key = `${item.createdBy?.firstName ?? ""} ${
|
key = `${item.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
|
||||||
item.createdBy?.lastName ?? ""
|
}`.trim();
|
||||||
}`.trim();
|
|
||||||
break;
|
break;
|
||||||
case "project":
|
case "project":
|
||||||
key = item.project?.name || "Unknown Project";
|
key = item.project?.name || "Unknown Project";
|
||||||
@ -110,9 +109,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
|||||||
label: "Submitted By",
|
label: "Submitted By",
|
||||||
align: "text-start",
|
align: "text-start",
|
||||||
getValue: (e) =>
|
getValue: (e) =>
|
||||||
`${e.createdBy?.firstName ?? ""} ${
|
`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
|
||||||
e.createdBy?.lastName ?? ""
|
}`.trim() || "N/A",
|
||||||
}`.trim() || "N/A",
|
|
||||||
customRender: (e) => (
|
customRender: (e) => (
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
<Avatar
|
<Avatar
|
||||||
@ -122,9 +120,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
|||||||
lastName={e.createdBy?.lastName}
|
lastName={e.createdBy?.lastName}
|
||||||
/>
|
/>
|
||||||
<span className="text-truncate">
|
<span className="text-truncate">
|
||||||
{`${e.createdBy?.firstName ?? ""} ${
|
{`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
|
||||||
e.createdBy?.lastName ?? ""
|
}`.trim() || "N/A"}
|
||||||
}`.trim() || "N/A"}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
@ -152,9 +149,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
|||||||
align: "text-center",
|
align: "text-center",
|
||||||
getValue: (e) => (
|
getValue: (e) => (
|
||||||
<span
|
<span
|
||||||
className={`badge bg-label-${
|
className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"
|
||||||
getColorNameFromHex(e?.status?.color) || "secondary"
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
{e.status?.name || "Unknown"}
|
{e.status?.name || "Unknown"}
|
||||||
</span>
|
</span>
|
||||||
@ -299,15 +295,15 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
|||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{data?.data?.length > 0 && (
|
|
||||||
<Pagination
|
|
||||||
currentPage={currentPage}
|
|
||||||
totalPages={data.totalPages}
|
|
||||||
onPageChange={paginate}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{data?.data?.length > 0 && (
|
||||||
|
<Pagination
|
||||||
|
currentPage={currentPage}
|
||||||
|
totalPages={data.totalPages}
|
||||||
|
onPageChange={paginate}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -650,16 +650,15 @@ const EmployeeList = () => {
|
|||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
{displayData?.length > 0 && (
|
</div>
|
||||||
|
{displayData?.length > 0 && (
|
||||||
<Pagination
|
<Pagination
|
||||||
currentPage={currentPage}
|
currentPage={currentPage}
|
||||||
totalPages={totalPages}
|
totalPages={totalPages}
|
||||||
onPageChange={paginate}
|
onPageChange={paginate}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="card">
|
<div className="card">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user