Merge branch 'main' of https://git.marcoaiot.com/admin/marco.pms.web into Feature_Directory
This commit is contained in:
Pramod Mahajan
commit
ad145db3c7
@ -10,6 +10,7 @@ import {ITEMS_PER_PAGE} from "../../utils/constants";
|
||||
const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const [todayDate, setTodayDate] = useState(new Date());
|
||||
|
||||
// Ensure attendance is an array
|
||||
const attendanceList = Array.isArray(attendance) ? attendance : [];
|
||||
@ -42,6 +43,13 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
<>
|
||||
<table className="table ">
|
||||
<thead>
|
||||
<tr className="border-top-0" style={{ textAlign: 'left' }}>
|
||||
<td >
|
||||
<strong>Date : {todayDate.toLocaleDateString('en-GB')}</strong>
|
||||
</td>
|
||||
<td style={{ paddingLeft: '20px' }}>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="border-top-0" colSpan={2}>
|
||||
Name
|
||||
@ -127,8 +135,7 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === 1 ? "disabled" : ""
|
||||
className={`page-item ${currentPage === 1 ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
@ -141,8 +148,7 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
className={`page-item ${currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
@ -154,8 +160,7 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState, useMemo, useCallback } from "react";
|
||||
import moment from "moment";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { convertShortTime } from "../../utils/dateUtils";
|
||||
@ -7,20 +7,35 @@ import { useSelector, useDispatch } from "react-redux";
|
||||
import { fetchAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
|
||||
import DateRangePicker from "../common/DateRangePicker";
|
||||
import { getCachedData } from "../../slices/apiDataManager";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import {ITEMS_PER_PAGE} from "../../utils/constants";
|
||||
|
||||
const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
const [attendances, setAttendnaces] = useState([]);
|
||||
const [selectedDate, setSelectedDate] = useState("");
|
||||
const usePagination = (data, itemsPerPage) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const maxPage = Math.ceil(data.length / itemsPerPage);
|
||||
|
||||
const currentItems = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
return data.slice(startIndex, endIndex);
|
||||
}, [data, currentPage, itemsPerPage]);
|
||||
|
||||
const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
|
||||
const resetPage = useCallback(() => setCurrentPage(1), []);
|
||||
|
||||
return { currentPage, totalPages: maxPage, currentItems, paginate, resetPage };
|
||||
};
|
||||
|
||||
const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
|
||||
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||
const dispatch = useDispatch();
|
||||
const { data, loading, error } = useSelector((store) => store.attendanceLogs);
|
||||
const [isRefreshing, setIsRefreshing] = useState(true);
|
||||
const [dates, setDates] = useState([]);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [processedData, setProcessedData] = useState([]);
|
||||
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0); // Strip time to compare dates only
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
|
||||
const isSameDay = (dateStr) => {
|
||||
if (!dateStr) return false;
|
||||
@ -42,41 +57,8 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
return nameA.localeCompare(nameB);
|
||||
};
|
||||
|
||||
const group1 = data
|
||||
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group2 = data
|
||||
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group3 = data
|
||||
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group4 = data
|
||||
.filter( ( d ) => d.activity === 4 && isBeforeToday( d.checkOutTime ) )
|
||||
|
||||
const group5 = data
|
||||
.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group6 = data.filter((d) => d.activity === 5).sort(sortByName);
|
||||
|
||||
const sortedFinalList = [
|
||||
...group1,
|
||||
...group2,
|
||||
...group3,
|
||||
...group4,
|
||||
...group5,
|
||||
...group6,
|
||||
];
|
||||
|
||||
const currentDate = new Date().toLocaleDateString("en-CA");
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
sortedFinalList,
|
||||
ITEMS_PER_PAGE
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const { startDate, endDate } = dateRange;
|
||||
if (startDate && endDate) {
|
||||
dispatch(
|
||||
fetchAttendanceData({
|
||||
projectId,
|
||||
@ -84,17 +66,59 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
toDate: endDate,
|
||||
})
|
||||
);
|
||||
}
|
||||
}, [dateRange, projectId, isRefreshing]);
|
||||
setIsRefreshing(false);
|
||||
}, [dateRange, projectId, dispatch, isRefreshing]);
|
||||
|
||||
useEffect(() => {
|
||||
const attendanceDate = [
|
||||
...new Set(sortedFinalList.map((item) => item.checkInTime.split("T")[0])),
|
||||
].sort((a, b) => new Date(b) - new Date(a));
|
||||
if (attendanceDate != dates) {
|
||||
setDates(attendanceDate);
|
||||
const filteredData = showOnlyCheckout
|
||||
? data.filter((item) => item.checkOutTime === null)
|
||||
: data;
|
||||
|
||||
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];
|
||||
|
||||
// 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);
|
||||
}
|
||||
}, [data]);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// Sort dates in descending order
|
||||
const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
|
||||
|
||||
// Create the final sorted array
|
||||
const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
|
||||
setProcessedData(finalData);
|
||||
}, [data, showOnlyCheckout]);
|
||||
|
||||
const { currentPage, totalPages, currentItems: paginatedAttendances, paginate, resetPage } = usePagination(
|
||||
processedData,
|
||||
10
|
||||
);
|
||||
|
||||
// Reset to the first page whenever processedData changes (due to switch on/off)
|
||||
useEffect(() => {
|
||||
resetPage();
|
||||
}, [processedData, resetPage]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -103,15 +127,14 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<div className="col-md-3 my-0 ">
|
||||
<DateRangePicker onRangeChange={setDateRange} />
|
||||
<DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday} />
|
||||
</div>
|
||||
<div className="col-md-2 m-0 text-end">
|
||||
<i
|
||||
className={`bx bx-refresh cursor-pointer fs-4 ${
|
||||
loading ? "spin" : ""
|
||||
className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
|
||||
}`}
|
||||
title="Refresh"
|
||||
onClick={() => setIsRefreshing(!isRefreshing)}
|
||||
onClick={() => setIsRefreshing(true)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -125,8 +148,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
</th>
|
||||
<th className="border-top-1">Date</th>
|
||||
<th>
|
||||
<i className="bx bxs-down-arrow-alt text-success"></i>{" "}
|
||||
Check-In
|
||||
<i className="bx bxs-down-arrow-alt text-success"></i> Check-In
|
||||
</th>
|
||||
<th>
|
||||
<i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
|
||||
@ -135,22 +157,26 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && <td colSpan={5}>Loading...</td>}
|
||||
{dates.map((date, i) => {
|
||||
return (
|
||||
<React.Fragment key={i}>
|
||||
{currentItems.some(
|
||||
(item) => item.checkInTime.split("T")[0] === date
|
||||
) && (
|
||||
<tr className="table-row-header">
|
||||
<td colSpan={7} className="text-start">
|
||||
<strong>{date}</strong>
|
||||
</td>
|
||||
{(loading || isRefreshing) && (
|
||||
<tr>
|
||||
<td colSpan={6}>Loading...</td>
|
||||
</tr>
|
||||
)}
|
||||
{currentItems
|
||||
?.filter((item) => item.checkInTime.includes(date))
|
||||
.map((attendance, index) => (
|
||||
{!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
|
||||
const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
|
||||
const previousAttendance = arr[index - 1];
|
||||
const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
|
||||
|
||||
if (!previousDate || currentDate !== previousDate) {
|
||||
acc.push(
|
||||
<tr key={`header-${currentDate}`} className="table-row-header">
|
||||
<td colSpan={6} className="text-start">
|
||||
<strong>{moment(currentDate).format("YYYY-MM-DD")}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
acc.push(
|
||||
<tr key={index}>
|
||||
<td colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
@ -171,71 +197,56 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{" "}
|
||||
{moment(attendance.checkInTime).format(
|
||||
"DD-MMM-YYYY"
|
||||
)}
|
||||
{moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
<td>{convertShortTime(attendance.checkInTime)}</td>
|
||||
<td>
|
||||
{attendance.checkOutTime
|
||||
? convertShortTime(attendance.checkOutTime)
|
||||
: "--"}
|
||||
{attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<RenderAttendanceStatus
|
||||
attendanceData={attendance}
|
||||
handleModalData={handleModalData}
|
||||
Tab={2}
|
||||
currentDate={currentDate}
|
||||
currentDate={today.toLocaleDateString("en-CA")}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
return acc;
|
||||
}, [])}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
{!loading && data.length === 0 && <span>No employee logs</span>}
|
||||
{error && <td colSpan={5}>{error}</td>}
|
||||
{!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
|
||||
{error && !loading && !isRefreshing && (
|
||||
<tr>
|
||||
<td colSpan={6}>{error}</td>
|
||||
</tr>
|
||||
)}
|
||||
</div>
|
||||
{!loading && (
|
||||
{!loading && !isRefreshing && processedData.length > 10 && (
|
||||
<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 className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNumber) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
key={pageNumber}
|
||||
className={`page-item ${currentPage === pageNumber ? "active" : ""}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(index + 1)}
|
||||
>
|
||||
{index + 1}
|
||||
<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)}
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}
|
||||
>
|
||||
<button className="page-link" onClick={() => paginate(currentPage + 1)}>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
|
||||
@ -21,6 +21,15 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const coords = usePositionTracker();
|
||||
const dispatch = useDispatch()
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) {
|
||||
return '';
|
||||
}
|
||||
const [year, month, day] = dateString.split('-');
|
||||
return `${day}-${month}-${year}`;
|
||||
};
|
||||
|
||||
const {
|
||||
register,
|
||||
@ -33,25 +42,21 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
|
||||
mode: "onChange"
|
||||
});
|
||||
|
||||
const onSubmit = ( data ) =>
|
||||
{
|
||||
const onSubmit = (data) => {
|
||||
let record = { ...data, date: new Date().toLocaleDateString(), latitude: coords.latitude, longitude: coords.longitude, employeeId: modeldata.employeeId, action: modeldata.action, id: modeldata?.id || null }
|
||||
if (modeldata.forWhichTab === 1) {
|
||||
handleSubmitForm(record)
|
||||
} else
|
||||
{
|
||||
} else {
|
||||
|
||||
// if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) )
|
||||
// {
|
||||
dispatch(markAttendance(record))
|
||||
.unwrap()
|
||||
.then( ( data ) =>
|
||||
{
|
||||
.then((data) => {
|
||||
|
||||
showToast("Attendance Marked Successfully", "success");
|
||||
})
|
||||
.catch( ( error ) =>
|
||||
{
|
||||
.catch((error) => {
|
||||
|
||||
showToast(error, "error");
|
||||
|
||||
@ -72,6 +77,29 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="fs-5 text-dark text-center d-flex align-items-center flex-wrap">
|
||||
{modeldata?.checkInTime && !modeldata?.checkOutTime ? 'Check-out :' : 'Check-in :'}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="col-6 col-md-6 ">
|
||||
<label className="form-label" htmlFor="checkInDate">
|
||||
{modeldata?.checkInTime && !modeldata?.checkOutTime ? 'Check-out Date' : 'Check-in Date'}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="checkInDate"
|
||||
className="form-control"
|
||||
value={
|
||||
modeldata?.checkInTime && !modeldata?.checkOutTime
|
||||
? formatDate(modeldata?.checkInTime?.split('T')[0]) || ''
|
||||
: formatDate(today)
|
||||
}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-6 col-md-6">
|
||||
<TimePicker
|
||||
label="Choose a time"
|
||||
onChange={(e) => setValue("markTime", e)}
|
||||
@ -82,7 +110,6 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
|
||||
{errors.markTime && <p className="text-danger">{errors.markTime.message}</p>}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label" htmlFor="description">
|
||||
Description
|
||||
@ -147,8 +174,7 @@ export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
|
||||
};
|
||||
|
||||
|
||||
const onSubmit = ( data ) =>
|
||||
{
|
||||
const onSubmit = (data) => {
|
||||
|
||||
let record = { ...data, date: new Date().toLocaleDateString(), latitude: coords.latitude, longitude: coords.longitude, }
|
||||
handleSubmitForm(record)
|
||||
|
||||
@ -1,267 +1,46 @@
|
||||
import React, { useState } from "react";
|
||||
import HorizontalBarChart from "../Charts/HorizontalBarChart";
|
||||
import LineChart from "../Charts/LineChart";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import React from "react";
|
||||
import {
|
||||
useDashboard_Data,
|
||||
useDashboardProjectsCardData,
|
||||
useDashboardTeamsCardData,
|
||||
useDashboardTasksCardData,
|
||||
} from "../../hooks/useDashboard_Data";
|
||||
import Projects from "./Projects";
|
||||
import Teams from "./Teams";
|
||||
import TasksCard from "./Tasks";
|
||||
import ProjectCompletionChart from "./ProjectCompletionChart";
|
||||
import ProjectProgressChart from "./ProjectProgressChart";
|
||||
|
||||
const Dashboard = () => {
|
||||
const { projects, loading } = useProjects();
|
||||
const [selectedProjectId, setSelectedProjectId] = useState("all");
|
||||
const [range, setRange] = useState("1W");
|
||||
|
||||
const getDaysFromRange = (range) => {
|
||||
switch (range) {
|
||||
case "1D":
|
||||
return 1;
|
||||
case "1W":
|
||||
return 7;
|
||||
case "15D":
|
||||
return 15;
|
||||
case "1M":
|
||||
return 30;
|
||||
case "3M":
|
||||
return 90;
|
||||
case "1Y":
|
||||
return 365;
|
||||
case "5Y":
|
||||
return 1825;
|
||||
default:
|
||||
return 7;
|
||||
}
|
||||
};
|
||||
|
||||
const days = getDaysFromRange(range);
|
||||
const today = new Date();
|
||||
// const FromDate = today.toISOString().split("T")[0];
|
||||
const FromDate = today.toLocaleDateString('en-CA'); // Always today
|
||||
|
||||
const { projectsCardData } = useDashboardProjectsCardData();
|
||||
const { teamsCardData } = useDashboardTeamsCardData();
|
||||
const { tasksCardData } = useDashboardTasksCardData();
|
||||
|
||||
const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
|
||||
days,
|
||||
FromDate,
|
||||
projectId: selectedProjectId === "all" ? null : selectedProjectId,
|
||||
});
|
||||
|
||||
// Sort dashboard_data by date ascending
|
||||
const sortedDashboardData = [...dashboard_data].sort(
|
||||
(a, b) => new Date(a.date) - new Date(b.date)
|
||||
);
|
||||
|
||||
// Bar chart logic
|
||||
const projectNames = projects?.map((p) => p.name) || [];
|
||||
const projectProgress =
|
||||
projects?.map((p) => {
|
||||
const completed = p.completedWork || 0;
|
||||
const planned = p.plannedWork || 1;
|
||||
const percent = (completed / planned) * 100;
|
||||
return Math.min(Math.round(percent), 100);
|
||||
}) || [];
|
||||
|
||||
// Line chart data
|
||||
const lineChartSeries = [
|
||||
{
|
||||
name: "Planned Work",
|
||||
data: sortedDashboardData.map((d) => d.plannedTask || 0),
|
||||
},
|
||||
{
|
||||
name: "Completed Work",
|
||||
data: sortedDashboardData.map((d) => d.completedTask || 0),
|
||||
},
|
||||
];
|
||||
|
||||
const lineChartCategories = sortedDashboardData.map((d) =>
|
||||
new Date(d.date).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})
|
||||
);
|
||||
const lineChartCategoriesDates = sortedDashboardData.map((d) =>
|
||||
new Date(d.date).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
})
|
||||
);
|
||||
return (
|
||||
<div className="container-xxl flex-grow-1 container-p-y">
|
||||
<div className="row gy-4">
|
||||
{/* Projects Card */}
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
||||
<div className="d-flex justify-content-start align-items-center mb-3">
|
||||
<h5 className="fw-bold mb-0 ms-2">
|
||||
<i className="rounded-circle bx bx-building-house text-primary"></i>{" "}
|
||||
Projects
|
||||
</h5>
|
||||
</div>
|
||||
<div className="d-flex justify-content-around align-items-start mt-n2">
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{projectsCardData.totalProjects?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted">Total</small>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{projectsCardData.ongoingProjects?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted">Ongoing</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Projects projectsCardData={projectsCardData} />
|
||||
</div>
|
||||
|
||||
{/* Teams Card */}
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
||||
<div className="d-flex justify-content-start align-items-center mb-3">
|
||||
<h5 className="fw-bold mb-0 ms-2">
|
||||
<i className="bx bx-group text-warning"></i> Teams
|
||||
</h5>
|
||||
</div>
|
||||
<div className="d-flex justify-content-around align-items-start mt-n2">
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{teamsCardData.totalEmployees?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted">Total Employees</small>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{teamsCardData.inToday?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted">In Today</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Teams teamsCardData={teamsCardData} />
|
||||
</div>
|
||||
|
||||
{/* Tasks Card */}
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
||||
<div className="d-flex justify-content-start align-items-center mb-3">
|
||||
<h5 className="fw-bold mb-0 ms-2">
|
||||
<i className="bx bx-task text-success"></i> Tasks
|
||||
</h5>
|
||||
</div>
|
||||
<div className="d-flex justify-content-around align-items-start mt-n2">
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{tasksCardData.totalTasks?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted">Total</small>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{tasksCardData.completedTasks?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted">Completed</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TasksCard tasksCardData={tasksCardData} />
|
||||
</div>
|
||||
|
||||
{/* Bar Chart */}
|
||||
{/* Bar Chart (Project Completion) */}
|
||||
<div className="col-xxl-6 col-lg-6">
|
||||
<div className="card h-100">
|
||||
<div className="card-header d-flex align-items-start justify-content-between">
|
||||
<div className="card-title mb-0 text-start">
|
||||
<h5 className="mb-1">Projects</h5>
|
||||
<p className="card-subtitle">Projects Completion Status</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<HorizontalBarChart
|
||||
categories={projectNames}
|
||||
seriesData={projectProgress}
|
||||
loading={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ProjectCompletionChart />
|
||||
</div>
|
||||
|
||||
{/* Line Chart */}
|
||||
{/* Line Chart (Project Progress) */}
|
||||
<div className="col-xxl-6 col-lg-6">
|
||||
<div className="card h-100">
|
||||
<div className="card-header">
|
||||
{/* Row 1: Title + Project Selector */}
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-center mb-2">
|
||||
<div className="card-title mb-0 text-start">
|
||||
<h5 className="mb-1">Project Progress</h5>
|
||||
<p className="card-subtitle">Progress Overview by Project</p>
|
||||
</div>
|
||||
|
||||
<div className="btn-group">
|
||||
<button
|
||||
className="btn btn-outline-primary btn-sm dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{selectedProjectId === "all"
|
||||
? "All Projects"
|
||||
: projects?.find((p) => p.id === selectedProjectId)
|
||||
?.name || "Select Project"}
|
||||
</button>
|
||||
|
||||
<ul className="dropdown-menu">
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() => setSelectedProjectId("all")}
|
||||
>
|
||||
All Projects
|
||||
</button>
|
||||
</li>
|
||||
{projects?.map((project) => (
|
||||
<li key={project.id}>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() => setSelectedProjectId(project.id)}
|
||||
>
|
||||
{project.name}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 2: Time Range Buttons */}
|
||||
<div className="d-flex flex-wrap mt-2">
|
||||
{["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
|
||||
<button
|
||||
key={key}
|
||||
className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
|
||||
range === key
|
||||
? " border-bottom border-primary text-primary"
|
||||
: "text-muted"
|
||||
}`}
|
||||
style={{ cursor: "pointer", transition: "all 0.2s ease" }}
|
||||
onClick={() => setRange(key)}
|
||||
>
|
||||
{key}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body ">
|
||||
<LineChart
|
||||
seriesData={lineChartSeries}
|
||||
categories={lineChartCategories}
|
||||
loading={isLineChartLoading}
|
||||
lineChartCategoriesDates={lineChartCategoriesDates}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ProjectProgressChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
37
src/components/Dashboard/ProjectCompletionChart.jsx
Normal file
37
src/components/Dashboard/ProjectCompletionChart.jsx
Normal file
@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import HorizontalBarChart from "../Charts/HorizontalBarChart";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
|
||||
const ProjectCompletionChart = () => {
|
||||
const { projects, loading } = useProjects();
|
||||
|
||||
// Bar chart logic
|
||||
const projectNames = projects?.map((p) => p.name) || [];
|
||||
const projectProgress =
|
||||
projects?.map((p) => {
|
||||
const completed = p.completedWork || 0;
|
||||
const planned = p.plannedWork || 1;
|
||||
const percent = (completed / planned) * 100;
|
||||
return Math.min(Math.round(percent), 100);
|
||||
}) || [];
|
||||
|
||||
return (
|
||||
<div className="card h-100">
|
||||
<div className="card-header d-flex align-items-start justify-content-between">
|
||||
<div className="card-title mb-0 text-start">
|
||||
<h5 className="mb-1">Projects</h5>
|
||||
<p className="card-subtitle">Projects Completion Status</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<HorizontalBarChart
|
||||
categories={projectNames}
|
||||
seriesData={projectProgress}
|
||||
loading={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectCompletionChart;
|
||||
126
src/components/Dashboard/ProjectProgressChart.jsx
Normal file
126
src/components/Dashboard/ProjectProgressChart.jsx
Normal file
@ -0,0 +1,126 @@
|
||||
import React, { useState } from "react";
|
||||
import LineChart from "../Charts/LineChart";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import { useDashboard_Data } from "../../hooks/useDashboard_Data";
|
||||
|
||||
const ProjectProgressChart = () => {
|
||||
const { projects } = useProjects();
|
||||
const [selectedProjectId, setSelectedProjectId] = useState("all");
|
||||
const [range, setRange] = useState("1W");
|
||||
|
||||
const getDaysFromRange = (range) => {
|
||||
switch (range) {
|
||||
case "1D": return 1;
|
||||
case "1W": return 7;
|
||||
case "15D": return 15;
|
||||
case "1M": return 30;
|
||||
case "3M": return 90;
|
||||
case "1Y": return 365;
|
||||
case "5Y": return 1825;
|
||||
default: return 7;
|
||||
}
|
||||
};
|
||||
|
||||
const days = getDaysFromRange(range);
|
||||
const today = new Date();
|
||||
const FromDate = today.toLocaleDateString('en-CA');
|
||||
|
||||
const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
|
||||
days,
|
||||
FromDate,
|
||||
projectId: selectedProjectId === "all" ? null : selectedProjectId,
|
||||
});
|
||||
|
||||
const sortedDashboardData = [...dashboard_data].sort(
|
||||
(a, b) => new Date(a.date) - new Date(b.date)
|
||||
);
|
||||
|
||||
const lineChartSeries = [
|
||||
{
|
||||
name: "Planned Work",
|
||||
data: sortedDashboardData.map((d) => d.plannedTask || 0),
|
||||
},
|
||||
{
|
||||
name: "Completed Work",
|
||||
data: sortedDashboardData.map((d) => d.completedTask || 0),
|
||||
},
|
||||
];
|
||||
|
||||
const lineChartCategories = sortedDashboardData.map((d) =>
|
||||
new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric" })
|
||||
);
|
||||
const lineChartCategoriesDates = sortedDashboardData.map((d) =>
|
||||
new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="card h-100">
|
||||
<div className="card-header">
|
||||
{/* Row 1: Title + Project Selector */}
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-center mb-2">
|
||||
<div className="card-title mb-0 text-start">
|
||||
<h5 className="mb-1">Project Progress</h5>
|
||||
<p className="card-subtitle">Progress Overview by Project</p>
|
||||
</div>
|
||||
|
||||
<div className="btn-group">
|
||||
<button
|
||||
className="btn btn-outline-primary btn-sm dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{selectedProjectId === "all"
|
||||
? "All Projects"
|
||||
: projects?.find((p) => p.id === selectedProjectId)?.name || "Select Project"}
|
||||
</button>
|
||||
|
||||
<ul className="dropdown-menu">
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => setSelectedProjectId("all")}>
|
||||
All Projects
|
||||
</button>
|
||||
</li>
|
||||
{projects?.map((project) => (
|
||||
<li key={project.id}>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() => setSelectedProjectId(project.id)}
|
||||
>
|
||||
{project.name}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 2: Time Range Buttons */}
|
||||
<div className="d-flex flex-wrap mt-2">
|
||||
{["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
|
||||
<button
|
||||
key={key}
|
||||
className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
|
||||
range === key ? " border-bottom border-primary text-primary" : "text-muted"
|
||||
}`}
|
||||
style={{ cursor: "pointer", transition: "all 0.2s ease" }}
|
||||
onClick={() => setRange(key)}
|
||||
>
|
||||
{key}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body ">
|
||||
<LineChart
|
||||
seriesData={lineChartSeries}
|
||||
categories={lineChartCategories}
|
||||
loading={isLineChartLoading}
|
||||
lineChartCategoriesDates={lineChartCategoriesDates}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectProgressChart;
|
||||
33
src/components/Dashboard/Projects.jsx
Normal file
33
src/components/Dashboard/Projects.jsx
Normal file
@ -0,0 +1,33 @@
|
||||
import React from "react";
|
||||
import { useDashboardProjectsCardData } from "../../hooks/useDashboard_Data";
|
||||
|
||||
const Projects = () => {
|
||||
const { projectsCardData } = useDashboardProjectsCardData();
|
||||
|
||||
return (
|
||||
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
||||
<div className="d-flex justify-content-start align-items-center mb-3">
|
||||
<h5 className="fw-bold mb-0 ms-2">
|
||||
<i className="rounded-circle bx bx-building-house text-primary"></i>{" "}
|
||||
Projects
|
||||
</h5>
|
||||
</div>
|
||||
<div className="d-flex justify-content-around align-items-start mt-n2">
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{projectsCardData.totalProjects?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted">Total</small>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{projectsCardData.ongoingProjects?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted">Ongoing</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Projects;
|
||||
32
src/components/Dashboard/Tasks.jsx
Normal file
32
src/components/Dashboard/Tasks.jsx
Normal file
@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
|
||||
|
||||
const TasksCard = () => {
|
||||
const { tasksCardData } = useDashboardTasksCardData();
|
||||
|
||||
return (
|
||||
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
||||
<div className="d-flex justify-content-start align-items-center mb-3">
|
||||
<h5 className="fw-bold mb-0 ms-2">
|
||||
<i className="bx bx-task text-success"></i> Tasks
|
||||
</h5>
|
||||
</div>
|
||||
<div className="d-flex justify-content-around align-items-start mt-n2">
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{tasksCardData.totalTasks?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted">Total</small>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{tasksCardData.completedTasks?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted">Completed</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TasksCard;
|
||||
32
src/components/Dashboard/Teams.jsx
Normal file
32
src/components/Dashboard/Teams.jsx
Normal file
@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
|
||||
|
||||
const Teams = () => {
|
||||
const { teamsCardData } = useDashboardTeamsCardData();
|
||||
|
||||
return (
|
||||
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
||||
<div className="d-flex justify-content-start align-items-center mb-3">
|
||||
<h5 className="fw-bold mb-0 ms-2">
|
||||
<i className="bx bx-group text-warning"></i> Teams
|
||||
</h5>
|
||||
</div>
|
||||
<div className="d-flex justify-content-around align-items-start mt-n2">
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{teamsCardData.totalEmployees?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted">Total Employees</small>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0 fw-bold">
|
||||
{teamsCardData.inToday?.toLocaleString()}
|
||||
</h4>
|
||||
<small className="text-muted">In Today</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Teams;
|
||||
@ -12,7 +12,7 @@ const AboutProject = ({ data }) => {
|
||||
<small className="card-text text-uppercase text-muted small">
|
||||
Profile
|
||||
</small>
|
||||
<ul className="list-unstyled my-3 py-1">
|
||||
<ul className="list-unstyled my-3">
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="bx bx-check"></i>
|
||||
<span className="fw-medium mx-2">Start Date:</span>{" "}
|
||||
@ -41,27 +41,17 @@ const AboutProject = ({ data }) => {
|
||||
<span className="fw-medium mx-2">Contact:</span>{" "}
|
||||
<span>{data.contactPerson}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<li className="d-flex flex-column align-items-start mb-4">
|
||||
<div className="d-flex align-items-center">
|
||||
<i className="bx bx-flag"></i>
|
||||
<span className="fw-medium mx-2">Address:</span>{" "}
|
||||
</li>
|
||||
</ul>
|
||||
{/* <small className="card-text text-uppercase text-muted small">
|
||||
Contacts
|
||||
</small> */}
|
||||
<ul className="list-unstyled my-3 py-1">
|
||||
|
||||
{/* <li className="d-flex align-items-center mb-4">
|
||||
<i className="bx bx-phone"></i>
|
||||
<span className="fw-medium mx-2">Contact Number:</span>{" "}
|
||||
<span>NA</span>
|
||||
</li> */}
|
||||
{/* <li className="d-flex align-items-center mb-4">
|
||||
<i className="bx bx-envelope"></i>
|
||||
<span className="fw-medium mx-2">Email:</span> <span>NA</span>
|
||||
</li> */}
|
||||
<li className="d-flex align-items-start test-start mb-4">
|
||||
<span className="fw-medium mx-2">Address:</span>
|
||||
{data.projectAddress?.length <= 20 && (
|
||||
<span>{data.projectAddress}</span>
|
||||
)}
|
||||
</div>
|
||||
{data.projectAddress?.length > 20 && (
|
||||
<div className="ms-4 text-start">{data.projectAddress}</div>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -1,54 +1,95 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
import useMaster from "../../hooks/masterHook/useMaster";
|
||||
import { employee } from "../../data/masters";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { getCachedData } from "../../slices/apiDataManager";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
|
||||
import { TasksRepository } from "../../repositories/ProjectRepository";
|
||||
import showToast from "../../services/toastService";
|
||||
|
||||
const AssignRoleModel = ({ assignData, onClose }) => {
|
||||
// Calculate maxPlanned based on assignData
|
||||
const maxPlanned =
|
||||
assignData?.workItem?.workItem?.plannedWork -
|
||||
assignData?.workItem?.workItem?.completedWork;
|
||||
|
||||
// Zod schema for form validation
|
||||
const schema = z.object({
|
||||
selectedEmployees: z
|
||||
.array(z.string())
|
||||
.min(1, { message: "At least one employee must be selected" }),
|
||||
.min(1, { message: "At least one employee must be selected" }), // Added custom message here for consistency
|
||||
description: z.string().min(1, { message: "Description is required" }),
|
||||
plannedTask: z.preprocess(
|
||||
(val) => parseInt(val, 10),
|
||||
(val) => parseInt(val, 10), // Preprocess value to integer
|
||||
z
|
||||
.number({
|
||||
required_error: "Planned task is required",
|
||||
invalid_type_error: "Planned task must be a number",
|
||||
invalid_type_error: "Target for Today must be a number",
|
||||
})
|
||||
.int()
|
||||
.positive({ message: "Planned task must be a positive number" })
|
||||
.int() // Ensure it's an integer
|
||||
.positive({ message: "Planned task must be a positive number" }) // Must be positive
|
||||
.max(maxPlanned, {
|
||||
// Max value validation
|
||||
message: `Planned task cannot exceed ${maxPlanned}`,
|
||||
})
|
||||
),
|
||||
});
|
||||
const [plannedTask, setPlannedTask] = useState();
|
||||
|
||||
// State for help popovers (though not fully implemented in provided snippets)
|
||||
const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
|
||||
const helpPopupRefTarget = useRef(null);
|
||||
const [isHelpVisible, setIsHelpVisible] = useState(false);
|
||||
|
||||
// Refs for Bootstrap Popovers
|
||||
const infoRef = useRef(null);
|
||||
const infoRef1 = useRef(null);
|
||||
|
||||
// Initialize Bootstrap Popovers on component mount
|
||||
useEffect(() => {
|
||||
// Check if Bootstrap is available globally
|
||||
if (typeof bootstrap !== 'undefined') {
|
||||
if (infoRef.current) {
|
||||
new bootstrap.Popover(infoRef.current, {
|
||||
trigger: 'focus',
|
||||
placement: 'right',
|
||||
html: true,
|
||||
content: `<div>Total Pending tasks of the Activity</div>`,
|
||||
});
|
||||
}
|
||||
|
||||
if (infoRef1.current) {
|
||||
new bootstrap.Popover(infoRef1.current, {
|
||||
trigger: 'focus',
|
||||
placement: 'right',
|
||||
html: true,
|
||||
content: `<div>Target task for today</div>`,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.warn("Bootstrap is not available. Popovers might not function.");
|
||||
}
|
||||
}, []); // Empty dependency array ensures this runs once on mount
|
||||
|
||||
// Redux state and hooks
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const { employees,loading:employeeLoading } = useEmployeesAllOrByProjectId(selectedProject,false);
|
||||
|
||||
const { employees, loading: employeeLoading } = useEmployeesAllOrByProjectId(
|
||||
selectedProject,
|
||||
false
|
||||
);
|
||||
const dispatch = useDispatch();
|
||||
const { data, loading } = useMaster();
|
||||
const { loading } = useMaster(); // Assuming this is for jobRoleData loading
|
||||
const jobRoleData = getCachedData("Job Role");
|
||||
|
||||
// Local component states
|
||||
const [selectedRole, setSelectedRole] = useState("all");
|
||||
const [selectedEmployees, setSelectedEmployees] = useState([]);
|
||||
const [displayedSelection, setDisplayedSelection] = useState(""); // This state is not updated in the provided code, consider if it's still needed or how it should be updated
|
||||
|
||||
// React Hook Form setup
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
@ -56,74 +97,95 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
||||
watch,
|
||||
formState: { errors },
|
||||
reset,
|
||||
trigger, // <--- IMPORTANT: Destructure 'trigger' here
|
||||
} = useForm({
|
||||
defaultValues: {
|
||||
selectedEmployees: [],
|
||||
description: "",
|
||||
plannedTask: "",
|
||||
},
|
||||
resolver: zodResolver(schema),
|
||||
resolver: zodResolver(schema), // Integrate Zod schema with react-hook-form
|
||||
});
|
||||
|
||||
const handleRoleChange = (event) => {
|
||||
reset();
|
||||
// setSelectedEmployees([]);
|
||||
setSelectedRole(event.target.value);
|
||||
};
|
||||
// Handler for employee checkbox changes
|
||||
const handleCheckboxChange = (event, user) => {
|
||||
const isChecked = event.target.checked;
|
||||
let updatedSelectedEmployees = watch("selectedEmployees") || []; // Get current selected employees from form state
|
||||
|
||||
const filteredEmployees =
|
||||
selectedRole === "all"
|
||||
? employees
|
||||
: employees.filter((emp) => String(emp.jobRoleId || "") === selectedRole);
|
||||
|
||||
const handleEmployeeSelection = (employeeId, field) => {
|
||||
setSelectedEmployees((prevSelected) => {
|
||||
let updatedSelection;
|
||||
if (!prevSelected.includes(employeeId)) {
|
||||
updatedSelection = [...prevSelected, employeeId];
|
||||
if (isChecked) {
|
||||
// Add employee if checked and not already in the list
|
||||
if (!updatedSelectedEmployees.includes(user.id)) {
|
||||
updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
|
||||
}
|
||||
} else {
|
||||
updatedSelection = prevSelected.filter((id) => id !== employeeId);
|
||||
// Remove employee if unchecked
|
||||
updatedSelectedEmployees = updatedSelectedEmployees.filter(
|
||||
(id) => id !== user.id
|
||||
);
|
||||
}
|
||||
field.onChange(updatedSelection);
|
||||
return updatedSelection;
|
||||
});
|
||||
// Update the form state with the new list of selected employees
|
||||
setValue("selectedEmployees", updatedSelectedEmployees);
|
||||
trigger("selectedEmployees"); // <--- IMPORTANT: Trigger validation here
|
||||
};
|
||||
|
||||
const removeEmployee = (employeeId) => {
|
||||
setSelectedEmployees((prevSelected) => {
|
||||
const updatedSelection = prevSelected.filter((id) => id !== employeeId);
|
||||
setValue("selectedEmployees", updatedSelection); // Ensure form state is updated
|
||||
return updatedSelection;
|
||||
});
|
||||
};
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
const formattedData = {
|
||||
taskTeam: data.selectedEmployees,
|
||||
plannedTask: data.plannedTask,
|
||||
description: data.description,
|
||||
assignmentDate: new Date().toISOString(),
|
||||
workItemId: assignData?.workItem?.workItem.id,
|
||||
};
|
||||
try {
|
||||
let response = await TasksRepository.assignTask(formattedData);
|
||||
showToast("Task Successfully Assigend", "success");
|
||||
setSelectedEmployees([]);
|
||||
reset();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
showToast("something wrong", "error");
|
||||
}
|
||||
};
|
||||
// Effect to dispatch action for Job Role master data
|
||||
useEffect(() => {
|
||||
dispatch(changeMaster("Job Role"));
|
||||
// Cleanup function to reset selected role when component unmounts or dispatch changes
|
||||
return () => setSelectedRole("all");
|
||||
}, [dispatch]);
|
||||
|
||||
// Handler for role filter change
|
||||
const handleRoleChange = (event) => {
|
||||
setSelectedRole(event.target.value);
|
||||
};
|
||||
|
||||
// Filter employees based on selected role
|
||||
const filteredEmployees =
|
||||
selectedRole === "all"
|
||||
? employees
|
||||
: employees?.filter(
|
||||
(emp) => String(emp.jobRoleId || "") === selectedRole
|
||||
);
|
||||
|
||||
// Form submission handler
|
||||
const onSubmit = async (data) => {
|
||||
const selectedEmployeeIds = data.selectedEmployees;
|
||||
|
||||
// Prepare taskTeam data (only IDs are needed for the backend based on previous context)
|
||||
const taskTeamWithDetails = selectedEmployeeIds
|
||||
.map((empId) => {
|
||||
return empId; // Return just the ID as per previous discussions
|
||||
})
|
||||
.filter(Boolean); // Ensure no nulls if employee not found (though unlikely with current logic)
|
||||
|
||||
// Format data for API call
|
||||
const formattedData = {
|
||||
taskTeam: taskTeamWithDetails,
|
||||
plannedTask: data.plannedTask,
|
||||
description: data.description,
|
||||
assignmentDate: new Date().toISOString(), // Current date/time
|
||||
workItemId: assignData?.workItem?.workItem.id,
|
||||
};
|
||||
|
||||
try {
|
||||
// Call API to assign task
|
||||
await TasksRepository.assignTask(formattedData);
|
||||
showToast("Task Successfully Assigned", "success"); // Show success toast
|
||||
reset(); // Reset form fields
|
||||
onClose(); // Close the modal
|
||||
} catch (error) {
|
||||
console.error("Error assigning task:", error); // Log the full error for debugging
|
||||
showToast("Something went wrong. Please try again.", "error"); // Show generic error toast
|
||||
}
|
||||
};
|
||||
|
||||
// Handler to close the modal and reset form
|
||||
const closedModel = () => {
|
||||
reset();
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal"
|
||||
@ -137,16 +199,21 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
></button>
|
||||
<div className="container my-1">
|
||||
<div className="mb-">
|
||||
<p className="fs-sm-5 fs-6 text-dark text-start d-flex align-items-center flex-wrap">
|
||||
<div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
|
||||
<p className="align-items-center flex-wrap m-0 ">Assign Task</p>
|
||||
<div className="container my-3">
|
||||
<div className="mb-1">
|
||||
<p className="mb-0">
|
||||
<span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
|
||||
<p className="me-2 m-0 font-bold">Work Location :</p>
|
||||
{[
|
||||
assignData?.building?.name,
|
||||
assignData?.floor?.floorName,
|
||||
assignData?.workArea?.areaName,
|
||||
assignData?.workItem?.workItem?.activityMaster?.activityName,
|
||||
assignData?.workItem?.workItem?.activityMaster
|
||||
?.activityName,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.filter(Boolean) // Filter out any undefined/null values
|
||||
.map((item, index, array) => (
|
||||
<span key={index} className="d-flex align-items-center">
|
||||
{item}
|
||||
@ -155,51 +222,74 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="form-label text-start">
|
||||
<div className="row mb-1">
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">Select Role</div>
|
||||
<div className="input-group input-group-merge">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
id="Role"
|
||||
value={selectedRole}
|
||||
onChange={handleRoleChange}
|
||||
aria-label=""
|
||||
<div className="col-12">
|
||||
<div className="form-text text-start">
|
||||
<div className="d-flex align-items-center form-text fs-7">
|
||||
<span className="text-dark">Select Team</span>
|
||||
<div className="me-2">{displayedSelection}</div>
|
||||
<a
|
||||
className="dropdown-toggle hide-arrow cursor-pointer"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{loading && data ? (
|
||||
"Loading..."
|
||||
) : (
|
||||
<>
|
||||
<option value="all">All</option>
|
||||
{jobRoleData?.map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.name}
|
||||
</option>
|
||||
<i className="bx bx-filter bx-lg text-primary"></i>
|
||||
</a>
|
||||
|
||||
<ul className="dropdown-menu p-2 text-capitalize">
|
||||
<li key="all">
|
||||
<button
|
||||
type="button"
|
||||
className="dropdown-item py-1"
|
||||
onClick={() =>
|
||||
handleRoleChange({
|
||||
target: { value: "all" },
|
||||
})
|
||||
}
|
||||
>
|
||||
All Roles
|
||||
</button>
|
||||
</li>
|
||||
{jobRoleData?.map((user) => (
|
||||
<li key={user.id}>
|
||||
<button
|
||||
type="button"
|
||||
className="dropdown-item py-1"
|
||||
value={user.id}
|
||||
onClick={handleRoleChange}
|
||||
>
|
||||
{user.name}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divider text-start">
|
||||
<div className="divider-text">Employee</div>
|
||||
</div>
|
||||
{employeeLoading && <div>Loading...</div>}
|
||||
{!employeeLoading && filteredEmployees?.length === 0 && employees && (
|
||||
<div>No employees found</div>
|
||||
|
||||
{employeeLoading && <div>Loading employees...</div>}
|
||||
{!employeeLoading &&
|
||||
filteredEmployees?.length === 0 &&
|
||||
employees && (
|
||||
<div>No employees found for the selected role.</div>
|
||||
)}
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-8 h-sm-25 overflow-auto">
|
||||
<div className="col-12 h-sm-25 overflow-auto mt-2">
|
||||
{selectedRole !== "" && (
|
||||
<div className="row mb-2">
|
||||
<div className="col-sm-12">
|
||||
<div className="row">
|
||||
{filteredEmployees?.map((emp) => {
|
||||
{loading ? ( // Assuming 'loading' here refers to master data loading
|
||||
<div className="col-12">
|
||||
<p className="text-center">Loading roles...</p>
|
||||
</div>
|
||||
) : filteredEmployees?.length > 0 ? (
|
||||
filteredEmployees?.map((emp) => {
|
||||
const jobRole = jobRoleData?.find(
|
||||
(role) => role?.id === emp?.jobRoleId
|
||||
);
|
||||
@ -207,84 +297,73 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
||||
return (
|
||||
<div
|
||||
key={emp.id}
|
||||
className="col-6 col-sm-6 col-md-4 col-lg-4 mb-1"
|
||||
className="col-6 col-md-4 col-lg-3 mb-3"
|
||||
>
|
||||
<div className="form-check text-start p-0">
|
||||
<div className="li-wrapper d-flex justify-content-start align-items-start">
|
||||
<div className="form-check d-flex align-items-start">
|
||||
<Controller
|
||||
name="selectedEmployees"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<input
|
||||
{...field}
|
||||
className="form-check-input mx-2"
|
||||
className="form-check-input me-1 mt-1"
|
||||
type="checkbox"
|
||||
id={`employee-${emp?.id}`}
|
||||
value={emp.id}
|
||||
checked={field.value.includes(
|
||||
emp.id
|
||||
)}
|
||||
onChange={() => {
|
||||
handleEmployeeSelection(
|
||||
emp.id,
|
||||
field
|
||||
);
|
||||
checked={field.value?.includes(emp.id)}
|
||||
onChange={(e) => {
|
||||
handleCheckboxChange(e, emp);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="list-content">
|
||||
<p
|
||||
className=" mb-0"
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
fontWeight: "bolder",
|
||||
}}
|
||||
>
|
||||
<div className="flex-grow-1">
|
||||
<p className="mb-0" style={{ fontSize: "13px" }}>
|
||||
{emp.firstName} {emp.lastName}
|
||||
</p>
|
||||
<small
|
||||
className="lead"
|
||||
style={{ fontSize: "10px" }}
|
||||
className="text-muted"
|
||||
style={{ fontSize: "11px" }}
|
||||
>
|
||||
{loading && (
|
||||
<p
|
||||
className="skeleton para"
|
||||
style={{ height: "7px" }}
|
||||
></p>
|
||||
{loading ? (
|
||||
<span className="placeholder-glow">
|
||||
<span className="placeholder col-6"></span>
|
||||
</span>
|
||||
) : (
|
||||
jobRole?.name || "Unknown Role"
|
||||
)}
|
||||
{data &&
|
||||
!loading &&
|
||||
(jobRole
|
||||
? jobRole.name
|
||||
: "Unknown Role")}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
) : (
|
||||
<div className="col-12">
|
||||
<p className="text-center">No employees found for the selected role.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="col-12 col-md-4 h-25 overflow-auto"
|
||||
className="col-12 h-25 overflow-auto"
|
||||
style={{ maxHeight: "200px" }}
|
||||
>
|
||||
{selectedEmployees.length > 0 && (
|
||||
{watch("selectedEmployees")?.length > 0 && (
|
||||
<div className="mt-1">
|
||||
<div className="text-start px-2">
|
||||
{selectedEmployees.map((empId) => {
|
||||
{watch("selectedEmployees")?.map((empId) => {
|
||||
const emp = employees.find(
|
||||
(emp) => emp.id === empId
|
||||
);
|
||||
return (
|
||||
emp && (
|
||||
<span
|
||||
key={empId}
|
||||
className="badge bg-label-primary d-inline-flex align-items-center gap-2 me-1 p-1 mb-2"
|
||||
className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
|
||||
>
|
||||
{emp.firstName} {emp.lastName}
|
||||
<p
|
||||
@ -292,70 +371,150 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
||||
className=" btn-close-white p-0 m-0"
|
||||
aria-label="Close"
|
||||
onClick={() => {
|
||||
removeEmployee(empId);
|
||||
const updatedSelected = watch(
|
||||
"selectedEmployees"
|
||||
).filter((id) => id !== empId);
|
||||
setValue(
|
||||
"selectedEmployees",
|
||||
selectedEmployees.filter(
|
||||
(id) => id !== empId
|
||||
)
|
||||
updatedSelected
|
||||
);
|
||||
trigger("selectedEmployees"); // <--- IMPORTANT: Trigger validation on removing badge
|
||||
}}
|
||||
>
|
||||
<i className="icon-base bx bx-x icon-md "></i>
|
||||
</p>
|
||||
</span>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!loading && errors.selectedEmployees && (
|
||||
<div className="danger-text mt-1">
|
||||
<p>{errors.selectedEmployees.message}</p> {/* Use message from Zod schema */}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pending Task of Activity section */}
|
||||
<div className="col-md text-start mx-0 px-0">
|
||||
<div className="form-check form-check-inline mt-3 px-1">
|
||||
<label className="form-text text-dark align-items-center d-flex" htmlFor="inlineCheckbox1">
|
||||
Pending Task of Activity :
|
||||
<label className="form-check-label fs-7 ms-4" htmlFor="inlineCheckbox1">
|
||||
<strong>
|
||||
{assignData?.workItem?.workItem?.plannedWork - assignData?.workItem?.workItem?.completedWork}
|
||||
</strong>{" "}
|
||||
<u>{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}</u>
|
||||
</label>
|
||||
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<div
|
||||
ref={infoRef}
|
||||
tabIndex="0"
|
||||
className="d-flex align-items-center avatar-group justify-content-center ms-2"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-trigger="focus"
|
||||
data-bs-placement="right"
|
||||
data-bs-html="true"
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="13"
|
||||
height="13"
|
||||
fill="currentColor"
|
||||
className="bi bi-info-circle"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
||||
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Target for Today input and validation */}
|
||||
<div className="col-md text-start mx-0 px-0">
|
||||
<div className="form-check form-check-inline mt-4 px-1">
|
||||
<label className="form-text fs-6" for="inlineCheckbox1">
|
||||
Pending Work
|
||||
</label>
|
||||
<div className="form-check form-check-inline mt-2 px-1 mb-2 text-start">
|
||||
<label
|
||||
className="form-check-label ms-2"
|
||||
for="inlineCheckbox1"
|
||||
className="text-dark text-start d-flex align-items-center flex-wrap form-text"
|
||||
htmlFor="inlineCheckbox1"
|
||||
>
|
||||
{assignData?.workItem?.workItem?.plannedWork -
|
||||
assignData?.workItem?.workItem?.completedWork}
|
||||
<span>Target for Today</span> <span style={{ marginLeft: '46px' }}>:</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-check form-check-inline col-sm-2 col">
|
||||
<label for="defaultFormControlInput" className="form-label">
|
||||
Target
|
||||
</label>
|
||||
<div className="form-check form-check-inline col-sm-3 mt-2" style={{ marginLeft: '-28px' }}>
|
||||
<Controller
|
||||
name="plannedTask"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<div className="d-flex align-items-center gap-1 ">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-xs"
|
||||
className="form-control form-control-sm"
|
||||
{...field}
|
||||
id="defaultFormControlInput"
|
||||
aria-describedby="defaultFormControlHelp"
|
||||
/>
|
||||
<span style={{ paddingLeft: '6px' }}>
|
||||
{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}
|
||||
</span>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<div
|
||||
ref={infoRef1}
|
||||
tabIndex="0"
|
||||
className="d-flex align-items-center avatar-group justify-content-center ms-2"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-trigger="focus"
|
||||
data-bs-placement="right"
|
||||
data-bs-html="true"
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="13"
|
||||
height="13"
|
||||
fill="currentColor"
|
||||
className="bi bi-info-circle"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
||||
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errors.plannedTask && (
|
||||
<div className="danger-text mt-1">
|
||||
{errors.plannedTask.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{errors.selectedEmployees && (
|
||||
<div className="danger-text mt-1">
|
||||
<p>{errors.selectedEmployees.message}</p>
|
||||
</div>
|
||||
<div className="danger-text mt-1">{errors.plannedTask.message}</div>
|
||||
)}
|
||||
|
||||
<label for="exampleFormControlTextarea1" className="form-label">
|
||||
{isHelpVisible && (
|
||||
<div
|
||||
className="position-absolute bg-white border p-2 rounded shadow"
|
||||
style={{ zIndex: 10, marginLeft: '10px' }}
|
||||
>
|
||||
{/* Add your help content here */}
|
||||
<p className="mb-0">Enter the target value for today's task.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description field */}
|
||||
<label
|
||||
className="form-text fs-7 m-1 text-lg text-dark"
|
||||
htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
|
||||
>
|
||||
Description
|
||||
</label>
|
||||
<Controller
|
||||
@ -365,7 +524,7 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
||||
<textarea
|
||||
{...field}
|
||||
className="form-control"
|
||||
id="exampleFormControlTextarea1"
|
||||
id="descriptionTextarea" // Changed id for better accessibility
|
||||
rows="2"
|
||||
/>
|
||||
)}
|
||||
@ -375,7 +534,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
||||
{errors.description.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Submit and Cancel buttons */}
|
||||
<div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
|
||||
<button type="submit" className="btn btn-sm btn-primary ">
|
||||
Submit
|
||||
@ -396,6 +557,8 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AssignRoleModel;
|
||||
|
||||
@ -47,7 +47,7 @@ const BuildingModel = ({
|
||||
}
|
||||
|
||||
return () => {
|
||||
setValue("name", null);
|
||||
setValue("name", "");
|
||||
};
|
||||
}, [clearTrigger, onClearComplete, editingBuilding, project?.id]);
|
||||
|
||||
@ -107,7 +107,10 @@ const BuildingModel = ({
|
||||
className="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
onClick={onClose}
|
||||
onClick={() => {
|
||||
onClose();
|
||||
reset(); // Call reset here
|
||||
}}
|
||||
></button>
|
||||
<h5 className="text-center mb-2">
|
||||
Manage Buildings - {project?.name}
|
||||
@ -186,7 +189,10 @@ const BuildingModel = ({
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
onClick={onClose}
|
||||
onClick={() => {
|
||||
onClose();
|
||||
reset(); // Call reset here
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@ -199,3 +205,5 @@ const BuildingModel = ({
|
||||
};
|
||||
|
||||
export default BuildingModel;
|
||||
|
||||
|
||||
|
||||
@ -2,17 +2,18 @@ import React, { useState, useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { getCachedData } from "../../../slices/apiDataManager";
|
||||
import showToast from "../../../services/toastService";
|
||||
|
||||
// Zod validation schema
|
||||
const floorSchema = z.object({
|
||||
buildingId: z.string().min(1, "Building is required"),
|
||||
id: z.string().min(1, "Floor is required").optional(),
|
||||
buildingId: z
|
||||
.string()
|
||||
.refine((val) => val !== "0", {
|
||||
message: "Building is required",
|
||||
}),
|
||||
id: z.string().optional(),
|
||||
floorName: z.string().min(1, "Floor Name is required"),
|
||||
});
|
||||
|
||||
// Default model
|
||||
const defaultModel = {
|
||||
id: "0",
|
||||
floorName: "",
|
||||
@ -30,12 +31,10 @@ const FloorModel = ({
|
||||
const [selectedBuilding, setSelectedBuilding] = useState({});
|
||||
const [buildings, setBuildings] = useState(project?.buildings || []);
|
||||
|
||||
// Initialize the form with React Hook Form
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
getValues,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
@ -50,10 +49,10 @@ const FloorModel = ({
|
||||
}
|
||||
}, [clearTrigger, onClearComplete, reset]);
|
||||
|
||||
// Handle building selection change
|
||||
const handleBuildigChange = (e) => {
|
||||
const buildingId = e.target.value;
|
||||
const building = buildings.find((b) => b.id === String(buildingId));
|
||||
|
||||
if (building) {
|
||||
setSelectedBuilding(building);
|
||||
setFormData({
|
||||
@ -61,8 +60,8 @@ const FloorModel = ({
|
||||
floorName: "",
|
||||
buildingId: building.id,
|
||||
});
|
||||
setValue("buildingId", building.id); // Set value for validation
|
||||
setValue("id", "0"); // Reset floorId when changing building
|
||||
setValue("buildingId", building.id, { shouldValidate: true }); // ✅ trigger validation
|
||||
setValue("id", "0");
|
||||
} else {
|
||||
setSelectedBuilding({});
|
||||
setFormData({
|
||||
@ -70,14 +69,14 @@ const FloorModel = ({
|
||||
floorName: "",
|
||||
buildingId: "0",
|
||||
});
|
||||
setValue("buildingId", "0");
|
||||
setValue("buildingId", "0", { shouldValidate: true }); // ✅ trigger validation
|
||||
}
|
||||
};
|
||||
|
||||
// Handle floor selection change
|
||||
const handleFloorChange = (e) => {
|
||||
const id = e.target.value;
|
||||
const floor = selectedBuilding.floors.find((b) => b.id === String(id));
|
||||
const floor = selectedBuilding.floors?.find((b) => b.id === String(id));
|
||||
|
||||
if (floor) {
|
||||
setFormData({
|
||||
id: floor.id,
|
||||
@ -95,15 +94,14 @@ const FloorModel = ({
|
||||
}
|
||||
};
|
||||
|
||||
// Handle form submission
|
||||
const onFormSubmit = (data) => {
|
||||
if(data.id == "0"){
|
||||
if (data.id === "0") {
|
||||
data.id = null;
|
||||
}
|
||||
|
||||
onSubmit(data);
|
||||
reset({
|
||||
floorName: "",
|
||||
});
|
||||
reset({ floorName: "" });
|
||||
|
||||
if (data.id !== null) {
|
||||
showToast("Floor updated successfully.", "success");
|
||||
} else {
|
||||
@ -141,17 +139,14 @@ const FloorModel = ({
|
||||
{buildings?.length > 0 &&
|
||||
buildings
|
||||
.filter((building) => building?.name)
|
||||
.sort((a, b) => {
|
||||
const nameA = a.name || "";
|
||||
const nameB = b.name || "";
|
||||
return nameA?.localeCompare(nameB);
|
||||
})
|
||||
.sort((a, b) =>
|
||||
(a.name || "").localeCompare(b.name || "")
|
||||
)
|
||||
.map((building) => (
|
||||
<option key={building.id} value={building.id}>
|
||||
{building.name}
|
||||
</option>
|
||||
))}
|
||||
|
||||
{buildings?.length === 0 && (
|
||||
<option disabled>No buildings found</option>
|
||||
)}
|
||||
@ -162,6 +157,7 @@ const FloorModel = ({
|
||||
</div>
|
||||
|
||||
{formData.buildingId !== "0" && (
|
||||
<>
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label">Select Floor</label>
|
||||
<select
|
||||
@ -172,27 +168,19 @@ const FloorModel = ({
|
||||
onChange={handleFloorChange}
|
||||
>
|
||||
<option value="0">Add New Floor</option>
|
||||
{/* {selectedBuilding?.floors?.map((floor) => (
|
||||
<option key={floor.id} value={floor.id}>
|
||||
{floor.floorName}
|
||||
</option>
|
||||
) )} */}
|
||||
|
||||
{selectedBuilding &&
|
||||
selectedBuilding.floors?.length > 0 &&
|
||||
{selectedBuilding?.floors?.length > 0 &&
|
||||
[...selectedBuilding.floors]
|
||||
.filter((floor) => floor?.floorName)
|
||||
.sort((a, b) => {
|
||||
const nameA = a.floorName || "";
|
||||
const nameB = b.floorName || "";
|
||||
return nameA?.localeCompare(nameB);
|
||||
})
|
||||
.sort((a, b) =>
|
||||
(a.floorName || "").localeCompare(
|
||||
b.floorName || ""
|
||||
)
|
||||
)
|
||||
.map((floor) => (
|
||||
<option key={floor.id} value={floor.id}>
|
||||
{floor.floorName}
|
||||
</option>
|
||||
))}
|
||||
|
||||
{selectedBuilding?.floors?.length === 0 && (
|
||||
<option disabled>No floors found</option>
|
||||
)}
|
||||
@ -201,9 +189,7 @@ const FloorModel = ({
|
||||
<p className="text-danger">{errors.id.message}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{formData.buildingId !== "0" && (
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label">
|
||||
{formData.id !== "0" ? "Modify " : "Enter "} Floor Name
|
||||
@ -216,9 +202,12 @@ const FloorModel = ({
|
||||
{...register("floorName")}
|
||||
/>
|
||||
{errors.floorName && (
|
||||
<p className="text-danger">{errors.floorName.message}</p>
|
||||
<p className="text-danger">
|
||||
{errors.floorName.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="col-12 text-center">
|
||||
|
||||
@ -31,7 +31,7 @@ const InfraTable = ({ buildings }) => {
|
||||
{
|
||||
building: null,
|
||||
floor: {
|
||||
id: data.id || "0",
|
||||
id: data.id || null,
|
||||
floorName: data.floorName,
|
||||
buildingId: data.buildingId,
|
||||
},
|
||||
|
||||
@ -184,10 +184,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||
Category
|
||||
</th>
|
||||
<th className="infra-activity-table-header d-none d-md-table-cell">
|
||||
Planned
|
||||
</th>
|
||||
<th className="infra-activity-table-header d-none d-md-table-cell">
|
||||
Completed
|
||||
Completed/Planned
|
||||
</th>
|
||||
<th className="infra-activity-table-header">
|
||||
Progress
|
||||
|
||||
@ -177,22 +177,16 @@ const WorkItem = ({
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* Planned - visible on medium and above */}
|
||||
<td className="text-center d-none d-md-table-cell">
|
||||
{hasWorkItem
|
||||
? NewWorkItem?.workItem?.plannedWork ??
|
||||
workItem?.plannedWork ??
|
||||
"NA"
|
||||
: "NA"}
|
||||
</td>
|
||||
|
||||
{/* Completed - visible on medium and above */}
|
||||
<td className="text-center d-none d-md-table-cell">
|
||||
{hasWorkItem
|
||||
? NewWorkItem?.workItem?.completedWork ??
|
||||
{hasWorkItem ? (
|
||||
`${NewWorkItem?.workItem?.completedWork ??
|
||||
workItem?.completedWork ??
|
||||
"0"}/${NewWorkItem?.workItem?.plannedWork ??
|
||||
workItem?.plannedWork ??
|
||||
"0"}`
|
||||
) : (
|
||||
"NA"
|
||||
: "NA"}
|
||||
)}
|
||||
</td>
|
||||
|
||||
{/* Progress Bar - always visible */}
|
||||
@ -266,7 +260,7 @@ const WorkItem = ({
|
||||
></i>
|
||||
|
||||
<ul className="dropdown-menu dropdown-menu-start">
|
||||
{!projectId && ManageTasks && PlannedWork !== CompletedWork && (
|
||||
{!projectId && ManageAndAssignTak && PlannedWork !== CompletedWork && (
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
|
||||
@ -115,7 +115,7 @@ const MapUsers = ({
|
||||
<div className="modal-dialog modal-dialog-scrollable mx-sm-auto mx-1 modal-lg modal-simple modal-edit-user">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header ">
|
||||
<div className="md-2 mb-1">
|
||||
<div className="md-2 mb-n5">
|
||||
{(filteredData.length > 0 ||
|
||||
allocationEmployeesData.length > 0)&& (
|
||||
<div className="input-group">
|
||||
@ -128,6 +128,11 @@ const MapUsers = ({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex justify-content-start align-items-center px-4 mt-6">
|
||||
<h5 className="mb-0 mt-1">
|
||||
<i className=" text-warning me-3"></i> Select Employee
|
||||
</h5>
|
||||
</div>
|
||||
<div className="modal-body p-sm-4 p-0">
|
||||
<table
|
||||
@ -136,7 +141,7 @@ const MapUsers = ({
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<thead></thead>
|
||||
|
||||
<tbody>
|
||||
{employeeLoading && allocationEmployeesData.length === 0 && (
|
||||
<p>Loading...</p>
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
|
||||
const DateRangePicker = ({ onRangeChange, DateDifference = 15 }) => {
|
||||
const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate = new Date() - 1 }) => {
|
||||
const inputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const today = new Date();
|
||||
const today = new Date();;
|
||||
today.setDate(today.getDate() - 1);
|
||||
const fifteenDaysAgo = new Date();
|
||||
|
||||
fifteenDaysAgo.setDate(today.getDate() - DateDifference);
|
||||
|
||||
const fp = flatpickr(inputRef.current, {
|
||||
|
||||
@ -70,7 +70,9 @@ const CreateJobRole = ({onClose}) => {
|
||||
const maxDescriptionLength = 255;
|
||||
return (<>
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Job Role</label>
|
||||
</div>
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label">Role</label>
|
||||
<input type="text"
|
||||
|
||||
@ -96,7 +96,10 @@ const CreateRole = ({ modalType, onClose }) => {
|
||||
return (
|
||||
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Application Role</label>
|
||||
|
||||
</div>
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label">Role</label>
|
||||
<input type="text"
|
||||
|
||||
@ -70,6 +70,9 @@ const CreateWorkCategory = ({onClose}) => {
|
||||
const maxDescriptionLength = 255;
|
||||
return (<>
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Work Category</label>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label">Category Name</label>
|
||||
|
||||
@ -77,6 +77,9 @@ const EditJobRole = ({data,onClose}) => {
|
||||
|
||||
return (<>
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Job Role</label>
|
||||
</div>
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label">Role</label>
|
||||
<input type="text"
|
||||
|
||||
@ -146,7 +146,9 @@ const EditMaster = ({ master, onClose }) => {
|
||||
return (
|
||||
|
||||
<form className="row g-2 " onSubmit={handleSubmit(onSubmit)}>
|
||||
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Application Role</label>
|
||||
</div>
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label">Role</label>
|
||||
<input type="text"
|
||||
|
||||
@ -77,6 +77,10 @@ const EditWorkCategory = ({data,onClose}) => {
|
||||
|
||||
return (<>
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Work Category</label>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label">Category Name</label>
|
||||
<input type="text"
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
"link": "/activities/task"
|
||||
},
|
||||
{
|
||||
"text": "Daily Task",
|
||||
"text": "Daily Progress Report",
|
||||
"available": true,
|
||||
"link": "/activities/records"
|
||||
},
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { timeElapsed } from '../utils/dateUtils';
|
||||
import { useSelector } from 'react-redux';
|
||||
import {THRESH_HOLD} from '../utils/constants';
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { timeElapsed } from "../utils/dateUtils";
|
||||
import { useSelector } from "react-redux";
|
||||
import { THRESH_HOLD } from "../utils/constants";
|
||||
|
||||
export const ACTIONS = {
|
||||
CHECK_IN: 0,
|
||||
@ -10,124 +9,143 @@ export const ACTIONS = {
|
||||
REGULARIZATION: 2,
|
||||
REQUESTED: 3,
|
||||
APPROVED: 4,
|
||||
REJECTED: 5
|
||||
REJECTED: 5,
|
||||
};
|
||||
|
||||
const now = new Date();
|
||||
|
||||
const useAttendanceStatus = (attendanceData) => {
|
||||
|
||||
const [status, setStatus] = useState({
|
||||
status: "Unknown",
|
||||
action: null,
|
||||
disabled: true,
|
||||
text: "Unknown",
|
||||
color: 'btn-secondary',
|
||||
color: "btn-secondary",
|
||||
});
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const { checkInTime, checkOutTime, activity } = attendanceData;
|
||||
|
||||
|
||||
if (activity === 0 && checkInTime === null && checkOutTime === null) {
|
||||
setStatus({
|
||||
status: "Check-In",
|
||||
action: ACTIONS.CHECK_IN,
|
||||
disabled: false,
|
||||
text: "Check In",
|
||||
color: 'btn-primary',
|
||||
})
|
||||
}else if(activity === 0&& checkInTime === null && checkOutTime === null && !timeElapsed(checkInTime,THRESH_HOLD)){
|
||||
setStatus({
|
||||
status: "Check-In",
|
||||
action: ACTIONS.CHECK_IN,
|
||||
disabled: false,
|
||||
text: "Check In",
|
||||
color: 'btn-primary',
|
||||
})
|
||||
|
||||
} else if(activity === 0&& checkInTime !== null && checkOutTime === null && timeElapsed(checkInTime,THRESH_HOLD)){
|
||||
setStatus({
|
||||
status: "Request Regularize",
|
||||
action: ACTIONS.REGULARIZATION,
|
||||
disabled: false,
|
||||
text: "Regularizes",
|
||||
color: 'btn-warning',
|
||||
color: "btn-primary",
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
else if(activity === 1 && checkInTime !== null && checkOutTime === null && !timeElapsed(checkInTime,THRESH_HOLD)){
|
||||
setStatus({
|
||||
status: "Check-Out",
|
||||
action: ACTIONS.CHECK_OUT,
|
||||
disabled: false,
|
||||
text: "Check Out",
|
||||
color: 'btn-primary',
|
||||
});
|
||||
}else if(activity === 1 && checkInTime !== null && checkOutTime === null && timeElapsed(checkInTime,THRESH_HOLD)){
|
||||
setStatus({
|
||||
status: "Request Regularize",
|
||||
action: ACTIONS.REGULARIZATION,
|
||||
disabled: false,
|
||||
text: "Regularize",
|
||||
color: 'btn-warning',
|
||||
});
|
||||
} else if ( activity === 4 && checkInTime !== null && checkOutTime !== null && !timeElapsed( checkInTime, THRESH_HOLD ) )
|
||||
{
|
||||
|
||||
if ( activity === 4 && checkInTime !== null && checkOutTime !== null && new Date(checkOutTime).toDateString() !== new Date().toDateString())
|
||||
{
|
||||
} else if (activity === 4 && new Date(checkOutTime) < now) {
|
||||
setStatus({
|
||||
status: "Approved",
|
||||
action: ACTIONS.APPROVED,
|
||||
disabled: true,
|
||||
text: "Approved",
|
||||
color: 'btn-success',
|
||||
color: "btn-success",
|
||||
});
|
||||
} else
|
||||
{
|
||||
} else if (
|
||||
activity === 0 &&
|
||||
checkInTime === null &&
|
||||
checkOutTime === null &&
|
||||
!timeElapsed(checkInTime, THRESH_HOLD)
|
||||
) {
|
||||
setStatus({
|
||||
status: "Check-In",
|
||||
action: ACTIONS.CHECK_IN,
|
||||
disabled: false,
|
||||
text: "Check In",
|
||||
color: 'btn-primary',
|
||||
} )
|
||||
color: "btn-primary",
|
||||
});
|
||||
} else if (
|
||||
activity === 0 &&
|
||||
checkInTime !== null &&
|
||||
checkOutTime === null &&
|
||||
timeElapsed(checkInTime, THRESH_HOLD)
|
||||
) {
|
||||
setStatus({
|
||||
status: "Request Regularize",
|
||||
action: ACTIONS.REGULARIZATION,
|
||||
disabled: false,
|
||||
text: "Regularizes",
|
||||
color: "btn-warning",
|
||||
});
|
||||
} else if (
|
||||
activity === 1 &&
|
||||
checkInTime !== null &&
|
||||
checkOutTime === null &&
|
||||
!timeElapsed(checkInTime, THRESH_HOLD)
|
||||
) {
|
||||
setStatus({
|
||||
status: "Check-Out",
|
||||
action: ACTIONS.CHECK_OUT,
|
||||
disabled: false,
|
||||
text: "Check Out",
|
||||
color: "btn-primary",
|
||||
});
|
||||
} else if (
|
||||
activity === 1 &&
|
||||
checkInTime !== null &&
|
||||
checkOutTime === null &&
|
||||
timeElapsed(checkInTime, THRESH_HOLD)
|
||||
) {
|
||||
setStatus({
|
||||
status: "Request Regularize",
|
||||
action: ACTIONS.REGULARIZATION,
|
||||
disabled: false,
|
||||
text: "Regularize",
|
||||
color: "btn-warning",
|
||||
});
|
||||
} else if (
|
||||
activity === 4 &&
|
||||
checkInTime !== null &&
|
||||
checkOutTime !== null &&
|
||||
!timeElapsed(checkInTime, THRESH_HOLD)
|
||||
) {
|
||||
if (
|
||||
activity === 4 &&
|
||||
checkInTime !== null &&
|
||||
checkOutTime !== null &&
|
||||
new Date(checkOutTime).toDateString() !== new Date().toDateString()
|
||||
) {
|
||||
setStatus({
|
||||
status: "Approved",
|
||||
action: ACTIONS.APPROVED,
|
||||
disabled: true,
|
||||
text: "Approved",
|
||||
color: "btn-success",
|
||||
});
|
||||
} else {
|
||||
setStatus({
|
||||
status: "Check-In",
|
||||
action: ACTIONS.CHECK_IN,
|
||||
disabled: false,
|
||||
text: "Check In",
|
||||
color: "btn-primary",
|
||||
});
|
||||
}
|
||||
}
|
||||
else if ( activity === 2 && checkInTime !== null )
|
||||
{
|
||||
} else if (activity === 2 && checkInTime !== null) {
|
||||
setStatus({
|
||||
status: "Requested",
|
||||
action: ACTIONS.REQUESTED,
|
||||
disabled: true,
|
||||
text: "Requested",
|
||||
color: 'btn-info',
|
||||
color: "btn-info",
|
||||
});
|
||||
} else if (activity === 5 && checkInTime !== null) {
|
||||
|
||||
|
||||
setStatus({
|
||||
status: "Rejected",
|
||||
action: ACTIONS.REJECTED,
|
||||
disabled: true,
|
||||
text: "Rejected",
|
||||
color: 'btn-danger',
|
||||
color: "btn-danger",
|
||||
});
|
||||
|
||||
} else {
|
||||
setStatus({
|
||||
status: "Approved",
|
||||
action: ACTIONS.APPROVED,
|
||||
disabled: true,
|
||||
text: "Approved",
|
||||
color: 'btn-success',
|
||||
color: "btn-success",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}, [attendanceData]);
|
||||
|
||||
return status;
|
||||
|
||||
@ -21,7 +21,7 @@ import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
|
||||
|
||||
const AttendancePage = () => {
|
||||
const [activeTab, setActiveTab] = useState("all");
|
||||
|
||||
const [showOnlyCheckout, setShowOnlyCheckout] = useState(false);
|
||||
const loginUser = getCachedProfileData();
|
||||
var selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const { projects, loading: projectLoading } = useProjects();
|
||||
@ -86,6 +86,10 @@ const AttendancePage = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleToggle = (event) => {
|
||||
setShowOnlyCheckout(event.target.checked);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (modelConfig !== null) {
|
||||
openModel();
|
||||
@ -100,6 +104,17 @@ const AttendancePage = () => {
|
||||
dispatch(setProjectId(loginUser?.projects[0]));
|
||||
}
|
||||
}, [selectedProject, loginUser?.projects]);
|
||||
|
||||
// Filter attendance data based on the toggle
|
||||
// const filteredAttendance = showOnlyCheckout
|
||||
// ? attendances?.filter(
|
||||
// (att) => att?.checkOutTime !== null && att?.checkInTime !== null
|
||||
// )
|
||||
// : attendances;
|
||||
const filteredAttendance = showOnlyCheckout
|
||||
? attendances?.filter((att) => att?.checkOutTime === null)
|
||||
: attendances;
|
||||
|
||||
return (
|
||||
<>
|
||||
{isCreateModalOpen && modelConfig && (
|
||||
@ -161,6 +176,7 @@ const AttendancePage = () => {
|
||||
)}
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
<li className="nav-item">
|
||||
<button
|
||||
@ -170,7 +186,7 @@ const AttendancePage = () => {
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#navs-top-home"
|
||||
>
|
||||
All
|
||||
Today's
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
@ -197,6 +213,26 @@ const AttendancePage = () => {
|
||||
Regularization
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li
|
||||
className={`nav-item ms-auto ${
|
||||
activeTab === "regularization" ? "d-none" : ""
|
||||
}`}
|
||||
>
|
||||
<label className="switch switch-primary">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="switch-input"
|
||||
checked={showOnlyCheckout}
|
||||
onChange={handleToggle}
|
||||
/>
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on"></span>
|
||||
<span className="switch-off"></span>
|
||||
</span>
|
||||
<span className="switch-label m-2">Pending Actions</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="tab-content attedanceTabs py-2">
|
||||
{projectLoading && <span>Loading..</span>}
|
||||
@ -204,12 +240,12 @@ const AttendancePage = () => {
|
||||
|
||||
{activeTab === "all" && (
|
||||
<>
|
||||
{!projectLoading && attendances.length === 0 && (
|
||||
{!projectLoading && filteredAttendance?.length === 0 && (
|
||||
<p>No Employee assigned yet.</p>
|
||||
)}
|
||||
<div className="tab-pane fade show active py-0">
|
||||
<Attendance
|
||||
attendance={attendances}
|
||||
attendance={filteredAttendance}
|
||||
handleModalData={handleModalData}
|
||||
getRole={getRole}
|
||||
/>
|
||||
@ -222,6 +258,7 @@ const AttendancePage = () => {
|
||||
<AttendanceLog
|
||||
handleModalData={handleModalData}
|
||||
projectId={selectedProject}
|
||||
showOnlyCheckout={showOnlyCheckout}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -187,6 +187,13 @@ const DailyTask = () => {
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{!task_loading && TaskList.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={7} className="text-center">
|
||||
<p>No Reports Found</p>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{dates.map((date, i) => {
|
||||
return (
|
||||
<React.Fragment key={i}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user