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

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

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