Compare commits
No commits in common. "d2785d2e8c716865f9b45eaba0059e9f36d3bb27" and "029254e5489b623e70b061ed1957e0f3a2c5be15" have entirely different histories.
d2785d2e8c
...
029254e548
@ -5,21 +5,6 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
|
||||
<div className="col-md-12">
|
||||
<div className="nav-align-top ">
|
||||
<ul className="nav nav-tabs">
|
||||
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className={`nav-link py-1 px-2 small ${
|
||||
activePill === "attendance" ? "active" : ""
|
||||
}`}
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault(); // Prevent page reload
|
||||
onPillClick("attendance");
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-group bx-sm me-1_5"></i> Attendances
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className={`nav-link py-1 px-2 small ${
|
||||
@ -34,7 +19,20 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
|
||||
<i className="bx bx-user bx-sm me-1_5"></i> Documents
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className={`nav-link py-1 px-2 small ${
|
||||
activePill === "attendance" ? "active" : ""
|
||||
}`}
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault(); // Prevent page reload
|
||||
onPillClick("attendance");
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-group bx-sm me-1_5"></i> Attendances
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className={`nav-link py-1 px-2 small ${
|
||||
|
||||
@ -97,6 +97,7 @@ const AttendancePage = () => {
|
||||
useEffect(()=>{
|
||||
if(selectedProject == 1){
|
||||
dispatch(setProjectId(loginUser?.projects[0]))
|
||||
console.log(loginUser?.projects);
|
||||
}
|
||||
},[selectedProject,loginUser?.projects])
|
||||
return (
|
||||
|
||||
@ -1,267 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import moment from "moment";
|
||||
import { useAttendanceByEmployee } from "../../hooks/useAttendance";
|
||||
import DateRangePicker from "../../components/common/DateRangePicker";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { fetchEmployeeAttendanceData } from "../../slices/apiSlice/employeeAttendanceSlice";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import Avatar from "../../components/common/Avatar";
|
||||
import { convertShortTime } from "../../utils/dateUtils";
|
||||
import RenderAttendanceStatus from "../../components/Activities/RenderAttendanceStatus";
|
||||
import AttendLogs from "../../components/Activities/AttendLogs";
|
||||
|
||||
const AttendancesEmployeeRecords = ({ employee }) => {
|
||||
const [attendances, setAttendnaces] = useState([]);
|
||||
const [selectedDate, setSelectedDate] = useState("");
|
||||
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [attendanceId, setAttendanecId] = useState();
|
||||
const dispatch = useDispatch();
|
||||
const { data, loading, error } = useSelector(
|
||||
(store) => store.employeeAttendance
|
||||
);
|
||||
|
||||
const [isRefreshing, setIsRefreshing] = useState(true);
|
||||
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
const isSameDay = (dateStr) => {
|
||||
if (!dateStr) return false;
|
||||
const d = new Date(dateStr);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
return d.getTime() === today.getTime();
|
||||
};
|
||||
|
||||
const isBeforeToday = (dateStr) => {
|
||||
if (!dateStr) return false;
|
||||
const d = new Date(dateStr);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
return d.getTime() < today.getTime();
|
||||
};
|
||||
|
||||
const sortByName = (a, b) => {
|
||||
const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
|
||||
const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
|
||||
return nameA.localeCompare(nameB);
|
||||
};
|
||||
|
||||
const group1 = data
|
||||
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group2 = data
|
||||
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group3 = data
|
||||
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group4 = data
|
||||
.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group5 = data.filter((d) => d.activity === 5).sort(sortByName);
|
||||
|
||||
const sortedFinalList = [
|
||||
...group1,
|
||||
...group2,
|
||||
...group3,
|
||||
...group4,
|
||||
...group5,
|
||||
];
|
||||
|
||||
const currentDate = new Date().toLocaleDateString("en-CA");
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
sortedFinalList,
|
||||
5
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const { startDate, endDate } = dateRange;
|
||||
if (startDate && endDate) {
|
||||
dispatch(
|
||||
fetchEmployeeAttendanceData({
|
||||
employeeId: employee,
|
||||
fromDate: startDate,
|
||||
toDate: endDate,
|
||||
})
|
||||
);
|
||||
}
|
||||
}, [dateRange, employee]);
|
||||
|
||||
const openModal = (id) => {
|
||||
setAttendanecId(id);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
const closeModal = () => setIsModalOpen(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`modal fade ${isModalOpen ? "show" : ""}`}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{ display: isModalOpen ? "block" : "none" }}
|
||||
aria-hidden={!isModalOpen}
|
||||
>
|
||||
{" "}
|
||||
<div
|
||||
className="modal-dialog modal-md modal-simple attendance-log-modal mx-sm-auto mx-1"
|
||||
role="document"
|
||||
>
|
||||
<div className="modal-content">
|
||||
<div className="modal-body p-sm-4 p-0">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={closeModal}
|
||||
aria-label="Close"
|
||||
></button>
|
||||
|
||||
<AttendLogs Id={attendanceId} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4 py-2 " style={{ minHeight: "500px" }}>
|
||||
<div
|
||||
className="dataTables_length text-start py-2 d-flex justify-content-between "
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<div className="col-md-3 my-0 ">
|
||||
<DateRangePicker onRangeChange={setDateRange} />
|
||||
</div>
|
||||
<div className="col-md-2 m-0 text-end">
|
||||
<i
|
||||
className={`bx bx-refresh cursor-pointer fs-4 ${
|
||||
loading ? "spin" : ""
|
||||
}`}
|
||||
title="Refresh"
|
||||
onClick={() => setIsRefreshing(!isRefreshing)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive text-nowrap">
|
||||
{data && data.length > 0 ? (
|
||||
<table className="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="border-top-1" colSpan={2}>
|
||||
Name
|
||||
</th>
|
||||
<th className="border-top-1">Date</th>
|
||||
<th>
|
||||
<i className="bx bxs-down-arrow-alt text-success"></i>{" "}
|
||||
Check-In
|
||||
</th>
|
||||
<th>
|
||||
<i className="bx bxs-up-arrow-alt text-danger"></i>{" "}
|
||||
Check-Out
|
||||
</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && <td colSpan={5}>Loading...</td>}
|
||||
{error && <td colSpan={5}>{error}</td>}
|
||||
{data && data.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5}>No Data Found</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{currentItems?.map((attendance, index) => (
|
||||
<tr key={index}>
|
||||
<td colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar
|
||||
firstName={attendance.firstName}
|
||||
lastName={attendance.lastName}
|
||||
/>
|
||||
<div className="d-flex flex-column">
|
||||
<a href="#" className="text-heading text-truncate">
|
||||
<span className="fw-normal">
|
||||
{attendance.firstName} {attendance.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{" "}
|
||||
{moment(attendance.checkInTime).format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
<td>{convertShortTime(attendance.checkInTime)}</td>
|
||||
<td>
|
||||
{attendance.checkOutTime
|
||||
? convertShortTime(attendance.checkOutTime)
|
||||
: "--"}
|
||||
</td>
|
||||
|
||||
<td className="text-center">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-secondary ms-2"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
data-bs-toggle="modal"
|
||||
onClick={() => openModal(attendance.id)}
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<span>No employee logs</span>
|
||||
)}
|
||||
</div>
|
||||
{!loading && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li
|
||||
className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
|
||||
>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
onClick={() => paginate(currentPage - 1)}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(index + 1)}
|
||||
>
|
||||
{index + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AttendancesEmployeeRecords;
|
||||
@ -11,7 +11,6 @@ import EmployeeRepository from "../../repositories/EmployeeRepository";
|
||||
import { ComingSoonPage } from "../Misc/ComingSoonPage";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Avatar from "../../components/common/Avatar";
|
||||
import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
|
||||
const EmployeeProfile = () => {
|
||||
|
||||
const projectID = useSelector((store)=>store.localVariables.projectId)
|
||||
@ -55,18 +54,17 @@ const EmployeeProfile = () => {
|
||||
const renderContent = () => {
|
||||
if (loading) return <div>Loading</div>;
|
||||
switch (activePill) {
|
||||
case "attendance": {
|
||||
return (
|
||||
<>
|
||||
<AttendancesEmployeeRecords employee={employeeId } />
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
case "dcoument": {
|
||||
case "account": {
|
||||
return (
|
||||
<>
|
||||
<ComingSoonPage/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
case "attendance": {
|
||||
return (
|
||||
<>
|
||||
<ComingSoonPage/>
|
||||
</>
|
||||
);
|
||||
break;
|
||||
|
||||
@ -19,21 +19,7 @@ const AttendanceRepository = {
|
||||
},
|
||||
|
||||
getAttendanceLogs: ( id ) => api.get( `api/attendance/log/attendance/${ id }` ),
|
||||
getRegularizeList: ( id ) => api.get( `api/attendance/regularize?projectId=${ id }` ),
|
||||
|
||||
getAttendanceByEmployee: ( employeeId, fromDate, toDate ) =>
|
||||
{
|
||||
|
||||
let url = `api/Attendance/log/employee/${ employeeId }?`
|
||||
if (fromDate) {
|
||||
url += `&dateFrom=${fromDate}`;
|
||||
}
|
||||
|
||||
if (toDate) {
|
||||
url += `&dateTo=${toDate}`;
|
||||
}
|
||||
return api.get(url)
|
||||
},
|
||||
getRegularizeList: (id)=> api.get(`api/attendance/regularize?projectId=${id}`)
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -1,56 +0,0 @@
|
||||
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
|
||||
import AttendanceRepository from '../../repositories/AttendanceRepository';
|
||||
import { markAttendance } from './attedanceLogsSlice';
|
||||
|
||||
export const fetchEmployeeAttendanceData = createAsyncThunk(
|
||||
'employeeAttendance/fetchEmployeeAttendanceData',
|
||||
async ( {employeeId, fromDate, toDate}, thunkAPI ) =>
|
||||
{
|
||||
try {
|
||||
const response = await AttendanceRepository.getAttendanceByEmployee( employeeId, fromDate, toDate );
|
||||
// return response?.data?.filter((log) => log.checkInTime !== null && log.activity !== 0);
|
||||
return response.data
|
||||
} catch (error) {
|
||||
return thunkAPI.rejectWithValue(error.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
const employeeAttendancesSlice = createSlice({
|
||||
name: 'employeeAttendance', // Updated slice name
|
||||
initialState: {
|
||||
data: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
},
|
||||
reducers: {
|
||||
setEmployeeAttendanceData: (state, action) => {
|
||||
state.data = action.payload;
|
||||
},
|
||||
},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
// Fetch attendance data
|
||||
.addCase(fetchEmployeeAttendanceData.pending, (state) => {
|
||||
state.loading = true;
|
||||
})
|
||||
.addCase(fetchEmployeeAttendanceData.fulfilled, (state, action) => {
|
||||
state.loading = false;
|
||||
state.data = action.payload;
|
||||
})
|
||||
|
||||
|
||||
.addCase(fetchEmployeeAttendanceData.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = action.payload;
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
export const { setEmployeeAttendanceData } = employeeAttendancesSlice.actions;
|
||||
export default employeeAttendancesSlice.reducer;
|
||||
@ -3,7 +3,6 @@ import apiCacheReducer from "../slices/apiCacheSlice";
|
||||
import globalVariablesReducer from "../slices/globalVariablesSlice";
|
||||
import localVariableRducer from "../slices/localVariablesSlice"
|
||||
import attendanceReducer from "../slices/apiSlice/attedanceLogsSlice"
|
||||
import employeeAttendanceReducer from "../slices/apiSlice/employeeAttendanceSlice"
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
@ -11,6 +10,5 @@ export const store = configureStore({
|
||||
globalVariables: globalVariablesReducer,
|
||||
localVariables:localVariableRducer,
|
||||
attendanceLogs: attendanceReducer,
|
||||
employeeAttendance: employeeAttendanceReducer,
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user