diff --git a/index.html b/index.html index 5bc1c55b..1b2b7575 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,7 @@ + diff --git a/public/assets/css/skeleton.css b/public/assets/css/skeleton.css new file mode 100644 index 00000000..2ee909d2 --- /dev/null +++ b/public/assets/css/skeleton.css @@ -0,0 +1,32 @@ +/* skeleton.css */ +.skeleton { + background-color: #e2e8f0; /* Tailwind's gray-300 */ + border-radius: 0.25rem; /* Tailwind's rounded */ + position: relative; + overflow: hidden; +} + +.skeleton::after { + content: ''; + display: block; + position: absolute; + top: 0; left: -150px; + height: 100%; + width: 150px; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.4), + transparent + ); + animation: pulse 1.5s infinite; +} + +@keyframes pulse { + 0% { + left: -150px; + } + 100% { + left: 100%; + } +} \ No newline at end of file diff --git a/public/assets/vendor/css/core.css b/public/assets/vendor/css/core.css index a9930ceb..85124986 100644 --- a/public/assets/vendor/css/core.css +++ b/public/assets/vendor/css/core.css @@ -20473,7 +20473,10 @@ li:not(:first-child) .dropdown-item, word-wrap: break-word !important; word-break: break-word !important; } - +/* text-size */ +.text-tiny{ + font-size: 13px; +} /* rtl:end:remove */ .text-primary { --bs-text-opacity: 1; diff --git a/src/Context/FabContext.jsx b/src/Context/FabContext.jsx index 7151e6d7..d78d4078 100644 --- a/src/Context/FabContext.jsx +++ b/src/Context/FabContext.jsx @@ -4,9 +4,30 @@ const FabContext = createContext(); export const FabProvider = ({ children }) => { const [actions, setActions] = useState([]); + const [showTrigger, setShowTrigger] = useState(true); + const [isOffcanvasOpen, setIsOffcanvasOpen] = useState(false); + const [offcanvas, setOffcanvas] = useState({ + isOpen: false, + title: "", + content: null, + }); + + const openOffcanvas = (title, content) => { + setOffcanvas({ isOpen: true, title, content }); + setTimeout(() => { + const offcanvasElement = document.getElementById("globalOffcanvas"); + if (offcanvasElement) { + const bsOffcanvas = new window.bootstrap.Offcanvas(offcanvasElement); + bsOffcanvas.show(); + } + }, 100); + }; +const setOffcanvasContent = (title, content) => { + setOffcanvas(prev => ({ ...prev, title, content })); +}; return ( - + {children} ); diff --git a/src/components/Activities/Attendance.jsx b/src/components/Activities/Attendance.jsx index 16315099..fed34f34 100644 --- a/src/components/Activities/Attendance.jsx +++ b/src/components/Activities/Attendance.jsx @@ -6,27 +6,34 @@ import RenderAttendanceStatus from "./RenderAttendanceStatus"; import usePagination from "../../hooks/usePagination"; import { useNavigate } from "react-router-dom"; import { ITEMS_PER_PAGE } from "../../utils/constants"; -import { useAttendance } from "../../hooks/useAttendance"; // This hook is already providing data +import { useAttendance } from "../../hooks/useAttendance"; import { useSelector } from "react-redux"; import { useQueryClient } from "@tanstack/react-query"; import eventBus from "../../services/eventBus"; -const Attendance = ({ getRole, handleModalData, attendance: filteredAndSearchedAttendanceFromParent, showOnlyCheckout, setshowOnlyCheckout }) => { +const Attendance = ({ getRole, handleModalData }) => { const queryClient = useQueryClient(); + const [loading, setLoading] = useState(false); const navigate = useNavigate(); const [todayDate, setTodayDate] = useState(new Date()); - + const [ShowPending, setShowPending] = useState(false); const selectedProject = useSelector( (store) => store.localVariables.projectId ); const { + attendance, loading: attLoading, recall: attrecall, isFetching - } = useAttendance(selectedProject); // Keep this hook to manage recall and fetching status + } = useAttendance(selectedProject); + const filteredAttendance = ShowPending + ? attendance?.filter( + (att) => att?.checkInTime !== null && att?.checkOutTime === null + ) + : attendance; - const attendanceList = Array.isArray(filteredAndSearchedAttendanceFromParent) - ? filteredAndSearchedAttendanceFromParent + const attendanceList = Array.isArray(filteredAttendance) + ? filteredAttendance : []; const sortByName = (a, b) => { @@ -34,7 +41,6 @@ const Attendance = ({ getRole, handleModalData, attendance: filteredAndSearchedA const nameB = (b.firstName + b.lastName).toLowerCase(); return nameA?.localeCompare(nameB); }; - const group1 = attendanceList .filter((d) => d.activity === 1 || d.activity === 4) .sort(sortByName); @@ -42,39 +48,36 @@ const Attendance = ({ getRole, handleModalData, attendance: filteredAndSearchedA .filter((d) => d.activity === 0) .sort(sortByName); - const finalFilteredDataForPagination = [...group1, ...group2]; - + const filteredData = [...group1, ...group2]; const { currentPage, totalPages, currentItems, paginate } = usePagination( - finalFilteredDataForPagination, // Use the data that's already been searched and grouped + filteredData, ITEMS_PER_PAGE ); const handler = useCallback( (msg) => { - if (selectedProject === msg.projectId) { + if (selectedProject == msg.projectId) { queryClient.setQueryData(["attendance", selectedProject], (oldData) => { if (!oldData) { - queryClient.invalidateQueries({ queryKey: ["attendance"] }); - return; // Exit to avoid mapping on undefined oldData - } + queryClient.invalidateQueries({queryKey:["attendance"]}) + }; return oldData.map((record) => record.employeeId === msg.response.employeeId ? { ...record, ...msg.response } : record ); }); } }, - [selectedProject, queryClient] // Added queryClient to dependencies + [selectedProject, attrecall] ); const employeeHandler = useCallback( (msg) => { - if (attrecall) { // Check if attrecall function exists + if (attendances.some((item) => item.employeeId == msg.employeeId)) { attrecall(); } }, - [attrecall] // Dependency should be attrecall, not `selectedProject` or `attendance` here + [selectedProject, attendance] ); - useEffect(() => { eventBus.on("attendance", handler); return () => eventBus.off("attendance", handler); @@ -97,14 +100,13 @@ const Attendance = ({ getRole, handleModalData, attendance: filteredAndSearchedA role="switch" id="inactiveEmployeesCheckbox" disabled={isFetching} - checked={showOnlyCheckout} // Use prop for checked state - onChange={(e) => setshowOnlyCheckout(e.target.checked)} // Use prop for onChange + checked={ShowPending} + onChange={(e) => setShowPending(e.target.checked)} /> - {/* Use `filteredAndSearchedAttendanceFromParent` for the initial check of data presence */} - {Array.isArray(filteredAndSearchedAttendanceFromParent) && filteredAndSearchedAttendanceFromParent.length > 0 ? ( + {Array.isArray(attendance) && attendance.length > 0 ? ( <> @@ -122,7 +124,7 @@ const Attendance = ({ getRole, handleModalData, attendance: filteredAndSearchedA - {currentItems && currentItems.length > 0 ? ( // Check currentItems length before mapping + {currentItems && currentItems .sort((a, b) => { const checkInA = a?.checkInTime @@ -179,22 +181,18 @@ const Attendance = ({ getRole, handleModalData, attendance: filteredAndSearchedA /> - )) - ) : ( - - - + ))} + {!attendance && ( + No employees assigned to the project! )}
- No matching records found. -
- {!attLoading && finalFilteredDataForPagination.length > ITEMS_PER_PAGE && ( // Use the data before pagination for total count check + {!loading && filteredData.length > 20 && (