331 lines
11 KiB
JavaScript
331 lines
11 KiB
JavaScript
import React, { useState, useEffect, useCallback } from "react";
|
|
import {
|
|
cacheData,
|
|
clearCacheKey,
|
|
getCachedData,
|
|
getCachedProfileData,
|
|
} from "../../slices/apiDataManager";
|
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
|
import AttendanceLog from "../../components/Activities/AttendcesLogs";
|
|
import Attendance from "../../components/Activities/Attendance";
|
|
import AttendanceModel from "../../components/Activities/AttendanceModel";
|
|
import showToast from "../../services/toastService";
|
|
import Regularization from "../../components/Activities/Regularization";
|
|
import { useAttendance } from "../../hooks/useAttendance";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { setProjectId } from "../../slices/localVariablesSlice";
|
|
import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice";
|
|
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
|
|
import eventBus from "../../services/eventBus";
|
|
import AttendanceRepository from "../../repositories/AttendanceRepository";
|
|
import { useProjectName } from "../../hooks/useProjects";
|
|
|
|
const AttendancePage = () => {
|
|
const [activeTab, setActiveTab] = useState("all");
|
|
const [showPending, setShowPending] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const loginUser = getCachedProfileData();
|
|
const selectedProject = useSelector((store) => store.localVariables.projectId);
|
|
const dispatch = useDispatch();
|
|
const {
|
|
attendance,
|
|
loading: attLoading,
|
|
recall: attrecall,
|
|
} = useAttendance(selectedProject);
|
|
const [attendances, setAttendances] = useState();
|
|
const [empRoles, setEmpRoles] = useState(null);
|
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
|
const [modelConfig, setModelConfig] = useState(null); // Initialize as null
|
|
const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
|
|
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
|
|
|
const [formData, setFormData] = useState({
|
|
markTime: "",
|
|
description: "",
|
|
date: new Date().toLocaleDateString(),
|
|
});
|
|
|
|
const handler = useCallback(
|
|
(msg) => {
|
|
if (selectedProject === msg.projectId) {
|
|
const updatedAttendance = attendances
|
|
? attendances.map((item) =>
|
|
item.employeeId === msg.response.employeeId
|
|
? { ...item, ...msg.response }
|
|
: item
|
|
)
|
|
: [msg.response];
|
|
|
|
cacheData("Attendance", {
|
|
data: updatedAttendance,
|
|
projectId: selectedProject,
|
|
});
|
|
setAttendances(updatedAttendance);
|
|
}
|
|
},
|
|
[selectedProject, attendances]
|
|
);
|
|
|
|
const employeeHandler = useCallback(
|
|
(msg) => {
|
|
// This logic seems fine for refetching if an employee ID exists in current attendances
|
|
if (attendances?.some((item) => item.employeeId === msg.employeeId)) {
|
|
AttendanceRepository.getAttendance(selectedProject)
|
|
.then((response) => {
|
|
cacheData("Attendance", { data: response.data, selectedProject });
|
|
setAttendances(response.data);
|
|
})
|
|
.catch((error) => {
|
|
console.error(error);
|
|
});
|
|
}
|
|
},
|
|
[selectedProject, attendances]
|
|
);
|
|
|
|
const getRole = (roleId) => {
|
|
if (!empRoles) return "Unassigned";
|
|
if (!roleId) return "Unassigned";
|
|
const role = empRoles.find((b) => b.id === roleId);
|
|
return role ? role.role : "Unassigned";
|
|
};
|
|
|
|
// Simplified and moved modal opening logic
|
|
const handleModalData = useCallback((employee) => {
|
|
setModelConfig(employee);
|
|
setIsCreateModalOpen(true); // Open the modal directly when data is set
|
|
}, []);
|
|
|
|
const closeModal = useCallback(() => {
|
|
setModelConfig(null);
|
|
setIsCreateModalOpen(false);
|
|
// Directly manipulating the DOM is generally not recommended in React.
|
|
// React handles modal visibility via state. If you must, ensure it's
|
|
// for external libraries or for very specific, controlled reasons.
|
|
// For a typical Bootstrap modal, just setting `isCreateModalOpen` to false
|
|
// should be enough if the modal component itself handles the Bootstrap classes.
|
|
const modalElement = document.getElementById("check-Out-modal");
|
|
if (modalElement) {
|
|
modalElement.classList.remove("show");
|
|
modalElement.style.display = "none";
|
|
document.body.classList.remove("modal-open");
|
|
const modalBackdrop = document.querySelector(".modal-backdrop");
|
|
if (modalBackdrop) {
|
|
modalBackdrop.remove();
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
const handleSubmit = useCallback((formData) => {
|
|
dispatch(markCurrentAttendance(formData))
|
|
.then((action) => {
|
|
if (action.payload && action.payload.employeeId) {
|
|
const updatedAttendance = attendances
|
|
? attendances.map((item) =>
|
|
item.employeeId === action.payload.employeeId
|
|
? { ...item, ...action.payload }
|
|
: item
|
|
)
|
|
: [action.payload];
|
|
|
|
cacheData("Attendance", {
|
|
data: updatedAttendance,
|
|
projectId: selectedProject,
|
|
});
|
|
setAttendances(updatedAttendance);
|
|
showToast("Attendance Marked Successfully", "success");
|
|
} else {
|
|
showToast("Failed to mark attendance: Invalid response", "error");
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
showToast(error.message, "error");
|
|
});
|
|
}, [dispatch, attendances, selectedProject]);
|
|
|
|
|
|
const handleToggle = (event) => {
|
|
setShowPending(event.target.checked);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (selectedProject === null && projectNames.length > 0) {
|
|
dispatch(setProjectId(projectNames[0]?.id));
|
|
}
|
|
}, [selectedProject, projectNames, dispatch]);
|
|
|
|
useEffect(() => {
|
|
setAttendances(attendance);
|
|
}, [attendance]);
|
|
|
|
const filteredAndSearchedTodayAttendance = useCallback(() => {
|
|
let currentData = attendances;
|
|
|
|
if (showPending) {
|
|
currentData = currentData?.filter(
|
|
(att) => att?.checkInTime !== null && att?.checkOutTime === null
|
|
);
|
|
}
|
|
|
|
if (searchQuery) {
|
|
const lowerCaseSearchQuery = searchQuery.toLowerCase();
|
|
currentData = currentData?.filter((att) => {
|
|
const fullName = [att.firstName, att.middleName, att.lastName]
|
|
.filter(Boolean)
|
|
.join(" ")
|
|
.toLowerCase();
|
|
|
|
return (
|
|
att.employeeName?.toLowerCase().includes(lowerCaseSearchQuery) ||
|
|
att.employeeId?.toLowerCase().includes(lowerCaseSearchQuery) ||
|
|
fullName.includes(lowerCaseSearchQuery)
|
|
);
|
|
});
|
|
}
|
|
return currentData;
|
|
}, [attendances, showPending, searchQuery]);
|
|
|
|
useEffect(() => {
|
|
eventBus.on("attendance", handler);
|
|
return () => eventBus.off("attendance", handler);
|
|
}, [handler]);
|
|
|
|
useEffect(() => {
|
|
eventBus.on("employee", employeeHandler);
|
|
return () => eventBus.off("employee", employeeHandler);
|
|
}, [employeeHandler]);
|
|
|
|
return (
|
|
<>
|
|
{isCreateModalOpen && modelConfig && (
|
|
<div
|
|
className="modal fade show"
|
|
style={{ display: "block" }}
|
|
id="check-Out-modal"
|
|
tabIndex="-1"
|
|
aria-hidden="true"
|
|
>
|
|
<AttendanceModel
|
|
modelConfig={modelConfig}
|
|
closeModal={closeModal}
|
|
handleSubmitForm={handleSubmit}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="container-fluid">
|
|
<Breadcrumb
|
|
data={[
|
|
{ label: "Home", link: "/dashboard" },
|
|
{ label: "Attendance", link: null },
|
|
]}
|
|
></Breadcrumb>
|
|
<div className="nav-align-top nav-tabs-shadow">
|
|
<ul
|
|
className="nav nav-tabs d-flex justify-content-between align-items-center"
|
|
role="tablist"
|
|
>
|
|
<div className="d-flex">
|
|
<li className="nav-item">
|
|
<button
|
|
type="button"
|
|
className={`nav-link ${activeTab === "all" ? "active" : ""} fs-6`}
|
|
onClick={() => setActiveTab("all")}
|
|
data-bs-toggle="tab"
|
|
data-bs-target="#navs-top-home"
|
|
>
|
|
Today's
|
|
</button>
|
|
</li>
|
|
<li className="nav-item">
|
|
<button
|
|
type="button"
|
|
className={`nav-link ${activeTab === "logs" ? "active" : ""} fs-6`}
|
|
onClick={() => setActiveTab("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={() => setActiveTab("regularization")}
|
|
data-bs-toggle="tab"
|
|
data-bs-target="#navs-top-messages"
|
|
>
|
|
Regularization
|
|
</button>
|
|
</li>
|
|
</div>
|
|
<div className="p-2">
|
|
<input
|
|
type="text"
|
|
className="form-control form-control-sm"
|
|
placeholder="Search employee..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
</ul>
|
|
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3">
|
|
{activeTab === "all" && (
|
|
<>
|
|
{!attLoading && (
|
|
<div className="tab-pane fade show active py-0">
|
|
<Attendance
|
|
attendance={filteredAndSearchedTodayAttendance()}
|
|
handleModalData={handleModalData}
|
|
getRole={getRole}
|
|
setshowOnlyCheckout={setShowPending}
|
|
showOnlyCheckout={showPending}
|
|
searchQuery={searchQuery}
|
|
/>
|
|
</div>
|
|
)}
|
|
{!attLoading && filteredAndSearchedTodayAttendance()?.length === 0 && (
|
|
<p>
|
|
{" "}
|
|
{showPending
|
|
? "No Pending Available"
|
|
: "No Employee assigned yet."}{" "}
|
|
</p>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{activeTab === "logs" && (
|
|
<div className="tab-pane fade show active py-0">
|
|
<AttendanceLog
|
|
handleModalData={handleModalData}
|
|
projectId={selectedProject}
|
|
setshowOnlyCheckout={setShowPending}
|
|
showOnlyCheckout={showPending}
|
|
searchQuery={searchQuery}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "regularization" && DoRegularized && (
|
|
<div className="tab-pane fade show active py-0">
|
|
<Regularization
|
|
handleRequest={handleSubmit}
|
|
searchQuery={searchQuery}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{!attLoading && !attendances && <span>Not Found</span>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AttendancePage; |