admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Adding Tabs in attendancepage just like View Jobs.

Browse Source
This commit is contained in:
Kartik Sharma 2025-12-04 16:03:55 +05:30 committed by pramod.mahajan
parent 6a0feacb1b
commit 65043732d3
1 changed files with 84 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
src/pages/Activities/AttendancePage.jsx
View File

@ -59,7 +59,7 @@ const AttendancePage = () => {
if (selectedProject == null) {
dispatch(setProjectId(projectNames[0]?.id));
}
dispatch(setOrganization(appliedFilters?.selectedOrganization))
dispatch(setOrganization(appliedFilters?.selectedOrganization));
}, [appliedFilters?.selectedOrganization]);
const getRole = (roleId) => {
@ -94,6 +94,49 @@ const AttendancePage = () => {
setSearchTerm(""); // Reset search term when tab changes
};
// --- START: Tab Configuration Array
const tabsData = [
{
id: "all",
title: "Today's",
content: (
<Attendance
handleModalData={handleModalData}
getRole={getRole}
searchTerm={searchTerm}
organizationId={appliedFilters.selectedOrganization}
/>
),
},
{
id: "logs",
title: "Logs",
content: (
<AttendanceLog
handleModalData={handleModalData}
searchTerm={searchTerm}
organizationId={appliedFilters.selectedOrganization}
/>
),
},
// Conditionally include Regularization tab based on permission
...(DoRegularized
? [
{
id: "regularization",
title: "Regularization",
content: (
<Regularization
searchTerm={searchTerm}
organizationId={appliedFilters.selectedOrganization}
/>
),
},
]
: []),
];
// --- END: Tab Configuration Array
return (
<>
{isCreateModalOpen && modelConfig && (
@ -114,9 +157,7 @@ const AttendancePage = () => {
{modelConfig?.action === 6 && (
<AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
)}
{modelConfig?.action === 7 && (
<Confirmation closeModal={closeModal} />
)}
{modelConfig?.action === 7 && <Confirmation closeModal={closeModal} />}
</GlobalModel>
)}
@ -129,57 +170,39 @@ const AttendancePage = () => {
></Breadcrumb>
<div className="nav-align-top nav-tabs-shadow ">
{/* Tabs */}
<div className="nav-align-top nav-tabs-shadow bg-white border-bottom pt-5">
{/* Tabs header with search and filter */}
<div className="nav-align-top nav-tabs-shadow bg-white border-bottom pt-5">
<div className="row align-items-center g-0 mb-3 mb-md-0 mx-1 mx-sm-5">
{/* Tabs */}
<div className="col-12 col-md">
{/* Tabs Buttons */}
<div className="col-12 col-md mt-1">
<ul className="nav nav-tabs" role="tablist">
<li className="nav-item">
<button
type="button"
className={`nav-link ${
activeTab === "all" ? "active" : ""
} fs-6`}
onClick={() => handleTabChange("all")}
data-bs-toggle="tab"
data-bs-target="#navs-top-home"
{tabsData.map((tab) => (
<li
className={`nav-item ${
tab.id === "regularization" && !DoRegularized
? "d-none"
: ""
}`} // Keep the d-none logic for regularization, although it's filtered above
key={tab.id}
>
Today's
</button>
</li>
<li className="nav-item">
<button
type="button"
className={`nav-link ${
activeTab === "logs" ? "active" : ""
} fs-6`}
onClick={() => handleTabChange("logs")}
data-bs-toggle="tab"
data-bs-target="#navs-top-profile"
>
Logs
</button>
</li>
<li className={`nav-item ${!DoRegularized ? "d-none" : ""}`}>
<button
type="button"
className={`nav-link ${
activeTab === "regularization" ? "active" : ""
} fs-6`}
onClick={() => handleTabChange("regularization")}
data-bs-toggle="tab"
data-bs-target="#navs-top-messages"
>
Regularization
</button>
</li>
<button
type="button"
className={`nav-link ${
activeTab === tab.id ? "active" : ""
} fs-6`}
onClick={() => handleTabChange(tab.id)}
data-bs-toggle="tab"
data-bs-target={`#navs-top-${tab.id}`}
>
{tab.title}
</button>
</li>
))}
</ul>
</div>
{/* Search + Organization filter */}
<div className="col-12 col-md-auto pb-2 m-0 mt-md-0 ms-md-auto nav-tabs">
<div className="col-12 col-md-auto mb-2 mt-md-0 ms-md-auto nav">
<div className="row g-2">
<div className="col-12 col-sm-6">
<select
@ -212,40 +235,25 @@ const AttendancePage = () => {
</div>
</div>
</div>
</div>
</div>
{/* Tab Content */}
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3 pb-10">
{selectedProject ? (
<>
{activeTab === "all" && (
<div className="tab-pane fade show active py-0 mx-2">
<Attendance
handleModalData={handleModalData}
getRole={getRole}
searchTerm={searchTerm}
organizationId={appliedFilters.selectedOrganization}
/>
{tabsData.map((tab) => (
<div
key={tab.id}
className={`tab-pane fade ${
activeTab === tab.id ? "show active" : ""
} py-0 ${tab.id === "all" ? "mx-2" : "p-3"}`}
id={`navs-top-${tab.id}`}
role="tabpanel"
>
{activeTab === tab.id && tab.content}
</div>
)}
{activeTab === "logs" && (
<div className="tab-pane fade p-3 show active py-0">
<AttendanceLog
handleModalData={handleModalData}
searchTerm={searchTerm}
organizationId={appliedFilters.selectedOrganization}
/>
</div>
)}
{activeTab === "regularization" && DoRegularized && (
<div className="tab-pane fade p-3 show active py-0">
<Regularization
searchTerm={searchTerm}
organizationId={appliedFilters.selectedOrganization}
/>
</div>
)}
))}
</>
) : (
<div className="py-2">