Merge branch 'OnFieldWork_V1' of https://git.marcoaiot.com/admin/marco.pms.web into Kartik_Task#1402
This commit is contained in:
commit
3559b0a01c
@ -11,6 +11,7 @@ import { useSelector } from "react-redux";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
import Pagination from "../common/Pagination";
|
||||
|
||||
const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizationId, includeInactive, date }) => {
|
||||
const queryClient = useQueryClient();
|
||||
@ -108,6 +109,8 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
|
||||
return () => eventBus.off("employee", employeeHandler);
|
||||
}, [employeeHandler]);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
@ -138,7 +141,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
|
||||
<tr className="border-top-1">
|
||||
<th colSpan={2}>Name</th>
|
||||
<th>Role</th>
|
||||
<th>Organization</th>
|
||||
{/* <th>Organization</th> */}
|
||||
<th>
|
||||
<i className="bx bxs-down-arrow-alt text-success"></i>
|
||||
Check-In
|
||||
@ -187,7 +190,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
|
||||
</td>
|
||||
|
||||
<td>{item.jobRoleName}</td>
|
||||
<td>{item.organizationName || "--"}</td>
|
||||
{/* <td>{item.organizationName || "--"}</td> */}
|
||||
|
||||
<td>
|
||||
{item.checkInTime
|
||||
@ -226,46 +229,12 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
|
||||
|
||||
|
||||
{!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li
|
||||
className={`page-item ${currentPage === 1 ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
onClick={() => paginate(currentPage - 1)}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(index + 1)}
|
||||
>
|
||||
{index + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
|
||||
@ -11,6 +11,7 @@ import AttendanceRepository from "../../repositories/AttendanceRepository";
|
||||
import { useAttendancesLogs } from "../../hooks/useAttendance";
|
||||
import { queryClient } from "../../layouts/AuthLayout";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import Pagination from "../common/Pagination";
|
||||
|
||||
const usePagination = (data, itemsPerPage) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
@ -84,56 +85,50 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
|
||||
dateRange.endDate,
|
||||
organizationId
|
||||
);
|
||||
const filtering = (data) => {
|
||||
const filteredData = showPending
|
||||
? data.filter((item) => item.checkOutTime === null)
|
||||
: data;
|
||||
const filtering = useCallback((dataToFilter) => {
|
||||
const filteredData = showPending
|
||||
? dataToFilter.filter((item) => item.checkOutTime === null)
|
||||
: dataToFilter;
|
||||
|
||||
const group1 = filteredData
|
||||
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group2 = filteredData
|
||||
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group3 = filteredData
|
||||
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group4 = filteredData.filter(
|
||||
(d) => d.activity === 4 && isBeforeToday(d.checkOutTime)
|
||||
);
|
||||
const group5 = filteredData
|
||||
.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group6 = filteredData
|
||||
.filter((d) => d.activity === 5)
|
||||
.sort(sortByName);
|
||||
const group1 = filteredData
|
||||
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group2 = filteredData
|
||||
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group3 = filteredData
|
||||
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group4 = filteredData.filter(
|
||||
(d) => d.activity === 4 && isBeforeToday(d.checkOutTime)
|
||||
);
|
||||
const group5 = filteredData
|
||||
.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group6 = filteredData
|
||||
.filter((d) => d.activity === 5)
|
||||
.sort(sortByName);
|
||||
|
||||
const sortedList = [
|
||||
...group1,
|
||||
...group2,
|
||||
...group3,
|
||||
...group4,
|
||||
...group5,
|
||||
...group6,
|
||||
];
|
||||
const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
|
||||
|
||||
// Group by date
|
||||
const groupedByDate = sortedList.reduce((acc, item) => {
|
||||
const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
|
||||
if (date) {
|
||||
acc[date] = acc[date] || [];
|
||||
acc[date].push(item);
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
// Group by date
|
||||
const groupedByDate = sortedList.reduce((acc, item) => {
|
||||
const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
|
||||
if (date) {
|
||||
acc[date] = acc[date] || [];
|
||||
acc[date].push(item);
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const sortedDates = Object.keys(groupedByDate).sort(
|
||||
(a, b) => new Date(b) - new Date(a)
|
||||
);
|
||||
const sortedDates = Object.keys(groupedByDate).sort(
|
||||
(a, b) => new Date(b) - new Date(a)
|
||||
);
|
||||
|
||||
const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
|
||||
setProcessedData(finalData);
|
||||
}, [showPending]);
|
||||
|
||||
const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
|
||||
setProcessedData(finalData);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
filtering(data);
|
||||
@ -285,7 +280,7 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
|
||||
Name
|
||||
</th>
|
||||
<th className="border-top-1">Date</th>
|
||||
<th>Organization</th>
|
||||
{/* <th>Organization</th> */}
|
||||
<th>
|
||||
<i className="bx bxs-down-arrow-alt text-success"></i> Check-In
|
||||
</th>
|
||||
@ -344,7 +339,7 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
|
||||
attendance.checkInTime || attendance.checkOutTime
|
||||
).format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
<td>{attendance.organizationName || "--"}</td>
|
||||
{/* <td>{attendance.organizationName || "--"}</td> */}
|
||||
<td>{convertShortTime(attendance.checkInTime)}</td>
|
||||
<td>
|
||||
{attendance.checkOutTime
|
||||
@ -378,45 +373,11 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
|
||||
</div>
|
||||
)}
|
||||
{filteredSearchData.length > ITEMS_PER_PAGE && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
onClick={() => paginate(currentPage - 1)}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map(
|
||||
(pageNumber) => (
|
||||
<li
|
||||
key={pageNumber}
|
||||
className={`page-item ${currentPage === pageNumber ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => paginate(pageNumber)}
|
||||
>
|
||||
{pageNumber}
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
<li
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
@ -9,6 +9,7 @@ import showToast from "../../services/toastService";
|
||||
import { checkIfCurrentDate } from "../../utils/dateUtils";
|
||||
import { useMarkAttendance } from "../../hooks/useAttendance";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
import { useProjectName } from "../../hooks/useProjects";
|
||||
|
||||
const createSchema = (modeldata) => {
|
||||
return z
|
||||
@ -19,31 +20,36 @@ const createSchema = (modeldata) => {
|
||||
.max(200, "Description should be less than 200 characters")
|
||||
.optional(),
|
||||
})
|
||||
.refine((data) => {
|
||||
if (modeldata?.checkInTime && !modeldata?.checkOutTime) {
|
||||
const checkIn = new Date(modeldata.checkInTime);
|
||||
const [time, modifier] = data.markTime.split(" ");
|
||||
const [hourStr, minuteStr] = time.split(":");
|
||||
let hour = parseInt(hourStr, 10);
|
||||
const minute = parseInt(minuteStr, 10);
|
||||
.refine(
|
||||
(data) => {
|
||||
if (modeldata?.checkInTime && !modeldata?.checkOutTime) {
|
||||
const checkIn = new Date(modeldata.checkInTime);
|
||||
const [time, modifier] = data.markTime.split(" ");
|
||||
const [hourStr, minuteStr] = time.split(":");
|
||||
let hour = parseInt(hourStr, 10);
|
||||
const minute = parseInt(minuteStr, 10);
|
||||
|
||||
if (modifier === "PM" && hour !== 12) hour += 12;
|
||||
if (modifier === "AM" && hour === 12) hour = 0;
|
||||
if (modifier === "PM" && hour !== 12) hour += 12;
|
||||
if (modifier === "AM" && hour === 12) hour = 0;
|
||||
|
||||
const checkOut = new Date(checkIn);
|
||||
checkOut.setHours(hour, minute, 0, 0);
|
||||
const checkOut = new Date(checkIn);
|
||||
checkOut.setHours(hour, minute, 0, 0);
|
||||
|
||||
return checkOut >= checkIn;
|
||||
return checkOut >= checkIn;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
{
|
||||
message: "Checkout time must be later than check-in time",
|
||||
path: ["markTime"],
|
||||
}
|
||||
return true;
|
||||
}, {
|
||||
message: "Checkout time must be later than check-in time",
|
||||
path: ["markTime"],
|
||||
});
|
||||
);
|
||||
};
|
||||
|
||||
const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
|
||||
const [currentProject, setCurrentProject] = useState(null);
|
||||
const projectId = useSelectedProject();
|
||||
const { projectNames, loading } = useProjectName();
|
||||
const { mutate: MarkAttendance } = useMarkAttendance();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const coords = usePositionTracker();
|
||||
@ -83,7 +89,7 @@ const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
|
||||
Id: modeldata?.id || null,
|
||||
comment: data.description,
|
||||
employeeID: modeldata.employeeId,
|
||||
// projectId: projectId,
|
||||
projectId: projectId,
|
||||
date: new Date().toISOString(),
|
||||
markTime: data.markTime,
|
||||
latitude: coords.latitude.toString(),
|
||||
@ -95,17 +101,24 @@ const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
|
||||
closeModal();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (projectId && projectNames) {
|
||||
setCurrentProject(
|
||||
projectNames?.find((project) => project.id === projectId)
|
||||
);
|
||||
}
|
||||
}, [projectNames, projectId, loading]);
|
||||
|
||||
return (
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 d-flex justify-content-center">
|
||||
<label className="fs-5 text-dark text-center">
|
||||
{modeldata?.checkInTime && !modeldata?.checkOutTime
|
||||
? "Check-out :"
|
||||
: "Check-in :"}
|
||||
? `Check out for ${currentProject?.name}`
|
||||
: `Check In for ${currentProject?.name}`}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-6 col-md-6 text-start">
|
||||
<label className="form-label" htmlFor="checkInDate">
|
||||
{modeldata?.checkInTime && !modeldata?.checkOutTime
|
||||
|
||||
@ -9,6 +9,7 @@ import usePagination from "../../hooks/usePagination";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import { cacheData, clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import Pagination from "../common/Pagination";
|
||||
|
||||
const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, IncludeInActive }) => {
|
||||
const queryClient = useQueryClient();
|
||||
@ -128,7 +129,7 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
|
||||
<tr>
|
||||
<th colSpan={2}>Name</th>
|
||||
<th>Date</th>
|
||||
<th>Organization</th>
|
||||
{/* <th>Organization</th> */}
|
||||
<th>
|
||||
<i className="bx bxs-down-arrow-alt text-success"></i>Check-In
|
||||
</th>
|
||||
@ -158,7 +159,7 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
|
||||
</td>
|
||||
<td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
|
||||
|
||||
<td>{att.organizationName || "--"}</td>
|
||||
{/* <td>{att.organizationName || "--"}</td> */}
|
||||
|
||||
<td>{convertShortTime(att.checkInTime)}</td>
|
||||
<td>
|
||||
@ -189,43 +190,11 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
|
||||
</div>
|
||||
)}
|
||||
{!loading && totalPages > 1 && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1 mt-3">
|
||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
onClick={() => paginate(currentPage - 1)}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(index + 1)}
|
||||
>
|
||||
{index + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -4,6 +4,7 @@ import ReactApexChart from "react-apexcharts";
|
||||
import { useAttendanceOverviewData } from "../../hooks/useDashboard_Data";
|
||||
import flatColors from "../Charts/flatColor";
|
||||
import ChartSkeleton from "../Charts/Skelton";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
const date = new Date(dateStr);
|
||||
@ -16,14 +17,17 @@ const formatDate = (dateStr) => {
|
||||
const AttendanceOverview = () => {
|
||||
const [dayRange, setDayRange] = useState(7);
|
||||
const [view, setView] = useState("chart");
|
||||
|
||||
const projectId = useSelector((store) => store.localVariables.projectId);
|
||||
const { attendanceOverviewData, loading, error } = useAttendanceOverviewData(
|
||||
projectId,
|
||||
const selectedProject = useSelectedProject()
|
||||
const { data: attendanceOverviewData, isLoading, isError, error } = useAttendanceOverviewData(
|
||||
selectedProject,
|
||||
dayRange
|
||||
);
|
||||
|
||||
const { tableData, roles, dates } = useMemo(() => {
|
||||
if (!attendanceOverviewData || attendanceOverviewData.length === 0) {
|
||||
return { tableData: [], roles: [], dates: [] };
|
||||
}
|
||||
|
||||
const map = new Map();
|
||||
|
||||
attendanceOverviewData.forEach((entry) => {
|
||||
@ -36,7 +40,8 @@ const AttendanceOverview = () => {
|
||||
...new Set(attendanceOverviewData.map((e) => e.role.trim())),
|
||||
];
|
||||
const sortedDates = [...map.keys()];
|
||||
const data = sortedDates.map((date) => {
|
||||
|
||||
const tableData = sortedDates.map((date) => {
|
||||
const row = { date };
|
||||
uniqueRoles.forEach((role) => {
|
||||
row[role] = map.get(date)?.[role] ?? 0;
|
||||
@ -44,12 +49,8 @@ const AttendanceOverview = () => {
|
||||
return row;
|
||||
});
|
||||
|
||||
return {
|
||||
tableData: data,
|
||||
roles: uniqueRoles,
|
||||
dates: sortedDates,
|
||||
};
|
||||
}, [attendanceOverviewData]);
|
||||
return { tableData, roles: uniqueRoles, dates: sortedDates };
|
||||
}, [attendanceOverviewData,isLoading,selectedProject,dayRange]);
|
||||
|
||||
const chartSeries = roles.map((role) => ({
|
||||
name: role,
|
||||
@ -63,41 +64,21 @@ const AttendanceOverview = () => {
|
||||
height: 400,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 2,
|
||||
columnWidth: "60%",
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: tableData.map((row) => row.date),
|
||||
},
|
||||
plotOptions: { bar: { borderRadius: 2, columnWidth: "60%" } },
|
||||
xaxis: { categories: tableData.map((row) => row.date) },
|
||||
yaxis: {
|
||||
show: true,
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: "#78909C",
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
},
|
||||
axisTicks: {
|
||||
show: true,
|
||||
borderType: "solid",
|
||||
color: "#78909C",
|
||||
width: 6,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: "bottom",
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
axisBorder: { show: true, color: "#78909C" },
|
||||
axisTicks: { show: true, color: "#78909C", width: 6 },
|
||||
},
|
||||
legend: { position: "bottom" },
|
||||
fill: { opacity: 1 },
|
||||
colors: roles.map((_, i) => flatColors[i % flatColors.length]),
|
||||
};
|
||||
|
||||
if (isLoading) return <div>Loading...</div>;
|
||||
if (isError) return <p className="text-danger">{error.message}</p>;
|
||||
|
||||
return (
|
||||
<div className="bg-white p-4 rounded shadow d-flex flex-column">
|
||||
{/* Header */}
|
||||
@ -117,18 +98,14 @@ const AttendanceOverview = () => {
|
||||
<option value={30}>Last 30 Days</option>
|
||||
</select>
|
||||
<button
|
||||
className={`btn btn-sm p-1 ${
|
||||
view === "chart" ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
className={`btn btn-sm p-1 ${view === "chart" ? "btn-primary" : "btn-outline-primary"}`}
|
||||
onClick={() => setView("chart")}
|
||||
title="Chart View"
|
||||
>
|
||||
<i className="bx bx-bar-chart-alt-2"></i>
|
||||
</button>
|
||||
<button
|
||||
className={`btn btn-sm p-1 ${
|
||||
view === "table" ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
className={`btn btn-sm p-1 ${view === "table" ? "btn-primary" : "btn-outline-primary"}`}
|
||||
onClick={() => setView("table")}
|
||||
title="Table View"
|
||||
>
|
||||
@ -139,57 +116,30 @@ const AttendanceOverview = () => {
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-grow-1 d-flex align-items-center justify-content-center">
|
||||
{loading ? (
|
||||
<ChartSkeleton />
|
||||
) : error ? (
|
||||
<p className="text-danger">{error}</p>
|
||||
) : view === "chart" ? (
|
||||
{view === "chart" ? (
|
||||
<div className="w-100">
|
||||
<ReactApexChart
|
||||
options={chartOptions}
|
||||
series={chartSeries}
|
||||
type="bar"
|
||||
height={400}
|
||||
/>
|
||||
<ReactApexChart options={chartOptions} series={chartSeries} type="bar" height={400} />
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="table-responsive w-100"
|
||||
style={{ maxHeight: "350px", overflowY: "auto" }}
|
||||
>
|
||||
<div className="table-responsive w-100" style={{ maxHeight: "350px", overflowY: "auto" }}>
|
||||
<table className="table table-bordered table-sm text-start align-middle mb-0">
|
||||
<thead
|
||||
className="table-light"
|
||||
style={{ position: "sticky", top: 0, zIndex: 1 }}
|
||||
>
|
||||
<thead className="table-light" style={{ position: "sticky", top: 0, zIndex: 1 }}>
|
||||
<tr>
|
||||
<th style={{ background: "#f8f9fa", textTransform: "none" }}>
|
||||
Role
|
||||
</th>
|
||||
<th style={{ background: "#f8f9fa", textTransform: "none" }}>Role</th>
|
||||
{dates.map((date, idx) => (
|
||||
<th
|
||||
key={idx}
|
||||
style={{ background: "#f8f9fa", textTransform: "none" }}
|
||||
>
|
||||
<th key={idx} style={{ background: "#f8f9fa", textTransform: "none" }}>
|
||||
{date}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{roles.map((role) => (
|
||||
<tr key={role}>
|
||||
<td>{role}</td>
|
||||
{tableData.map((row, idx) => {
|
||||
const value = row[role];
|
||||
const cellStyle =
|
||||
value > 0 ? { backgroundColor: "#d5d5d5" } : {};
|
||||
return (
|
||||
<td key={idx} style={cellStyle}>
|
||||
{value}
|
||||
</td>
|
||||
);
|
||||
return <td key={idx} style={value > 0 ? { backgroundColor: "#d5d5d5" } : {}}>{value}</td>;
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
@ -202,4 +152,4 @@ const AttendanceOverview = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default AttendanceOverview;
|
||||
export default AttendanceOverview;
|
||||
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
// import {
|
||||
// useDashboardProjectsCardData,
|
||||
// useDashboardTeamsCardData,
|
||||
@ -17,9 +17,10 @@ import AttendanceOverview from "./AttendanceChart";
|
||||
import ExpenseChartDesign2 from "./ExpenseChartDesign2";
|
||||
|
||||
const Dashboard = () => {
|
||||
// const { projectsCardData } = useDashboardProjectsCardData();
|
||||
// const { teamsCardData } = useDashboardTeamsCardData();
|
||||
// const { tasksCardData } = useDashboardTasksCardData();
|
||||
|
||||
// const { projectsCardData } = useDashboardProjectsCardData();
|
||||
// const { teamsCardData } = useDashboardTeamsCardData();
|
||||
// const { tasksCardData } = useDashboardTasksCardData();
|
||||
|
||||
// Get the selected project ID from Redux store
|
||||
const projectId = useSelector((store) => store.localVariables.projectId);
|
||||
@ -43,4 +44,4 @@ const Dashboard = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
export default Dashboard;
|
||||
|
||||
@ -86,6 +86,8 @@ const ListViewContact = ({ data, Pagination, isLoading }) => {
|
||||
ActiveInActive({ contactId: contactId, contactStatus: !showActive });
|
||||
};
|
||||
|
||||
if(isLoading) return <Loader/>
|
||||
if(!data|| data.length === 0)return <div className="text-center py-12">No Contact Found</div>
|
||||
return (
|
||||
<>
|
||||
<ConfirmModal
|
||||
@ -103,11 +105,7 @@ const ListViewContact = ({ data, Pagination, isLoading }) => {
|
||||
className="card-datatable table-responsive"
|
||||
id="horizontal-example"
|
||||
>
|
||||
{isLoading && (
|
||||
<div>
|
||||
<Loader />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data && (
|
||||
<div className="dataTables_wrapper no-footer mx-5 pb-2">
|
||||
<table className="table dataTable text-nowrap">
|
||||
@ -124,7 +122,7 @@ const ListViewContact = ({ data, Pagination, isLoading }) => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Array.isArray(data) && data.length > 0 ? (
|
||||
{Array.isArray(data) && data.length > 0 && (
|
||||
data.map((row, i) => (
|
||||
<tr
|
||||
key={i}
|
||||
@ -184,16 +182,7 @@ const ListViewContact = ({ data, Pagination, isLoading }) => {
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr style={{ height: "200px" }}>
|
||||
<td
|
||||
colSpan={contactList.length + 1}
|
||||
className="text-center align-middle border-0"
|
||||
>
|
||||
No contacts found
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
) }
|
||||
</tbody>
|
||||
</table>
|
||||
{Pagination && (
|
||||
|
||||
@ -23,7 +23,7 @@ import Label from "../common/Label";
|
||||
const ManageContact = ({ contactId, closeModal }) => {
|
||||
// fetch master data
|
||||
const { buckets, loading: bucketsLoaging } = useBuckets();
|
||||
const { data:projects, loading: projectLoading } = useProjects();
|
||||
const { data: projects, loading: projectLoading } = useProjects();
|
||||
const { contactCategory, loading: contactCategoryLoading } =
|
||||
useContactCategory();
|
||||
const { organizationList } = useOrganization();
|
||||
@ -205,13 +205,14 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
<Label htmlFor={"organization"} required>
|
||||
Organization
|
||||
</Label>
|
||||
<InputSuggestions
|
||||
organizationList={organizationList}
|
||||
value={watch("organization") || ""}
|
||||
onChange={(val) => setValue("organization", val, { shouldValidate: true })}
|
||||
error={errors.organization?.message}
|
||||
/>
|
||||
|
||||
<InputSuggestions
|
||||
organizationList={organizationList}
|
||||
value={watch("organization") || ""}
|
||||
onChange={(val) =>
|
||||
setValue("organization", val, { shouldValidate: true })
|
||||
}
|
||||
error={errors.organization?.message}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -394,6 +395,7 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
IsLoading={projectLoading}
|
||||
|
||||
/>
|
||||
{errors.projectIds && (
|
||||
<small className="danger-text">{errors.projectIds.message}</small>
|
||||
@ -408,6 +410,7 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
label="Tags"
|
||||
options={contactTags}
|
||||
isRequired={true}
|
||||
require
|
||||
/>
|
||||
{errors.tags && (
|
||||
<small className="danger-text">{errors.tags.message}</small>
|
||||
@ -417,7 +420,7 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
{/* Buckets */}
|
||||
<div className="row">
|
||||
<div className="col-md-12 mt-1 text-start">
|
||||
<label className="form-label ">Select Bucket</label>
|
||||
<Label required>Select Bucket</Label>
|
||||
<ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
|
||||
{bucketsLoaging && <p>Loading...</p>}
|
||||
{buckets?.map((item) => (
|
||||
@ -450,7 +453,7 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
</div>
|
||||
|
||||
{/* Address + Description */}
|
||||
<div className="col-12 text-start">
|
||||
<div className="col-12 text-start mb-2">
|
||||
<label className="form-label">Address</label>
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
@ -459,7 +462,7 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Description</label>
|
||||
<Label required>Description</Label>
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
rows="2"
|
||||
@ -479,10 +482,13 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button className="btn btn-sm btn-primary" type="submit" disabled={isPending}>
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
type="submit"
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? "Please Wait..." : "Submit"}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
|
||||
@ -189,12 +189,12 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
|
||||
<div className="d-flex justify-content-end py-3 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-label-secondary btn-xs"
|
||||
className="btn btn-label-secondary btn-sm"
|
||||
onClick={onClear}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary btn-xs">
|
||||
<button type="submit" className="btn btn-primary btn-sm">
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -17,54 +17,56 @@ const SkeletonCell = ({
|
||||
/>
|
||||
);
|
||||
|
||||
export const DocumentTableSkeleton = ({ rows = 5 }) => {
|
||||
export const DocumentTableSkeleton = ({ rows = 10 }) => {
|
||||
return (
|
||||
<table className="card-body table border-top dataTable no-footer dtr-column text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-start">Name</th>
|
||||
<th className="text-start">Document Type</th>
|
||||
<th className="text-start">Uploaded By</th>
|
||||
<th className="text-center">Uploaded on</th>
|
||||
<th className="text-center">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<table className="card-body table border-top dataTable no-footer dtr-column text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-start">Name</th>
|
||||
<th className="text-start">Document Type</th>
|
||||
<th className="text-start">Uploaded By</th>
|
||||
<th className="text-center">Uploaded on</th>
|
||||
<th className="text-center">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[...Array(rows)].map((_, idx) => (
|
||||
<tr key={idx} className={idx % 2 === 0 ? "odd" : "even"}>
|
||||
{/* Name */}
|
||||
<td className="text-start">
|
||||
<SkeletonCell width="120px" height={16} />
|
||||
</td>
|
||||
|
||||
<tbody>
|
||||
{[...Array(rows)].map((_, idx) => (
|
||||
<tr key={idx} className={idx % 2 === 0 ? "odd" : "even"}>
|
||||
{/* Name */}
|
||||
<td className="text-start">
|
||||
<SkeletonCell width="120px" height={16} />
|
||||
</td>
|
||||
{/* Document Type */}
|
||||
<td className="text-start">
|
||||
<SkeletonCell width="100px" height={16} />
|
||||
</td>
|
||||
|
||||
{/* Document Type */}
|
||||
<td className="text-start">
|
||||
<SkeletonCell width="100px" height={16} />
|
||||
</td>
|
||||
|
||||
{/* Uploaded By (Avatar + Name) */}
|
||||
<td className="text-start">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<SkeletonCell width="30px" height={30} className="rounded-circle" />
|
||||
<SkeletonCell width="80px" height={16} />
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Uploaded on */}
|
||||
<td className="text-center">
|
||||
{/* Uploaded By (Avatar + Name) */}
|
||||
<td className="text-start">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<SkeletonCell
|
||||
width="30px"
|
||||
height={30}
|
||||
className="rounded-circle"
|
||||
/>
|
||||
<SkeletonCell width="80px" height={16} />
|
||||
</td>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Status */}
|
||||
<td className="text-center">
|
||||
<SkeletonCell width="70px" height={20} className="rounded" />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* Uploaded on */}
|
||||
<td className="text-center">
|
||||
<SkeletonCell width="80px" height={16} />
|
||||
</td>
|
||||
|
||||
{/* Status */}
|
||||
<td className="text-center">
|
||||
<SkeletonCell width="70px" height={20} className="rounded" />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
|
||||
@ -117,7 +117,7 @@ const Documents = ({ Document_Entity, Entity }) => {
|
||||
}, [Document_Entity]);
|
||||
return (
|
||||
<DocumentContext.Provider value={contextValues}>
|
||||
<div className="mt-5">
|
||||
<div className="mt-2">
|
||||
<div className="card page-min-h d-flex p-2">
|
||||
<div className="row align-items-center">
|
||||
{/* Search */}
|
||||
|
||||
@ -82,9 +82,9 @@ const DocumentsList = ({
|
||||
if (isLoading || isFetching) return <DocumentTableSkeleton />;
|
||||
if (isError)
|
||||
return <div>Error: {error?.message || "Something went wrong"}</div>;
|
||||
if (isInitialEmpty) return <div>No documents found yet.</div>;
|
||||
if (isSearchEmpty) return <div>No results found for "{debouncedSearch}"</div>;
|
||||
if (isFilterEmpty) return <div>No documents match your filter.</div>;
|
||||
if (isInitialEmpty) return <div className="py-12 my-12">No documents found yet.</div>;
|
||||
if (isSearchEmpty) return <div className="py-12 my-12">No results found for "{debouncedSearch}"</div>;
|
||||
if (isFilterEmpty) return <div className="py-12 my-12">No documents match your filter.</div>;
|
||||
|
||||
const handleDelete = () => {
|
||||
ActiveInActive(
|
||||
@ -180,10 +180,10 @@ const DocumentsList = ({
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="table-responsive">
|
||||
<div className="table-responsive p-2">
|
||||
<table className="table border-top dataTable text-nowrap">
|
||||
<thead>
|
||||
<tr className="shadow-sm">
|
||||
<thead className="">
|
||||
<tr className="py-2 ">
|
||||
{DocumentColumns.map((col) => (
|
||||
<th key={col.key} className={`sorting ${col.align}`}>
|
||||
{col.label}
|
||||
|
||||
@ -131,7 +131,7 @@ const EmpAttendance = ({ employee }) => {
|
||||
<AttendLogs Id={attendanceId} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
<div className="card px-4 mt-5 py-2 " style={{ minHeight: "500px" }}>
|
||||
<div className="card px-4 mt-2 py-2 page-min-h ">
|
||||
<div
|
||||
className="dataTables_length text-start py-2 d-flex justify-content-between "
|
||||
id="DataTables_Table_0_length"
|
||||
|
||||
@ -12,11 +12,11 @@ const EmpDashboard = ({ profile }) => {
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12 col-sm-6 pt-5">
|
||||
<div className="col-12 col-sm-6 pt-2">
|
||||
{" "}
|
||||
<EmpOverview profile={profile}></EmpOverview>
|
||||
</div>
|
||||
<div className="col col-sm-6 pt-5">
|
||||
{/* <div className="col col-sm-6 pt-5">
|
||||
<div className="card ">
|
||||
<div className="card-body">
|
||||
<small className="card-text text-uppercase text-body-secondary small text-start d-block">
|
||||
@ -29,7 +29,6 @@ const EmpDashboard = ({ profile }) => {
|
||||
className="d-flex mb-4 align-items-start flex-wrap"
|
||||
key={project.id}
|
||||
>
|
||||
{/* Project Info */}
|
||||
<div className="flex-grow-1">
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div className="d-flex">
|
||||
@ -70,7 +69,6 @@ const EmpDashboard = ({ profile }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dates */}
|
||||
|
||||
</div>
|
||||
</li>
|
||||
@ -79,7 +77,7 @@ const EmpDashboard = ({ profile }) => {
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -24,7 +24,7 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
|
||||
icon: "bx bx-file",
|
||||
label: "Documents",
|
||||
},
|
||||
{ key: "activities", icon: "bx bx-grid-alt", label: "Activities" },
|
||||
// { key: "activities", icon: "bx bx-grid-alt", label: "Activities" },
|
||||
].filter(Boolean);
|
||||
return (
|
||||
<div className="col-md-12">
|
||||
|
||||
@ -117,6 +117,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
||||
endField="endDate"
|
||||
resetSignal={resetKey}
|
||||
defaultRange={false}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { z } from "zod";
|
||||
import { localToUtc } from "../../utils/appUtils";
|
||||
|
||||
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
|
||||
const ALLOWED_TYPES = [
|
||||
@ -17,15 +18,12 @@ export const ExpenseSchema = (expenseTypes) => {
|
||||
.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" })
|
||||
,
|
||||
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(),
|
||||
gstNumber: z.string().optional(),
|
||||
amount: z.coerce
|
||||
.number({
|
||||
invalid_type_error: "Amount is required and must be a number",
|
||||
@ -54,8 +52,6 @@ export const ExpenseSchema = (expenseTypes) => {
|
||||
})
|
||||
)
|
||||
.nonempty({ message: "At least one file attachment is required" }),
|
||||
|
||||
|
||||
})
|
||||
.refine(
|
||||
(data) => {
|
||||
@ -68,9 +64,14 @@ export const ExpenseSchema = (expenseTypes) => {
|
||||
path: ["paidById"],
|
||||
}
|
||||
)
|
||||
.superRefine((data, ctx) => {
|
||||
const expenseType = expenseTypes.find((et) => et.id === data.expensesTypeId);
|
||||
if (expenseType?.noOfPersonsRequired && (!data.noOfPersons || data.noOfPersons < 1)) {
|
||||
.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",
|
||||
@ -92,12 +93,14 @@ export const defaultExpense = {
|
||||
supplerName: "",
|
||||
amount: "",
|
||||
noOfPersons: "",
|
||||
gstNumber:"",
|
||||
gstNumber: "",
|
||||
billAttachments: [],
|
||||
};
|
||||
|
||||
|
||||
export const ExpenseActionScheam = (isReimbursement = false) => {
|
||||
export const ExpenseActionScheam = (
|
||||
isReimbursement = false,
|
||||
transactionDate
|
||||
) => {
|
||||
return z
|
||||
.object({
|
||||
comment: z.string().min(1, { message: "Please leave comment" }),
|
||||
@ -122,6 +125,15 @@ export const ExpenseActionScheam = (isReimbursement = false) => {
|
||||
message: "Reimburse Date is required",
|
||||
});
|
||||
}
|
||||
// let reimburse_Date = localToUtc(data.reimburseDate);
|
||||
// if (transactionDate > reimburse_Date) {
|
||||
// ctx.addIssue({
|
||||
// code: z.ZodIssueCode.custom,
|
||||
// path: ["reimburseDate"],
|
||||
// message:
|
||||
// "Reimburse Date must be greater than or equal to Expense created Date",
|
||||
// });
|
||||
// }
|
||||
if (!data.reimburseById) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
@ -133,7 +145,7 @@ export const ExpenseActionScheam = (isReimbursement = false) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const defaultActionValues = {
|
||||
export const defaultActionValues = {
|
||||
comment: "",
|
||||
statusId: "",
|
||||
|
||||
@ -142,8 +154,6 @@ export const ExpenseActionScheam = (isReimbursement = false) => {
|
||||
reimburseById: null,
|
||||
};
|
||||
|
||||
|
||||
|
||||
export const SearchSchema = z.object({
|
||||
projectIds: z.array(z.string()).optional(),
|
||||
statusIds: z.array(z.string()).optional(),
|
||||
@ -163,4 +173,3 @@ export const defaultFilter = {
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
};
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ 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 { getColorNameFromHex, getIconByFileType, localToUtc } from "../../utils/appUtils";
|
||||
import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import {
|
||||
@ -38,7 +38,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
const IsReview = useHasUserPermission(REVIEW_EXPENSE);
|
||||
const [imageLoaded, setImageLoaded] = useState({});
|
||||
const { setDocumentView } = useExpenseContext();
|
||||
const ActionSchema = ExpenseActionScheam(IsPaymentProcess) ?? z.object({});
|
||||
const ActionSchema = ExpenseActionScheam(IsPaymentProcess,data?.createdAt) ?? z.object({});
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
register,
|
||||
@ -91,9 +91,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
const onSubmit = (formData) => {
|
||||
const Payload = {
|
||||
...formData,
|
||||
reimburseDate: moment
|
||||
.utc(formData.reimburseDate, "DD-MM-YYYY")
|
||||
.toISOString(),
|
||||
reimburseDate:localToUtc(formData.reimburseDate),
|
||||
expenseId: ExpenseId,
|
||||
comment: formData.comment,
|
||||
};
|
||||
@ -397,7 +395,8 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
<DatePicker
|
||||
name="reimburseDate"
|
||||
control={control}
|
||||
minDate={data?.transactionDate}
|
||||
minDate={data?.createdAt}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
{errors.reimburseDate && (
|
||||
<small className="danger-text">
|
||||
@ -410,7 +409,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
<EmployeeSearchInput
|
||||
control={control}
|
||||
name="reimburseById"
|
||||
projectId={null}
|
||||
projectId={null}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { useCallback, useEffect, useState,useMemo } from "react";
|
||||
import getGreetingMessage from "../../utils/greetingHandler";
|
||||
import {
|
||||
cacheData,
|
||||
@ -14,118 +15,103 @@ import { useLocation, useNavigate, useParams } from "react-router-dom";
|
||||
import Avatar from "../../components/common/Avatar";
|
||||
import { useChangePassword } from "../Context/ChangePasswordContext";
|
||||
import { useProjectModal, useProjects } from "../../hooks/useProjects";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useProjectName } from "../../hooks/useProjects";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { MANAGE_PROJECT } from "../../utils/constants";
|
||||
import { ALLOW_PROJECTSTATUS_ID, MANAGE_PROJECT, UUID_REGEX } from "../../utils/constants";
|
||||
import { useAuthModal, useLogout } from "../../hooks/useAuth";
|
||||
|
||||
const Header = () => {
|
||||
const { profile } = useProfile();
|
||||
const { profile } = useProfile();
|
||||
const { data: masterData } = useMaster();
|
||||
const location = useLocation();
|
||||
const dispatch = useDispatch();
|
||||
const { data, loading } = useMaster();
|
||||
const navigate = useNavigate();
|
||||
const { onOpen } = useAuthModal();
|
||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||
const { mutate: logout, isPending: logouting } = useLogout();
|
||||
|
||||
const { openModal } = useProjectModal();
|
||||
const { mutate: logout, isPending: logouting } = useLogout();
|
||||
const { onOpen } = useAuthModal();
|
||||
const { openChangePassword } = useChangePassword();
|
||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||
|
||||
const isDashboardPath =
|
||||
/^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
|
||||
const isProjectPath = /^\/projects$/.test(location.pathname);
|
||||
const pathname = location.pathname;
|
||||
|
||||
const showProjectDropdown = (pathname) => {
|
||||
const isDirectoryPath = /^\/directory$/.test(pathname);
|
||||
// ======= MEMO CHECKS =======
|
||||
const isDashboardPath = pathname === "/" || pathname === "/dashboard";
|
||||
const isProjectPath = pathname === "/projects";
|
||||
const isDirectory = pathname === "/directory";
|
||||
const isEmployeeList = pathname === "/employees";
|
||||
const isExpense = pathname === "/expenses";
|
||||
const isEmployeeProfile = UUID_REGEX.test(pathname);
|
||||
|
||||
// const isProfilePage = /^\/employee$/.test(location.pathname);
|
||||
const isProfilePage =
|
||||
/^\/employee\/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(
|
||||
pathname
|
||||
);
|
||||
const isExpensePage = /^\/expenses$/.test(pathname);
|
||||
const hideDropPaths =
|
||||
isDirectory || isEmployeeList || isExpense || isEmployeeProfile;
|
||||
|
||||
return !(isDirectoryPath || isProfilePage || isExpensePage);
|
||||
};
|
||||
const allowedProjectStatusIds = [
|
||||
"603e994b-a27f-4e5d-a251-f3d69b0498ba",
|
||||
"cdad86aa-8a56-4ff4-b633-9c629057dfef",
|
||||
"b74da4c2-d07e-46f2-9919-e75e49b12731",
|
||||
];
|
||||
|
||||
const getRole = (roles, joRoleId) => {
|
||||
if (!Array.isArray(roles)) return "User";
|
||||
let role = roles.find((role) => role.id === joRoleId);
|
||||
return role ? role.name : "User";
|
||||
};
|
||||
|
||||
const handleProfilePage = () => {
|
||||
navigate(`/employee/${profile?.employeeInfo?.id}`);
|
||||
};
|
||||
const showProjectDropdown = !hideDropPaths;
|
||||
|
||||
// ===== Project Names & Selected Project =====
|
||||
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
||||
|
||||
const selectedProject = useSelectedProject();
|
||||
|
||||
const projectsForDropdown = isDashboardPath
|
||||
? projectNames
|
||||
: projectNames?.filter((project) =>
|
||||
allowedProjectStatusIds.includes(project.projectStatusId)
|
||||
);
|
||||
const projectsForDropdown = useMemo(
|
||||
() =>
|
||||
isDashboardPath
|
||||
? projectNames
|
||||
: projectNames?.filter((project) =>
|
||||
ALLOW_PROJECTSTATUS_ID.includes(project.projectStatusId)
|
||||
),
|
||||
[projectNames, isDashboardPath]
|
||||
);
|
||||
|
||||
let currentProjectDisplayName;
|
||||
if (projectLoading) {
|
||||
currentProjectDisplayName = "Loading...";
|
||||
} else if (!projectNames || projectNames.length === 0) {
|
||||
currentProjectDisplayName = "No Projects Assigned";
|
||||
} else if (projectNames.length === 1) {
|
||||
currentProjectDisplayName = projectNames[0].name;
|
||||
} else {
|
||||
if (selectedProject === null) {
|
||||
currentProjectDisplayName = "All Projects";
|
||||
} else {
|
||||
const selectedProjectObj = projectNames.find(
|
||||
(p) => p?.id === selectedProject
|
||||
);
|
||||
currentProjectDisplayName = selectedProjectObj
|
||||
? selectedProjectObj.name
|
||||
: "All Projects";
|
||||
}
|
||||
}
|
||||
const currentProjectDisplayName = useMemo(() => {
|
||||
if (projectLoading) return "Loading...";
|
||||
if (!projectNames?.length) return "No Projects Assigned";
|
||||
if (projectNames.length === 1) return projectNames[0].name;
|
||||
|
||||
const { openChangePassword } = useChangePassword();
|
||||
const selectedObj = projectNames.find((p) => p.id === selectedProject);
|
||||
return selectedObj
|
||||
? selectedObj.name
|
||||
: projectNames[0]?.name || "No Projects Assigned";
|
||||
}, [projectLoading, projectNames, selectedProject]);
|
||||
|
||||
// ===== Role Helper =====
|
||||
const getRole = (roles, joRoleId) => {
|
||||
if (!Array.isArray(roles)) return "User";
|
||||
return roles.find((r) => r.id === joRoleId)?.name || "User";
|
||||
};
|
||||
|
||||
// ===== Navigate to Profile =====
|
||||
const handleProfilePage = () =>
|
||||
navigate(`/employee/${profile?.employeeInfo?.id}`);
|
||||
|
||||
// ===== Set default project on load =====
|
||||
useEffect(() => {
|
||||
if (
|
||||
projectNames &&
|
||||
projectNames.length > 0 &&
|
||||
projectNames?.length &&
|
||||
selectedProject === undefined &&
|
||||
!getCachedData("hasReceived")
|
||||
) {
|
||||
if (projectNames.length === 1) {
|
||||
dispatch(setProjectId(projectNames[0]?.id || null));
|
||||
dispatch(setProjectId(projectNames[0].id || null));
|
||||
} else {
|
||||
if (isDashboardPath) {
|
||||
dispatch(setProjectId(null));
|
||||
} else {
|
||||
const firstAllowedProject = projectNames.find((project) =>
|
||||
allowedProjectStatusIds.includes(project.projectStatusId)
|
||||
const firstAllowed = projectNames.find((project) =>
|
||||
ALLOW_PROJECTSTATUS_ID.includes(project.projectStatusId)
|
||||
);
|
||||
dispatch(setProjectId(firstAllowedProject?.id || null));
|
||||
dispatch(setProjectId(firstAllowed?.id || null));
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [projectNames, selectedProject, dispatch, isDashboardPath]);
|
||||
|
||||
// ===== Event Handlers =====
|
||||
const handler = useCallback(
|
||||
async (data) => {
|
||||
if (!HasManageProjectPermission) {
|
||||
await fetchData();
|
||||
const projectExist = data.projectIds.some(
|
||||
(item) => item === selectedProject
|
||||
);
|
||||
if (projectExist) {
|
||||
if (data.projectIds?.includes(selectedProject)) {
|
||||
cacheData("hasReceived", false);
|
||||
}
|
||||
}
|
||||
@ -135,14 +121,15 @@ const Header = () => {
|
||||
|
||||
const newProjectHandler = useCallback(
|
||||
async (msg) => {
|
||||
if (HasManageProjectPermission && msg.keyword === "Create_Project") {
|
||||
await fetchData();
|
||||
} else if (projectNames?.some((item) => item.id === msg.response.id)) {
|
||||
if (
|
||||
msg.keyword === "Create_Project" ||
|
||||
projectNames?.some((p) => p.id === msg.response?.id)
|
||||
) {
|
||||
await fetchData();
|
||||
cacheData("hasReceived", false);
|
||||
}
|
||||
cacheData("hasReceived", false);
|
||||
},
|
||||
[HasManageProjectPermission, projectNames, fetchData]
|
||||
[projectNames, fetchData]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -159,10 +146,10 @@ const Header = () => {
|
||||
};
|
||||
}, [handler, newProjectHandler]);
|
||||
|
||||
const handleProjectChange = (project) => {
|
||||
dispatch(setProjectId(project));
|
||||
|
||||
if (isProjectPath && project !== null) {
|
||||
// ===== Project Change =====
|
||||
const handleProjectChange = (projectId) => {
|
||||
dispatch(setProjectId(projectId));
|
||||
if (isProjectPath && projectId !== null) {
|
||||
navigate("/projects/details");
|
||||
}
|
||||
};
|
||||
@ -186,7 +173,7 @@ const Header = () => {
|
||||
className="navbar-nav-right d-flex align-items-center justify-content-between"
|
||||
id="navbar-collapse"
|
||||
>
|
||||
{showProjectDropdown(location.pathname) && (
|
||||
{showProjectDropdown && (
|
||||
<div className="align-items-center">
|
||||
<i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
|
||||
<div className="btn-group">
|
||||
@ -212,16 +199,6 @@ const Header = () => {
|
||||
className="dropdown-menu"
|
||||
style={{ overflow: "auto", maxHeight: "300px" }}
|
||||
>
|
||||
{isDashboardPath && (
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() => handleProjectChange(null)}
|
||||
>
|
||||
All Projects
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
{[...projectsForDropdown]
|
||||
.sort((a, b) => a?.name?.localeCompare(b.name))
|
||||
.map((project) => (
|
||||
@ -247,16 +224,16 @@ const Header = () => {
|
||||
|
||||
<ul className="navbar-nav flex-row align-items-center ms-md-auto">
|
||||
{/* {HasManageProjectPermission && ( */}
|
||||
<li className="nav-item navbar-dropdown dropdown-user dropdown">
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
type="button"
|
||||
onClick={() => openModal(null)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
<span className="d-none d-md-inline-block">Create Project</span>
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item navbar-dropdown dropdown-user dropdown">
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
type="button"
|
||||
onClick={() => openModal(null)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
<span className="d-none d-md-inline-block">Create Project</span>
|
||||
</button>
|
||||
</li>
|
||||
{/* )} */}
|
||||
<li className="nav-item navbar-dropdown dropdown-user dropdown">
|
||||
<a
|
||||
@ -289,7 +266,7 @@ const Header = () => {
|
||||
{profile?.employeeInfo?.firstName}
|
||||
</span>
|
||||
<small className="text-muted">
|
||||
{getRole(data, profile?.employeeInfo?.joRoleId)}
|
||||
{getRole(masterData, profile?.employeeInfo?.joRoleId)}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -66,7 +66,7 @@ const ProjectCard = ({ project }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`ms-auto ${!ManageProject && "d-none"}`}>
|
||||
<div className={`ms-auto `}>
|
||||
<div className="dropdown z-2">
|
||||
<button
|
||||
type="button"
|
||||
@ -106,12 +106,6 @@ const ProjectCard = ({ project }) => {
|
||||
<span className="align-left">Modify</span>
|
||||
</a>
|
||||
</li>
|
||||
<li onClick={handleViewActivities}>
|
||||
<a className="dropdown-item">
|
||||
<i className="bx bx-task me-2"></i>
|
||||
<span className="align-left">Activities</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,70 +1,62 @@
|
||||
import React from 'react'
|
||||
import { useProjects } from '../../hooks/useProjects'
|
||||
import Loader from '../common/Loader'
|
||||
import ProjectCard from './ProjectCard'
|
||||
|
||||
const ProjectCardView = ({currentItems,setCurrentPage,totalPages }) => {
|
||||
|
||||
import React from "react";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import Loader from "../common/Loader";
|
||||
import ProjectCard from "./ProjectCard";
|
||||
|
||||
const ProjectCardView = ({ currentItems, setCurrentPage, totalPages }) => {
|
||||
return (
|
||||
<div className="row page-min-h">
|
||||
{currentItems.length === 0 && (
|
||||
<p className="text-center text-muted">No projects found.</p>
|
||||
)}
|
||||
|
||||
<div className="row page-min-h">
|
||||
{currentItems.map((project) => (
|
||||
<ProjectCard key={project.id} project={project} />
|
||||
))}
|
||||
|
||||
{ currentItems.length === 0 && (
|
||||
<p className="text-center text-muted">No projects found.</p>
|
||||
)}
|
||||
|
||||
{currentItems.map((project) => (
|
||||
<ProjectCard
|
||||
key={project.id}
|
||||
project={project}
|
||||
/>
|
||||
))}
|
||||
|
||||
|
||||
{ totalPages > 1 && (
|
||||
<nav>
|
||||
<ul className="pagination pagination-sm justify-content-end py-2">
|
||||
<li className={`page-item ${currentPage === 1 && "disabled"}`}>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className={`page-item ${currentPage === i + 1 && "active"}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage(i + 1)}
|
||||
>
|
||||
{i + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
{totalPages > 1 && (
|
||||
<nav>
|
||||
<ul className="pagination pagination-sm justify-content-end py-2">
|
||||
<li className={`page-item ${currentPage === 1 && "disabled"}`}>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, i) => (
|
||||
<li
|
||||
className={`page-item ${currentPage === totalPages && "disabled"
|
||||
}`}
|
||||
key={i}
|
||||
className={`page-item ${currentPage === i + 1 && "active"}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() =>
|
||||
setCurrentPage((p) => Math.min(totalPages, p + 1))
|
||||
}
|
||||
onClick={() => setCurrentPage(i + 1)}
|
||||
>
|
||||
»
|
||||
{i + 1}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages && "disabled"
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() =>
|
||||
setCurrentPage((p) => Math.min(totalPages, p + 1))
|
||||
}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectCardView
|
||||
export default ProjectCardView;
|
||||
|
||||
@ -26,9 +26,8 @@ const ProjectListView = ({
|
||||
const navigate = useNavigate();
|
||||
const { setMangeProject } = useProjectContext();
|
||||
// const { data, isLoading, isError, error } = useProjects();
|
||||
|
||||
// check Permissions
|
||||
const canManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
// const canManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
|
||||
const projectColumns = [
|
||||
{
|
||||
@ -125,11 +124,15 @@ const ProjectListView = ({
|
||||
},
|
||||
];
|
||||
|
||||
const handleViewActivities = (project) => {
|
||||
dispatch(setProjectId(project));
|
||||
navigate(`/activities/records?project=${project}`);
|
||||
};
|
||||
// const handleViewActivities = (project) => {
|
||||
// dispatch(setProjectId(project));
|
||||
// navigate(`/activities/records?project=${project}`);
|
||||
// };
|
||||
|
||||
const handleMoveDetails = (project) => {
|
||||
dispatch(setProjectId(project));
|
||||
navigate("/projects/details");
|
||||
};
|
||||
return (
|
||||
<div className="card page-min-h py-4 px-6 shadow-sm">
|
||||
<table className="table table-hover align-middle m-0">
|
||||
@ -158,11 +161,7 @@ const ProjectListView = ({
|
||||
: project[col.key] || "N/A"}
|
||||
</td>
|
||||
))}
|
||||
<td
|
||||
className={`mx-2 ${
|
||||
canManageProject ? "d-sm-table-cell" : "d-none"
|
||||
}`}
|
||||
>
|
||||
<td className={`mx-2 ${"d-sm-table-cell"}`}>
|
||||
<div className="dropdown z-2">
|
||||
<button
|
||||
type="button"
|
||||
@ -180,7 +179,7 @@ const ProjectListView = ({
|
||||
></i>
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<li onClick={() => handleMoveDetails(project.id)}>
|
||||
<a
|
||||
aria-label="click to View details"
|
||||
className="dropdown-item cursor-pointer"
|
||||
@ -204,12 +203,12 @@ const ProjectListView = ({
|
||||
<span className="align-left">Modify</span>
|
||||
</a>
|
||||
</li>
|
||||
<li onClick={() => handleViewActivities(project.id)}>
|
||||
{/* <li onClick={() => handleViewActivities(project.id)}>
|
||||
<a className="dropdown-item cursor-pointer">
|
||||
<i className="bx bx-task me-2"></i>
|
||||
<span className="align-left">Activities</span>
|
||||
</a>
|
||||
</li>
|
||||
</li> */}
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@ -8,12 +8,14 @@ import { orgSize, reference } from "../../utils/constants";
|
||||
import moment from "moment";
|
||||
import { useGlobalServices } from "../../hooks/masterHook/useMaster";
|
||||
import SelectMultiple from "../common/SelectMultiple";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
const { data, isError, isLoading: industryLoading } = useIndustries();
|
||||
const [logoPreview, setLogoPreview] = useState(null);
|
||||
const [logoName, setLogoName] = useState("");
|
||||
const { data: services, isLoading: serviceLoading } = useGlobalServices();
|
||||
const navigate = useNavigate()
|
||||
const {
|
||||
register,
|
||||
control,
|
||||
@ -29,7 +31,8 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
error,
|
||||
isPending,
|
||||
} = useCreateTenant(() => {
|
||||
onNext()
|
||||
// onNext()
|
||||
navigate("/tenants");
|
||||
});
|
||||
|
||||
const handleNext = async () => {
|
||||
|
||||
@ -4,21 +4,26 @@ import { createPortal } from "react-dom";
|
||||
import "./MultiSelectDropdown.css";
|
||||
import Label from "./Label";
|
||||
|
||||
|
||||
|
||||
|
||||
const SelectMultiple = ({
|
||||
name,
|
||||
options = [],
|
||||
label = "Select options",
|
||||
labelKey = "name",
|
||||
labelKey = "name",
|
||||
valueKey = "id",
|
||||
placeholder = "Please select...",
|
||||
IsLoading = false,required = false
|
||||
IsLoading = false,
|
||||
required = false,
|
||||
}) => {
|
||||
const { setValue, watch,register } = useFormContext();
|
||||
useEffect(() => {
|
||||
register(name, { value: [] });
|
||||
}, [register, name]);
|
||||
const { setValue, watch, register } = useFormContext();
|
||||
|
||||
const selectedValues = watch(name) || [];
|
||||
useEffect(() => {
|
||||
register(name, { value: [] });
|
||||
}, [register, name]);
|
||||
|
||||
const selectedValues = watch(name) || [];
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
@ -60,18 +65,20 @@ const selectedValues = watch(name) || [];
|
||||
const updated = selectedValues.includes(value)
|
||||
? selectedValues.filter((v) => v !== value)
|
||||
: [...selectedValues, value];
|
||||
|
||||
setValue(name, updated, { shouldValidate: true });
|
||||
};
|
||||
|
||||
const filteredOptions = (options || []).filter((item) => {
|
||||
const label = getLabel(item);
|
||||
return (
|
||||
typeof label === "string" &&
|
||||
label.toLowerCase().includes(searchText.toLowerCase())
|
||||
);
|
||||
});
|
||||
const label = getLabel(item);
|
||||
return typeof label === "string" && label.toLowerCase().includes(searchText.toLowerCase());
|
||||
});
|
||||
|
||||
// Sort filtered options in ascending order
|
||||
const sortedOptions = filteredOptions.sort((a, b) => {
|
||||
const labelA = getLabel(a).toString().toLowerCase();
|
||||
const labelB = getLabel(b).toString().toLowerCase();
|
||||
return labelA.localeCompare(labelB);
|
||||
});
|
||||
|
||||
const dropdownElement = (
|
||||
<div
|
||||
@ -101,7 +108,7 @@ const selectedValues = watch(name) || [];
|
||||
/>
|
||||
</div>
|
||||
|
||||
{filteredOptions.map((item) => {
|
||||
{sortedOptions.map((item) => {
|
||||
const labelVal = getLabel(item);
|
||||
const valueVal = item[valueKey];
|
||||
const isChecked = selectedValues.includes(valueVal);
|
||||
@ -124,12 +131,12 @@ const selectedValues = watch(name) || [];
|
||||
);
|
||||
})}
|
||||
|
||||
{!IsLoading && filteredOptions.length === 0 && (
|
||||
{!IsLoading && sortedOptions.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 && (
|
||||
{IsLoading && sortedOptions.length === 0 && (
|
||||
<div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
|
||||
<label className="text-muted">Loading...</label>
|
||||
</div>
|
||||
@ -140,19 +147,14 @@ const selectedValues = watch(name) || [];
|
||||
return (
|
||||
<>
|
||||
<div ref={containerRef} className="multi-select-dropdown-container" style={{ position: "relative" }}>
|
||||
<label className="form-label mb-1">{label}</label>
|
||||
<Label className={name} required={required}></Label>
|
||||
<Label required={required}>{label}</Label>
|
||||
|
||||
<div
|
||||
className="multi-select-dropdown-header"
|
||||
onClick={() => setIsOpen((prev) => !prev)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
selectedValues.length > 0 ? "placeholder-style-selected" : "placeholder-style"
|
||||
}
|
||||
>
|
||||
<span className={selectedValues.length > 0 ? "placeholder-style-selected" : "placeholder-style"}>
|
||||
<div className="selected-badges-container">
|
||||
{selectedValues.length > 0 ? (
|
||||
selectedValues.map((val) => {
|
||||
|
||||
@ -2,7 +2,7 @@ import { useFormContext, useWatch } from "react-hook-form";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Label from "./Label";
|
||||
|
||||
const TagInput = ({ label, name, placeholder, color = "#e9ecef", options = [] }) => {
|
||||
const TagInput = ({ label, name, placeholder, color = "#e9ecef", options = [],require = false }) => {
|
||||
const { setValue, watch } = useFormContext();
|
||||
const tags = watch(name) || [];
|
||||
const [input, setInput] = useState("");
|
||||
@ -65,9 +65,9 @@ const handleChange = (e) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<label htmlFor={name} className="form-label">
|
||||
<Label required={require}>
|
||||
{label}
|
||||
</label>
|
||||
</Label>
|
||||
|
||||
<div
|
||||
className="form-control form-control-sm p-1"
|
||||
|
||||
@ -155,32 +155,32 @@ export const useDashboard_Data = ({ days, FromDate, projectId }) => {
|
||||
// };
|
||||
|
||||
|
||||
export const useAttendanceOverviewData = (projectId, days) => {
|
||||
const [attendanceOverviewData, setAttendanceOverviewData] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
// export const useAttendanceOverviewData = (projectId, days) => {
|
||||
// const [attendanceOverviewData, setAttendanceOverviewData] = useState([]);
|
||||
// const [loading, setLoading] = useState(false);
|
||||
// const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!projectId || !days) return;
|
||||
const fetchAttendanceOverview = async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
// useEffect(() => {
|
||||
// if (!projectId || !days) return;
|
||||
// const fetchAttendanceOverview = async () => {
|
||||
// setLoading(true);
|
||||
// setError("");
|
||||
|
||||
try {
|
||||
const response = await GlobalRepository.getAttendanceOverview(projectId, days);
|
||||
setAttendanceOverviewData(response.data);
|
||||
} catch (err) {
|
||||
setError("Failed to fetch attendance overview data.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
// try {
|
||||
// const response = await GlobalRepository.getAttendanceOverview(projectId, days);
|
||||
// setAttendanceOverviewData(response.data);
|
||||
// } catch (err) {
|
||||
// setError("Failed to fetch attendance overview data.");
|
||||
// } finally {
|
||||
// setLoading(false);
|
||||
// }
|
||||
// };
|
||||
|
||||
fetchAttendanceOverview();
|
||||
}, [projectId, days]);
|
||||
// fetchAttendanceOverview();
|
||||
// }, [projectId, days]);
|
||||
|
||||
return { attendanceOverviewData, loading, error };
|
||||
};
|
||||
// return { attendanceOverviewData, loading, error };
|
||||
// };
|
||||
|
||||
|
||||
// -------------------Query----------------------------
|
||||
|
||||
@ -399,7 +399,6 @@ export const useUpdateBucket = (onSuccessCallBack) => {
|
||||
mutationFn: async ({ bucketId, BucketPayload }) =>
|
||||
await DirectoryRepository.UpdateBuckets(bucketId, BucketPayload),
|
||||
onSuccess: (_, variables) => {
|
||||
debugger;
|
||||
queryClient.invalidateQueries({ queryKey: ["bucketList"] });
|
||||
showToast("Bucket updated successfully", "success");
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
@ -464,6 +463,7 @@ export const useCreateContact = (onSuccessCallBack) => {
|
||||
await DirectoryRepository.CreateContact(contactPayload),
|
||||
onSuccess: (_, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["contacts"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["bucketList"] });
|
||||
showToast("Contact created Successfully", "success");
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
|
||||
@ -120,7 +120,7 @@ export const useUploadDocument = (onSuccessCallBack) => {
|
||||
DocumentRepository.uploadDocument(DocumentPayload),
|
||||
onSuccess: (data, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["DocumentList"] });
|
||||
|
||||
queryClient.invalidateQueries({ queryKey: ["Document"] });
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
onError: (error) => {
|
||||
@ -141,7 +141,7 @@ export const useUpdateDocument = (onSuccessCallBack) => {
|
||||
onSuccess: (data, variables) => {
|
||||
const { documentId } = variables;
|
||||
queryClient.invalidateQueries({ queryKey: ["DocumentList"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["Document", documentId] });
|
||||
queryClient.invalidateQueries({ queryKey: ["Document"] });
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
onError: (error) => {
|
||||
@ -187,6 +187,7 @@ export const useActiveInActiveDocument = ()=>{
|
||||
onSuccess: (data, variables) => {
|
||||
const {isActive} = variables;
|
||||
queryClient.invalidateQueries({ queryKey: ["DocumentList"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["Document"] });
|
||||
showToast(`Document ${isActive ? "restored":"Deleted"} successfully`,"success")
|
||||
},
|
||||
onError: (error) => {
|
||||
|
||||
@ -6,6 +6,7 @@ import { useDispatch } from "react-redux";
|
||||
import { setCurrentTenant } from "../slices/globalVariablesSlice";
|
||||
import { ITEMS_PER_PAGE } from "../utils/constants";
|
||||
import moment from "moment";
|
||||
import { queryClient } from "../layouts/AuthLayout";
|
||||
|
||||
const cleanFilter = (filter) => {
|
||||
const cleaned = { ...filter };
|
||||
@ -71,6 +72,7 @@ export const useSubscriptionPlan = (freq) => {
|
||||
// ------------Mutation---------------------
|
||||
|
||||
export const useCreateTenant = (onSuccessCallback) => {
|
||||
const clinet = queryClient()
|
||||
const dispatch = useDispatch();
|
||||
return useMutation({
|
||||
mutationFn: async (tenantPayload) => {
|
||||
@ -87,6 +89,9 @@ export const useCreateTenant = (onSuccessCallback) => {
|
||||
operationMode = 2; // tenant exists but subscription not added yet
|
||||
}
|
||||
|
||||
clinet.invalidateQueries({queryKey:["Tenants"]})
|
||||
|
||||
|
||||
dispatch(setCurrentTenant({ operationMode, data }));
|
||||
|
||||
if (onSuccessCallback) onSuccessCallback();
|
||||
|
||||
@ -86,6 +86,11 @@ const ContactsPage = ({ projectId, searchText, onExport }) => {
|
||||
<Loader />
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{data?.data?.length === 0 && (<div className="py-12 ">
|
||||
{searchText ? `No contact found for "${searchText}"`:"No contacts found" }
|
||||
</div>)}
|
||||
{data?.data?.map((contact) => (
|
||||
<div
|
||||
key={contact.id}
|
||||
|
||||
@ -44,7 +44,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
|
||||
const [searchNote, setSearchNote] = useState("");
|
||||
const [activeTab, setActiveTab] = useState("notes");
|
||||
const { setActions } = useFab();
|
||||
const [gridView, setGridView] = useState(false);
|
||||
const [gridView, setGridView] = useState(true);
|
||||
const [isOpenBucket, setOpenBucket] = useState(false);
|
||||
const [isManageContact, setManageContact] = useState({
|
||||
isOpen: false,
|
||||
@ -185,14 +185,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
|
||||
value={searchContact}
|
||||
onChange={(e) => setsearchContact(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
className={`btn btn-sm p-1 ${
|
||||
!gridView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setGridView(false)}
|
||||
>
|
||||
<i className="bx bx-list-ul"></i>
|
||||
</button>
|
||||
|
||||
|
||||
<button
|
||||
className={`btn btn-sm p-1 ${
|
||||
@ -202,6 +195,15 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
|
||||
>
|
||||
<i className="bx bx-grid-alt"></i>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn btn-sm p-1 ${
|
||||
!gridView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setGridView(false)}
|
||||
>
|
||||
<i className="bx bx-list-ul"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="form-check form-switch d-flex align-items-center">
|
||||
|
||||
@ -60,12 +60,12 @@ const NoteFilterPanel = ({ onApply, clearFilter }) => {
|
||||
<div className="d-flex justify-content-end py-3 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-label-secondary btn-xs"
|
||||
className="btn btn-label-secondary btn-sm"
|
||||
onClick={handleClose}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary btn-xs">
|
||||
<button type="submit" className="btn btn-primary btn-sm">
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -51,11 +51,7 @@ const EmployeeList = () => {
|
||||
const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
|
||||
|
||||
const { employees, loading, setLoading, error, recallEmployeeData } =
|
||||
useEmployeesAllOrByProjectId(
|
||||
showAllEmployees,
|
||||
null,
|
||||
showInactive
|
||||
);
|
||||
useEmployeesAllOrByProjectId(showAllEmployees, null, showInactive);
|
||||
|
||||
const [employeeList, setEmployeeList] = useState([]);
|
||||
const [modelConfig, setModelConfig] = useState();
|
||||
@ -204,22 +200,16 @@ const EmployeeList = () => {
|
||||
|
||||
setCurrentPage((prevPage) => (prevPage !== 1 ? 1 : prevPage));
|
||||
}
|
||||
}, [loading, employees, showAllEmployees]);
|
||||
|
||||
|
||||
}, [loading, employees, showAllEmployees]);
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
if (employees.some((item) => item.id == msg.employeeId)) {
|
||||
setEmployeeList([]);
|
||||
recallEmployeeData(
|
||||
showInactive,
|
||||
null,
|
||||
showAllEmployees
|
||||
);
|
||||
recallEmployeeData(showInactive, null, showAllEmployees);
|
||||
}
|
||||
},
|
||||
[employees, showInactive, showAllEmployees]
|
||||
[employees, showInactive, showAllEmployees]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -289,18 +279,16 @@ const EmployeeList = () => {
|
||||
|
||||
{ViewTeamMember ? (
|
||||
// <div className="row">
|
||||
<div className="card page-min-h p-1">
|
||||
<div className="card-datatable table-responsive pt-5 mx-5 py-10">
|
||||
<div
|
||||
id="DataTables_Table_0_wrapper"
|
||||
className="dataTables_wrapper dt-bootstrap5 no-footer"
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
|
||||
{/* Switches: All Employees + Inactive */}
|
||||
<div className="d-flex flex-wrap align-items-center gap-3">
|
||||
{/* All Employees Switch */}
|
||||
{/* {ViewAllEmployee && (
|
||||
<div className="card page-min-h ">
|
||||
<div
|
||||
id="DataTables_Table_0_wrapper"
|
||||
className="dataTables_wrapper dt-bootstrap5 no-footer p-1 pt-5 mx-5 py-10"
|
||||
>
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
|
||||
{/* Switches: All Employees + Inactive */}
|
||||
<div className="d-flex flex-wrap align-items-center gap-3">
|
||||
{/* All Employees Switch */}
|
||||
{/* {ViewAllEmployee && (
|
||||
<div className="form-check form-switch text-start">
|
||||
<input
|
||||
type="checkbox"
|
||||
@ -319,390 +307,380 @@ const EmployeeList = () => {
|
||||
</div>
|
||||
)} */}
|
||||
|
||||
{/* Show Inactive Employees Switch */}
|
||||
{/* {showAllEmployees && ( */}
|
||||
<div className="form-check form-switch text-start">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="inactiveEmployeesCheckbox"
|
||||
checked={showInactive}
|
||||
onChange={(e) => setShowInactive(e.target.checked)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-0"
|
||||
htmlFor="inactiveEmployeesCheckbox"
|
||||
>
|
||||
Show Inactive Employees
|
||||
</label>
|
||||
</div>
|
||||
{/* )} */}
|
||||
</div>
|
||||
|
||||
{/* Right side: Search + Export + Add Employee */}
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
|
||||
{/* Search Input - ALWAYS ENABLED */}
|
||||
<div className="dataTables_filter">
|
||||
<label className="mb-0">
|
||||
<input
|
||||
type="search"
|
||||
value={searchText}
|
||||
onChange={handleSearch}
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search Employee"
|
||||
aria-controls="DataTables_Table_0"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Export Dropdown */}
|
||||
<div className="dropdown">
|
||||
<button
|
||||
aria-label="Click me"
|
||||
className="btn btn-sm btn-label-secondary dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-export me-2 bx-sm"></i>Export
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("print")}
|
||||
>
|
||||
<i className="bx bx-printer me-1"></i> Print
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("csv")}
|
||||
>
|
||||
<i className="bx bx-file me-1"></i> CSV
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("excel")}
|
||||
>
|
||||
<i className="bx bxs-file-export me-1"></i> Excel
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("pdf")}
|
||||
>
|
||||
<i className="bx bxs-file-pdf me-1"></i> PDF
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Add Employee Button */}
|
||||
{Manage_Employee && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
type="button"
|
||||
onClick={() => handleEmployeeModel(null)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
<span className="d-none d-md-inline-block">
|
||||
Add New Employee
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
{/* Show Inactive Employees Switch */}
|
||||
{/* {showAllEmployees && ( */}
|
||||
<div className="form-check form-switch text-start">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="inactiveEmployeesCheckbox"
|
||||
checked={showInactive}
|
||||
onChange={(e) => setShowInactive(e.target.checked)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-0"
|
||||
htmlFor="inactiveEmployeesCheckbox"
|
||||
>
|
||||
Show Inactive Employees
|
||||
</label>
|
||||
</div>
|
||||
{/* )} */}
|
||||
</div>
|
||||
|
||||
<table
|
||||
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
|
||||
id="DataTables_Table_0"
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
style={{ width: "100%" }}
|
||||
ref={tableRef}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
className="sorting sorting_desc"
|
||||
tabIndex="0"
|
||||
{/* Right side: Search + Export + Add Employee */}
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
|
||||
{/* Search Input - ALWAYS ENABLED */}
|
||||
<div className="dataTables_filter">
|
||||
<label className="mb-0">
|
||||
<input
|
||||
type="search"
|
||||
value={searchText}
|
||||
onChange={handleSearch}
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search Employee"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="2"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-6">Name</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Email</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Contact</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Designation</div>
|
||||
</th>
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<th
|
||||
className="sorting d-none d-md-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Plan: activate to sort column ascending"
|
||||
>
|
||||
Joining Date
|
||||
</th>
|
||||
<th
|
||||
className="sorting"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Billing: activate to sort column ascending"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
className={`sorting_disabled ${
|
||||
!Manage_Employee && "d-none"
|
||||
}`}
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
style={{ width: "50px" }}
|
||||
aria-label="Actions"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && (
|
||||
<tr>
|
||||
<td colSpan={8}>
|
||||
<p>Loading...</p>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{/* Conditional messages for no data or no search results */}
|
||||
{!loading &&
|
||||
displayData?.length === 0 &&
|
||||
searchText &&
|
||||
!showAllEmployees ? (
|
||||
<tr>
|
||||
<td colSpan={8}>
|
||||
<small className="muted">
|
||||
'{searchText}' employee not found
|
||||
</small>{" "}
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
{!loading &&
|
||||
displayData?.length === 0 &&
|
||||
(!searchText || showAllEmployees) ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={8}
|
||||
className="border-0"
|
||||
{/* Export Dropdown */}
|
||||
<div className="dropdown">
|
||||
<button
|
||||
aria-label="Click me"
|
||||
className="btn btn-sm btn-label-secondary dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-export me-2 bx-sm"></i>Export
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("print")}
|
||||
>
|
||||
<div className="py-1">
|
||||
No Employeee Found
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
<i className="bx bx-printer me-1"></i> Print
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("csv")}
|
||||
>
|
||||
<i className="bx bx-file me-1"></i> CSV
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("excel")}
|
||||
>
|
||||
<i className="bx bxs-file-export me-1"></i> Excel
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("pdf")}
|
||||
>
|
||||
<i className="bx bxs-file-pdf me-1"></i> PDF
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Render current items */}
|
||||
{currentItems &&
|
||||
!loading &&
|
||||
currentItems.map((item) => (
|
||||
<tr className="odd" key={item.id}>
|
||||
<td className="sorting_1" colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center user-name">
|
||||
<Avatar
|
||||
firstName={item.firstName}
|
||||
lastName={item.lastName}
|
||||
></Avatar>
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
{/* Add Employee Button */}
|
||||
{Manage_Employee && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
type="button"
|
||||
onClick={() => handleEmployeeModel(null)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
<span className="d-none d-md-inline-block">
|
||||
Add New Employee
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table
|
||||
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
|
||||
id="DataTables_Table_0"
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
style={{ width: "100%" }}
|
||||
ref={tableRef}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
className="sorting sorting_desc"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="2"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-6">Name</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Email</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Contact</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Designation</div>
|
||||
</th>
|
||||
|
||||
<th
|
||||
className="sorting d-none d-md-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Plan: activate to sort column ascending"
|
||||
>
|
||||
Joining Date
|
||||
</th>
|
||||
<th
|
||||
className="sorting"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Billing: activate to sort column ascending"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
className={`sorting_disabled ${
|
||||
!Manage_Employee && "d-none"
|
||||
}`}
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
style={{ width: "50px" }}
|
||||
aria-label="Actions"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && (
|
||||
<tr>
|
||||
<td colSpan={8}>
|
||||
<p>Loading...</p>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{/* Conditional messages for no data or no search results */}
|
||||
{!loading &&
|
||||
displayData?.length === 0 &&
|
||||
searchText ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="border-0">
|
||||
<div className="py-12">
|
||||
<small className="muted">
|
||||
'{searchText}' employee not found
|
||||
</small>{" "}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
{!loading &&
|
||||
displayData?.length === 0 &&
|
||||
(!searchText ) ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="border-0">
|
||||
<div className="py-12">{showInactive ? "No In-active Employeee Found" : "No Employeee Found" }</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
|
||||
{/* Render current items */}
|
||||
{currentItems &&
|
||||
!loading &&
|
||||
currentItems.map((item) => (
|
||||
<tr className="odd" key={item.id}>
|
||||
<td className="sorting_1" colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center user-name">
|
||||
<Avatar
|
||||
firstName={item.firstName}
|
||||
lastName={item.lastName}
|
||||
></Avatar>
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
onClick={() => navigate(`/employee/${item.id}`)}
|
||||
className="text-heading text-truncate cursor-pointer"
|
||||
>
|
||||
<span className="fw-normal">
|
||||
{item.firstName} {item.middleName}{" "}
|
||||
{item.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-start d-none d-sm-table-cell">
|
||||
{item.email ? (
|
||||
<span className="text-truncate">
|
||||
<i className="bx bxs-envelope text-primary me-2"></i>
|
||||
{item.email}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-truncate text-italic">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start d-none d-sm-table-cell">
|
||||
<span className="text-truncate">
|
||||
<i className="bx bxs-phone-call text-primary me-2"></i>
|
||||
{item.phoneNumber}
|
||||
</span>
|
||||
</td>
|
||||
<td className=" d-none d-sm-table-cell text-start">
|
||||
<span className="text-truncate">
|
||||
<i className="bx bxs-wrench text-success me-2"></i>
|
||||
{item.jobRole || "Not Assign Yet"}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td className=" d-none d-md-table-cell">
|
||||
{moment(item.joiningDate)?.format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
<td>
|
||||
{showInactive ? (
|
||||
<span
|
||||
className="badge bg-label-danger"
|
||||
text-capitalized=""
|
||||
>
|
||||
Inactive
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className="badge bg-label-success"
|
||||
text-capitalized=""
|
||||
>
|
||||
Active
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
{Manage_Employee && (
|
||||
<td className="text-end">
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn btn-icon dropdown-toggle hide-arrow"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded bx-md"></i>
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-end">
|
||||
{/* View always visible */}
|
||||
<button
|
||||
onClick={() =>
|
||||
navigate(`/employee/${item.id}`)
|
||||
}
|
||||
className="text-heading text-truncate cursor-pointer"
|
||||
className="dropdown-item py-1"
|
||||
>
|
||||
<span className="fw-normal">
|
||||
{item.firstName} {item.middleName}{" "}
|
||||
{item.lastName}
|
||||
</span>
|
||||
</a>
|
||||
<i className="bx bx-detail bx-sm"></i> View
|
||||
</button>
|
||||
|
||||
{/* If ACTIVE employee */}
|
||||
{item.isActive && (
|
||||
<>
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() =>
|
||||
handleEmployeeModel(item.id)
|
||||
}
|
||||
>
|
||||
<i className="bx bx-edit bx-sm"></i> Edit
|
||||
</button>
|
||||
|
||||
{/* Suspend only when active */}
|
||||
{item.isActive && (
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() => handleOpenDelete(item)}
|
||||
>
|
||||
<i className="bx bx-task-x bx-sm"></i>{" "}
|
||||
Suspend
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
type="button"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#managerole-modal"
|
||||
onClick={() =>
|
||||
setEmpForManageRole(item.id)
|
||||
}
|
||||
>
|
||||
<i className="bx bx-cog bx-sm"></i> Manage
|
||||
Role
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* If INACTIVE employee AND inactive toggle is ON */}
|
||||
{!item.isActive && showInactive && (
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() => handleOpenDelete(item)}
|
||||
>
|
||||
<i className="bx bx-refresh bx-sm me-1"></i>{" "}
|
||||
Re-activate
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-start d-none d-sm-table-cell">
|
||||
{item.email ? (
|
||||
<span className="text-truncate">
|
||||
<i className="bx bxs-envelope text-primary me-2"></i>
|
||||
{item.email}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-truncate text-italic">
|
||||
-
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start d-none d-sm-table-cell">
|
||||
<span className="text-truncate">
|
||||
<i className="bx bxs-phone-call text-primary me-2"></i>
|
||||
{item.phoneNumber}
|
||||
</span>
|
||||
</td>
|
||||
<td className=" d-none d-sm-table-cell text-start">
|
||||
<span className="text-truncate">
|
||||
<i className="bx bxs-wrench text-success me-2"></i>
|
||||
{item.jobRole || "Not Assign Yet"}
|
||||
</span>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<td className=" d-none d-md-table-cell">
|
||||
{moment(item.joiningDate)?.format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
<td>
|
||||
{showInactive ? (
|
||||
<span
|
||||
className="badge bg-label-danger"
|
||||
text-capitalized=""
|
||||
>
|
||||
Inactive
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className="badge bg-label-success"
|
||||
text-capitalized=""
|
||||
>
|
||||
Active
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
{Manage_Employee && (
|
||||
<td className="text-end">
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn btn-icon dropdown-toggle hide-arrow"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded bx-md"></i>
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-end">
|
||||
{/* View always visible */}
|
||||
<button
|
||||
onClick={() =>
|
||||
navigate(`/employee/${item.id}`)
|
||||
}
|
||||
className="dropdown-item py-1"
|
||||
>
|
||||
<i className="bx bx-detail bx-sm"></i> View
|
||||
</button>
|
||||
|
||||
{/* If ACTIVE employee */}
|
||||
{item.isActive && (
|
||||
<>
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() =>
|
||||
handleEmployeeModel(item.id)
|
||||
}
|
||||
>
|
||||
<i className="bx bx-edit bx-sm"></i>{" "}
|
||||
Edit
|
||||
</button>
|
||||
|
||||
{/* Suspend only when active */}
|
||||
{item.isActive && (
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() => handleOpenDelete(item)}
|
||||
>
|
||||
<i className="bx bx-task-x bx-sm"></i>{" "}
|
||||
Suspend
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
type="button"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#managerole-modal"
|
||||
onClick={() =>
|
||||
setEmpForManageRole(item.id)
|
||||
}
|
||||
>
|
||||
<i className="bx bx-cog bx-sm"></i>{" "}
|
||||
Manage Role
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* If INACTIVE employee AND inactive toggle is ON */}
|
||||
{!item.isActive && showInactive && (
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() => handleOpenDelete(item)}
|
||||
>
|
||||
<i className="bx bx-refresh bx-sm me-1"></i>{" "}
|
||||
Re-activate
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{displayData.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{displayData.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@ -161,8 +161,8 @@ const MasterPage = () => {
|
||||
data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]}
|
||||
/>
|
||||
|
||||
<div className="row">
|
||||
<div className="card">
|
||||
|
||||
<div className="card page-min-h">
|
||||
<div
|
||||
className="card-datatable table-responsive py-10 mx-5 "
|
||||
style={{ overflow: "hidden" }}
|
||||
@ -221,7 +221,6 @@ const MasterPage = () => {
|
||||
handleModalData={handleModalData}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MasterContext.Provider>
|
||||
|
||||
@ -109,11 +109,11 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
|
||||
{currentItems.length > 0 ? (
|
||||
currentItems.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td style={{ width: "20px" }}>
|
||||
<i className="bx bx-right-arrow-alt"></i>
|
||||
<td style={{ width: "20px", }} className="py-5">
|
||||
<div className="py-2 px-3"><i className="bx bx-right-arrow-alt"></i></div>
|
||||
</td>
|
||||
{updatedColumns.map((col) => (
|
||||
<td className="text-start mx-2" key={col.key}>
|
||||
<td className="text-start mx-2 p-3" key={col.key} style={{ padding: "12px 16px" }} >
|
||||
{col.key === "description" ? (
|
||||
item[col.key] !== undefined &&
|
||||
item[col.key] !== null ? (
|
||||
|
||||
@ -22,7 +22,7 @@ export function startSignalR(loggedUser) {
|
||||
accessTokenFactory: () => jwtToken,
|
||||
transport: signalR.HttpTransportType.LongPolling,
|
||||
withCredentials: false,
|
||||
})
|
||||
})
|
||||
.withAutomaticReconnect()
|
||||
.build();
|
||||
const todayDate = new Date();
|
||||
@ -32,100 +32,104 @@ export function startSignalR(loggedUser) {
|
||||
.toISOString()
|
||||
.split("T")[0];
|
||||
connection.on("NotificationEventHandler", (data) => {
|
||||
if (data.loggedInUserId != loggedUser?.employeeInfo.id) {
|
||||
// console.log("Notification received:", data);
|
||||
// if action taken on attendance module
|
||||
if (data.keyword == "Attendance") {
|
||||
const checkIn = data.response.checkInTime.substring(0, 10);
|
||||
if (today === checkIn) {
|
||||
eventBus.emit("attendance", data);
|
||||
}
|
||||
var onlyDate = Number(checkIn.substring(8, 10));
|
||||
const { loggedInUserId, keyword, response, employeeList, numberOfImages } = data;
|
||||
const loggedInId = loggedUser?.employeeInfo?.id;
|
||||
|
||||
var afterTwoDay =
|
||||
checkIn.substring(0, 8) + (onlyDate + 2).toString().padStart(2, "0");
|
||||
if (
|
||||
afterTwoDay <= today &&
|
||||
(data.response.activity == 4 || data.response.activity == 5)
|
||||
) {
|
||||
eventBus.emit("regularization", data);
|
||||
}
|
||||
eventBus.emit("attendance_log", data);
|
||||
}
|
||||
if(data.keyword == "Expanse"){
|
||||
queryClient.invalidateQueries({queryKey:["Expenses"]})
|
||||
}
|
||||
// if create or update project
|
||||
if (
|
||||
data.keyword == "Create_Project" ||
|
||||
data.keyword == "Update_Project"
|
||||
) {
|
||||
// clearCacheKey("projectslist");
|
||||
queryClient.invalidateQueries(['projectslist']);
|
||||
eventBus.emit("project", data);
|
||||
}
|
||||
if (loggedInUserId === loggedInId) return;
|
||||
|
||||
// if assign or deassign employee to any project
|
||||
if (data.keyword == "Assign_Project") {
|
||||
if (
|
||||
data.employeeList.some((item) => item === loggedUser?.employeeInfo.id)
|
||||
) {
|
||||
try {
|
||||
cacheData("hasReceived", false);
|
||||
eventBus.emit("assign_project_one", data);
|
||||
} catch (e) {
|
||||
// console.error("Error in cacheData:", e);
|
||||
}
|
||||
}
|
||||
eventBus.emit("assign_project_all", data);
|
||||
}
|
||||
// if created or updated infra
|
||||
if (data.keyword == "Infra") {
|
||||
queryClient.removeQueries({queryKey:["ProjectInfra"]})
|
||||
// eventBus.emit("infra", data);
|
||||
}
|
||||
if (data.keyword == "Task_Report") {
|
||||
queryClient.removeQueries({queryKey:["Infra"]})
|
||||
// eventBus.emit("infra", data);
|
||||
}
|
||||
|
||||
if ( data.keyword == "WorkItem" )
|
||||
{
|
||||
queryClient.removeQueries({queryKey:["WorkItems"]})
|
||||
}
|
||||
|
||||
// if created or updated Employee
|
||||
if (data.keyword == "Employee") {
|
||||
// clearCacheKey("employeeListByProject");
|
||||
// clearCacheKey("allEmployeeList");
|
||||
// clearCacheKey("allInactiveEmployeeList");
|
||||
// clearCacheKey("employeeProfile");
|
||||
clearCacheKey("Attendance");
|
||||
clearCacheKey("regularizedList")
|
||||
clearCacheKey("AttendanceLogs")
|
||||
|
||||
// ---we can do also----
|
||||
// queryClient.removeQueries(['allEmployee', true]);
|
||||
// but best practies is refetch
|
||||
queryClient.invalidateQueries(['allEmployee', true]);
|
||||
queryClient.invalidateQueries(['allEmployee', false]);
|
||||
queryClient.invalidateQueries(['employeeProfile', data.response?.employeeId]);
|
||||
queryClient.invalidateQueries(['employeeListByProject']); // optional if scope
|
||||
eventBus.emit("employee", data);
|
||||
}
|
||||
|
||||
if (data.keyword == "Task_Report") {
|
||||
if(data.numberOfImages > 0){
|
||||
eventBus.emit("image_gallery", data);
|
||||
}
|
||||
}
|
||||
if (data.keyword == "Task_Comment") {
|
||||
if(data.numberOfImages > 0){
|
||||
eventBus.emit("image_gallery", data);
|
||||
}
|
||||
}
|
||||
// ---- Handlers for invalidate or remove ----
|
||||
const queryInvalidators = {
|
||||
Expanse: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["Expenses"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["Expense"] })
|
||||
},
|
||||
Create_Project: () => queryClient.invalidateQueries(["projectslist"]),
|
||||
Update_Project: () => queryClient.invalidateQueries(["projectslist"]),
|
||||
Infra: () => queryClient.removeQueries({ queryKey: ["ProjectInfra"] }),
|
||||
Task_Report: () => queryClient.invalidateQueries({ queryKey: ["Infra"] }),
|
||||
WorkItem: () => queryClient.invalidateQueries({ queryKey: ["WorkItems"] }),
|
||||
Directory_Notes:()=>{
|
||||
queryClient.invalidateQueries({queryKey:["directoryNotes"]})
|
||||
queryClient.invalidateQueries({queryKey:["Notes"]})
|
||||
},
|
||||
Directory_Buckets:()=>{
|
||||
queryClient.invalidateQueries({queryKey:["bucketList"]})
|
||||
},
|
||||
Directory:()=>{
|
||||
queryClient.invalidateQueries({queryKey:["contacts"]})
|
||||
queryClient.invalidateQueries({queryKey:["Contact"]})
|
||||
queryClient.invalidateQueries({queryKey:["ContactProfile"]})
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
// ---- Keyword based event emitters ----
|
||||
const emitters = {
|
||||
employee: () => eventBus.emit("employee", data),
|
||||
project: () => eventBus.emit("project", data),
|
||||
infra: () => eventBus.emit("infra", data),
|
||||
assign_project_all: () => eventBus.emit("assign_project_all", data),
|
||||
image_gallery: () => eventBus.emit("image_gallery", data),
|
||||
};
|
||||
|
||||
// ---- Handle Attendance ----
|
||||
if (keyword === "Attendance") {
|
||||
const checkIn = response.checkInTime.substring(0, 10);
|
||||
if (today === checkIn) eventBus.emit("attendance", data);
|
||||
|
||||
const onlyDate = Number(checkIn.substring(8, 10));
|
||||
const afterTwoDay =
|
||||
checkIn.substring(0, 8) + (onlyDate + 2).toString().padStart(2, "0");
|
||||
|
||||
if (
|
||||
afterTwoDay <= today &&
|
||||
(response.activity === 4 || response.activity === 5)
|
||||
) {
|
||||
eventBus.emit("regularization", data);
|
||||
}
|
||||
eventBus.emit("attendance_log", data);
|
||||
}
|
||||
|
||||
// ---- Invalidate/Remove cache by keywords ----
|
||||
if (queryInvalidators[keyword]) {
|
||||
queryInvalidators[keyword]();
|
||||
}
|
||||
|
||||
// ---- Project creation/update ----
|
||||
if (keyword === "Create_Project" || keyword === "Update_Project") {
|
||||
emitters.project();
|
||||
}
|
||||
|
||||
// ---- Assign/deassign project ----
|
||||
if (keyword === "Assign_Project") {
|
||||
if (employeeList?.includes(loggedInId)) {
|
||||
try {
|
||||
cacheData("hasReceived", false);
|
||||
eventBus.emit("assign_project_one", data);
|
||||
} catch {}
|
||||
}
|
||||
emitters.assign_project_all();
|
||||
}
|
||||
|
||||
// ---- Employee update ----
|
||||
if (keyword === "Employee") {
|
||||
clearCacheKey("Attendance");
|
||||
clearCacheKey("regularizedList");
|
||||
clearCacheKey("AttendanceLogs");
|
||||
|
||||
queryClient.invalidateQueries(["allEmployee", true]);
|
||||
queryClient.invalidateQueries(["allEmployee", false]);
|
||||
queryClient.invalidateQueries(["employeeProfile", response?.employeeId]);
|
||||
queryClient.invalidateQueries(["employeeListByProject"]);
|
||||
|
||||
emitters.employee();
|
||||
}
|
||||
|
||||
// ---- Image related events ----
|
||||
if (["Task_Report", "Task_Comment"].includes(keyword) && numberOfImages > 0) {
|
||||
emitters.image_gallery();
|
||||
}
|
||||
});
|
||||
|
||||
connection
|
||||
.start();
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { format, parseISO } from "date-fns";
|
||||
import { parseISO, formatISO } from "date-fns";
|
||||
export const formatFileSize = (bytes) => {
|
||||
if (bytes < 1024) return bytes + " B";
|
||||
else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + " KB";
|
||||
@ -72,12 +72,11 @@ export const normalizeAllowedContentTypes = (allowedContentType) => {
|
||||
export function localToUtc(localDateString) {
|
||||
if (!localDateString || typeof localDateString !== "string") return null;
|
||||
|
||||
|
||||
const [year, month, day] = localDateString.trim().split("-");
|
||||
|
||||
if (!year || !month || !day) return null;
|
||||
|
||||
|
||||
const date = new Date(Number(year), Number(month) - 1, Number(day), 0, 0, 0);
|
||||
const date = new Date(Date.UTC(Number(year), Number(month) - 1, Number(day), 0, 0, 0));
|
||||
|
||||
return isNaN(date.getTime()) ? null : date.toISOString();
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,8 @@
|
||||
export const BASE_URL = process.env.VITE_BASE_URL;
|
||||
|
||||
// export const BASE_URL = "https://api.marcoaiot.com";
|
||||
|
||||
|
||||
export const THRESH_HOLD = 48; // hours
|
||||
export const DURATION_TIME = 10; // minutes
|
||||
export const ITEMS_PER_PAGE = 20;
|
||||
@ -140,8 +145,17 @@ export const PROJECT_STATUS = [
|
||||
label: "Completed",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export const UUID_REGEX =
|
||||
/^\/employee\/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
|
||||
|
||||
export const ALLOW_PROJECTSTATUS_ID = [
|
||||
"603e994b-a27f-4e5d-a251-f3d69b0498ba",
|
||||
"cdad86aa-8a56-4ff4-b633-9c629057dfef",
|
||||
"b74da4c2-d07e-46f2-9919-e75e49b12731",
|
||||
];
|
||||
|
||||
export const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
||||
|
||||
export const BASE_URL = process.env.VITE_BASE_URL;
|
||||
|
||||
// export const BASE_URL = "https://api.marcoaiot.com";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user