diff --git a/index.html b/index.html index 121acff3..0ac2d657 100644 --- a/index.html +++ b/index.html @@ -45,6 +45,7 @@ + diff --git a/public/assets/vendor/css/core.css b/public/assets/vendor/css/core.css index bf101a69..9be75669 100644 --- a/public/assets/vendor/css/core.css +++ b/public/assets/vendor/css/core.css @@ -18609,6 +18609,9 @@ li:not(:first-child) .dropdown-item, .min-vh-100 { min-height: 100vh !important; } +.page-min-h{ + min-height: 70vh !important; +} .flex-fill { flex: 1 1 auto !important; diff --git a/public/assets/vendor/libs/spinkit/spinkit.css b/public/assets/vendor/libs/spinkit/spinkit.css new file mode 100644 index 00000000..aabf74ed --- /dev/null +++ b/public/assets/vendor/libs/spinkit/spinkit.css @@ -0,0 +1,837 @@ +/* Config */ +:root { + --sk-size: 40px; + --sk-color: #ff3e1d; +} + +/* Utility class for centering */ +.sk-center { + margin: auto; +} + +/* Plane + +
+ */ + + +.sk-plane { + width: var(--sk-size); + height: var(--sk-size); + background-color: var(--sk-color); + animation: sk-plane 1.2s infinite ease-in-out; +} + +@keyframes sk-plane { + 0% { + transform: perspective(120px) rotateX(0deg) rotateY(0deg); + } + 50% { + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + } + 100% { + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + } +} +/* Chase + +
+
+
+
+
+
+
+
+ */ +.sk-chase { + width: var(--sk-size); + height: var(--sk-size); + position: relative; + animation: sk-chase 2.5s infinite linear both; +} + +.sk-chase-dot { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + animation: sk-chase-dot 2s infinite ease-in-out both; +} + +.sk-chase-dot:before { + content: ""; + display: block; + width: 25%; + height: 25%; + background-color: var(--sk-color); + border-radius: 100%; + animation: sk-chase-dot-before 2s infinite ease-in-out both; +} + +.sk-chase-dot:nth-child(1) { + animation-delay: -1.1s; +} + +.sk-chase-dot:nth-child(2) { + animation-delay: -1s; +} + +.sk-chase-dot:nth-child(3) { + animation-delay: -0.9s; +} + +.sk-chase-dot:nth-child(4) { + animation-delay: -0.8s; +} + +.sk-chase-dot:nth-child(5) { + animation-delay: -0.7s; +} + +.sk-chase-dot:nth-child(6) { + animation-delay: -0.6s; +} + +.sk-chase-dot:nth-child(1):before { + animation-delay: -1.1s; +} + +.sk-chase-dot:nth-child(2):before { + animation-delay: -1s; +} + +.sk-chase-dot:nth-child(3):before { + animation-delay: -0.9s; +} + +.sk-chase-dot:nth-child(4):before { + animation-delay: -0.8s; +} + +.sk-chase-dot:nth-child(5):before { + animation-delay: -0.7s; +} + +.sk-chase-dot:nth-child(6):before { + animation-delay: -0.6s; +} + +@keyframes sk-chase { + 100% { + transform: rotate(360deg); + } +} +@keyframes sk-chase-dot { + 80%, 100% { + transform: rotate(360deg); + } +} +@keyframes sk-chase-dot-before { + 50% { + transform: scale(0.4); + } + 100%, 0% { + transform: scale(1); + } +} +/* Bounce + +
+
+
+
+ */ +.sk-bounce { + width: var(--sk-size); + height: var(--sk-size); + position: relative; +} + +.sk-bounce-dot { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: var(--sk-color); + opacity: 0.6; + position: absolute; + top: 0; + left: 0; + animation: sk-bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); +} + +.sk-bounce-dot:nth-child(2) { + animation-delay: -1s; +} + +@keyframes sk-bounce { + 0%, 100% { + transform: scale(0); + } + 45%, 55% { + transform: scale(1); + } +} +/* Wave + +
+
+
+
+
+
+
+ */ +.sk-wave { + width: var(--sk-size); + height: var(--sk-size); + display: flex; + justify-content: space-between; +} + +.sk-wave-rect { + background-color: var(--sk-color); + height: 100%; + width: 15%; + animation: sk-wave 1.2s infinite ease-in-out; +} + +.sk-wave-rect:nth-child(1) { + animation-delay: -1.2s; +} + +.sk-wave-rect:nth-child(2) { + animation-delay: -1.1s; +} + +.sk-wave-rect:nth-child(3) { + animation-delay: -1s; +} + +.sk-wave-rect:nth-child(4) { + animation-delay: -0.9s; +} + +.sk-wave-rect:nth-child(5) { + animation-delay: -0.8s; +} + +@keyframes sk-wave { + 0%, 40%, 100% { + transform: scaleY(0.4); + } + 20% { + transform: scaleY(1); + } +} +/* Pulse + +
+ */ +.sk-pulse { + width: var(--sk-size); + height: var(--sk-size); + background-color: var(--sk-color); + border-radius: 100%; + animation: sk-pulse 1.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); +} + +@keyframes sk-pulse { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + opacity: 0; + } +} +/* Flow + +
+
+
+
+
+ */ +.sk-flow { + width: calc(var(--sk-size) * 1.3); + height: calc(var(--sk-size) * 1.3); + display: flex; + justify-content: space-between; +} + +.sk-flow-dot { + width: 25%; + height: 25%; + background-color: var(--sk-color); + border-radius: 50%; + animation: sk-flow 1.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s infinite both; +} + +.sk-flow-dot:nth-child(1) { + animation-delay: -0.3s; +} + +.sk-flow-dot:nth-child(2) { + animation-delay: -0.15s; +} + +@keyframes sk-flow { + 0%, 80%, 100% { + transform: scale(0.3); + } + 40% { + transform: scale(1); + } +} +/* Swing + +
+
+
+
+ */ +.sk-swing { + width: var(--sk-size); + height: var(--sk-size); + position: relative; + animation: sk-swing 1.8s infinite linear; +} + +.sk-swing-dot { + width: 45%; + height: 45%; + position: absolute; + top: 0; + left: 0; + right: 0; + margin: auto; + background-color: var(--sk-color); + border-radius: 100%; + animation: sk-swing-dot 2s infinite ease-in-out; +} + +.sk-swing-dot:nth-child(2) { + top: auto; + bottom: 0; + animation-delay: -1s; +} + +@keyframes sk-swing { + 100% { + transform: rotate(360deg); + } +} +@keyframes sk-swing-dot { + 0%, 100% { + transform: scale(0.2); + } + 50% { + transform: scale(1); + } +} +/* Circle + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ */ +.sk-circle { + width: var(--sk-size); + height: var(--sk-size); + position: relative; +} + +.sk-circle-dot { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; +} + +.sk-circle-dot:before { + content: ""; + display: block; + width: 15%; + height: 15%; + background-color: var(--sk-color); + border-radius: 100%; + animation: sk-circle 1.2s infinite ease-in-out both; +} + +.sk-circle-dot:nth-child(1) { + transform: rotate(30deg); +} + +.sk-circle-dot:nth-child(2) { + transform: rotate(60deg); +} + +.sk-circle-dot:nth-child(3) { + transform: rotate(90deg); +} + +.sk-circle-dot:nth-child(4) { + transform: rotate(120deg); +} + +.sk-circle-dot:nth-child(5) { + transform: rotate(150deg); +} + +.sk-circle-dot:nth-child(6) { + transform: rotate(180deg); +} + +.sk-circle-dot:nth-child(7) { + transform: rotate(210deg); +} + +.sk-circle-dot:nth-child(8) { + transform: rotate(240deg); +} + +.sk-circle-dot:nth-child(9) { + transform: rotate(270deg); +} + +.sk-circle-dot:nth-child(10) { + transform: rotate(300deg); +} + +.sk-circle-dot:nth-child(11) { + transform: rotate(330deg); +} + +.sk-circle-dot:nth-child(1):before { + animation-delay: -1.1s; +} + +.sk-circle-dot:nth-child(2):before { + animation-delay: -1s; +} + +.sk-circle-dot:nth-child(3):before { + animation-delay: -0.9s; +} + +.sk-circle-dot:nth-child(4):before { + animation-delay: -0.8s; +} + +.sk-circle-dot:nth-child(5):before { + animation-delay: -0.7s; +} + +.sk-circle-dot:nth-child(6):before { + animation-delay: -0.6s; +} + +.sk-circle-dot:nth-child(7):before { + animation-delay: -0.5s; +} + +.sk-circle-dot:nth-child(8):before { + animation-delay: -0.4s; +} + +.sk-circle-dot:nth-child(9):before { + animation-delay: -0.3s; +} + +.sk-circle-dot:nth-child(10):before { + animation-delay: -0.2s; +} + +.sk-circle-dot:nth-child(11):before { + animation-delay: -0.1s; +} + +@keyframes sk-circle { + 0%, 80%, 100% { + transform: scale(0); + } + 40% { + transform: scale(1); + } +} +/* Circle Fade + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ */ +.sk-circle-fade { + width: var(--sk-size); + height: var(--sk-size); + position: relative; +} + +.sk-circle-fade-dot { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; +} + +.sk-circle-fade-dot:before { + content: ""; + display: block; + width: 15%; + height: 15%; + background-color: var(--sk-color); + border-radius: 100%; + animation: sk-circle-fade 1.2s infinite ease-in-out both; +} + +.sk-circle-fade-dot:nth-child(1) { + transform: rotate(30deg); +} + +.sk-circle-fade-dot:nth-child(2) { + transform: rotate(60deg); +} + +.sk-circle-fade-dot:nth-child(3) { + transform: rotate(90deg); +} + +.sk-circle-fade-dot:nth-child(4) { + transform: rotate(120deg); +} + +.sk-circle-fade-dot:nth-child(5) { + transform: rotate(150deg); +} + +.sk-circle-fade-dot:nth-child(6) { + transform: rotate(180deg); +} + +.sk-circle-fade-dot:nth-child(7) { + transform: rotate(210deg); +} + +.sk-circle-fade-dot:nth-child(8) { + transform: rotate(240deg); +} + +.sk-circle-fade-dot:nth-child(9) { + transform: rotate(270deg); +} + +.sk-circle-fade-dot:nth-child(10) { + transform: rotate(300deg); +} + +.sk-circle-fade-dot:nth-child(11) { + transform: rotate(330deg); +} + +.sk-circle-fade-dot:nth-child(1):before { + animation-delay: -1.1s; +} + +.sk-circle-fade-dot:nth-child(2):before { + animation-delay: -1s; +} + +.sk-circle-fade-dot:nth-child(3):before { + animation-delay: -0.9s; +} + +.sk-circle-fade-dot:nth-child(4):before { + animation-delay: -0.8s; +} + +.sk-circle-fade-dot:nth-child(5):before { + animation-delay: -0.7s; +} + +.sk-circle-fade-dot:nth-child(6):before { + animation-delay: -0.6s; +} + +.sk-circle-fade-dot:nth-child(7):before { + animation-delay: -0.5s; +} + +.sk-circle-fade-dot:nth-child(8):before { + animation-delay: -0.4s; +} + +.sk-circle-fade-dot:nth-child(9):before { + animation-delay: -0.3s; +} + +.sk-circle-fade-dot:nth-child(10):before { + animation-delay: -0.2s; +} + +.sk-circle-fade-dot:nth-child(11):before { + animation-delay: -0.1s; +} + +@keyframes sk-circle-fade { + 0%, 39%, 100% { + opacity: 0; + transform: scale(0.6); + } + 40% { + opacity: 1; + transform: scale(1); + } +} +/* Grid + +
+
+
+
+
+
+
+
+
+
+
+ */ +.sk-grid { + width: var(--sk-size); + height: var(--sk-size); + /* Cube positions + * 1 2 3 + * 4 5 6 + * 7 8 9 + */ +} + +.sk-grid-cube { + width: 33.33%; + height: 33.33%; + background-color: var(--sk-color); + float: left; + animation: sk-grid 1.3s infinite ease-in-out; +} + +.sk-grid-cube:nth-child(1) { + animation-delay: 0.2s; +} + +.sk-grid-cube:nth-child(2) { + animation-delay: 0.3s; +} + +.sk-grid-cube:nth-child(3) { + animation-delay: 0.4s; +} + +.sk-grid-cube:nth-child(4) { + animation-delay: 0.1s; +} + +.sk-grid-cube:nth-child(5) { + animation-delay: 0.2s; +} + +.sk-grid-cube:nth-child(6) { + animation-delay: 0.3s; +} + +.sk-grid-cube:nth-child(7) { + animation-delay: 0s; +} + +.sk-grid-cube:nth-child(8) { + animation-delay: 0.1s; +} + +.sk-grid-cube:nth-child(9) { + animation-delay: 0.2s; +} + +@keyframes sk-grid { + 0%, 70%, 100% { + transform: scale3D(1, 1, 1); + } + 35% { + transform: scale3D(0, 0, 1); + } +} +/* Fold + +
+
+
+
+
+
+ */ +.sk-fold { + width: var(--sk-size); + height: var(--sk-size); + position: relative; + transform: rotateZ(45deg); +} + +.sk-fold-cube { + float: left; + width: 50%; + height: 50%; + position: relative; + transform: scale(1.1); +} + +.sk-fold-cube:before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sk-color); + animation: sk-fold 2.4s infinite linear both; + transform-origin: 100% 100%; +} + +.sk-fold-cube:nth-child(2) { + transform: scale(1.1) rotateZ(90deg); +} + +.sk-fold-cube:nth-child(4) { + transform: scale(1.1) rotateZ(180deg); +} + +.sk-fold-cube:nth-child(3) { + transform: scale(1.1) rotateZ(270deg); +} + +.sk-fold-cube:nth-child(2):before { + animation-delay: 0.3s; +} + +.sk-fold-cube:nth-child(4):before { + animation-delay: 0.6s; +} + +.sk-fold-cube:nth-child(3):before { + animation-delay: 0.9s; +} + +@keyframes sk-fold { + 0%, 10% { + transform: perspective(140px) rotateX(-180deg); + opacity: 0; + } + 25%, 75% { + transform: perspective(140px) rotateX(0deg); + opacity: 1; + } + 90%, 100% { + transform: perspective(140px) rotateY(180deg); + opacity: 0; + } +} +/* Wander + +
+
+
+
+
+
+ */ +.sk-wander { + width: var(--sk-size); + height: var(--sk-size); + position: relative; +} + +.sk-wander-cube { + background-color: var(--sk-color); + width: 20%; + height: 20%; + position: absolute; + top: 0; + left: 0; + --sk-wander-distance: calc(var(--sk-size) * 0.75); + animation: sk-wander 2s ease-in-out -2s infinite both; +} + +.sk-wander-cube:nth-child(2) { + animation-delay: -0.5s; +} + +.sk-wander-cube:nth-child(3) { + animation-delay: -1s; +} + +@keyframes sk-wander { + 0% { + transform: rotate(0deg); + } + 25% { + transform: translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.6); + } + 50% { /* Make FF rotate in the right direction */ + transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg); + } + 50.1% { + transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg); + } + 75% { + transform: translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.6); + } + 100% { + transform: rotate(-360deg); + } +} +:root { + --sk-size: 30px; + +} + +.sk-wave { + width: 40px; + white-space: nowrap; +} + +.sk-fading-circle .sk-circle { + margin-top: 0; + margin-bottom: 0; +} + +.sk-wave { + width: 40px; + white-space: nowrap; +} + +.sk-fading-circle .sk-circle { + margin-top: 0; + margin-bottom: 0; +} diff --git a/src/components/Activities/AttendLogs.jsx b/src/components/Activities/AttendLogs.jsx index b94c80c6..7c1e686d 100644 --- a/src/components/Activities/AttendLogs.jsx +++ b/src/components/Activities/AttendLogs.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import { useEmployeeAttendacesLog } from "../../hooks/useAttendance"; -import { convertShortTime } from "../../utils/dateUtils"; +import { convertShortTime, formatUTCToLocalTime } from "../../utils/dateUtils"; import { useNavigate } from "react-router-dom"; import { THRESH_HOLD } from "../../utils/constants"; @@ -128,7 +128,7 @@ const AttendLogs = ({ Id }) => {

Attendance logs for{" "} {logs[0]?.employee?.firstName + " " + logs[0]?.employee?.lastName}{" "} - on {logs[0]?.activityTime.slice(0, 10)}{" "} + on {formatUTCToLocalTime(logs[0]?.activityTime)}

)} @@ -156,7 +156,7 @@ const AttendLogs = ({ Id }) => { .sort((a, b) => b.id - a.id) .map((log, index) => ( - {log.activityTime.slice(0, 10)} + {formatUTCToLocalTime(log.activityTime)} {convertShortTime(log.activityTime)} {whichActivityPerform(log.activity, log.activityTime)} diff --git a/src/components/Activities/Attendance.jsx b/src/components/Activities/Attendance.jsx index 2dde2938..eb7dc500 100644 --- a/src/components/Activities/Attendance.jsx +++ b/src/components/Activities/Attendance.jsx @@ -1,7 +1,7 @@ import React, { useState, useEffect, useCallback, useMemo } from "react"; import moment from "moment"; import Avatar from "../common/Avatar"; -import { convertShortTime } from "../../utils/dateUtils"; +import { convertShortTime, formatUTCToLocalTime } from "../../utils/dateUtils"; import RenderAttendanceStatus from "./RenderAttendanceStatus"; import usePagination from "../../hooks/usePagination"; import { useNavigate } from "react-router-dom"; @@ -10,7 +10,7 @@ import { useAttendance } from "../../hooks/useAttendance"; import { useSelector } from "react-redux"; import { useQueryClient } from "@tanstack/react-query"; import eventBus from "../../services/eventBus"; -import { useSelectedproject } from "../../slices/apiDataManager"; +import { useSelectedProject } from "../../slices/apiDataManager"; const Attendance = ({ getRole, handleModalData, searchTerm }) => { const queryClient = useQueryClient(); @@ -21,7 +21,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => { // const selectedProject = useSelector( // (store) => store.localVariables.projectId // ); - const selectedProject = useSelectedproject(); + const selectedProject = useSelectedProject(); const { attendance, loading: attLoading, @@ -116,7 +116,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => { <>
- Date : {todayDate.toLocaleDateString("en-GB")} + Date : {formatUTCToLocalTime(todayDate)}
{ const [currentPage, setCurrentPage] = useState(1); @@ -37,7 +38,7 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => { // const selectedProject = useSelector( // (store) => store.localVariables.projectId // ); - const selectedProject = useSelectedproject(); + const selectedProject = useSelectedProject(); const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" }); const dispatch = useDispatch(); const [loading, setLoading] = useState(false); @@ -353,7 +354,7 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => { No Pending Record Available !
)} - {filteredSearchData.length > 10 && ( + {filteredSearchData.length > ITEMS_PER_PAGE && (