Compare commits
No commits in common. "4bff065153619bf4ee553add0d54fc64ca10813d" and "ed5ff3be4b0a526b494ea35f2893f77dd6e2457b" have entirely different histories.
4bff065153
...
ed5ff3be4b
@ -27,8 +27,6 @@
|
|||||||
<link rel="stylesheet" href="/assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
|
<link rel="stylesheet" href="/assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
|
||||||
<link rel="stylesheet" href="/assets/css/core-extend.css" />
|
<link rel="stylesheet" href="/assets/css/core-extend.css" />
|
||||||
<link rel="stylesheet" href="/assets/css/default.css" />
|
<link rel="stylesheet" href="/assets/css/default.css" />
|
||||||
<link rel="stylesheet" href="/assets/css/skeleton.css" />
|
|
||||||
<link rel="stylesheet" href="/assets/css/hover-utility.css" />
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
<link rel="stylesheet" href="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
||||||
|
|
||||||
@ -45,7 +43,6 @@
|
|||||||
|
|
||||||
<link rel="stylesheet" href="/assets/vendor/libs/animate-css/animate.css" />
|
<link rel="stylesheet" href="/assets/vendor/libs/animate-css/animate.css" />
|
||||||
<link rel="stylesheet" href="/assets/vendor/libs/sweetalert2/sweetalert2.css" />
|
<link rel="stylesheet" href="/assets/vendor/libs/sweetalert2/sweetalert2.css" />
|
||||||
<link rel="stylesheet" href="/assets/vendor/libs/spinkit/spinkit.css" />
|
|
||||||
|
|
||||||
<!-- Helpers -->
|
<!-- Helpers -->
|
||||||
<script src="/assets/vendor/js/helpers.js"></script>
|
<script src="/assets/vendor/js/helpers.js"></script>
|
||||||
|
|||||||
@ -1,86 +0,0 @@
|
|||||||
/* Hover background color */
|
|
||||||
.hover-bg-light:hover {
|
|
||||||
background-color: #f8f9fa !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-bg-primary:hover {
|
|
||||||
background-color: var(--bs-primary) !important;
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-bg-danger:hover {
|
|
||||||
background-color: #dc3545 !important;
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-bg-success:hover {
|
|
||||||
background-color: var(--bg-success) !important;
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-bg-warning:hover {
|
|
||||||
background-color: #ffc107 !important;
|
|
||||||
color: #212529 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hover text color */
|
|
||||||
.hover-text-primary:hover {
|
|
||||||
color: #0d6efd !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-text-danger:hover {
|
|
||||||
color: #dc3545 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-text-success:hover {
|
|
||||||
color: #198754 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-text-muted:hover {
|
|
||||||
color: #6c757d !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hover shadow */
|
|
||||||
.hover-shadow-sm:hover {
|
|
||||||
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.075);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-shadow:hover {
|
|
||||||
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-shadow-lg:hover {
|
|
||||||
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hover scale */
|
|
||||||
.hover-scale:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-scale-sm:hover {
|
|
||||||
transform: scale(1.03);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-scale-lg:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add smooth transition to hover effects */
|
|
||||||
.hover-transition {
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hover border color */
|
|
||||||
.hover-border-primary:hover {
|
|
||||||
border-color: #0d6efd !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-border-danger:hover {
|
|
||||||
border-color: #dc3545 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thick-divider {
|
|
||||||
height: 3px;
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
32
public/assets/css/skeleton.css
vendored
32
public/assets/css/skeleton.css
vendored
@ -1,32 +0,0 @@
|
|||||||
/* 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%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
5
public/assets/vendor/css/core.css
vendored
5
public/assets/vendor/css/core.css
vendored
@ -20473,10 +20473,7 @@ li:not(:first-child) .dropdown-item,
|
|||||||
word-wrap: break-word !important;
|
word-wrap: break-word !important;
|
||||||
word-break: break-word !important;
|
word-break: break-word !important;
|
||||||
}
|
}
|
||||||
/* text-size */
|
|
||||||
.text-tiny{
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
/* rtl:end:remove */
|
/* rtl:end:remove */
|
||||||
.text-primary {
|
.text-primary {
|
||||||
--bs-text-opacity: 1;
|
--bs-text-opacity: 1;
|
||||||
|
|||||||
837
public/assets/vendor/libs/spinkit/spinkit.css
vendored
837
public/assets/vendor/libs/spinkit/spinkit.css
vendored
@ -1,837 +0,0 @@
|
|||||||
/* Config */
|
|
||||||
:root {
|
|
||||||
--sk-size: 40px;
|
|
||||||
--sk-color: #ff3e1d;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Utility class for centering */
|
|
||||||
.sk-center {
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Plane
|
|
||||||
|
|
||||||
<div class="sk-plane"></div>
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
.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
|
|
||||||
|
|
||||||
<div class="sk-chase">
|
|
||||||
<div class="sk-chase-dot"></div>
|
|
||||||
<div class="sk-chase-dot"></div>
|
|
||||||
<div class="sk-chase-dot"></div>
|
|
||||||
<div class="sk-chase-dot"></div>
|
|
||||||
<div class="sk-chase-dot"></div>
|
|
||||||
<div class="sk-chase-dot"></div>
|
|
||||||
</div>
|
|
||||||
*/
|
|
||||||
.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
|
|
||||||
|
|
||||||
<div class="sk-bounce">
|
|
||||||
<div class="sk-bounce-dot"></div>
|
|
||||||
<div class="sk-bounce-dot"></div>
|
|
||||||
</div>
|
|
||||||
*/
|
|
||||||
.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
|
|
||||||
|
|
||||||
<div class="sk-wave">
|
|
||||||
<div class="sk-wave-rect"></div>
|
|
||||||
<div class="sk-wave-rect"></div>
|
|
||||||
<div class="sk-wave-rect"></div>
|
|
||||||
<div class="sk-wave-rect"></div>
|
|
||||||
<div class="sk-wave-rect"></div>
|
|
||||||
</div>
|
|
||||||
*/
|
|
||||||
.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
|
|
||||||
|
|
||||||
<div class="sk-pulse"></div>
|
|
||||||
*/
|
|
||||||
.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
|
|
||||||
|
|
||||||
<div class="sk-flow">
|
|
||||||
<div class="sk-flow-dot"></div>
|
|
||||||
<div class="sk-flow-dot"></div>
|
|
||||||
<div class="sk-flow-dot"></div>
|
|
||||||
</div>
|
|
||||||
*/
|
|
||||||
.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
|
|
||||||
|
|
||||||
<div class="sk-swing">
|
|
||||||
<div class="sk-swing-dot"></div>
|
|
||||||
<div class="sk-swing-dot"></div>
|
|
||||||
</div>
|
|
||||||
*/
|
|
||||||
.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
|
|
||||||
|
|
||||||
<div class="sk-circle">
|
|
||||||
<div class="sk-circle-dot"></div>
|
|
||||||
<div class="sk-circle-dot"></div>
|
|
||||||
<div class="sk-circle-dot"></div>
|
|
||||||
<div class="sk-circle-dot"></div>
|
|
||||||
<div class="sk-circle-dot"></div>
|
|
||||||
<div class="sk-circle-dot"></div>
|
|
||||||
<div class="sk-circle-dot"></div>
|
|
||||||
<div class="sk-circle-dot"></div>
|
|
||||||
<div class="sk-circle-dot"></div>
|
|
||||||
<div class="sk-circle-dot"></div>
|
|
||||||
<div class="sk-circle-dot"></div>
|
|
||||||
<div class="sk-circle-dot"></div>
|
|
||||||
</div>
|
|
||||||
*/
|
|
||||||
.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
|
|
||||||
|
|
||||||
<div class="sk-circle-fade">
|
|
||||||
<div class="sk-circle-fade-dot"></div>
|
|
||||||
<div class="sk-circle-fade-dot"></div>
|
|
||||||
<div class="sk-circle-fade-dot"></div>
|
|
||||||
<div class="sk-circle-fade-dot"></div>
|
|
||||||
<div class="sk-circle-fade-dot"></div>
|
|
||||||
<div class="sk-circle-fade-dot"></div>
|
|
||||||
<div class="sk-circle-fade-dot"></div>
|
|
||||||
<div class="sk-circle-fade-dot"></div>
|
|
||||||
<div class="sk-circle-fade-dot"></div>
|
|
||||||
<div class="sk-circle-fade-dot"></div>
|
|
||||||
<div class="sk-circle-fade-dot"></div>
|
|
||||||
<div class="sk-circle-fade-dot"></div>
|
|
||||||
</div>
|
|
||||||
*/
|
|
||||||
.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
|
|
||||||
|
|
||||||
<div class="sk-grid">
|
|
||||||
<div class="sk-grid-cube"></div>
|
|
||||||
<div class="sk-grid-cube"></div>
|
|
||||||
<div class="sk-grid-cube"></div>
|
|
||||||
<div class="sk-grid-cube"></div>
|
|
||||||
<div class="sk-grid-cube"></div>
|
|
||||||
<div class="sk-grid-cube"></div>
|
|
||||||
<div class="sk-grid-cube"></div>
|
|
||||||
<div class="sk-grid-cube"></div>
|
|
||||||
<div class="sk-grid-cube"></div>
|
|
||||||
</div>
|
|
||||||
*/
|
|
||||||
.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
|
|
||||||
|
|
||||||
<div class="sk-fold">
|
|
||||||
<div class="sk-fold-cube"></div>
|
|
||||||
<div class="sk-fold-cube"></div>
|
|
||||||
<div class="sk-fold-cube"></div>
|
|
||||||
<div class="sk-fold-cube"></div>
|
|
||||||
</div>
|
|
||||||
*/
|
|
||||||
.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
|
|
||||||
|
|
||||||
<div class="sk-wander">
|
|
||||||
<div class="sk-wander-cube"></div>
|
|
||||||
<div class="sk-wander-cube"></div>
|
|
||||||
<div class="sk-wander-cube"></div>
|
|
||||||
<div class="sk-wander-cube"></div>
|
|
||||||
</div>
|
|
||||||
*/
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
@ -4,30 +4,9 @@ const FabContext = createContext();
|
|||||||
|
|
||||||
export const FabProvider = ({ children }) => {
|
export const FabProvider = ({ children }) => {
|
||||||
const [actions, setActions] = useState([]);
|
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 (
|
return (
|
||||||
<FabContext.Provider value={{ actions, setActions, offcanvas, openOffcanvas, showTrigger, setShowTrigger,isOffcanvasOpen, setIsOffcanvasOpen, setOffcanvasContent, }}>
|
<FabContext.Provider value={{ actions, setActions }}>
|
||||||
{children}
|
{children}
|
||||||
</FabContext.Provider>
|
</FabContext.Provider>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -15,7 +15,6 @@ import {useDispatch, useSelector} from "react-redux";
|
|||||||
import {useProfile} from "../../hooks/useProfile";
|
import {useProfile} from "../../hooks/useProfile";
|
||||||
import {refreshData, setProjectId} from "../../slices/localVariablesSlice";
|
import {refreshData, setProjectId} from "../../slices/localVariablesSlice";
|
||||||
import InfraTable from "../Project/Infrastructure/InfraTable";
|
import InfraTable from "../Project/Infrastructure/InfraTable";
|
||||||
import Loader from "../common/Loader";
|
|
||||||
|
|
||||||
|
|
||||||
const InfraPlanning = () =>
|
const InfraPlanning = () =>
|
||||||
@ -50,7 +49,7 @@ const InfraPlanning = () =>
|
|||||||
{(ApprovedTaskRights || ReportTaskRights) ? (
|
{(ApprovedTaskRights || ReportTaskRights) ? (
|
||||||
<div className="align-items-center">
|
<div className="align-items-center">
|
||||||
<div className="row ">
|
<div className="row ">
|
||||||
{isLoading && (<Loader/> )}
|
{isLoading && ( <p>Loading...</p> )}
|
||||||
{( !isLoading && projectInfra?.length === 0 ) && ( <p>No Result Found</p> )}
|
{( !isLoading && projectInfra?.length === 0 ) && ( <p>No Result Found</p> )}
|
||||||
{(!isLoading && projectInfra?.length > 0) && (<InfraTable buildings={projectInfra} projectId={selectedProject}/>)}
|
{(!isLoading && projectInfra?.length > 0) && (<InfraTable buildings={projectInfra} projectId={selectedProject}/>)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,200 +0,0 @@
|
|||||||
import React, { useEffect, useState,useMemo } from "react";
|
|
||||||
import { FormProvider, useForm, Controller } from "react-hook-form";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { defaultFilter, SearchSchema } from "./ExpenseSchema";
|
|
||||||
|
|
||||||
import DateRangePicker, { DateRangePicker1 } from "../common/DateRangePicker";
|
|
||||||
import SelectMultiple from "../common/SelectMultiple";
|
|
||||||
|
|
||||||
import { useProjectName } from "../../hooks/useProjects";
|
|
||||||
import { useExpenseStatus } from "../../hooks/masterHook/useMaster";
|
|
||||||
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
|
|
||||||
import { useSelector } from "react-redux";
|
|
||||||
import moment from "moment";
|
|
||||||
import { useExpenseFilter } from "../../hooks/useExpense";
|
|
||||||
import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
|
||||||
const selectedProjectId = useSelector((store) => store.localVariables.projectId);
|
|
||||||
const { data, isLoading,isError,error,isFetching , isFetched} = useExpenseFilter();
|
|
||||||
|
|
||||||
const groupByList = useMemo(() => {
|
|
||||||
return [
|
|
||||||
{ id: "transactionDate", name: "Transaction Date" },
|
|
||||||
{ id: "status", name: "Status" },
|
|
||||||
{ id: "submittedBy", name: "Submitted By" },
|
|
||||||
{ id: "project", name: "Project" },
|
|
||||||
{ id: "paymentMode", name: "Payment Mode" },
|
|
||||||
{ id: "expensesType", name: "Expense Type" },
|
|
||||||
{ id: "createdAt", name: "Submitted Date" }
|
|
||||||
].sort((a, b) => a.name.localeCompare(b.name));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
|
|
||||||
const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
|
|
||||||
const [resetKey, setResetKey] = useState(0);
|
|
||||||
|
|
||||||
const methods = useForm({
|
|
||||||
resolver: zodResolver(SearchSchema),
|
|
||||||
defaultValues: defaultFilter,
|
|
||||||
});
|
|
||||||
|
|
||||||
const { control, register, handleSubmit, reset, watch } = methods;
|
|
||||||
const isTransactionDate = watch("isTransactionDate");
|
|
||||||
|
|
||||||
const closePanel = () => {
|
|
||||||
document.querySelector(".offcanvas.show .btn-close")?.click();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleGroupChange = (e) => {
|
|
||||||
const group = groupByList.find((g) => g.id === e.target.value);
|
|
||||||
if (group) setSelectedGroup(group);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSubmit = (formData) => {
|
|
||||||
onApply({
|
|
||||||
...formData,
|
|
||||||
startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
|
|
||||||
endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
|
|
||||||
});
|
|
||||||
handleGroupBy(selectedGroup.id);
|
|
||||||
closePanel();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onClear = () => {
|
|
||||||
reset(defaultFilter);
|
|
||||||
setResetKey((prev) => prev + 1);
|
|
||||||
setSelectedGroup(groupByList[0]);
|
|
||||||
onApply(defaultFilter);
|
|
||||||
handleGroupBy(groupByList[0].id);
|
|
||||||
closePanel();
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
|
|
||||||
if(isError && isFetched) return <div>Something went wrong Here- {error.message} </div>
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
|
|
||||||
<FormProvider {...methods}>
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
|
|
||||||
<div className="mb-3 w-100">
|
|
||||||
<div className="d-flex align-items-center mb-2">
|
|
||||||
<label className="form-label me-2">Choose Date:</label>
|
|
||||||
<div className="form-check form-switch m-0">
|
|
||||||
<input
|
|
||||||
className="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
id="switchOption1"
|
|
||||||
{...register("isTransactionDate")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<label className="form-label mb-0 ms-2">
|
|
||||||
{isTransactionDate ? "Submitted": "Transaction" }
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DateRangePicker1
|
|
||||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
|
||||||
startField="startDate"
|
|
||||||
endField="endDate"
|
|
||||||
resetSignal={resetKey}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="row g-2">
|
|
||||||
<SelectMultiple
|
|
||||||
name="projectIds"
|
|
||||||
label="Projects :"
|
|
||||||
options={data.projects}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
/>
|
|
||||||
<SelectMultiple
|
|
||||||
name="createdByIds"
|
|
||||||
label="Submitted By :"
|
|
||||||
options={data.createdBy}
|
|
||||||
labelKey={(item) => item.name}
|
|
||||||
valueKey="id"
|
|
||||||
/>
|
|
||||||
<SelectMultiple
|
|
||||||
name="paidById"
|
|
||||||
label="Paid By :"
|
|
||||||
options={data.paidBy}
|
|
||||||
labelKey={(item) => item.name}
|
|
||||||
valueKey="id"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label">Status :</label>
|
|
||||||
<div className="row flex-wrap">
|
|
||||||
{data?.status
|
|
||||||
?.slice()
|
|
||||||
.sort((a, b) => a.name.localeCompare(b.name))
|
|
||||||
.map((status) => (
|
|
||||||
<div className="col-6" key={status.id}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="statusIds"
|
|
||||||
render={({ field: { value = [], onChange } }) => (
|
|
||||||
<div className="d-flex align-items-center me-3 mb-2">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="form-check-input"
|
|
||||||
value={status.id}
|
|
||||||
checked={value.includes(status.id)}
|
|
||||||
onChange={(e) => {
|
|
||||||
const checked = e.target.checked;
|
|
||||||
onChange(
|
|
||||||
checked
|
|
||||||
? [...value, status.id]
|
|
||||||
: value.filter((v) => v !== status.id)
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<label className="ms-2 mb-0">{status.name}</label>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mb-2 text-start ">
|
|
||||||
<label htmlFor="groupBySelect" className="form-label">Group By :</label>
|
|
||||||
<select
|
|
||||||
id="groupBySelect"
|
|
||||||
className="form-select form-select-sm"
|
|
||||||
value={selectedGroup?.id || ""}
|
|
||||||
onChange={handleGroupChange}
|
|
||||||
>
|
|
||||||
{groupByList.map((group) => (
|
|
||||||
<option key={group.id} value={group.id}>
|
|
||||||
{group.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-end py-3 gap-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-secondary btn-xs"
|
|
||||||
onClick={onClear}
|
|
||||||
>
|
|
||||||
Clear
|
|
||||||
</button>
|
|
||||||
<button type="submit" className="btn btn-primary btn-xs">
|
|
||||||
Apply
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</FormProvider>
|
|
||||||
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ExpenseFilterPanel;
|
|
||||||
@ -1,325 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import { useDeleteExpense, useExpenseList } from "../../hooks/useExpense";
|
|
||||||
import Avatar from "../common/Avatar";
|
|
||||||
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
|
||||||
import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
||||||
import Pagination from "../common/Pagination";
|
|
||||||
import {
|
|
||||||
APPROVE_EXPENSE,
|
|
||||||
EXPENSE_DRAFT,
|
|
||||||
EXPENSE_REJECTEDBY,
|
|
||||||
} from "../../utils/constants";
|
|
||||||
import { getColorNameFromHex, useDebounce } from "../../utils/appUtils";
|
|
||||||
import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
|
|
||||||
import ConfirmModal from "../common/ConfirmModal";
|
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
||||||
import { useSelector } from "react-redux";
|
|
||||||
|
|
||||||
const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
|
||||||
const [deletingId, setDeletingId] = useState(null);
|
|
||||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
|
||||||
const { setViewExpense, setManageExpenseModal } = useExpenseContext();
|
|
||||||
const IsExpenseEditable = useHasUserPermission();
|
|
||||||
const IsExpesneApprpve = useHasUserPermission(APPROVE_EXPENSE);
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
|
||||||
const pageSize = 20;
|
|
||||||
const debouncedSearch = useDebounce(searchText, 500);
|
|
||||||
|
|
||||||
const { mutate: DeleteExpense, isPending } = useDeleteExpense();
|
|
||||||
const { data, isLoading, isError, isInitialLoading, error } = useExpenseList(
|
|
||||||
pageSize,
|
|
||||||
currentPage,
|
|
||||||
filters,
|
|
||||||
debouncedSearch
|
|
||||||
);
|
|
||||||
|
|
||||||
const SelfId = useSelector(
|
|
||||||
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleDelete = (id) => {
|
|
||||||
setDeletingId(id);
|
|
||||||
DeleteExpense(
|
|
||||||
{ id },
|
|
||||||
{
|
|
||||||
onSettled: () => {
|
|
||||||
setDeletingId(null);
|
|
||||||
setIsDeleteModalOpen(false);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const paginate = (page) => {
|
|
||||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
|
||||||
setCurrentPage(page);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const groupByField = (items, field) => {
|
|
||||||
return items.reduce((acc, item) => {
|
|
||||||
let key;
|
|
||||||
switch (field) {
|
|
||||||
case "transactionDate":
|
|
||||||
key = item.transactionDate?.split("T")[0];
|
|
||||||
break;
|
|
||||||
case "status":
|
|
||||||
key = item.status?.displayName || "Unknown";
|
|
||||||
break;
|
|
||||||
case "submittedBy":
|
|
||||||
key = `${item.createdBy?.firstName ?? ""} ${
|
|
||||||
item.createdBy?.lastName ?? ""
|
|
||||||
}`.trim();
|
|
||||||
break;
|
|
||||||
case "project":
|
|
||||||
key = item.project?.name || "Unknown Project";
|
|
||||||
break;
|
|
||||||
case "paymentMode":
|
|
||||||
key = item.paymentMode?.name || "Unknown Mode";
|
|
||||||
break;
|
|
||||||
case "expensesType":
|
|
||||||
key = item.expensesType?.name || "Unknown Type";
|
|
||||||
break;
|
|
||||||
case "createdAt":
|
|
||||||
key = item.createdAt?.split("T")[0] || "Unknown Type";
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
key = "Others";
|
|
||||||
}
|
|
||||||
if (!acc[key]) acc[key] = [];
|
|
||||||
acc[key].push(item);
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
};
|
|
||||||
|
|
||||||
const expenseColumns = [
|
|
||||||
{
|
|
||||||
key: "expensesType",
|
|
||||||
label: "Expense Type",
|
|
||||||
getValue: (e) => e.expensesType?.name || "N/A",
|
|
||||||
align: "text-start",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "paymentMode",
|
|
||||||
label: "Payment Mode",
|
|
||||||
getValue: (e) => e.paymentMode?.name || "N/A",
|
|
||||||
align: "text-start",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "Submitted By",
|
|
||||||
label: "Submitted By",
|
|
||||||
align: "text-start",
|
|
||||||
getValue: (e) =>
|
|
||||||
`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""}`.trim() ||
|
|
||||||
"N/A",
|
|
||||||
customRender: (e) => (
|
|
||||||
<div className="d-flex align-items-center">
|
|
||||||
<Avatar
|
|
||||||
size="xs"
|
|
||||||
classAvatar="m-0"
|
|
||||||
firstName={e.createdBy?.firstName}
|
|
||||||
lastName={e.createdBy?.lastName}
|
|
||||||
/>
|
|
||||||
<span className="text-truncate">
|
|
||||||
{`${e.createdBy?.firstName ?? ""} ${
|
|
||||||
e.createdBy?.lastName ?? ""
|
|
||||||
}`.trim() || "N/A"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "submitted",
|
|
||||||
label: "Submitted",
|
|
||||||
getValue: (e) => formatUTCToLocalTime(e?.createdAt),
|
|
||||||
isAlwaysVisible: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "amount",
|
|
||||||
label: "Amount",
|
|
||||||
getValue: (e) => (
|
|
||||||
<>
|
|
||||||
<i className="bx bx-rupee b-xs"></i> {e?.amount}
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
isAlwaysVisible: true,
|
|
||||||
align: "text-end",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "status",
|
|
||||||
label: "Status",
|
|
||||||
align: "text-center",
|
|
||||||
getValue: (e) => (
|
|
||||||
<span
|
|
||||||
className={`badge bg-label-${
|
|
||||||
getColorNameFromHex(e?.status?.color) || "secondary"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{e.status?.name || "Unknown"}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
if (isInitialLoading) return <ExpenseTableSkeleton />;
|
|
||||||
if (isError) return <div>{error.message}</div>;
|
|
||||||
|
|
||||||
const grouped = groupBy
|
|
||||||
? groupByField(data?.data ?? [], groupBy)
|
|
||||||
: { All: data?.data ?? [] };
|
|
||||||
const IsGroupedByDate = ["transactionDate", "createdAt"].includes(groupBy);
|
|
||||||
const canEditExpense = (expense) => {
|
|
||||||
return (
|
|
||||||
(expense.status.id === EXPENSE_DRAFT ||
|
|
||||||
EXPENSE_REJECTEDBY.includes(expense.status.id)) &&
|
|
||||||
expense.createdBy?.id === SelfId
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const canDetetExpense = (expense) => {
|
|
||||||
return (
|
|
||||||
expense.status.id === EXPENSE_DRAFT && expense.createdBy.id === SelfId
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{IsDeleteModalOpen && (
|
|
||||||
<div
|
|
||||||
className={`modal fade show`}
|
|
||||||
tabIndex="-1"
|
|
||||||
role="dialog"
|
|
||||||
style={{
|
|
||||||
display: "block",
|
|
||||||
backgroundColor: "rgba(0,0,0,0.5)",
|
|
||||||
}}
|
|
||||||
aria-hidden="false"
|
|
||||||
>
|
|
||||||
<ConfirmModal
|
|
||||||
type="delete"
|
|
||||||
header="Delete Expense"
|
|
||||||
message="Are you sure you want delete?"
|
|
||||||
onSubmit={handleDelete}
|
|
||||||
onClose={() => setIsDeleteModalOpen(false)}
|
|
||||||
loading={isPending}
|
|
||||||
paramData={deletingId}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="card px-0 px-sm-4">
|
|
||||||
<div
|
|
||||||
className="card-datatable table-responsive "
|
|
||||||
id="horizontal-example"
|
|
||||||
>
|
|
||||||
<div className="dataTables_wrapper no-footer px-2 ">
|
|
||||||
<table className="table border-top dataTable text-nowrap">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
{expenseColumns.map(
|
|
||||||
(col) =>
|
|
||||||
(col.isAlwaysVisible || groupBy !== col.key) && (
|
|
||||||
<th
|
|
||||||
key={col.key}
|
|
||||||
className={`sorting d-table-cell`}
|
|
||||||
aria-sort="descending"
|
|
||||||
>
|
|
||||||
<div className={`${col.align}`}>{col.label}</div>
|
|
||||||
</th>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
<th className="sticky-action-column bg-white text-center">
|
|
||||||
Action
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{Object.keys(grouped).length > 0 ? (
|
|
||||||
Object.entries(grouped).map(([group, expenses]) => (
|
|
||||||
<React.Fragment key={group}>
|
|
||||||
<tr className="tr-group text-dark">
|
|
||||||
<td colSpan={8} className="text-start">
|
|
||||||
<strong>
|
|
||||||
{IsGroupedByDate
|
|
||||||
? formatUTCToLocalTime(group)
|
|
||||||
: group}
|
|
||||||
</strong>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{expenses.map((expense) => (
|
|
||||||
<tr key={expense.id}>
|
|
||||||
{expenseColumns.map(
|
|
||||||
(col) =>
|
|
||||||
(col.isAlwaysVisible || groupBy !== col.key) && (
|
|
||||||
<td
|
|
||||||
key={col.key}
|
|
||||||
className={`d-table-cell ${col.align ?? ""}`}
|
|
||||||
>
|
|
||||||
{col.customRender
|
|
||||||
? col.customRender(expense)
|
|
||||||
: col.getValue(expense)}
|
|
||||||
</td>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
<td className="sticky-action-column bg-white">
|
|
||||||
<div className="d-flex justify-content-center gap-2">
|
|
||||||
<i
|
|
||||||
className="bx bx-show text-primary cursor-pointer"
|
|
||||||
onClick={() =>
|
|
||||||
setViewExpense({
|
|
||||||
expenseId: expense.id,
|
|
||||||
view: true,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
></i>
|
|
||||||
{canEditExpense(expense) && (
|
|
||||||
<i
|
|
||||||
className="bx bx-edit text-secondary cursor-pointer"
|
|
||||||
onClick={() =>
|
|
||||||
setManageExpenseModal({
|
|
||||||
IsOpen: true,
|
|
||||||
expenseId: expense.id,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
></i>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{canDetetExpense(expense) && (
|
|
||||||
<i
|
|
||||||
className="bx bx-trash text-danger cursor-pointer"
|
|
||||||
onClick={() => {
|
|
||||||
setIsDeleteModalOpen(true);
|
|
||||||
setDeletingId(expense.id);
|
|
||||||
}}
|
|
||||||
></i>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</React.Fragment>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<tr>
|
|
||||||
<td colSpan={8} className="text-center py-4">
|
|
||||||
No Expense Found
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
{data?.data?.length > 0 && (
|
|
||||||
<Pagination
|
|
||||||
currentPage={currentPage}
|
|
||||||
totalPages={data.totalPages}
|
|
||||||
onPageChange={paginate}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ExpenseList;
|
|
||||||
@ -1,166 +0,0 @@
|
|||||||
import { z } from "zod";
|
|
||||||
|
|
||||||
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
|
|
||||||
const ALLOWED_TYPES = [
|
|
||||||
"application/pdf",
|
|
||||||
"image/png",
|
|
||||||
"image/jpg",
|
|
||||||
"image/jpeg",
|
|
||||||
];
|
|
||||||
|
|
||||||
export const ExpenseSchema = (expenseTypes) => {
|
|
||||||
return z
|
|
||||||
.object({
|
|
||||||
projectId: z.string().min(1, { message: "Project is required" }),
|
|
||||||
expensesTypeId: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Expense type is required" }),
|
|
||||||
paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
|
|
||||||
paidById: z.string().min(1, { message: "Employee name is required" }),
|
|
||||||
transactionDate: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Date is required" })
|
|
||||||
,
|
|
||||||
transactionId: z.string().optional(),
|
|
||||||
description: z.string().min(1, { message: "Description is required" }),
|
|
||||||
location: z.string().min(1, { message: "Location is required" }),
|
|
||||||
supplerName: z.string().min(1, { message: "Supplier name is required" }),
|
|
||||||
gstNumber :z.string().optional(),
|
|
||||||
amount: z.coerce
|
|
||||||
.number({
|
|
||||||
invalid_type_error: "Amount is required and must be a number",
|
|
||||||
})
|
|
||||||
.min(1, "Amount must be Enter")
|
|
||||||
.refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
|
|
||||||
message: "Amount must have at most 2 decimal places",
|
|
||||||
}),
|
|
||||||
noOfPersons: z.coerce.number().optional(),
|
|
||||||
billAttachments: z
|
|
||||||
.array(
|
|
||||||
z.object({
|
|
||||||
fileName: z.string().min(1, { message: "Filename is required" }),
|
|
||||||
base64Data: z.string().nullable(),
|
|
||||||
contentType: z
|
|
||||||
.string()
|
|
||||||
.refine((val) => ALLOWED_TYPES.includes(val), {
|
|
||||||
message: "Only PDF, PNG, JPG, or JPEG files are allowed",
|
|
||||||
}),
|
|
||||||
documentId: z.string().optional(),
|
|
||||||
fileSize: z.number().max(MAX_FILE_SIZE, {
|
|
||||||
message: "File size must be less than or equal to 5MB",
|
|
||||||
}),
|
|
||||||
description: z.string().optional(),
|
|
||||||
isActive: z.boolean().default(true),
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.nonempty({ message: "At least one file attachment is required" }),
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
.refine(
|
|
||||||
(data) => {
|
|
||||||
return (
|
|
||||||
!data.projectId || (data.paidById && data.paidById.trim() !== "")
|
|
||||||
);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
message: "Please select who paid (employee)",
|
|
||||||
path: ["paidById"],
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.superRefine((data, ctx) => {
|
|
||||||
const expenseType = expenseTypes.find((et) => et.id === data.expensesTypeId);
|
|
||||||
if (expenseType?.noOfPersonsRequired && (!data.noOfPersons || data.noOfPersons < 1)) {
|
|
||||||
ctx.addIssue({
|
|
||||||
code: z.ZodIssueCode.custom,
|
|
||||||
message: "No. of Persons is required and must be at least 1",
|
|
||||||
path: ["noOfPersons"],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const defaultExpense = {
|
|
||||||
projectId: "",
|
|
||||||
expensesTypeId: "",
|
|
||||||
paymentModeId: "",
|
|
||||||
paidById: "",
|
|
||||||
transactionDate: "",
|
|
||||||
transactionId: "",
|
|
||||||
description: "",
|
|
||||||
location: "",
|
|
||||||
supplerName: "",
|
|
||||||
amount: "",
|
|
||||||
noOfPersons: "",
|
|
||||||
gstNumber:"",
|
|
||||||
billAttachments: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
export const ExpenseActionScheam = (isReimbursement = false) => {
|
|
||||||
return z
|
|
||||||
.object({
|
|
||||||
comment: z.string().min(1, { message: "Please leave comment" }),
|
|
||||||
statusId: z.string().min(1, { message: "Please select a status" }),
|
|
||||||
reimburseTransactionId: z.string().nullable().optional(),
|
|
||||||
reimburseDate: z.string().nullable().optional(),
|
|
||||||
reimburseById: z.string().nullable().optional(),
|
|
||||||
})
|
|
||||||
.superRefine((data, ctx) => {
|
|
||||||
if (isReimbursement) {
|
|
||||||
if (!data.reimburseTransactionId?.trim()) {
|
|
||||||
ctx.addIssue({
|
|
||||||
code: z.ZodIssueCode.custom,
|
|
||||||
path: ["reimburseTransactionId"],
|
|
||||||
message: "Reimburse Transaction ID is required",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (!data.reimburseDate) {
|
|
||||||
ctx.addIssue({
|
|
||||||
code: z.ZodIssueCode.custom,
|
|
||||||
path: ["reimburseDate"],
|
|
||||||
message: "Reimburse Date is required",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (!data.reimburseById) {
|
|
||||||
ctx.addIssue({
|
|
||||||
code: z.ZodIssueCode.custom,
|
|
||||||
path: ["reimburseById"],
|
|
||||||
message: "Reimburse By is required",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const defaultActionValues = {
|
|
||||||
comment: "",
|
|
||||||
statusId: "",
|
|
||||||
|
|
||||||
reimburseTransactionId: null,
|
|
||||||
reimburseDate: null,
|
|
||||||
reimburseById: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const SearchSchema = z.object({
|
|
||||||
projectIds: z.array(z.string()).optional(),
|
|
||||||
statusIds: z.array(z.string()).optional(),
|
|
||||||
createdByIds: z.array(z.string()).optional(),
|
|
||||||
paidById: z.array(z.string()).optional(),
|
|
||||||
startDate: z.string().optional(),
|
|
||||||
endDate: z.string().optional(),
|
|
||||||
isTransactionDate: z.boolean().default(true),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const defaultFilter = {
|
|
||||||
projectIds: [],
|
|
||||||
statusIds: [],
|
|
||||||
createdByIds: [],
|
|
||||||
paidById: [],
|
|
||||||
isTransactionDate: true,
|
|
||||||
startDate: null,
|
|
||||||
endDate: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
@ -1,306 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
|
|
||||||
<div
|
|
||||||
className={`skeleton mb-2 ${className}`}
|
|
||||||
style={{
|
|
||||||
height,
|
|
||||||
width,
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const ExpenseSkeleton = () => {
|
|
||||||
return (
|
|
||||||
<div className="container p-3">
|
|
||||||
<div className="d-flex justify-content-center">
|
|
||||||
<SkeletonLine height={20} width="200px" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{[...Array(5)].map((_, idx) => (
|
|
||||||
<div className="row my-2" key={idx}>
|
|
||||||
<div className="col-md-6">
|
|
||||||
<SkeletonLine />
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6">
|
|
||||||
<SkeletonLine />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<div className="row my-2">
|
|
||||||
<div className="col-md-12">
|
|
||||||
<SkeletonLine height={60} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="row my-2">
|
|
||||||
<div className="col-md-12">
|
|
||||||
<SkeletonLine height={120} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-center gap-2 mt-3">
|
|
||||||
<SkeletonLine height={35} width="100px" />
|
|
||||||
<SkeletonLine height={35} width="100px" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ExpenseSkeleton;
|
|
||||||
|
|
||||||
export const ExpenseDetailsSkeleton = () => {
|
|
||||||
return (
|
|
||||||
<div className="container px-3">
|
|
||||||
<div className="row mb-3">
|
|
||||||
<div className="d-flex justify-content-center mb-3">
|
|
||||||
<SkeletonLine height={20} width="180px" className="mb-2" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{[...Array(3)].map((_, i) => (
|
|
||||||
<div className="col-12 col-md-4 mb-3" key={`row-1-${i}`}>
|
|
||||||
<SkeletonLine height={14} className="mb-1" />
|
|
||||||
<SkeletonLine />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{[...Array(6)].map((_, i) => (
|
|
||||||
<div className="col-12 col-md-4 mb-3" key={`row-2-${i}`}>
|
|
||||||
<SkeletonLine height={14} className="mb-1" />
|
|
||||||
<SkeletonLine />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<div className="col-12 text-start">
|
|
||||||
<SkeletonLine height={14} width="150px" className="mb-1" />
|
|
||||||
|
|
||||||
<div className="d-flex flex-wrap gap-2">
|
|
||||||
{[...Array(2)].map((_, i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className="border rounded p-2 d-flex flex-column align-items-center"
|
|
||||||
style={{ width: "80px" }}
|
|
||||||
>
|
|
||||||
{/* Icon placeholder */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
height: "30px",
|
|
||||||
width: "30px",
|
|
||||||
|
|
||||||
borderRadius: "4px",
|
|
||||||
marginBottom: "6px",
|
|
||||||
}}
|
|
||||||
className="skeleton"
|
|
||||||
/>
|
|
||||||
{/* Filename placeholder */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
height: "10px",
|
|
||||||
width: "100%",
|
|
||||||
}}
|
|
||||||
className="skeleton"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr className="divider my-1" />
|
|
||||||
|
|
||||||
<div className="col-12 mb-3">
|
|
||||||
<SkeletonLine height={14} width="80px" className="mb-1" />
|
|
||||||
<SkeletonLine height={60} className="mb-2" />
|
|
||||||
<div className="d-flex gap-2 flex-wrap">
|
|
||||||
{[...Array(2)].map((_, i) => (
|
|
||||||
<SkeletonLine
|
|
||||||
key={i}
|
|
||||||
height={30}
|
|
||||||
width="100px"
|
|
||||||
className="rounded"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const SkeletonCell = ({
|
|
||||||
width = "100%",
|
|
||||||
height = 20,
|
|
||||||
className = "",
|
|
||||||
style = {},
|
|
||||||
}) => (
|
|
||||||
<div
|
|
||||||
className={`skeleton ${className}`}
|
|
||||||
style={{
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
borderRadius: 4,
|
|
||||||
...style,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3 }) => {
|
|
||||||
return (
|
|
||||||
<div className="card px-2">
|
|
||||||
<table
|
|
||||||
className="card-body table border-top dataTable no-footer dtr-column text-nowrap"
|
|
||||||
aria-describedby="DataTables_Table_0_info"
|
|
||||||
id="horizontal-example"
|
|
||||||
>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th className="d-none d-sm-table-cell">
|
|
||||||
<div className="text-start ms-5">Expense Type</div>
|
|
||||||
</th>
|
|
||||||
<th className="d-none d-sm-table-cell">
|
|
||||||
<div className="text-start ms-5">Payment Mode</div>
|
|
||||||
</th>
|
|
||||||
<th className="d-none d-sm-table-cell">Submitted By</th>
|
|
||||||
<th className="d-none d-sm-table-cell">Submitted</th>
|
|
||||||
<th className="d-none d-md-table-cell">Amount</th>
|
|
||||||
<th>Status</th>
|
|
||||||
<th>Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
{[...Array(groups)].map((_, groupIdx) => (
|
|
||||||
<React.Fragment key={`group-${groupIdx}`}>
|
|
||||||
{/* Fake Date Group Header Row */}
|
|
||||||
<tr className="bg-light">
|
|
||||||
<td colSpan={8}>
|
|
||||||
<SkeletonCell width="150px" height={20} />
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
{/* Rows under this group */}
|
|
||||||
{[...Array(rowsPerGroup)].map((__, rowIdx) => (
|
|
||||||
<tr
|
|
||||||
key={`row-${groupIdx}-${rowIdx}`}
|
|
||||||
className={rowIdx % 2 === 0 ? "odd" : "even"}
|
|
||||||
>
|
|
||||||
{/* Expense Type */}
|
|
||||||
<td className="text-start d-none d-sm-table-cell ms-5">
|
|
||||||
<SkeletonCell width="90px" height={16} />
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{/* Payment Mode */}
|
|
||||||
<td className="text-start d-none d-sm-table-cell ms-5">
|
|
||||||
<SkeletonCell width="90px" height={16} />
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{/* Submitted By (Avatar + name) */}
|
|
||||||
<td className="text-start d-none d-sm-table-cell ms-5">
|
|
||||||
<div className="d-flex align-items-center gap-2">
|
|
||||||
<SkeletonCell
|
|
||||||
width="30px"
|
|
||||||
height={30}
|
|
||||||
className="rounded-circle"
|
|
||||||
/>
|
|
||||||
<SkeletonCell width="80px" height={16} />
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
{/* Submitted */}
|
|
||||||
<td className="d-none d-md-table-cell text-end">
|
|
||||||
<SkeletonCell width="70px" height={16} />
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{/* Amount */}
|
|
||||||
<td className="d-none d-md-table-cell text-end">
|
|
||||||
<SkeletonCell width="60px" height={16} />
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{/* Status */}
|
|
||||||
<td>
|
|
||||||
<SkeletonCell
|
|
||||||
width="80px"
|
|
||||||
height={22}
|
|
||||||
className="rounded"
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{/* Action */}
|
|
||||||
<td>
|
|
||||||
<div className="d-flex justify-content-center align-items-center gap-2">
|
|
||||||
{[...Array(3)].map((__, i) => (
|
|
||||||
<SkeletonCell
|
|
||||||
key={i}
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
className="rounded"
|
|
||||||
style={{ display: "inline-block" }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</React.Fragment>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ExpenseFilterSkeleton = () => {
|
|
||||||
return (
|
|
||||||
<div className="p-3 text-start">
|
|
||||||
{/* Created Date Label and Skeleton */}
|
|
||||||
<div className="mb-3 w-100">
|
|
||||||
<SkeletonLine height={14} width="120px" className="mb-1" />
|
|
||||||
<SkeletonLine height={36} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="row g-2">
|
|
||||||
{/* Project Select */}
|
|
||||||
<div className="col-12 col-md-4 mb-3">
|
|
||||||
<SkeletonLine height={14} width="80px" className="mb-1" />
|
|
||||||
<SkeletonLine height={36} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Submitted By Select */}
|
|
||||||
<div className="col-12 col-md-4 mb-3">
|
|
||||||
<SkeletonLine height={14} width="100px" className="mb-1" />
|
|
||||||
<SkeletonLine height={36} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Paid By Select */}
|
|
||||||
<div className="col-12 col-md-4 mb-3">
|
|
||||||
<SkeletonLine height={14} width="70px" className="mb-1" />
|
|
||||||
<SkeletonLine height={36} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Status Checkboxes */}
|
|
||||||
<div className="col-12 mb-3">
|
|
||||||
<SkeletonLine height={14} width="80px" className="mb-2" />
|
|
||||||
<div className="d-flex flex-wrap">
|
|
||||||
{[...Array(3)].map((_, i) => (
|
|
||||||
<div className="d-flex align-items-center me-3 mb-2" key={i}>
|
|
||||||
<div
|
|
||||||
className="form-check-input bg-secondary me-2"
|
|
||||||
style={{
|
|
||||||
height: "16px",
|
|
||||||
width: "16px",
|
|
||||||
borderRadius: "3px",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<SkeletonLine height={14} width="60px" />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Buttons */}
|
|
||||||
<div className="d-flex justify-content-end py-3 gap-2">
|
|
||||||
<SkeletonLine height={30} width="80px" className="rounded" />
|
|
||||||
<SkeletonLine height={30} width="80px" className="rounded" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,68 +0,0 @@
|
|||||||
import { useState,useMemo } from "react";
|
|
||||||
import Avatar from "../common/Avatar";
|
|
||||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
||||||
|
|
||||||
|
|
||||||
const ExpenseStatusLogs = ({ data }) => {
|
|
||||||
const [visibleCount, setVisibleCount] = useState(4);
|
|
||||||
|
|
||||||
const sortedLogs = useMemo(() => {
|
|
||||||
if (!data?.expenseLogs) return [];
|
|
||||||
return [...data.expenseLogs].sort(
|
|
||||||
(a, b) => new Date(b.updateAt) - new Date(a.updateAt)
|
|
||||||
);
|
|
||||||
}, [data?.expenseLogs]);
|
|
||||||
|
|
||||||
const logsToShow = sortedLogs.slice(0, visibleCount);
|
|
||||||
|
|
||||||
const handleShowMore = () => {
|
|
||||||
setVisibleCount((prev) => prev + 4);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="row g-2">
|
|
||||||
{logsToShow.map((log) => (
|
|
||||||
<div key={log.id} className="col-12 d-flex align-items-start mb-1">
|
|
||||||
<Avatar
|
|
||||||
size="xs"
|
|
||||||
firstName={log.updatedBy.firstName}
|
|
||||||
lastName={log.updatedBy.lastName}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="flex-grow-1">
|
|
||||||
<div className="text-start">
|
|
||||||
<div className="flex">
|
|
||||||
<span>{`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}</span>
|
|
||||||
<small className="text-secondary text-tiny ms-2">
|
|
||||||
<em>{log.action}</em>
|
|
||||||
</small>
|
|
||||||
<span className="text-tiny text-secondary d-block" >
|
|
||||||
{formatUTCToLocalTime(log.updateAt,true)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="d-flex align-items-center text-muted small mt-1">
|
|
||||||
<span>{log.comment}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{sortedLogs.length > visibleCount && (
|
|
||||||
<div className="text-center my-1">
|
|
||||||
<button
|
|
||||||
className="btn btn-xs btn-outline-primary"
|
|
||||||
onClick={handleShowMore}
|
|
||||||
>
|
|
||||||
Show More
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
export default ExpenseStatusLogs;
|
|
||||||
@ -1,578 +0,0 @@
|
|||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { defaultExpense, ExpenseSchema } from "./ExpenseSchema";
|
|
||||||
import { formatFileSize } from "../../utils/appUtils";
|
|
||||||
import { useProjectName } from "../../hooks/useProjects";
|
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
|
||||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
|
||||||
import useMaster, {
|
|
||||||
useExpenseStatus,
|
|
||||||
useExpenseType,
|
|
||||||
usePaymentMode,
|
|
||||||
} from "../../hooks/masterHook/useMaster";
|
|
||||||
import {
|
|
||||||
useEmployeesAllOrByProjectId,
|
|
||||||
useEmployeesByProject,
|
|
||||||
useEmployeesName,
|
|
||||||
useEmployeesNameByProject,
|
|
||||||
} from "../../hooks/useEmployees";
|
|
||||||
import Avatar from "../common/Avatar";
|
|
||||||
import {
|
|
||||||
useCreateExpnse,
|
|
||||||
useExpense,
|
|
||||||
useUpdateExpense,
|
|
||||||
} from "../../hooks/useExpense";
|
|
||||||
import ExpenseSkeleton from "./ExpenseSkeleton";
|
|
||||||
import moment from "moment";
|
|
||||||
import DatePicker from "../common/DatePicker";
|
|
||||||
import ErrorPage from "../../pages/ErrorPage";
|
|
||||||
|
|
||||||
const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|
||||||
const {
|
|
||||||
data,
|
|
||||||
isLoading,
|
|
||||||
error: ExpenseErrorLoad,
|
|
||||||
} = useExpense(expenseToEdit);
|
|
||||||
console.log(data)
|
|
||||||
const [ExpenseType, setExpenseType] = useState();
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const {
|
|
||||||
ExpenseTypes,
|
|
||||||
loading: ExpenseLoading,
|
|
||||||
error: ExpenseError,
|
|
||||||
} = useExpenseType();
|
|
||||||
const schema = ExpenseSchema(ExpenseTypes);
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
watch,
|
|
||||||
setValue,
|
|
||||||
reset,
|
|
||||||
control,
|
|
||||||
formState: { errors },
|
|
||||||
} = useForm({
|
|
||||||
resolver: zodResolver(schema),
|
|
||||||
defaultValues: defaultExpense,
|
|
||||||
});
|
|
||||||
|
|
||||||
const selectedproject = watch("projectId");
|
|
||||||
|
|
||||||
const {
|
|
||||||
projectNames,
|
|
||||||
loading: projectLoading,
|
|
||||||
error,
|
|
||||||
isError: isProjectError,
|
|
||||||
} = useProjectName();
|
|
||||||
|
|
||||||
const {
|
|
||||||
PaymentModes,
|
|
||||||
loading: PaymentModeLoading,
|
|
||||||
error: PaymentModeError,
|
|
||||||
} = usePaymentMode();
|
|
||||||
const {
|
|
||||||
ExpenseStatus,
|
|
||||||
loading: StatusLoadding,
|
|
||||||
error: stausError,
|
|
||||||
} = useExpenseStatus();
|
|
||||||
const {
|
|
||||||
data: employees,
|
|
||||||
isLoading: EmpLoading,
|
|
||||||
isError: isEmployeeError,
|
|
||||||
} = useEmployeesNameByProject(selectedproject);
|
|
||||||
const files = watch("billAttachments");
|
|
||||||
const onFileChange = async (e) => {
|
|
||||||
const newFiles = Array.from(e.target.files);
|
|
||||||
if (newFiles.length === 0) return;
|
|
||||||
|
|
||||||
const existingFiles = watch("billAttachments") || [];
|
|
||||||
|
|
||||||
const parsedFiles = await Promise.all(
|
|
||||||
newFiles.map(async (file) => {
|
|
||||||
const base64Data = await toBase64(file);
|
|
||||||
return {
|
|
||||||
fileName: file.name,
|
|
||||||
base64Data,
|
|
||||||
contentType: file.type,
|
|
||||||
fileSize: file.size,
|
|
||||||
description: "",
|
|
||||||
isActive: true,
|
|
||||||
};
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
const combinedFiles = [
|
|
||||||
...existingFiles,
|
|
||||||
...parsedFiles.filter(
|
|
||||||
(newFile) =>
|
|
||||||
!existingFiles.some(
|
|
||||||
(f) =>
|
|
||||||
f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
|
|
||||||
)
|
|
||||||
),
|
|
||||||
];
|
|
||||||
|
|
||||||
setValue("billAttachments", combinedFiles, {
|
|
||||||
shouldDirty: true,
|
|
||||||
shouldValidate: true,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const toBase64 = (file) =>
|
|
||||||
new Promise((resolve, reject) => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
reader.onload = () => resolve(reader.result.split(",")[1]);
|
|
||||||
reader.onerror = (error) => reject(error);
|
|
||||||
});
|
|
||||||
const removeFile = (index) => {
|
|
||||||
if (expenseToEdit) {
|
|
||||||
const newFiles = files.map((file, i) => {
|
|
||||||
if (file.documentId !== index) return file;
|
|
||||||
return {
|
|
||||||
...file,
|
|
||||||
isActive: false,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
setValue("billAttachments", newFiles, { shouldValidate: true });
|
|
||||||
} else {
|
|
||||||
const newFiles = files.filter((_, i) => i !== index);
|
|
||||||
setValue("billAttachments", newFiles, { shouldValidate: true });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (expenseToEdit && data ) {
|
|
||||||
|
|
||||||
reset({
|
|
||||||
projectId: data.project.id || "",
|
|
||||||
expensesTypeId: data.expensesType.id || "",
|
|
||||||
paymentModeId: data.paymentMode.id || "",
|
|
||||||
paidById: data.paidBy.id || "",
|
|
||||||
transactionDate: data.transactionDate?.slice(0, 10) || "",
|
|
||||||
transactionId: data.transactionId || "",
|
|
||||||
description: data.description || "",
|
|
||||||
location: data.location || "",
|
|
||||||
supplerName: data.supplerName || "",
|
|
||||||
amount: data.amount || "",
|
|
||||||
noOfPersons: data.noOfPersons || "",
|
|
||||||
gstNumber:data.gstNumber || "",
|
|
||||||
billAttachments: data.documents
|
|
||||||
? data.documents.map((doc) => ({
|
|
||||||
fileName: doc.fileName,
|
|
||||||
base64Data: null,
|
|
||||||
contentType: doc.contentType,
|
|
||||||
documentId: doc.documentId,
|
|
||||||
fileSize: 0,
|
|
||||||
description: "",
|
|
||||||
preSignedUrl: doc.preSignedUrl,
|
|
||||||
isActive: doc.isActive ?? true,
|
|
||||||
}))
|
|
||||||
: [],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [data, reset, employees]);
|
|
||||||
const { mutate: ExpenseUpdate, isPending } = useUpdateExpense(() =>
|
|
||||||
handleClose()
|
|
||||||
);
|
|
||||||
const { mutate: CreateExpense, isPending: createPending } = useCreateExpnse(
|
|
||||||
() => {
|
|
||||||
handleClose();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
const onSubmit = (fromdata) => {
|
|
||||||
let payload = {
|
|
||||||
...fromdata,
|
|
||||||
transactionDate: moment
|
|
||||||
.utc(fromdata.transactionDate, "DD-MM-YYYY")
|
|
||||||
.toISOString(),
|
|
||||||
};
|
|
||||||
if (expenseToEdit) {
|
|
||||||
const editPayload = { ...payload, id: data.id };
|
|
||||||
ExpenseUpdate({ id: data.id, payload: editPayload });
|
|
||||||
} else {
|
|
||||||
CreateExpense(payload);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const ExpenseTypeId = watch("expensesTypeId");
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setExpenseType(ExpenseTypes?.find((type) => type.id === ExpenseTypeId));
|
|
||||||
}, [ExpenseTypeId]);
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
reset();
|
|
||||||
closeModal();
|
|
||||||
};
|
|
||||||
if (StatusLoadding || projectLoading || ExpenseLoading || isLoading)
|
|
||||||
return <ExpenseSkeleton />;
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="container p-3">
|
|
||||||
<h5 className="m-0">
|
|
||||||
{expenseToEdit ? "Update Expense " : "Create New Expense"}
|
|
||||||
</h5>
|
|
||||||
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<div className="row my-2">
|
|
||||||
<div className="col-md-6">
|
|
||||||
<label className="form-label">Select Project</label>
|
|
||||||
<select
|
|
||||||
className="form-select form-select-sm"
|
|
||||||
{...register("projectId")}
|
|
||||||
>
|
|
||||||
<option value="">Select Project</option>
|
|
||||||
{projectLoading ? (
|
|
||||||
<option>Loading...</option>
|
|
||||||
) : (
|
|
||||||
projectNames?.map((project) => (
|
|
||||||
<option key={project.id} value={project.id}>
|
|
||||||
{project.name}
|
|
||||||
</option>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
{errors.projectId && (
|
|
||||||
<small className="danger-text">{errors.projectId.message}</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-md-6">
|
|
||||||
<label htmlFor="expensesTypeId" className="form-label">
|
|
||||||
Expense Type
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
className="form-select form-select-sm"
|
|
||||||
id="expensesTypeId"
|
|
||||||
{...register("expensesTypeId")}
|
|
||||||
>
|
|
||||||
<option value="" disabled>
|
|
||||||
Select Type
|
|
||||||
</option>
|
|
||||||
{ExpenseLoading ? (
|
|
||||||
<option disabled>Loading...</option>
|
|
||||||
) : (
|
|
||||||
ExpenseTypes?.map((expense) => (
|
|
||||||
<option key={expense.id} value={expense.id}>
|
|
||||||
{expense.name}
|
|
||||||
</option>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
{errors.expensesTypeId && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.expensesTypeId.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="row my-2">
|
|
||||||
<div className="col-md-6">
|
|
||||||
<label htmlFor="paymentModeId" className="form-label">
|
|
||||||
Payment Mode
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
className="form-select form-select-sm"
|
|
||||||
id="paymentModeId"
|
|
||||||
{...register("paymentModeId")}
|
|
||||||
>
|
|
||||||
<option value="" disabled>
|
|
||||||
Select Mode
|
|
||||||
</option>
|
|
||||||
{PaymentModeLoading ? (
|
|
||||||
<option disabled>Loading...</option>
|
|
||||||
) : (
|
|
||||||
PaymentModes?.map((payment) => (
|
|
||||||
<option key={payment.id} value={payment.id}>
|
|
||||||
{payment.name}
|
|
||||||
</option>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
{errors.paymentModeId && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.paymentModeId.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-md-6">
|
|
||||||
<label htmlFor="paidById" className="form-label ">
|
|
||||||
Paid By
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
className="form-select form-select-sm"
|
|
||||||
id="paymentModeId"
|
|
||||||
{...register("paidById")}
|
|
||||||
disabled={!selectedproject}
|
|
||||||
>
|
|
||||||
<option value="" disabled>
|
|
||||||
Select Person
|
|
||||||
</option>
|
|
||||||
{EmpLoading ? (
|
|
||||||
<option disabled>Loading...</option>
|
|
||||||
) : (
|
|
||||||
employees?.map((emp) => (
|
|
||||||
<option key={emp.id} value={emp.id}>
|
|
||||||
{`${emp.firstName} ${emp.lastName} `}
|
|
||||||
</option>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
{errors.paidById && (
|
|
||||||
<small className="danger-text">{errors.paidById.message}</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="row my-2">
|
|
||||||
<div className="col-md-6">
|
|
||||||
<label htmlFor="transactionDate" className="form-label ">
|
|
||||||
Transaction Date
|
|
||||||
</label>
|
|
||||||
<DatePicker name="transactionDate" control={control} />
|
|
||||||
|
|
||||||
{errors.transactionDate && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.transactionDate.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-md-6">
|
|
||||||
<label htmlFor="amount" className="form-label ">
|
|
||||||
Amount
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
id="amount"
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
min="1"
|
|
||||||
step="0.01"
|
|
||||||
inputMode="decimal"
|
|
||||||
{...register("amount", { valueAsNumber: true })}
|
|
||||||
/>
|
|
||||||
{errors.amount && (
|
|
||||||
<small className="danger-text">{errors.amount.message}</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="row my-2">
|
|
||||||
<div className="col-md-6">
|
|
||||||
<label htmlFor="supplerName" className="form-label ">
|
|
||||||
Supplier Name/Transporter Name/Other
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="supplerName"
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
{...register("supplerName")}
|
|
||||||
/>
|
|
||||||
{errors.supplerName && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.supplerName.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-md-6">
|
|
||||||
<label htmlFor="location" className="form-label ">
|
|
||||||
Location
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="location"
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
{...register("location")}
|
|
||||||
/>
|
|
||||||
{errors.location && (
|
|
||||||
<small className="danger-text">{errors.location.message}</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="row my-2">
|
|
||||||
<div className="col-md-6">
|
|
||||||
<label htmlFor="statusId" className="form-label ">
|
|
||||||
TransactionId
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="transactionId"
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
min="1"
|
|
||||||
{...register("transactionId")}
|
|
||||||
/>
|
|
||||||
{errors.transactionId && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.transactionId.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6">
|
|
||||||
<label htmlFor="statusId" className="form-label ">
|
|
||||||
GST Number
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="gstNumber"
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
min="1"
|
|
||||||
{...register("gstNumber")}
|
|
||||||
/>
|
|
||||||
{errors.gstNumber && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.gstNumber.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{ExpenseType?.noOfPersonsRequired && (
|
|
||||||
<div className="col-md-6 mt-2">
|
|
||||||
<label className="form-label ">No. of Persons</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
id="noOfPersons"
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
{...register("noOfPersons")}
|
|
||||||
inputMode="numeric"
|
|
||||||
/>
|
|
||||||
{errors.noOfPersons && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.noOfPersons.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="row my-2">
|
|
||||||
<div className="col-md-12">
|
|
||||||
<label htmlFor="description" className="form-label ">Description</label>
|
|
||||||
<textarea
|
|
||||||
id="description"
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
{...register("description")}
|
|
||||||
rows="2"
|
|
||||||
></textarea>
|
|
||||||
{errors.description && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.description.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="row my-2">
|
|
||||||
<div className="col-md-12">
|
|
||||||
<label className="form-label ">Upload Bill </label>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
|
|
||||||
style={{ cursor: "pointer" }}
|
|
||||||
onClick={() => document.getElementById("billAttachments").click()}
|
|
||||||
>
|
|
||||||
<i className="bx bx-cloud-upload d-block bx-lg"></i>
|
|
||||||
<span className="text-muted d-block">
|
|
||||||
Click to select or click here to browse
|
|
||||||
</span>
|
|
||||||
<small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
id="billAttachments"
|
|
||||||
accept=".pdf,.jpg,.jpeg,.png"
|
|
||||||
multiple
|
|
||||||
style={{ display: "none" }}
|
|
||||||
{...register("billAttachments")}
|
|
||||||
onChange={(e) => {
|
|
||||||
onFileChange(e);
|
|
||||||
e.target.value = "";
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{errors.billAttachments && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.billAttachments.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
{files.length > 0 && (
|
|
||||||
<div className="d-block">
|
|
||||||
{files
|
|
||||||
.filter((file) => {
|
|
||||||
if (expenseToEdit) {
|
|
||||||
return file.isActive;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
})
|
|
||||||
.map((file, idx) => (
|
|
||||||
<a
|
|
||||||
key={idx}
|
|
||||||
className="d-flex justify-content-between text-start p-1"
|
|
||||||
href={file.preSignedUrl || "#"}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<span className="mb-0 text-secondary small d-block">
|
|
||||||
{file.fileName}
|
|
||||||
</span>
|
|
||||||
<span className="text-body-secondary small d-block">
|
|
||||||
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<i
|
|
||||||
className="bx bx-trash bx-sm cursor-pointer text-danger"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
removeFile(expenseToEdit ? file.documentId : idx);
|
|
||||||
}}
|
|
||||||
></i>
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{Array.isArray(errors.billAttachments) &&
|
|
||||||
errors.billAttachments.map((fileError, index) => (
|
|
||||||
<div key={index} className="danger-text small mt-1">
|
|
||||||
{
|
|
||||||
(fileError?.fileSize?.message ||
|
|
||||||
fileError?.contentType?.message ||
|
|
||||||
fileError?.base64Data?.message,
|
|
||||||
fileError?.documentId?.message)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-center gap-3">
|
|
||||||
{" "}
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-primary btn-sm mt-3"
|
|
||||||
disabled={isPending || createPending}
|
|
||||||
>
|
|
||||||
{isPending || createPending
|
|
||||||
? "Please Wait..."
|
|
||||||
: expenseToEdit
|
|
||||||
? "Update"
|
|
||||||
: "Submit"}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="reset"
|
|
||||||
disabled={isPending || createPending}
|
|
||||||
onClick={handleClose}
|
|
||||||
className="btn btn-secondary btn-sm mt-3"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ManageExpense;
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
const PreviewDocument = ({ imageUrl }) => {
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="d-flex justify-content-center align-items-center" style={{ minHeight: "50vh" }}>
|
|
||||||
{loading && (
|
|
||||||
<div className="text-secondary text-center mb-2">
|
|
||||||
Loading...
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<img
|
|
||||||
src={imageUrl}
|
|
||||||
alt="Full View"
|
|
||||||
className="img-fluid"
|
|
||||||
style={{
|
|
||||||
maxHeight: "100vh",
|
|
||||||
objectFit: "contain",
|
|
||||||
display: loading ? "none" : "block",
|
|
||||||
}}
|
|
||||||
onLoad={() => setLoading(false)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PreviewDocument;
|
|
||||||
@ -1,466 +0,0 @@
|
|||||||
import React, { useState, useMemo } from "react";
|
|
||||||
import {
|
|
||||||
useActionOnExpense,
|
|
||||||
useExpense,
|
|
||||||
useHasAnyPermission,
|
|
||||||
} from "../../hooks/useExpense";
|
|
||||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
|
|
||||||
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
|
||||||
import { getColorNameFromHex, getIconByFileType } from "../../utils/appUtils";
|
|
||||||
import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
|
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
||||||
import {
|
|
||||||
EXPENSE_REJECTEDBY,
|
|
||||||
PROCESS_EXPENSE,
|
|
||||||
REVIEW_EXPENSE,
|
|
||||||
} from "../../utils/constants";
|
|
||||||
import { useProfile } from "../../hooks/useProfile";
|
|
||||||
import { useSelector } from "react-redux";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import Avatar from "../common/Avatar";
|
|
||||||
import Error from "../common/Error";
|
|
||||||
import DatePicker from "../common/DatePicker";
|
|
||||||
import { useEmployeeRoles, useEmployeesName } from "../../hooks/useEmployees";
|
|
||||||
import EmployeeSearchInput from "../common/EmployeeSearchInput";
|
|
||||||
import { z } from "zod";
|
|
||||||
import moment from "moment";
|
|
||||||
import ExpenseStatusLogs from "./ExpenseStatusLogs";
|
|
||||||
|
|
||||||
const ViewExpense = ({ ExpenseId }) => {
|
|
||||||
const { data, isLoading, isError, error, isFetching } = useExpense(ExpenseId);
|
|
||||||
const [IsPaymentProcess, setIsPaymentProcess] = useState(false);
|
|
||||||
const [clickedStatusId, setClickedStatusId] = useState(null);
|
|
||||||
|
|
||||||
const IsReview = useHasUserPermission(REVIEW_EXPENSE);
|
|
||||||
const [imageLoaded, setImageLoaded] = useState({});
|
|
||||||
const { setDocumentView } = useExpenseContext();
|
|
||||||
const ActionSchema = ExpenseActionScheam(IsPaymentProcess) ?? z.object({});
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
setValue,
|
|
||||||
reset,
|
|
||||||
control,
|
|
||||||
formState: { errors },
|
|
||||||
} = useForm({
|
|
||||||
resolver: zodResolver(ActionSchema),
|
|
||||||
defaultValues: defaultActionValues,
|
|
||||||
});
|
|
||||||
|
|
||||||
const userPermissions = useSelector(
|
|
||||||
(state) => state?.globalVariables?.loginUser?.featurePermissions || []
|
|
||||||
);
|
|
||||||
const CurrentUser = useSelector(
|
|
||||||
(state) => state?.globalVariables?.loginUser?.employeeInfo
|
|
||||||
);
|
|
||||||
|
|
||||||
const nextStatusWithPermission = useMemo(() => {
|
|
||||||
if (!Array.isArray(data?.nextStatus)) return [];
|
|
||||||
|
|
||||||
return data.nextStatus.filter((status) => {
|
|
||||||
const permissionIds = Array.isArray(status?.permissionIds)
|
|
||||||
? status.permissionIds
|
|
||||||
: [];
|
|
||||||
|
|
||||||
if (permissionIds.length === 0) return true;
|
|
||||||
if (permissionIds.includes(PROCESS_EXPENSE)) {
|
|
||||||
setIsPaymentProcess(true);
|
|
||||||
}
|
|
||||||
return permissionIds.some((id) => userPermissions.includes(id));
|
|
||||||
});
|
|
||||||
}, [data, userPermissions]);
|
|
||||||
|
|
||||||
const IsRejectedExpense = useMemo(() => {
|
|
||||||
return EXPENSE_REJECTEDBY.includes(data?.status?.id);
|
|
||||||
}, [data]);
|
|
||||||
|
|
||||||
const isCreatedBy = useMemo(() => {
|
|
||||||
return data?.createdBy.id === CurrentUser?.id;
|
|
||||||
}, [data, CurrentUser]);
|
|
||||||
|
|
||||||
const { mutate: MakeAction, isPending } = useActionOnExpense(() => {
|
|
||||||
setClickedStatusId(null);
|
|
||||||
reset();
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = (formData) => {
|
|
||||||
const Payload = {
|
|
||||||
...formData,
|
|
||||||
reimburseDate: moment
|
|
||||||
.utc(formData.reimburseDate, "DD-MM-YYYY")
|
|
||||||
.toISOString(),
|
|
||||||
expenseId: ExpenseId,
|
|
||||||
comment: formData.comment,
|
|
||||||
};
|
|
||||||
MakeAction(Payload);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isLoading) return <ExpenseDetailsSkeleton />;
|
|
||||||
if (isError) return <Error error={error} />;
|
|
||||||
const handleImageLoad = (id) => {
|
|
||||||
setImageLoaded((prev) => ({ ...prev, [id]: true }));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<div className="row mb-3">
|
|
||||||
<div className="col-12 mb-3">
|
|
||||||
<h5 className="fw-semibold">Expense Details</h5>
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
<div className="text-start mb-2">
|
|
||||||
<div className="text-muted">{data?.description}</div>
|
|
||||||
</div>
|
|
||||||
{/* Row 1 */}
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
Transaction Date :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">
|
|
||||||
{formatUTCToLocalTime(data?.transactionDate)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
Expense Type :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{data?.expensesType?.name}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Row 2 */}
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
Supplier :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{data?.supplerName}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
Amount :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">₹ {data.amount}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Row 3 */}
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
Payment Mode :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{data?.paymentMode?.name}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{data?.gstNumber && (
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
GST Number :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{data?.gstNumber}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Row 4 */}
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
Status :
|
|
||||||
</label>
|
|
||||||
<span
|
|
||||||
className={`badge bg-label-${
|
|
||||||
getColorNameFromHex(data?.status?.color) || "secondary"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{data?.status?.name}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
Pre-Approved :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
Project :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{data?.project?.name}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
Created At :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">
|
|
||||||
{formatUTCToLocalTime(data?.createdAt, true)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Row 6 */}
|
|
||||||
{data.createdBy && (
|
|
||||||
<div className="col-md-6 text-start">
|
|
||||||
<div className="d-flex align-items-center">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
Created By :
|
|
||||||
</label>
|
|
||||||
<div className="d-flex align-items-center">
|
|
||||||
<Avatar
|
|
||||||
size="xs"
|
|
||||||
classAvatar="m-0"
|
|
||||||
firstName={data.createdBy?.firstName}
|
|
||||||
lastName={data.createdBy?.lastName}
|
|
||||||
/>
|
|
||||||
<span className="text-muted">
|
|
||||||
{`${data.createdBy?.firstName ?? ""} ${
|
|
||||||
data.createdBy?.lastName ?? ""
|
|
||||||
}`.trim() || "N/A"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="col-md-6 text-start">
|
|
||||||
<div className="d-flex align-items-center">
|
|
||||||
<label
|
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
|
||||||
style={{ minWidth: "130px" }}
|
|
||||||
>
|
|
||||||
Paid By:
|
|
||||||
</label>
|
|
||||||
<div className="d-flex align-items-center ">
|
|
||||||
<Avatar
|
|
||||||
size="xs"
|
|
||||||
classAvatar="m-0"
|
|
||||||
firstName={data.paidBy?.firstName}
|
|
||||||
lastName={data.paidBy?.lastName}
|
|
||||||
/>
|
|
||||||
<span className="text-muted">
|
|
||||||
{`${data.paidBy?.firstName ?? ""} ${
|
|
||||||
data.paidBy?.lastName ?? ""
|
|
||||||
}`.trim() || "N/A"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 text-start">
|
|
||||||
<label className="form-label me-2 mb-2 fw-semibold">Attachment :</label>
|
|
||||||
|
|
||||||
<div className="d-flex flex-wrap gap-2">
|
|
||||||
{data?.documents?.map((doc) => {
|
|
||||||
const isImage = doc.contentType?.includes("image");
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={doc.documentId}
|
|
||||||
className="border rounded hover-scale p-2 d-flex flex-column align-items-center"
|
|
||||||
style={{
|
|
||||||
width: "80px",
|
|
||||||
cursor: isImage ? "pointer" : "default",
|
|
||||||
}}
|
|
||||||
onClick={() => {
|
|
||||||
if (isImage) {
|
|
||||||
setDocumentView({
|
|
||||||
IsOpen: true,
|
|
||||||
Image: doc.preSignedUrl,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
className={`bx ${getIconByFileType(doc.contentType)}`}
|
|
||||||
style={{ fontSize: "30px" }}
|
|
||||||
></i>
|
|
||||||
<small
|
|
||||||
className="text-center text-tiny text-truncate w-100"
|
|
||||||
title={doc.fileName}
|
|
||||||
>
|
|
||||||
{doc.fileName}
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{data.expensesReimburse && (
|
|
||||||
<div className="row text-start mt-2">
|
|
||||||
<div className="col-md-6 mb-sm-0 mb-2">
|
|
||||||
<label className="form-label me-2 mb-0 fw-semibold">
|
|
||||||
Transaction ID :
|
|
||||||
</label>
|
|
||||||
{data.expensesReimburse.reimburseTransactionId || "N/A"}
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6 ">
|
|
||||||
<label className="form-label me-2 mb-0 fw-semibold">
|
|
||||||
Reimburse Date :
|
|
||||||
</label>
|
|
||||||
{formatUTCToLocalTime(data.expensesReimburse.reimburseDate)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{data.expensesReimburse && (
|
|
||||||
<>
|
|
||||||
<div className="col-md-6 d-flex align-items-center">
|
|
||||||
<label className="form-label me-2 mb-0 fw-semibold">
|
|
||||||
Reimburse By :
|
|
||||||
</label>
|
|
||||||
<Avatar
|
|
||||||
size="xs"
|
|
||||||
classAvatar="m-0 me-1"
|
|
||||||
firstName={data?.expensesReimburse?.reimburseBy?.firstName}
|
|
||||||
lastName={data?.expensesReimburse?.reimburseBy?.lastName}
|
|
||||||
/>
|
|
||||||
<span className="text-muted">
|
|
||||||
{`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<hr className="divider my-1 border-2 divider-primary my-2" />
|
|
||||||
|
|
||||||
{Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
|
|
||||||
<>
|
|
||||||
{IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-12 col-md-6 text-start">
|
|
||||||
<label className="form-label">Transaction Id </label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
{...register("reimburseTransactionId")}
|
|
||||||
/>
|
|
||||||
{errors.reimburseTransactionId && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.reimburseTransactionId.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-6 text-start">
|
|
||||||
<label className="form-label">Transaction Date </label>
|
|
||||||
<DatePicker
|
|
||||||
name="reimburseDate"
|
|
||||||
control={control}
|
|
||||||
minDate={data?.transactionDate}
|
|
||||||
/>
|
|
||||||
{errors.reimburseDate && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.reimburseDate.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-6 text-start">
|
|
||||||
<label className="form-label">Reimburse By </label>
|
|
||||||
<EmployeeSearchInput
|
|
||||||
control={control}
|
|
||||||
name="reimburseById"
|
|
||||||
projectId={null}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="col-12 mb-3 text-start">
|
|
||||||
{((nextStatusWithPermission.length > 0 && !IsRejectedExpense) ||
|
|
||||||
(IsRejectedExpense && isCreatedBy)) && (
|
|
||||||
<>
|
|
||||||
<label className="form-label me-2 mb-0">Comment:</label>
|
|
||||||
<textarea
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
{...register("comment")}
|
|
||||||
rows="2"
|
|
||||||
/>
|
|
||||||
{errors.comment && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.comment.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{nextStatusWithPermission?.length > 0 &&
|
|
||||||
(!IsRejectedExpense || isCreatedBy) && (
|
|
||||||
<div className="text-center flex-wrap gap-2 my-2">
|
|
||||||
{nextStatusWithPermission.map((status, index) => (
|
|
||||||
<button
|
|
||||||
key={status.id || index}
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
setClickedStatusId(status.id);
|
|
||||||
setValue("statusId", status.id);
|
|
||||||
handleSubmit(onSubmit)();
|
|
||||||
}}
|
|
||||||
disabled={isPending || isFetching}
|
|
||||||
className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
|
|
||||||
>
|
|
||||||
{isPending && clickedStatusId === status.id
|
|
||||||
? "Please Wait..."
|
|
||||||
: status.displayName || status.name}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<ExpenseStatusLogs data={data} />
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ViewExpense;
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import { zodResolver } from '@hookform/resolvers/zod'
|
|
||||||
import React from 'react'
|
|
||||||
import { FormProvider, useForm, useFormContext } from 'react-hook-form'
|
|
||||||
import { defaultFilterValues, filterSchema } from './TenantSchema'
|
|
||||||
import Label from '../common/Label'
|
|
||||||
import SelectMultiple from '../common/SelectMultiple'
|
|
||||||
import { useIndustries } from '../../hooks/useTenant'
|
|
||||||
|
|
||||||
const TenantFilterPanel = () => {
|
|
||||||
|
|
||||||
const method = useForm({
|
|
||||||
resolver:zodResolver(filterSchema),
|
|
||||||
defaultValues:defaultFilterValues
|
|
||||||
})
|
|
||||||
const {control, register, handleSubmit, reset, watch} = method;
|
|
||||||
const {data,isError,isLoading} = useIndustries()
|
|
||||||
console.log(data)
|
|
||||||
const onSubmit =()=>{
|
|
||||||
|
|
||||||
}
|
|
||||||
if(isLoading) return <div className='text-center'>Loading...</div>
|
|
||||||
return (
|
|
||||||
<FormProvider {...method}>
|
|
||||||
<form onsubmit={(handleSubmit(onSubmit))} >
|
|
||||||
<div className='text-start mb-1'>
|
|
||||||
<SelectMultiple
|
|
||||||
name="industryIds"
|
|
||||||
label="Industries :"
|
|
||||||
options={data}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</FormProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TenantFilterPanel
|
|
||||||
@ -64,24 +64,6 @@ export const subscriptionDefaultValues = {
|
|||||||
autoRenew: false,
|
autoRenew: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export const filterSchema = z.object({
|
|
||||||
industryIds: z.array(z.string()).optional(),
|
|
||||||
createdByIds: z.array(z.string()).optional(),
|
|
||||||
tenantStatusIds: z.array(z.string()).optional(),
|
|
||||||
references: z.array(z.string()).optional(),
|
|
||||||
startDate: z.string().optional(),
|
|
||||||
endDate: z.string().optional(),
|
|
||||||
});
|
|
||||||
export const defaultFilterValues = {
|
|
||||||
industryIds: [],
|
|
||||||
createdByIds: [],
|
|
||||||
tenantStatusIds: [],
|
|
||||||
references: [],
|
|
||||||
startDate: "YYYY-MM-DDTHH:mm:ssZ",
|
|
||||||
endDate: "YYYY-MM-DDTHH:mm:ssZ",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getStepFields = (stepIndex) => {
|
export const getStepFields = (stepIndex) => {
|
||||||
const stepFieldMap = {
|
const stepFieldMap = {
|
||||||
0: [
|
0: [
|
||||||
|
|||||||
@ -3,14 +3,12 @@ import { useTenants } from "../../hooks/useTenant";
|
|||||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||||
import { getTenantStatus } from "../../utils/dateUtils";
|
import { getTenantStatus } from "../../utils/dateUtils";
|
||||||
import IconButton from "../common/IconButton";
|
import IconButton from "../common/IconButton";
|
||||||
import Pagination from "../common/Pagination";
|
|
||||||
|
|
||||||
const TenantsList = ({searchText}) => {
|
const TenantsList = ({searchText}) => {
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const { data, isLoading, isError, isInitialLoading, error } = useTenants(
|
const { data, isLoading, isError, isInitialLoading, error } = useTenants(
|
||||||
currentPage,
|
ITEMS_PER_PAGE,
|
||||||
{},
|
currentPage
|
||||||
searchText,
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const paginate = (page) => {
|
const paginate = (page) => {
|
||||||
@ -133,13 +131,6 @@ const TenantsList = ({searchText}) => {
|
|||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{data?.data?.length > 0 && (
|
|
||||||
<Pagination
|
|
||||||
currentPage={currentPage}
|
|
||||||
totalPages={data.totalPages}
|
|
||||||
onPageChange={paginate}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -1,71 +1,39 @@
|
|||||||
import { useEffect, useRef } from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import { useController } from "react-hook-form";
|
|
||||||
|
|
||||||
|
const DatePicker = ({ onDateChange }) => {
|
||||||
const DatePicker = ({
|
|
||||||
name,
|
|
||||||
control,
|
|
||||||
placeholder = "DD-MM-YYYY",
|
|
||||||
className = "",
|
|
||||||
allowText = false,
|
|
||||||
maxDate=new Date(),
|
|
||||||
minDate,
|
|
||||||
...rest
|
|
||||||
}) => {
|
|
||||||
const inputRef = useRef(null);
|
const inputRef = useRef(null);
|
||||||
|
|
||||||
const {
|
useEffect(() => {
|
||||||
field: { onChange, value, ref }
|
const fp = flatpickr(inputRef.current, {
|
||||||
} = useController({
|
dateFormat: "Y-m-d",
|
||||||
name,
|
defaultDate: new Date(),
|
||||||
control
|
onChange: (selectedDates, dateStr) => {
|
||||||
|
if (onDateChange) {
|
||||||
|
onDateChange(dateStr); // Pass selected date to parent
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
return () => {
|
||||||
if (inputRef.current) {
|
// Cleanup flatpickr instance
|
||||||
flatpickr(inputRef.current, {
|
fp.destroy();
|
||||||
dateFormat: "d-m-Y",
|
};
|
||||||
allowInput: allowText,
|
}, [onDateChange]);
|
||||||
defaultDate: value
|
|
||||||
? flatpickr.parseDate(value, "Y-m-d")
|
|
||||||
: null,
|
|
||||||
maxDate:maxDate,
|
|
||||||
minDate:new Date(minDate?.split("T")[0]) ?? undefined,
|
|
||||||
onChange: function (selectedDates, dateStr) {
|
|
||||||
onChange(dateStr);
|
|
||||||
},
|
|
||||||
...rest
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [inputRef]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={` position-relative ${className}`}>
|
<div className="container mt-3">
|
||||||
|
<div className="mb-3">
|
||||||
|
{/* <label htmlFor="flatpickr-single" className="form-label">
|
||||||
|
Select Date
|
||||||
|
</label> */}
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control form-control-sm "
|
id="flatpickr-single"
|
||||||
placeholder={placeholder}
|
className="form-control"
|
||||||
defaultValue={
|
placeholder="YYYY-MM-DD"
|
||||||
value ? flatpickr.formatDate(flatpickr.parseDate(value, "Y-m-d"), "d-m-Y") : ""
|
ref={inputRef}
|
||||||
}
|
|
||||||
ref={(el) => {
|
|
||||||
inputRef.current = el;
|
|
||||||
ref(el);
|
|
||||||
}}
|
|
||||||
readOnly={!allowText}
|
|
||||||
autoComplete="off"
|
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
<span
|
|
||||||
className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
|
|
||||||
onClick={() => {
|
|
||||||
if (inputRef.current && inputRef.current._flatpickr) {
|
|
||||||
inputRef.current._flatpickr.open();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<i className="bx bx-calendar bx-sm fs-5 text-muted"></i>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,8 +1,6 @@
|
|||||||
import React, { useEffect, useRef } from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import { useController, useFormContext, useWatch } from "react-hook-form";
|
|
||||||
const DateRangePicker = ({
|
const DateRangePicker = ({
|
||||||
md,
|
|
||||||
sm,
|
|
||||||
onRangeChange,
|
onRangeChange,
|
||||||
DateDifference = 7,
|
DateDifference = 7,
|
||||||
endDateMode = "yesterday",
|
endDateMode = "yesterday",
|
||||||
@ -27,12 +25,11 @@ const DateRangePicker = ({
|
|||||||
altInput: true,
|
altInput: true,
|
||||||
altFormat: "d-m-Y",
|
altFormat: "d-m-Y",
|
||||||
defaultDate: [startDate, endDate],
|
defaultDate: [startDate, endDate],
|
||||||
static: false,
|
static: true,
|
||||||
// appendTo: document.body,
|
|
||||||
clickOpens: true,
|
clickOpens: true,
|
||||||
maxDate: endDate,
|
maxDate: endDate, // ✅ Disable future dates
|
||||||
onChange: (selectedDates, dateStr) => {
|
onChange: (selectedDates, dateStr) => {
|
||||||
const [startDateString, endDateString] = dateStr.split(" To ");
|
const [startDateString, endDateString] = dateStr.split(" to ");
|
||||||
onRangeChange?.({ startDate: startDateString, endDate: endDateString });
|
onRangeChange?.({ startDate: startDateString, endDate: endDateString });
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -48,129 +45,14 @@ const DateRangePicker = ({
|
|||||||
}, [onRangeChange, DateDifference, endDateMode]);
|
}, [onRangeChange, DateDifference, endDateMode]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`col-${sm} col-sm-${md} px-1 position-relative`}>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control form-control-sm ps-2 pe-5 me-4"
|
className="form-control form-control-sm ms-1"
|
||||||
placeholder="From to End"
|
placeholder="From to End"
|
||||||
id="flatpickr-range"
|
id="flatpickr-range"
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<i
|
|
||||||
className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 translate-middle-y "
|
|
||||||
style={{ right: "12px" }}
|
|
||||||
></i>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DateRangePicker;
|
export default DateRangePicker;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const DateRangePicker1 = ({
|
|
||||||
startField = "startDate",
|
|
||||||
endField = "endDate",
|
|
||||||
placeholder = "Select date range",
|
|
||||||
className = "",
|
|
||||||
allowText = false,
|
|
||||||
resetSignal, // <- NEW prop
|
|
||||||
...rest
|
|
||||||
}) => {
|
|
||||||
const inputRef = useRef(null);
|
|
||||||
const { control, setValue, getValues } = useFormContext();
|
|
||||||
|
|
||||||
const {
|
|
||||||
field: { ref },
|
|
||||||
} = useController({ name: startField, control });
|
|
||||||
|
|
||||||
const applyDefaultDates = () => {
|
|
||||||
const today = new Date();
|
|
||||||
const past = new Date();
|
|
||||||
past.setDate(today.getDate() - 6);
|
|
||||||
|
|
||||||
const format = (d) => flatpickr.formatDate(d, "d-m-Y");
|
|
||||||
const formattedStart = format(past);
|
|
||||||
const formattedEnd = format(today);
|
|
||||||
|
|
||||||
setValue(startField, formattedStart, { shouldValidate: true });
|
|
||||||
setValue(endField, formattedEnd, { shouldValidate: true });
|
|
||||||
|
|
||||||
if (inputRef.current?._flatpickr) {
|
|
||||||
inputRef.current._flatpickr.setDate([past, today]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!inputRef.current || inputRef.current._flatpickr) return;
|
|
||||||
|
|
||||||
const instance = flatpickr(inputRef.current, {
|
|
||||||
mode: "range",
|
|
||||||
dateFormat: "d-m-Y",
|
|
||||||
allowInput: allowText,
|
|
||||||
onChange: (selectedDates) => {
|
|
||||||
if (selectedDates.length === 2) {
|
|
||||||
const [start, end] = selectedDates;
|
|
||||||
const format = (d) => flatpickr.formatDate(d, "d-m-Y");
|
|
||||||
setValue(startField, format(start), { shouldValidate: true });
|
|
||||||
setValue(endField, format(end), { shouldValidate: true });
|
|
||||||
} else {
|
|
||||||
setValue(startField, "", { shouldValidate: true });
|
|
||||||
setValue(endField, "", { shouldValidate: true });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
...rest,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Apply default if empty
|
|
||||||
const currentStart = getValues(startField);
|
|
||||||
const currentEnd = getValues(endField);
|
|
||||||
if (!currentStart && !currentEnd) {
|
|
||||||
applyDefaultDates();
|
|
||||||
} else if (currentStart && currentEnd) {
|
|
||||||
instance.setDate([
|
|
||||||
flatpickr.parseDate(currentStart, "d-m-Y"),
|
|
||||||
flatpickr.parseDate(currentEnd, "d-m-Y"),
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => instance.destroy();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Reapply default range on resetSignal change
|
|
||||||
useEffect(() => {
|
|
||||||
if (resetSignal !== undefined) {
|
|
||||||
applyDefaultDates();
|
|
||||||
}
|
|
||||||
}, [resetSignal]);
|
|
||||||
|
|
||||||
const start = getValues(startField);
|
|
||||||
const end = getValues(endField);
|
|
||||||
const formattedValue = start && end ? `${start} To ${end}` : "";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`position-relative ${className}`}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
placeholder={placeholder}
|
|
||||||
defaultValue={formattedValue}
|
|
||||||
ref={(el) => {
|
|
||||||
inputRef.current = el;
|
|
||||||
ref(el);
|
|
||||||
}}
|
|
||||||
readOnly={!allowText}
|
|
||||||
autoComplete="off"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
|
|
||||||
onClick={() => inputRef.current?._flatpickr?.open()}
|
|
||||||
>
|
|
||||||
<i className="bx bx-calendar bx-sm fs-5 text-muted"></i>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|||||||
@ -1,96 +0,0 @@
|
|||||||
import { useState, useEffect } from "react";
|
|
||||||
import { useEmployeesName } from "../../hooks/useEmployees";
|
|
||||||
import { useDebounce } from "../../utils/appUtils";
|
|
||||||
import { useController } from "react-hook-form";
|
|
||||||
import Avatar from "./Avatar";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const EmployeeSearchInput = ({ control, name, projectId,placeholder }) => {
|
|
||||||
const {
|
|
||||||
field: { onChange, value, ref },
|
|
||||||
fieldState: { error },
|
|
||||||
} = useController({ name, control });
|
|
||||||
|
|
||||||
const [search, setSearch] = useState("");
|
|
||||||
const [showDropdown, setShowDropdown] = useState(false);
|
|
||||||
const debouncedSearch = useDebounce(search, 500);
|
|
||||||
|
|
||||||
const {
|
|
||||||
data: employees,
|
|
||||||
isLoading,
|
|
||||||
} = useEmployeesName(projectId, debouncedSearch);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (value && !search) {
|
|
||||||
const found = employees?.data?.find((emp) => emp.id === value);
|
|
||||||
if (found) setSearch(found.firstName + " " + found.lastName);
|
|
||||||
}
|
|
||||||
}, [value, employees]);
|
|
||||||
|
|
||||||
const handleSelect = (employee) => {
|
|
||||||
onChange(employee.id);
|
|
||||||
setSearch(employee.firstName + " " + employee.lastName);
|
|
||||||
setShowDropdown(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="position-relative">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
ref={ref}
|
|
||||||
className={`form-control form-control-sm`}
|
|
||||||
placeholder={placeholder}
|
|
||||||
value={search}
|
|
||||||
onChange={(e) => {
|
|
||||||
setSearch(e.target.value);
|
|
||||||
setShowDropdown(true);
|
|
||||||
onChange("");
|
|
||||||
}}
|
|
||||||
onFocus={() => {
|
|
||||||
if (search) setShowDropdown(true);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{showDropdown && (employees?.data?.length > 0 || isLoading) && (
|
|
||||||
<ul
|
|
||||||
className="list-group position-absolute bg-white w-100 shadow z-3 rounded-none px-0"
|
|
||||||
style={{ maxHeight: 200, overflowY: "auto" }}
|
|
||||||
>
|
|
||||||
{isLoading ? (
|
|
||||||
<li className="list-group-item">
|
|
||||||
<a>Searching...</a>
|
|
||||||
|
|
||||||
</li>
|
|
||||||
) : (
|
|
||||||
employees?.data?.map((emp) => (
|
|
||||||
<li
|
|
||||||
key={emp.id}
|
|
||||||
className="list-group-item list-group-item-action py-1 px-1"
|
|
||||||
style={{ cursor: "pointer" }}
|
|
||||||
onClick={() => handleSelect(emp)}
|
|
||||||
>
|
|
||||||
<div className="d-flex align-items-center px-0">
|
|
||||||
<Avatar
|
|
||||||
size="xs"
|
|
||||||
classAvatar="m-0 me-2"
|
|
||||||
firstName={emp.firstName}
|
|
||||||
lastName={emp.lastName}
|
|
||||||
/>
|
|
||||||
<span className="text-muted">
|
|
||||||
{`${emp?.firstName} ${emp?.lastName}`.trim()}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{error && <small className="danger-text">{error.message}</small>}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default EmployeeSearchInput;
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
const Error = ({error,close}) => {
|
|
||||||
console.log(error)
|
|
||||||
return (
|
|
||||||
<div className="container text-center py-5">
|
|
||||||
<h1 className="display-4 fw-bold text-danger">{error.statusCode || error?.response?.status
|
|
||||||
}</h1>
|
|
||||||
<h2 className="mb-3">Internal Server Error</h2>
|
|
||||||
<p className="lead">
|
|
||||||
{error.message}
|
|
||||||
</p>
|
|
||||||
<a href="/" className="btn btn-primary btn-sm mt-3" onClick={()=>close()}>
|
|
||||||
Go to Home
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Error
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
import React, { useEffect, useRef } from "react";
|
|
||||||
import { useFab } from "../../Context/FabContext";
|
|
||||||
|
|
||||||
const GlobalOffcanvas = () => {
|
|
||||||
const { offcanvas, setIsOffcanvasOpen } = useFab();
|
|
||||||
const offcanvasRef = useRef();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const el = offcanvasRef.current;
|
|
||||||
const bsOffcanvas = new bootstrap.Offcanvas(el);
|
|
||||||
|
|
||||||
const handleShow = () => setIsOffcanvasOpen(true);
|
|
||||||
const handleHide = () => setIsOffcanvasOpen(false);
|
|
||||||
|
|
||||||
el.addEventListener("show.bs.offcanvas", handleShow);
|
|
||||||
el.addEventListener("hidden.bs.offcanvas", handleHide);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
el.removeEventListener("show.bs.offcanvas", handleShow);
|
|
||||||
el.removeEventListener("hidden.bs.offcanvas", handleHide);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="offcanvas offcanvas-end"
|
|
||||||
tabIndex="-1"
|
|
||||||
id="globalOffcanvas"
|
|
||||||
ref={offcanvasRef}
|
|
||||||
aria-labelledby="offcanvasLabel"
|
|
||||||
data-bs-backdrop="false"
|
|
||||||
data-bs-scroll="true"
|
|
||||||
>
|
|
||||||
<div className="offcanvas-header">
|
|
||||||
<h5 className="offcanvas-title" id="offcanvasLabel">
|
|
||||||
{offcanvas.title}
|
|
||||||
</h5>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn-close text-reset"
|
|
||||||
data-bs-dismiss="offcanvas"
|
|
||||||
aria-label="Close"
|
|
||||||
></button>
|
|
||||||
</div>
|
|
||||||
<div className="offcanvas-body mx-0 py-1 flex-grow-0">
|
|
||||||
{offcanvas.content || <p>No content</p>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default GlobalOffcanvas;
|
|
||||||
@ -2,20 +2,37 @@ import React from "react";
|
|||||||
|
|
||||||
const Loader = () => {
|
const Loader = () => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="demo-inline-spacing">
|
||||||
className="d-flex justify-content-center align-items-center"
|
<div className="spinner-grow text-primary" role="status">
|
||||||
style={{ height: "50vh" }}
|
<span className="visually-hidden">Loading...</span>
|
||||||
>
|
|
||||||
<div className="sk-wave">
|
|
||||||
<div className="sk-wave-rect"></div>
|
|
||||||
<div className="sk-wave-rect"></div>
|
|
||||||
<div className="sk-wave-rect"></div>
|
|
||||||
<div className="sk-wave-rect"></div>
|
|
||||||
<div className="sk-wave-rect"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
{/* <div className="spinner-grow" role="status">
|
||||||
|
<span className="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="spinner-grow text-secondary" role="status">
|
||||||
|
<span className="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
<div className="spinner-grow text-success" role="status">
|
||||||
|
<span className="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
<div className="spinner-grow text-danger" role="status">
|
||||||
|
<span className="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
<div className="spinner-grow text-warning" role="status">
|
||||||
|
<span className="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
<div className="spinner-grow text-info" role="status">
|
||||||
|
<span className="visually-hidden">Loading...</span>
|
||||||
|
</div> */}
|
||||||
|
<div className="spinner-grow text-light" role="status">
|
||||||
|
<span className="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
{/* <div className="spinner-grow text-dark" role="status">
|
||||||
|
<span className="visually-hidden">Loading...</span>
|
||||||
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Loader;
|
export default Loader;
|
||||||
|
|
||||||
|
|||||||
@ -1,26 +0,0 @@
|
|||||||
import { createPortal } from "react-dom";
|
|
||||||
import { useFab } from "../../Context/FabContext";
|
|
||||||
|
|
||||||
const OffcanvasTrigger = () => {
|
|
||||||
const { openOffcanvas, offcanvas, showTrigger } = useFab();
|
|
||||||
|
|
||||||
if (!showTrigger || !offcanvas.content) return null;
|
|
||||||
|
|
||||||
const btn = (
|
|
||||||
<i
|
|
||||||
className="bx bx-slider-alt position-fixed p-2 bg-primary text-white rounded-start"
|
|
||||||
onClick={() => openOffcanvas(offcanvas.title, offcanvas.content)}
|
|
||||||
role="button"
|
|
||||||
style={{
|
|
||||||
top: "25%",
|
|
||||||
right: "0%",
|
|
||||||
cursor: "pointer",
|
|
||||||
zIndex: 1056,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
return createPortal(btn, document.body);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default OffcanvasTrigger;
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
const getPaginationRange = (currentPage, totalPages, delta = 1) => {
|
|
||||||
const range = [];
|
|
||||||
const rangeWithDots = [];
|
|
||||||
let l;
|
|
||||||
|
|
||||||
for (let i = 1; i <= totalPages; i++) {
|
|
||||||
if (
|
|
||||||
i === 1 ||
|
|
||||||
i === totalPages ||
|
|
||||||
(i >= currentPage - delta && i <= currentPage + delta)
|
|
||||||
) {
|
|
||||||
range.push(i);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i of range) {
|
|
||||||
if (l) {
|
|
||||||
if (i - l === 2) {
|
|
||||||
rangeWithDots.push(l + 1);
|
|
||||||
} else if (i - l !== 1) {
|
|
||||||
rangeWithDots.push("...");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
rangeWithDots.push(i);
|
|
||||||
l = i;
|
|
||||||
}
|
|
||||||
|
|
||||||
return rangeWithDots;
|
|
||||||
};
|
|
||||||
|
|
||||||
const Pagination = ({ currentPage, totalPages, onPageChange }) => {
|
|
||||||
if (totalPages <= 1) return null;
|
|
||||||
|
|
||||||
const paginationRange = getPaginationRange(currentPage, totalPages);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<nav aria-label="Page navigation">
|
|
||||||
<ul className="pagination pagination-sm justify-content-end py-1 mx-1">
|
|
||||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
|
||||||
<button
|
|
||||||
className="page-link btn-xs"
|
|
||||||
onClick={() => onPageChange(currentPage - 1)}
|
|
||||||
>
|
|
||||||
«
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
{paginationRange.map((page, index) => (
|
|
||||||
<li
|
|
||||||
key={index}
|
|
||||||
className={`page-item ${
|
|
||||||
page === currentPage ? "active" : ""
|
|
||||||
} ${page === "..." ? "disabled" : ""}`}
|
|
||||||
>
|
|
||||||
{page === "..." ? (
|
|
||||||
<span className="page-link">…</span>
|
|
||||||
) : (
|
|
||||||
<button className="page-link" onClick={() => onPageChange(page)}>
|
|
||||||
{page}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<li
|
|
||||||
className={`page-item ${
|
|
||||||
currentPage === totalPages ? "disabled" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
className="page-link"
|
|
||||||
onClick={() => onPageChange(currentPage + 1)}
|
|
||||||
>
|
|
||||||
»
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Pagination;
|
|
||||||
@ -1,13 +1,12 @@
|
|||||||
import React, { useState, useEffect, useRef } from "react";
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
import { useFormContext } from "react-hook-form";
|
import { useFormContext } from "react-hook-form";
|
||||||
import { createPortal } from "react-dom";
|
|
||||||
import "./MultiSelectDropdown.css";
|
import "./MultiSelectDropdown.css";
|
||||||
|
|
||||||
const SelectMultiple = ({
|
const SelectMultiple = ({
|
||||||
name,
|
name,
|
||||||
options = [],
|
options = [],
|
||||||
label = "Select options",
|
label = "Select options",
|
||||||
labelKey = "name", // Can now be a function or a string
|
labelKey = "name",
|
||||||
valueKey = "id",
|
valueKey = "id",
|
||||||
placeholder = "Please select...",
|
placeholder = "Please select...",
|
||||||
IsLoading = false,
|
IsLoading = false,
|
||||||
@ -17,18 +16,11 @@ const SelectMultiple = ({
|
|||||||
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const [searchText, setSearchText] = useState("");
|
const [searchText, setSearchText] = useState("");
|
||||||
const containerRef = useRef(null);
|
|
||||||
const dropdownRef = useRef(null);
|
const dropdownRef = useRef(null);
|
||||||
|
|
||||||
const [dropdownStyles, setDropdownStyles] = useState({ top: 0, left: 0, width: 0 });
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleClickOutside = (e) => {
|
const handleClickOutside = (e) => {
|
||||||
if (
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
||||||
containerRef.current &&
|
|
||||||
!containerRef.current.contains(e.target) &&
|
|
||||||
(!dropdownRef.current || !dropdownRef.current.contains(e.target))
|
|
||||||
) {
|
|
||||||
setIsOpen(false);
|
setIsOpen(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -36,21 +28,6 @@ const SelectMultiple = ({
|
|||||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (isOpen && containerRef.current) {
|
|
||||||
const rect = containerRef.current.getBoundingClientRect();
|
|
||||||
setDropdownStyles({
|
|
||||||
top: rect.bottom + window.scrollY,
|
|
||||||
left: rect.left + window.scrollX,
|
|
||||||
width: rect.width,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [isOpen]);
|
|
||||||
|
|
||||||
const getLabel = (item) => {
|
|
||||||
return typeof labelKey === "function" ? labelKey(item) : item[labelKey];
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCheckboxChange = (value) => {
|
const handleCheckboxChange = (value) => {
|
||||||
const updated = selectedValues.includes(value)
|
const updated = selectedValues.includes(value)
|
||||||
? selectedValues.filter((v) => v !== value)
|
? selectedValues.filter((v) => v !== value)
|
||||||
@ -59,98 +36,35 @@ const SelectMultiple = ({
|
|||||||
setValue(name, updated, { shouldValidate: true });
|
setValue(name, updated, { shouldValidate: true });
|
||||||
};
|
};
|
||||||
|
|
||||||
const filteredOptions = options.filter((item) => {
|
const filteredOptions = options.filter((item) =>
|
||||||
const label = getLabel(item);
|
item[labelKey]?.toLowerCase().includes(searchText.toLowerCase())
|
||||||
return label?.toLowerCase().includes(searchText.toLowerCase());
|
|
||||||
});
|
|
||||||
|
|
||||||
const dropdownElement = (
|
|
||||||
<div
|
|
||||||
ref={dropdownRef}
|
|
||||||
className="multi-select-dropdown-options py-2"
|
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
top: dropdownStyles.top,
|
|
||||||
left: dropdownStyles.left,
|
|
||||||
width: dropdownStyles.width,
|
|
||||||
zIndex: 9999,
|
|
||||||
backgroundColor: "white",
|
|
||||||
boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
|
|
||||||
borderRadius: 4,
|
|
||||||
maxHeight: 300,
|
|
||||||
overflowY: "auto",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="multi-select-dropdown-search" style={{ padding: 8 }}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search..."
|
|
||||||
value={searchText}
|
|
||||||
onChange={(e) => setSearchText(e.target.value)}
|
|
||||||
className="multi-select-dropdown-search-input"
|
|
||||||
style={{ width: "100%", padding: 4 }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{filteredOptions.map((item) => {
|
|
||||||
const labelVal = getLabel(item);
|
|
||||||
const valueVal = item[valueKey];
|
|
||||||
const isChecked = selectedValues.includes(valueVal);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={valueVal}
|
|
||||||
className={`multi-select-dropdown-option ${isChecked ? "selected" : ""}`}
|
|
||||||
style={{ display: "flex", alignItems: "center", padding: "4px 8px" }}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="custom-checkbox form-check-input"
|
|
||||||
checked={isChecked}
|
|
||||||
onChange={() => handleCheckboxChange(valueVal)}
|
|
||||||
style={{ marginRight: 8 }}
|
|
||||||
/>
|
|
||||||
<label className="text-secondary">{labelVal}</label>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
{!IsLoading && filteredOptions.length === 0 && (
|
|
||||||
<div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
|
|
||||||
<label className="text-muted">Not Found {`'${searchText}'`}</label>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{IsLoading && filteredOptions.length === 0 && (
|
|
||||||
<div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
|
|
||||||
<label className="text-muted">Loading...</label>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div ref={dropdownRef} className="multi-select-dropdown-container">
|
||||||
<div ref={containerRef} className="multi-select-dropdown-container" style={{ position: "relative" }}>
|
|
||||||
<label className="form-label mb-1">{label}</label>
|
<label className="form-label mb-1">{label}</label>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="multi-select-dropdown-header"
|
className="multi-select-dropdown-header"
|
||||||
onClick={() => setIsOpen((prev) => !prev)}
|
onClick={() => setIsOpen((prev) => !prev)}
|
||||||
style={{ cursor: "pointer" }}
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className={
|
className={
|
||||||
selectedValues.length > 0 ? "placeholder-style-selected" : "placeholder-style"
|
selectedValues.length > 0
|
||||||
|
? "placeholder-style-selected"
|
||||||
|
: "placeholder-style"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="selected-badges-container">
|
<div className="selected-badges-container">
|
||||||
{selectedValues.length > 0 ? (
|
{selectedValues.length > 0 ? (
|
||||||
selectedValues.map((val) => {
|
selectedValues.map((val) => {
|
||||||
const found = options.find((opt) => opt[valueKey] === val);
|
const found = options.find((opt) => opt[valueKey] === val);
|
||||||
const label = found ? getLabel(found) : "";
|
|
||||||
return (
|
return (
|
||||||
<span key={val} className="badge badge-selected-item mx-1 mb-1">
|
<span
|
||||||
{label}
|
key={val}
|
||||||
|
className="badge badge-selected-item mx-1 mb-1"
|
||||||
|
>
|
||||||
|
{found ? found[labelKey] : ""}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
@ -161,10 +75,56 @@ const SelectMultiple = ({
|
|||||||
</span>
|
</span>
|
||||||
<i className="bx bx-chevron-down"></i>
|
<i className="bx bx-chevron-down"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{isOpen && (
|
||||||
|
<div className="multi-select-dropdown-options">
|
||||||
|
<div className="multi-select-dropdown-search">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search..."
|
||||||
|
value={searchText}
|
||||||
|
onChange={(e) => setSearchText(e.target.value)}
|
||||||
|
className="multi-select-dropdown-search-input"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{isOpen && createPortal(dropdownElement, document.body)}
|
{filteredOptions.map((item) => {
|
||||||
</>
|
const labelVal = item[labelKey];
|
||||||
|
const valueVal = item[valueKey];
|
||||||
|
const isChecked = selectedValues.includes(valueVal);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={valueVal}
|
||||||
|
className={`multi-select-dropdown-option ${
|
||||||
|
isChecked ? "selected" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="custom-checkbox form-check-input"
|
||||||
|
checked={isChecked}
|
||||||
|
onChange={() => handleCheckboxChange(valueVal)}
|
||||||
|
/>
|
||||||
|
<label className="text-secondary">{labelVal}</label>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{!IsLoading && filteredOptions.length === 0 && (
|
||||||
|
<div className="multi-select-dropdown-Not-found">
|
||||||
|
<label className="text-muted">
|
||||||
|
Not Found {`'${searchText}'`}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{IsLoading && filteredOptions.length === 0 && (
|
||||||
|
<div className="multi-select-dropdown-Not-found">
|
||||||
|
<label className="text-muted">Loading...</label>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,165 +0,0 @@
|
|||||||
import React, { useEffect } from "react";
|
|
||||||
import {
|
|
||||||
useForm,
|
|
||||||
FormProvider,
|
|
||||||
} from "react-hook-form";
|
|
||||||
import { z } from "zod";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import SelectMultiple from "../common/SelectMultiple";
|
|
||||||
import { useFeatures } from "../../hooks/useMasterRole";
|
|
||||||
import { EXPENSE_MANAGEMENT } from "../../utils/constants";
|
|
||||||
import { useCreateExpenseStatus, useUpdateExpenseStatus } from "../../hooks/masterHook/useMaster";
|
|
||||||
import { displayName } from "react-quill";
|
|
||||||
import { AppColorconfig } from "../../utils/appUtils";
|
|
||||||
|
|
||||||
const ExpenseStatusSchema = z.object({
|
|
||||||
name: z.string().min(1, { message: "Name is required" }),
|
|
||||||
displayName: z.string().min(1, { message: "Display Name is required" }),
|
|
||||||
description: z.string().min(1, { message: "Description is required" }),
|
|
||||||
permissionIds: z.array(z.string()).min(1, {
|
|
||||||
message: "At least one permission is required",
|
|
||||||
}),
|
|
||||||
color: z
|
|
||||||
.string()
|
|
||||||
.regex(/^#([0-9A-F]{3}){1,2}$/i, { message: "Invalid hex color" }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const ManageExpenseStatus = ({data, onClose }) => {
|
|
||||||
const methods = useForm({
|
|
||||||
resolver: zodResolver(ExpenseStatusSchema),
|
|
||||||
defaultValues: {
|
|
||||||
name: "",
|
|
||||||
displayName: "",
|
|
||||||
description: "",
|
|
||||||
permissionIds: [],
|
|
||||||
color: AppColorconfig.colors.primary,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
reset,
|
|
||||||
formState: { errors },
|
|
||||||
} = methods;
|
|
||||||
|
|
||||||
const { masterFeatures, loading } = useFeatures();
|
|
||||||
|
|
||||||
const ExpenseFeature = masterFeatures?.find(
|
|
||||||
(appfeature) => appfeature.id === EXPENSE_MANAGEMENT
|
|
||||||
);
|
|
||||||
const {mutate:CreateExpenseStatus,isPending:isPending} = useCreateExpenseStatus(()=>onClose?.())
|
|
||||||
const {mutate:UpdateExpenseStatus,isPending:Updating} = useUpdateExpenseStatus(()=>onClose?.());
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const onSubmit = (payload) => {
|
|
||||||
if(data){
|
|
||||||
UpdateExpenseStatus({id:data.id,payload:{...payload,id:data.id}})
|
|
||||||
}else{
|
|
||||||
CreateExpenseStatus(payload)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(()=>{
|
|
||||||
if(data){
|
|
||||||
reset({
|
|
||||||
name:data.name ?? "",
|
|
||||||
displayName:data.displayName ?? "",
|
|
||||||
description:data.description ?? "",
|
|
||||||
permissionIds:data.permissionIds ?? [],
|
|
||||||
color:data.color ?? AppColorconfig.colors.primary
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},[data])
|
|
||||||
return (
|
|
||||||
<FormProvider {...methods}>
|
|
||||||
{loading ? (
|
|
||||||
<div>Loading...</div>
|
|
||||||
) : (
|
|
||||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<div className="col-12">
|
|
||||||
<label className="form-label">Expense Status Name</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
{...register("name")}
|
|
||||||
className={`form-control ${errors.name ? "is-invalid" : ""}`}
|
|
||||||
/>
|
|
||||||
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<label className="form-label">Status Display Name</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
{...register("displayName")}
|
|
||||||
className={`form-control ${errors.displayName ? "is-invalid" : ""}`}
|
|
||||||
/>
|
|
||||||
{errors.displayName && (
|
|
||||||
<p className="text-danger">{errors.displayName.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<SelectMultiple
|
|
||||||
name="permissionIds"
|
|
||||||
label="Select Permissions"
|
|
||||||
options={ExpenseFeature?.featurePermissions || []}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
IsLoading={loading}
|
|
||||||
/>
|
|
||||||
{errors.permissionIds && (
|
|
||||||
<p className="text-danger">{errors.permissionIds.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<label className="form-label">Select Color</label>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
className={`form-control form-control ${errors.color ? "is-invalid" : ""}`}
|
|
||||||
{...register("color")}
|
|
||||||
/>
|
|
||||||
{errors.color && (
|
|
||||||
<p className="text-danger">{errors.color.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<label className="form-label">Description</label>
|
|
||||||
<textarea
|
|
||||||
rows="3"
|
|
||||||
{...register("description")}
|
|
||||||
className={`form-control ${errors.description ? "is-invalid" : ""}`}
|
|
||||||
/>
|
|
||||||
{errors.description && (
|
|
||||||
<p className="text-danger">{errors.description.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 text-center">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-sm btn-primary me-3"
|
|
||||||
disabled={isPending || Updating}
|
|
||||||
>
|
|
||||||
{isPending || Updating ? "Please Wait..." : Updating ? "Update" : "Submit"}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-sm btn-secondary"
|
|
||||||
onClick={onClose}
|
|
||||||
disabled={isPending || Updating}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
</FormProvider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ManageExpenseStatus;
|
|
||||||
@ -1,113 +0,0 @@
|
|||||||
import React, { useEffect } from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { z } from "zod";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import {
|
|
||||||
useCreateExpenseType,
|
|
||||||
useUpdateExpenseType,
|
|
||||||
} from "../../hooks/masterHook/useMaster";
|
|
||||||
|
|
||||||
const ExpnseSchema = z.object({
|
|
||||||
name: z.string().min(1, { message: "Name is required" }),
|
|
||||||
noOfPersonsRequired: z.boolean().default(false),
|
|
||||||
description: z.string().min(1, { message: "Description is required" }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const ManageExpenseType = ({ data = null, onClose }) => {
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
reset,
|
|
||||||
formState: { errors },
|
|
||||||
} = useForm({
|
|
||||||
resolver: zodResolver(ExpnseSchema),
|
|
||||||
defaultValues: { name: "", noOfPersonsRequired: false, description: "" },
|
|
||||||
});
|
|
||||||
const { mutate: UpdateExpenseType, isPending:isPendingUpdate } = useUpdateExpenseType(
|
|
||||||
() => onClose?.()
|
|
||||||
);
|
|
||||||
const { mutate: CreateExpenseType, isPending } = useCreateExpenseType(() =>
|
|
||||||
onClose?.()
|
|
||||||
);
|
|
||||||
|
|
||||||
const onSubmit = (payload) => {
|
|
||||||
if (data) {
|
|
||||||
UpdateExpenseType({
|
|
||||||
id: data.id,
|
|
||||||
payload: { ...payload, id: data.id },
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
CreateExpenseType(payload);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (data) {
|
|
||||||
reset({
|
|
||||||
name: data.name ?? "",
|
|
||||||
noOfPersonsRequired: data.noOfPersonsRequired ?? false,
|
|
||||||
description: data.description ?? "",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [data]);
|
|
||||||
return (
|
|
||||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<div className="col-12 col-md-12">
|
|
||||||
<label className="form-label">Expesne Type Name</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
{...register("name")}
|
|
||||||
className={`form-control ${errors.name ? "is-invalids" : ""}`}
|
|
||||||
/>
|
|
||||||
{errors.name && <p className="danger-text">{errors.name.message}</p>}
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-12">
|
|
||||||
<label className="form-label" htmlFor="description">
|
|
||||||
Description
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
rows="3"
|
|
||||||
{...register("description")}
|
|
||||||
className={`form-control ${errors.description ? "is-invalids" : ""}`}
|
|
||||||
></textarea>
|
|
||||||
|
|
||||||
{errors.description && (
|
|
||||||
<p className="danger-text">{errors.description.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-12 d-flex align-items-center">
|
|
||||||
<label className="from-label">No. of Persons Required </label>{" "}
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="form-check-input ms-2"
|
|
||||||
{...register("noOfPersonsRequired")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 text-center">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-sm btn-primary me-3"
|
|
||||||
disabled={isPending || isPendingUpdate}
|
|
||||||
>
|
|
||||||
{isPending || isPendingUpdate
|
|
||||||
? "Please Wait..."
|
|
||||||
: data
|
|
||||||
? "Update"
|
|
||||||
: "Submit"}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="reset"
|
|
||||||
className="btn btn-sm btn-label-secondary "
|
|
||||||
data-bs-dismiss="modal"
|
|
||||||
aria-label="Close"
|
|
||||||
disabled={isPending || isPendingUpdate}
|
|
||||||
onClick={()=>onClose()}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ManageExpenseType;
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
import React, { useEffect } from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { z } from "zod";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { useCreatePaymentMode, useUpdatePaymentMode } from "../../hooks/masterHook/useMaster";
|
|
||||||
|
|
||||||
const ExpnseSchema = z.object({
|
|
||||||
name: z.string().min(1, { message: "Name is required" }),
|
|
||||||
description: z.string().min(1, { message: "Description is required" }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const ManagePaymentMode = ({ data = null, onClose }) => {
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
reset,
|
|
||||||
formState: { errors },
|
|
||||||
} = useForm({
|
|
||||||
resolver: zodResolver(ExpnseSchema),
|
|
||||||
defaultValues: { name: "", description: "" },
|
|
||||||
});
|
|
||||||
|
|
||||||
const { mutate: CreatePaymentMode, isPending } = useCreatePaymentMode(() =>
|
|
||||||
onClose?.()
|
|
||||||
);
|
|
||||||
const {mutate:UpdatePaymentMode,isPending:Updating} = useUpdatePaymentMode(()=>onClose?.())
|
|
||||||
|
|
||||||
const onSubmit = (payload) => {
|
|
||||||
if(data){
|
|
||||||
UpdatePaymentMode({id:data.id,payload:{...payload,id:data.id}})
|
|
||||||
}else(
|
|
||||||
CreatePaymentMode(payload)
|
|
||||||
)
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(()=>{
|
|
||||||
if(data){
|
|
||||||
reset({
|
|
||||||
name:data.name ?? "",
|
|
||||||
description:data.description ?? ""
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},[data])
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<div className="col-12 col-md-12">
|
|
||||||
<label className="form-label">Payment Mode Name</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
{...register("name")}
|
|
||||||
className={`form-control ${errors.name ? "is-invalids" : ""}`}
|
|
||||||
/>
|
|
||||||
{errors.name && <p className="danger-text">{errors.name.message}</p>}
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-12">
|
|
||||||
<label className="form-label" htmlFor="description">
|
|
||||||
Description
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
rows="3"
|
|
||||||
{...register("description")}
|
|
||||||
className={`form-control ${errors.description ? "is-invalids" : ""}`}
|
|
||||||
></textarea>
|
|
||||||
|
|
||||||
{errors.description && (
|
|
||||||
<p className="danger-text">{errors.description.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 text-center">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-sm btn-primary me-3"
|
|
||||||
disabled={isPending || Updating}
|
|
||||||
>
|
|
||||||
{isPending || Updating? "Please Wait..." : Updating ? "Update" : "Submit"}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="reset"
|
|
||||||
className="btn btn-sm btn-label-secondary "
|
|
||||||
data-bs-dismiss="modal"
|
|
||||||
aria-label="Close"
|
|
||||||
disabled={isPending || Updating}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ManagePaymentMode;
|
|
||||||
@ -1,4 +1,5 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
import CreateRole from "./CreateRole";
|
import CreateRole from "./CreateRole";
|
||||||
import DeleteMaster from "./DeleteMaster";
|
import DeleteMaster from "./DeleteMaster";
|
||||||
import EditRole from "./EditRole";
|
import EditRole from "./EditRole";
|
||||||
@ -17,45 +18,67 @@ import CreateContactTag from "./CreateContactTag";
|
|||||||
import EditContactCategory from "./EditContactCategory";
|
import EditContactCategory from "./EditContactCategory";
|
||||||
import EditContactTag from "./EditContactTag";
|
import EditContactTag from "./EditContactTag";
|
||||||
import { useDeleteMasterItem } from "../../hooks/masterHook/useMaster";
|
import { useDeleteMasterItem } from "../../hooks/masterHook/useMaster";
|
||||||
import ManageExpenseType from "./ManageExpenseType";
|
|
||||||
import ManagePaymentMode from "./ManagePaymentMode";
|
|
||||||
import ManageExpenseStatus from "./ManageExpenseStatus";
|
|
||||||
|
|
||||||
|
|
||||||
const MasterModal = ({ modaldata, closeModal }) => {
|
const MasterModal = ({ modaldata, closeModal }) => {
|
||||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||||
const { mutate: deleteMasterItem, isPending } = useDeleteMasterItem();
|
const { mutate: deleteMasterItem, isPending } = useDeleteMasterItem();
|
||||||
|
|
||||||
|
// const handleSelectedMasterDeleted = async () =>
|
||||||
|
// {
|
||||||
|
// debugger
|
||||||
|
// const deleteFn = MasterRespository[modaldata.masterType];
|
||||||
|
// if (!deleteFn) {
|
||||||
|
// showToast(`No delete strategy defined for master type`,"error");
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
// try
|
||||||
|
// {
|
||||||
|
// const response = await deleteFn( modaldata?.item?.id );
|
||||||
|
// const selected_cachedData = getCachedData( modaldata?.masterType );
|
||||||
|
// const updated_master = selected_cachedData?.filter(item => item.id !== modaldata?.item.id);
|
||||||
|
// cacheData( modaldata?.masterType, updated_master )
|
||||||
|
|
||||||
|
// showToast(`${modaldata?.masterType} is deleted successfully`, "success");
|
||||||
|
// handleCloseDeleteModal()
|
||||||
|
|
||||||
|
// } catch ( error )
|
||||||
|
// {
|
||||||
|
// const message = error.response.data.message || error.message || "Error occured api during call"
|
||||||
|
// showToast(message, "success");
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
const handleSelectedMasterDeleted = () => {
|
const handleSelectedMasterDeleted = () => {
|
||||||
const { masterType, item, validateFn } = modaldata || {};
|
if (!modaldata?.masterType || !modaldata?.item?.id) {
|
||||||
if (!masterType || !item?.id) {
|
|
||||||
showToast("Missing master type or item", "error");
|
showToast("Missing master type or item", "error");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
deleteMasterItem(
|
deleteMasterItem(
|
||||||
{ masterType, item, validateFn },
|
{
|
||||||
{ onSuccess: handleCloseDeleteModal }
|
masterType: modaldata.masterType,
|
||||||
|
item: modaldata.item,
|
||||||
|
validateFn: modaldata.validateFn, // optional
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onSuccess: () => {
|
||||||
|
handleCloseDeleteModal();
|
||||||
|
},
|
||||||
|
}
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCloseDeleteModal = () => {
|
|
||||||
setIsDeleteModalOpen(false);
|
|
||||||
closeModal();
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (modaldata?.modalType === "delete") {
|
if (modaldata?.modalType === "delete") {
|
||||||
setIsDeleteModalOpen(true);
|
setIsDeleteModalOpen(true);
|
||||||
}
|
}
|
||||||
}, [modaldata]);
|
}, [modaldata]);
|
||||||
|
|
||||||
if (!modaldata?.modalType) {
|
const handleCloseDeleteModal = () => {
|
||||||
|
setIsDeleteModalOpen(false);
|
||||||
closeModal();
|
closeModal();
|
||||||
return null;
|
};
|
||||||
}
|
|
||||||
|
|
||||||
if (modaldata.modalType === "delete" && isDeleteModalOpen) {
|
if (modaldata?.modalType === "delete" && isDeleteModalOpen) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="modal fade show"
|
className="modal fade show"
|
||||||
@ -67,69 +90,86 @@ const MasterModal = ({ modaldata, closeModal }) => {
|
|||||||
<ConfirmModal
|
<ConfirmModal
|
||||||
type="delete"
|
type="delete"
|
||||||
header={`Delete ${modaldata.masterType}`}
|
header={`Delete ${modaldata.masterType}`}
|
||||||
message="Are you sure you want delete?"
|
message={"Are you sure you want delete?"}
|
||||||
onSubmit={handleSelectedMasterDeleted}
|
onSubmit={handleSelectedMasterDeleted}
|
||||||
onClose={handleCloseDeleteModal}
|
onClose={handleCloseDeleteModal}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const renderModalContent = () => {
|
|
||||||
const { modalType, item, masterType } = modaldata;
|
|
||||||
|
|
||||||
const modalComponents = {
|
|
||||||
"Application Role": <CreateRole masmodalType={masterType} onClose={closeModal} />,
|
|
||||||
"Edit-Application Role": <EditRole master={modaldata} onClose={closeModal} />,
|
|
||||||
"Job Role": <CreateJobRole onClose={closeModal} />,
|
|
||||||
"Edit-Job Role": <EditJobRole data={item} onClose={closeModal} />,
|
|
||||||
"Activity": <CreateActivity onClose={closeModal} />,
|
|
||||||
"Edit-Activity": <EditActivity activityData={item} onClose={closeModal} />,
|
|
||||||
"Work Category": <CreateWorkCategory onClose={closeModal} />,
|
|
||||||
"Edit-Work Category": <EditWorkCategory data={item} onClose={closeModal} />,
|
|
||||||
"Contact Category": <CreateCategory data={item} onClose={closeModal} />,
|
|
||||||
"Edit-Contact Category": <EditContactCategory data={item} onClose={closeModal} />,
|
|
||||||
"Contact Tag": <CreateContactTag data={item} onClose={closeModal} />,
|
|
||||||
"Edit-Contact Tag": <EditContactTag data={item} onClose={closeModal} />,
|
|
||||||
"Expense Type":<ManageExpenseType onClose={closeModal} />,
|
|
||||||
"Edit-Expense Type":<ManageExpenseType data={item} onClose={closeModal} />,
|
|
||||||
"Payment Mode":<ManagePaymentMode onClose={closeModal}/>,
|
|
||||||
"Edit-Payment Mode":<ManagePaymentMode data={item} onClose={closeModal}/>,
|
|
||||||
"Expense Status":<ManageExpenseStatus onClose={closeModal}/>,
|
|
||||||
"Edit-Expense Status":<ManageExpenseStatus data={item} onClose={closeModal}/>
|
|
||||||
};
|
|
||||||
|
|
||||||
return modalComponents[modalType] || null;
|
|
||||||
};
|
|
||||||
|
|
||||||
const isLargeModal = ["Application Role", "Edit-Application Role"].includes(
|
|
||||||
modaldata.modalType
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="modal fade show"
|
className="modal fade"
|
||||||
id="master-modal"
|
id="master-modal"
|
||||||
tabIndex="-1"
|
tabIndex="-1"
|
||||||
role="dialog"
|
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
|
role="dialog"
|
||||||
aria-labelledby="modalToggleLabel"
|
aria-labelledby="modalToggleLabel"
|
||||||
style={{ display: "block" }}
|
|
||||||
>
|
>
|
||||||
<div className={`modal-dialog mx-sm-auto mx-1 ${isLargeModal ? "modal-lg" : "modal-md"} modal-simple`}>
|
<div
|
||||||
|
className={`modal-dialog mx-sm-auto mx-1 ${
|
||||||
|
["Application Role", "Edit-Application Role"].includes(
|
||||||
|
modaldata?.modalType
|
||||||
|
)
|
||||||
|
? "modal-lg"
|
||||||
|
: "modal-md"
|
||||||
|
} modal-simple`}
|
||||||
|
>
|
||||||
<div className="modal-content">
|
<div className="modal-content">
|
||||||
<div className="modal-body p-sm-4 p-0">
|
<div className="modal-body p-sm-4 p-0">
|
||||||
<div className="d-flex justify-content-between">
|
<div className="d-flex justify-content-between">
|
||||||
<h6>{modaldata?.modalType}</h6>
|
<h6>{`${modaldata?.modalType} `}</h6>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn-close"
|
className="btn-close"
|
||||||
data-bs-dismiss="modal"
|
data-bs-dismiss="modal"
|
||||||
aria-label="Close"
|
aria-label="Close"
|
||||||
onClick={closeModal}
|
onClick={closeModal}
|
||||||
/>
|
></button>
|
||||||
</div>
|
</div>
|
||||||
{renderModalContent()}
|
|
||||||
|
{modaldata.modalType === "Application Role" && (
|
||||||
|
<CreateRole
|
||||||
|
masmodalType={modaldata.masterType}
|
||||||
|
onClose={closeModal}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{modaldata.modalType === "Edit-Application Role" && (
|
||||||
|
<EditRole master={modaldata} onClose={closeModal} />
|
||||||
|
)}
|
||||||
|
{modaldata.modalType === "Job Role" && (
|
||||||
|
<CreateJobRole onClose={closeModal} />
|
||||||
|
)}
|
||||||
|
{modaldata.modalType === "Edit-Job Role" && (
|
||||||
|
<EditJobRole data={modaldata.item} onClose={closeModal} />
|
||||||
|
)}
|
||||||
|
{modaldata.modalType === "Activity" && (
|
||||||
|
<CreateActivity onClose={closeModal} />
|
||||||
|
)}
|
||||||
|
{modaldata.modalType === "Edit-Activity" && (
|
||||||
|
<EditActivity
|
||||||
|
activityData={modaldata.item}
|
||||||
|
onClose={closeModal}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{modaldata.modalType === "Work Category" && (
|
||||||
|
<CreateWorkCategory onClose={closeModal} />
|
||||||
|
)}
|
||||||
|
{modaldata.modalType === "Edit-Work Category" && (
|
||||||
|
<EditWorkCategory data={modaldata.item} onClose={closeModal} />
|
||||||
|
)}
|
||||||
|
{modaldata.modalType === "Contact Category" && (
|
||||||
|
<CreateCategory data={modaldata.item} onClose={closeModal} />
|
||||||
|
)}
|
||||||
|
{modaldata.modalType === "Edit-Contact Category" && (
|
||||||
|
<EditContactCategory data={modaldata.item} onClose={closeModal} />
|
||||||
|
)}
|
||||||
|
{modaldata.modalType === "Contact Tag" && (
|
||||||
|
<CreateContactTag data={modaldata.item} onClose={closeModal} />
|
||||||
|
)}
|
||||||
|
{modaldata.modalType === "Edit-Contact Tag" && (
|
||||||
|
<EditContactTag data={modaldata.item} onClose={closeModal} />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,14 +1,5 @@
|
|||||||
// it important ------
|
// it important ------
|
||||||
export const mastersList = [
|
export const mastersList = [ {id: 1, name: "Application Role"}, {id: 2, name: "Job Role"}, {id: 3, name: "Activity"},{id: 4, name:"Work Category"},{id:5,name:"Contact Category"},{id:6,name:"Contact Tag"}]
|
||||||
{ id: 1, name: "Application Role" },
|
|
||||||
{ id: 2, name: "Job Role" },
|
|
||||||
{ id: 3, name: "Activity" },
|
|
||||||
{ id: 4, name: "Work Category" },
|
|
||||||
{ id: 5, name: "Contact Category" },
|
|
||||||
{ id: 6, name: "Contact Tag" },
|
|
||||||
{ id: 7, name: "Expense Type" },
|
|
||||||
{ id: 8, name: "Payment Mode" },
|
|
||||||
];
|
|
||||||
// -------------------
|
// -------------------
|
||||||
|
|
||||||
export const dailyTask = [
|
export const dailyTask = [
|
||||||
|
|||||||
@ -60,12 +60,6 @@
|
|||||||
"available": true,
|
"available": true,
|
||||||
"link": "/directory"
|
"link": "/directory"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"text": "Expense",
|
|
||||||
"icon": "bx bx-receipt",
|
|
||||||
"available": true,
|
|
||||||
"link": "/expenses"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"text": "Image Gallary",
|
"text": "Image Gallary",
|
||||||
"icon": "bx bx-images",
|
"icon": "bx bx-images",
|
||||||
@ -79,9 +73,9 @@
|
|||||||
"link": "",
|
"link": "",
|
||||||
"submenu": [
|
"submenu": [
|
||||||
{
|
{
|
||||||
"text": "Tenant",
|
"text": "Tenants",
|
||||||
"available": true,
|
"available": true,
|
||||||
"link": "/tenants/"
|
"link": "/tenants"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"text": "Masters",
|
"text": "Masters",
|
||||||
|
|||||||
@ -12,6 +12,213 @@ import showToast from "../../services/toastService";
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// const useMaster = () => {
|
||||||
|
|
||||||
|
// const selectedMaster = useSelector((store)=>store.localVariables.selectedMaster);
|
||||||
|
// const [data, setData] = useState([]);
|
||||||
|
// const [loading, setLoading] = useState(true);
|
||||||
|
// const [error, setError] = useState("");
|
||||||
|
// useEffect(() => {
|
||||||
|
// const fetchData = async () => {
|
||||||
|
// if (!selectedMaster) return;
|
||||||
|
// setLoading(true);
|
||||||
|
// try {
|
||||||
|
// const cachedData = getCachedData(selectedMaster);
|
||||||
|
// if (cachedData) {
|
||||||
|
|
||||||
|
// setData(cachedData);
|
||||||
|
|
||||||
|
// } else {
|
||||||
|
// let response;
|
||||||
|
// switch (selectedMaster) {
|
||||||
|
// case "Application Role":
|
||||||
|
// response = await MasterRespository.getRoles();
|
||||||
|
// response = response.data;
|
||||||
|
// break;
|
||||||
|
// case "Job Role":
|
||||||
|
// response = await MasterRespository.getJobRole();
|
||||||
|
// response = response.data
|
||||||
|
// break;
|
||||||
|
// case "Activity":
|
||||||
|
// response = await MasterRespository.getActivites();
|
||||||
|
// response = response.data
|
||||||
|
// break;
|
||||||
|
// case "Work Category":
|
||||||
|
// response = await MasterRespository.getWorkCategory();
|
||||||
|
// response = response.data
|
||||||
|
// break;
|
||||||
|
// case "Contact Category":
|
||||||
|
// response = await MasterRespository.getContactCategory();
|
||||||
|
// response = response.data
|
||||||
|
// break;
|
||||||
|
// case "Contact Tag":
|
||||||
|
// response = await MasterRespository.getContactTag();
|
||||||
|
// response = response.data
|
||||||
|
// break;
|
||||||
|
// case "Status":
|
||||||
|
// response = [{description: null,featurePermission: null,id: "02dd4761-363c-49ed-8851-3d2489a3e98d",status:"status 1"},{description: null,featurePermission: null,id: "03dy9761-363c-49ed-8851-3d2489a3e98d",status:"status 2"},{description: null,featurePermission: null,id: "03dy7761-263c-49ed-8851-3d2489a3e98d",status:"Status 3"}];
|
||||||
|
// break;
|
||||||
|
// default:
|
||||||
|
// response = [];
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (response) {
|
||||||
|
// setData(response);
|
||||||
|
// cacheData(selectedMaster, response);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// } catch (err) {
|
||||||
|
// setError("Failed to fetch data.");
|
||||||
|
// } finally {
|
||||||
|
// setLoading(false);
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
// if ( selectedMaster )
|
||||||
|
// {
|
||||||
|
|
||||||
|
// fetchData();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// }, [selectedMaster]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// return { data, loading, error }
|
||||||
|
// };
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// export const useActivitiesMaster = () =>
|
||||||
|
// {
|
||||||
|
// const [ activities, setActivites ] = useState( [] )
|
||||||
|
// const [ loading, setloading ] = useState( false );
|
||||||
|
// const [ error, setError ] = useState()
|
||||||
|
// const fetchActivities =async () => {
|
||||||
|
// setloading(true);
|
||||||
|
// try {
|
||||||
|
// const response = await MasterRespository.getActivites();
|
||||||
|
// setActivites(response.data);
|
||||||
|
// cacheData( "ActivityMaster", response.data );
|
||||||
|
// setloading(false);
|
||||||
|
// } catch (err) {
|
||||||
|
// setError(err);
|
||||||
|
// setloading(false);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// useEffect( () =>
|
||||||
|
// {
|
||||||
|
// const cacheddata = getCachedData( "ActivityMaster" );
|
||||||
|
// if ( !cacheddata )
|
||||||
|
// {
|
||||||
|
// fetchActivities()
|
||||||
|
// } else
|
||||||
|
// {
|
||||||
|
// setActivites(cacheddata);
|
||||||
|
// }
|
||||||
|
// }, [] )
|
||||||
|
|
||||||
|
// return {activities,loading,error}
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export const useWorkCategoriesMaster = () =>
|
||||||
|
// {
|
||||||
|
// const [ categories, setCategories ] = useState( [] )
|
||||||
|
// const [ categoryLoading, setloading ] = useState( false );
|
||||||
|
// const [ categoryError, setError ] = useState( "" )
|
||||||
|
|
||||||
|
// const fetchCategories =async () => {
|
||||||
|
// const cacheddata = getCachedData("Work Category");
|
||||||
|
|
||||||
|
// if (!cacheddata) {
|
||||||
|
// setloading(true);
|
||||||
|
// try {
|
||||||
|
// const response = await MasterRespository.getWorkCategory();
|
||||||
|
// setCategories(response.data);
|
||||||
|
// cacheData("Work Category", response.data);
|
||||||
|
// } catch (err) {
|
||||||
|
// setError(err);
|
||||||
|
// console.log(err);
|
||||||
|
// } finally {
|
||||||
|
// setloading(false);
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// setCategories(cacheddata);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// useEffect( () =>
|
||||||
|
// {
|
||||||
|
// fetchCategories()
|
||||||
|
// }, [] )
|
||||||
|
|
||||||
|
// return {categories,categoryLoading,categoryError}
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export const useContactCategory = () =>
|
||||||
|
// {
|
||||||
|
// const [ contactCategory, setContactCategory ] = useState( [] )
|
||||||
|
// const [ loading, setLoading ] = useState( false )
|
||||||
|
// const [ Error, setError ] = useState()
|
||||||
|
|
||||||
|
// const fetchConatctCategory = async() =>
|
||||||
|
// {
|
||||||
|
// const cache_Category = getCachedData( "Contact Category" );
|
||||||
|
// if ( !cache_Category )
|
||||||
|
// {
|
||||||
|
// try
|
||||||
|
// {
|
||||||
|
// let resp = await MasterRespository.getContactCategory();
|
||||||
|
// setContactCategory( resp.data );
|
||||||
|
// cacheData("Contact Category",resp.data)
|
||||||
|
// } catch ( error )
|
||||||
|
// {
|
||||||
|
// setError(error)
|
||||||
|
// }
|
||||||
|
// } else
|
||||||
|
// {
|
||||||
|
// setContactCategory(cache_Category)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// useEffect( () =>
|
||||||
|
// {
|
||||||
|
// fetchConatctCategory()
|
||||||
|
// }, [] )
|
||||||
|
// return { contactCategory,loading,Error}
|
||||||
|
// }
|
||||||
|
// export const useContactTags = () => {
|
||||||
|
// const [contactTags, setContactTags] = useState([]);
|
||||||
|
// const [loading, setLoading] = useState(false);
|
||||||
|
// const [error, setError] = useState(null);
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// const fetchContactTag = async () => {
|
||||||
|
// const cache_Tags = getCachedData("Contact Tag");
|
||||||
|
|
||||||
|
// if (!cache_Tags) {
|
||||||
|
// setLoading(true);
|
||||||
|
// try {
|
||||||
|
// const resp = await MasterRespository.getContactTag();
|
||||||
|
// setContactTags(resp.data);
|
||||||
|
// cacheData("Contact Tag", resp.data);
|
||||||
|
// } catch (err) {
|
||||||
|
// setError(err);
|
||||||
|
// } finally {
|
||||||
|
// setLoading(false);
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// setContactTags(cache_Tags);
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
// fetchContactTag();
|
||||||
|
// }, []);
|
||||||
|
|
||||||
|
// return { contactTags, loading, error };
|
||||||
|
// };
|
||||||
|
|
||||||
|
// Separate matser-------------
|
||||||
|
|
||||||
export const useActivitiesMaster = () =>
|
export const useActivitiesMaster = () =>
|
||||||
{
|
{
|
||||||
@ -93,76 +300,6 @@ export const useContactTags = () => {
|
|||||||
return { contactTags, loading, error };
|
return { contactTags, loading, error };
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export const useExpenseType =()=>{
|
|
||||||
const {
|
|
||||||
data: ExpenseTypes = [],
|
|
||||||
isLoading: loading,
|
|
||||||
error,
|
|
||||||
} = useQuery({
|
|
||||||
queryKey: ["Expense Type"],
|
|
||||||
queryFn: async () => {
|
|
||||||
const res = await MasterRespository.getExpenseType()
|
|
||||||
return res.data;
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
showToast(
|
|
||||||
error?.response?.data?.message ||
|
|
||||||
error.message ||
|
|
||||||
"Failed to fetch Expense Type",
|
|
||||||
"error"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return { ExpenseTypes, loading, error };
|
|
||||||
}
|
|
||||||
export const usePaymentMode =()=>{
|
|
||||||
const {
|
|
||||||
data: PaymentModes = [],
|
|
||||||
isLoading: loading,
|
|
||||||
error,
|
|
||||||
} = useQuery({
|
|
||||||
queryKey: ["Payment Mode"],
|
|
||||||
queryFn: async () => {
|
|
||||||
const res = await MasterRespository.getPaymentMode()
|
|
||||||
return res.data;
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
showToast(
|
|
||||||
error?.response?.data?.message ||
|
|
||||||
error.message ||
|
|
||||||
"Failed to fetch Payment Mode",
|
|
||||||
"error"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return { PaymentModes, loading, error };
|
|
||||||
}
|
|
||||||
export const useExpenseStatus =()=>{
|
|
||||||
const {
|
|
||||||
data: ExpenseStatus = [],
|
|
||||||
isLoading: loading,
|
|
||||||
error,
|
|
||||||
} = useQuery({
|
|
||||||
queryKey: ["Expense Status"],
|
|
||||||
queryFn: async () => {
|
|
||||||
const res = await MasterRespository.getExpenseStatus()
|
|
||||||
return res.data;
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
showToast(
|
|
||||||
error?.response?.data?.message ||
|
|
||||||
error.message ||
|
|
||||||
"Failed to fetch Expense Status",
|
|
||||||
"error"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return { ExpenseStatus, loading, error };
|
|
||||||
}
|
|
||||||
// ===Application Masters Query=================================================
|
// ===Application Masters Query=================================================
|
||||||
|
|
||||||
const fetchMasterData = async (masterType) => {
|
const fetchMasterData = async (masterType) => {
|
||||||
@ -179,12 +316,6 @@ const fetchMasterData = async (masterType) => {
|
|||||||
return (await MasterRespository.getContactCategory()).data;
|
return (await MasterRespository.getContactCategory()).data;
|
||||||
case "Contact Tag":
|
case "Contact Tag":
|
||||||
return (await MasterRespository.getContactTag()).data;
|
return (await MasterRespository.getContactTag()).data;
|
||||||
case "Expense Type":
|
|
||||||
return (await MasterRespository.getExpenseType()).data;
|
|
||||||
case "Payment Mode":
|
|
||||||
return (await MasterRespository.getPaymentMode()).data;
|
|
||||||
case "Expense Status":
|
|
||||||
return (await MasterRespository.getExpenseStatus()).data;
|
|
||||||
case "Status":
|
case "Status":
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
@ -535,140 +666,6 @@ export const useUpdateContactTag = (onSuccessCallback) =>
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// ----------------------Expense Type------------------
|
|
||||||
export const useCreateExpenseType = (onSuccessCallback)=>{
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
return useMutation( {
|
|
||||||
mutationFn: async ( payload ) =>
|
|
||||||
{
|
|
||||||
const resp = await MasterRespository.createExpenseType(payload);
|
|
||||||
return resp.data;
|
|
||||||
},
|
|
||||||
onSuccess: ( data ) =>
|
|
||||||
{
|
|
||||||
queryClient.invalidateQueries( {queryKey:[ "masterData", "Expense Type" ]} )
|
|
||||||
showToast( "Expense Type added successfully", "success" );
|
|
||||||
if(onSuccessCallback) onSuccessCallback(data)
|
|
||||||
},
|
|
||||||
onError: ( error ) =>
|
|
||||||
{
|
|
||||||
showToast(error.message || "Something went wrong", "error");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
export const useUpdateExpenseType = (onSuccessCallback) =>
|
|
||||||
{
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: async ( {id, payload} ) =>
|
|
||||||
{
|
|
||||||
const response = await MasterRespository.updateExpenseType(id,payload);
|
|
||||||
return response.data;
|
|
||||||
},
|
|
||||||
onSuccess: (data, variables) => {
|
|
||||||
|
|
||||||
queryClient.invalidateQueries({
|
|
||||||
queryKey: ["masterData", "Expense Type"],
|
|
||||||
});
|
|
||||||
showToast("Expense Type updated successfully.", "success");
|
|
||||||
|
|
||||||
if (onSuccessCallback) onSuccessCallback(data);
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
showToast(error.message || "Something went wrong", "error");
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------Payment Mode -------------
|
|
||||||
|
|
||||||
export const useCreatePaymentMode = (onSuccessCallback)=>{
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
return useMutation( {
|
|
||||||
mutationFn: async ( payload ) =>
|
|
||||||
{
|
|
||||||
const resp = await MasterRespository.createPaymentMode(payload);
|
|
||||||
return resp.data;
|
|
||||||
},
|
|
||||||
onSuccess: ( data ) =>
|
|
||||||
{
|
|
||||||
queryClient.invalidateQueries( {queryKey:[ "masterData", "Payment Mode" ]} )
|
|
||||||
showToast( "Payment Mode added successfully", "success" );
|
|
||||||
if(onSuccessCallback) onSuccessCallback(data)
|
|
||||||
},
|
|
||||||
onError: ( error ) =>
|
|
||||||
{
|
|
||||||
showToast(error.message || "Something went wrong", "error");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
export const useUpdatePaymentMode = (onSuccessCallback)=>{
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
return useMutation( {
|
|
||||||
mutationFn: async ( {id,payload} ) =>
|
|
||||||
{
|
|
||||||
const resp = await MasterRespository.updatePaymentMode(id,payload);
|
|
||||||
return resp.data;
|
|
||||||
},
|
|
||||||
onSuccess: ( data ) =>
|
|
||||||
{
|
|
||||||
queryClient.invalidateQueries( {queryKey:[ "masterData", "Payment Mode" ]} )
|
|
||||||
showToast( "Payment Mode Updated successfully", "success" );
|
|
||||||
if(onSuccessCallback) onSuccessCallback(data)
|
|
||||||
},
|
|
||||||
onError: ( error ) =>
|
|
||||||
{
|
|
||||||
showToast(error.message || "Something went wrong", "error");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// -------------------Expense Status----------------------------------
|
|
||||||
export const useCreateExpenseStatus =(onSuccessCallback)=>{
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
return useMutation( {
|
|
||||||
mutationFn: async ( payload ) =>
|
|
||||||
{
|
|
||||||
const resp = await MasterRespository.createExpenseStatus(payload);
|
|
||||||
return resp.data;
|
|
||||||
},
|
|
||||||
onSuccess: ( data ) =>
|
|
||||||
{
|
|
||||||
queryClient.invalidateQueries( {queryKey:[ "masterData", "Expense Status" ]} )
|
|
||||||
showToast( "Expense Status added successfully", "success" );
|
|
||||||
if(onSuccessCallback) onSuccessCallback(data)
|
|
||||||
},
|
|
||||||
onError: ( error ) =>
|
|
||||||
{
|
|
||||||
showToast(error.message || "Something went wrong", "error");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
export const useUpdateExpenseStatus = (onSuccessCallback)=>{
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
return useMutation( {
|
|
||||||
mutationFn: async ( {id,payload} ) =>
|
|
||||||
{
|
|
||||||
const resp = await MasterRespository.updateExepnseStatus(id,payload);
|
|
||||||
return resp.data;
|
|
||||||
},
|
|
||||||
onSuccess: ( data ) =>
|
|
||||||
{
|
|
||||||
queryClient.invalidateQueries( {queryKey:[ "masterData", "Expense Status" ]} )
|
|
||||||
showToast( "Expense Status Updated successfully", "success" );
|
|
||||||
if(onSuccessCallback) onSuccessCallback(data)
|
|
||||||
},
|
|
||||||
onError: ( error ) =>
|
|
||||||
{
|
|
||||||
showToast(error.message || "Something went wrong", "error");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// -Delete Master --------
|
// -Delete Master --------
|
||||||
export const useDeleteMasterItem = () => {
|
export const useDeleteMasterItem = () => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|||||||
@ -3,22 +3,27 @@ import { cacheData, getCachedData } from "../slices/apiDataManager";
|
|||||||
import { RolesRepository } from "../repositories/MastersRepository";
|
import { RolesRepository } from "../repositories/MastersRepository";
|
||||||
import EmployeeRepository from "../repositories/EmployeeRepository";
|
import EmployeeRepository from "../repositories/EmployeeRepository";
|
||||||
import ProjectRepository from "../repositories/ProjectRepository";
|
import ProjectRepository from "../repositories/ProjectRepository";
|
||||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
import showToast from "../services/toastService";
|
import showToast from "../services/toastService";
|
||||||
import {useSelector} from "react-redux";
|
import {useSelector} from "react-redux";
|
||||||
import {store} from "../store/store";
|
import {store} from "../store/store";
|
||||||
import {queryClient} from "../layouts/AuthLayout";
|
import {queryClient} from "../layouts/AuthLayout";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Query ---------------------------------------------------------------------------
|
// Query ---------------------------------------------------------------------------
|
||||||
|
|
||||||
export const useAllEmployees = (showInactive) => {
|
|
||||||
|
export const useAllEmployees = ( showInactive ) =>
|
||||||
|
{
|
||||||
const {
|
const {
|
||||||
data = [],
|
data = [],
|
||||||
isLoading,
|
isLoading,
|
||||||
error,
|
error,
|
||||||
refetch, // optional if you want recall functionality
|
refetch, // optional if you want recall functionality
|
||||||
} = useQuery({
|
} = useQuery({
|
||||||
queryKey: ["allEmployee", showInactive],
|
queryKey: ['allEmployee', showInactive],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const res = await EmployeeRepository.getAllEmployeeList(showInactive);
|
const res = await EmployeeRepository.getAllEmployeeList(showInactive);
|
||||||
return res.data;
|
return res.data;
|
||||||
@ -34,7 +39,9 @@ export const useAllEmployees = (showInactive) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// ManageBucket.jsx
|
// ManageBucket.jsx
|
||||||
export const useEmployees = (selectedProject) => {
|
export const useEmployees = ( selectedProject ) =>
|
||||||
|
{
|
||||||
|
|
||||||
const {
|
const {
|
||||||
data = [],
|
data = [],
|
||||||
isLoading,
|
isLoading,
|
||||||
@ -43,9 +50,7 @@ export const useEmployees = (selectedProject) => {
|
|||||||
} = useQuery({
|
} = useQuery({
|
||||||
queryKey: ["employeeListByProject", selectedProject],
|
queryKey: ["employeeListByProject", selectedProject],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const res = await EmployeeRepository.getEmployeeListByproject(
|
const res = await EmployeeRepository.getEmployeeListByproject(selectedProject);
|
||||||
selectedProject
|
|
||||||
);
|
|
||||||
return res.data || res;
|
return res.data || res;
|
||||||
},
|
},
|
||||||
enabled: !!selectedProject,
|
enabled: !!selectedProject,
|
||||||
@ -67,7 +72,7 @@ export const useEmployeeRoles = (employeeId) => {
|
|||||||
isLoading: loading,
|
isLoading: loading,
|
||||||
error,
|
error,
|
||||||
} = useQuery({
|
} = useQuery({
|
||||||
queryKey: ["employeeRoles", employeeId],
|
queryKey: ['employeeRoles', employeeId],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const res = await RolesRepository.getEmployeeRoles(employeeId);
|
const res = await RolesRepository.getEmployeeRoles(employeeId);
|
||||||
return res.data;
|
return res.data;
|
||||||
@ -90,7 +95,7 @@ export const useEmployeesByProject = (projectId) => {
|
|||||||
error,
|
error,
|
||||||
refetch: recallProjectEmplloyee,
|
refetch: recallProjectEmplloyee,
|
||||||
} = useQuery({
|
} = useQuery({
|
||||||
queryKey: ["projectEmployees", projectId],
|
queryKey: ['projectEmployees', projectId],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const res = await ProjectRepository.getEmployeesByProject(projectId);
|
const res = await ProjectRepository.getEmployeesByProject(projectId);
|
||||||
return res.data;
|
return res.data;
|
||||||
@ -107,14 +112,13 @@ export const useEmployeesByProject = (projectId) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// EmployeeList.jsx
|
// EmployeeList.jsx
|
||||||
export const useEmployeesAllOrByProjectId = (
|
export const useEmployeesAllOrByProjectId = (showAllEmployees ,projectId,
|
||||||
showAllEmployees,
|
showInactive) => {
|
||||||
projectId,
|
|
||||||
showInactive
|
|
||||||
) => {
|
|
||||||
const queryKey = showAllEmployees
|
const queryKey = showAllEmployees
|
||||||
? ["allEmployees", showInactive]
|
? ['allEmployees', showInactive]
|
||||||
: ["projectEmployees", projectId, showInactive];
|
: ['projectEmployees', projectId, showInactive];
|
||||||
|
|
||||||
const queryFn = async () => {
|
const queryFn = async () => {
|
||||||
if (showAllEmployees) {
|
if (showAllEmployees) {
|
||||||
@ -135,8 +139,7 @@ export const useEmployeesAllOrByProjectId = (
|
|||||||
} = useQuery({
|
} = useQuery({
|
||||||
queryKey,
|
queryKey,
|
||||||
queryFn,
|
queryFn,
|
||||||
enabled:
|
enabled:typeof showInactive === "boolean" && (showAllEmployees || !!projectId),
|
||||||
typeof showInactive === "boolean" && (showAllEmployees || !!projectId),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -148,15 +151,16 @@ export const useEmployeesAllOrByProjectId = (
|
|||||||
};
|
};
|
||||||
|
|
||||||
// ManageEmployee.jsx
|
// ManageEmployee.jsx
|
||||||
export const useEmployeeProfile = (employeeId) => {
|
export const useEmployeeProfile = ( employeeId ) =>
|
||||||
|
{
|
||||||
const isEnabled = !!employeeId;
|
const isEnabled = !!employeeId;
|
||||||
const {
|
const {
|
||||||
data = null,
|
data = null,
|
||||||
isLoading: loading,
|
isLoading: loading,
|
||||||
error,
|
error,
|
||||||
refetch,
|
refetch
|
||||||
} = useQuery({
|
} = useQuery({
|
||||||
queryKey: ["employeeProfile", employeeId],
|
queryKey: ['employeeProfile', employeeId],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
if (!employeeId) return null;
|
if (!employeeId) return null;
|
||||||
const res = await EmployeeRepository.getEmployeeProfile(employeeId);
|
const res = await EmployeeRepository.getEmployeeProfile(employeeId);
|
||||||
@ -169,77 +173,47 @@ export const useEmployeeProfile = (employeeId) => {
|
|||||||
employee: data,
|
employee: data,
|
||||||
loading,
|
loading,
|
||||||
error,
|
error,
|
||||||
refetch,
|
refetch
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useEmployeesName = (projectId, search) => {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["employees", projectId, search],
|
|
||||||
queryFn: async() => await EmployeeRepository.getEmployeeName(projectId, search),
|
|
||||||
|
|
||||||
staleTime: 5 * 60 * 1000, // Optional: cache for 5 minutes
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useEmployeesNameByProject = (projectId) => {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["Projectemployees", projectId],
|
|
||||||
queryFn: async () => {
|
|
||||||
const response = await EmployeeRepository.getEmployeeName(projectId);
|
|
||||||
return response?.data || []; // handle undefined/null response
|
|
||||||
},
|
|
||||||
enabled: !!projectId, // only fetch if projectId is truthy
|
|
||||||
staleTime: 5 * 60 * 1000, // cache for 5 minutes
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
// Mutation------------------------------------------------------------------
|
// Mutation------------------------------------------------------------------
|
||||||
|
|
||||||
export const useUpdateEmployee = () => {
|
|
||||||
const selectedProject = useSelector(
|
|
||||||
(store) => store.localVariables.projectId
|
export const useUpdateEmployee = () =>
|
||||||
);
|
{
|
||||||
|
const selectedProject = useSelector((store)=>store.localVariables.projectId)
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
return useMutation({
|
return useMutation({
|
||||||
mutationFn: (employeeData) =>
|
mutationFn: (employeeData) => EmployeeRepository.manageEmployee(employeeData),
|
||||||
EmployeeRepository.manageEmployee(employeeData),
|
|
||||||
onSuccess: (_, variables) => {
|
onSuccess: (_, variables) => {
|
||||||
const id = variables.id || variables.employeeId;
|
const id = variables.id || variables.employeeId;
|
||||||
const isAllEmployee = variables.IsAllEmployee;
|
const isAllEmployee = variables.IsAllEmployee;
|
||||||
|
|
||||||
// Cache invalidation
|
// Cache invalidation
|
||||||
queryClient.invalidateQueries({ queryKey: ["allEmployees"] });
|
queryClient.invalidateQueries( {queryKey:[ 'allEmployees'] });
|
||||||
// queryClient.invalidateQueries(['employeeProfile', id]);
|
// queryClient.invalidateQueries(['employeeProfile', id]);
|
||||||
queryClient.invalidateQueries({ queryKey: ["projectEmployees"] });
|
queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
|
||||||
queryClient.removeQueries( {queryKey: [ "empListByProjectAllocated" ]} );
|
queryClient.removeQueries( {queryKey: [ "empListByProjectAllocated" ]} );
|
||||||
|
|
||||||
// queryClient.invalidateQueries( {queryKey:[ 'employeeListByProject']} );
|
// queryClient.invalidateQueries( {queryKey:[ 'employeeListByProject']} );
|
||||||
showToast(
|
showToast( `Employee ${ id ? 'updated' : 'created' } successfully`, 'success' );
|
||||||
`Employee ${id ? "updated" : "created"} successfully`,
|
|
||||||
"success"
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
onError: (error) => {
|
onError: (error) => {
|
||||||
const msg =
|
const msg = error?.response?.data?.message || error.message || 'Something went wrong';
|
||||||
error?.response?.data?.message ||
|
showToast(msg, 'error');
|
||||||
error.message ||
|
|
||||||
"Something went wrong";
|
|
||||||
showToast(msg, "error");
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useSuspendEmployee = ({
|
|
||||||
setIsDeleteModalOpen,
|
|
||||||
setemployeeLodaing,
|
export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing }) => {
|
||||||
}) => {
|
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const selectedProject = useSelector(
|
const selectedProject = useSelector((store)=>store.localVariables.projectId)
|
||||||
(store) => store.localVariables.projectId
|
|
||||||
);
|
|
||||||
return useMutation({
|
return useMutation({
|
||||||
mutationFn: (id) => {
|
mutationFn: (id) => {
|
||||||
setemployeeLodaing(true);
|
setemployeeLodaing(true);
|
||||||
@ -247,11 +221,11 @@ export const useSuspendEmployee = ({
|
|||||||
},
|
},
|
||||||
|
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
|
|
||||||
|
|
||||||
// queryClient.invalidateQueries( ['allEmployee',false]);
|
// queryClient.invalidateQueries( ['allEmployee',false]);
|
||||||
queryClient.invalidateQueries({ queryKey: ["projectEmployees"] });
|
queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
|
||||||
queryClient.invalidateQueries({
|
queryClient.invalidateQueries( {queryKey:[ 'employeeListByProject' ,selectedProject]} );
|
||||||
queryKey: ["employeeListByProject", selectedProject],
|
|
||||||
});
|
|
||||||
showToast("Employee deleted successfully.", "success");
|
showToast("Employee deleted successfully.", "success");
|
||||||
setIsDeleteModalOpen(false);
|
setIsDeleteModalOpen(false);
|
||||||
},
|
},
|
||||||
@ -273,11 +247,8 @@ export const useSuspendEmployee = ({
|
|||||||
|
|
||||||
// Manage Role
|
// Manage Role
|
||||||
|
|
||||||
export const useUpdateEmployeeRoles = ({
|
|
||||||
onClose,
|
export const useUpdateEmployeeRoles = ({ onClose, resetForm, onSuccessCallback } = {}) => {
|
||||||
resetForm,
|
|
||||||
onSuccessCallback,
|
|
||||||
} = {}) => {
|
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const mutation = useMutation({
|
const mutation = useMutation({
|
||||||
mutationFn: (updates) => RolesRepository.createEmployeeRoles(updates),
|
mutationFn: (updates) => RolesRepository.createEmployeeRoles(updates),
|
||||||
@ -293,9 +264,7 @@ export const useUpdateEmployeeRoles = ({
|
|||||||
},
|
},
|
||||||
onError: (err) => {
|
onError: (err) => {
|
||||||
const message =
|
const message =
|
||||||
err?.response?.data?.message ||
|
err?.response?.data?.message || err?.message || "Error occurred while updating roles";
|
||||||
err?.message ||
|
|
||||||
"Error occurred while updating roles";
|
|
||||||
showToast(message, "error");
|
showToast(message, "error");
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,264 +0,0 @@
|
|||||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
||||||
import ExpenseRepository from "../repositories/ExpsenseRepository";
|
|
||||||
import showToast from "../services/toastService";
|
|
||||||
import { queryClient } from "../layouts/AuthLayout";
|
|
||||||
import { useSelector } from "react-redux";
|
|
||||||
import moment from "moment";
|
|
||||||
|
|
||||||
// -------------------Query------------------------------------------------------
|
|
||||||
|
|
||||||
const cleanFilter = (filter) => {
|
|
||||||
const cleaned = { ...filter };
|
|
||||||
|
|
||||||
["projectIds", "statusIds", "createdByIds", "paidById"].forEach((key) => {
|
|
||||||
if (Array.isArray(cleaned[key]) && cleaned[key].length === 0) {
|
|
||||||
delete cleaned[key];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// moment.utc() to get consistent UTC ISO strings
|
|
||||||
if (!cleaned.startDate) {
|
|
||||||
cleaned.startDate = moment.utc().subtract(7, "days").startOf("day").toISOString();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!cleaned.endDate) {
|
|
||||||
cleaned.endDate = moment.utc().startOf("day").toISOString();
|
|
||||||
}
|
|
||||||
|
|
||||||
return cleaned;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
export const useExpenseList = (
|
|
||||||
pageSize,
|
|
||||||
pageNumber,
|
|
||||||
filter,
|
|
||||||
searchString = ""
|
|
||||||
) => {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["Expenses", pageNumber, pageSize, filter, searchString],
|
|
||||||
queryFn: async () => {
|
|
||||||
const cleanedFilter = cleanFilter(filter);
|
|
||||||
const response = await ExpenseRepository.GetExpenseList(
|
|
||||||
pageSize,
|
|
||||||
pageNumber,
|
|
||||||
cleanedFilter,
|
|
||||||
searchString
|
|
||||||
);
|
|
||||||
return response.data;
|
|
||||||
},
|
|
||||||
keepPreviousData: true,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useExpense = (ExpenseId) => {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["Expense", ExpenseId],
|
|
||||||
queryFn: async () =>
|
|
||||||
await ExpenseRepository.GetExpenseDetails(ExpenseId).then(
|
|
||||||
(res) => res.data
|
|
||||||
),
|
|
||||||
enabled: !!ExpenseId,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useExpenseFilter = () => {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["ExpenseFilter"],
|
|
||||||
queryFn: async () =>
|
|
||||||
await ExpenseRepository.GetExpenseFilter().then((res) => res.data),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// ---------------------------Mutation---------------------------------------------
|
|
||||||
|
|
||||||
export const useCreateExpnse = (onSuccessCallBack) => {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: async (payload) => {
|
|
||||||
await ExpenseRepository.CreateExpense(payload);
|
|
||||||
},
|
|
||||||
onSuccess: (_, variables) => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["Expenses"] });
|
|
||||||
showToast("Expense Created Successfully", "success");
|
|
||||||
if (onSuccessCallBack) onSuccessCallBack();
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
showToast(
|
|
||||||
error.message || "Something went wrong please try again !",
|
|
||||||
"error"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useUpdateExpense = (onSuccessCallBack) => {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: async ({ id, payload }) => {
|
|
||||||
const response = await ExpenseRepository.UpdateExpense(id, payload);
|
|
||||||
return response.data;
|
|
||||||
},
|
|
||||||
onSuccess: (updatedExpense, variables) => {
|
|
||||||
// queryClient.setQueriesData(
|
|
||||||
// {queryKey:['expenses'],exact:true},
|
|
||||||
// (oldData) => {
|
|
||||||
// if (!oldData || !oldData.data) return oldData;
|
|
||||||
|
|
||||||
// const updatedList = oldData.data.map((expense) => {
|
|
||||||
// if (expense.id !== variables.id) return expense;
|
|
||||||
|
|
||||||
// return {
|
|
||||||
// ...expense,
|
|
||||||
// project:
|
|
||||||
// expense.project.id !== updatedExpense.project.id
|
|
||||||
// ? updatedExpense.project
|
|
||||||
// : expense.project,
|
|
||||||
// expensesType:
|
|
||||||
// expense.expensesType.id !== updatedExpense.expensesType.id
|
|
||||||
// ? updatedExpense.expensesType
|
|
||||||
// : expense.expensesType,
|
|
||||||
// paymentMode:
|
|
||||||
// expense.paymentMode.id !== updatedExpense.paymentMode.id
|
|
||||||
// ? updatedExpense.paymentMode
|
|
||||||
// : expense.paymentMode,
|
|
||||||
// paidBy:
|
|
||||||
// expense.paidBy.id !== updatedExpense.paidBy.id
|
|
||||||
// ? updatedExpense.paidBy
|
|
||||||
// : expense.paidBy,
|
|
||||||
// createdBy:
|
|
||||||
// expense.createdBy.id !== updatedExpense.createdBy.id
|
|
||||||
// ? updatedExpense.createdBy
|
|
||||||
// : expense.createdBy,
|
|
||||||
// createdAt: updatedExpense.createdAt,
|
|
||||||
// status: updatedExpense.status,
|
|
||||||
// nextStatus: updatedExpense.nextStatus,
|
|
||||||
// preApproved: updatedExpense.preApproved,
|
|
||||||
// transactionDate: updatedExpense.transactionDate,
|
|
||||||
// amount: updatedExpense.amount,
|
|
||||||
// };
|
|
||||||
// });
|
|
||||||
|
|
||||||
// return {
|
|
||||||
// ...oldData,
|
|
||||||
// data: updatedList,
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
queryClient.removeQueries({ queryKey: ["Expense", variables.id] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["Expenses"] });
|
|
||||||
showToast("Expense updated Successfully", "success");
|
|
||||||
|
|
||||||
if (onSuccessCallBack) onSuccessCallBack();
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
showToast("Something went wrong.Please try again later.", "error");
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useActionOnExpense = (onSuccessCallBack) => {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: async (payload) => {
|
|
||||||
const response = await ExpenseRepository.ActionOnExpense(payload);
|
|
||||||
return response.data;
|
|
||||||
},
|
|
||||||
onSuccess: (updatedExpense, variables) => {
|
|
||||||
showToast("Request processed successfully.", "success");
|
|
||||||
|
|
||||||
// queryClient.setQueriesData(
|
|
||||||
// {
|
|
||||||
// queryKey: ["Expenses"],
|
|
||||||
// exact: false,
|
|
||||||
// },
|
|
||||||
// (oldData) => {
|
|
||||||
// if (!oldData) return oldData;
|
|
||||||
// return {
|
|
||||||
// ...oldData,
|
|
||||||
// data: oldData.data.map((item) =>
|
|
||||||
// item.id === updatedExpense.id
|
|
||||||
// ? {
|
|
||||||
// ...item,
|
|
||||||
// nextStatus: updatedExpense.nextStatus,
|
|
||||||
// status: updatedExpense.status,
|
|
||||||
// }
|
|
||||||
// : item
|
|
||||||
// ),
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
// queryClient.setQueriesData(
|
|
||||||
// { queryKey: ["Expense", updatedExpense.id] },
|
|
||||||
// (oldData) => {
|
|
||||||
// return {
|
|
||||||
// ...oldData,
|
|
||||||
// nextStatus: updatedExpense.nextStatus,
|
|
||||||
// status: updatedExpense.status,
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
queryClient.invalidateQueries({queryKey:["Expense",updatedExpense.id]})
|
|
||||||
queryClient.invalidateQueries({queryKey:["Expenses"]})
|
|
||||||
|
|
||||||
if (onSuccessCallBack) onSuccessCallBack();
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
showToast(
|
|
||||||
error.response.data.message ||
|
|
||||||
"Something went wrong.Please try again later.",
|
|
||||||
"error"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useDeleteExpense = () => {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: async ({ id }) => {
|
|
||||||
const response = await ExpenseRepository.DeleteExpense(id);
|
|
||||||
return response.data;
|
|
||||||
},
|
|
||||||
onSuccess: (data, variables) => {
|
|
||||||
queryClient.setQueryData(["Expenses"], (oldData) => {
|
|
||||||
if (!oldData || !oldData.data)
|
|
||||||
return queryClient.invalidateQueries({ queryKey: ["Expenses"] });
|
|
||||||
|
|
||||||
const updatedList = oldData.data.filter(
|
|
||||||
(expense) => expense.id !== variables.id
|
|
||||||
);
|
|
||||||
|
|
||||||
return {
|
|
||||||
...oldData,
|
|
||||||
data: updatedList,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
showToast(data.message || "Expense deleted successfully", "success");
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
showToast(
|
|
||||||
error.message ||
|
|
||||||
error.response.message ||
|
|
||||||
"Something went wrong.Please try again later.",
|
|
||||||
"error"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useHasAnyPermission = (permissionIdsInput) => {
|
|
||||||
const permissions = useSelector((state) => state?.profile?.permissions || []);
|
|
||||||
|
|
||||||
const permissionIds = Array.isArray(permissionIdsInput)
|
|
||||||
? permissionIdsInput
|
|
||||||
: [];
|
|
||||||
|
|
||||||
// No permission needed
|
|
||||||
if (permissionIds.length === 0) return true;
|
|
||||||
|
|
||||||
return permissionIds.some((id) => permissions.includes(id));
|
|
||||||
};
|
|
||||||
@ -1,8 +1,6 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import showToast from '../services/toastService';
|
import showToast from '../services/toastService';
|
||||||
|
|
||||||
let hasShownLocationErrorToast = false; // global flag
|
|
||||||
|
|
||||||
export const usePositionTracker = () => {
|
export const usePositionTracker = () => {
|
||||||
const [coords, setCoords] = useState({ latitude: 0, longitude: 0 });
|
const [coords, setCoords] = useState({ latitude: 0, longitude: 0 });
|
||||||
|
|
||||||
@ -12,16 +10,11 @@ export const usePositionTracker = () => {
|
|||||||
setCoords(coords);
|
setCoords(coords);
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
if (!hasShownLocationErrorToast) {
|
|
||||||
showToast("Please Allow Location","warn");
|
showToast("Please Allow Location","warn");
|
||||||
hasShownLocationErrorToast = true;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
|
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
|
||||||
);
|
);
|
||||||
|
|
||||||
return () => navigator.geolocation.clearWatch(locationID);
|
return () => navigator.geolocation.clearWatch(locationID);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return coords;
|
return coords;
|
||||||
};
|
};
|
||||||
@ -14,6 +14,196 @@ import {
|
|||||||
} from "@tanstack/react-query";
|
} from "@tanstack/react-query";
|
||||||
import showToast from "../services/toastService";
|
import showToast from "../services/toastService";
|
||||||
|
|
||||||
|
// export const useProjects = () => {
|
||||||
|
// const loggedUser = useSelector((store) => store.globalVariables.loginUser);
|
||||||
|
// const [projects, setProjects] = useState([]);
|
||||||
|
// const [loading, setLoading] = useState(true);
|
||||||
|
// const [error, setError] = useState("");
|
||||||
|
|
||||||
|
// const fetchData = async () => {
|
||||||
|
// const projectIds = loggedUser?.projects || [];
|
||||||
|
|
||||||
|
// const filterProjects = (projectsList) => {
|
||||||
|
// return projectsList
|
||||||
|
// .filter((proj) => projectIds.includes(String(proj.id)))
|
||||||
|
// .sort((a, b) => a?.name?.localeCompare(b.name));
|
||||||
|
// };
|
||||||
|
|
||||||
|
// const projects_cache = getCachedData("projectslist");
|
||||||
|
|
||||||
|
// if (!projects_cache) {
|
||||||
|
// setLoading(true);
|
||||||
|
// try {
|
||||||
|
// const response = await ProjectRepository.getProjectList();
|
||||||
|
// const allProjects = response.data;
|
||||||
|
// const filtered = filterProjects(allProjects);
|
||||||
|
// setProjects(filtered);
|
||||||
|
// cacheData("projectslist", allProjects);
|
||||||
|
// } catch (err) {
|
||||||
|
// setError("Failed to fetch data.");
|
||||||
|
// } finally {
|
||||||
|
// setLoading(false);
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// if (!projects.length) {
|
||||||
|
// const filtered = filterProjects(projects_cache);
|
||||||
|
// setProjects(filtered);
|
||||||
|
// setLoading(false);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
// useEffect(() => {
|
||||||
|
// if (loggedUser) {
|
||||||
|
// fetchData();
|
||||||
|
// }
|
||||||
|
// }, [loggedUser]);
|
||||||
|
|
||||||
|
// return { projects, loading, error, refetch: fetchData };
|
||||||
|
// };
|
||||||
|
|
||||||
|
// export const useEmployeesByProjectAllocated = (selectedProject) => {
|
||||||
|
// const [projectEmployees, setEmployeeList] = useState([]);
|
||||||
|
// const [loading, setLoading] = useState(true);
|
||||||
|
// const [projects, setProjects] = useState([]);
|
||||||
|
|
||||||
|
// const fetchData = async (projectid) => {
|
||||||
|
// try {
|
||||||
|
// let EmployeeByProject_Cache = getCachedData("empListByProjectAllocated");
|
||||||
|
// if (
|
||||||
|
// !EmployeeByProject_Cache ||
|
||||||
|
// !EmployeeByProject_Cache.projectId === projectid
|
||||||
|
// ) {
|
||||||
|
// let response = await ProjectRepository.getProjectAllocation(projectid);
|
||||||
|
// setEmployeeList(response.data);
|
||||||
|
// cacheData("empListByProjectAllocated", {
|
||||||
|
// data: response.data,
|
||||||
|
// projectId: projectid,
|
||||||
|
// });
|
||||||
|
// setLoading(false);
|
||||||
|
// } else {
|
||||||
|
// setEmployeeList(EmployeeByProject_Cache.data);
|
||||||
|
// setLoading(false);
|
||||||
|
// }
|
||||||
|
// } catch (err) {
|
||||||
|
// setError("Failed to fetch data.");
|
||||||
|
// setLoading(false);
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// if (selectedProject) {
|
||||||
|
// fetchData(selectedProject);
|
||||||
|
// }
|
||||||
|
// }, [selectedProject]);
|
||||||
|
|
||||||
|
// return { projectEmployees, loading, projects };
|
||||||
|
// };
|
||||||
|
|
||||||
|
// export const useProjectDetails = (projectId) => {
|
||||||
|
// const { profile } = useProfile();
|
||||||
|
// const [projects_Details, setProject_Details] = useState(null);
|
||||||
|
// const [loading, setLoading] = useState(true);
|
||||||
|
// const [error, setError] = useState("");
|
||||||
|
|
||||||
|
// const fetchData = async () => {
|
||||||
|
// setLoading(true);
|
||||||
|
|
||||||
|
// const project_cache = getCachedData("projectInfo");
|
||||||
|
// if (!project_cache || project_cache?.projectId != projectId) {
|
||||||
|
// ProjectRepository.getProjectByprojectId(projectId)
|
||||||
|
// .then((response) => {
|
||||||
|
// setProject_Details(response.data);
|
||||||
|
// cacheData("projectInfo", {
|
||||||
|
// projectId: projectId,
|
||||||
|
// data: response.data,
|
||||||
|
// });
|
||||||
|
// setLoading(false);
|
||||||
|
// })
|
||||||
|
// .catch((error) => {
|
||||||
|
// console.error(error);
|
||||||
|
// setError("Failed to fetch data.");
|
||||||
|
// setLoading(false);
|
||||||
|
// });
|
||||||
|
// } else {
|
||||||
|
// setProject_Details(project_cache.data);
|
||||||
|
// setLoading(false);
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// if (profile && projectId != undefined) {
|
||||||
|
// fetchData();
|
||||||
|
// }
|
||||||
|
// }, [projectId, profile]);
|
||||||
|
|
||||||
|
// return { projects_Details, loading, error, refetch: fetchData };
|
||||||
|
// };
|
||||||
|
|
||||||
|
// export const useProjectsByEmployee = (employeeId) => {
|
||||||
|
// const [projectList, setProjectList] = useState([]);
|
||||||
|
// const [loading, setLoading] = useState(false);
|
||||||
|
// const [error, setError] = useState("");
|
||||||
|
|
||||||
|
// const fetchProjects = async (id) => {
|
||||||
|
// try {
|
||||||
|
// setLoading(true);
|
||||||
|
// setError(""); // clear previous error
|
||||||
|
// const res = await ProjectRepository.getProjectsByEmployee(id);
|
||||||
|
// setProjectList(res.data);
|
||||||
|
// cacheData("ProjectsByEmployee", { data: res.data, employeeId: id });
|
||||||
|
// setLoading(false);
|
||||||
|
// } catch (err) {
|
||||||
|
// setError(err?.message || "Failed to fetch projects");
|
||||||
|
// setLoading(false);
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// if (!employeeId) return;
|
||||||
|
|
||||||
|
// const cache_project = getCachedData("ProjectsByEmployee");
|
||||||
|
|
||||||
|
// if (!cache_project?.data || cache_project?.employeeId !== employeeId) {
|
||||||
|
// fetchProjects(employeeId);
|
||||||
|
// } else {
|
||||||
|
// setProjectList(cache_project.data);
|
||||||
|
// }
|
||||||
|
// }, [employeeId]);
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// projectList,
|
||||||
|
// loading,
|
||||||
|
// error,
|
||||||
|
// refetch: fetchProjects,
|
||||||
|
// };
|
||||||
|
// };
|
||||||
|
|
||||||
|
// export const useProjectName = () => {
|
||||||
|
// const [loading, setLoading] = useState(true);
|
||||||
|
// const [projectNames, setProjectName] = useState([]);
|
||||||
|
// const [Error, setError] = useState();
|
||||||
|
// const dispatch = useDispatch();
|
||||||
|
|
||||||
|
// const fetchData = async () => {
|
||||||
|
// try {
|
||||||
|
// let response = await ProjectRepository.projectNameList();
|
||||||
|
// setProjectName(response.data);
|
||||||
|
// cacheData("basicProjectNameList", response.data);
|
||||||
|
// setLoading(false);
|
||||||
|
// if(response.data.length === 1){
|
||||||
|
// dispatch(setProjectId(response.data[0]?.id));
|
||||||
|
// }
|
||||||
|
// } catch (err) {
|
||||||
|
// setError("Failed to fetch data.");
|
||||||
|
// setLoading(false);
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
// useEffect(() => {
|
||||||
|
// fetchData();
|
||||||
|
// }, []);
|
||||||
|
|
||||||
|
// return { projectNames, loading, Error, fetchData };
|
||||||
|
// };
|
||||||
|
|
||||||
// ------------------------------Query-------------------
|
// ------------------------------Query-------------------
|
||||||
|
|
||||||
@ -123,7 +313,6 @@ export const useProjectName = () => {
|
|||||||
isLoading,
|
isLoading,
|
||||||
error,
|
error,
|
||||||
refetch,
|
refetch,
|
||||||
isError
|
|
||||||
} = useQuery({
|
} = useQuery({
|
||||||
queryKey: ["basicProjectNameList"],
|
queryKey: ["basicProjectNameList"],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
@ -134,7 +323,7 @@ export const useProjectName = () => {
|
|||||||
showToast(error.message || "Error while Fetching project Name", "error");
|
showToast(error.message || "Error while Fetching project Name", "error");
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
return { projectNames: data, loading: isLoading, Error: error, refetch,isError };
|
return { projectNames: data, loading: isLoading, Error: error, refetch };
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useProjectInfra = (projectId) => {
|
export const useProjectInfra = (projectId) => {
|
||||||
|
|||||||
@ -4,22 +4,23 @@ import { MarketRepository } from "../repositories/MarketRepository";
|
|||||||
import showToast from "../services/toastService";
|
import showToast from "../services/toastService";
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
import { setCurrentTenant } from "../slices/globalVariablesSlice";
|
import { setCurrentTenant } from "../slices/globalVariablesSlice";
|
||||||
import { ITEMS_PER_PAGE } from "../utils/constants";
|
|
||||||
|
|
||||||
export const useTenants = (pageNumber, filter = {}, searchString = "") => {
|
export const useTenants = (
|
||||||
return useQuery({
|
pageSize,
|
||||||
queryKey: ["Tenants", pageNumber, JSON.stringify(filter), searchString],
|
|
||||||
queryFn: async () => {
|
|
||||||
const response = await TenantRepository.getTenantList(
|
|
||||||
ITEMS_PER_PAGE,
|
|
||||||
pageNumber,
|
pageNumber,
|
||||||
filter,
|
filter,
|
||||||
searchString
|
searchString = ""
|
||||||
|
) => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ["Tenants", pageNumber, pageSize],
|
||||||
|
queryFn: async () => {
|
||||||
|
const response = await TenantRepository.getTenantList(
|
||||||
|
pageSize,
|
||||||
|
pageNumber,
|
||||||
);
|
);
|
||||||
return response.data;
|
return response.data;
|
||||||
},
|
},
|
||||||
keepPreviousData: true,
|
keepPreviousData: true,
|
||||||
staleTime: 60_000
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -7,8 +7,6 @@ import Footer from "../components/Layout/Footer";
|
|||||||
import FloatingMenu from "../components/common/FloatingMenu";
|
import FloatingMenu from "../components/common/FloatingMenu";
|
||||||
import { FabProvider } from "../Context/FabContext";
|
import { FabProvider } from "../Context/FabContext";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import OffcanvasTrigger from "../components/common/OffcanvasTrigger";
|
|
||||||
import GlobalOffcanvas from "../components/common/GlobalOffcanvas";
|
|
||||||
|
|
||||||
const HomeLayout = () => {
|
const HomeLayout = () => {
|
||||||
const loggedUser = useSelector((store) => store.globalVariables.loginUser);
|
const loggedUser = useSelector((store) => store.globalVariables.loginUser);
|
||||||
@ -36,11 +34,9 @@ const HomeLayout = () => {
|
|||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<OffcanvasTrigger />
|
|
||||||
<FloatingMenu />
|
<FloatingMenu />
|
||||||
<div className="layout-overlay layout-menu-toggle"></div>
|
<div className="layout-overlay layout-menu-toggle"></div>
|
||||||
</div>
|
</div>
|
||||||
<GlobalOffcanvas />
|
|
||||||
</div>
|
</div>
|
||||||
</FabProvider>
|
</FabProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -27,7 +27,7 @@ const AttendancePage = () => {
|
|||||||
const [ShowPending, setShowPending] = useState(false);
|
const [ShowPending, setShowPending] = useState(false);
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const loginUser = getCachedProfileData();
|
const loginUser = getCachedProfileData();
|
||||||
const selectedProject = useSelector((store) => store.localVariables.projectId);
|
var selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
const [attendances, setAttendances] = useState();
|
const [attendances, setAttendances] = useState();
|
||||||
@ -156,16 +156,19 @@ const AttendancePage = () => {
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3" >
|
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3" >
|
||||||
{selectedProject ? (
|
|
||||||
<>
|
|
||||||
{activeTab === "all" && (
|
{activeTab === "all" && (
|
||||||
<div className="tab-pane fade show active py-0">
|
<div className="tab-pane fade show active py-0">
|
||||||
<Attendance handleModalData={handleModalData} getRole={getRole} />
|
<Attendance
|
||||||
|
handleModalData={handleModalData}
|
||||||
|
getRole={getRole}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{activeTab === "logs" && (
|
{activeTab === "logs" && (
|
||||||
<div className="tab-pane fade show active py-0">
|
<div className="tab-pane fade show active py-0">
|
||||||
<AttendanceLog handleModalData={handleModalData} />
|
<AttendanceLog
|
||||||
|
handleModalData={handleModalData}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{activeTab === "regularization" && DoRegularized && (
|
{activeTab === "regularization" && DoRegularized && (
|
||||||
@ -173,14 +176,7 @@ const AttendancePage = () => {
|
|||||||
<Regularization />
|
<Regularization />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className="py-2">
|
|
||||||
<small className="py-2">Please Select Project!</small>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -49,12 +49,10 @@ const DailyTask = () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!selectedProject?.id && projectNames.length > 0) {
|
if(selectedProject == null){
|
||||||
dispatch(setProjectId(projectNames[0].id));
|
dispatch(setProjectId(projectNames[0]?.id));
|
||||||
}
|
}
|
||||||
|
},[])
|
||||||
}, [selectedProject, projectNames, dispatch]);
|
|
||||||
|
|
||||||
const [TaskLists, setTaskLists] = useState([]);
|
const [TaskLists, setTaskLists] = useState([]);
|
||||||
const [dates, setDates] = useState([]);
|
const [dates, setDates] = useState([]);
|
||||||
const popoverRefs = useRef([]);
|
const popoverRefs = useRef([]);
|
||||||
|
|||||||
@ -1,195 +0,0 @@
|
|||||||
import React, { createContext, useContext, useState, useEffect } from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { useSelector } from "react-redux";
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import ExpenseList from "../../components/Expenses/ExpenseList";
|
|
||||||
import ViewExpense from "../../components/Expenses/ViewExpense";
|
|
||||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
|
||||||
import GlobalModel from "../../components/common/GlobalModel";
|
|
||||||
import PreviewDocument from "../../components/Expenses/PreviewDocument";
|
|
||||||
import ManageExpense from "../../components/Expenses/ManageExpense";
|
|
||||||
import ExpenseFilterPanel from "../../components/Expenses/ExpenseFilterPanel";
|
|
||||||
|
|
||||||
// Context & Hooks
|
|
||||||
import { useFab } from "../../Context/FabContext";
|
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
||||||
import {
|
|
||||||
CREATE_EXEPENSE,
|
|
||||||
VIEW_ALL_EXPNESE,
|
|
||||||
VIEW_SELF_EXPENSE,
|
|
||||||
} from "../../utils/constants";
|
|
||||||
|
|
||||||
// Schema & Defaults
|
|
||||||
import {
|
|
||||||
defaultFilter,
|
|
||||||
SearchSchema,
|
|
||||||
} from "../../components/Expenses/ExpenseSchema";
|
|
||||||
|
|
||||||
// Context
|
|
||||||
export const ExpenseContext = createContext();
|
|
||||||
export const useExpenseContext = () => {
|
|
||||||
const context = useContext(ExpenseContext);
|
|
||||||
if (!context) {
|
|
||||||
throw new Error("useExpenseContext must be used within an ExpenseProvider");
|
|
||||||
}
|
|
||||||
return context;
|
|
||||||
};
|
|
||||||
|
|
||||||
const ExpensePage = () => {
|
|
||||||
const selectedProjectId = useSelector(
|
|
||||||
(store) => store.localVariables.projectId
|
|
||||||
);
|
|
||||||
|
|
||||||
const [filters, setFilter] = useState();
|
|
||||||
const [groupBy, setGroupBy] = useState("transactionDate");
|
|
||||||
const [searchText, setSearchText] = useState("");
|
|
||||||
|
|
||||||
const [ManageExpenseModal, setManageExpenseModal] = useState({
|
|
||||||
IsOpen: null,
|
|
||||||
expenseId: null,
|
|
||||||
});
|
|
||||||
|
|
||||||
const [viewExpense, setViewExpense] = useState({
|
|
||||||
expenseId: null,
|
|
||||||
view: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const [ViewDocument, setDocumentView] = useState({
|
|
||||||
IsOpen: false,
|
|
||||||
Image: null,
|
|
||||||
});
|
|
||||||
|
|
||||||
const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE);
|
|
||||||
const IsViewAll = useHasUserPermission(VIEW_ALL_EXPNESE);
|
|
||||||
const IsViewSelf = useHasUserPermission(VIEW_SELF_EXPENSE);
|
|
||||||
|
|
||||||
const { setOffcanvasContent, setShowTrigger } = useFab();
|
|
||||||
|
|
||||||
const methods = useForm({
|
|
||||||
resolver: zodResolver(SearchSchema),
|
|
||||||
defaultValues: defaultFilter,
|
|
||||||
});
|
|
||||||
|
|
||||||
const { reset } = methods;
|
|
||||||
|
|
||||||
const clearFilter = () => {
|
|
||||||
setFilter(defaultFilter);
|
|
||||||
reset();
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setShowTrigger(true);
|
|
||||||
setOffcanvasContent(
|
|
||||||
"Expense Filters",
|
|
||||||
<ExpenseFilterPanel
|
|
||||||
onApply={setFilter}
|
|
||||||
handleGroupBy={setGroupBy}
|
|
||||||
clearFilter={clearFilter}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
setShowTrigger(false);
|
|
||||||
setOffcanvasContent("", null);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const contextValue = {
|
|
||||||
setViewExpense,
|
|
||||||
setManageExpenseModal,
|
|
||||||
setDocumentView,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ExpenseContext.Provider value={contextValue}>
|
|
||||||
<div className="container-fluid">
|
|
||||||
<Breadcrumb data={[{ label: "Home", link: "/" }, { label: "Expense" }]} />
|
|
||||||
|
|
||||||
{(IsViewAll || IsViewSelf || IsCreatedAble) ? (
|
|
||||||
<>
|
|
||||||
<div className="card my-3 px-sm-4 px-0">
|
|
||||||
<div className="card-body py-2 px-3">
|
|
||||||
<div className="row align-items-center">
|
|
||||||
<div className="col-6 ">
|
|
||||||
<div className="d-flex align-items-center">
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="search"
|
|
||||||
className="form-control form-control-sm w-auto"
|
|
||||||
placeholder="Search Expense"
|
|
||||||
aria-describedby="search-label"
|
|
||||||
value={searchText}
|
|
||||||
onChange={(e) => setSearchText(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-6 text-end mt-2 mt-sm-0">
|
|
||||||
{IsCreatedAble && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="p-1 me-1 m-sm-0 bg-primary rounded-circle"
|
|
||||||
title="Add New Expense"
|
|
||||||
onClick={() => setManageExpenseModal({ IsOpen: true, expenseId: null })}
|
|
||||||
>
|
|
||||||
<i className="bx bx-plus fs-4 text-white"></i>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ExpenseList filters={filters} groupBy={groupBy} searchText={searchText} />
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className="card text-center py-1">
|
|
||||||
<i className="fa-solid fa-triangle-exclamation fs-5" />
|
|
||||||
<p>Access Denied: You don't have permission to perform this action!</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Modals */}
|
|
||||||
{ManageExpenseModal.IsOpen && (
|
|
||||||
<GlobalModel
|
|
||||||
isOpen
|
|
||||||
size="lg"
|
|
||||||
closeModal={() => setManageExpenseModal({ IsOpen: null, expenseId: null })}
|
|
||||||
>
|
|
||||||
<ManageExpense
|
|
||||||
key={ManageExpenseModal.expenseId ?? "new"}
|
|
||||||
expenseToEdit={ManageExpenseModal.expenseId}
|
|
||||||
closeModal={() => setManageExpenseModal({ IsOpen: null, expenseId: null })}
|
|
||||||
/>
|
|
||||||
</GlobalModel>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{viewExpense.view && (
|
|
||||||
<GlobalModel
|
|
||||||
isOpen
|
|
||||||
size="lg"
|
|
||||||
modalType="top"
|
|
||||||
closeModal={() => setViewExpense({ expenseId: null, view: false })}
|
|
||||||
>
|
|
||||||
<ViewExpense ExpenseId={viewExpense.expenseId} />
|
|
||||||
</GlobalModel>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{ViewDocument.IsOpen && (
|
|
||||||
<GlobalModel
|
|
||||||
isOpen
|
|
||||||
size="md"
|
|
||||||
key={ViewDocument.Image ?? "doc"}
|
|
||||||
closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
|
|
||||||
>
|
|
||||||
<PreviewDocument imageUrl={ViewDocument.Image} />
|
|
||||||
</GlobalModel>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</ExpenseContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ExpensePage;
|
|
||||||
@ -1,19 +1,9 @@
|
|||||||
import React, { useState, createContext, useEffect } from "react";
|
import React, { useState,createContext } from "react";
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
// ------Components-------
|
|
||||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||||
import TenantsList from "../../components/Tenanat/TenantsList";
|
import TenantsList from "../../components/Tenanat/TenantsList";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { useDebounce } from "../../utils/appUtils";
|
|
||||||
import { useFab } from "../../Context/FabContext";
|
|
||||||
|
|
||||||
//---------- Schema and defaultValues----
|
|
||||||
import { defaultFilterValues, filterSchema } from "../../components/Tenanat/TenantSchema";
|
|
||||||
import TenantFilterPanel from "../../components/Tenanat/TenantFilterPanel";
|
|
||||||
|
|
||||||
|
|
||||||
// This is context that wrapping all components tenant releated , but must pass inside 'TenantContext.Provider'
|
|
||||||
export const TenantContext = createContext();
|
export const TenantContext = createContext();
|
||||||
export const useTenantContext = () => {
|
export const useTenantContext = () => {
|
||||||
const context = useContext(TenantContext);
|
const context = useContext(TenantContext);
|
||||||
@ -22,31 +12,14 @@ export const useTenantContext = () => {
|
|||||||
}
|
}
|
||||||
return context;
|
return context;
|
||||||
};
|
};
|
||||||
|
|
||||||
const TenantPage = () => {
|
const TenantPage = () => {
|
||||||
const [searchText, setSearchText] = useState("");
|
const [searchText, setSearchText] = useState("");
|
||||||
const debouncedSearch = useDebounce(searchText, 500);
|
|
||||||
const contextValue = {};
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
|
||||||
const { setOffcanvasContent, setShowTrigger } = useFab();
|
const contextValue = {
|
||||||
|
|
||||||
|
|
||||||
// This Hook allow us to right-side bar for filter Tenants
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setShowTrigger(true);
|
|
||||||
setOffcanvasContent(
|
|
||||||
"Expense Filters",
|
|
||||||
<TenantFilterPanel/>
|
|
||||||
);
|
|
||||||
return () => {
|
|
||||||
setShowTrigger(false);
|
|
||||||
setOffcanvasContent("", null);
|
|
||||||
};
|
};
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TenantContext.Provider value={contextValue}>
|
<TenantContext.Provider value={contextValue}>
|
||||||
<div className="container-fluid">
|
<div className="container-fluid">
|
||||||
@ -56,14 +29,11 @@ const TenantPage = () => {
|
|||||||
{ label: "Tenant", link: null },
|
{ label: "Tenant", link: null },
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
<div className="card d-flex p-3">
|
||||||
<div className="card d-flex p-2">
|
|
||||||
<div className="row align-items-center">
|
<div className="row align-items-center">
|
||||||
<div className="col-6 col-md-6 col-lg-3 mb-md-0">
|
<div className="col-6 col-md-6 col-lg-3 mb-md-0">
|
||||||
<input
|
<input
|
||||||
type="search"
|
type="search"
|
||||||
value={searchText}
|
|
||||||
onChange={(e) => setSearchText(e.target.value)}
|
|
||||||
className="form-control form-control-sm"
|
className="form-control form-control-sm"
|
||||||
placeholder="Search..."
|
placeholder="Search..."
|
||||||
/>
|
/>
|
||||||
@ -86,7 +56,7 @@ const TenantPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<TenantsList searchText={debouncedSearch} />
|
<TenantsList searchText ={searchText} />
|
||||||
</div>
|
</div>
|
||||||
</TenantContext.Provider>
|
</TenantContext.Provider>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -295,12 +295,12 @@ const EmployeeList = () => {
|
|||||||
|
|
||||||
{ViewTeamMember ? (
|
{ViewTeamMember ? (
|
||||||
// <div className="row">
|
// <div className="row">
|
||||||
<div className="card px-0 px-sm-4">
|
<div className="card p-1">
|
||||||
<div className="card-datatable table-responsive pt-2">
|
<div className="card-datatable table-responsive pt-2">
|
||||||
<div
|
<div
|
||||||
id="DataTables_Table_0_wrapper"
|
id="DataTables_Table_0_wrapper"
|
||||||
className="dataTables_wrapper no-footer px-2 "
|
className="dataTables_wrapper dt-bootstrap5 no-footer"
|
||||||
|
style={{ width: "98%" }}
|
||||||
>
|
>
|
||||||
<div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
|
<div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
|
||||||
{/* Switches: All Employees + Inactive */}
|
{/* Switches: All Employees + Inactive */}
|
||||||
@ -581,7 +581,7 @@ const EmployeeList = () => {
|
|||||||
<td className="text-start d-none d-sm-table-cell">
|
<td className="text-start d-none d-sm-table-cell">
|
||||||
{item.email ? (
|
{item.email ? (
|
||||||
<span className="text-truncate">
|
<span className="text-truncate">
|
||||||
<i className="bx bxs-envelope text-primary text-truncate me-2"></i>
|
<i className="bx bxs-envelope text-primary me-2"></i>
|
||||||
{item.email}
|
{item.email}
|
||||||
</span>
|
</span>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@ -100,7 +100,7 @@ const MasterPage = () => {
|
|||||||
></Breadcrumb>
|
></Breadcrumb>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<div className="card-datatable table-responsive py-4">
|
<div className="card-datatable table-responsive pt-2">
|
||||||
<div
|
<div
|
||||||
id="DataTables_Table_0_wrapper"
|
id="DataTables_Table_0_wrapper"
|
||||||
className="dataTables_wrapper dt-bootstrap5 no-footer"
|
className="dataTables_wrapper dt-bootstrap5 no-footer"
|
||||||
|
|||||||
@ -16,11 +16,6 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
|
|||||||
"tenantId",
|
"tenantId",
|
||||||
"checkLists",
|
"checkLists",
|
||||||
"isSystem",
|
"isSystem",
|
||||||
"isActive",
|
|
||||||
"noOfPersonsRequired",
|
|
||||||
"color",
|
|
||||||
"displayName",
|
|
||||||
"permissionIds"
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const safeData = Array.isArray(data) ? data : [];
|
const safeData = Array.isArray(data) ? data : [];
|
||||||
@ -184,7 +179,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
|
|||||||
{/* Pagination */}
|
{/* Pagination */}
|
||||||
{!loading && safeData.length > 20 && (
|
{!loading && safeData.length > 20 && (
|
||||||
<nav aria-label="Page ">
|
<nav aria-label="Page ">
|
||||||
<ul className="pagination pagination-sm justify-content-end mt-3">
|
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
||||||
<button
|
<button
|
||||||
className="page-link btn-xs"
|
className="page-link btn-xs"
|
||||||
|
|||||||
@ -137,6 +137,7 @@ const ProjectDetails = () => {
|
|||||||
<div className="row">
|
<div className="row">
|
||||||
<ProjectNav onPillClick={handlePillClick} activePill={activePill} />
|
<ProjectNav onPillClick={handlePillClick} activePill={activePill} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{renderContent()}
|
{renderContent()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,26 +1,17 @@
|
|||||||
import { api } from "../utils/axiosClient";
|
import { api } from "../utils/axiosClient";
|
||||||
|
|
||||||
const EmployeeRepository = {
|
const EmployeeRepository = {
|
||||||
getAllEmployeeList: (showInactive) =>
|
getAllEmployeeList:(showInactive)=>api.get(`api/employee/list?showInactive=${showInactive}`),
|
||||||
api.get(`api/employee/list?showInactive=${showInactive}`),
|
|
||||||
getEmployeeListByproject: (projectid) =>
|
getEmployeeListByproject: (projectid) =>
|
||||||
api.get(`/api/employee/list/${projectid}`),
|
api.get(`/api/employee/list/${projectid}`),
|
||||||
searchEmployees: (query) => api.get(`/api/employee/search/${query}`),
|
searchEmployees: (query) =>
|
||||||
manageEmployee: (data) => api.post("/api/employee/manage", data),
|
api.get(`/api/employee/search/${query}`),
|
||||||
|
manageEmployee: (data) =>
|
||||||
|
api.post("/api/employee/manage", data),
|
||||||
updateEmployee: (id, data) => api.put(`/users/${id}`, data),
|
updateEmployee: (id, data) => api.put(`/users/${id}`, data),
|
||||||
// deleteEmployee: ( id ) => api.delete( `/users/${ id }` ),
|
// deleteEmployee: ( id ) => api.delete( `/users/${ id }` ),
|
||||||
getEmployeeProfile:(id)=>api.get(`/api/employee/profile/get/${id}`),
|
getEmployeeProfile:(id)=>api.get(`/api/employee/profile/get/${id}`),
|
||||||
deleteEmployee: (id) => api.delete(`/api/employee/${id}`),
|
deleteEmployee:(id)=>api.delete(`/api/employee/${id}`)
|
||||||
getEmployeeName: (projectId, search) => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
|
|
||||||
if (projectId) params.append("projectId", projectId);
|
|
||||||
if (search) params.append("searchString", search);
|
|
||||||
|
|
||||||
const query = params.toString();
|
|
||||||
return api.get(`/api/Employee/basic${query ? `?${query}` : ""}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default EmployeeRepository;
|
export default EmployeeRepository;
|
||||||
|
|||||||
@ -1,24 +0,0 @@
|
|||||||
import { api } from "../utils/axiosClient";
|
|
||||||
|
|
||||||
|
|
||||||
const ExpenseRepository = {
|
|
||||||
GetExpenseList: ( pageSize, pageNumber, filter,searchString ) => {
|
|
||||||
const payloadJsonString = JSON.stringify(filter);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return api.get(`/api/expense/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`);
|
|
||||||
},
|
|
||||||
|
|
||||||
GetExpenseDetails:(id)=>api.get(`/api/Expense/details/${id}`),
|
|
||||||
CreateExpense:(data)=>api.post("/api/Expense/create",data),
|
|
||||||
UpdateExpense:(id,data)=>api.put(`/api/Expense/edit/${id}`,data),
|
|
||||||
DeleteExpense:(id)=>api.delete(`/api/Expense/delete/${id}`),
|
|
||||||
|
|
||||||
ActionOnExpense:(data)=>api.post('/api/expense/action',data),
|
|
||||||
|
|
||||||
GetExpenseFilter:()=>api.get('/api/Expense/filter')
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ExpenseRepository;
|
|
||||||
@ -13,70 +13,49 @@ export const RolesRepository = {
|
|||||||
updateRoles: (id, data) => api.put(`/users/${id}`, data),
|
updateRoles: (id, data) => api.put(`/users/${id}`, data),
|
||||||
deleteRoles: (id) => api.delete(`/users/${id}`),
|
deleteRoles: (id) => api.delete(`/users/${id}`),
|
||||||
|
|
||||||
|
|
||||||
getEmployeeRoles:(id)=>api.get(`/api/employee/roles/${id}`),
|
getEmployeeRoles:(id)=>api.get(`/api/employee/roles/${id}`),
|
||||||
createEmployeeRoles: (data) => api.post("/api/roles/assign-roles", data),
|
createEmployeeRoles:(data)=>api.post("/api/roles/assign-roles",data)
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export const MasterRespository = {
|
export const MasterRespository = {
|
||||||
getRoles: () => api.get("/api/roles"),
|
getRoles: () => api.get("/api/roles"),
|
||||||
createRole: (data) => api.post("/api/roles", data),
|
createRole: (data) => api.post("/api/roles", data),
|
||||||
updateRoles:(id,data) => api.put(`/api/roles/${id}`,data),
|
updateRoles:(id,data) => api.put(`/api/roles/${id}`,data),
|
||||||
getFeatures: () => api.get( `/api/feature` ),
|
getFeatures: () => api.get( `/api/feature` ),
|
||||||
|
|
||||||
createJobRole: (data) => api.post("api/roles/jobrole", data),
|
|
||||||
|
createJobRole:(data)=>api.post('api/roles/jobrole',data),
|
||||||
getJobRole :()=>api.get("/api/roles/jobrole"),
|
getJobRole :()=>api.get("/api/roles/jobrole"),
|
||||||
updateJobRole: ( id, data ) => api.put( `/api/roles/jobrole/${ id }`, data ),
|
updateJobRole: ( id, data ) => api.put( `/api/roles/jobrole/${ id }`, data ),
|
||||||
|
|
||||||
getActivites: () => api.get("api/master/activities"),
|
|
||||||
createActivity: (data) => api.post("api/master/activity", data),
|
getActivites: () => api.get( 'api/master/activities' ),
|
||||||
updateActivity: (id, data) =>
|
createActivity: (data) => api.post( 'api/master/activity',data ),
|
||||||
api.post(`api/master/activity/edit/${id}`, data),
|
updateActivity:(id,data) =>api.post(`api/master/activity/edit/${id}`,data),
|
||||||
getIndustries: () => api.get("api/master/industries"),
|
getIndustries: () => api.get( 'api/master/industries' ),
|
||||||
|
|
||||||
// delete
|
// delete
|
||||||
"Job Role": ( id ) => api.delete( `/api/roles/jobrole/${ id }` ),
|
"Job Role": ( id ) => api.delete( `/api/roles/jobrole/${ id }` ),
|
||||||
Activity: (id) => api.delete(`/api/master/activity/delete/${id}`),
|
"Activity": ( id ) => api.delete( `/api/master/activity/delete/${ id }` ),
|
||||||
"Application Role":(id)=>api.delete(`/api/roles/${id}`),
|
"Application Role":(id)=>api.delete(`/api/roles/${id}`),
|
||||||
"Work Category": ( id ) => api.delete( `api/master/work-category/${ id }` ),
|
"Work Category": ( id ) => api.delete( `api/master/work-category/${ id }` ),
|
||||||
"Contact Category": ( id ) => api.delete( `/api/master/contact-category/${id}` ),
|
"Contact Category": ( id ) => api.delete( `/api/master/contact-category/${id}` ),
|
||||||
"Contact Tag" :(id)=>api.delete(`/api/master/contact-tag/${id}`),
|
"Contact Tag" :(id)=>api.delete(`/api/master/contact-tag/${id}`),
|
||||||
"Expense Type": (id, isActive) =>
|
|
||||||
api.delete(`/api/Master/expenses-type/delete/${id}`, (isActive = false)),
|
|
||||||
"Payment Mode": (id, isActive) =>
|
|
||||||
api.delete(`/api/Master/payment-mode/delete/${id}`, (isActive = false)),
|
|
||||||
"Expense Status": (id, isActive) =>
|
|
||||||
api.delete(`/api/Master/expenses-status/delete/${id}`, (isActive = false)),
|
|
||||||
|
|
||||||
getWorkCategory:() => api.get(`/api/master/work-categories`),
|
getWorkCategory:() => api.get(`/api/master/work-categories`),
|
||||||
createWorkCategory: (data) => api.post(`/api/master/work-category`,data),
|
createWorkCategory: (data) => api.post(`/api/master/work-category`,data),
|
||||||
updateWorkCategory: (id, data) =>
|
updateWorkCategory: ( id, data ) => api.post( `/api/master/work-category/edit/${ id }`, data ),
|
||||||
api.post(`/api/master/work-category/edit/${id}`, data),
|
|
||||||
|
|
||||||
getContactCategory: () => api.get( `/api/master/contact-categories` ),
|
getContactCategory: () => api.get( `/api/master/contact-categories` ),
|
||||||
createContactCategory: (data) =>
|
createContactCategory: (data ) => api.post( `/api/master/contact-category`, data ),
|
||||||
api.post(`/api/master/contact-category`, data),
|
updateContactCategory: ( id, data ) => api.post( `/api/master/contact-category/edit/${ id }`, data ),
|
||||||
updateContactCategory: (id, data) =>
|
|
||||||
api.post(`/api/master/contact-category/edit/${id}`, data),
|
|
||||||
|
|
||||||
getContactTag: () => api.get( `/api/master/contact-tags` ),
|
getContactTag: () => api.get( `/api/master/contact-tags` ),
|
||||||
createContactTag: (data ) => api.post( `/api/master/contact-tag`, data ),
|
createContactTag: (data ) => api.post( `/api/master/contact-tag`, data ),
|
||||||
updateContactTag: (id, data) =>
|
updateContactTag: ( id, data ) => api.post( `/api/master/contact-tag/edit/${ id }`, data ),
|
||||||
api.post(`/api/master/contact-tag/edit/${id}`, data),
|
|
||||||
|
|
||||||
getAuditStatus: () => api.get("/api/Master/work-status"),
|
getAuditStatus:()=>api.get('/api/Master/work-status')
|
||||||
|
|
||||||
getExpenseType: () => api.get("/api/Master/expenses-types"),
|
}
|
||||||
createExpenseType: (data) => api.post("/api/Master/expenses-type", data),
|
|
||||||
updateExpenseType: (id, data) =>
|
|
||||||
api.put(`/api/Master/expenses-type/edit/${id}`, data),
|
|
||||||
|
|
||||||
getPaymentMode: () => api.get("/api/Master/payment-modes"),
|
|
||||||
createPaymentMode: (data) => api.post(`/api/Master/payment-mode`, data),
|
|
||||||
updatePaymentMode: (id, data) =>
|
|
||||||
api.put(`/api/Master/payment-mode/edit/${id}`, data),
|
|
||||||
|
|
||||||
getExpenseStatus: () => api.get("/api/Master/expenses-status"),
|
|
||||||
createExpenseStatus: (data) => api.post("/api/Master/expenses-status", data),
|
|
||||||
updateExepnseStatus: (id, data) =>
|
|
||||||
api.put(`/api/Master/expenses-status/edit/${id}`, data),
|
|
||||||
};
|
|
||||||
@ -40,7 +40,6 @@ import Directory from "../pages/Directory/Directory";
|
|||||||
import LoginWithOtp from "../pages/authentication/LoginWithOtp";
|
import LoginWithOtp from "../pages/authentication/LoginWithOtp";
|
||||||
import TenantPage from "../pages/Tenant/TenantPage";
|
import TenantPage from "../pages/Tenant/TenantPage";
|
||||||
import CreateTenant from "../pages/Tenant/CreateTenant";
|
import CreateTenant from "../pages/Tenant/CreateTenant";
|
||||||
import ExpensePage from "../pages/Expense/ExpensePage";
|
|
||||||
|
|
||||||
const router = createBrowserRouter(
|
const router = createBrowserRouter(
|
||||||
[
|
[
|
||||||
@ -79,7 +78,6 @@ const router = createBrowserRouter(
|
|||||||
{ path: "/activities/task", element: <TaskPlannng /> },
|
{ path: "/activities/task", element: <TaskPlannng /> },
|
||||||
{ path: "/activities/reports", element: <Reports /> },
|
{ path: "/activities/reports", element: <Reports /> },
|
||||||
{ path: "/gallary", element: <ImageGallary /> },
|
{ path: "/gallary", element: <ImageGallary /> },
|
||||||
{ path: "/expenses", element: <ExpensePage /> },
|
|
||||||
{ path: "/masters", element: <MasterPage /> },
|
{ path: "/masters", element: <MasterPage /> },
|
||||||
{ path: "/tenants", element: <TenantPage /> },
|
{ path: "/tenants", element: <TenantPage /> },
|
||||||
{ path: "/tenants/new-tenant", element: <CreateTenant /> },
|
{ path: "/tenants/new-tenant", element: <CreateTenant /> },
|
||||||
|
|||||||
@ -52,9 +52,7 @@ export function startSignalR(loggedUser) {
|
|||||||
}
|
}
|
||||||
eventBus.emit("attendance_log", data);
|
eventBus.emit("attendance_log", data);
|
||||||
}
|
}
|
||||||
if(data.keyword == "Expanse"){
|
|
||||||
queryClient.invalidateQueries({queryKey:["Expenses"]})
|
|
||||||
}
|
|
||||||
// if create or update project
|
// if create or update project
|
||||||
if (
|
if (
|
||||||
data.keyword == "Create_Project" ||
|
data.keyword == "Create_Project" ||
|
||||||
|
|||||||
@ -1,63 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
|
|
||||||
export const formatFileSize=(bytes)=> {
|
|
||||||
if (bytes < 1024) return bytes + " B";
|
|
||||||
else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + " KB";
|
|
||||||
else return (bytes / (1024 * 1024)).toFixed(2) + " MB";
|
|
||||||
}
|
|
||||||
export const AppColorconfig = {
|
|
||||||
colors: {
|
|
||||||
primary: '#696cff',
|
|
||||||
secondary: '#8592a3',
|
|
||||||
success: '#71dd37',
|
|
||||||
info: '#03c3ec',
|
|
||||||
warning: '#ffab00',
|
|
||||||
danger: '#ff3e1d',
|
|
||||||
dark: '#233446',
|
|
||||||
black: '#000',
|
|
||||||
white: '#fff',
|
|
||||||
cardColor: '#fff',
|
|
||||||
bodyBg: '#f5f5f9',
|
|
||||||
bodyColor: '#697a8d',
|
|
||||||
headingColor: '#566a7f',
|
|
||||||
textMuted: '#a1acb8',
|
|
||||||
borderColor: '#eceef1'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
export const getColorNameFromHex = (hex) => {
|
|
||||||
const normalizedHex = hex?.replace(/'/g, '').toLowerCase();
|
|
||||||
const colors = AppColorconfig.colors;
|
|
||||||
|
|
||||||
for (const [name, value] of Object.entries(colors)) {
|
|
||||||
if (value.toLowerCase() === normalizedHex) {
|
|
||||||
return name;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return null; //
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useDebounce = (value, delay = 500) => {
|
|
||||||
const [debouncedValue, setDebouncedValue] = useState(value);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const timer = setTimeout(() => setDebouncedValue(value), delay);
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}, [value, delay]);
|
|
||||||
|
|
||||||
return debouncedValue;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getIconByFileType = (type = "") => {
|
|
||||||
const lower = type.toLowerCase();
|
|
||||||
|
|
||||||
if (lower === "application/pdf") return "bxs-file-pdf";
|
|
||||||
if (lower.includes("word")) return "bxs-file-doc";
|
|
||||||
if (lower.includes("excel") || lower.includes("spreadsheet"))
|
|
||||||
return "bxs-file-xls";
|
|
||||||
if (lower === "image/png") return "bxs-file-png";
|
|
||||||
if (lower === "image/jpeg" || lower === "image/jpg") return "bxs-file-jpg";
|
|
||||||
if (lower.includes("zip") || lower.includes("rar")) return "bxs-file-archive";
|
|
||||||
|
|
||||||
return "bx bx-file";
|
|
||||||
};
|
|
||||||
@ -44,7 +44,7 @@ axiosClient.interceptors.response.use(
|
|||||||
const originalRequest = error.config;
|
const originalRequest = error.config;
|
||||||
|
|
||||||
// Skip retry for public requests or already retried ones
|
// Skip retry for public requests or already retried ones
|
||||||
if (!originalRequest && originalRequest._retry || originalRequest.authRequired === false) {
|
if (!originalRequest || originalRequest._retry || originalRequest.authRequired === false) {
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
export const THRESH_HOLD = 48; // hours
|
export const THRESH_HOLD = 48; // hours
|
||||||
export const DURATION_TIME = 20; // minutes
|
export const DURATION_TIME = 10; // minutes
|
||||||
export const ITEMS_PER_PAGE = 10;
|
export const ITEMS_PER_PAGE = 20;
|
||||||
export const OTP_EXPIRY_SECONDS = 600 // OTP time
|
export const OTP_EXPIRY_SECONDS = 600 // OTP time
|
||||||
|
|
||||||
export const MANAGE_MASTER = "588a8824-f924-4955-82d8-fc51956cf323";
|
export const MANAGE_MASTER = "588a8824-f924-4955-82d8-fc51956cf323";
|
||||||
@ -41,36 +41,14 @@ export const DIRECTORY_MANAGER = "62668630-13ce-4f52-a0f0-db38af2230c5"
|
|||||||
|
|
||||||
export const DIRECTORY_USER = "0f919170-92d4-4337-abd3-49b66fc871bb"
|
export const DIRECTORY_USER = "0f919170-92d4-4337-abd3-49b66fc871bb"
|
||||||
|
|
||||||
export const VIEW_SELF_EXPENSE = "385be49f-8fde-440e-bdbc-3dffeb8dd116"
|
export const BASIC_PLAN = "08ddd43e-ca62-4cf4-8d7b-569a364307f4"
|
||||||
|
|
||||||
export const VIEW_ALL_EXPNESE = "01e06444-9ca7-4df4-b900-8c3fa051b92f";
|
export const BASE_URL = process.env.VITE_BASE_URL;
|
||||||
|
|
||||||
export const CREATE_EXEPENSE = "0f57885d-bcb2-4711-ac95-d841ace6d5a7";
|
export const ActiveTenant = "62b05792-5115-4f99-8ff5-e8374859b191"
|
||||||
|
// export const BASE_URL = "https://api.marcoaiot.com";
|
||||||
export const REVIEW_EXPENSE = "1f4bda08-1873-449a-bb66-3e8222bd871b";
|
|
||||||
|
|
||||||
export const APPROVE_EXPENSE = "eaafdd76-8aac-45f9-a530-315589c6deca";
|
|
||||||
|
|
||||||
|
|
||||||
export const PROCESS_EXPENSE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11"
|
|
||||||
|
|
||||||
export const EXPENSE_MANAGE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11"
|
|
||||||
|
|
||||||
export const EXPENSE_REJECTEDBY = ["d1ee5eec-24b6-4364-8673-a8f859c60729","965eda62-7907-4963-b4a1-657fb0b2724b"]
|
|
||||||
|
|
||||||
export const EXPENSE_DRAFT = "297e0d8f-f668-41b5-bfea-e03b354251c8"
|
|
||||||
|
|
||||||
|
|
||||||
export const ActiveTenant = "297e0d8f-f668-41b5-bfea-e03b354251c8"
|
|
||||||
// -------------------Application Role------------------------------
|
|
||||||
|
|
||||||
// 1 - Expense Manage
|
|
||||||
export const EXPENSE_MANAGEMENT = "a4e25142-449b-4334-a6e5-22f70e4732d7"
|
|
||||||
|
|
||||||
|
|
||||||
export const CONSTANT_TEXT = {
|
export const CONSTANT_TEXT = {
|
||||||
|
RenewsubscriptionLabel : " This option; if checked, will renew your productive subscription, if the current plan expires."
|
||||||
}
|
}
|
||||||
|
|
||||||
export const BASE_URL = process.env.VITE_BASE_URL;
|
|
||||||
// export const BASE_URL = "https://api.marcoaiot.com";
|
|
||||||
|
|||||||
@ -68,13 +68,9 @@ export const formatNumber = (num) => {
|
|||||||
if (num == null || isNaN(num)) return "NA";
|
if (num == null || isNaN(num)) return "NA";
|
||||||
return Number.isInteger(num) ? num : num.toFixed(2);
|
return Number.isInteger(num) ? num : num.toFixed(2);
|
||||||
};
|
};
|
||||||
|
export const formatUTCToLocalTime = (datetime) =>{
|
||||||
|
return moment.utc(datetime).local().format("DD MMMM, YYYY [at] hh:mm A");
|
||||||
export const formatUTCToLocalTime = (datetime, timeRequired = false) => {
|
}
|
||||||
return timeRequired
|
|
||||||
? moment.utc(datetime).local().format("DD MMM YYYY hh:mm A")
|
|
||||||
: moment.utc(datetime).local().format("DD MMM YYYY");
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getCompletionPercentage = (completedWork, plannedWork)=> {
|
export const getCompletionPercentage = (completedWork, plannedWork)=> {
|
||||||
if (!plannedWork || plannedWork === 0) return 0;
|
if (!plannedWork || plannedWork === 0) return 0;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user